Added responsive design to authentication pages

2026-01-20 08:39:43 -06:00 · 2024-08-12 19:25:07 -04:00
parent d9654aa8b5
commit ca9db41205
10 changed files with 163 additions and 70 deletions
--- a/Client/src/Components/Check/Check.jsx
+++ b/Client/src/Components/Check/Check.jsx
@@ -46,7 +46,7 @@ const Check = ({ text, variant = "info", outlined = false }) => {
 };

 Check.propTypes = {
-  text: PropTypes.string.isRequired,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
  variant: PropTypes.oneOf(["info", "error", "success"]),
  outlined: PropTypes.bool,
 };
--- a/Client/src/Components/Check/check.css
+++ b/Client/src/Components/Check/check.css
@@ -1,4 +1,4 @@
-.check span.MuiTypography-root {
+.check > span.MuiTypography-root {
  font-size: var(--env-var-font-size-small-plus);
  color: var(--env-var-color-2);
  opacity: 0.8;
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -86,10 +86,9 @@ const CheckEmail = () => {

  return (
    <Stack className="check-email-page auth" overflow="hidden">
-      <img
+      <Box
        className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
      />
      <Stack
        direction="row"
@@ -105,8 +104,8 @@ const CheckEmail = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
@@ -121,11 +120,15 @@ const CheckEmail = () => {
          },
        }}
      >
-        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+        <Stack
+          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          alignItems="center"
+          textAlign="center"
+        >
          <Box>
            <EmailIcon alt="email icon" />
            <Typography component="h1">Check your email</Typography>
-            <Typography mt={theme.gap.xs} sx={{ width: "max-content" }}>
+            <Typography mt={theme.gap.xs}>
              We sent a password reset link to{" "}
              <Typography className="email-sent-to" component="span">
                {email || "username@email.com"}
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -88,10 +88,9 @@ const ForgotPassword = () => {

  return (
    <Stack className="forgot-password-page auth" overflow="hidden">
-      <img
+      <Box
        className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
      />
      <Stack
        direction="row"
@@ -107,8 +106,8 @@ const ForgotPassword = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
@@ -123,7 +122,11 @@ const ForgotPassword = () => {
          },
        }}
      >
-        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+        <Stack
+          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          alignItems="center"
+          textAlign="center"
+        >
          <Box>
            <Key alt="password key icon" />
            <Typography component="h1">Forgot password?</Typography>
@@ -131,7 +134,7 @@ const ForgotPassword = () => {
              No worries, we'll send you reset instructions.
            </Typography>
          </Box>
-          <Box width="100%" maxWidth={400} textAlign="left">
+          <Box width="100%" textAlign="left">
            <form noValidate spellCheck={false} onSubmit={handleSubmit}>
              <Field
                type="email"
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -28,7 +28,11 @@ const LandingPage = ({ onContinue }) => {

  return (
    <>
-      <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+      <Stack
+        gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+        alignItems="center"
+        textAlign="center"
+      >
        <Box>
          <Typography component="h1">Log In</Typography>
          <Typography>We are pleased to see you again!</Typography>
@@ -82,7 +86,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
        <Box>
          <Typography component="h1">Log In</Typography>
          <Typography>Enter your email address</Typography>
@@ -163,7 +167,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
        <Box>
          <Typography component="h1">Log In</Typography>
          <Typography>Enter your password</Typography>
@@ -336,10 +340,9 @@ const Login = () => {

  return (
    <Stack className="login-page auth" overflow="hidden">
-      <img
+      <Box
        className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
      />
      <Stack
        direction="row"
@@ -355,8 +358,8 @@ const Login = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
--- a/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
+++ b/Client/src/Pages/Auth/NewPasswordConfirmed.jsx
@@ -23,10 +23,9 @@ const NewPasswordConfirmed = () => {

  return (
    <Stack className="password-confirmed-page auth" overflow="hidden">
-      <img
+      <Box
        className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
      />
      <Stack
        direction="row"
@@ -42,8 +41,8 @@ const NewPasswordConfirmed = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
@@ -58,7 +57,11 @@ const NewPasswordConfirmed = () => {
          },
        }}
      >
-        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+        <Stack
+          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          alignItems="center"
+          textAlign="center"
+        >
          <Box>
            <ConfirmIcon alt="password confirm icon" />
            <Typography component="h1">Password reset</Typography>
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -31,7 +31,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {

  return (
    <>
-      <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+      <Stack
+        gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+        alignItems="center"
+        textAlign="center"
+      >
        <Box>
          <Typography component="h1">Sign Up</Typography>
          <Typography>
@@ -87,7 +91,7 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
        <Box>
          <Typography component="h1">Sign Up</Typography>
          <Typography>Enter your personal details</Typography>
@@ -127,7 +131,6 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
            img={<ArrowBackRoundedIcon />}
            onClick={onBack}
            sx={{
-              mb: theme.gap.medium,
              px: theme.gap.ml,
              "& svg.MuiSvgIcon-root": {
                mr: theme.gap.xs,
@@ -171,7 +174,7 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
        <Box>
          <Typography component="h1">Sign Up</Typography>
          <Typography>Enter your email address</Typography>
@@ -200,7 +203,6 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
            img={<ArrowBackRoundedIcon />}
            onClick={onBack}
            sx={{
-              mb: theme.gap.medium,
              px: theme.gap.ml,
              "& svg.MuiSvgIcon-root": {
                mr: theme.gap.xs,
@@ -244,7 +246,7 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {

  return (
    <>
-      <Stack gap={theme.gap.large} textAlign="center">
+      <Stack gap={{ xs: theme.gap.ml, sm: theme.gap.large }} textAlign="center">
        <Box>
          <Typography component="h1">Sign Up</Typography>
          <Typography>Create your password</Typography>
@@ -277,9 +279,17 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
              error={errors.confirm}
            />
          </form>
-          <Stack gap={theme.gap.small} mb={theme.gap.large}>
+          <Stack
+            gap={theme.gap.small}
+            mb={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          >
            <Check
-              text="Must be at least 8 characters long"
+              text={
+                <>
+                  <Typography component="span">Must be at least</Typography> 8
+                  characters long
+                </>
+              }
              variant={
                errors?.password === "Password is required"
                  ? "error"
@@ -291,7 +301,12 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
              }
            />
            <Check
-              text="Must contain one special character and a number"
+              text={
+                <>
+                  <Typography component="span">Must contain</Typography> one
+                  special character and a number
+                </>
+              }
              variant={
                errors?.password === "Password is required"
                  ? "error"
@@ -305,7 +320,14 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
              }
            />
            <Check
-              text="Must contain at least one upper and lower character"
+              text={
+                <>
+                  <Typography component="span">
+                    Must contain at least
+                  </Typography>{" "}
+                  one upper and lower character
+                </>
+              }
              variant={
                errors?.password === "Password is required"
                  ? "error"
@@ -326,7 +348,6 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
            img={<ArrowBackRoundedIcon />}
            onClick={onBack}
            sx={{
-              mb: theme.gap.medium,
              px: theme.gap.ml,
              "& svg.MuiSvgIcon-root": {
                mr: theme.gap.xs,
@@ -509,10 +530,9 @@ const Register = ({ isAdmin }) => {

  return (
    <Stack className="register-page auth" overflow="hidden">
-      <img
+      <Box
        className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
      />
      <Stack
        direction="row"
@@ -528,8 +548,8 @@ const Register = ({ isAdmin }) => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.xl}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
--- a/Client/src/Pages/Auth/SetNewPassword.jsx
+++ b/Client/src/Pages/Auth/SetNewPassword.jsx
@@ -105,10 +105,9 @@ const SetNewPassword = () => {

  return (
    <Stack className="set-new-password-page auth" overflow="hidden">
-      <img
+      <Box
        className="background-pattern-svg"
-        src={background}
-        alt="background pattern"
+        sx={{ backgroundImage: `url(${background})` }}
      />
      <Stack
        direction="row"
@@ -124,8 +123,8 @@ const SetNewPassword = () => {
        maxWidth={600}
        flex={1}
        justifyContent="center"
-        p={theme.gap.xl}
-        pb={theme.gap.triplexl}
+        px={{ xs: theme.gap.large, lg: theme.gap.xl }}
+        pb={theme.gap.large}
        mx="auto"
        sx={{
          "& > .MuiStack-root": {
@@ -140,7 +139,11 @@ const SetNewPassword = () => {
          },
        }}
      >
-        <Stack gap={theme.gap.large} textAlign="center">
+        <Stack
+          gap={{ xs: theme.gap.ml, sm: theme.gap.large }}
+          alignItems="center"
+          textAlign="center"
+        >
          <Box>
            <LockIcon alt="lock icon" />
            <Typography component="h1">Set new password</Typography>
@@ -175,7 +178,12 @@ const SetNewPassword = () => {
            </form>
            <Stack gap={theme.gap.small} mb={theme.gap.large}>
              <Check
-                text="Must be at least 8 characters long"
+                text={
+                  <>
+                    <Typography component="span">Must be at least</Typography> 8
+                    characters long
+                  </>
+                }
                variant={
                  errors?.password === "Password is required"
                    ? "error"
@@ -187,7 +195,12 @@ const SetNewPassword = () => {
                }
              />
              <Check
-                text="Must contain one special character and a number"
+                text={
+                  <>
+                    <Typography component="span">Must contain</Typography> one
+                    special character and a number
+                  </>
+                }
                variant={
                  errors?.password === "Password is required"
                    ? "error"
@@ -201,7 +214,14 @@ const SetNewPassword = () => {
                }
              />
              <Check
-                text="Must contain at least one upper and lower character"
+                text={
+                  <>
+                    <Typography component="span">
+                      Must contain at least
+                    </Typography>{" "}
+                    one upper and lower character
+                  </>
+                }
                variant={
                  errors?.password === "Password is required"
                    ? "error"
@@ -220,7 +240,7 @@ const SetNewPassword = () => {
            onClick={handleSubmit}
            level="primary"
            label="Reset password"
-            sx={{ width: "100%" }}
+            sx={{ width: "100%", maxWidth: 400 }}
          />
        </Stack>
      </Stack>
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -8,10 +8,8 @@
  color: var(--env-var-color-3);
 }
 .auth button:not(.MuiIconButton-root),
-.auth .field h3.MuiTypography-root,
-.auth .field input,
-.auth .field .input-error,
 .auth p,
+.auth .field input,
 .auth span {
  font-size: var(--env-var-font-size-medium-plus);
 }
@@ -55,6 +53,8 @@
  width: 24px;
  height: 24px;
 }
+.auth .field h3.MuiTypography-root,
+.auth .field .input-error,
 .auth .check span.MuiTypography-root {
  font-size: var(--env-var-font-size-medium);
 }
@@ -66,18 +66,67 @@
  cursor: default;
 }

-.auth > .MuiStack-root:nth-of-type(1) {
+.auth > .MuiStack-root:nth-of-type(2) {
  height: var(--env-var-nav-bar-height);
 }
 .auth .background-pattern-svg {
-  top: 14%;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -30%);
+  z-index: -1;
+
  width: 100%;
  max-width: 800px;
+  height: 100%;
+  max-height: 800px;
+
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
 }

 .forgot-password-page h1,
 .check-email-page h1,
 .password-confirmed-page h1,
 .set-new-password-page h1 {
-  font-size: var(--env-var-font-size-large-plus);
+  font-size: 22px;
+}
+
+@media (max-width: 800px) {
+  .auth h1 {
+    font-size: var(--env-var-font-size-large-plus);
+  }
+  .auth button:not(.MuiIconButton-root),
+  .auth .field input,
+  .auth p,
+  .auth span {
+    font-size: var(--env-var-font-size-medium);
+  }
+  .auth button:not(.MuiIconButton-root),
+  .auth .field .MuiInputBase-root:has(input) {
+    height: 36px;
+  }
+  .auth .check span.MuiTypography-root,
+  .auth .field .input-error,
+  .auth .field h3.MuiTypography-root {
+    font-size: var(--env-var-font-size-small-plus);
+  }
+  .auth .check span > span {
+    display: none;
+  }
+  .auth form + form {
+    margin: var(--env-var-spacing-1-plus) 0;
+  }
+  .auth .background-pattern-svg {
+    max-width: 750px;
+    max-height: 750px;
+  }
+
+  .forgot-password-page h1,
+  .check-email-page h1,
+  .password-confirmed-page h1,
+  .set-new-password-page h1 {
+    font-size: 18px;
+  }
 }
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -155,14 +155,6 @@ button:focus-visible {
  border-radius: 4px;
 }

-.background-pattern-svg {
-  position: absolute;
-  top: -5%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: -1;
-}
-
 .MuiTouchRipple-root {
  display: none;
 }