278 lines
9 KiB
TypeScript
278 lines
9 KiB
TypeScript
import * as React from 'react';
|
|
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Checkbox from '@mui/material/Checkbox';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import Divider from '@mui/material/Divider';
|
|
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
import FormLabel from '@mui/material/FormLabel';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import Link from '@mui/material/Link';
|
|
import TextField from '@mui/material/TextField';
|
|
import Typography from '@mui/material/Typography';
|
|
import Stack from '@mui/material/Stack';
|
|
import MuiCard from '@mui/material/Card';
|
|
import { styled } from '@mui/material/styles';
|
|
import AppTheme from '../../../shared-theme/AppTheme.tsx';
|
|
import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons.tsx';
|
|
import ColorModeSelect from '../../../shared-theme/ColorModeSelect.tsx';
|
|
import MuiPhoneNumber from 'mui-phone-number';
|
|
import { useDispatch } from 'react-redux';
|
|
import { registerUser } from '../../../redux/slices/authSlice.ts';
|
|
import { toast } from "react-toastify";
|
|
|
|
const Card = styled(MuiCard)(({ theme }) => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignSelf: 'center',
|
|
width: '100%',
|
|
padding: theme.spacing(4),
|
|
gap: theme.spacing(2),
|
|
margin: 'auto',
|
|
boxShadow:
|
|
'hsla(220, 30%, 5%, 0.05) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.05) 0px 15px 35px -5px',
|
|
[theme.breakpoints.up('sm')]: {
|
|
width: '450px',
|
|
},
|
|
...theme.applyStyles('dark', {
|
|
boxShadow:
|
|
'hsla(220, 30%, 5%, 0.5) 0px 5px 15px 0px, hsla(220, 25%, 10%, 0.08) 0px 15px 35px -5px',
|
|
}),
|
|
}));
|
|
|
|
const SignUpContainer = styled(Stack)(({ theme }) => ({
|
|
height: 'calc((1 - var(--template-frame-height, 0)) * 100dvh)',
|
|
minHeight: '100%',
|
|
padding: theme.spacing(2),
|
|
[theme.breakpoints.up('sm')]: {
|
|
padding: theme.spacing(4),
|
|
},
|
|
'&::before': {
|
|
content: '""',
|
|
display: 'block',
|
|
position: 'absolute',
|
|
zIndex: -1,
|
|
inset: 0,
|
|
backgroundImage:
|
|
'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
|
|
backgroundRepeat: 'no-repeat',
|
|
...theme.applyStyles('dark', {
|
|
backgroundImage:
|
|
'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
|
|
}),
|
|
},
|
|
}));
|
|
interface IRegisterForm {
|
|
name:string;
|
|
email: string;
|
|
password: string;
|
|
phoneCountryCode:string;
|
|
phoneNumber:number | null;
|
|
}
|
|
export default function SignUp(props: { disableCustomTheme?: boolean }) {
|
|
const dispatch = useDispatch();
|
|
const { control, handleSubmit, formState: { errors }, setValue } = useForm<IRegisterForm>({
|
|
defaultValues: {
|
|
name: '',
|
|
email: '',
|
|
password: '',
|
|
phoneCountryCode: '',
|
|
phoneNumber: null,
|
|
}
|
|
});
|
|
const [countryCode, setCountryCode] = React.useState('');
|
|
const [phoneNumber, setPhoneNumber] = React.useState('');
|
|
|
|
const extractCountryCodeAndNumber = (phone) => {
|
|
// Match the country code (e.g., +91) and the rest of the number
|
|
const match = phone.match(/^(\+\d{1,3})\s*(\d+.*)/);
|
|
if (match) {
|
|
return { countryCode: match[1], numberWithoutCountryCode: match[2] };
|
|
}
|
|
return { countryCode: '', numberWithoutCountryCode: phone };
|
|
};
|
|
const handleOnChange = (newPhone) => {
|
|
const { countryCode, numberWithoutCountryCode } = extractCountryCodeAndNumber(newPhone);
|
|
console.log("numberWithoutCountryCode",numberWithoutCountryCode);
|
|
setPhoneNumber(numberWithoutCountryCode)
|
|
setCountryCode(countryCode);
|
|
};
|
|
|
|
const onSubmit : SubmitHandler<IRegisterForm>= async (data: any) => {
|
|
const payload = {
|
|
name: data.name,
|
|
email: data.email,
|
|
password: data.password,
|
|
phoneCountryCode: countryCode,
|
|
phoneNumber: phoneNumber,
|
|
};
|
|
try {
|
|
await dispatch(registerUser(payload)).unwrap();
|
|
} catch (error) {
|
|
toast(error)
|
|
console.log("error",error)
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AppTheme {...props}>
|
|
{/* <CssBaseline enableColorScheme /> */}
|
|
<ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />/
|
|
<SignUpContainer direction="column" justifyContent="space-between">
|
|
<Card variant="outlined">
|
|
Digi-EV
|
|
<Typography
|
|
component="h1"
|
|
variant="h4"
|
|
sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
|
|
>
|
|
Sign up
|
|
</Typography>
|
|
<Box
|
|
component="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
|
|
>
|
|
<FormControl>
|
|
<FormLabel htmlFor="name">Full name</FormLabel>
|
|
<Controller
|
|
name="name"
|
|
control={control}
|
|
rules={{ required: 'Name is required' }}
|
|
render={({ field }) => (
|
|
<TextField
|
|
{...field}
|
|
id="name"
|
|
fullWidth
|
|
placeholder="Jon Snow"
|
|
error={!!errors.name}
|
|
helperText={errors.name?.message}
|
|
/>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormControl>
|
|
<FormLabel htmlFor="email">Email</FormLabel>
|
|
<Controller
|
|
name="email"
|
|
control={control}
|
|
rules={{
|
|
required: 'Email is required',
|
|
pattern: {
|
|
value: /\S+@\S+\.\S+/,
|
|
message: 'Please enter a valid email address.'
|
|
}
|
|
}}
|
|
render={({ field }) => (
|
|
<TextField
|
|
{...field}
|
|
id="email"
|
|
fullWidth
|
|
placeholder="your@email.com"
|
|
error={!!errors.email}
|
|
helperText={errors.email?.message}
|
|
/>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormControl>
|
|
<FormLabel htmlFor="password">Password</FormLabel>
|
|
<Controller
|
|
name="password"
|
|
control={control}
|
|
rules={{
|
|
required: 'Password is required',
|
|
minLength: {
|
|
value: 6,
|
|
message: 'Password must be at least 6 characters long'
|
|
}
|
|
}}
|
|
render={({ field }) => (
|
|
<TextField
|
|
{...field}
|
|
id="password"
|
|
fullWidth
|
|
type="password"
|
|
placeholder="••••••"
|
|
error={!!errors.password}
|
|
helperText={errors.password?.message}
|
|
/>
|
|
)}
|
|
/>
|
|
</FormControl>
|
|
<MuiPhoneNumber
|
|
defaultCountry='in'
|
|
onChange={handleOnChange}
|
|
value={phoneNumber}
|
|
/>
|
|
|
|
{/* <FormControlLabel
|
|
control={
|
|
<Controller
|
|
name="allowExtraEmails"
|
|
control={control}
|
|
render={({ field }) => (
|
|
<Checkbox {...field} color="primary" />
|
|
)}
|
|
/>
|
|
}
|
|
label="I want to receive updates via email."
|
|
/> */}
|
|
|
|
<Button type="submit" fullWidth variant="contained">
|
|
Sign up
|
|
</Button>
|
|
</Box>
|
|
{/* <Divider>
|
|
<Typography sx={{ color: 'text.secondary' }}>or</Typography>
|
|
</Divider> */}
|
|
{/* <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
<Button
|
|
fullWidth
|
|
variant="outlined"
|
|
onClick={() => alert('Sign up with Google')}
|
|
startIcon={<GoogleIcon />}
|
|
>
|
|
Sign up with Google
|
|
</Button>
|
|
<Button
|
|
fullWidth
|
|
variant="outlined"
|
|
onClick={() => alert('Sign up with Facebook')}
|
|
startIcon={<FacebookIcon />}
|
|
>
|
|
Sign up with Facebook
|
|
</Button>
|
|
<Typography sx={{ textAlign: 'center' }}>
|
|
Already have an account?{' '}
|
|
<Link
|
|
href="/"
|
|
variant="body2"
|
|
sx={{ alignSelf: 'center' }}
|
|
>
|
|
Sign in
|
|
</Link>
|
|
</Typography>
|
|
</Box> */}
|
|
<Divider>or</Divider>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
|
<Typography sx={{ textAlign: 'center' }}>
|
|
Already have an account?
|
|
<Link
|
|
href="/auth/login"
|
|
variant="body2"
|
|
sx={{ alignSelf: 'center' }}
|
|
>
|
|
Sign in
|
|
</Link>
|
|
</Typography>
|
|
</Box>
|
|
</Card>
|
|
</SignUpContainer>
|
|
</AppTheme>
|
|
);
|
|
}
|