Merge pull request #594 from bluewave-labs/feat/register-page

Register page

Client/src/Components/Button/index.jsx

@@ -58,6 +58,7 @@ const Button = ({
   disabled,
   img,
   onClick,
+  props,
   sx,
 }) => {
   const { variant, color } = levelConfig[level];
@@ -84,6 +85,7 @@ const Button = ({
         },
         ...sx,
       }}
+      {...props}
     >
       {img && img}
       <span>{label}</span>

Client/src/Pages/Auth/Login.jsx

@@ -94,7 +94,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
               id="login-email-input"
               label="Email"
               isRequired={true}
-              placeholder="john.doe@domain.com"
+              placeholder="jordan.ellis@domain.com"
               autoComplete="email"
               value={form.email}
               onChange={onChange}
@@ -117,6 +117,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
                 mr: theme.gap.xs,
               },
             }}
+            props={{ tabIndex: -1 }}
           />
           <Button
             level="primary"
@@ -190,6 +191,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
                 mr: theme.gap.xs,
               },
             }}
+            props={{ tabIndex: -1 }}
           />
           <Button
             level="primary"
@@ -326,7 +328,7 @@ const Login = () => {
   };
 
   return (
-    <Stack className="login-page" overflow="hidden">
+    <Stack className="login-page auth" overflow="hidden">
       <img
         className="background-pattern-svg"
         src={background}
@@ -339,7 +341,7 @@ const Login = () => {
         gap={theme.gap.small}
       >
         <Logo style={{ borderRadius: theme.shape.borderRadius }} />
-        <Typography>BlueWave Uptime</Typography>
+        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
       </Stack>
       <Stack
         width="100%"

Client/src/Pages/Auth/Register/Register.jsx

@@ -1,201 +1,287 @@
-import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { useDispatch } from "react-redux";
-import PropTypes from "prop-types";
-
-import "../index.css";
-import background from "../../../assets/Images/background_pattern_decorative.png";
-import Logomark from "../../../assets/Images/bwl-logo-2.svg?react";
-import Check from "../../../Components/Check/Check";
-import Button from "../../../Components/Button";
 import { credentials } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
-import Field from "../../../Components/Inputs/Field";
 import { register } from "../../../Features/Auth/authSlice";
 import { useParams } from "react-router-dom";
+import background from "../../../assets/Images/background_pattern_decorative.png";
+import Logo from "../../../assets/icons/bwu-icon.svg?react";
+import Mail from "../../../assets/icons/mail.svg?react";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import Check from "../../../Components/Check/Check";
+import Button from "../../../Components/Button";
+import Field from "../../../Components/Inputs/Field";
 import axiosInstance from "../../../Utils/axiosConfig";
+import "../index.css";
 
-const Register = ({ isAdmin }) => {
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
-  const { token } = useParams();
+/**
+ * Displays the initial landing page.
+ *
+ * @param {Object} props
+ * @param {boolean} props.isAdmin - Whether the user is creating and admin account
+ * @param {Function} props.onContinue - Callback function to handle "Continue with Email" button click.
+ * @returns {JSX.Element}
+ */
+const LandingPage = ({ isAdmin, onSignup }) => {
   const theme = useTheme();
-  // TODO If possible, change the IDs of these fields to match the backend
-  const idMap = {
-    "register-firstname-input": "firstName",
-    "register-lastname-input": "lastName",
-    "register-email-input": "email",
-    "register-password-input": "password",
-    "register-confirm-input": "confirm",
-  };
-
-  const [form, setForm] = useState({
-    firstName: "",
-    lastName: "",
-    email: "",
-    password: "",
-    confirm: "",
-    role: [],
-  });
-  const [errors, setErrors] = useState({});
-
-  useEffect(() => {
-    const fetchInvite = async () => {
-      if (token !== undefined) {
-        try {
-          const res = await axiosInstance.post(`/auth/invite/verify`, {
-            token,
-          });
-          const { role, email } = res.data.data;
-          console.log(role);
-          setForm({ ...form, email, role });
-        } catch (error) {
-          console.log(error);
-        }
-      }
-    };
-    fetchInvite();
-  }, [token]);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    const registerForm = { ...form, role: isAdmin ? ["admin"] : form.role };
-    const { error } = credentials.validate(registerForm, {
-      abortEarly: false,
-      context: { password: form.password },
-    });
-
-    if (error) {
-      // validation errors
-      const newErrors = {};
-      error.details.forEach((err) => {
-        newErrors[err.path[0]] = err.message;
-      });
-      setErrors(newErrors);
-      createToast({
-        body:
-          error.details && error.details.length > 0
-            ? error.details[0].message
-            : "Error validating data.",
-      });
-    } else {
-      delete registerForm.confirm;
-      const action = await dispatch(register(registerForm));
-      if (action.payload.success) {
-        const token = action.payload.data;
-        localStorage.setItem("token", token);
-        navigate("/");
-        createToast({
-          body: "Welcome! Your account was created successfully.",
-        });
-      } else {
-        if (action.payload) {
-          // dispatch errors
-          createToast({
-            body: action.payload.msg,
-          });
-        } else {
-          // unknown errors
-          createToast({
-            body: "Unknown error.",
-          });
-        }
-      }
-    }
-  };
-
-  const handleChange = (event) => {
-    const { value, id } = event.target;
-    const name = idMap[id];
-    setForm((prev) => ({
-      ...prev,
-      [name]: value,
-    }));
-
-    const { error } = credentials.validate(
-      { [name]: value },
-      { abortEarly: false, context: { password: form.password } }
-    );
-
-    setErrors((prev) => {
-      const prevErrors = { ...prev };
-      if (error) prevErrors[name] = error.details[0].message;
-      else delete prevErrors[name];
-      return prevErrors;
-    });
-  };
 
   return (
-    <div className="register-page">
-      <img
-        className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
-      />
-      <form className="register-form" onSubmit={handleSubmit} noValidate>
-        <Stack gap={theme.gap.small} alignItems="center">
-          <Logomark alt="BlueWave Uptime Icon" />
-          <Typography component="h1" sx={{ mt: theme.gap.xl }}>
-            Create{isAdmin ? " admin " : " "}account
+    <>
+      <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+        <Box>
+          <Typography component="h1">Sign Up</Typography>
+          <Typography>
+            Create your {isAdmin ? "admin " : ""}account to get started.
           </Typography>
+        </Box>
+        <Box width="100%">
+          <Button
+            level="secondary"
+            label="Sign up with Email"
+            img={<Mail />}
+            onClick={onSignup}
+            sx={{
+              width: "100%",
+              "& svg": {
+                mr: theme.gap.small,
+              },
+            }}
+          />
+        </Box>
+        <Box maxWidth={400}>
+          <Typography className="tos-p">
+            By signing up, you agree to our{" "}
+            <Typography component="span">Terms of Service</Typography> and{" "}
+            <Typography component="span">Privacy Policy.</Typography>
+          </Typography>
+        </Box>
+      </Stack>
+    </>
+  );
+};
+
+/**
+ * Renders the first step of the sign up process.
+ *
+ * @param {Object} props
+ * @param {Object} props.form - Form state object.
+ * @param {Object} props.errors - Object containing form validation errors.
+ * @param {Function} props.onSubmit - Callback function to handle form submission.
+ * @param {Function} props.onChange - Callback function to handle form input changes.
+ * @param {Function} props.onBack - Callback function to handle "Back" button click.
+ * @returns {JSX.Element}
+ */
+const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
+  const theme = useTheme();
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  return (
+    <>
+      <Stack gap={theme.gap.large} textAlign="center">
+        <Box>
+          <Typography component="h1">Sign Up</Typography>
+          <Typography>Enter your personal details</Typography>
+        </Box>
+        <Box textAlign="left">
+          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+            <Field
+              id="register-firstname-input"
+              label="Name"
+              isRequired={true}
+              placeholder="Jordan"
+              autoComplete="given-name"
+              value={form.firstName}
+              onChange={onChange}
+              error={errors.firstName}
+              ref={inputRef}
+            />
+          </form>
+          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+            <Box my={theme.gap.ml}>
+              <Field
+                id="register-lastname-input"
+                label="Surname"
+                isRequired={true}
+                placeholder="Ellis"
+                autoComplete="family-name"
+                value={form.lastName}
+                onChange={onChange}
+                error={errors.lastName}
+              />
+            </Box>
+          </form>
+        </Box>
+        <Stack direction="row" justifyContent="space-between">
+          <Button
+            level="secondary"
+            label="Back"
+            animate="slideLeft"
+            img={<ArrowBackRoundedIcon />}
+            onClick={onBack}
+            sx={{
+              mb: theme.gap.medium,
+              px: theme.gap.ml,
+              "& svg.MuiSvgIcon-root": {
+                mr: theme.gap.xs,
+              },
+            }}
+            props={{ tabIndex: -1 }}
+          />
+          <Button
+            level="primary"
+            label="Continue"
+            onClick={onSubmit}
+            disabled={(errors.firstName || errors.lastName) && true}
+            sx={{ width: "30%" }}
+          />
         </Stack>
-        <Stack gap={theme.gap.large} sx={{ mt: `calc(${theme.gap.ml}*2)` }}>
-          <Field
-            id="register-firstname-input"
-            label="Name"
-            isRequired={true}
-            placeholder="Daniel"
-            autoComplete="given-name"
-            value={form.firstName}
-            onChange={handleChange}
-            error={errors.firstName}
+      </Stack>
+    </>
+  );
+};
+
+/**
+ * Renders the second step of the sign up process.
+ *
+ * @param {Object} props
+ * @param {Object} props.form - Form state object.
+ * @param {Object} props.errors - Object containing form validation errors.
+ * @param {Function} props.onSubmit - Callback function to handle form submission.
+ * @param {Function} props.onChange - Callback function to handle form input changes.
+ * @param {Function} props.onBack - Callback function to handle "Back" button click.
+ * @returns {JSX.Element}
+ */
+const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
+  const theme = useTheme();
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  return (
+    <>
+      <Stack gap={theme.gap.large} textAlign="center">
+        <Box>
+          <Typography component="h1">Sign Up</Typography>
+          <Typography>Enter your email address</Typography>
+        </Box>
+        <Box textAlign="left">
+          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+            <Field
+              type="email"
+              id="register-email-input"
+              label="Email"
+              isRequired={true}
+              placeholder="jordan.ellis@domain.com"
+              autoComplete="email"
+              value={form.email}
+              onChange={onChange}
+              error={errors.email}
+              ref={inputRef}
+            />
+          </form>
+        </Box>
+        <Stack direction="row" justifyContent="space-between">
+          <Button
+            level="secondary"
+            label="Back"
+            animate="slideLeft"
+            img={<ArrowBackRoundedIcon />}
+            onClick={onBack}
+            sx={{
+              mb: theme.gap.medium,
+              px: theme.gap.ml,
+              "& svg.MuiSvgIcon-root": {
+                mr: theme.gap.xs,
+              },
+            }}
+            props={{ tabIndex: -1 }}
           />
-          <Field
-            id="register-lastname-input"
-            label="Surname"
-            isRequired={true}
-            placeholder="Cojocea"
-            autoComplete="family-name"
-            value={form.lastName}
-            onChange={handleChange}
-            error={errors.lastName}
+          <Button
+            level="primary"
+            label="Continue"
+            onClick={onSubmit}
+            disabled={errors.email && true}
+            sx={{ width: "30%" }}
           />
-          <Field
-            type="email"
-            id="register-email-input"
-            label="Email"
-            isRequired={true}
-            placeholder="daniel.cojocea@domain.com"
-            autoComplete="email"
-            value={form.email}
-            onChange={handleChange}
-            error={errors.email}
-          />
-          <Field
-            type="password"
-            id="register-password-input"
-            label="Password"
-            isRequired={true}
-            placeholder="Create a password"
-            autoComplete="current-password"
-            value={form.password}
-            onChange={handleChange}
-            error={errors.password}
-          />
-          <Field
-            type="password"
-            id="register-confirm-input"
-            label="Confirm password"
-            isRequired={true}
-            placeholder="Confirm your password"
-            autoComplete="current-password"
-            value={form.confirm}
-            onChange={handleChange}
-            error={errors.confirm}
-          />
-          <Stack gap={theme.gap.small}>
+        </Stack>
+      </Stack>
+    </>
+  );
+};
+
+/**
+ * Renders the third step of the sign up process.
+ *
+ * @param {Object} props
+ * @param {Object} props.form - Form state object.
+ * @param {Object} props.errors - Object containing form validation errors.
+ * @param {Function} props.onSubmit - Callback function to handle form submission.
+ * @param {Function} props.onChange - Callback function to handle form input changes.
+ * @param {Function} props.onBack - Callback function to handle "Back" button click.
+ * @returns {JSX.Element}
+ */
+const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
+  const theme = useTheme();
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  return (
+    <>
+      <Stack gap={theme.gap.large} textAlign="center">
+        <Box>
+          <Typography component="h1">Sign Up</Typography>
+          <Typography>Create your password</Typography>
+        </Box>
+        <Box textAlign="left">
+          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+            <Field
+              type="password"
+              id="register-password-input"
+              label="Password"
+              isRequired={true}
+              placeholder="Create a password"
+              autoComplete="current-password"
+              value={form.password}
+              onChange={onChange}
+              error={errors.password}
+              ref={inputRef}
+            />
+          </form>
+          <form noValidate spellCheck={false} onSubmit={onSubmit}>
+            <Box mt={theme.gap.ml}>
+              <Field
+                type="password"
+                id="register-confirm-input"
+                label="Confirm password"
+                isRequired={true}
+                placeholder="Confirm your password"
+                autoComplete="current-password"
+                value={form.confirm}
+                onChange={onChange}
+                error={errors.confirm}
+              />
+            </Box>
+          </form>
+          <Stack gap={theme.gap.small} my={theme.gap.large}>
             <Check
               text="Must be at least 8 characters long"
               variant={
@@ -235,16 +321,279 @@ const Register = ({ isAdmin }) => {
               }
             />
           </Stack>
+        </Box>
+        <Stack direction="row" justifyContent="space-between">
+          <Button
+            level="secondary"
+            label="Back"
+            animate="slideLeft"
+            img={<ArrowBackRoundedIcon />}
+            onClick={onBack}
+            sx={{
+              mb: theme.gap.medium,
+              px: theme.gap.ml,
+              "& svg.MuiSvgIcon-root": {
+                mr: theme.gap.xs,
+              },
+            }}
+            props={{ tabIndex: -1 }}
+          />
           <Button
-            type="submit"
             level="primary"
-            label="Get started"
-            sx={{ marginBottom: theme.gap.large }}
-            disabled={Object.keys(errors).length !== 0 && true}
+            label="Continue"
+            onClick={onSubmit}
+            disabled={errors.email && true}
+            sx={{ width: "30%" }}
           />
         </Stack>
-      </form>
-    </div>
+      </Stack>
+    </>
+  );
+};
+
+const Register = ({ isAdmin }) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { token } = useParams();
+  const theme = useTheme();
+  // TODO If possible, change the IDs of these fields to match the backend
+  const idMap = {
+    "register-firstname-input": "firstName",
+    "register-lastname-input": "lastName",
+    "register-email-input": "email",
+    "register-password-input": "password",
+    "register-confirm-input": "confirm",
+  };
+
+  const [form, setForm] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    confirm: "",
+    role: [],
+  });
+  const [errors, setErrors] = useState({});
+  const [step, setStep] = useState(0);
+
+  useEffect(() => {
+    const fetchInvite = async () => {
+      if (token !== undefined) {
+        try {
+          const res = await axiosInstance.post(`/auth/invite/verify`, {
+            token,
+          });
+          const { role, email } = res.data.data;
+          console.log(role);
+          setForm({ ...form, email, role });
+        } catch (error) {
+          console.log(error);
+        }
+      }
+    };
+    fetchInvite();
+  }, [token]);
+
+  /**
+   * Validates the form data against the validation schema.
+   *
+   * @param {Object} data - The form data to validate.
+   * @param {Object} [options] - Optional settings for validation.
+   * @returns {Object | undefined} - Returns the validation error object if there are validation errors; otherwise, `undefined`.
+   */
+  const validateForm = (data, options = {}) => {
+    const { error } = credentials.validate(data, {
+      abortEarly: false,
+      ...options,
+    });
+    return error;
+  };
+
+  /**
+   * Handles validation errors by setting the state with error messages and displaying a toast notification.
+   *
+   * @param {Object} error - The validation error object returned from the validation schema.
+   */
+  const handleError = (error) => {
+    const newErrors = {};
+    error.details.forEach((err) => {
+      newErrors[err.path[0]] = err.message;
+    });
+    setErrors(newErrors);
+    createToast({ body: error.details[0].message || "Error validating data." });
+  };
+
+  const handleStepOne = async (e) => {
+    e.preventDefault();
+
+    let error = validateForm({
+      firstName: form.firstName,
+      lastName: form.lastName,
+    });
+
+    if (error) {
+      handleError(error);
+      return;
+    }
+
+    setStep(2);
+  };
+
+  const handleStepTwo = async (e) => {
+    e.preventDefault();
+
+    let error;
+    error = validateForm({ email: form.email });
+    if (error) {
+      handleError(error);
+      return;
+    }
+
+    setStep(3);
+  };
+
+  // Final step
+  // Attempts account registration
+  const handleStepThree = async (e) => {
+    e.preventDefault();
+
+    let registerForm = { ...form, role: isAdmin ? ["admin"] : form.role };
+    let error = validateForm(registerForm, {
+      context: { password: form.password },
+    });
+    if (error) {
+      handleError(error);
+      return;
+    }
+
+    delete registerForm.confirm;
+    const action = await dispatch(register(registerForm));
+    if (action.payload.success) {
+      const token = action.payload.data;
+      localStorage.setItem("token", token);
+      navigate("/");
+      createToast({
+        body: "Welcome! Your account was created successfully.",
+      });
+    } else {
+      if (action.payload) {
+        // dispatch errors
+        createToast({
+          body: action.payload.msg,
+        });
+      } else {
+        // unknown errors
+        createToast({
+          body: "Unknown error.",
+        });
+      }
+    }
+  };
+
+  const handleChange = (event) => {
+    const { value, id } = event.target;
+    const name = idMap[id];
+    setForm((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+
+    const { error } = credentials.validate(
+      { [name]: value },
+      { abortEarly: false, context: { password: form.password } }
+    );
+
+    setErrors((prev) => {
+      const prevErrors = { ...prev };
+      if (error) prevErrors[name] = error.details[0].message;
+      else delete prevErrors[name];
+      return prevErrors;
+    });
+  };
+
+  return (
+    <Stack className="register-page auth" overflow="hidden">
+      <img
+        className="background-pattern-svg"
+        src={background}
+        alt="background pattern"
+      />
+      <Stack
+        direction="row"
+        alignItems="center"
+        px={theme.gap.large}
+        gap={theme.gap.small}
+      >
+        <Logo style={{ borderRadius: theme.shape.borderRadius }} />
+        <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography>
+      </Stack>
+      <Stack
+        width="100%"
+        maxWidth={600}
+        flex={1}
+        justifyContent="center"
+        p={theme.gap.xl}
+        pb={theme.gap.triplexl}
+        mx="auto"
+        sx={{
+          "& > .MuiStack-root": {
+            border: 1,
+            borderRadius: theme.shape.borderRadius,
+            borderColor: theme.palette.otherColors.graishWhite,
+            backgroundColor: theme.palette.otherColors.white,
+            padding: {
+              xs: theme.gap.large,
+              sm: theme.gap.xl,
+            },
+          },
+        }}
+      >
+        {step === 0 ? (
+          <LandingPage isAdmin={isAdmin} onSignup={() => setStep(1)} />
+        ) : step === 1 ? (
+          <StepOne
+            form={form}
+            errors={errors}
+            onSubmit={handleStepOne}
+            onChange={handleChange}
+            onBack={() => setStep(0)}
+          />
+        ) : step === 2 ? (
+          <StepTwo
+            form={form}
+            errors={errors}
+            onSubmit={handleStepTwo}
+            onChange={handleChange}
+            onBack={() => setStep(1)}
+          />
+        ) : step === 3 ? (
+          <StepThree
+            form={form}
+            errors={errors}
+            onSubmit={handleStepThree}
+            onChange={handleChange}
+            onBack={() => setStep(2)}
+          />
+        ) : (
+          ""
+        )}
+      </Stack>
+      <Box textAlign="center" p={theme.gap.large}>
+        <Typography display="inline-block">
+          Already have an account? —
+        </Typography>
+        <Typography
+          component="span"
+          ml={theme.gap.xs}
+          onClick={() => {
+            navigate("/login");
+          }}
+          sx={{ userSelect: "none" }}
+        >
+          Log In
+        </Typography>
+      </Box>
+    </Stack>
   );
 };
 Register.propTypes = {

Client/src/Pages/Auth/index.css

@@ -1,7 +1,6 @@
 /* ////// */
 /* SHARED */
 /* ////// */
-.register-page,
 .set-new-password-page,
 .password-confirmed-page,
 .forgot-password-page,
@@ -10,7 +9,6 @@
   justify-content: center;
   height: var(--env-var-height-1);
 }
-.register-page h1.MuiTypography-root,
 .set-new-password-page h1.MuiTypography-root,
 .password-confirmed-page h1.MuiTypography-root,
 .forgot-password-page h1.MuiTypography-root,
@@ -19,10 +17,6 @@
   color: var(--env-var-color-1);
   font-weight: 600;
 }
