From 86e6e430cc2a7044cfcc6ce5819e006d89403710 Mon Sep 17 00:00:00 2001
From: Myzel394 <50424412+Myzel394@users.noreply.github.com>
Date: Mon, 20 Feb 2023 20:03:43 +0100
Subject: [PATCH] feat: Add ErrorPage

---
 public/locales/en-US/translation.json |  3 ++-
 src/App.tsx                           |  3 ++-
 src/components/widgets/ErrorPage.tsx  | 27 +++++++++++++++++++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/components/widgets/ErrorPage.tsx

diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json
index ab1c5aa..d051fab 100644
--- a/public/locales/en-US/translation.json
+++ b/public/locales/en-US/translation.json
@@ -17,7 +17,8 @@
         "actionNotUndoable": "This action cannot be undone!",
         "copyError": "Copying to clipboard did not work. Please copy the text manually.",
         "experimentalFeature": "This is an experimental feature.",
-        "deletedSuccessfully": "Deleted successfully!"
+        "deletedSuccessfully": "Deleted successfully!",
+        "appError": "We are sorry but there was an error. Please try again later."
     },
 
     "routes": {
diff --git a/src/App.tsx b/src/App.tsx
index 19b0f7b..03a1314 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,7 @@ import AuthenticatedRoute from "~/routes/AuthenticatedRoute"
 import CompleteAccountRoute from "~/routes/CompleteAccountRoute"
 import CreateReservedAliasRoute from "~/routes/CreateReservedAliasRoute"
 import EnterDecryptionPassword from "~/routes/EnterDecryptionPassword"
+import ErrorPage from "~/components/widgets/ErrorPage"
 import GlobalSettingsRoute from "~/routes/GlobalSettingsRoute"
 import I18nHandler from "./I18nHandler"
 import LoginRoute from "~/routes/LoginRoute"
@@ -35,7 +36,7 @@ const router = createBrowserRouter([
 	{
 		path: "/",
 		element: <RootRoute />,
-		errorElement: <div></div>,
+		errorElement: <ErrorPage />,
 		children: [
 			{
 				path: "/auth",
diff --git a/src/components/widgets/ErrorPage.tsx b/src/components/widgets/ErrorPage.tsx
new file mode 100644
index 0000000..ee66ff3
--- /dev/null
+++ b/src/components/widgets/ErrorPage.tsx
@@ -0,0 +1,27 @@
+import {ReactElement} from "react"
+import {useTranslation} from "react-i18next"
+import {IoSad} from "react-icons/io5"
+
+import {Grid, Typography} from "@mui/material"
+
+export default function ErrorPage(): ReactElement {
+	const {t} = useTranslation()
+
+	return (
+		<Grid
+			container
+			flexDirection="column"
+			justifyContent="center"
+			alignItems="center"
+			height="100vh"
+			spacing={2}
+		>
+			<Grid item>
+				<IoSad size={80} />
+			</Grid>
+			<Grid item maxWidth="sm">
+				<Typography variant="subtitle1">{t("general.appError")}</Typography>
+			</Grid>
+		</Grid>
+	)
+}