merge from dev

.env

@@ -2,9 +2,10 @@ 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/
 VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-graduates-2019/
 
-
 # TODO: determine which of these we need.
 # REACT_APP_CONTAINER_MAX_WIDTH=lg
 # REACT_APP_FACEBOOK_HREF=https://www.facebook.com/codeforlifeuk
@@ -30,4 +31,4 @@ VITE_LINK_FEMALE_GRADUATES_IN_CS=https://www.wisecampaign.org.uk/core-stem-gradu
 # REACT_APP_INTRO_TO_CODING_SCOTLAND=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/introduction-to-coding-scotland
 # REACT_APP_KURONO_AND_CURRICULUM=https://code-for-life.gitbook.io/teaching-resources/v/kurono-teaching-resources/teacher-guides/kurono-and-the-national-curriculum-for-computing
 # REACT_APP_RR_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/rapid-router-resources/welcome-to-rapid-router
-# REACT_APP_KURONO_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/v/kurono-teaching-resources/
+# REACT_APP_KURONO_TEACHING_RESOURCE=https://code-for-life.gitbook.io/teaching-resources/v/kurono-teaching-resources/

.vscode/launch.json

@@ -2,7 +2,7 @@
   "configurations": [
     {
       "name": "Vite Server",
-      "preLaunchTask": "start-vite-server",
+      "preLaunchTask": "run",
       "request": "launch",
       "type": "chrome",
       "url": "http://localhost:5173"

.vscode/tasks.json

@@ -1,5 +1,11 @@
 {
   "tasks": [
+    {
+      "command": "sudo chmod u+x scripts/setup && scripts/setup",
+      "label": "setup",
+      "problemMatcher": [],
+      "type": "shell"
+    },
     {
       "command": "sudo chmod u+x scripts/hard-install && scripts/hard-install",
       "label": "hard-install",
@@ -9,7 +15,7 @@
     {
       "command": "sudo chmod u+x scripts/run && scripts/run",
       "isBackground": true,
-      "label": "start-vite-server",
+      "label": "run",
       "options": {
         "env": {
           "BROWSER": "none"

package.json

@@ -20,7 +20,7 @@
   },
   "//": "🚫 Don't add `dependencies` below that are inherited from the CFL package.",
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.0.3"
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.1.0"
   },
   "//": "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package.",
   "devDependencies": {

src/pages/emailVerification/EmailVerification.tsx

@@ -1,11 +1,15 @@
+import {
+  MailOutline as MailOutlineIcon,
+  Send as SendIcon,
+  SentimentVeryDissatisfied as SentimentVeryDissatisfiedIcon,
+} from "@mui/icons-material"
+import { type SvgIconProps } from "@mui/material"
 import { type FC, useEffect } from "react"
 import * as yup from "yup"
 
 import * as page from "codeforlife/components/page"
 import { useNavigate, useParams, useSearchParams } from "codeforlife/hooks"
 
-import PaperPlaneImg from "../../images/paper_plane.png"
-import SadFaceImg from "../../images/sadface.png"
 import { paths } from "../../router"
 import Status from "./Status"
 
@@ -29,6 +33,11 @@ const EmailVerification: FC<EmailVerificationProps> = () => {
 
   if (!params) return <></>
 
+  const svgIconProps: SvgIconProps = {
+    color: "white",
+    style: { fontSize: "100px" },
+  }
+
   return (
     <page.Page>
       <page.Section maxWidth="md" className="flex-center">
@@ -37,14 +46,24 @@ const EmailVerification: FC<EmailVerificationProps> = () => {
             userType={params.userType}
             header="We need to verify your email address"
             body={[
-              "An email has been sent to the address you provided.",
+              "An email has been sent to you. Make sure to check your spam.",
               "Please follow the link within the email to verify your details. This will expire in 1 hour.",
-              "If you don't receive the email within the next few minutes, check your spam folder.",
             ]}
-            imageProps={{
-              alt: "PaperPlane",
-              src: PaperPlaneImg,
-            }}
+            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 />,
+              },
+            ]}
           />
         ) : (
           <Status
@@ -54,10 +73,7 @@ const EmailVerification: FC<EmailVerificationProps> = () => {
               "You used an invalid link, either you mistyped the URL or that link is expired.",
               "When you next attempt to log in, you will be sent a new verification email.",
             ]}
-            imageProps={{
-              alt: "SadFace",
-              src: SadFaceImg,
-            }}
+            icon={<SentimentVeryDissatisfiedIcon {...svgIconProps} />}
           />
         )}
       </page.Section>

src/pages/emailVerification/Status.tsx

@@ -1,8 +1,11 @@
 import { Stack, Typography } from "@mui/material"
-import { type FC } from "react"
+import { type FC, type ReactElement } from "react"
 
-import { Image, type ImageProps } from "codeforlife/components"
-import { LinkButton } from "codeforlife/components/router"
+import {
+  Link,
+  LinkButton,
+  type LinkButtonProps,
+} from "codeforlife/components/router"
 import { ThemedBox, type ThemedBoxProps } from "codeforlife/theme"
 
 import { themeOptions } from "../../app/theme"
@@ -12,25 +15,39 @@ export interface StatusProps {
   userType: ThemedBoxProps["userType"]
   header: string
   body: string[]
-  imageProps: ImageProps
+  icon: ReactElement
+  buttonProps?: LinkButtonProps[]
 }
 
-const Status: FC<StatusProps> = ({ userType, header, body, imageProps }) => (
+const Status: FC<StatusProps> = ({
+  userType,
+  header,
+  body,
+  icon,
+  buttonProps,
+}) => (
   <ThemedBox withShapes options={themeOptions} userType={userType}>
-    <Stack alignItems="center">
+    <Stack alignItems="center" marginBottom={2.5}>
       <Typography variant="h4" paddingY={1} textAlign="center">
         {header}
       </Typography>
-      <Image maxWidth="100px" marginY={5} {...imageProps} />
+      {icon}
       <Stack>
         {body.map((text, index) => (
           <Typography key={index}>{text}</Typography>
         ))}
       </Stack>
-      <LinkButton to={paths._} style={{ marginTop: 30 }}>
-        Back to homepage
-      </LinkButton>
+      {buttonProps && (
+        <Stack direction="row" spacing={5}>
+          {buttonProps.map((props, index) => (
+            <LinkButton key={index} {...props} />
+          ))}
+        </Stack>
+      )}
     </Stack>
+    <Link to={paths._} className="back-to">
+      homepage
+    </Link>
   </ThemedBox>
 )