From 3c8e722706b3c3510c4dd404bcb921f661a35355 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Tue, 16 Jul 2024 14:29:59 -0400 Subject: [PATCH] Restructured check email page --- Client/src/Pages/CheckEmail/index.css | 101 ++++--------- Client/src/Pages/CheckEmail/index.jsx | 173 ++++++++++++++++------ Client/src/Pages/ForgotPassword/index.jsx | 3 +- Client/src/Pages/Login/index.jsx | 4 +- Client/src/assets/Images/email.png | Bin 1729 -> 0 bytes Client/src/assets/icons/email.svg | 18 +++ Client/src/index.css | 7 +- 7 files changed, 184 insertions(+), 122 deletions(-) delete mode 100644 Client/src/assets/Images/email.png create mode 100644 Client/src/assets/icons/email.svg diff --git a/Client/src/Pages/CheckEmail/index.css b/Client/src/Pages/CheckEmail/index.css index dac0a0a0d..fbf3e47af 100644 --- a/Client/src/Pages/CheckEmail/index.css +++ b/Client/src/Pages/CheckEmail/index.css @@ -1,83 +1,34 @@ .check-email-page { - width: var(--env-var-width-1); display: flex; justify-content: center; - min-height: var(--env-var-height-1); + height: var(--env-var-height-1); +} +.check-email-page button:not(.MuiIconButton-root) { + height: 34px; + border-radius: var(--env-var-radius-2); + line-height: 0; +} +.check-email-page h1.MuiTypography-root { + font-size: var(--env-var-font-size-large); + color: var(--env-var-color-1); + font-weight: 600; +} +.check-email-page p.MuiTypography-root, +.check-email-page button, +.check-email-page span.MuiTypography-root { + font-size: var(--env-var-font-size-medium); +} +.check-email-page span.MuiTypography-root { + font-weight: 600; +} +.check-email-page p.MuiTypography-root { + color: var(--env-var-color-2); +} +.check-email-page button svg { + margin-right: 5px; } .check-email-form { - width: var(--env-var-width-2); - margin: 90px auto; -} - -.check-email-form-header { - justify-content: center; - align-items: center; - text-align: center; -} - -.check-email-v-gap-large { - height: var(--env-var-spacing-3); -} - -.check-email-v-gap-medium { - height: var(--env-var-spacing-2); -} - -.check-email-v-gap-small { - height: var(--env-var-spacing-1); -} - -.check-email-form-heading { - font-size: var(--env-var-font-size-large); - font-weight: 700; - color: var(--env-var-color-1); -} - -.check-email-form-subheading { - font-size: var(--env-var-font-size-medium); - font-weight: 400; - color: var(--env-var-color-2); -} - -.check-email-form-subheading span { - font-weight: 700; -} - -.check-email-body { + margin-top: 65px; width: var(--env-var-width-2); } - -.check-email-resend { - font-size: var(--env-var-font-size-medium); - font-weight: 400; - color: var(--env-var-color-2); - text-align: center; - cursor: pointer; -} - -.check-email-resend span { - font-weight: 700; - color: var(--env-var-color-3); -} - -.check-email-back-button { - display: flex; - justify-content: center; - align-items: center; -} - -.check-email-back-button-img { - width: var(--env-var-img-width-1); - height: var(--env-var-img-width-1); - margin-right: 5px; - align-items: center; -} - -.check-email-back-button-text { - height: var(--env-var-img-width-1); - font-size: var(--env-var-font-size-medium); - font-weight: 500; - color: var(--env-var-color-2); - align-items: center; -} diff --git a/Client/src/Pages/CheckEmail/index.jsx b/Client/src/Pages/CheckEmail/index.jsx index 97cb2a5d9..5d30d67aa 100644 --- a/Client/src/Pages/CheckEmail/index.jsx +++ b/Client/src/Pages/CheckEmail/index.jsx @@ -1,56 +1,143 @@ import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern"; import "./index.css"; -import React from "react"; -import EmailIcon from "../../assets/Images/email.png"; +import React, { useEffect, useState } from "react"; +import EmailIcon from "../../assets/icons/email.svg?react"; import Button from "../../Components/Button"; -import LeftArrow from "../../assets/Images/arrow-left.png"; +import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded"; +import { Stack, Typography } from "@mui/material"; +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"; const CheckEmail = () => { + const theme = useTheme(); + const navigate = useNavigate(); + const dispatch = useDispatch(); + + const [email, setEmail] = useState(); + const [disabled, setDisabled] = useState(false); + useEffect(() => { + setEmail(sessionStorage.getItem("email")); + }, []); + + // TODO - fix + const openMail = () => { + window.location.href = "mailto:"; + }; + + const toastFail = [ + { + variant: "info", + body: "Email not found.", + hasIcon: false, + }, + { + variant: "info", + body: "Redirecting in 3...", + hasIcon: false, + }, + { + variant: "info", + body: "Redirecting in 2...", + hasIcon: false, + }, + { + variant: "info", + body: "Redirecting in 1...", + hasIcon: false, + }, + ]; + + const resendToken = async () => { + setDisabled(true); // prevent resent button from being spammed + if (!email) { + let index = 0; + const interval = setInterval(() => { + if (index < toastFail.length) { + createToast(toastFail[index]); + index++; + } else { + clearInterval(interval); + navigate("/forgot-password"); + } + }, 1000); + } else { + const form = { email: email }; + const action = await dispatch(forgotPassword(form)); + if (action.payload.success) { + createToast({ + variant: "info", + body: `Instructions sent to ${form.email}.`, + hasIcon: false, + }); + setDisabled(false); + } else { + if (action.payload) { + // dispatch errors + createToast({ + variant: "info", + body: action.payload.msg, + hasIcon: false, + }); + } else { + // unknown errors + createToast({ + variant: "info", + body: "Unknown error.", + hasIcon: false, + }); + } + } + } + }; + return (
-
-
- EmailIcon -
-
Check your email
-
-
- We sent a password reset link to username@email.com -
-
-
-
+
+ + + + Check your email + + + We sent a password reset link to{" "} + + {email || "username@email.com"} + + + + +
-
-
- Didn’t receive the email? - Click to resend -
-
-
- LeftArrow -
Back to log in
-
-
+ +
); }; diff --git a/Client/src/Pages/ForgotPassword/index.jsx b/Client/src/Pages/ForgotPassword/index.jsx index 8b80557a3..76e4312bf 100644 --- a/Client/src/Pages/ForgotPassword/index.jsx +++ b/Client/src/Pages/ForgotPassword/index.jsx @@ -50,6 +50,7 @@ const ForgotPassword = () => { } else { const action = await dispatch(forgotPassword(form)); if (action.payload.success) { + sessionStorage.setItem("email", form.email); navigate("/check-email"); createToast({ variant: "info", @@ -100,7 +101,7 @@ const ForgotPassword = () => { return (
-
+ diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx index e624e4409..da0fed6ba 100644 --- a/Client/src/Pages/Login/index.jsx +++ b/Client/src/Pages/Login/index.jsx @@ -173,7 +173,9 @@ const Login = () => { } label="Remember me" /> - Forgot password + navigate("/forgot-password")}> + Forgot password + diff --git a/Client/src/assets/Images/email.png b/Client/src/assets/Images/email.png deleted file mode 100644 index 40b1f823251460898fbe5f19bc1ebf527a325447..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1729 zcmV;y20rG6U502Na+j2MUFX0y%kV_x;^A- zCZ__a8@V=&0xlrBKbB?Lp#n7UK_a)`@W+;2|0p6|Tha&6yX2D8emk=>!`U@a_YmQ6 zRQqw)k9!Ao(Ee8Fy-5P}-6rxrAgW>YvuMn>#opE;^= zeSQ6sroU6bn@35BqGkw7r&M`l{EucC{2||!6Hp#tTwq_gDC0M1wErn_;lyH2j^@fZ& z6k{0121c!nj@r~E6bVi^@F7vZi-5>PeS%^^;;j)!Y9%PAI+Rklm+L^&Zf9Ft#~ zI=OQgJo%}-ee-AQyC0})SiVtaqosm5+&w^aluLYk6w8UtIjD*Ct&O=n8=gvvhuv5@ z8`BYsKm{3jNFq-OAtP_iKpNA*Z>U&#H7TWE`h-jI1iT-)Yw}j*x|}qrOI(L4Uz4|A zVj%BPLa?k|l?F;l1s!=985@V$BBRocwDHVzi&`(0ZvcJ6H$#a)`W`7HoJ}OV9~iCX zIPG>a2Lf}QNSmd~_oDiU0t-C@12_(UzCelKLc4^M1N%!@)BEV?6iXYIq)YnTXY$sa z!=6FgBukZiH$9WEte{Lhv}^~v6%~0<5peQbo!o|H3ML zO(zEHWK{YfKs{$*#Kt3o#?r>+Im~&J0;!IlELk5r9}gml(DFEh(!TTwqA~;%cY+>> z+5drP1Yg1i?L=D1tMozOxs9Sor-T9e9^T`JX#kRVzR^;N1RgLxzQ5E+OMD#}d6{>E z-w?5Ua`d_2r)h~|r)jOA@TTL$(EGvB7lj`W7}PSwKq*LeL>Z4PG9FK2Wjw;LP===# z`H2A4wN%)Bp%|keASuJOjZ>EhGahW9-NdXkLc=d~N<9L}yA%>v32eYY=Vsxjrzj@) z6SxF1hkiI0+h~Px?-a5W4^zUu=qX`R3}`~xP1RgTGM;Y3z^ptBk{=GT99sLyARv*P zRxcppI4~+*D%IQfb>_4|SxjU2OD(lc#}4)`_7|#-WAaX(Jysg}ErcT5b(>?n|pfv4HtJ(T-|8?!@)8`jh^cAN!cFuMR-VwaG_{U{x zUupqVq44+>LG(kOmRPp`w81-SU1;vrs~_11H0QL%#g)tcPFklAHkX1!9U8l`vcl3m z%>8Edzt-vxSPgoav~QWgfw|Bzu?8BYQLWa$>Q&Ma*}rRB519*fut}Up#8|6sJzyhN z4R)5Fd9bk!cJe!RAlc5yM(`!Qw6t`kT6^^kkJ!f6>jKEjv$T0U*aYrOqHm9QV>|DS zo}d5y3f6)TC41-y@b1%zi3uI+ssh9>ofQbyg>Y zsypq0dIfDbH}>BD-*zs;d&2ib_XqC`)s?Slw3BsB_P^JT8h|9 + + + + + + + + + + + + + + + + + diff --git a/Client/src/index.css b/Client/src/index.css index 674acc13e..4b7898c9a 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -47,7 +47,7 @@ --env-var-color-27: #fecf60; --lighter-env-var-color-27: rgba(254, 207, 96, 0.1); --env-var-color-28: #f79009; - --env-var-color-29: #D0D5DD; + --env-var-color-29: #d0d5dd; --env-var-radius-1: 4px; --env-var-radius-2: 8px; @@ -128,11 +128,14 @@ button:focus-visible { .Toastify__toast-container { width: auto; } +.Toastify__toast-body .alert{ + min-width: 150px; +} .Toastify [class^="Toastify__toast"] { padding: 0; margin: 0; } -.Toastify__toast{ +.Toastify__toast { min-height: 0; border-radius: 4px; }