From ad0b7db95a1fbbbd5235eff96c2b20d0e6485225 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Mon, 22 Aug 2022 13:51:44 +0200
Subject: [PATCH] add 404 page

---
 src/components/PageNotFound.vue    | 17 +++++++++++++++++
 src/components/PreferencesPage.vue |  2 +-
 src/locales/en.json                | 10 ++++++----
 src/router/router.js               |  5 +++++
 4 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 src/components/PageNotFound.vue

diff --git a/src/components/PageNotFound.vue b/src/components/PageNotFound.vue
new file mode 100644
index 00000000..882596cd
--- /dev/null
+++ b/src/components/PageNotFound.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="flex flex-col justify-center items-center min-h-[88vh]">
+        <h1 class="font-bold">404</h1>
+        <h2 v-t="'info.page_not_found'" />
+        <a class="btn mt-16" href="/" v-t="'actions.back_to_home'" />
+    </div>
+</template>
+
+<style scoped>
+/* font size can't be handled within windiCSS classes because it's overwritten with !important */
+h1 {
+    font-size: 8rem !important;
+}
+h2 {
+    font-size: 1.7rem !important;
+}
+</style>
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 5696f09c..ef693918 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -314,7 +314,7 @@
         </tbody>
     </table>
     <br />
-    <p v-t="'information.preferences_note'" />
+    <p v-t="'info.preferences_note'" />
     <br />
     <button class="btn" v-t="'actions.reset_preferences'" @click="resetPreferences()" />
     <button class="btn mx-4" v-t="'actions.backup_preferences'" @click="backupPreferences()" />
diff --git a/src/locales/en.json b/src/locales/en.json
index 0615ae2e..ac4e4322 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -96,7 +96,8 @@
         "reset_preferences": "Reset preferences",
         "confirm_reset_preferences": "Are you sure you want to reset your preferences?",
         "backup_preferences": "Backup preferences",
-        "restore_preferences": "Restore preferences"
+        "restore_preferences": "Restore preferences",
+        "back_to_home": "Back to home"
     },
     "comment": {
         "pinned_by": "Pinned by",
@@ -141,7 +142,8 @@
     "subscriptions": {
         "subscribed_channels_count": "Subscribed to: {0}"
     },
-    "information": {
-        "preferences_note": "Note: preferences are saved in the local storage of your browser. Deleting your browser data will reset them."
+    "info": {
+        "preferences_note": "Note: preferences are saved in the local storage of your browser. Deleting your browser data will reset them.",
+        "page_not_found": "Page not found"
     }
-}
+}
\ No newline at end of file
diff --git a/src/router/router.js b/src/router/router.js
index 3895f7f7..29bb7c61 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -80,6 +80,11 @@ const routes = [
         name: "Playlists",
         component: () => import("../components/PlaylistsPage.vue"),
     },
+    {
+        path: "/:pathMatch(.*)*",
+        name: "Page Not Found",
+        component: () => import("../components/PageNotFound.vue"),
+    },
 ];
 
 const router = createRouter({