137 lines
4.4 KiB
TypeScript
137 lines
4.4 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 bg-gray-50 text-black">
|
|
<div className="hidden w-1/3 lg:block"></div>
|
|
<div className="flex w-full flex-col items-center justify-center lg:w-1/3">
|
|
<Image
|
|
width={240}
|
|
height={240}
|
|
src="/multipool-logo.png"
|
|
alt="logo-multipool"
|
|
className="mt-5"
|
|
/>
|
|
<h1 className="bg-linear-to-t from-[#8e5c18] to-[#dbc17b] bg-clip-text text-5xl font-bold text-transparent">
|
|
AI Platform Kolaboratif
|
|
</h1>
|
|
<p className="text-md font-bold text-[#8e5c18]">
|
|
Produksi Narasi Media
|
|
</p>
|
|
<form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className="mx-auto w-full max-w-md text-white"
|
|
>
|
|
<div className="space-y-8">
|
|
<div>
|
|
<Controller
|
|
name="username"
|
|
control={control}
|
|
rules={{ required: "Required" }}
|
|
render={({ field }) => (
|
|
<Input
|
|
{...field}
|
|
placeholder="Username"
|
|
className="mt-2 h-10 w-full rounded-none border-2 border-gray-300 bg-transparent text-black outline-none focus:border-transparent focus:ring-0 focus:outline-none"
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
{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-10 w-full rounded-none border-2 border-gray-300 bg-transparent text-black outline-none focus:border-transparent focus:ring-0 focus:outline-none">
|
|
<InputGroupInput
|
|
{...field}
|
|
id="inline-end-input"
|
|
type={viewPassword ? "text" : "password"}
|
|
placeholder="Enter password"
|
|
/>
|
|
<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>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="h-12 w-full cursor-pointer bg-[#8e5c18] text-white hover:bg-[#b19c62]"
|
|
>
|
|
{isSubmitting ? "Loading..." : "Masuk"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div className="w-1/3 lg:block"></div>
|
|
</div>
|
|
)
|
|
}
|