Skip to content

Commit

Permalink
user accept email
Browse files Browse the repository at this point in the history
  • Loading branch information
@ipula
ipula committed Feb 9, 2024
1 parent befb7ef commit b08a9fb
Show file tree
Hide file tree
Showing 3 changed files with 311 additions and 45 deletions.
22 changes: 15 additions & 7 deletions src/pages/createUser/CreateUserPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,6 @@
:update-autosave-form="store.updateAutosaveForm"
/>
</template>
<template v-if="section.type === 'table'">
<CreateUserInvitedRoles :section="section" />
</template>
</panel-section>
</template>
<template v-if="step.type === 'form' && step.sections.length === 0">
Expand All @@ -51,16 +48,16 @@
</panel-section>
</template>
<template v-if="step.type === 'review'">
<panel-section v-for="section in step.sections" :key="section.id">
<panel-section>
<notification
v-if="Object.keys(store.errors).length"
type="warning"
>
{{ t('invitation.wizard.errors') }}
</notification>
<CreateUserReview
:page-title="store.pageTitle"
:page-title-description="store.pageTitleDescription"
:review-steps="store.steps"
:open-step="store.openStep"
/>
</panel-section>
</template>
Expand Down Expand Up @@ -115,7 +112,6 @@ import CreateUserForms from './CreateUserForms.vue';
import CreateUserAccount from './CreateUserAccount.vue';
import CreateUserReview from './CreateUserReview.vue';
import CreateUserVerifyOrcid from './CreateUserVerifyOrcid.vue';
import CreateUserInvitedRoles from './CreateUserInvitedRoles.vue';
const props = defineProps({
/** steps for invite user */
Expand All @@ -141,6 +137,18 @@ const props = defineProps({
type: String,
required: true,
},
csrfToken: {
type: String,
required: true,
},
invitationId: {
type: Number,
required: true,
},
invitationKey: {
type: String,
required: true,
},
});
console.log(props);
const {t} = useTranslation();
Expand Down
112 changes: 96 additions & 16 deletions src/pages/createUser/CreateUserPageStore.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {useTranslation} from '@/composables/useTranslation';

import {defineComponentStore} from '@/utils/defineComponentStore';
// import {useFetch} from '@/composables/useFetch';
import {useFetch} from '@/composables/useFetch';
import {computed, onMounted, ref, watch} from 'vue';
//let pageInitConfig = null;

Expand Down Expand Up @@ -31,19 +31,22 @@ export const useCreateUserPageStore = defineComponentStore(
const errors = ref({});
const startedSteps = ref([]);
const isModalOpened = ref(false);
const reviewSteps = ref([]);

const usernameField = ref({
label: t('user.username'),
name: 'username',
size: 'large',
value: '',
allErrors: {},
});
const passwordField = ref({
label: t('user.password'),
name: 'password',
size: 'large',
value: '',
inputType: 'password',
allErrors: {},
});
const password = ref('');
const username = ref('');
Expand Down Expand Up @@ -99,7 +102,7 @@ export const useCreateUserPageStore = defineComponentStore(
if (!currentStep.value) {
return '';
}
return currentStep.value.reviewName.replace(
return currentStep.value.stepName.replace(
'{$step}',
'STEP ' + (1 + currentStepIndex.value),
);
Expand Down Expand Up @@ -132,7 +135,7 @@ export const useCreateUserPageStore = defineComponentStore(

// Trigger validation on the review step
if (newVal === steps.value.length - 1) {
validate();
validateOnServer(steps.value[currentStepIndex.value].id);
}
});

Expand All @@ -141,6 +144,7 @@ export const useCreateUserPageStore = defineComponentStore(
*/
watch(errors, async (newVal, oldVal) => {
const keys = Object.keys(newVal);
console.log(errors, newVal);
steps.value.forEach((step, stepIndex) => {
step.sections.forEach((section, sectionIndex) => {
if (section.type === 'form') {
Expand All @@ -150,6 +154,9 @@ export const useCreateUserPageStore = defineComponentStore(
...steps.value[stepIndex].sections[sectionIndex].form.errors,
...{[field.name]: newVal[field.name]},
};
console.log(
steps.value[stepIndex].sections[sectionIndex].form.errors,
);
}
});
}
Expand All @@ -168,9 +175,13 @@ export const useCreateUserPageStore = defineComponentStore(

function passwordChange(fieldName, propName, newValue, localeKey) {
password.value = newValue;
passwordField.value.value = newValue;
passwordField.value.allErrors = {};
}
function usernameChange(fieldName, propName, newValue, localeKey) {
username.value = newValue;
usernameField.value.value = newValue;
usernameField.value.allErrors = {};
}
/**
* Add a step change to the browser history so the
Expand All @@ -189,6 +200,9 @@ export const useCreateUserPageStore = defineComponentStore(
if (isOnLastStep.value) {
submit();
} else {
if (!validateOnClient(steps.value[currentStepIndex.value].id)) {
return;
}
openStep(steps.value[1 + currentStepIndex.value].id);
}
}
Expand All @@ -203,9 +217,6 @@ export const useCreateUserPageStore = defineComponentStore(
if (!newStep) {
return;
}
if (stepId === 'userInvitedEmail') {
errors.value = {};
}
currentStepId.value = stepId;
}

Expand All @@ -225,7 +236,83 @@ export const useCreateUserPageStore = defineComponentStore(
* Always wait for autosaves to complete before
* trying to validate
*/
function validate() {}
function validateOnClient(stepId) {
let isValidate = true;
usernameField.value.allErrors = {};
passwordField.value.allErrors = {};
if (stepId === 'userCreate') {
if (username.value === '') {
usernameField.value.allErrors.username = ['this field is required'];
isValidate = false;
}
if (password.value === '') {
passwordField.value.allErrors.password = ['this field is required'];
isValidate = false;
}
}

return isValidate;
}
/**
* Validate the user details
*
* Always wait for autosaves to complete before
* trying to validate
*/
async function validateOnServer(stepId) {
let isValidate = true;
const body = {
username: username.value,
password: password.value,
invitationId: pageInitConfig.invitationId,
invitationKey: pageInitConfig.invitationKey,
_validateOnly: true,
};
steps.value.forEach((step) => {
step.sections.forEach((section) => {
if (section.type === 'form' || section.length > 0) {
section.form.fields.forEach((field) => {
body[field.name] = field.value;
});
}
});
});
const {
data: res,
validationError,
fetch,
} = useFetch(pageInitConfig.createAccountApiUrl, {
expectValidationError: true,
method: 'POST',
body: body,
});
await fetch();
if (validationError.value) {
isValidate = false;
errors.value = validationError.value;
steps.value.forEach((step) => {
if (step.id !== 'userCreate') {
return;
}
step['review'][0] = {
username: username,
password: password,
errors: {
['username']: errors.value.username
? errors.value.username
: null,
['password']: errors.value.password
? errors.value.password
: null,
},
};
});
console.log(steps.value);
} else if (res.value && !validationError.value) {
console.log(res.value);
}
return isValidate;
}

/**
* Update an autosave form
Expand Down Expand Up @@ -256,6 +343,7 @@ export const useCreateUserPageStore = defineComponentStore(
* @param {Object} data
*/
function updateForm(formId, data) {
console.log(formId, data);
steps.value.forEach((step, stepIndex) => {
step.sections.forEach((section, sectionIndex) => {
if (section.type !== 'form' || section.form.id !== formId) {
Expand All @@ -265,15 +353,6 @@ export const useCreateUserPageStore = defineComponentStore(
...steps.value[stepIndex].sections[sectionIndex].form,
...data,
};
steps.value[stepIndex].sections[sectionIndex].form.fields.forEach(
(field) => {
if (data[field.name] instanceof Object) {
field.value = data[field.name][pageInitConfig.primaryLocale];
} else {
field.value = data[field.name];
}
},
);
});
});
}
Expand Down Expand Up @@ -327,6 +406,7 @@ export const useCreateUserPageStore = defineComponentStore(
steps,
pageTitleDescription,
errors,
reviewSteps,

//form feilds
passwordField,
Expand Down
Loading

0 comments on commit b08a9fb

Please sign in to comment.