Update reset password fe in React

thinknimble · Aug 30, 2024 · 1b2dd00 · 1b2dd00
1 parent 1195d6e
commit 1b2dd00
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 74 deletions.
diff --git a/{{cookiecutter.project_slug}}/clients/web/react/src/pages/request-password-reset.tsx b/{{cookiecutter.project_slug}}/clients/web/react/src/pages/request-password-reset.tsx
@@ -16,15 +16,14 @@ import { getErrorMessages } from 'src/utils/errors'
 
 export const RequestPasswordResetInner = () => {
   const [errorMessage, setErrorMessage] = useState<string[] | undefined>()
-  const [resetLinkSent, setResetLinkSent] = useState(false)
   const { createFormFieldChangeHandler, form } = useTnForm<TEmailForgotPasswordForm>()
   const navigate = useNavigate()
 
   const { mutate: requestReset } = useMutation({
     mutationFn: userApi.csc.requestPasswordReset,
     onSuccess: (data) => {
       setErrorMessage(undefined)
-      setResetLinkSent(true)
+      navigate('/password/reset/confirm/' + form.email.value)
     },
     onError(e: any) {
       const errors = getErrorMessages(e)
@@ -42,58 +41,32 @@ export const RequestPasswordResetInner = () => {
   return (
     <AuthLayout title="Request Password Reset">
       <div className="mt-6 sm:mx-auto sm:w-full sm:max-w-sm">
-        {resetLinkSent ? (
-          <>
-            <p className="text-md">
-              Your request has been submitted. If there is an account associated with the email
-              provided, you should receive an email momentarily with instructions to reset your
-              password.
-            </p>
-            <p className="text-md">
-              If you do not see the email in your main folder soon, please make sure to check your
-              spam folder.
-            </p>
-            <div className="pt-6">
-              <Button
-                onClick={() => {
-                  navigate('/log-in')
-                }}
-                variant="primary"
-              >
-                Return to Login
-              </Button>
-            </div>
-          </>
-        ) : (
-          <>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault()
-              }}
-              className="flex flex-col gap-2"
-            >
-              <Input
-                placeholder="Enter email..."
-                onChange={(e) => createFormFieldChangeHandler(form.email)(e.target.value)}
-                value={form.email.value ?? ''}
-                data-cy="email"
-                id="id"
-                label="Email address"
-              />
-              <ErrorsList errors={form.email.errors} />
-              <div className="mb-2">
-                <ErrorMessage>{errorMessage}</ErrorMessage>
-              </div>
-              <Button
-                onClick={handleRequest}
-                disabled={!form.isValid}
-                variant={form.isValid ? 'primary' : 'disabled'}
-              >
-                Request Password Reset
-              </Button>
-            </form>
-          </>
-        )}
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+          }}
+          className="flex flex-col gap-2"
+        >
+          <Input
+            placeholder="Enter email..."
+            onChange={(e) => createFormFieldChangeHandler(form.email)(e.target.value)}
+            value={form.email.value ?? ''}
+            data-cy="email"
+            id="id"
+            label="Email address"
+          />
+          <ErrorsList errors={form.email.errors} />
+          <div className="mb-2">
+            <ErrorMessage>{errorMessage}</ErrorMessage>
+          </div>
+          <Button
+            onClick={handleRequest}
+            disabled={!form.isValid}
+            variant={form.isValid ? 'primary' : 'disabled'}
+          >
+            Request Password Reset
+          </Button>
+        </form>
       </div>
     </AuthLayout>
   )

diff --git a/{{cookiecutter.project_slug}}/clients/web/react/src/pages/reset-password.tsx b/{{cookiecutter.project_slug}}/clients/web/react/src/pages/reset-password.tsx
@@ -12,8 +12,7 @@ import { ResetPasswordForm, TResetPasswordForm, userApi } from 'src/services/use
 
 export const ResetPasswordInner = () => {
   const { form, createFormFieldChangeHandler, overrideForm } = useTnForm<TResetPasswordForm>()
-  const { userId, token } = useParams()
-  console.log(userId, token)
+  const { userEmail } = useParams()
   const [error, setError] = useState('')
   const [success, setSuccess] = useState(false)
 
@@ -32,19 +31,19 @@ export const ResetPasswordInner = () => {
   })
 
   useEffect(() => {
-    if (token && userId) {
-      overrideForm(ResetPasswordForm.create({ token: token, uid: userId }) as TResetPasswordForm)
+    if (userEmail) {
+      overrideForm(ResetPasswordForm.create({ email: userEmail }) as TResetPasswordForm)
     }
-  }, [overrideForm, token, userId])
+  }, [overrideForm, userEmail])
 
   const onSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     console.log(form.value)
 
     if (form.isValid) {
       confirmResetPassword({
-        userId: form.value.uid!,
-        token: form.value.token!,
+        email: form.value.email!,
+        code: form.value.code!,
         password: form.value.password!,
       })
     }
