From 634e1b4a03f486147069f60b30f9a4a261e32da8 Mon Sep 17 00:00:00 2001
From: Kwon Seo Jin <97675977+B0XERCAT@users.noreply.github.com>
Date: Mon, 11 Mar 2024 14:17:43 +0900
Subject: [PATCH] feat(fe): implement recover account modal (#1526)

* feat(fe): add modal layout

* feat(fe): connect find userid api

* feat(fe): add resetpassword

* feat(fe): add reset password page

* fix: add credential include, change fetcher to fetch

* fix(fe): remove unnecessary onClick event handler

* chore: replace fetch with fetcher
---
 apps/frontend/components/auth/AuthModal.tsx   |  12 ++
 apps/frontend/components/auth/FindUserId.tsx  | 156 ++++++++++++++++++
 .../components/auth/RecoverAccount.tsx        |  37 +++++
 .../components/auth/ResetPassword.tsx         | 154 +++++++++++++++++
 .../auth/ResetPasswordEmailVerify.tsx         | 107 ++++++++++++
 apps/frontend/components/auth/SignIn.tsx      |   3 +-
 apps/frontend/stores/authModal.ts             |   7 +
 apps/frontend/stores/recoverAccountModal.ts   |  49 ++++++
 8 files changed, 524 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontend/components/auth/FindUserId.tsx
 create mode 100644 apps/frontend/components/auth/RecoverAccount.tsx
 create mode 100644 apps/frontend/components/auth/ResetPassword.tsx
 create mode 100644 apps/frontend/components/auth/ResetPasswordEmailVerify.tsx
 create mode 100644 apps/frontend/stores/recoverAccountModal.ts

diff --git a/apps/frontend/components/auth/AuthModal.tsx b/apps/frontend/components/auth/AuthModal.tsx
index 6cf1c04637..70a74565db 100644
--- a/apps/frontend/components/auth/AuthModal.tsx
+++ b/apps/frontend/components/auth/AuthModal.tsx
@@ -1,5 +1,6 @@
 import useAuthModalStore from '@/stores/authModal'
 import { Transition } from '@headlessui/react'
+import RecoverAccount from './RecoverAccount'
 import SignIn from './SignIn'
 import SignUp from './SignUp'
 
@@ -29,6 +30,17 @@ export default function AuthModal() {
       >
         <SignUp />
       </Transition>
+      <Transition
+        show={currentModal === 'recoverAccount'}
+        enter="transition-opacity duration-150"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-100"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <RecoverAccount />
+      </Transition>
     </>
   )
 }
