Merge pull request #603 from bluewave-labs/feat/check-email-page

Check email page

Client/src/Pages/Auth/CheckEmail.jsx

@@ -1,15 +1,15 @@
-import "./index.css";
-import background from "../../assets/Images/background_pattern_decorative.png";
-import React, { useEffect, useState } from "react";
-import EmailIcon from "../../assets/icons/email.svg?react";
-import Button from "../../Components/Button";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router";
 import { createToast } from "../../Utils/toastUtils";
 import { forgotPassword } from "../../Features/Auth/authSlice";
+import Button from "../../Components/Button";
+import background from "../../assets/Images/background_pattern_decorative.png";
+import EmailIcon from "../../assets/icons/email.svg?react";
+import Logo from "../../assets/icons/bwu-icon.svg?react";
+import "./index.css";
 
 const CheckEmail = () => {
   const theme = useTheme();
@@ -80,13 +80,94 @@ const CheckEmail = () => {
   };
 
   return (
-    <div className="check-email-page">
+    <Stack className="check-email-page auth" overflow="hidden">
       <img
         className="background-pattern-svg"
         src={background}
         alt="background pattern"
       />
-      <form className="check-email-form">
+      <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,
+            },
+          },
+        }}
+      >
+        <Stack gap={theme.gap.large} alignItems="center" textAlign="center">
+          <Box>
+            <EmailIcon />
+            <Typography component="h1">Check your email</Typography>
+            <Typography mt={theme.gap.xs} sx={{ width: "max-content" }}>
+              We sent a password reset link to{" "}
+              <Typography className="email-sent-to" component="span">
+                {email || "username@email.com"}
+              </Typography>
+            </Typography>
+          </Box>
+          <Button
+            level="primary"
+            label="Open email app"
+            onClick={openMail}
+            sx={{
+              width: "100%",
+              maxWidth: 400,
+            }}
+          />
+          <Typography sx={{ alignSelf: "center", mb: theme.gap.medium }}>
+            Didn't receive the email?{" "}
+            <Typography
+              component="span"
+              onClick={resendToken}
+              sx={{
+                color: theme.palette.primary.main,
+                userSelect: "none",
+                pointerEvents: disabled ? "none" : "auto",
+                cursor: disabled ? "default" : "pointer",
+                opacity: disabled ? 0.5 : 1,
+              }}
+            >
+              Click to resend
+            </Typography>
+          </Typography>
+        </Stack>
+      </Stack>
+      <Box textAlign="center" p={theme.gap.large}>
+        <Typography display="inline-block">Go back to —</Typography>
+        <Typography
+          component="span"
+          ml={theme.gap.xs}
+          onClick={() => {
+            navigate("/login");
+          }}
+          sx={{ userSelect: "none" }}
+        >
+          Log In
+        </Typography>
+      </Box>
+      {/* <form className="check-email-form">
         <Stack direction="column" alignItems="center" gap={theme.gap.small}>
           <EmailIcon alt="EmailIcon" style={{ fill: "white" }} />
           <Typography component="h1" sx={{ mt: theme.gap.ml }}>
@@ -127,8 +208,8 @@ const CheckEmail = () => {
             onClick={() => navigate("/login")}
           />
         </Stack>
-      </form>
-    </div>
+      </form> */}
+    </Stack>
   );
 };
 

Client/src/Pages/Auth/index.css

@@ -2,15 +2,13 @@
 /* SHARED */
 /* ////// */
 .set-new-password-page,
-.password-confirmed-page,
-.check-email-page {
+.password-confirmed-page {
   display: flex;
   justify-content: center;
   height: var(--env-var-height-1);
 }
 .set-new-password-page h1.MuiTypography-root,
-.password-confirmed-page h1.MuiTypography-root,
-.check-email-page h1.MuiTypography-root {
+.password-confirmed-page h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
   color: var(--env-var-color-1);
   font-weight: 600;
@@ -18,35 +16,28 @@
 .set-new-password-page p.MuiTypography-root,
 .set-new-password-page button,
 .password-confirmed-page p.MuiTypography-root,
-.password-confirmed-page button,
-.check-email-page p.MuiTypography-root,
-.check-email-page button,
-.check-email-page span.MuiTypography-root {
+.password-confirmed-page button {
   font-size: var(--env-var-font-size-medium);
 }
 .set-new-password-page button:not(.MuiIconButton-root),
-.password-confirmed-page button:not(.MuiIconButton-root),
-.check-email-page button:not(.MuiIconButton-root) {
+.password-confirmed-page button:not(.MuiIconButton-root) {
   height: 34px;
   border-radius: var(--env-var-radius-2);
   line-height: 0;
 }
 
 .set-new-password-form,
-.password-confirmed-form,
-.check-email-form {
+.password-confirmed-form {
   margin-top: 65px;
   width: var(--env-var-width-2);
 }
 .set-new-password-page p.MuiTypography-root,
-.password-confirmed-page p.MuiTypography-root,
-.check-email-page p.MuiTypography-root {
+.password-confirmed-page p.MuiTypography-root {
   color: var(--env-var-color-2);
 }
 
 .set-new-password-page button:not(.MuiIconButton-root) svg,
-.password-confirmed-page button:not(.MuiIconButton-root) svg,
-.check-email-page button svg {
+.password-confirmed-page button:not(.MuiIconButton-root) svg {
   margin-right: 5px;
 }
 
@@ -60,13 +51,6 @@
   visibility: hidden;
 }
 
-/* /////////// */
-/* Check Email */
-/* /////////// */
-.check-email-page span.MuiTypography-root {
-  font-weight: 600;
-}
-
 /* AUTH */
 .auth {
   height: 100vh;
@@ -98,13 +82,13 @@
   cursor: pointer;
   transition: opacity 300ms ease-in;
 }
-.auth p > span {
+.auth p > span:not(.email-sent-to) {
   text-decoration: underline;
   text-underline-offset: 2px;
   cursor: pointer;
   transition: all 200ms;
 }
-.auth p > span:hover {
+.auth p > span:not(.email-sent-to):hover {
   color: var(--env-var-color-2);
   text-underline-offset: 4px;
 }
@@ -130,6 +114,10 @@
 .auth form + form {
   margin: var(--env-var-spacing-1-plus) 0;
 }
+.auth .email-sent-to {
+  font-weight: 600;
+  cursor: default;
+}
 
 .auth > .MuiStack-root:nth-of-type(1) {
   height: var(--env-var-nav-bar-height);
@@ -140,6 +128,7 @@
   max-width: 800px;
 }
 
-.forgot-password-page h1 {
+.forgot-password-page h1,
+.check-email-page h1 {
   font-size: var(--env-var-font-size-large-plus);
 }