adminFront/src/pages/Authorization/restore.tsx

import * as React from "react";
import { useNavigate } from "react-router-dom";
import { Formik, Field, Form } from "formik";
import { useTheme } from "@mui/material/styles";
import { Link } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import Logo from "@pages/Logo";
import CleverButton from "@kitUI/cleverButton";
import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import OutlinedInput from "@kitUI/outlinedInput";

export default () => {
  const theme = useTheme();
  const navigate = useNavigate();
  const [restore, setRestore] = React.useState(true);
  const [isReady, setIsReady] = React.useState(true);
  if (restore) {
    return (
      <Formik
        initialValues={{
          mail: "",
        }}
        onSubmit={(values) => {
          setRestore(false);
        }}
      >
        <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 sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
                <EmailOutlinedIcon htmlColor={theme.palette.golden.main} />
                <Field as={OutlinedInput} autoComplete="none" variant="filled" name="mail" label="Эл. почта" />
              </Box>
              <CleverButton type="submit" text="Отправить" isReady={isReady} />
              <Link to="/signin" style={{ textDecoration: "none" }}>
                <Typography color={theme.palette.golden.main}>Я помню пароль</Typography>
              </Link>
            </Box>
          </Box>
        </Form>
      </Formik>
    );
  } else {
    return (
      <Formik
        initialValues={{
          code: "",
        }}
        onSubmit={(values) => {}}
      >
        <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 sx={{ display: "flex", alignItems: "center", marginTop: "15px", "> *": { marginRight: "10px" } }}>
                <LockOutlinedIcon htmlColor={theme.palette.golden.main} />
                <Field as={OutlinedInput} name="code" variant="filled" label="Код из сообщения" />
              </Box>

              <CleverButton type="submit" text="Отправить" isReady={isReady} />
              <Link to="/signin" style={{ textDecoration: "none" }}>
                <Typography color={theme.palette.golden.main}>Я помню пароль</Typography>
              </Link>
            </Box>
          </Box>
        </Form>
      </Formik>
    );
  }
};