Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accept Inviation: Steps 18 and 28 #5

Open
wants to merge 2 commits into
base: accept-invitation
Choose a base branch
from
Open

Accept Inviation: Steps 18 and 28 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b246402
add changes to form views
ipula Jul 3, 2024
66caaa7
Accept Inviation: Steps 18 and 28
withanage Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 25 additions & 2 deletions public/globals.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -527,13 +527,36 @@ window.pkp = {
'submissions.incomplete': 'Incomplete',
todo: '##todo##',
'user.email': 'Email',
'user.emailAddress': 'Email Address',
'user.orcid': 'ORCID iD',
'user.username': 'Username',
'user.password': 'Password',
'user.givenName': 'Given Name',
'user.familyName': 'Family Name',
'user.affiliation': 'Affiliation',
'user.country': 'Country',
'validator.required': 'This field is required.',
'invitation.notification.closeBtn':'View all users',
'user.password': 'Password',
'invitation.orcid.acceptInvitation.message':'Not verified. You can verify your ORCID iD from your profile section in OJS',

'userInvitation.emailField.description':'e.g. aeinstein@example.com',
'userInvitation.usernameField.description':'e.g. mickeymouse',
'userInvitation.orcidField.description':'e.g. 0000-0000-0000-0000',
'userInvitation.roleTable.role':'Role',
'userInvitation.roleTable.startDate':'Start Date',
'userInvitation.roleTable.endDate':'End Date',
'userInvitation.roleTable.journalMasthead':'Journal Masthead',
'userInvitation.modal.title':'Invitation Sent',
'userInvitation.modal.message':'{$email} has been invited to new role in OJS.You can be updated about users on the User and Roles page, your ojs notification and/ or your email',
'userInvitation.modal.button':'View All Users',
'acceptInvitation.usernameField.description':'It should be 10 characters long and could be a combination of uppercase letters, lowercase letters or numbers',
'acceptInvitation.passwordField.description':'It should be 12 characters long and should be a combination of uppercase letters, lowercase letters, numbers and symbols',
'acceptInvitation.review.userDetails':'User Details',
'acceptInvitation.review.accountDetails':'Account Details',
'acceptInvitation.verifyOrcid':'verify ORCID iD',
'acceptInvitation.skipVerifyOrcid':'Skip ORCID verification',
'acceptInvitation.modal.title':"You've been assigned a new role in OJS",
'acceptInvitation.modal.message':'Congratulations on your new role in OJS! You might now have access to new options. If you need assistance navigating the system, please click on the “Help” buttons throughout the interface for guidance',
'acceptInvitation.modal.button':'View All Submissions',
},

