Vue - Add reset password with code

thinknimble · Nov 29, 2024 · a63e1e1 · a63e1e1
1 parent e57f784
commit a63e1e1
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -90,24 +90,24 @@ export class EmailForgotPasswordForm extends Form<EmailForgotPasswordInput> {
 export type TEmailForgotPasswordForm = EmailForgotPasswordForm & EmailForgotPasswordInput
 
 export type ResetPasswordInput = {
-  uid: IFormField<string>
-  token: IFormField<string>
+  email: IFormField<string>
+  code: IFormField<string>
   password: IFormField<string>
   confirmPassword: IFormField<string>
 }
 
 export class ResetPasswordForm extends Form<ResetPasswordInput> {
-  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
@@ -41,8 +41,8 @@ export const loginShape = {
 export type LoginShape = GetInferredFromRaw<typeof loginShape>
 
 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
@@ -8,6 +8,16 @@
     </div>
     <div class="mt-6 sm:mx-auto sm:w-full sm:max-w-sm">
       <form @submit.prevent="resetPassword(form.value)">
+        <InputField
+          v-model:value="form.code.value"
+          :errors="form.code.errors"
+          @blur="form.code.validate()"
+          type="string"
+          label="Code"
+          placeholder="Code"
+          :id="form.code.id"
+        />
+
         <InputField
           v-model:value="form.password.value"
           :errors="form.password.errors"
@@ -48,11 +58,10 @@ export default {
     InputField,
   },
   setup() {
-    const { resetPasswordForm, loading, resetPassword, getCodeUidFromRoute } = useUsers()
-    const { uid, token } = getCodeUidFromRoute()
+    const { resetPasswordForm, loading, resetPassword, getEmailFromRoute } = useUsers()
+    const { email } = getEmailFromRoute()
 
-    resetPasswordForm.uid.value = uid
-    resetPasswordForm.token.value = token
+    resetPasswordForm.email.value = email
 
     return {
       form: resetPasswordForm,