forgot and reset password

1 files changed, 79 insertions, 43 deletions

diff --git a/src/pages/forgot-password.jsx b/src/pages/forgot-password.jsx
index eb5c5185..6211d237 100644
--- a/src/pages/forgot-password.jsx
+++ b/src/pages/forgot-password.jsx
@@ -2,63 +2,99 @@ 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 IndoteknikLogo from '@/images/logo.png'
+import axios from 'axios'
 import Image from 'next/image'
-import { useRouter } from 'next/router'
 import { useState } from 'react'
 
 export default function ForgotPassword() {
-  const router = useRouter()
-  const { token } = router.query
+  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 [isLoading, setIsLoading] = useState(false)
-  const [alert, setAlert] = useState()
+  const [alert, setAlert] = useState(null)
 
-  const [email, setEmail] = useState(router.query?.email || '')
+  const [email, setEmail] = useState('')
 
-  const forgotPasswordRequest = () => {}
+  const forgotPasswordRequest = async (e) => {
+    e.preventDefault()
+    setIsLoading(true)
+    let submitRequest = await axios.post(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/forgot-password`,
+      {
+        email
+      }
+    )
+    setIsLoading(false)
+    if (submitRequest.data.success) {
+      setAlert({
+        children: <>Mohon cek email anda untuk reset password akun Indoteknik</>,
+        type: 'success'
+      })
+    } else {
+      setAlert({
+        children: (
+          <>
+            Email tersebut belum terdaftar,{' '}
+            <Link className='text-gray_r-12 inline-block' href='/register'>
+              daftar sekarang
+            </Link>
+            .
+          </>
+        ),
+        type: 'info'
+      })
+    }
+  }
 
   return (
-    <>
-      <MobileView>
-        <div className='p-6 pt-10 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'>
-            Lupa Kata Sandi Akun Indoteknik
-          </h1>
+    <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>
 
-          {alert && (
-            <Alert className='text-center mt-4' type={alert.type}>
-              {alert.children}
-            </Alert>
-          )}
+      <h1 className='text-2xl mt-4 font-semibold text-center'>Lupa Kata Sandi Akun Indoteknik</h1>
 
-          <form onSubmit={forgotPasswordRequest} className='mt-6 w-full'>
-            <input
-              type='email'
-              id='email'
-              className='form-input w-full text-center'
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder='Masukan alamat email'
-              autoFocus
-            />
-            <button
-              type='submit'
-              disabled={email != ''}
-              className='btn-yellow font-semibold mt-4 w-full'
-            >
-              {isLoading ? 'Loading...' : 'Kirim Permintaan'}
-            </button>
-          </form>
-        </div>
+      {alert && (
+        <Alert className='text-center mt-4' type={alert.type}>
+          {alert.children}
+        </Alert>
+      )}
 
-        <SimpleFooter />
-      </MobileView>
-    </>
+      <form onSubmit={forgotPasswordRequest} className='mt-6 w-full'>
+        <input
+          type='email'
+          id='email'
+          className='form-input w-full text-center'
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder='Masukan alamat email'
+          autoFocus
+        />
+        <button type='submit' disabled={!email || isLoading} className='btn-yellow font-semibold mt-4 w-full'>
+          {isLoading ? 'Loading...' : 'Kirim Permintaan'}
+        </button>
+      </form>
+    </div>
   )
 }