diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/composables/Users.ts b/{{cookiecutter.project_slug}}/clients/web/vue3/src/composables/Users.ts index c2d1310a3..20f92d231 100644 --- a/{{cookiecutter.project_slug}}/clients/web/vue3/src/composables/Users.ts +++ b/{{cookiecutter.project_slug}}/clients/web/vue3/src/composables/Users.ts @@ -26,9 +26,9 @@ export function useUsers() { const loading = ref(false) const { errorAlert, successAlert } = useAlert() - const getCodeUidFromRoute = () => { - const { uid, token } = router.currentRoute.value.params - return { uid, token } + const getEmailFromRoute = () => { + const { email } = router.currentRoute.value.params + return { email } } const { data: user, mutate: login } = useMutation({ @@ -58,15 +58,17 @@ export function useUsers() { const { mutate: requestPasswordReset } = useMutation({ mutationFn: async (email: string) => { await userApi.csc.requestPasswordReset({ email }) + return email }, onError: (error: Error) => { loading.value = false console.log(error) }, - onSuccess: () => { + onSuccess: (email: string) => { loading.value = false - successAlert('Password reset link sent to your email') + successAlert('Password reset code to your email') qc.invalidateQueries({ queryKey: ['user'] }) + router.push({ name: 'ResetPassword', params: { email } }) }, }) @@ -115,6 +117,6 @@ export function useUsers() { user, register, registerForm, - getCodeUidFromRoute, + getEmailFromRoute, } } diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/router/index.js b/{{cookiecutter.project_slug}}/clients/web/vue3/src/router/index.js index 5cfd08232..2728f9b9c 100644 --- a/{{cookiecutter.project_slug}}/clients/web/vue3/src/router/index.js +++ b/{{cookiecutter.project_slug}}/clients/web/vue3/src/router/index.js @@ -31,7 +31,7 @@ const routes = [ beforeEnter: requireNoAuth, }, { - path: '/password/reset/confirm/:uid/:token', + path: '/password/reset/confirm/:email', name: 'ResetPassword', component: () => import(/* webpackChunkName: "confirmreset" */ '../views/ResetPassword.vue'), beforeEnter: requireNoAuth, diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/api.ts b/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/api.ts index 572005dca..e0506dad0 100644 --- a/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/api.ts +++ b/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/api.ts @@ -29,7 +29,7 @@ const resetPassword = createCustomServiceCall({ outputShape: userShape, cb: async ({ client, input, utils }) => { const { password } = utils.toApi(input) - const res = await client.post(`/password/reset/confirm/${input.uid}/${input.token}/`, { + const res = await client.post(`/password/reset/confirm/${input.email}/`, { password, }) return utils.fromApi(res.data) diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/forms.ts b/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/forms.ts index bd4504703..54b82d1ae 100644 --- a/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/forms.ts +++ b/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/forms.ts @@ -90,24 +90,24 @@ export class EmailForgotPasswordForm extends Form { export type TEmailForgotPasswordForm = EmailForgotPasswordForm & EmailForgotPasswordInput export type ResetPasswordInput = { - uid: IFormField - token: IFormField + email: IFormField + code: IFormField password: IFormField confirmPassword: IFormField } export class ResetPasswordForm extends Form { - static uid = new FormField({ - label: 'UID', - placeholder: 'uid', - type: 'text', - validators: [new RequiredValidator({ message: 'Please enter a valid uid' })], + static email = FormField.create({ + label: 'Email', + placeholder: 'Email', + type: 'email', + validators: [new EmailValidator({ message: 'Please enter a valid email' })], }) - static token = new FormField({ - placeholder: 'Verification Token', + static code = new FormField({ + placeholder: 'Verification Code', type: 'text', validators: [ - new MinLengthValidator({ message: 'Please enter a valid 5 digit code', minLength: 5 }), + new MinLengthValidator({ message: 'Please enter a valid code', minLength: 5 }), ], }) static password = FormField.create({ diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/models.ts b/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/models.ts index ebc1bfa82..957472997 100644 --- a/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/models.ts +++ b/{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/models.ts @@ -41,8 +41,8 @@ export const loginShape = { export type LoginShape = GetInferredFromRaw export const resetPasswordShape = { - uid: z.string().uuid(), - token: z.string(), + email: z.string().email(), + code: z.string(), password: z.string(), } diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/ResetPassword.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/ResetPassword.vue index 811fda344..60b0bb6d3 100644 --- a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/ResetPassword.vue +++ b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/ResetPassword.vue @@ -8,6 +8,16 @@
+ +