tinyMCE: {
Expand Down
37 changes: 23 additions & 14 deletions src/pages/acceptInvitation/AcceptInvitationPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<div class="userInvitation">
<div class="acceptInvitation">
<AcceptInvitationHeader
:page-title="store.pageTitle"
:page-title-description="store.pageTitleDescription"
/>
<Steps
v-if="store.steps.length"
class="userInvitation__steps"
class="acceptInvitation__steps"
:current="store.currentStep.id"
:started-steps="store.startedSteps"
:label="t('invitation.wizard.completeSteps')"
Expand All @@ -24,7 +24,7 @@
<Panel class="decision__stepPanel">
<PanelSection class="decision__stepHeader">
<h2>{{ store.stepTitle }}</h2>
<p class="error">{{ store.errors.error }}</p>
<p class="text-red font-bold">{{ store.errors.error }}</p>
<p>{{ step.description }}</p>
</PanelSection>
<PanelSection v-for="section in step.sections" :key="section.id">
Expand All @@ -45,7 +45,7 @@
</Panel>
</Step>
</Steps>
<ButtonRow class="panel panel--wide userInvitationForm__footer">
<ButtonRow class="panel panel--wide acceptInvitationForm__footer">
<PkpButton @click="store.cancel">Cancel</PkpButton>
<PkpButton v-if="!store.isOnFirstStep" @click="store.previousStep">
Previous
Expand Down Expand Up @@ -123,7 +123,7 @@ const acceptInvitationComponents = {
<style lang="less">
@import '../../styles/_import';

.userInvitation .app__pageHeading {
.acceptInvitation .app__pageHeading {
display: flex;
margin: 2rem 0 0.25rem;

Expand All @@ -132,21 +132,21 @@ const acceptInvitationComponents = {
}
}

.userInvitation .pkpSteps__buttonWrapper {
.acceptInvitation .pkpSteps__buttonWrapper {
border: @bg-border-light;
border-bottom: 0;
border-top-left-radius: @radius;
border-top-right-radius: @radius;
}

.userInvitation__submissionDetails,
.userInvitation__submissionConfiguration {
.acceptInvitation__submissionDetails,
.acceptInvitation__submissionConfiguration {
font-size: @font-sml;
line-height: @line-sml;
}

// Override the form locale switcher styles
.userInvitation__stepForm .pkpFormLocales {
.acceptInvitation__stepForm .pkpFormLocales {
border: none;
margin-top: -1rem;
margin-bottom: 1rem;
Expand All @@ -159,12 +159,12 @@ const acceptInvitationComponents = {

// Hide the form footer for each form, since
// buttons and errors are handled separately
.userInvitation__stepForm .pkpFormPage__footer {
.acceptInvitation__stepForm .pkpFormPage__footer {
display: none;
}

// buttons and errors are handled separately
.userInvitationForm__footer {
.acceptInvitationForm__footer {
padding: 2rem;
display: flex;
justify-content: flex-end;
Expand All @@ -175,8 +175,17 @@ const acceptInvitationComponents = {
margin-inline-start: 0.5rem;
}
}
.error {
color: red;
font-weight: bold;
.acceptInvitation__stepHeader {
h2 {
margin: 0;
font-size: @font-large;
line-height: @line-large;
}

p {
margin: 0.5rem 0 0;
font-size: @font-sml;
line-height: @line-sml-tight;
}
}
</style>
12 changes: 10 additions & 2 deletions src/pages/acceptInvitation/AcceptInvitationPageStore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {defineComponentStore} from '@/utils/defineComponentStore';
import {useTranslation} from '@/composables/useTranslation';
import {useFetch} from '@/composables/useFetch';
import {computed, onMounted, ref, watch} from 'vue';
import {useUrl} from '@/composables/useUrl';
Expand All @@ -8,6 +9,7 @@ export const useAcceptInvitationPageStore = defineComponentStore(
'userInvitationPage',
(pageInitConfig) => {
const {openDialog} = useModal();
const {t} = useTranslation();

/** Accept invitation payload, initial value*/
const acceptinvitationPayload = ref({});
Expand Down Expand Up @@ -108,6 +110,10 @@ export const useAcceptInvitationPageStore = defineComponentStore(
return currentStepIndex.value === steps.value.length - 1;
});

const formSteps = computed(() => {
return steps.value.filter((step) => step.type === 'form');
});

/**
* Add a step change to the browser history so the
* user can use the browser's back button
Expand Down Expand Up @@ -312,10 +318,11 @@ export const useAcceptInvitationPageStore = defineComponentStore(
await fetch();
if (data.value) {
openDialog({
title: 'You have been added as a Section Editor in OJS',
title: t('acceptInvitation.modal.title'),
message: t('acceptInvitation.modal.message'),
actions: [
{
label: 'Ok',
label: t('acceptInvitation.modal.button'),
callback: (close) => {
close();
},
Expand Down Expand Up @@ -348,6 +355,7 @@ export const useAcceptInvitationPageStore = defineComponentStore(
pageTitleDescription,
errors,
stepButtonTitle,
formSteps,

//methods
nextStep,
Expand Down
143 changes: 49 additions & 94 deletions src/pages/acceptInvitation/AcceptInvitationReview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,67 @@
<template>
<div>
<div v-if="store.userId === null" class="acceptInvitation__reviewPanel">
<div class="acceptInvitation__reviewPanel__header">
<h3>Account Details</h3>
<div v-if="store.userId === null" class="border border-solid border-[#ddd]">
<div class="flex items-center px-2 py-4">
<h3>{{ t('acceptInvitation.review.accountDetails') }}</h3>
</div>
<div class="acceptInvitation__reviewPanel__item">
<h4 class="acceptInvitation__reviewPanel__item__header">Username</h4>
<div class="acceptInvitation__reviewPanel__item__value">
{{ store.acceptinvitationPayload.username }}
</div>
<h4 class="acceptInvitation__reviewPanel__item__header">Password</h4>
<div class="acceptInvitation__reviewPanel__item__value">
{{ store.acceptinvitationPayload.password }}
</div>
<div class="p-4">
<FormDisplayItemBasic
heading-element="h4"
:heading="t('user.username')"
:value="store.acceptinvitationPayload.username"
></FormDisplayItemBasic>
<FormDisplayItemBasic
heading-element="h4"
:heading="t('user.password')"
:value="store.acceptinvitationPayload.password"
></FormDisplayItemBasic>
</div>
</div>
<div class="acceptInvitation__reviewPanel">
<div class="acceptInvitation__reviewPanel__header">
<h3>User Details</h3>
<div class="border-b border-l border-r border-solid border-[#ddd]">
<div class="flex items-center px-2 py-4">
<h3>{{ t('acceptInvitation.review.userDetails') }}</h3>
<PkpButton
v-if="store.userId === null"
class="acceptInvitation__reviewPanel__edit"
class="ms-auto"
@click="store.openStep('userDetails')"
>
edit
{{ t('common.edit') }}
</PkpButton>
</div>
<div class="acceptInvitation__reviewPanel__item">
<template v-if="store.userId === null">
<h4 class="acceptInvitation__reviewPanel__item__header">Email</h4>
<div class="acceptInvitation__reviewPanel__item__value">
{{ store.email }}
</div>
</template>
<h4 class="acceptInvitation__reviewPanel__item__header">ORCID ID</h4>
<div class="acceptInvitation__reviewPanel__item__value">
{{
<div class="p-4">
<FormDisplayItemBasic
heading-element="h4"
:heading="t('user.email')"
:value="store.email"
></FormDisplayItemBasic>
<FormDisplayItemBasic
heading-element="h4"
:heading="t('user.orcid')"
:value="
store.acceptinvitationPayload.orcid
? store.acceptinvitationPayload.orcid
: t('invitation.orcid.acceptInvitation.message')
}}
<Icon
v-if="store.acceptinvitationPayload.orcid"
icon="orcid"
:inline="true"
/>
"
></FormDisplayItemBasic>
<Icon
v-if="store.acceptinvitationPayload.orcid"
icon="orcid"
:inline="true"
/>
<div v-for="step in store.formSteps" :key="step.id">
<template v-if="step.id === 'userDetails'">
<div v-for="section in step.sections" :key="section.id">
<FormDisplay v-bind="section.props.form"></FormDisplay>
</div>
</template>
</div>
<template v-if="store.userId === null">
<h4 class="acceptInvitation__reviewPanel__item__header">
Given Name
</h4>
<div class="acceptInvitation__reviewPanel__item__value">
{{ store.acceptinvitationPayload.givenName }}
</div>
<h4 class="acceptInvitation__reviewPanel__item__header">
Family Name
</h4>
<div class="acceptInvitation__reviewPanel__item__value">
{{ store.acceptinvitationPayload.familyName }}
</div>
<h4 class="acceptInvitation__reviewPanel__item__header">
Affiliation
</h4>
<div class="acceptInvitation__reviewPanel__item__value">
{{ store.acceptinvitationPayload.affiliation }}
</div>
<h4 class="acceptInvitation__reviewPanel__item__header">Country</h4>
<div class="acceptInvitation__reviewPanel__item__value">
{{ store.acceptinvitationPayload.country }}
</div>
</template>
</div>
</div>
<div class="acceptInvitation__reviewPanel">
<div class="acceptInvitation__reviewPanel__header">
<div class="border-b border-l border-r border-solid border-[#ddd]">
<div class="flex items-center px-2 py-4">
<h3>Roles</h3>
</div>
<div class="acceptInvitation__reviewPanel__item">
<div class="p-4">
<AcceptInvitationUserRoles
:rows="store.acceptinvitationPayload.userGroupsToAdd"
/>
Expand All @@ -87,45 +72,15 @@

<script setup>
import {defineProps} from 'vue';
import {useTranslation} from '@/composables/useTranslation';
import AcceptInvitationUserRoles from './AcceptInvitationUserRoles.vue';
import {useAcceptInvitationPageStore} from './AcceptInvitationPageStore';
import Icon from '@/components/Icon/Icon.vue';
import PkpButton from '@/components/Button/Button.vue';
import FormDisplay from '@/components/FormDisplay/FormDisplay.vue';
import FormDisplayItemBasic from '@/components/FormDisplay/FormDisplayItemBasic.vue';

defineProps({});
const store = useAcceptInvitationPageStore();
const {t} = useTranslation();
</script>
<style>
.acceptInvitation__reviewPanel__item {
padding: 1rem;

&:last-child {
border-bottom: none;
}

.pkpNotification {
margin-bottom: 0.5rem;
}
}
.acceptInvitation__reviewPanel {
border: 1px solid #ddd;
}
.acceptInvitation__reviewPanel__header {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
.acceptInvitation__reviewPanel__item__header {
margin: 0;
font-size: 0.875rem;
line-height: 1.5rem;
}
.acceptInvitation__reviewPanel__item__value {
margin-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.5rem;
}
.acceptInvitation__reviewPanel__edit {
margin-inline-start: auto;
}
</style>
Loading