import { Depan } from '@/components/Layouts' import { useAuth } from '@/hooks/auth' import { useFormik } from 'formik' import Head from 'next/head' import Image from 'next/image' import Link from 'next/link' import { Button } from 'primereact/button' import { Captcha } from 'primereact/captcha' import { InputText } from 'primereact/inputtext' import { Password } from 'primereact/password' import { Toast } from 'primereact/toast' import { useRef, useState } from 'react' export default function Login() { const toast = useRef(null) const { login } = useAuth({}) const [loading, setLoading] = useState(false) const formik = useFormik({ initialValues: { username: '', password: '', recaptcha: '', }, validate: (data) => { let errors = {} if (!data.username) errors.username = 'Username is required.' if (!data.password) errors.password = 'Password is required.' if (!data.recaptcha) errors.recaptcha = 'Recaptcha is required.' return errors }, onSubmit: (data) => { setLoading(true) const username = data.username const password = data.password const recaptcha = data.recaptcha login({ username, password, recaptcha, toast, setLoading }) }, validateOnChange: false, }) const isFieldValid = (field) => !!(formik.touched[field] && formik.errors[field]) const errorFieldMessage = (field) => { return ( isFieldValid(field) && ( {formik.errors[field]} ) ) } const handleCaptcha = (captcha) => { formik.setFieldValue('recaptcha', captcha) } return ( <> Login
logo

SISTEM APLIKASI
PENYELESAIAN TAGIHAN dan PERTANGGUNGJAWABAN KEUANGAN

Login

Enter your username and password to sign in

{errorFieldMessage('username')}
{errorFieldMessage('password')}
Forgot password?
handleCaptcha(captcha)} className='relative 2xl:my-3 left-1/2 -translate-x-1/2' /> {errorFieldMessage('recaptcha')}
) }