Membangun Antarmuka Halaman Lupa Kata Sandi (#168)

src/app/(guest)/forgot-password/_components/email-form.tsx

@@ -0,0 +1,48 @@
+import { Button, Input } from '@nextui-org/react'
+import { FormEvent, useState } from 'react'
+
+export default function EmailForm() {
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasValidEmail, setHasValidEmail] = useState(false)
+
+  const handleForgotPasswordByEmail = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    setIsLoading(true)
+
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 2000)
+  }
+
+  return (
+    <>
+      <div className="mx-auto mb-4 max-w-xs">
+        <span className="block text-center text-sm">
+          Kirim Tautan Untuk Mengatur Ulang Kata Sandi
+        </span>
+      </div>
+
+      <form onSubmit={handleForgotPasswordByEmail} className="space-y-4">
+        <Input
+          onChange={event =>
+            setHasValidEmail(
+              event.target.value !== '' && event.target.validity.valid,
+            )
+          }
+          type="email"
+          label="Surel"
+        />
+
+        <Button
+          color="primary"
+          className="w-full"
+          isDisabled={!hasValidEmail}
+          isLoading={isLoading}
+          type="submit">
+          Kirim Tautan
+        </Button>
+      </form>
+    </>
+  )
+}

src/app/(guest)/forgot-password/_components/security-question.tsx

@@ -0,0 +1,74 @@
+import { User, users } from '@/data/users'
+import {
+  Autocomplete,
+  AutocompleteItem,
+  Button,
+  Input,
+} from '@nextui-org/react'
+import { UserRound } from 'lucide-react'
+import { FormEvent, useState } from 'react'
+
+export default function SecurityQuestionForm() {
+  const [hasSelectedUser, setHasSelectedUser] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const toggleHasSelectedUser = (key: string | number | null) =>
+    setHasSelectedUser(!!key)
+
+  const handleForgotPasswordBySecurityQuestion = (
+    event: FormEvent<HTMLFormElement>,
+  ) => {
+    event.preventDefault()
+
+    setIsLoading(true)
+
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 2000)
+  }
+
+  return (
+    <>
+      <div className="mx-auto mb-4 max-w-xs">
+        <span className="block text-center text-sm">
+          Jawab Pertanyaan Keamanan Untuk Mengatur Ulang Kata Sandi
+        </span>
+      </div>
+      <form
+        onSubmit={handleForgotPasswordBySecurityQuestion}
+        className="space-y-4">
+        <Autocomplete
+          label="Pilih Pengguna"
+          onSelectionChange={toggleHasSelectedUser}
+          isRequired>
+          {users.map((user: User) => (
+            <AutocompleteItem
+              key={user.id}
+              startContent={
+                <UserRound size={24} className="text-primary-300" />
+              }>
+              {user.name}
+            </AutocompleteItem>
+          ))}
+        </Autocomplete>
+
+        {hasSelectedUser && (
+          <>
+            <Input type="text" label="Nama Ibu Kandung" />
+
+            <Input type="text" label="Nama Panggilan Masa Kecil" />
+          </>
+        )}
+
+        <Button
+          color="primary"
+          className="w-full"
+          isDisabled={!hasSelectedUser}
+          isLoading={isLoading}
+          type="submit">
+          Proses
+        </Button>
+      </form>
+    </>
+  )
+}

src/app/(guest)/forgot-password/page.tsx

@@ -1,7 +1,41 @@
+'use client'
+
+import { Card, CardBody, CardHeader, Divider } from '@nextui-org/react'
+import EmailForm from './_components/email-form'
+import SecurityQuestionForm from './_components/security-question'
+import Link from 'next/link'
+import PageUrlEnum from '@/enums/page-url'
+import { useSearchParams } from 'next/navigation'
+
 export default function Page() {
+  const query = useSearchParams()
+  const selectedMethod = query.get('method')
+
   return (
-    <div>
-      <div>(Halaman Lupa Kata Sandi)</div>
+    <div className="container mt-8">
+      <div className="flex justify-center">
+        <Card className="max-w-md md:min-w-[400px]">
+          <CardHeader>
+            <span className="mx-auto block text-xl font-bold">
+              Lupa Kata Sandi
+            </span>
+          </CardHeader>
+          <Divider />
+          <CardBody>
+            {selectedMethod === 'security-question' ? (
+              <SecurityQuestionForm />
+            ) : (
+              <EmailForm />
+            )}
+
+            <Link
+              className="mt-4 block cursor-pointer text-center text-sm outline-none"
+              href={`${PageUrlEnum.FORGOT_PASSWORD}?method=${selectedMethod === 'security-question' ? 'email' : 'security-question'}`}>
+              Coba Cara Lain?
+            </Link>
+          </CardBody>
+        </Card>
+      </div>
     </div>
   )
 }

src/app/(guest)/login/page.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { User, users } from '@/data/users'
+import PageUrlEnum from '@/enums/page-url'
 import {
   Autocomplete,
   AutocompleteItem,
@@ -12,6 +13,7 @@ import {
   Input,
 } from '@nextui-org/react'
 import { Eye, EyeOff, UserRound } from 'lucide-react'
+import Link from 'next/link'
 import { FormEvent, useState } from 'react'
 
 export default function Page() {
@@ -88,6 +90,12 @@ export default function Page() {
                 type="submit">
                 Masuk
               </Button>
+
+              <Link
+                href={`${PageUrlEnum.FORGOT_PASSWORD}?method=email`}
+                className="my-4 block text-center text-sm">
+                Lupa Kata Sandi?
+              </Link>
             </form>
           </CardBody>
         </Card>