128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
"use client"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
} from "@/components/ui/input-group"
|
|
import { setCookiesEncrypt } from "@/utils/globals"
|
|
import Image from "next/image"
|
|
import { useRouter } from "next/navigation"
|
|
import { useState } from "react"
|
|
import { useForm, Controller } from "react-hook-form"
|
|
import "./globals.css"
|
|
import { EyeIcon, EyeOffIcon } from "@/components/icons"
|
|
|
|
type FormValues = {
|
|
username: string
|
|
password: string
|
|
}
|
|
|
|
export default function Page() {
|
|
const router = useRouter()
|
|
const [viewPassword, setViewPassword] = useState(false)
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting },
|
|
} = useForm<FormValues>({
|
|
defaultValues: {
|
|
username: "",
|
|
password: "",
|
|
},
|
|
})
|
|
|
|
const onSubmit = async (data: FormValues) => {
|
|
await new Promise((res) => setTimeout(res, 1000))
|
|
if (data.username == "multipool-admin" && data.password == "P@ssw0rd.1") {
|
|
setCookiesEncrypt("status", "Login", { expires: 1 })
|
|
setCookiesEncrypt("username", "multipool-admin", { expires: 1 })
|
|
router.push("/dashboard/account-management")
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-svh flex-row items-center justify-center bg-linear-to-r from-violet-50 to-violet-400 text-black">
|
|
<div className="flex h-fit w-[30vw] flex-col items-center justify-center rounded-2xl border border-white/30 bg-white/30 p-16 shadow-[0_20px_60px_rgba(0,0,0,0.25)] backdrop-blur-xl">
|
|
<h1 className="mb-12 self-start text-left text-4xl font-bold text-black">
|
|
Login
|
|
</h1>
|
|
<form onSubmit={handleSubmit(onSubmit)} className="w-full text-black">
|
|
<div className="space-y-8">
|
|
<div>
|
|
<p className="text-xs tracking-widest text-gray-800 uppercase">
|
|
Username
|
|
</p>{" "}
|
|
<Controller
|
|
name="username"
|
|
control={control}
|
|
rules={{ required: "Required" }}
|
|
render={({ field }) => (
|
|
<Input
|
|
{...field}
|
|
placeholder="Enter your username"
|
|
className="mt-2 h-12 w-full rounded-xl border-none bg-white/80! px-4 text-black placeholder:text-gray-500"
|
|
/>
|
|
)}
|
|
/>
|
|
{errors.username && (
|
|
<p className="mt-1 text-xs text-red-400">
|
|
{errors.username.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<Controller
|
|
name="password"
|
|
control={control}
|
|
rules={{
|
|
required: "Required",
|
|
}}
|
|
render={({ field }) => (
|
|
<InputGroup className="mt-2 h-12 w-full rounded-xl border-none bg-white/80! px-2 backdrop-blur">
|
|
<InputGroupInput
|
|
{...field}
|
|
id="inline-end-input"
|
|
type={viewPassword ? "text" : "password"}
|
|
placeholder="Enter password here"
|
|
className="bg-white"
|
|
/>
|
|
<InputGroupAddon align="inline-end">
|
|
<a
|
|
className="cursor-pointer"
|
|
onClick={() => setViewPassword(!viewPassword)}
|
|
>
|
|
{viewPassword ? <EyeOffIcon /> : <EyeIcon />}
|
|
</a>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
)}
|
|
/>
|
|
|
|
{errors.password && (
|
|
<p className="mt-1 text-xs text-red-400">
|
|
{errors.password.message}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<p className="cursor-pointer text-sm text-blue-500 hover:underline">
|
|
Forgot password?
|
|
</p>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="h-12 w-full rounded-xl bg-linear-to-r from-[#4c1d95] to-[#5b21b6] font-semibold tracking-wide text-white"
|
|
>
|
|
{isSubmitting ? "Loading..." : "Masuk"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|