-.register-page p.MuiTypography-root,
-.register-page span,
-.register-page button,
-.login-page button,
 .set-new-password-page p.MuiTypography-root,
 .set-new-password-page button,
 .password-confirmed-page p.MuiTypography-root,
@@ -34,11 +28,6 @@
 .check-email-page span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
 }
-.register-page p.MuiTypography-root {
-  color: var(--env-var-color-2);
-  opacity: 0.8;
-}
-.register-page button:not(.MuiIconButton-root),
 .set-new-password-page button:not(.MuiIconButton-root),
 .password-confirmed-page button:not(.MuiIconButton-root),
 .forgot-password-page button:not(.MuiIconButton-root),
@@ -48,13 +37,6 @@
   line-height: 0;
 }
 
-.register-page svg rect {
-  fill: none;
-}
-.register-form {
-  margin-top: 95px;
-}
-
 .set-new-password-form,
 .password-confirmed-form,
 .forgot-password-form,
@@ -76,9 +58,6 @@
   margin-right: 5px;
 }
 
-.register-page
-  .MuiFormControl-root:has(#register-password-input)
-  + span.MuiTypography-root,
 .set-new-password-page
   .MuiFormControl-root:has(#register-password-input)
   + span.MuiTypography-root,
@@ -89,17 +68,6 @@
   visibility: hidden;
 }
 
-/* ///// */
-/* LOGIN */
-/* ///// */
-.login-page
-  .MuiStack-root:not(:has(> .MuiButtonBase-root))
-  > span:not(.field-required):not(.input-error) {
-  color: var(--env-var-color-3);
-  cursor: pointer;
-  font-weight: 600;
-}
-
 /* /////////// */
 /* Check Email */
 /* /////////// */
@@ -107,68 +75,71 @@
   font-weight: 600;
 }
 
