122 lines
3.4 KiB
JavaScript
122 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import { Box, Stack, Typography, TextField, Button, Link } from '@mui/material';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import AuthOutlet from './AuthOutlet';
|
|
|
|
function Register() {
|
|
const ad = React.useRef(null);
|
|
const soyad = React.useRef(null);
|
|
const email = React.useRef(null);
|
|
const password = React.useRef(null);
|
|
const passwordConf = React.useRef(null);
|
|
const navigate = useNavigate();
|
|
|
|
const registerHandler = async (e) => {
|
|
e.preventDefault();
|
|
const FirstName = ad.current.value.replace(/\s+/g, '');
|
|
const LastName = soyad.current.value.replace(/\s+/g, '');
|
|
const Email = email.current.value.replace(/\s+/g, '');
|
|
const Password = password.current.value.replace(/\s+/g, '');
|
|
const pwdConf = passwordConf.current.value.replace(/\s+/g, '');
|
|
if (FirstName === '') {
|
|
// 'Please enter name.'
|
|
ad.current.focus();
|
|
} else if (LastName === '') {
|
|
// 'Please enter surname.'
|
|
soyad.current.focus();
|
|
} else if (Email === '') {
|
|
// 'Please enter email.'
|
|
email.current.focus();
|
|
} else if (!/^[\w-.]+@([\w-]+\.)+[\w-]{1,20}$/.test(Email)) {
|
|
// 'Please enter real email.'
|
|
email.current.focus();
|
|
} else if (Password === '') {
|
|
// 'Please enter password.'
|
|
password.current.focus();
|
|
} else if (pwdConf === '') {
|
|
// 'Please enter password again.'
|
|
passwordConf.current.focus();
|
|
} else if (Password !== pwdConf) {
|
|
// 'Passwords do not match.'
|
|
password.current.focus();
|
|
} else if (Password.length < 6) {
|
|
// 'Password must be at least 6 characters.'
|
|
password.current.focus();
|
|
} else if (
|
|
!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{6,}$/.test(Password)
|
|
) {
|
|
// 'Password must contain at least one uppercase letter, one lowercase letter and one number.',
|
|
password.current.focus();
|
|
} else {
|
|
// do register stuff
|
|
}
|
|
};
|
|
|
|
/** Focus name input when component mounted. */
|
|
React.useEffect(() => {
|
|
ad.current.focus();
|
|
}, []);
|
|
|
|
return (
|
|
<AuthOutlet>
|
|
<Stack direction="row" gap={3} sx={{ alignItems: 'center' }}>
|
|
<TextField
|
|
inputRef={ad}
|
|
label="Name"
|
|
type="text"
|
|
variant="outlined"
|
|
autoComplete="off"
|
|
/>
|
|
<TextField
|
|
inputRef={soyad}
|
|
label="Surname"
|
|
type="text"
|
|
variant="outlined"
|
|
autoComplete="off"
|
|
/>
|
|
</Stack>
|
|
<TextField
|
|
inputRef={email}
|
|
type="email"
|
|
label="E-mail"
|
|
variant="outlined"
|
|
autoComplete="off"
|
|
/>
|
|
<TextField
|
|
inputRef={password}
|
|
type="password"
|
|
autoComplete="new-password"
|
|
label="Password"
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
inputRef={passwordConf}
|
|
hidden
|
|
type="password"
|
|
autoComplete="new-password"
|
|
label="Password (again)"
|
|
variant="outlined"
|
|
/>
|
|
|
|
<Button variant="contained" onClick={registerHandler}>
|
|
Sign Up
|
|
</Button>
|
|
|
|
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
|
|
<Typography variant="body2" component="p">
|
|
Alredy have an account?
|
|
</Typography>
|
|
<Link
|
|
variant="body2"
|
|
sx={{ display: 'inline', ml: 1 }}
|
|
onClick={() => navigate('/login')}
|
|
>
|
|
Sign In
|
|
</Link>
|
|
</Box>
|
|
</AuthOutlet>
|
|
);
|
|
}
|
|
|
|
export default Register;
|