42 lines
1.8 KiB
TypeScript
42 lines
1.8 KiB
TypeScript
import React, { useRef, useState } from 'react';
|
|
import PrimaryButton from '~/driven/utils/components/buttons/primary-button/PrimaryButton';
|
|
import { icons } from '~/driven/utils/constants/assertUrls';
|
|
import { staticMessages } from '~/driven/utils/constants/staticMessages';
|
|
import OtpCode from '../otp-code-inputs';
|
|
import PhoneNumberAuth from './PhoneNumberAuth';
|
|
|
|
export default function AuthenticationView() {
|
|
const [phoneNumberValue, setPhoneNumberValue] = useState('');
|
|
const otpChar = useRef<HTMLInputElement[]>([]);
|
|
const statesName = {
|
|
phonenumber: <PhoneNumberAuth stateData={{ setState: setPhoneNumberValue, stateValue: phoneNumberValue }} />,
|
|
otp: <OtpCode ref={otpChar} />,
|
|
};
|
|
const [authState, setAuthState] = useState<keyof typeof statesName>('phonenumber');
|
|
|
|
const submitForm = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setAuthState('otp');
|
|
};
|
|
return (
|
|
<div className='main-auth flex flex-nowrap justify-start flex-row-reverse h-screen w-screen'>
|
|
<form
|
|
onSubmit={submitForm}
|
|
className='w-full px-7 md:px-20 md:w-[50%] lg:w-[35%] min-w-[10rem] h-full shadow-lg shadow-slate-400 flex flex-col items-center justify-start pt-12'
|
|
>
|
|
<div className='w-48 h-[35%]'>
|
|
<img src={icons.logoBlack} className='w-full h-12' alt='page icon' />
|
|
</div>
|
|
<div className='font-normal mb-4 text-lg self-start'>{staticMessages.global.enterPanel}</div>
|
|
{statesName[authState]}
|
|
<PrimaryButton
|
|
onClick={() => null}
|
|
title={staticMessages.global.submit}
|
|
className='[background:var(--color-gradient-button)] hover:brightness-90 transition-all w-full h-11'
|
|
/>
|
|
</form>
|
|
<div className='hidden md:flex md:w-[50%] lg:w-[65%] h-full' />
|
|
</div>
|
|
);
|
|
}
|