fix(reload_experience): Improve reload experience with a 404 page and…

… a choice when there is changes not saved
XPEHO · Feb 23, 2024 · e38eb68 · e38eb68
1 parent 0270814
commit e38eb68
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 8 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,8 +1,9 @@
-favicon.ico,1708616553748,642f1aaa9a48d91d01009c5d59bf43b000ac928f2087032988c612cfc9a0ffcf
-index.html,1708616553928,e865bf78a74377096c14b5e62dbff09d7b9845bf0708ac3d5cbcf0b5cd56742d
-assets/fireman-helmet-Ukc3N7ug.png,1708616553928,f8c2804ac98abb8be17dab1f4c198cf379a3122e19b82a898bf919a55c6c12b3
-assets/index-YYuIn3io.css,1708616553928,2c403f6fe376a7397d3b8ec074586c571b558adef4296c8a70bb9ecb9c323255
-assets/google-logo-7SJOUJsJ.png,1708616553928,f56e9879d41f269f2bb757924c931fff5bd22ed1b6ec2563327125f872e34312
-assets/background-zxbUyEDC.png,1708616553928,21491117a988ab2a35192e617e1d1b3bc6e09907951cb82916512cfd170dbdd8
-assets/index-AggciY1l.js,1708616553928,fa7d64ca16392176cd65d846b0c814f908a82dc7b7ce1971efc8f89eb11a94c4
-assets/logo-FNuJ5V5l.png,1708616553928,c7e4655162bd792eb336d1d9c9ef1dc162a5be24ea5651694f354d2732d5262d
+404.html,1708679304125,9caddd17c52fa475306d2f1788cda5c564a4f55e4bc4e7ccfb7f186a14fd88d4
+index.html,1708679304321,a4cabe4f7d24e5a48459b40c217b563391ab0924338ea5278f84d8226ea8eab1
+favicon.ico,1708679304125,642f1aaa9a48d91d01009c5d59bf43b000ac928f2087032988c612cfc9a0ffcf
+assets/fireman-helmet-Ukc3N7ug.png,1708679304321,f8c2804ac98abb8be17dab1f4c198cf379a3122e19b82a898bf919a55c6c12b3
+assets/index-YYuIn3io.css,1708679304321,2c403f6fe376a7397d3b8ec074586c571b558adef4296c8a70bb9ecb9c323255
+assets/google-logo-7SJOUJsJ.png,1708679304321,f56e9879d41f269f2bb757924c931fff5bd22ed1b6ec2563327125f872e34312
+assets/background-zxbUyEDC.png,1708679304321,21491117a988ab2a35192e617e1d1b3bc6e09907951cb82916512cfd170dbdd8
+assets/index-jaG_QrW6.js,1708679304321,854524b696308d17614062438e3e2470bb4a70605eb5f7d9f9902df355529d01
+assets/logo-FNuJ5V5l.png,1708679304321,c7e4655162bd792eb336d1d9c9ef1dc162a5be24ea5651694f354d2732d5262d
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
+    <title>Page Not Found</title>
+
+    <style media="screen">
+      body {
+        background: #eceff1;
+        color: rgba(0, 0, 0, 0.87);
+        font-family: Roboto, Helvetica, Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+      }
+      #message {
+        background: white;
+        max-width: 360px;
+        margin: 100px auto 16px;
+        padding: 32px 24px 16px;
+        border-radius: 3px;
+      }
+      #message h3 {
+        color: #888;
+        font-weight: normal;
+        font-size: 16px;
+        margin: 16px 0 12px;
+      }
+      #message h2 {
+        color: #ffa100;
+        font-weight: bold;
+        font-size: 16px;
+        margin: 0 0 8px;
+      }
+      #message h1 {
+        font-size: 22px;
+        font-weight: 300;
+        color: rgba(0, 0, 0, 0.6);
+        margin: 0 0 16px;
+      }
+      #message p {
+        line-height: 140%;
+        margin: 16px 0 24px;
+        font-size: 14px;
+      }
+      #message a {
+        display: block;
+        text-align: center;
+        background: #039be5;
+        text-transform: uppercase;
+        text-decoration: none;
+        color: white;
+        padding: 16px;
+        border-radius: 4px;
+      }
+      #message,
+      #message a {
+        box-shadow:
+          0 1px 3px rgba(0, 0, 0, 0.12),
+          0 1px 2px rgba(0, 0, 0, 0.24);
+      }
+      #load {
+        color: rgba(0, 0, 0, 0.4);
+        text-align: center;
+        font-size: 13px;
+      }
+      @media (max-width: 600px) {
+        body,
+        #message {
+          margin-top: 0;
+          background: white;
+          box-shadow: none;
+        }
+        body {
+          border-top: 16px solid #ffa100;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page non trouvée</h1>
+      <p>Pour des raisons de sécurité nous vous demandons de vous reconnecter.</p>
+      <a href="https://udsp59.web.app">Se connecter</a>
+    </div>
+  </body>
+</html>
diff --git a/src/views/PageView.vue b/src/views/PageView.vue
@@ -5,6 +5,7 @@ import { useDataStore } from "../stores/data";
 import router from "@/router";
 import AddPopup from "@/components/AddPopup.vue";
 import SaveAlertPopup from "@/components/SaveAlertPopup.vue";
+import { onMounted } from "vue";
 
 // Get the stores
 const userStore = useUserStore();
@@ -13,6 +14,15 @@ const dataStore = useDataStore();
 // Get the route
 const route = useRoute();
 
+onMounted(() => {
+  // Prevent leaving the page without saving
+  window.addEventListener("beforeunload", (e) => {
+    if (dataStore.needToSave) {
+      e.preventDefault();
+    }
+  });
+});
+
 // Save to firebase
 function saveToFirebase() {
   if (route.name == "Modules") dataStore.saveModulesToFirebase();