diff --git a/.env b/.env index dfeba9c..adb5a8f 100644 --- a/.env +++ b/.env @@ -1,9 +1,11 @@ VITE_API_BASE_URL=http://localhost:8000/api/ VITE_SERVICE_NAME=portal -# Links external sites. -VITE_LINK_OPEN_VERIFY_EMAIL_IN_GMAIL="https://mail.google.com/mail/#search/from%3Ano-reply%40info.codeforlife.education+subject%3AEmail+Verification" -VITE_LINK_OPEN_VERIFY_EMAIL_IN_OUTLOOK=https://outlook.live.com/mail/ +# Gmail. +VITE_GMAIL_FILTERS_PASSWORD_RESET_REQUEST="from:no-reply@info.codeforlife.education subject:Password reset request" +VITE_GMAIL_FILTERS_EMAIL_VERIFICATION="from:no-reply@info.codeforlife.education subject:Email verification" + +# Links to external sites. VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-graduates-2019/ # TODO: determine which of these we need. diff --git a/src/components/OpenInEmailButtons.tsx b/src/components/OpenInEmailButtons.tsx new file mode 100644 index 0000000..2480862 --- /dev/null +++ b/src/components/OpenInEmailButtons.tsx @@ -0,0 +1,32 @@ +import { MailOutline as MailOutlineIcon } from "@mui/icons-material" +import { Stack } from "@mui/material" +import { type FC } from "react" + +import { LinkButton } from "codeforlife/components/router" + +export interface OpenInEmailButtonsProps { + gmailFilters: string +} + +const OpenInEmailButtons: FC = ({ gmailFilters }) => { + return ( + + } + > + Open in Gmail + + } + > + Open in Outlook + + + ) +} + +export default OpenInEmailButtons diff --git a/src/components/index.tsx b/src/components/index.tsx index 1b05841..ca19af8 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,5 +1,13 @@ import NewPasswordField, { type NewPasswordFieldProps, } from "./NewPasswordField" +import OpenInEmailButtons, { + type OpenInEmailButtonsProps, +} from "./OpenInEmailButtons" -export { NewPasswordField, type NewPasswordFieldProps } +export { + NewPasswordField, + OpenInEmailButtons, + type NewPasswordFieldProps, + type OpenInEmailButtonsProps, +} diff --git a/src/pages/emailVerification/EmailVerification.tsx b/src/pages/emailVerification/EmailVerification.tsx index ce9153b..3506c74 100644 --- a/src/pages/emailVerification/EmailVerification.tsx +++ b/src/pages/emailVerification/EmailVerification.tsx @@ -1,5 +1,4 @@ import { - MailOutline as MailOutlineIcon, Send as SendIcon, SentimentVeryDissatisfied as SentimentVeryDissatisfiedIcon, } from "@mui/icons-material" @@ -50,20 +49,10 @@ const EmailVerification: FC = () => { "Please follow the link within the email to verify your details. This will expire in 1 hour.", ]} icon={} - buttonProps={[ - { - to: import.meta.env.VITE_LINK_OPEN_VERIFY_EMAIL_IN_GMAIL, - target: "_blank", - children: "Open in Gmail", - endIcon: , - }, - { - to: import.meta.env.VITE_LINK_OPEN_VERIFY_EMAIL_IN_OUTLOOK, - target: "_blank", - children: "Open in Outlook", - endIcon: , - }, - ]} + openInEmailButtonsProps={{ + gmailFilters: import.meta.env + .VITE_GMAIL_FILTERS_EMAIL_VERIFICATION, + }} /> ) : ( = ({ @@ -24,7 +24,7 @@ const Status: FC = ({ header, body, icon, - buttonProps, + openInEmailButtonsProps, }) => ( @@ -37,12 +37,8 @@ const Status: FC = ({ {text} ))} - {buttonProps && ( - - {buttonProps.map((props, index) => ( - - ))} - + {openInEmailButtonsProps && ( + )} diff --git a/src/pages/resetPassword/EmailForm.tsx b/src/pages/resetPassword/EmailForm.tsx index de8e833..e1f3b68 100644 --- a/src/pages/resetPassword/EmailForm.tsx +++ b/src/pages/resetPassword/EmailForm.tsx @@ -3,9 +3,10 @@ import { Stack, Typography } from "@mui/material" import { type FC } from "react" import * as form from "codeforlife/components/form" -import { LinkButton } from "codeforlife/components/router" +import { Link, LinkButton } from "codeforlife/components/router" import { useLazyRequestPasswordResetQuery } from "../../api/user" +import { OpenInEmailButtons } from "../../components" import { paths } from "../../router" export interface EmailFormProps {} @@ -18,12 +19,17 @@ const EmailForm: FC = () => { Thank you - - If you have entered a valid email address, you will receive a link - enabling you to reset your password. + If you have entered a valid email address, you will receive a link to + reset your password. Make sure to check your spam. - Back to homepage + + + + homepage + ) : (