forgot and reset password

1 files changed, 135 insertions, 0 deletions

diff --git a/src/pages/reset-password.jsx b/src/pages/reset-password.jsx
new file mode 100644
index 00000000..a4aa2201
--- /dev/null
+++ b/src/pages/reset-password.jsx
@@ -0,0 +1,135 @@
+import Alert from '@/core/components/elements/Alert/Alert'
+import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter'
+import Link from '@/core/components/elements/Link/Link'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import { useRef, useState } from 'react'
+import IndoteknikLogo from '@/images/logo.png'
+import odooApi from '@/core/api/odooApi'
+import { setAuth } from '@/core/utils/auth'
+
+export default function ResetPassword() {
+  return (
+    <>
+      <MobileView>
+        <FormComponent />
+        <SimpleFooter />
+      </MobileView>
+
+      <DesktopView>
+        <BasicLayout>
+          <div className='container mx-auto'>
+            <div className='w-1/2 mx-auto'>
+              <FormComponent />
+            </div>
+          </div>
+        </BasicLayout>
+      </DesktopView>
+    </>
+  )
+}
+
+const FormComponent = () => {
+  const router = useRouter()
+  const { token = '' } = router.query
+
+  const password = useRef(null)
+  const retypePassword = useRef(null)
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [isValidPassword, setIsValidPassword] = useState(false)
+  const [alert, setAlert] = useState(null)
+
+  const checkValidPassword = () => {
+    const passwordVal = password.current.value
+    const retypePasswordVal = retypePassword.current.value
+    if (passwordVal == retypePasswordVal) {
+      setIsValidPassword(true)
+    } else {
+      setIsValidPassword(false)
+    }
+  }
+
+  const resetPasswordRequest = async (e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    const result = await odooApi('POST', '/api/v1/user/reset-password', { token })
+    setIsLoading(false)
+    password.current.value = ''
+    retypePassword.current.value = ''
+    if (result.success) {
+      setAuth(result.user)
+      setAlert({
+        children: (
+          <>
+            Berhasil melakukan reset password,{' '}
+            <Link className='text-gray_r-12 inline-block' href='/'>
+              kembali ke halaman utama
+            </Link>
+          </>
+        ),
+        type: 'success'
+      })
+    } else {
+      setAlert({
+        children: (
+          <>
+            Gagal melakukan reset password, token tidak ditemukan. Buat permintaan reset password{' '}
+            <Link className='text-gray_r-12 inline-block' href='/forgot-password'>
+              disini
+            </Link>
+          </>
+        ),
+        type: 'info'
+      })
+    }
+  }
+
+  return (
+    <div className='p-6 pt-10 md:px-0 flex flex-col items-center min-h-screen'>
+      <Link href='/'>
+        <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={150} height={50} />
+      </Link>
+
+      <h1 className='text-2xl mt-4 font-semibold text-center'>Reset Kata Sandi Akun Indoteknik</h1>
+
+      {alert && (
+        <Alert className='text-center mt-4' type={alert.type}>
+          {alert.children}
+        </Alert>
+      )}
+
+      <form onSubmit={resetPasswordRequest} className='mt-6 w-full'>
+        <input
+          type='password'
+          id='password'
+          className='form-input w-full text-center'
+          ref={password}
+          onChange={checkValidPassword}
+          placeholder='Masukan kata sandi baru'
+          autoFocus
+        />
+
+        <input
+          type='password'
+          id='retypePassword'
+          className='form-input w-full text-center mt-4'
+          ref={retypePassword}
+          onChange={checkValidPassword}
+          placeholder='Masukan kembali kata sandi baru'
+        />
+
+        <button
+          type='submit'
+          disabled={!isValidPassword || isLoading}
+          className='btn-yellow font-semibold mt-4 w-full'
+        >
+          {isLoading ? 'Loading...' : 'Reset Password'}
+        </button>
+      </form>
+    </div>
+  )
+}