126 lines
6.2 KiB
TypeScript
126 lines
6.2 KiB
TypeScript
'use client'
|
|
import { Input } from '@nextui-org/input'
|
|
import React from 'react'
|
|
import { EyeFilledIcon, EyeSlashFilledIcon } from '../icons';
|
|
import { Button } from '@nextui-org/button';
|
|
import Link from 'next/link';
|
|
|
|
export default function Login() {
|
|
const [isVisible, setIsVisible] = React.useState(false);
|
|
|
|
const toggleVisibility = () => setIsVisible(!isVisible);
|
|
|
|
return (
|
|
<div className='text-black md:flex px-0 md:px-2 lg:px-5'>
|
|
<div className='w-auto md:w-1/2 p-2 md:p-5 lg:p-10 space-y-5'>
|
|
<div className='text-xl font-bold'>Selamat Datang di Portal Resmi Humas Polri</div>
|
|
<div>
|
|
<Input
|
|
classNames={{
|
|
input: ["w-full", "bg-transparent", "!text-black"],
|
|
mainWrapper: ["w-full", "bg-transparent"],
|
|
innerWrapper: ["bg-transparent"],
|
|
label: ["!text-black", "font-semibold"],
|
|
inputWrapper: [
|
|
"bg-transparent",
|
|
"dark:bg-transparent",
|
|
"hover:bg-transparent",
|
|
"dark:hover:bg-transparent",
|
|
"group-data-[focused=true]:bg-transparent",
|
|
"dark:group-data-[focused=true]:bg-transaparent",
|
|
"group-data-[focused=false]:bg-transparent",
|
|
"focus-within:!bg-transparent",
|
|
],
|
|
}}
|
|
isRequired
|
|
type="text"
|
|
label="Username"
|
|
placeholder="Masukkan username anda!"
|
|
variant='underlined'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
classNames={{
|
|
input: ["w-full", "bg-transparent", "!text-black"],
|
|
mainWrapper: ["w-full", "bg-transparent"],
|
|
innerWrapper: ["bg-transparent"],
|
|
label: ["!text-black", "font-semibold"],
|
|
inputWrapper: [
|
|
"bg-transparent",
|
|
"dark:bg-transparent",
|
|
"hover:bg-transparent",
|
|
"dark:hover:bg-transparent",
|
|
"group-data-[focused=true]:bg-transparent",
|
|
"dark:group-data-[focused=true]:bg-transaparent",
|
|
"group-data-[focused=false]:bg-transparent",
|
|
"focus-within:!bg-transparent",
|
|
],
|
|
}}
|
|
isRequired
|
|
endContent={
|
|
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
|
|
{isVisible ? (
|
|
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
) : (
|
|
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
)}
|
|
</button>
|
|
}
|
|
type={isVisible ? "text" : "password"}
|
|
label="Password"
|
|
placeholder="Masukkan password anda"
|
|
variant='underlined'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
classNames={{
|
|
input: ["w-full", "bg-transparent", "!text-black"],
|
|
mainWrapper: ["w-full", "bg-transparent"],
|
|
innerWrapper: ["bg-transparent"],
|
|
label: ["!text-black", "font-semibold"],
|
|
inputWrapper: [
|
|
"bg-transparent",
|
|
"dark:bg-transparent",
|
|
"hover:bg-transparent",
|
|
"dark:hover:bg-transparent",
|
|
"group-data-[focused=true]:bg-transparent",
|
|
"dark:group-data-[focused=true]:bg-transaparent",
|
|
"group-data-[focused=false]:bg-transparent",
|
|
"focus-within:!bg-transparent",
|
|
],
|
|
}}
|
|
isRequired
|
|
endContent={
|
|
<button className="focus:outline-none" type="button" onClick={toggleVisibility}>
|
|
{isVisible ? (
|
|
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
) : (
|
|
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
|
|
)}
|
|
</button>
|
|
}
|
|
type={isVisible ? "text" : "password"}
|
|
label="Konfirmasi Password"
|
|
placeholder="Masukkan password anda"
|
|
variant='underlined'
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Button size='lg' className="w-full bg-[#DD8306] rounded-md font-semibold">Login</Button>
|
|
</div>
|
|
<div className='flex justify-center text-xs font-medium py-3'>Don't have account? Register Now</div>
|
|
<div>
|
|
<Link href={`/form-permohonan-informasi`}>
|
|
<Button size='lg' variant='bordered' className="w-full text-[#DD8306] borde-2 border-[#DD8306] rounded-md font-semibold">Register</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className='hidden sm:flex w-1/2 items-center justify-center p-10'>
|
|
<img src="/login.png" alt="logo" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|