inital commit
This commit is contained in:
270
ditch-the-agent/src/pages/authentication/SignUp.tsx
Normal file
270
ditch-the-agent/src/pages/authentication/SignUp.tsx
Normal file
@@ -0,0 +1,270 @@
|
||||
import { ReactElement, Suspense, useState } from 'react';
|
||||
import { Form, Formik } from 'formik';
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
InputAdornment,
|
||||
InputLabel,
|
||||
Link,
|
||||
OutlinedInput,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Skeleton,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import signupBanner from 'assets/authentication-banners/green.png';
|
||||
import IconifyIcon from 'components/base/IconifyIcon';
|
||||
import logo from 'assets/logo/favicon-logo.png';
|
||||
import Image from 'components/base/Image';
|
||||
import{axiosInstance} from '../../axiosApi.js';
|
||||
|
||||
type SignUpValues = {
|
||||
email: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
password: string;
|
||||
password2: string;
|
||||
ownerType: string;
|
||||
}
|
||||
|
||||
const SignUp = (): ReactElement => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showPassword2, setShowPassword2] = useState(false);
|
||||
|
||||
// const [firstName, setFirstName] = useState('');
|
||||
// const [lastName, setLastName] = useState('');
|
||||
// const [email, setEmail] = useState('');
|
||||
// const [password, setPassword] = useState('');
|
||||
// const [password2, setPassword2] = useState('');
|
||||
// const [ownerType, setOwnerType] = useState('');
|
||||
|
||||
const handleClickShowPassword = () => setShowPassword(!showPassword);
|
||||
const handleClickShowPassword2 = () => setShowPassword2(!showPassword2);
|
||||
|
||||
const handleSignUp = async({email, first_name, last_name, ownerType, password, password2}: SignUpValues): Promise<void> => {
|
||||
|
||||
console.log({
|
||||
email: email,
|
||||
first_name: first_name,
|
||||
last_name: last_name,
|
||||
user_type: ownerType,
|
||||
password: password,
|
||||
password2: password2
|
||||
})
|
||||
const response = await axiosInstance.post('/api/register',
|
||||
{
|
||||
email: email,
|
||||
first_name: first_name,
|
||||
last_name: last_name,
|
||||
user_type: ownerType,
|
||||
password: password,
|
||||
password2: password2
|
||||
}
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
bgcolor="background.paper"
|
||||
boxShadow={(theme) => theme.shadows[3]}
|
||||
|
||||
width={{ md: 960 }}
|
||||
>
|
||||
<Stack width={{ md: 0.5 }} m={2.5} gap={10}>
|
||||
<Link href="/" width="fit-content">
|
||||
<Image src={logo} width={82.6} />
|
||||
</Link>
|
||||
<Stack alignItems="center" gap={2.5} mx="auto">
|
||||
<Typography variant="h3">Signup</Typography>
|
||||
<Formik
|
||||
initialValues={{
|
||||
first_name: '',
|
||||
email: '',
|
||||
last_name: '',
|
||||
password: '',
|
||||
password2: '',
|
||||
ownerType: "property_owner"
|
||||
}}
|
||||
onSubmit={handleSignUp}
|
||||
|
||||
>
|
||||
{(formik) => (
|
||||
<Form>
|
||||
<FormControl variant="standard" fullWidth>
|
||||
<InputLabel shrink htmlFor="name">
|
||||
First Name
|
||||
</InputLabel>
|
||||
<TextField
|
||||
variant="filled"
|
||||
onChange={(event) => formik.setFieldValue('first_name', event.target.value)}
|
||||
placeholder="Enter your first name"
|
||||
id="first_name"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end" sx={{ width: 16, height: 16 }}>
|
||||
<IconifyIcon icon="mdi:user" width={1} height={1} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl variant="standard" fullWidth>
|
||||
<InputLabel shrink htmlFor="name">
|
||||
Last Name
|
||||
</InputLabel>
|
||||
<TextField
|
||||
variant="filled"
|
||||
onChange={(event) => formik.setFieldValue('last_name', event.target.value)}
|
||||
placeholder="Enter your last name"
|
||||
id="last_name"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end" sx={{ width: 16, height: 16 }}>
|
||||
<IconifyIcon icon="mdi:user" width={1} height={1} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl variant="standard" fullWidth>
|
||||
<InputLabel shrink htmlFor="email">
|
||||
Email
|
||||
</InputLabel>
|
||||
<OutlinedInput
|
||||
placeholder="Enter your email"
|
||||
id="email"
|
||||
endAdornment={
|
||||
<InputAdornment position="end" sx={{ width: 16, height: 16 }}>
|
||||
<IconifyIcon icon="ic:baseline-email" width={1} height={1} />
|
||||
</InputAdornment>
|
||||
}
|
||||
sx={{
|
||||
width: 1,
|
||||
backgroundColor: 'action.focus',
|
||||
}}
|
||||
onChange={(event) => formik.setFieldValue('email', event.target.value)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl variant="standard" fullWidth>
|
||||
<InputLabel shrink htmlFor="email">
|
||||
Account Type
|
||||
</InputLabel>
|
||||
<RadioGroup
|
||||
row
|
||||
onChange={(event) => formik.setFieldValue('ownerType', event.target.value)}
|
||||
>
|
||||
<FormControlLabel value="property_owner" control={<Radio />} name="ownerType" label="Owner"/>
|
||||
<FormControlLabel value="vendor" control={<Radio />} name="ownerType" label="Vendor" />
|
||||
|
||||
</RadioGroup>
|
||||
|
||||
</FormControl>
|
||||
<FormControl variant="standard" fullWidth>
|
||||
<InputLabel shrink htmlFor="password">
|
||||
Password
|
||||
</InputLabel>
|
||||
<TextField
|
||||
variant="filled"
|
||||
placeholder="********"
|
||||
onChange={(event) => formik.setFieldValue('password', event.target.value)}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
id="password"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="toggle password visibility"
|
||||
onClick={handleClickShowPassword}
|
||||
edge="end"
|
||||
sx={{
|
||||
color: 'text.secondary',
|
||||
}}
|
||||
>
|
||||
{showPassword ? (
|
||||
<IconifyIcon icon="ic:baseline-key-off" />
|
||||
) : (
|
||||
<IconifyIcon icon="ic:baseline-key" />
|
||||
)}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl variant="standard" fullWidth>
|
||||
<InputLabel shrink htmlFor="password">
|
||||
Confirm Password
|
||||
</InputLabel>
|
||||
<TextField
|
||||
variant="filled"
|
||||
placeholder="********"
|
||||
onChange={(event) => formik.setFieldValue('password2', event.target.value)}
|
||||
type={showPassword2 ? 'text' : 'password'}
|
||||
id="password"
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="toggle password visibility"
|
||||
onClick={handleClickShowPassword2}
|
||||
edge="end"
|
||||
sx={{
|
||||
color: 'text.secondary',
|
||||
}}
|
||||
>
|
||||
{showPassword ? (
|
||||
<IconifyIcon icon="ic:baseline-key-off" />
|
||||
) : (
|
||||
<IconifyIcon icon="ic:baseline-key" />
|
||||
)}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<Button variant="contained" type={'submit'} fullWidth>
|
||||
Sign up
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
)}
|
||||
</Formik>
|
||||
|
||||
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Already have an account ?{' '}
|
||||
<Link
|
||||
href="/authentication/login"
|
||||
underline="hover"
|
||||
fontSize={(theme) => theme.typography.body1.fontSize}
|
||||
>
|
||||
Log in
|
||||
</Link>
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Suspense
|
||||
fallback={
|
||||
<Skeleton variant="rectangular" height={1} width={1} sx={{ bgcolor: 'primary.main' }} />
|
||||
}
|
||||
>
|
||||
<Image
|
||||
alt="Signup banner"
|
||||
src={signupBanner}
|
||||
sx={{
|
||||
width: 0.5,
|
||||
display: { xs: 'none', md: 'block' },
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignUp;
|
||||
Reference in New Issue
Block a user