-/*  */
-.login-page {
+/* AUTH */
+.auth {
   height: 100vh;
 }
-.login-page h1 {
-  font-size: 37px;
+.auth h1 {
+  font-size: var(--env-var-font-size-xlarge);
   font-weight: 600;
   color: var(--env-var-color-3);
 }
-.login-page button:not(.MuiIconButton-root),
-.login-page .field h3.MuiTypography-root,
-.login-page .field input,
-.login-page .field .input-error,
-.login-page p,
-.login-page span {
+.auth button:not(.MuiIconButton-root),
+.auth .field h3.MuiTypography-root,
+.auth .field input,
+.auth .field .input-error,
+.auth p,
+.auth span {
   font-size: var(--env-var-font-size-medium-plus);
 }
-.login-page p {
+.auth p {
   color: var(--env-var-color-2-light);
 }
-.login-page .field h3.MuiTypography-root,
-.login-page .field input {
+.auth .field h3.MuiTypography-root,
+.auth .field input {
   color: var(--env-var-color-5);
 }
 
-.login-page p + span {
+.auth p + span {
   color: var(--env-var-color-3);
   opacity: 0.8;
   cursor: pointer;
   transition: opacity 300ms ease-in;
 }
-.login-page p > span {
+.auth p > span {
   text-decoration: underline;
   text-underline-offset: 2px;
   cursor: pointer;
   transition: all 200ms;
 }
-.login-page p > span:hover {
+.auth p > span:hover {
   color: var(--env-var-color-2);
   text-underline-offset: 4px;
 }
-.login-page p + span:hover {
+.auth p + span:hover {
   opacity: 1;
 }
-.login-page button:not(.MuiIconButton-root) {
+.auth button:not(.MuiIconButton-root) {
   user-select: none;
   border-radius: var(--env-var-radius-2);
   line-height: 1;
 }
-.login-page button:not(.MuiIconButton-root),
-.login-page .field .MuiInputBase-root:has(input) {
+.auth button:not(.MuiIconButton-root),
+.auth .field .MuiInputBase-root:has(input) {
   height: 38px;
 }
-.login-page .field svg {
+.auth .field svg {
   width: 24px;
   height: 24px;
 }
+.auth .check span.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+}
 
-.login-page > .MuiStack-root:nth-of-type(1) {
+.auth > .MuiStack-root:nth-of-type(1) {
   height: var(--env-var-nav-bar-height);
 }
-.login-page .background-pattern-svg {
+.auth .background-pattern-svg {
   top: 14%;
   width: 100%;
   max-width: 800px;