feat: add admin login page and authentication logic with form handling

2025-03-03 16:33:30 +08:00
parent acd3e36b31
commit 4f4e94389e
16 changed files with 207 additions and 140 deletions
@@ -0,0 +1,107 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+
+import { EyeIcon } from '~/components/icons/eye'
+import { Button } from '~/components/ui/button'
+import { APP } from '~/configs/meta'
+
+export const AdminLoginPage = () => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  return (
+    <div className="flex min-h-dvh min-w-dvw flex-col items-center justify-center space-y-8">
+      <div className="grid max-w-lg items-center justify-center space-y-7 rounded-[20px] border border-[#E6E6E6] bg-white p-8">
+        <div className="flex flex-col items-center">
+          <Link to="/lg-admin">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+        <p className="text-center">
+          Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!
+        </p>
+        <div>
+          <form>
+            {/* Input Email / No Telepon */}
+            <div className="mb-4">
+              <label
+                htmlFor="email"
+                className="mb-1 block text-gray-700"
+              >
+                Email/No. Telepon
+              </label>
+              <input
+                type="text"
+                placeholder="Contoh: legal@legalgo.id"
+                className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+              />
+            </div>
+
+            {/* Input Password */}
+            <div className="relative mb-4">
+              <label
+                htmlFor="password"
+                className="mb-1 block text-gray-700 focus:outline-[#2E2F7C]"
+              >
+                Kata Sandi
+              </label>
+              <input
+                type={showPassword ? 'text' : 'password'}
+                placeholder="Masukkan Kata Sandi"
+                className="w-full rounded-md border border-[#DFDFDF] p-2 pr-10 focus:outline-[#2E2F7C]"
+              />
+              <button
+                type="button"
+                className="absolute top-9 right-3 text-gray-500"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeIcon
+                    width={15}
+                    height={15}
+                  />
+                ) : (
+                  <EyeIcon
+                    width={15}
+                    height={15}
+                  />
+                )}
+              </button>
+            </div>
+
+            {/* Lupa Kata Sandi */}
+            <div className="mb-4 flex justify-between">
+              <span className="text-gray-600">Lupa Kata Sandi?</span>
+              <Link
+                to="/lg-admin/auth/reset-password"
+                className="font-semibold text-[#2E2F7C]"
+              >
+                Reset Kata Sandi
+              </Link>
+            </div>
+
+            {/* Tombol Masuk */}
+            <Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+              Masuk
+            </Button>
+          </form>
+        </div>
+      </div>
+      {/* Link Daftar */}
+      <div className="mt-4 text-center text-sm">
+        Belum punya akun?{' '}
+        <Button
+          onClick={() => {}}
+          className="font-semibold text-[#2E2F7C]"
+          variant="link"
+          size="fit"
+        >
+          Daftar Disini
+        </Button>
+      </div>
+    </div>
+  )
+}