add beforeleave

Author: nil1729

vue-noob-router-2/src/App.vue

@@ -1,6 +1,15 @@
 <template>
   <div>
-    <router-view :isAuthenticated="isAuthenticated" :handleAuth="handleAuth" />
+    <div v-if="loading" class="loader p-4">
+      <div></div>
+    </div>
+    <router-view
+      :createAlert="createAlert"
+      :clearAlerts="clearAlerts"
+      :alerts="alerts"
+      :isAuthenticated="isAuthenticated"
+      :handleAuth="handleAuth"
+    />
   </div>
 </template>
 
@@ -11,8 +20,22 @@ export default {
   data() {
     return {
       isAuthenticated: false,
+      loading: true,
+      alerts: null,
     };
   },
+  watch: {
+    alerts() {
+      const vm = this;
+      if (vm.alerts !== "") {
+        setTimeout(() => {
+          vm.alerts = "";
+        }, 4000);
+      } else {
+        clearTimeout();
+      }
+    },
+  },
   beforeCreate: async function () {
     const vm = this;
     await firebase.auth().onAuthStateChanged(function (user) {
@@ -21,9 +44,16 @@ export default {
       } else {
         console.log("User is not authenticated");
       }
+      vm.loading = false;
     });
   },
   methods: {
+    createAlert(ev) {
+      this.alerts = { ...ev };
+    },
+    clearAlerts() {
+      this.alerts = null;
+    },
     handleAuth: async function (ev) {
       const vm = this;
       if (ev.mode === "login") {
@@ -33,7 +63,7 @@ export default {
             .signInWithEmailAndPassword(ev.email, ev.password);
           vm.isAuthenticated = true;
         } catch (e) {
-          return e.message;
+          return e;
         }
       } else if (ev.mode === "register") {
         try {
@@ -42,12 +72,16 @@ export default {
             .createUserWithEmailAndPassword(ev.email, ev.password);
           vm.isAuthenticated = true;
         } catch (e) {
-          return e.message;
+          return e;
         }
       } else {
         try {
           await firebase.auth().signOut();
           vm.isAuthenticated = false;
+          this.alerts = {
+            code: "Notification",
+            message: "Successfully Signed out",
+          };
         } catch (e) {
           return e;
         }
@@ -58,4 +92,31 @@ export default {
 </script>
 
 <style>
+.loader {
+  height: 100vh;
+  width: 100vw;
+  position: absolute;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  background: rgb(31, 29, 29);
+}
+.loader div {
+  height: 100px;
+  width: 100px;
+  border: 3px solid rgb(241, 211, 211);
+  border-bottom: 0;
+  border-top: 0;
+  border-radius: 50%;
+  margin: auto;
+  animation: loader 1s infinite linear;
+}
+@keyframes loader {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

vue-noob-router-2/src/components/pages/404.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="container text-center">
+    <div class="display-4 text-info">Page Not Found</div>
+    <p class="lead">The page you are looking for does not exist</p>
+    <hr class="my-2" />
+    <router-link to="/" class="btn btn-sm btn-warning">Go Back</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "app404",
+};
+</script>
+
+<style>
+</style>

vue-noob-router-2/src/components/pages/Auth.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="container p-4">
     <h3 class="text-center">{{ mode | toUpperCase }}</h3>
-    <div class="toast" :class="{show: error }" role="alert">
+    <div class="toast" :class="{show: $attrs.alerts }" role="alert">
       <div class="toast-header">
-        <strong class="mr-auto text-danger">Error</strong>
-        <button @click="error = ''" type="button" class="ml-2 mb-1 close">
+        <strong class="mr-auto text-danger">{{ $attrs.alerts && $attrs.alerts.code }}</strong>
+        <button @click="$attrs.clearAlerts()" type="button" class="ml-2 mb-1 close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <div class="toast-body">{{ error }}</div>
+      <div class="toast-body">{{ $attrs.alerts && $attrs.alerts.message }}</div>
     </div>
     <form @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -52,7 +52,6 @@ export default {
       email: "",
       password: "",
       mode: "login",
-      error: "",
       submitted: false,
     };
   },
@@ -62,16 +61,6 @@ export default {
     },
   },
   watch: {
-    error() {
-      const vm = this;
-      if (vm.error !== "") {
-        setTimeout(() => {
-          vm.error = "";
-        }, 4000);
-      } else {
-        clearTimeout();
-      }
-    },
     "$attrs.isAuthenticated"() {
       if (this.$attrs.isAuthenticated) {
         this.$router.push({
@@ -80,23 +69,32 @@ export default {
       }
     },
   },
+  beforeMount() {
+    if (this.$attrs.isAuthenticated) {
+      this.$router.push({
+        name: "Home",
+      });
+    }
+  },
   methods: {
     handleSubmit: async function () {
       this.submitted = true;
       if (!this.validateEmail(this.email)) {
         this.submitted = false;
-        return (this.error = "Please enter a valid Email Address");
+        return this.$attrs.createAlert({
+          code: "Validation Error",
+          message: "Please enter a valid Email Address",
+        });
       }
-      const res = await this.$attrs.handleAuth({
+      const err = await this.$attrs.handleAuth({
         email: this.email,
         password: this.password,
         mode: this.mode,
       });
-      if (res) {
+      if (err) {
         this.submitted = false;
-        return (this.error = res);
+        return this.$attrs.createAlert(err);
       }
-      this.submitted = false;
       this.email = "";
       this.password = "";
     },

vue-noob-router-2/src/components/pages/Home.vue

@@ -10,6 +10,7 @@
       @click="$attrs.handleAuth({mode: 'signout'})"
       class="btn btn-sm btn-warning text-dark"
     >Sign out</button>
+    <button @click="$router.push('/something')" class="btn btn-sm btn-danger mx-2">Go Somewhere</button>
   </div>
 </template>
 
@@ -26,6 +27,15 @@ export default {
     this.email =
       firebase.auth().currentUser && firebase.auth().currentUser.email;
   },
+  beforeRouteLeave(to, from, next) {
+    if (!this.$attrs.isAuthenticated) {
+      next();
+    } else {
+      if (confirm("Are you sure you want to leave ?")) {
+        next();
+      }
+    }
+  },
   watch: {
     "$attrs.isAuthenticated"() {
       if (!this.$attrs.isAuthenticated) {

vue-noob-router-2/src/routes.js

@@ -1,5 +1,6 @@
 import Home from '@/components/pages/Home';
 import Auth from '@/components/pages/Auth';
+import NotFound from '@/components/pages/404';
 export const routes = [
 	{
 		path: '/',
@@ -16,4 +17,9 @@ export const routes = [
 		name: 'Auth',
 		// redirect: '/',
 	},
+	{
+		path: '*',
+		component: NotFound,
+		name: '404',
+	},
 ];