front-hub/src/pages/auth/Signup.tsx

import { Box, Dialog, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useLocation, useNavigate } from "react-router-dom";
import { useFormik } from "formik";
import CloseIcon from "@mui/icons-material/Close";
import CustomButton from "@components/CustomButton";
import InputTextfield from "@components/InputTextfield";
import PenaLogo from "@components/PenaLogo";
import { useSnackbar } from "notistack";
import { authStore } from "@stores/makeRequest";
import { Link as RouterLink } from "react-router-dom";
import { object, ref, string } from "yup";
import { ChangeEvent } from "react";


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

const initialValues: Values = {
    email: "",
    phoneNumber: "",
    password: "",
    repeatPassword: "",
};

const validationSchema = object({
    email: string().email("Введите email").required("Поле обязательно"),
    phoneNumber: string().matches(/^\+\d{5,}|\d{6,}$/, "Введите номер телефона").required("Поле обязательно"),
    password: string().min(8, "Минимум 8 символов").required("Поле обязательно"),
    repeatPassword: string().oneOf([ref("password"), undefined], "Пароли не совпадают"),
});

export default function SignupDialog() {
    const { enqueueSnackbar } = useSnackbar();
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const navigate = useNavigate();
    const makeRequest = authStore(state => state.makeRequest);
    const location = useLocation();
    const formik = useFormik<Values>({
        initialValues,
        validationSchema,
        onSubmit: async (values: Values) => {
            makeRequest({
                url: "https://hub.pena.digital/auth/register",
                body: {
                    "login": values.email,
                    "email": values.email,
                    "password": values.repeatPassword,
                    "phoneNumber": "--"
                },
                useToken: false
            })
                .catch((e: any) => {
                    console.log(e);
                    enqueueSnackbar(e.response?.data?.message ?? `Unknown error`);
                });
        },
    });

    function handleClose() {
        navigate("/");
    }

    function handlePhoneNumberChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
        if (/^\+?\d*$/.test(e.target.value)) formik.setFieldValue("phoneNumber", e.target.value);
    }

    return (
        <Dialog
            open={true}
            onClose={handleClose}
            PaperProps={{
                sx: {
                    width: "600px",
                }
            }}
            slotProps={{
                backdrop: {
                    style: {
                        backgroundColor: "rgb(0 0 0 / 0.7)",
                    }
                }
            }}
        >
            <Box
                component="form"
                onSubmit={formik.handleSubmit}
                noValidate
                sx={{
                    position: "relative",
                    backgroundColor: "white",
                    display: "flex",
                    alignItems: "center",
                    flexDirection: "column",
                    p: upMd ? "50px" : "18px",
                    pb: upMd ? "40px" : "30px",
                    gap: "15px",
                    borderRadius: "12px",
                    boxShadow: `
                        0px 100px 309px rgba(210, 208, 225, 0.24),
                        0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                        0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                        0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                        0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                        0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)
                    `,
                }}
            >
                <IconButton
                    onClick={handleClose}
                    sx={{
                        position: "absolute",
                        right: "7px",
                        top: "7px",
                    }}
                >
                    <CloseIcon sx={{ transform: "scale(1.5)" }} />
                </IconButton>
                <Box sx={{ mt: upMd ? undefined : "62px" }}>
                    <PenaLogo width={upMd ? 233 : 196} />
                </Box>
                <Typography
                    sx={{
                        color: theme.palette.grey3.main,
                        mt: "5px",
                        mb: upMd ? "35px" : "33px",
                    }}
                >
                    Регистрация
                </Typography>
                <InputTextfield
                    TextfieldProps={{
                        value: formik.values.email,
                        placeholder: "username@penahub.com",
                        onBlur: formik.handleBlur,
                        error: formik.touched.email && Boolean(formik.errors.email),
                        helperText: formik.touched.email && formik.errors.email,
                    }}
                    onChange={formik.handleChange}
                    color="#F2F3F7"
                    id="email"
                    label="E-mail"
                    gap={upMd ? "10px" : "10px"}
                />
                <InputTextfield
                    TextfieldProps={{
                        value: formik.values.phoneNumber,
                        placeholder: "+7 900 000 00 00",
                        onBlur: formik.handleBlur,
                        error: formik.touched.phoneNumber && Boolean(formik.errors.phoneNumber),
                        helperText: formik.touched.phoneNumber && formik.errors.phoneNumber,
                    }}
                    onChange={handlePhoneNumberChange}
                    color="#F2F3F7"
                    id="phoneNumber"
                    label="Телефон"
                    gap={upMd ? "10px" : "10px"}
                />
                <InputTextfield
                    TextfieldProps={{
                        value: formik.values.password,
                        placeholder: "Не менее 8 символов",
                        onBlur: formik.handleBlur,
                        error: formik.touched.password && Boolean(formik.errors.password),
                        helperText: formik.touched.password && formik.errors.password,
                        type: "password",
                    }}
                    onChange={formik.handleChange}
                    color="#F2F3F7"
                    id="password"
                    label="Пароль"
                    gap={upMd ? "10px" : "10px"}
                />
                <InputTextfield
                    TextfieldProps={{
                        value: formik.values.repeatPassword,
                        placeholder: "Не менее 8 символов",
                        onBlur: formik.handleBlur,
                        error: formik.touched.repeatPassword && Boolean(formik.errors.repeatPassword),
                        helperText: formik.touched.repeatPassword && formik.errors.repeatPassword,
                        type: "password",
                    }}
                    onChange={formik.handleChange}
                    color="#F2F3F7"
                    id="repeatPassword"
                    label="Повторить пароль"
                    gap={upMd ? "10px" : "10px"}
                />
                <CustomButton
                    fullWidth
                    variant="contained"
                    sx={{
                        backgroundColor: theme.palette.brightPurple.main,
                        textColor: "white",
                        width: "100%",
                        py: "12px",
                        mt: upMd ? undefined : "10px",
                    }}
                    type="submit"
                    disabled={formik.isSubmitting}
                >
                    Зарегистрироваться
                </CustomButton>
                <Link
                    component={RouterLink}
                    to="/signin"
                    state={{ backgroundLocation: location.state.backgroundLocation }}
                    sx={{
                        color: theme.palette.brightPurple.main,
                        mt: "auto",
                    }}
                >
                    Вход в личный кабинет
                </Link>
            </Box>
        </Dialog>
    );
}