frontPanel/src/pages/startPage/Restore.tsx

import { FC, useState } from "react";
import CloseIcon from "@mui/icons-material/Close";
import { Box, Button, Dialog, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import InputTextfield from "@ui_kit/InputTextfield";
import PasswordInput from "@ui_kit/passwordInput";
import { useFormik } from "formik";
import { object, ref, string } from "yup";
import Logotip from "../Landing/images/icons/QuizLogo";
import { useNavigate, Link as RouterLink, useLocation } from "react-router-dom";

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

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

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

export const Restore: FC = () => {
    const [isDialogOpen, setIsDialogOpen] = useState<boolean>(true);
    const navigate = useNavigate();
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const location = useLocation();

    const formik = useFormik<Values>({
        initialValues,
        validationSchema,
        onSubmit: (values) => {
        },
    });

    function handleClose() {
        setIsDialogOpen(false);
        setTimeout(() => navigate("/"), theme.transitions.duration.leavingScreen);
    }

    return (
        <Dialog
            open={isDialogOpen}
            onClose={handleClose}
            PaperProps={{
                sx: {
                    width: "600px",
                    maxWidth: "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 15px 80px rgb(210 208 225 / 70%)",
                    "& .MuiFormHelperText-root.Mui-error, & .MuiFormHelperText-root.Mui-error.MuiFormHelperText-filled": {
                        position: "absolute",
                        top: "46px",
                        margin: "0",
                    },
                }}
            >
                <IconButton
                    onClick={handleClose}
                    sx={{
                        position: "absolute",
                        right: "7px",
                        top: "7px",
                    }}
                >
                    <CloseIcon sx={{ transform: "scale(1.5)" }} />
                </IconButton>
                <Box sx={{ mt: upMd ? undefined : "62px" }}>
                    <Logotip width={upMd ? 233 : 196} />
                </Box>
                <Typography
                    sx={{
                        color: "#4D4D4D",
                        mt: "5px",
                        mb: upMd ? "30px" : "33px",
                    }}
                >
                    Восстановление пароля
                </Typography>
                <InputTextfield
                    TextfieldProps={{
                        value: formik.values.email,
                        placeholder: "username",
                        onBlur: formik.handleBlur,
                        error: formik.touched.email && Boolean(formik.errors.email),
                        helperText: formik.touched.email && formik.errors.email,
                        "data-cy": "username",
                    }}
                    onChange={formik.handleChange}
                    color="#F2F3F7"
                    id="email"
                    label="Email"
                    gap={upMd ? "10px" : "10px"}
                />
                <PasswordInput
                    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,
                        autoComplete: "new-password",
                        "data-cy": "password",
                    }}
                    onChange={formik.handleChange}
                    color="#F2F3F7"
                    id="password"
                    label="Пароль"
                    gap={upMd ? "10px" : "10px"}
                />
                <PasswordInput
                    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,
                        autoComplete: "new-password",
                        "data-cy": "repeat-password",
                    }}
                    onChange={formik.handleChange}
                    color="#F2F3F7"
                    id="repeatPassword"
                    label="Повторить пароль"
                    gap={upMd ? "10px" : "10px"}
                />
                <Button
                    variant="contained"
                    fullWidth
                    type="submit"
                    disabled={formik.isSubmitting}
                    sx={{
                        py: "12px",
                        "&:hover": {
                            backgroundColor: "#581CA7",
                        },
                        "&:active": {
                            color: "white",
                            backgroundColor: "black",
                        },
                    }}
                    data-cy="signup"
                >
                    Восстановить
                </Button>
                <Link
                    component={RouterLink}
                    to="/signin"
                    state={{ backgroundLocation: location.state.backgroundLocation }}
                    sx={{
                        color: "#7E2AEA",
                        mt: "auto",
                    }}
                >
                    У меня уже есть аккаунт
                </Link>
            </Box>
        </Dialog>
    );
};