@@ -63,10 +62,18 @@ export const ResetPasswordInner = () => {
     )
   }
   return (
-    <AuthLayout title="Reset password" description="Choose a new password">
+    <AuthLayout title="Reset password" description="Enter verification code sent to your email and choose a new password">
       <div className="mt-6 sm:mx-auto sm:w-full sm:max-w-sm">
         <form className="flex w-full flex-col gap-3" onSubmit={onSubmit}>
           <section>
+            <Input
+              placeholder="Verification code"
+              onChange={(e) => createFormFieldChangeHandler(form.code)(e.target.value)}
+              value={form.code.value ?? ''}
+              data-cy="code"
+              id="code"
+            />
+            <ErrorsList errors={form.code.errors} />
             <PasswordInput
               value={form.password.value}
               onChange={(e) => createFormFieldChangeHandler(form.password)(e.target.value)}

diff --git a/{{cookiecutter.project_slug}}/clients/web/react/src/services/user/api.ts b/{{cookiecutter.project_slug}}/clients/web/react/src/services/user/api.ts
@@ -39,11 +39,11 @@ const requestPasswordReset = createCustomServiceCall({
 })
 
 const resetPassword = createCustomServiceCall({
-  inputShape: { userId: z.string(), token: z.string(), password: z.string() },
+  inputShape: { email: z.string(), code: z.string(), password: z.string() },
   outputShape: userShape,
   cb: async ({ client, input, utils }) => {
-    const { token, user_id, ...rest } = utils.toApi(input)
-    const res = await client.post(`/password/reset/confirm/${user_id}/${token}/`, rest)
+    const { email, ...rest } = utils.toApi(input)
+    const res = await client.post(`/password/reset/confirm/${email}/`, rest)
     return utils.fromApi(res.data)
   },
 })

diff --git a/{{cookiecutter.project_slug}}/clients/web/react/src/services/user/forms.ts b/{{cookiecutter.project_slug}}/clients/web/react/src/services/user/forms.ts
@@ -89,24 +89,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',
+  static email = new FormField({
+    label: 'Email',
+    placeholder: 'email',
     type: 'text',
     validators: [new RequiredValidator({ message: 'Please enter a valid uid' })],
   })
-  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 7 digit code', minLength: 7 }),
     ],
   })
   static password = FormField.create({

diff --git a/{{cookiecutter.project_slug}}/clients/web/react/src/utils/routes.tsx b/{{cookiecutter.project_slug}}/clients/web/react/src/utils/routes.tsx
@@ -21,7 +21,7 @@ const AuthRoutes = () => {
       <Route path="/log-in" element={<LogIn />} />
       <Route path="/sign-up" element={<SignUp />} />
       <Route path="/request-reset" element={<RequestPasswordReset />} />
-      <Route path="/password/reset/confirm/:userId/:token" element={<ResetPassword />} />
+      <Route path="/password/reset/confirm/:userEmail" element={<ResetPassword />} />
     </>
   )
 }