122 lines
3.0 KiB
TypeScript
122 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { useForm, Controller } from "react-hook-form"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import Link from "next/link"
|
|
import { useRouter } from "next/navigation"
|
|
|
|
type FormValues = {
|
|
nrp: string
|
|
password: string
|
|
}
|
|
|
|
export default function SignInPage() {
|
|
const router = useRouter()
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
} = useForm<FormValues>({
|
|
defaultValues: {
|
|
nrp: "",
|
|
password: "",
|
|
},
|
|
})
|
|
|
|
const onSubmit = async (data: FormValues) => {
|
|
console.log("DATA LOGIN:", data)
|
|
|
|
await new Promise((res) => setTimeout(res, 1000))
|
|
|
|
router.push("/dashboard")
|
|
}
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="mx-auto w-full max-w-md text-white"
|
|
>
|
|
<h1 className="font-heading mb-8 text-2xl font-bold sm:text-3xl">
|
|
Masuk
|
|
</h1>
|
|
|
|
<div className="space-y-8">
|
|
<div>
|
|
<label className="text-sm">
|
|
NRP<span className="text-red-500">*</span>
|
|
</label>
|
|
|
|
<Controller
|
|
name="nrp"
|
|
control={control}
|
|
rules={{ required: "NRP wajib diisi" }}
|
|
render={({ field }) => (
|
|
<Input
|
|
{...field}
|
|
placeholder="Masukkan nrp anda"
|
|
className="mt-2 h-10 border-none bg-white! text-black focus-visible:ring-0"
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
{errors.nrp && (
|
|
<p className="mt-1 text-xs text-red-400">{errors.nrp.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm">
|
|
Kata Sandi<span className="text-red-500">*</span>
|
|
</label>
|
|
|
|
<Controller
|
|
name="password"
|
|
control={control}
|
|
rules={{
|
|
required: "Password wajib diisi",
|
|
minLength: {
|
|
value: 6,
|
|
message: "Minimal 6 karakter",
|
|
},
|
|
}}
|
|
render={({ field }) => (
|
|
<Input
|
|
{...field}
|
|
type="password"
|
|
placeholder="Masukkan kata sandi anda"
|
|
className="mt-2 h-10 border-none bg-white! text-black focus-visible:ring-0"
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
{errors.password && (
|
|
<p className="mt-1 text-xs text-red-400">
|
|
{errors.password.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="h-12 w-full bg-[#001353] text-white hover:bg-blue-800"
|
|
>
|
|
{isSubmitting ? "Loading..." : "Masuk"}
|
|
</Button>
|
|
|
|
<p className="text-center text-sm text-white/80">
|
|
Belum punya akun?{" "}
|
|
<Link
|
|
href={"/auth/sign-up"}
|
|
className="cursor-pointer font-semibold underline"
|
|
>
|
|
Daftar Sekarang
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|