128 lines
3.6 KiB
JavaScript
128 lines
3.6 KiB
JavaScript
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) && (
|
|
<small className='p-error' style={{ fontSize: '11px' }}>
|
|
{formik.errors[field]}
|
|
</small>
|
|
)
|
|
)
|
|
}
|
|
|
|
const handleCaptcha = (captcha) => {
|
|
formik.setFieldValue('recaptcha', captcha)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Toast ref={toast} position='bottom-right' />
|
|
<Head>
|
|
<title>Login</title>
|
|
</Head>
|
|
<Depan>
|
|
<div className='mb-3 mt-10 text-center'>
|
|
<Image alt='logo' src={'/img/e-verif-title.png'} width={511 / 6} height={540 / 6} />
|
|
</div>
|
|
<p className='text-center font-bebas 2xl:text-3xl text-2xl'>
|
|
SISTEM APLIKASI <br /> PENYELESAIAN TAGIHAN dan PERTANGGUNGJAWABAN KEUANGAN
|
|
</p>
|
|
<p className='2xl:text-2xl font-medium mt-10'>Login</p>
|
|
<p className='2xl:text-base text-xs'>Enter your username and password to sign in</p>
|
|
<form onSubmit={formik.handleSubmit}>
|
|
<div className='flex flex-col mt-3'>
|
|
<label htmlFor='username' className='text-sm 2xl:text-lg'>
|
|
Username
|
|
</label>
|
|
<InputText
|
|
name={'username'}
|
|
id={'username'}
|
|
placeholder={'Your username'}
|
|
value={formik.values.username}
|
|
onChange={formik.handleChange}
|
|
/>
|
|
{errorFieldMessage('username')}
|
|
</div>
|
|
<div className='flex flex-col mt-3'>
|
|
<label htmlFor='password' className='text-sm 2xl:text-lg'>
|
|
Password
|
|
</label>
|
|
<Password
|
|
name={'password'}
|
|
id={'password'}
|
|
placeholder={'Your password'}
|
|
value={formik.values.password}
|
|
onChange={formik.handleChange}
|
|
toggleMask={true}
|
|
feedback={false}
|
|
inputStyle={{ width: '100%' }}
|
|
/>
|
|
{errorFieldMessage('password')}
|
|
</div>
|
|
<div className='flex mt-3 justify-end text-sm 2xl:text-base'>
|
|
<Link href={'/'}>
|
|
<a className='text-xs 2xl:text-lg'>Forgot password?</a>
|
|
</Link>
|
|
</div>
|
|
<Captcha
|
|
id={'recaptcha'}
|
|
siteKey='6Lc8zOwgAAAAAH0Zu_uYLAi223irUrsM65SZm7-C'
|
|
onResponse={(captcha) => handleCaptcha(captcha)}
|
|
className='relative 2xl:my-3 left-1/2 -translate-x-1/2'
|
|
/>
|
|
{errorFieldMessage('recaptcha')}
|
|
<Button
|
|
label='Sign in'
|
|
type='submit'
|
|
className='w-full h-10'
|
|
onClick={formik.handleSubmit}
|
|
loading={loading}
|
|
></Button>
|
|
</form>
|
|
</Depan>
|
|
</>
|
|
)
|
|
}
|