adminFront/src/pages/Authorization/signup.tsx

import { enqueueSnackbar, useSnackbar } from "notistack";
import { useNavigate } from "react-router-dom";
import { useTheme } from "@mui/material/styles";
import { Formik, Field, Form } from "formik";
import { Link } from "react-router-dom";
import { Box, Button, Typography } from "@mui/material";
import OutlinedInput from "@kitUI/outlinedInput";

import Logo from "@pages/Logo/index";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { register } from "@root/api/auth";

interface Values {
	email: string;
	password: string;
	repeatPassword: string;
}

function validate(values: Values) {
	const errors: Partial<Values> = {};

	if (!values.email) {
		errors.email = "Обязательное поле";
	} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
		errors.email = "Неверный формат эл. почты";
	}

	if (!values.password) {
		errors.password = "Обязательное поле";
	} else if (!/^[\S]{8,25}$/i.test(values.password)) {
		errors.password = "Неверный пароль";
	}
	if (values.password !== values.repeatPassword) {
		errors.repeatPassword = "Пароли не совпадают";
	}

	return errors;
}

const SignUp = () => {
	const navigate = useNavigate();
	const theme = useTheme();

	return (
		<Formik
			initialValues={{
				email: "",
				password: "",
				repeatPassword: "",
			}}
			validate={validate}
			onSubmit={async (values, formikHelpers) => {
				formikHelpers.setSubmitting(true);

				const [_, registerError] = await register(values.email, values.repeatPassword);

				formikHelpers.setSubmitting(false);

				if (registerError) {
					return enqueueSnackbar(registerError);
				}

				navigate("/users");
			}}
		>
			{(props) => (
				<Form>
					<Box
						component="section"
						sx={{
							minHeight: "100vh",
							height: "100%",
							width: "100%",
							backgroundColor: theme.palette.content.main,
							display: "flex",
							justifyContent: "center",
							alignItems: "center",
							padding: "15px 0",
						}}
					>
						<Box
							component="article"
							sx={{
								width: "350px",
								backgroundColor: theme.palette.content.main,
								display: "flex",
								flexDirection: "column",
								justifyContent: "center",
								"> *": {
									marginTop: "15px",
								},
							}}
						>
							<Typography variant="h6" color={theme.palette.secondary.main}>
								Новый аккаунт
							</Typography>
							<Logo />

							<Box>
								<Typography variant="h5" color={theme.palette.secondary.main}>
									Добро пожаловать
								</Typography>
								<Typography variant="h6" color={theme.palette.secondary.main}>
									Мы рады что вы выбрали нас!
								</Typography>
							</Box>
							<Box
								sx={{
									display: "flex",
									alignItems: "center",
									marginTop: "15px",
									"> *": { marginRight: "10px" },
								}}
							>
								<EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
								<Field
									as={OutlinedInput}
									name="email"
									variant="filled"
									label="Эл. почта"
									id="email"
									error={props.touched.email && !!props.errors.email}
									helperText={
										<Typography sx={{ fontSize: "12px", width: "200px" }}>
											{props.touched.email && props.errors.email}
										</Typography>
									}
								/>
							</Box>
							<Box
								sx={{
									display: "flex",
									alignItems: "center",
									marginTop: "15px",
									"> *": { marginRight: "10px" },
								}}
							>
								<LockOutlinedIcon htmlColor={theme.palette.golden.main} />
								<Field
									sx={{}}
									as={OutlinedInput}
									type="password"
									name="password"
									variant="filled"
									label="Пароль"
									id="password"
									error={props.touched.password && !!props.errors.password}
									helperText={
										<Typography sx={{ fontSize: "12px", width: "200px" }}>
											{props.touched.password && props.errors.password}
										</Typography>
									}
								/>
							</Box>
							<Box
								sx={{
									display: "flex",
									alignItems: "center",
									marginTop: "15px",
									"> *": { marginRight: "10px" },
								}}
							>
								<LockOutlinedIcon htmlColor={theme.palette.golden.main} />
								<Field
									as={OutlinedInput}
									type="password"
									name="repeatPassword"
									variant="filled"
									label="Повторите пароль"
									id="repeatPassword"
									error={props.touched.repeatPassword && !!props.errors.repeatPassword}
									helperText={
										<Typography sx={{ fontSize: "12px", width: "200px" }}>
											{props.touched.repeatPassword && props.errors.repeatPassword}
										</Typography>
									}
								/>
							</Box>
							<Button
								type="submit"
								disabled={props.isSubmitting}
								sx={{
									width: "250px",
									margin: "15px auto",
									padding: "20px 30px",
									fontSize: 18,
								}}
							>
								Войти
							</Button>
							<Link to="/signin" style={{ textDecoration: "none" }}>
								<Typography color={theme.palette.golden.main}>У меня уже есть аккаунт</Typography>
							</Link>
						</Box>
					</Box>
				</Form>
			)}
		</Formik>
	);
};

export default SignUp;