Skip to content

Commit

Permalink
add tailwind css classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ipula
ipula committed Jul 16, 2024
1 parent 4891601 commit f61ad78
Show file tree
Hide file tree
Showing 23 changed files with 759 additions and 551 deletions.
30 changes: 28 additions & 2 deletions public/globals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,7 @@ window.pkp = {
'common.view': 'View',
'common.viewWithName': 'View {$name}',
'common.yes': 'Yes',
'common.back': 'Back',
'dashboard.acceptOrDeclineRequestDate':
'Please accept or decline this request {$date}',
'dashboard.action': 'Action',
Expand Down Expand Up @@ -527,13 +528,38 @@ 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. [email protected]',
'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',
'acceptInvitation.privacyStatement.btn':'Privacy Statement',
'acceptInvitation.privacyStatement.label':'Yes, I agree to have my data collected and stored according to the',
},

tinyMCE: {
Expand Down
17 changes: 0 additions & 17 deletions src/pages/acceptInvitation/AcceptInvitationHeader.vue
View file

This file was deleted.

89 changes: 85 additions & 4 deletions src/pages/acceptInvitation/AcceptInvitationPage.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import AcceptInvitationPage from './AcceptInvitationPage.vue';
import {http, HttpResponse} from 'msw';
import PageInitConfigMock from './mocks/pageInitConfig';
import invitationMock from './mocks/invitationMock';
import pageInitConfigUserVerifiedOrcid from './mocks/pageInitConfigUserVerifiedOrcid';
import pageInitConfigUserNotVerifiedOrcid from './mocks/pageInitConfigUserNotVerifiedOrcid';
import invitationNewUserMock from './mocks/invitationNewUserMock';
import invitationUserVerifiedOrcidMock from './mocks/invitationUserVerifiedOrcidMock';
import invitationUserNotVerifiedOrcidMock from './mocks/invitationUserNotVerifiedOrcidMock';

export default {
title: 'Pages/AcceptInvitation',
component: AcceptInvitationPage,
};

export const Init = {
export const NewUser = {
render: (args) => ({
components: {AcceptInvitationPage},
setup() {
Expand All @@ -22,7 +26,7 @@ export const Init = {
http.get(
'https://mock/index.php/publicknowledge/api/v1/invitations/65/key/8aqc3W',
async (r) => {
return HttpResponse.json(invitationMock, {status: 200});
return HttpResponse.json(invitationNewUserMock, {status: 200});
},
),
http.post(
Expand All @@ -40,6 +44,9 @@ export const Init = {
if (!Object.keys(postBody).includes('affiliation')) {
errors['affiliation'] = ['This field is required'];
}
if (!Object.keys(postBody).includes('familyName')) {
errors['familyName'] = ['This field is required'];
}
if (!Object.keys(postBody).includes('country')) {
errors['country'] = ['This field is required'];
}
Expand All @@ -60,11 +67,85 @@ export const Init = {
http.post(
'https://mock/index.php/publicknowledge/api/v1/invitations/65/key/8aqc3W/finalize',
async (r) => {
return HttpResponse.json(invitationMock, {status: 201});
return HttpResponse.json({}, {status: 201});
},
),
],
},
},
args: PageInitConfigMock,
};

export const ExistingUserWithOrcidVerified = {
render: (args) => ({
components: {AcceptInvitationPage},
setup() {
return {args};
},
template: '<AcceptInvitationPage v-bind="args" />',
}),
parameters: {
msw: {
handlers: [
http.get(
'https://mock/index.php/publicknowledge/api/v1/invitations/65/key/8aqc3W',
async (r) => {
return HttpResponse.json(invitationUserVerifiedOrcidMock, {
status: 200,
});
},
),
http.post(
'https://mock/index.php/publicknowledge/api/v1/invitations/65/key/8aqc3W/refine',
async () => {
return HttpResponse.json({}, {status: 200});
},
),
http.post(
'https://mock/index.php/publicknowledge/api/v1/invitations/65/key/8aqc3W/finalize',
async (r) => {
return HttpResponse.json({}, {status: 201});
},
),
],
},
},
args: pageInitConfigUserVerifiedOrcid,
};

export const ExistingUserWithNotOrcidVerified = {
render: (args) => ({
components: {AcceptInvitationPage},
setup() {
return {args};
},
template: '<AcceptInvitationPage v-bind="args" />',
}),
parameters: {
msw: {
handlers: [
http.get(
'https://mock/index.php/publicknowledge/api/v1/invitations/65/key/8aqc3W',
async (r) => {
return HttpResponse.json(invitationUserNotVerifiedOrcidMock, {
status: 200,
});
},
),
http.post(
'https://mock/index.php/publicknowledge/api/v1/invitations/65/key/8aqc3W/refine',
async () => {
return HttpResponse.json({}, {status: 200});
},
),
http.post(
'https://mock/index.php/publicknowledge/api/v1/invitations/65/key/8aqc3W/finalize',
async (r) => {
return HttpResponse.json({}, {status: 201});
},
),
],
},
},
args: pageInitConfigUserNotVerifiedOrcid,
};
135 changes: 39 additions & 96 deletions src/pages/acceptInvitation/AcceptInvitationPage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
<template>
<div class="userInvitation">
<AcceptInvitationHeader
:page-title="store.pageTitle"
:page-title-description="store.pageTitleDescription"
/>
<div v-if="store.steps.length">
<Steps
v-if="store.steps.length"
class="userInvitation__steps"
class="border-x border-t border-light"
:current="store.currentStep.id"
:started-steps="store.startedSteps"
:label="t('invitation.wizard.completeSteps')"
Expand All @@ -21,34 +16,46 @@
:key="step.id"
:label="step.name"
>
<Panel class="decision__stepPanel">
<PanelSection class="decision__stepHeader">
<h2>{{ store.stepTitle }}</h2>
<p class="error">{{ store.errors.error }}</p>
<p>{{ step.description }}</p>
</PanelSection>
<PanelSection v-for="section in step.sections" :key="section.id">
<template v-if="step.type === 'review'">
<notification
v-if="Object.keys(store.errors).length > 0"
type="warning"
>
{{ t('invitation.wizard.errors') }}
</notification>
</template>
<component
:is="acceptInvitationComponents[section.sectionComponent]"
:key="section.sectionComponent"
v-bind="section.props"
/>
</PanelSection>
</Panel>
<div class="border-b border-light">
<div class="flex border-b border-light p-4">
<div class="min-w-px flex-1">
<h2 class="text-xl-bold text-heading">
{{ store.stepTitle }}
</h2>
<p class="font-bold text-negative">{{ store.errors.error }}</p>
<p class="mt-1 text-lg-normal">
{{ step.description }}
</p>
</div>
</div>
<div v-for="section in step.sections" :key="section.id" class="flex">
<div class="flex-1">
<template v-if="step.type === 'review'">
<notification
v-if="Object.keys(store.errors).length > 0"
type="warning"
>
{{ t('invitation.wizard.errors') }}
</notification>
</template>
<component
:is="acceptInvitationComponents[section.sectionComponent]"
:key="section.sectionComponent"
v-bind="section.props"
/>
</div>
</div>
</div>
</Step>
</Steps>
<ButtonRow class="panel panel--wide userInvitationForm__footer">
<PkpButton @click="store.cancel">Cancel</PkpButton>
<ButtonRow
class="flex items-center justify-end border border-t-0 border-light p-8"
>
<PkpButton :is-warnable="true" @click="store.cancel">
{{ t('common.cancel') }}
</PkpButton>
<PkpButton v-if="!store.isOnFirstStep" @click="store.previousStep">
Previous
{{ t('common.back') }}
</PkpButton>
<PkpButton
v-if="!store.isOnFirstStep"
Expand All @@ -64,14 +71,11 @@
<script setup>
import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
import PkpButton from '@/components/Button/Button.vue';
import Panel from '@/components/Panel/Panel.vue';
import PanelSection from '@/components/Panel/PanelSection.vue';
import Steps from '@/components/Steps/Steps.vue';
import Step from '@/components/Steps/Step.vue';
import {useAcceptInvitationPageStore} from './AcceptInvitationPageStore';
import {useTranslation} from '@/composables/useTranslation';
import {ref} from 'vue';
import AcceptInvitationHeader from './AcceptInvitationHeader.vue';
import AcceptInvitationUserDetailsForms from './AcceptInvitationUserDetailsForms.vue';
import AcceptInvitationUserAccountDetails from './AcceptInvitationUserAccountDetails.vue';
import AcceptInvitationReview from './AcceptInvitationReview.vue';
Expand Down Expand Up @@ -119,64 +123,3 @@ const acceptInvitationComponents = {
AcceptInvitationReview,
};
</script>

<style lang="less">
@import '../../styles/_import';
.userInvitation .app__pageHeading {
display: flex;
margin: 2rem 0 0.25rem;
> .pkpButton {
margin-inline-start: auto;
}
}
.userInvitation .pkpSteps__buttonWrapper {
border: @bg-border-light;
border-bottom: 0;
border-top-left-radius: @radius;
border-top-right-radius: @radius;
}
.userInvitation__submissionDetails,
.userInvitation__submissionConfiguration {
font-size: @font-sml;
line-height: @line-sml;
}
// Override the form locale switcher styles
.userInvitation__stepForm .pkpFormLocales {
border: none;
margin-top: -1rem;
margin-bottom: 1rem;
padding-right: 0;
.pkpFormLocales__locale--isPrimary {
border: none;
}
}
// Hide the form footer for each form, since
// buttons and errors are handled separately
.userInvitation__stepForm .pkpFormPage__footer {
display: none;
}
// buttons and errors are handled separately
.userInvitationForm__footer {
padding: 2rem;
display: flex;
justify-content: flex-end;
align-items: center;
border: none;
* + .pkpButton {
margin-inline-start: 0.5rem;
}
}
.error {
color: red;
font-weight: bold;
}
</style>
Loading

0 comments on commit f61ad78

Please sign in to comment.