139 lines
4.1 KiB
TypeScript
139 lines
4.1 KiB
TypeScript
import { Box, Button, Stack, TextField, Typography } from '@mui/material';
|
|
import { useRef, useState, type Dispatch } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CountryCodeSelector } from './CountryCodeSelector';
|
|
import { Google } from 'iconsax-reactjs';
|
|
import { isNumeric } from '@/utils/regexes/isNumeric';
|
|
import type { AuthMode, AuthType } from '../types/auth-types';
|
|
import { isEmail } from '@/utils/regexes/isEmail';
|
|
|
|
export interface LoginRegisterFormProps {
|
|
authType: AuthType;
|
|
setAuthType: Dispatch<AuthType>;
|
|
onLoginRegisterSubmit: (value: string) => void;
|
|
}
|
|
|
|
export function LoginRegisterForm({
|
|
authType,
|
|
setAuthType,
|
|
}: LoginRegisterFormProps) {
|
|
const { t, i18n } = useTranslation('authentication');
|
|
const [value, setValue] = useState('');
|
|
const [countryCode, setCountryCode] = useState('+98');
|
|
const textFieldRef = useRef<HTMLDivElement>(null);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const dir = i18n.dir();
|
|
const [error, setError] = useState<string>();
|
|
const [touched, setTouched] = useState<boolean>(false);
|
|
const inputError: boolean = touched && !!error;
|
|
|
|
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newValue = event.target.value;
|
|
setValue(newValue);
|
|
|
|
// If the new value contains only digits (or is empty), it's a phone number
|
|
if (isNumeric(newValue)) {
|
|
setAuthType('phone');
|
|
} else {
|
|
setAuthType('email');
|
|
}
|
|
};
|
|
|
|
const handleBlur = () => {
|
|
setTouched(true);
|
|
validateInput(value, authType);
|
|
};
|
|
|
|
const validateInput = (value: string, authType: AuthType) => {
|
|
if (!value) {
|
|
setError(t('loginForm.thisFieldIsRequired'));
|
|
} else if (authType === 'email' && !isEmail(value)) {
|
|
setError(t('loginForm.emailIsInvalid'));
|
|
} else if (authType === 'phone' && false /* TODO */) {
|
|
setError(t('loginForm.emailIsInvalid'));
|
|
} else {
|
|
setError(undefined);
|
|
}
|
|
};
|
|
|
|
const isInputValid = (value: string, authType: AuthType): boolean => {
|
|
if (!value) {
|
|
return false;
|
|
}
|
|
|
|
if (authType === 'email' && !isEmail(value)) {
|
|
return false;
|
|
}
|
|
|
|
if (authType === 'phone' && false /* TODO */) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (isInputValid(value, authType)) {
|
|
} else {
|
|
inputRef.current?.focus();
|
|
validateInput(value, authType);
|
|
}
|
|
};
|
|
|
|
const showAdornment = authType === 'phone' && value.length > 0;
|
|
|
|
return (
|
|
<Box sx={{ width: '100%' }}>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h5">{t('loginForm.title')}</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{t('loginForm.description')}
|
|
</Typography>
|
|
</Stack>
|
|
|
|
<TextField
|
|
ref={textFieldRef}
|
|
inputRef={inputRef}
|
|
label={t('loginForm.emailOrPhoneLabel')}
|
|
value={value}
|
|
onChange={handleInputChange}
|
|
onBlur={handleBlur}
|
|
error={inputError}
|
|
helperText={inputError ? error : ''}
|
|
autoFocus
|
|
slotProps={{
|
|
htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } },
|
|
input: {
|
|
startAdornment: dir === 'ltr' && (
|
|
<CountryCodeSelector
|
|
value={countryCode}
|
|
onChange={setCountryCode}
|
|
show={showAdornment}
|
|
menuAnchor={textFieldRef.current}
|
|
onCloseFocusRef={inputRef}
|
|
/>
|
|
),
|
|
endAdornment: dir === 'rtl' && (
|
|
<CountryCodeSelector
|
|
value={countryCode}
|
|
onChange={setCountryCode}
|
|
show={showAdornment}
|
|
menuAnchor={textFieldRef.current}
|
|
onCloseFocusRef={inputRef}
|
|
/>
|
|
),
|
|
},
|
|
}}
|
|
sx={{ my: 4 }}
|
|
/>
|
|
|
|
<Stack spacing={2}>
|
|
<Button onClick={handleSubmit}>{t('loginForm.submitButton')}</Button>
|
|
<Button variant="outlined" startIcon={<Google variant="Bold" />}>
|
|
{t('loginForm.loginWithGoogle')}
|
|
</Button>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|