From 22f0802bcc42892c7c966589066a7e7b7bc049dd Mon Sep 17 00:00:00 2001 From: SKairinos Date: Fri, 2 Jun 2023 14:11:21 +0100 Subject: [PATCH] fix: error pages --- frontend/package.json | 2 +- frontend/src/app/router.tsx | 27 ++-- frontend/src/components/BaseErrorPage.tsx | 68 ---------- frontend/src/pages/error/Error.tsx | 120 ++++++++++++++++++ frontend/src/pages/error/ErrorProps.tsx | 61 +++++++++ frontend/src/pages/forbidden/Forbidden.tsx | 17 --- .../InternalServerError.tsx | 17 --- .../src/pages/pageNotFound/PageNotFound.tsx | 17 --- frontend/yarn.lock | 6 +- 9 files changed, 195 insertions(+), 140 deletions(-) delete mode 100644 frontend/src/components/BaseErrorPage.tsx create mode 100644 frontend/src/pages/error/Error.tsx create mode 100644 frontend/src/pages/error/ErrorProps.tsx delete mode 100644 frontend/src/pages/forbidden/Forbidden.tsx delete mode 100644 frontend/src/pages/internalServerError/InternalServerError.tsx delete mode 100644 frontend/src/pages/pageNotFound/PageNotFound.tsx diff --git a/frontend/package.json b/frontend/package.json index d8a728e6..c226d516 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,7 +28,7 @@ "@mui/icons-material": "^5.11.11", "@mui/material": "^5.11.12", "@reduxjs/toolkit": "^1.9.3", - "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v1.15.2", + "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v1.15.3", "country-list": "^2.3.0", "formik": "^2.2.9", "react": "^18.2.0", diff --git a/frontend/src/app/router.tsx b/frontend/src/app/router.tsx index a00b9846..849ed33d 100644 --- a/frontend/src/app/router.tsx +++ b/frontend/src/app/router.tsx @@ -15,9 +15,7 @@ import HomeLearning from '../pages/homeLearning/HomeLearning'; import PrivacyNotice from '../pages/privacyNotice/PrivacyNotice'; import TermsOfUse from '../pages/termsOfUse/TermsOfUse'; import Newsletter from '../pages/newsletter/Newsletter'; -import Forbidden from '../pages/forbidden/Forbidden'; -import PageNotFound from '../pages/pageNotFound/PageNotFound'; -import InternalServerError from '../pages/internalServerError/InternalServerError'; +import Error from '../pages/error/Error'; import TeacherSchool from '../pages/teacherDashboard/TeacherSchool'; import TeacherClasses from '../pages/teacherDashboard/TeacherClasses'; import TeacherAccount from '../pages/teacherDashboard/account/TeacherAccount'; @@ -74,9 +72,13 @@ export const paths = _('', { termsOfUse: _('/terms-of-use'), newsletter: _('/newsletter'), error: _('/error', { - forbidden: _('/forbidden'), - pageNotFound: _('/page-not-found'), - internalServerError: _('/internal-server-error') + forbidden: _('/?type=forbidden'), + pageNotFound: _('/?type=pageNotFound'), + tooManyRequests: _('/?type=tooManyRequests', { + teacher: _('&userType=teacher'), + independent: _('&userType=independent') + }), + internalServerError: _('/?type=internalServerError') }), rapidRouter: _('/rapid-router'), kurono: _('/kurono') @@ -139,18 +141,9 @@ const router = createBrowserRouter([ path: paths.newsletter._, element: }, - // TODO: merge separate error pages into one page with multiple states. - { - path: paths.error.forbidden._, - element: - }, - { - path: paths.error.pageNotFound._, - element: - }, { - path: paths.error.internalServerError._, - element: + path: paths.error._, + element: }, { path: paths.teacher.dashboard.school._, diff --git a/frontend/src/components/BaseErrorPage.tsx b/frontend/src/components/BaseErrorPage.tsx deleted file mode 100644 index 6b6f5372..00000000 --- a/frontend/src/components/BaseErrorPage.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import { - Unstable_Grid2 as Grid, - Stack, - Typography, - Button -} from '@mui/material'; - -import { Image, ImageProps } from 'codeforlife/lib/esm/components'; - -import BasePage from '../pages/BasePage'; -import { paths } from '../app/router'; -import PageSection from './PageSection'; - -export interface ErrorTemplateProps { - header: string, - subheader: string, - body: string, - img: Pick -}; - -const BaseErrorPage: React.FC = ({ - header, subheader, body, img -}) => { - return ( - - - - - - - {header} - - - {subheader} - - - {body} - - - - - - - - - - - ); -}; - -export default BaseErrorPage; diff --git a/frontend/src/pages/error/Error.tsx b/frontend/src/pages/error/Error.tsx new file mode 100644 index 00000000..34268b52 --- /dev/null +++ b/frontend/src/pages/error/Error.tsx @@ -0,0 +1,120 @@ +import React from 'react'; +import { + Unstable_Grid2 as Grid, + Stack, + Typography, + Button +} from '@mui/material'; + +import { Image } from 'codeforlife/lib/esm/components'; +import { SearchParams } from 'codeforlife/lib/esm/helpers'; + +import { paths } from '../../app/router'; +import PageSection from '../../components/PageSection'; +import BasePage from '../BasePage'; +import ErrorProps, { + forbidden403, + pageNotFound404, + tooManyRequests429, + internalServerError500 +} from './ErrorProps'; + +const Error: React.FC = () => { + const errorTypes = [ + '403', 'forbidden', + '404', 'pageNotFound', + '429', 'tooManyRequests', + '500', 'internalServerError' + ] as const; + + const userTypes = [ + 'teacher', + 'independent' + ] as const; + + let params = SearchParams.get<{ + type: typeof errorTypes[number], + userType?: typeof userTypes[number] + }>({ + type: { + validate: SearchParams.validate.inOptions(errorTypes) + }, + userType: { + validate: SearchParams.validate.inOptions(userTypes), + isRequired: false + } + }); + + if (params === null || ( + ['429', 'tooManyRequests'].includes(params.type) && + params.userType === undefined + )) { + // Special case. Don't redirect to an error page - we're already here. + params = { type: 'internalServerError' }; + } + + let errorProps: ErrorProps; + switch (params.type) { + case '403': + case 'forbidden': + errorProps = forbidden403(); + break; + case '404': + case 'pageNotFound': + errorProps = pageNotFound404(); + break; + case '429': + case 'tooManyRequests': + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + errorProps = tooManyRequests429(params.userType!); + break; + case '500': + case 'internalServerError': + errorProps = internalServerError500(); + break; + } + + return ( + + + + + + + {errorProps.header} + + + {errorProps.subheader} + + + {errorProps.body} + + + + + + + + + + + ); +}; + +export default Error; diff --git a/frontend/src/pages/error/ErrorProps.tsx b/frontend/src/pages/error/ErrorProps.tsx new file mode 100644 index 00000000..a3b974bd --- /dev/null +++ b/frontend/src/pages/error/ErrorProps.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { + Link +} from '@mui/material'; + +import { ImageProps } from 'codeforlife/lib/esm/components'; + +import { paths } from '../../app/router'; +import KirstyImage from '../../images/kirsty.png'; +import NigelImage from '../../images/nigel.png'; +import DeeImage from '../../images/dee.png'; +import PhilImage from '../../images/phil.png'; + +export default interface ErrorProps { + header: string; + subheader: string; + body: string | React.ReactElement; + imageProps: ImageProps; +}; + +export function forbidden403(): ErrorProps { + return { + header: 'Oi!', + subheader: 'Kirsty says you\'re not allowed there.', + body: 'Those pages belong to Kirsty. She won\'t let you in even if you ask nicely.', + imageProps: { alt: 'kirsty', src: KirstyImage } + }; +} + +export function pageNotFound404(): ErrorProps { + return { + header: 'Uh oh!', + subheader: 'Sorry, Nigel can\'t find the page you were looking for.', + body: 'This might be because you have entered a web address incorrectly or the page has moved.', + imageProps: { alt: 'nigel', src: NigelImage } + }; +} + +export function tooManyRequests429( + userType: 'teacher' | 'independent' +): ErrorProps { + const resetPasswordHref = (userType === 'teacher') + ? paths.resetPassword.teacher._ + : paths.resetPassword.independent._; + + return { + header: 'Temporary lock out!', + subheader: 'Your account has been temporarily blocked as there were too many unsuccessful requests.', + body: <>If you wish to proceed, please reset your password. Alternatively, you will need to wait 24 hours for your account to be unlocked again., + imageProps: { alt: 'phil', src: PhilImage } + }; +} + +export function internalServerError500(): ErrorProps { + return { + header: 'Zap!', + subheader: 'Oh dear! Something technical has gone wrong.', + body: 'Dee will attempt to fix this soon.', + imageProps: { alt: 'dee', src: DeeImage } + }; +} diff --git a/frontend/src/pages/forbidden/Forbidden.tsx b/frontend/src/pages/forbidden/Forbidden.tsx deleted file mode 100644 index dfbe9c34..00000000 --- a/frontend/src/pages/forbidden/Forbidden.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import BaseErrorPage from '../../components/BaseErrorPage'; -import KirstyImage from '../../images/kirsty.png'; - -const Forbidden: React.FC = () => { - return ( - - ); -}; - -export default Forbidden; diff --git a/frontend/src/pages/internalServerError/InternalServerError.tsx b/frontend/src/pages/internalServerError/InternalServerError.tsx deleted file mode 100644 index 37735d57..00000000 --- a/frontend/src/pages/internalServerError/InternalServerError.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import BaseErrorPage from '../../components/BaseErrorPage'; -import DeeImage from '../../images/dee.png'; - -const InternalServerError: React.FC = () => { - return ( - - ); -}; - -export default InternalServerError; diff --git a/frontend/src/pages/pageNotFound/PageNotFound.tsx b/frontend/src/pages/pageNotFound/PageNotFound.tsx deleted file mode 100644 index a93c87b7..00000000 --- a/frontend/src/pages/pageNotFound/PageNotFound.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import BaseErrorPage from '../../components/BaseErrorPage'; -import NigelImage from '../../images/nigel.png'; - -const PageNotFound: React.FC = () => { - return ( - - ); -}; - -export default PageNotFound; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index e28a0364..ae73ba5a 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -4093,9 +4093,9 @@ coa@^2.0.2: chalk "^2.4.1" q "^1.1.2" -"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v1.15.2": - version "1.15.2" - resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/4e27f768943238910c925d0da9e16c0b19b25556" +"codeforlife@github:ocadotechnology/codeforlife-package-javascript#v1.15.3": + version "1.15.3" + resolved "https://codeload.github.com/ocadotechnology/codeforlife-package-javascript/tar.gz/638976530e7fde7bf75fd78efb5fbfabcf7e2a3e" dependencies: "@emotion/react" "^11.10.6" "@emotion/styled" "^11.10.6"