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

import { Box, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import { apiRequestHandler } from "@utils/api/apiRequestHandler";
import { 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 { ApiError } from "@utils/api/types";

import { useSnackbar } from "notistack";

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

// TODO
function validate(values: Values) {
  const errors = {} as any;
  if (!values.login) {
    errors.login = "Required";
  } else if (!/^[\w-]{3,25}$/i.test(values.login)) {
    errors.login = "Invalid username";
  }
  if (!values.password) {
    errors.password = "Required";
  } else if (!/^[\w-]{8,25}$/i.test(values.password)) {
    errors.password = "Invalid password";
  }
  if (values.password !== values.repeatPassword) {
    errors.repeatPassword = "Passwords do not match";
  }
  return errors;
}

export default function Signup() {
  const { enqueueSnackbar } = useSnackbar();
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const navigate = useNavigate();
  const formik = useFormik<Values>({
    initialValues: {
      login: "",
      email: "",
      phoneNumber: "",
      password: "",
      repeatPassword: "",
    },
    validate,
    onSubmit: async (values: Values) => {
      const result = await apiRequestHandler.register({
        email: values.email,
        login: values.login,
        password: values.password,
        phoneNumber: values.phoneNumber,
      });
      if (result instanceof ApiError) {
        enqueueSnackbar(`Error: ${result.message}`);
        return;
      } else if (result instanceof Error) {
        console.log(result);
        enqueueSnackbar(`Unknown error`);
        return;
      } else {
        // navigate("/signin"); // TODO
      }
    },
  });

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

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        height: upMd ? undefined : "100vh",
      }}
    >
      <Box
        component="form"
        onSubmit={formik.handleSubmit}
        noValidate
        sx={{
          position: "relative",
          width: upMd ? "600px" : "100%",
          height: upMd ? "auto" : "100%",
          backgroundColor: "white",
          display: "flex",
          alignItems: "center",
          flexDirection: "column",
          mt: upMd ? "79px" : undefined,
          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: "65px" }}>
          <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.login,
            placeholder: "username",
            onBlur: formik.handleBlur,
            error: formik.touched.login && Boolean(formik.errors.login),
            helperText: formik.touched.login && formik.errors.login,
          }}
          onChange={formik.handleChange}
          id="login"
          label="Login"
          gap={upMd ? "15px" : "10px"}
        />
        <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}
          id="email"
          label="E-mail"
          gap={upMd ? "15px" : "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={formik.handleChange}
          id="phoneNumber"
          label="Телефон"
          gap={upMd ? "15px" : "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}
          id="password"
          label="Пароль"
          gap={upMd ? "15px" : "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}
          id="repeatPassword"
          label="Повторить пароль"
          gap={upMd ? "15px" : "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
          href="#"
          sx={{
            color: theme.palette.brightPurple.main,
            mt: "auto",
          }}
        >
          Вход в личный кабинет
        </Link>
      </Box>
    </Box>
  );
}