multipool-ta-fe/app/page.tsx

"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>
  )
}