diff --git a/apps/frontend/components/auth/FindUserId.tsx b/apps/frontend/components/auth/FindUserId.tsx
new file mode 100644
index 0000000000..55652a1cbd
--- /dev/null
+++ b/apps/frontend/components/auth/FindUserId.tsx
@@ -0,0 +1,156 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { cn, fetcher } from '@/lib/utils'
+import useAuthModalStore from '@/stores/authModal'
+import useRecoverAccountModalStore from '@/stores/recoverAccountModal'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+interface FindUserIdInput {
+  email: string
+}
+const schema = z.object({
+  email: z.string().email({ message: 'Invalid email address' })
+})
+
+export default function FindUserId() {
+  const [userId, setUserId] = useState<string>('')
+  const [emailError, setEmailError] = useState<string>('')
+  const [sentEmail, setSentEmail] = useState<boolean>(false)
+  const { nextModal, setFormData } = useRecoverAccountModalStore(
+    (state) => state
+  )
+  const { showSignIn, showSignUp } = useAuthModalStore((state) => state)
+
+  const {
+    handleSubmit,
+    register,
+    trigger,
+    getValues,
+    formState: { errors }
+  } = useForm<FindUserIdInput>({
+    resolver: zodResolver(schema)
+  })
+
+  const onSubmit = async (data: FindUserIdInput) => {
+    const { email } = data
+    try {
+      const data: { username: string } = await fetcher
+        .get('user/email', {
+          searchParams: { email }
+        })
+        .json()
+      if (data.username) {
+        setUserId(data.username)
+        setEmailError('')
+      } else setEmailError('* No account confirmed with this email')
+    } catch {
+      setEmailError('* No account confirmed with this email')
+    }
+  }
+
+  const sendEmail = async () => {
+    const { email } = getValues()
+    setFormData({
+      email,
+      verificationCode: '',
+      headers: {
+        'email-auth': ''
+      }
+    })
+    await trigger('email')
+    if (!errors.email && !sentEmail) {
+      await fetcher
+        .post('email-auth/send-email/password-reset', {
+          json: { email }
+        })
+        .then((res) => {
+          if (res.status === 401) {
+            setEmailError(
+              'Email authentication pin is sent to your email address'
+            )
+          } else if (res.status === 201) {
+            setSentEmail(true)
+            setEmailError('')
+          }
+        })
+        .catch(() => {
+          setEmailError('Something went wrong!')
+        })
+    }
+  }
+
+  return (
+    <>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex w-full flex-col gap-8 px-2"
+      >
+        <div className="flex flex-col gap-1">
+          <p className="text-primary mb-4 text-left text-xl font-bold">
+            Find User ID
+          </p>
+          <Input
+            id="email"
+            type="email"
+            placeholder="Email Address"
+            {...register('email', {
+              onChange: () => trigger('email')
+            })}
+            disabled={!!userId}
+          />
+          {errors.email && (
+            <p className="text-xs text-red-500">{errors.email?.message}</p>
+          )}
+          <p className="text-xs text-red-500">{emailError}</p>
+          {userId ? (
+            <p className="text-center text-sm text-gray-500">
+              your User ID is <span className="text-primary">{userId}</span>
+            </p>
+          ) : (
+            <p className="text-center text-sm text-gray-300">
+              your User ID is ___________
+            </p>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-4">
+          {userId ? (
+            <Button onClick={() => showSignIn()} type="button">
+              Log in
+            </Button>
+          ) : (
+            <Button type="submit">Find User ID</Button>
+          )}
+          <Button
+            type="button"
+            onClick={() => {
+              sendEmail()
+                .then(() => {
+                  nextModal()
+                })
+                .catch(() => {
+                  console.log('error')
+                })
+            }}
+            className={cn(!userId && 'bg-gray-400')}
+            disabled={!userId}
+          >
+            Reset Password
+          </Button>
+        </div>
+      </form>
+      <div className="absolute bottom-6 flex items-center justify-center">
+        <Button
+          onClick={() => showSignUp()}
+          variant={'link'}
+          className="h-5 w-fit p-0 py-2 text-xs text-gray-500"
+        >
+          Register now
+        </Button>
+      </div>
+    </>
+  )
+}
diff --git a/apps/frontend/components/auth/RecoverAccount.tsx b/apps/frontend/components/auth/RecoverAccount.tsx
new file mode 100644
index 0000000000..4a9f8890f3
--- /dev/null
+++ b/apps/frontend/components/auth/RecoverAccount.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import CodedangLogo from '@/public/codedang.svg'
+import useAuthModalStore from '@/stores/authModal'
+import useRecoverAccountModalStore from '@/stores/recoverAccountModal'
+import Image from 'next/image'
+import { IoMdArrowBack } from 'react-icons/io'
+import FindUserId from './FindUserId'
+import ResetPassword from './ResetPassword'
+import ResetPasswordEmailVerify from './ResetPasswordEmailVerify'
+
+export default function RecoverAccount() {
+  const { showSignIn } = useAuthModalStore((state) => state)
+  const { modalPage, backModal } = useRecoverAccountModalStore((state) => state)
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <button
+        onClick={modalPage === 0 ? showSignIn : backModal}
+        className="absolute left-4 top-4 h-4 w-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:focus:ring-gray-300 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400"
+      >
+        <IoMdArrowBack />
+      </button>
+
+      <Image
+        className="absolute left-8 top-10"
+        src={CodedangLogo}
+        alt="codedang"
+        width={70}
+      />
+
+      {modalPage === 0 && <FindUserId />}
+      {modalPage === 1 && <ResetPasswordEmailVerify />}
+      {modalPage === 2 && <ResetPassword />}
+    </div>
+  )
+}
diff --git a/apps/frontend/components/auth/ResetPassword.tsx b/apps/frontend/components/auth/ResetPassword.tsx
new file mode 100644
index 0000000000..2322e13030
--- /dev/null
+++ b/apps/frontend/components/auth/ResetPassword.tsx
@@ -0,0 +1,154 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { cn, fetcher } from '@/lib/utils'
+import useRecoverAccountModalStore from '@/stores/recoverAccountModal'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { FaEye, FaEyeSlash } from 'react-icons/fa'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+interface ResetPasswordInput {
+  password: string
+  passwordAgain: string
+}
+
+const schema = z
+  .object({
+    password: z
+      .string()
+      .min(8)
+      .refine((data) => {
+        const invalidPassword = /^([a-z]*|[A-Z]*|[0-9]*|[^a-zA-Z0-9]*)$/
+        return !invalidPassword.test(data)
+      }),
+    passwordAgain: z.string().min(8)
+  })
+  .refine(
+    (data: { password: string; passwordAgain: string }) =>
+      data.password === data.passwordAgain,
+    {
+      path: ['passwordAgain']
+    }
+  )
+
+export default function ResetPassword() {
+  const {
+    handleSubmit,
+    register,
+    trigger,
+    formState: { errors, isValid }
+  } = useForm<ResetPasswordInput>({
+    resolver: zodResolver(schema)
+  })
+  const [passwordShow, setPasswordShow] = useState<boolean>(false)
+  const [passwordAgainShow, setPasswordAgainShow] = useState<boolean>(false)
+  const [inputFocus, setInputFocus] = useState<number>(0)
+  const { formData } = useRecoverAccountModalStore((state) => state)
+
+  const onSubmit = async (data: ResetPasswordInput) => {
+    try {
+      const response = await fetcher.patch('user/password-reset', {
+        headers: formData.headers,
+        json: {
+          newPassword: data.password
+        }
+      })
+      if (response.ok) {
+        document.getElementById('closeDialog')?.click()
+        toast.success('Password reset successfully')
+      }
+    } catch {
+      toast.error('Password reset failed')
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex w-full flex-col gap-1 px-2"
+    >
+      <p className="text-primary mb-4 text-left text-xl font-bold">
+        Reset Password
+      </p>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-1">
+          <div className="flex justify-between gap-2">
+            <Input
+              placeholder="Password"
+              {...register('password', {
+                onChange: () => trigger('password')
+              })}
+              type={passwordShow ? 'text' : 'password'}
+              onFocus={() => {
+                setInputFocus(0)
+              }}
+            />
+            <span
+              className="flex items-center"
+              onClick={() => setPasswordShow(!passwordShow)}
+            >
+              {passwordShow ? (
+                <FaEye className="text-gray-400" />
+              ) : (
+                <FaEyeSlash className="text-gray-400" />
+              )}
+            </span>
+          </div>
+          {inputFocus === 0 && (
+            <div
+              className={cn(
+                errors.password ? 'text-red-500' : 'text-gray-500',
+                'text-xs'
+              )}
+            >
+              <ul className="pl-4">
+                <li className="list-disc">
+                  Your password must be at least 8 characters
+                </li>
+                <li>and include two of the followings:</li>
+                <li>Capital letters, Small letters, or Numbers</li>
+              </ul>
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <div className="flex justify-between gap-2">
+            <Input
+              {...register('passwordAgain', {
+                onChange: () => trigger('passwordAgain')
+              })}
+              placeholder="Re-enter password"
+              type={passwordAgainShow ? 'text' : 'password'}
+              onFocus={() => {
+                setInputFocus(1)
+              }}
+            />
+            <span
+              className="flex items-center"
+              onClick={() => setPasswordAgainShow(!passwordAgainShow)}
+            >
+              {passwordAgainShow ? (
+                <FaEye className="text-gray-400" />
+              ) : (
+                <FaEyeSlash className="text-gray-400" />
+              )}
+            </span>
+          </div>
+          {errors.passwordAgain && (
+            <p className="text-xs text-red-500">Incorrect</p>
+          )}
+        </div>
+        <Button
+          disabled={!isValid}
+          className={cn(!isValid && 'bg-gray-400')}
+          type="submit"
+        >
+          Save
+        </Button>
+      </div>
+    </form>
+  )
+}
diff --git a/apps/frontend/components/auth/ResetPasswordEmailVerify.tsx b/apps/frontend/components/auth/ResetPasswordEmailVerify.tsx
new file mode 100644
index 0000000000..59804758bd
--- /dev/null
+++ b/apps/frontend/components/auth/ResetPasswordEmailVerify.tsx
@@ -0,0 +1,107 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { cn, fetcher } from '@/lib/utils'
+import useRecoverAccountModalStore from '@/stores/recoverAccountModal'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+interface EmailVerifyInput {
+  verificationCode: string
+}
+
+const schema = z.object({
+  verificationCode: z
+    .string()
+    .min(6, { message: 'Code must be 6 characters long' })
+    .max(6, { message: 'Code must be 6 characters long' })
+})
+
+export default function ResetPasswordEmailVerify() {
+  const { nextModal, formData, setFormData } = useRecoverAccountModalStore(
+    (state) => state
+  )
+  const {
+    handleSubmit,
+    register,
+    getValues,
+    trigger,
+    formState: { errors }
+  } = useForm<EmailVerifyInput>({
+    resolver: zodResolver(schema)
+  })
+  const [emailVerified, setEmailVerified] = useState<boolean>(false)
+  const [emailAuthToken, setEmailAuthToken] = useState<string>('')
+  const [codeError, setCodeError] = useState<string>('')
+
+  const onSubmit = (data: EmailVerifyInput) => {
+    setFormData({
+      email: formData.email,
+      ...data,
+      headers: {
+        'email-auth': emailAuthToken
+      }
+    })
+    nextModal()
+  }
+  const verifyCode = async () => {
+    const { verificationCode } = getValues()
+    await trigger('verificationCode')
+    if (!errors.verificationCode) {
+      try {
+        const response = await fetcher.post('email-auth/verify-pin', {
+          json: {
+            pin: verificationCode,
+            email: formData.email
+          },
+          credentials: 'include'
+        })
+        if (response.status === 201) {
+          setEmailVerified(true)
+          setCodeError('')
+          setEmailAuthToken(response.headers.get('email-auth') || '')
+        } else {
+          setCodeError('Verification code is not valid!')
+        }
+      } catch {
+        setCodeError('Email verification failed!')
+      }
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex w-full flex-col gap-1 px-2"
+    >
+      <p className="text-primary mb-4 text-left text-xl font-bold">
+        Reset Password
+      </p>
+      <div className="text-sm font-semibold text-gray-500">
+        {formData.email}
+      </div>
+      <Input
+        type="number"
+        className="[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        placeholder="Verification Code"
+        {...register('verificationCode', {
+          onChange: () => verifyCode()
+        })}
+      />
+      <p className="text-xs text-red-500">
+        {errors.verificationCode ? errors.verificationCode?.message : codeError}
+      </p>
+      {!errors.verificationCode && codeError === '' && !emailVerified && (
+        <p className="text-primary text-xs">We&apos;ve sent an email!</p>
+      )}
+      <Button
+        type="submit"
+        className={cn('mb-8 mt-2 w-full', !emailVerified && 'bg-gray-400')}
+        disabled={!emailVerified}
+      >
+        Next
+      </Button>
+    </form>
+  )
+}
diff --git a/apps/frontend/components/auth/SignIn.tsx b/apps/frontend/components/auth/SignIn.tsx
index 4ec096cd82..831c503def 100644
--- a/apps/frontend/components/auth/SignIn.tsx
+++ b/apps/frontend/components/auth/SignIn.tsx
@@ -23,7 +23,7 @@ interface Inputs {
 
 export default function SignIn() {
   const [disableButton, setDisableButton] = useState(false)
-  const { showSignUp } = useAuthModalStore((state) => state)
+  const { showSignUp, showRecoverAccount } = useAuthModalStore((state) => state)
   const router = useRouter()
   const { register, handleSubmit } = useForm<Inputs>()
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
@@ -96,6 +96,7 @@ export default function SignIn() {
           Sign Up
         </Button>
         <Button
+          onClick={() => showRecoverAccount()}
           variant={'link'}
           className="h-5 w-fit p-0 py-2 text-xs text-gray-500"
         >
diff --git a/apps/frontend/stores/authModal.ts b/apps/frontend/stores/authModal.ts
index ab2630915f..e44b3dc217 100644
--- a/apps/frontend/stores/authModal.ts
+++ b/apps/frontend/stores/authModal.ts
@@ -4,6 +4,7 @@ interface AuthModalStore {
   currentModal: string
   showSignIn: () => void
   showSignUp: () => void
+  showRecoverAccount: () => void
   hideModal: () => void
 }
 const useAuthModalStore = create<AuthModalStore>(
@@ -21,6 +22,12 @@ const useAuthModalStore = create<AuthModalStore>(
       setTimeout(() => {
         set({ currentModal: 'signUp' })
       }, 180)
+    },
+    showRecoverAccount: () => {
+      set({ currentModal: '' })
+      setTimeout(() => {
+        set({ currentModal: 'recoverAccount' })
+      }, 180)
     }
   })
 )
diff --git a/apps/frontend/stores/recoverAccountModal.ts b/apps/frontend/stores/recoverAccountModal.ts
new file mode 100644
index 0000000000..1164189cfd
--- /dev/null
+++ b/apps/frontend/stores/recoverAccountModal.ts
@@ -0,0 +1,49 @@
+import { create } from 'zustand'
+
+interface FormData {
+  email: string
+  verificationCode: string
+  headers: {
+    /* eslint-disable-next-line @typescript-eslint/naming-convention */
+    'email-auth': string
+  }
+}
+
+interface RecoverAccountModalStore {
+  modalPage: number
+  formData: {
+    email: string
+    verificationCode: string
+    headers: {
+      /* eslint-disable-next-line @typescript-eslint/naming-convention */
+      'email-auth': string
+    }
+  }
+  setModalPage: (page: number) => void
+  setFormData: (data: FormData) => void
+  nextModal: () => void
+  backModal: () => void
+}
+const useRecoverAccountModalStore = create<RecoverAccountModalStore>((set) => ({
+  modalPage: 0,
+  formData: {
+    email: '',
+    verificationCode: '',
+    headers: {
+      /* eslint-disable-next-line @typescript-eslint/naming-convention */
+      'email-auth': ''
+    }
+  },
+  setModalPage: (page: number) => set({ modalPage: page }),
+  setFormData: (data: FormData) => set({ formData: data }),
+  nextModal: () =>
+    set((state: { modalPage: number }) => ({
+      modalPage: state.modalPage + 1
+    })),
+  backModal: () =>
+    set((state: { modalPage: number }) => ({
+      modalPage: state.modalPage - 1
+    }))
+}))
+
+export default useRecoverAccountModalStore