116 lines
2.9 KiB
TypeScript
116 lines
2.9 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"
|
|
|
|
type FormValues = {
|
|
nrp: string
|
|
email: string
|
|
}
|
|
|
|
export default function SignUpPage() {
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
} = useForm<FormValues>({
|
|
defaultValues: {
|
|
nrp: "",
|
|
email: "",
|
|
},
|
|
})
|
|
|
|
const onSubmit = async (data: FormValues) => {
|
|
console.log("DATA LOGIN:", data)
|
|
|
|
await new Promise((res) => setTimeout(res, 1000))
|
|
}
|
|
|
|
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">
|
|
Daftar
|
|
</h1>
|
|
|
|
<div className="space-y-8">
|
|
<div>
|
|
<label className="text-sm">
|
|
Email<span className="text-red-500">*</span>
|
|
</label>
|
|
|
|
<Controller
|
|
name="email"
|
|
control={control}
|
|
rules={{ required: "Email wajib diisi" }}
|
|
render={({ field }) => (
|
|
<Input
|
|
{...field}
|
|
type="email"
|
|
placeholder="Masukkan email anda"
|
|
className="mt-2 h-10 border-none bg-white! text-black focus-visible:ring-0"
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
{errors.email && (
|
|
<p className="mt-1 text-xs text-red-400">{errors.email.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-sm">
|
|
NRP<span className="text-red-500">*</span>
|
|
</label>
|
|
|
|
<Controller
|
|
name="nrp"
|
|
control={control}
|
|
rules={{
|
|
required: "NRP wajib diisi",
|
|
minLength: {
|
|
value: 8,
|
|
message: "Minimal 8 karakter",
|
|
},
|
|
}}
|
|
render={({ field }) => (
|
|
<Input
|
|
{...field}
|
|
type="number"
|
|
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>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="h-12 w-full bg-[#001353] text-white hover:bg-blue-800"
|
|
>
|
|
{isSubmitting ? "Loading..." : "Daftar"}
|
|
</Button>
|
|
|
|
<p className="text-center text-sm text-white/80">
|
|
Sudah memiliki akun?{" "}
|
|
<Link
|
|
href={"/auth/sign-in"}
|
|
className="cursor-pointer font-semibold underline"
|
|
>
|
|
Masuk Sekarang
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|