feedback

.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:[email protected] subject:Password reset request"
+VITE_GMAIL_FILTERS_EMAIL_VERIFICATION="from:[email protected] 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.

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<OpenInEmailButtonsProps> = ({ gmailFilters }) => {
+  return (
+    <Stack direction="row" spacing={5}>
+      <LinkButton
+        to={`https://mail.google.com/mail/#search/${encodeURIComponent(gmailFilters)}`}
+        target="_blank"
+        endIcon={<MailOutlineIcon />}
+      >
+        Open in Gmail
+      </LinkButton>
+      <LinkButton
+        to="https://outlook.live.com/mail/"
+        target="_blank"
+        endIcon={<MailOutlineIcon />}
+      >
+        Open in Outlook
+      </LinkButton>
+    </Stack>
+  )
+}
+
+export default OpenInEmailButtons

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,
+}

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<EmailVerificationProps> = () => {
               "Please follow the link within the email to verify your details. This will expire in 1 hour.",
             ]}
             icon={<SendIcon {...svgIconProps} />}
-            buttonProps={[
-              {
-                to: import.meta.env.VITE_LINK_OPEN_VERIFY_EMAIL_IN_GMAIL,
-                target: "_blank",
-                children: "Open in Gmail",
-                endIcon: <MailOutlineIcon />,
-              },
-              {
-                to: import.meta.env.VITE_LINK_OPEN_VERIFY_EMAIL_IN_OUTLOOK,
-                target: "_blank",
-                children: "Open in Outlook",
-                endIcon: <MailOutlineIcon />,
-              },
-            ]}
+            openInEmailButtonsProps={{
+              gmailFilters: import.meta.env
+                .VITE_GMAIL_FILTERS_EMAIL_VERIFICATION,
+            }}
           />
         ) : (
           <Status

src/pages/emailVerification/Status.tsx

@@ -1,30 +1,30 @@
 import { Stack, Typography } from "@mui/material"
 import { type FC, type ReactElement } from "react"
 
-import {
-  Link,
-  LinkButton,
-  type LinkButtonProps,
-} from "codeforlife/components/router"
+import { Link } from "codeforlife/components/router"
 import { ThemedBox, type ThemedBoxProps } from "codeforlife/theme"
 
 import { themeOptions } from "../../app/theme"
+import {
+  OpenInEmailButtons,
+  type OpenInEmailButtonsProps,
+} from "../../components"
 import { paths } from "../../router"
 
 export interface StatusProps {
   userType: ThemedBoxProps["userType"]
   header: string
   body: string[]
   icon: ReactElement
-  buttonProps?: LinkButtonProps[]
+  openInEmailButtonsProps?: OpenInEmailButtonsProps
 }
 
 const Status: FC<StatusProps> = ({
   userType,
   header,
   body,
   icon,
-  buttonProps,
+  openInEmailButtonsProps,
 }) => (
   <ThemedBox withShapes options={themeOptions} userType={userType}>
     <Stack alignItems="center" marginBottom={2.5}>
@@ -37,12 +37,8 @@ const Status: FC<StatusProps> = ({
           <Typography key={index}>{text}</Typography>
         ))}
       </Stack>
-      {buttonProps && (
-        <Stack direction="row" spacing={5}>
-          {buttonProps.map((props, index) => (
-            <LinkButton key={index} {...props} />
-          ))}
-        </Stack>
+      {openInEmailButtonsProps && (
+        <OpenInEmailButtons {...openInEmailButtonsProps} />
       )}
     </Stack>
     <Link to={paths._} className="back-to">

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<EmailFormProps> = () => {
       <Typography textAlign="center" variant="h4">
         Thank you
       </Typography>
-      <SendIcon color="white" sx={{ fontSize: "100px", marginY: 5 }} />
       <Typography>
-        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 <strong>spam</strong>.
       </Typography>
-      <LinkButton to={paths._}>Back to homepage</LinkButton>
+      <SendIcon color="white" sx={{ fontSize: "100px", marginY: 5 }} />
+      <OpenInEmailButtons
+        gmailFilters={import.meta.env.VITE_GMAIL_FILTERS_PASSWORD_RESET_REQUEST}
+      />
+      <Link to={paths._} className="back-to">
+        homepage
+      </Link>
     </Stack>
   ) : (
     <Stack gap={1}>