feat: introduce 404 page (#1600)

packages/web/src/components/Layout/index.tsx

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import Stack from '@mui/material/Stack';
 import AppsIcon from '@mui/icons-material/Apps';
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 import HistoryIcon from '@mui/icons-material/History';
@@ -139,7 +140,7 @@ export default function PublicLayout({
         onDrawerClose={closeDrawer}
       />
 
-      <Box sx={{ display: 'flex' }}>
+      <Box sx={{ display: 'flex', height: '100%' }}>
         <Drawer
           links={drawerLinks}
           bottomLinks={bottomLinks}
@@ -148,11 +149,10 @@ export default function PublicLayout({
           onClose={closeDrawer}
         />
 
-        <Box sx={{ flex: 1 }}>
+        <Stack flex={1}>
           <Toolbar />
-
           {children}
-        </Box>
+        </Stack>
       </Box>
     </>
   );

packages/web/src/components/NotFound/index.tsx

@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useAuthentication from 'hooks/useAuthentication';
+import Layout from 'components/Layout';
+import PublicLayout from 'components/PublicLayout';
+
+export default function NoResultFound(): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const { isAuthenticated } = useAuthentication();
+
+  const pageContent = (
+    <Stack
+      justifyContent="center"
+      alignItems="center"
+      flex={1}
+      spacing={1}
+      p={2}
+      mb={11}
+    >
+      <Typography variant="h1" color="primary" textAlign="center">
+        404
+      </Typography>
+      <Typography variant="body1" textAlign="center">
+        {formatMessage('notFoundPage.title')}
+      </Typography>
+      <Link to={isAuthenticated ? URLS.FLOWS : URLS.LOGIN}>
+        <Button variant="contained" sx={{ mt: 3 }} component="div">
+          {formatMessage('notFoundPage.button')}
+        </Button>
+      </Link>
+    </Stack>
+  );
+
+  return isAuthenticated ? (
+    <Layout>{pageContent}</Layout>
+  ) : (
+    <PublicLayout>{pageContent}</PublicLayout>
+  );
+}

packages/web/src/locales/en.json

@@ -265,5 +265,7 @@
   "authClient.buttonSubmit": "Submit",
   "authClient.inputName": "Name",
   "authClient.inputActive": "Active",
-  "updateAuthClient.title": "Update auth client"
+  "updateAuthClient.title": "Update auth client",
+  "notFoundPage.title": "We can't seem to find a page you're looking for.",
+  "notFoundPage.button": "Back to home page"
 }

packages/web/src/routes.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes as ReactRouterRoutes, Navigate } from 'react-router-dom';
 import Layout from 'components/Layout';
+import NoResultFound from 'components/NotFound';
 import PublicLayout from 'components/PublicLayout';
 import Applications from 'pages/Applications';
 import Application from 'pages/Application';
@@ -138,13 +139,7 @@ function Routes() {
 
       <Route path={URLS.ADMIN_SETTINGS}>{adminSettingsRoutes}</Route>
 
-      <Route
-        element={
-          <Layout>
-            <div>404</div>
-          </Layout>
-        }
-      />
+      <Route path="*" element={<NoResultFound />} />
     </ReactRouterRoutes>
   );
 }