Add toast notifications

2023-03-16 14:46:34 +00:00
parent ce8a6b0ff0
commit 7350a56bfd
6 changed files with 166 additions and 112 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -13,6 +13,7 @@
        "bootstrap": "^5.2.3",
        "chart.js": "^4.2.1",
        "firebase": "^9.17.1",
+        "mosha-vue-toastify": "^1.0.23",
        "ol": "^7.2.2",
        "vue": "^3.2.45",
        "vue-chartjs": "^5.2.0",
@ -1756,6 +1757,11 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/mosha-vue-toastify": {
+      "version": "1.0.23",
+      "resolved": "https://registry.npmjs.org/mosha-vue-toastify/-/mosha-vue-toastify-1.0.23.tgz",
+      "integrity": "sha512-K9fij3e3H+E/Lj82ISrgmyKrtM5RNmtZC/KG/KH47+oZGmzAkN/Zuz39kBdT/Mp8OxaHuIWQntEUMP+HdmK1xA=="
+    },
    "node_modules/nanoid": {
      "version": "3.3.4",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
    "bootstrap": "^5.2.3",
    "chart.js": "^4.2.1",
    "firebase": "^9.17.1",
+    "mosha-vue-toastify": "^1.0.23",
    "ol": "^7.2.2",
    "vue": "^3.2.45",
    "vue-chartjs": "^5.2.0",
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@ -6,33 +6,31 @@
    <h3>Enter your current password to edit account settings</h3>
    <input type="password" v-model="currentPassword" placeholder="Enter existing password">
    <h3>Send a password reset email</h3>
-    <input @click="resetPasswordEmail" type="submit" name="" value="Send Password reset email">
+    <input @click="resetPasswordEmail()" type="submit" name="" value="Send Password reset email">

    <h3>Change email</h3>
    <input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
-    <input @click="updateUserEmail" type="submit" name="" value="Update Email">
+    <input @click="updateUserEmail()" type="submit" name="" value="Update Email">

    <h3>Change password</h3>
    <input type="password" v-model="newPassword" placeholder="Enter new password">
-    <input @click="updateUserPassword" type="submit" name="" value="Update Password">
+    <input @click="updateUserPassword()" type="submit" name="" value="Update Password">

    <h3>Delete account</h3>
-    <input @click="deleteUserAccount" type="submit" name="" value="Delete Account">
+    <input @click="deleteUserAccount()" type="submit" name="" value="Delete Account">

    <h3>Delete filter preferences data</h3>
-    <button @click="deleteUserPreferences">Delete preferences</button>
+    <button @click="deleteUserPreferences()">Delete preferences</button>
 </div>
-
-<p v-if="missingCredentials">Missing credentials to complete this action</p>
-<p v-if="displayFirebaseSuccessMsg">{{ FirebaseSuccessMsg }}</p>
-<p v-if="displayFirebaseError">{{ FirebaseError }}</p>
 </template>

 <script>
-import Navbar from '../components/Navbar.vue'
-import app from '../api/firebase'
 import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions"
 import { getAuth, updateEmail, updatePassword, deleteUser, reauthenticateWithCredential, EmailAuthProvider, sendPasswordResetEmail } from "firebase/auth";
+import { createToast } from 'mosha-vue-toastify';
+import 'mosha-vue-toastify/dist/style.css'
+import Navbar from '../components/Navbar.vue'
+import app from '../api/firebase'
 const auth = getAuth();

 export default {
@ -43,17 +41,23 @@ export default {
    },

    data() {
+        const toast = () => {
+            createToast(this.toastMessage, {
+                hideProgressBar: true,
+                timeout: 4000,
+                toastBackgroundColor: this.toastBackground
+            })
+        }
+
        return {
            user: null,
            newEmail: "",
            newPassword: "",
            currentPassword: "",
-            displayFirebaseSuccessMsg: false,
-            FirebaseSuccessMsg: "",
-            displayFirebaseError: false,
-            FirebaseError: "",
+            toastMessage: "",
+            toastBackground: "",
            reAuthSuccessful: false,
-            missingCredentials: false
+            toast
        }
    },

@ -62,24 +66,23 @@ export default {
    },

    methods: {
+        showToast(message, backgroundColour) {
+            this.toastMessage = message
+            this.toastBackground = backgroundColour
+            this.toast()
+        },
+        
        async authenticateUser(password) {
-            var credential = await EmailAuthProvider.credential(user.email, password)
-            await reauthenticateWithCredential(user, credential).then(() => {
+            var credential = await EmailAuthProvider.credential(this.user.email, password)
+            await reauthenticateWithCredential(this.user, credential).then(() => {
                this.reAuthSuccessful = true
            })
            .catch((error) => {
                this.reAuthSuccessful = false
-                this.FirebaseError = error.message
-                this.displayFirebaseError = true
+                this.showToast(error.message, "red")
            })
        },

-        resetMessages() {
-            this.missingCredentials = false
-            this.displayFirebaseError = false
-            this.displayFirebaseSuccessMsg = false
-        },
-
        resetCredentials() {
            this.newEmail = ""
            this.newPassword = ""
@ -88,92 +91,94 @@ export default {
        },

        updateUserEmail() {
-            this.resetMessages()
            if (!this.newEmail || !this.currentPassword) {
-                this.missingCredentials = true
+                this.showToast("Missing password input", "red")
                return
            }
+
            this.authenticateUser(this.currentPassword).then(() => {
                if (!this.reAuthSuccessful) return
                updateEmail(this.user, this.newEmail).then(() => {
-                    // might need to reset user here
                    this.resetCredentials()
-                    this.FirebaseSuccessMsg = "Email updated"
-                    this.displayFirebaseSuccessMsg = true
+                    this.showToast("Email successfully updated", "green")
                })
                .catch((error) => {
-                    this.FirebaseError = error.message
-                    this.displayFirebaseError = true
+                    this.showToast(error.message, "red")
                })
            })
        },

        updateUserPassword() {
-            this.resetMessages()
            if (!this.newPassword || !this.currentPassword) {
-                this.missingCredentials = true
+                this.showToast("Missing password input", "red")
                return
            }
+
            this.authenticateUser(this.currentPassword).then(() => {
                if (!this.reAuthSuccessful) return
                updatePassword(this.user, this.newPassword).then(() => {
                    this.resetCredentials()
-                    this.FirebaseSuccessMsg = "Password updated"
-                    this.displayFirebaseSuccessMsg = true
+                    this.showToast("Password successfully updated", "green")
                })
                .catch((error) => {
-                    this.FirebaseError = error.message
-                    this.displayFirebaseError = true
+                    this.showToast(error.message, "red")
                })
            })
        },

        deleteUserAccount() {
-            this.resetMessages()
            if (!this.currentPassword) {
-                this.missingCredentials = true
+                this.showToast("Missing password input", "red")
                return
            }
+            
            this.authenticateUser(this.currentPassword).then(() => {
                if (!this.reAuthSuccessful) return
                deleteUser(this.user).then(() => {
                    this.resetCredentials()
-                    this.FirebaseSuccessMsg = "Account deleted"
-                    this.displayFirebaseSuccessMsg = true
+                    this.showToast("Account successfully deleted", "green")
                    this.$router.push({path:'/'})
                })
                .catch((error) => {
-                    this.FirebaseError = error.message
-                    this.displayFirebaseError = true
+                    this.showToast(error.message, "red")
                })
            })
        },

        resetPasswordEmail() {
            sendPasswordResetEmail(auth, this.user.email).then(() => {
-                this.FirebaseSuccessMsg = "Reset password email sent"
-                this.displayFirebaseSuccessMsg = true
+                this.showToast("Reset password email sent", "green")
            })
            .catch((error) => {
-                this.FirebaseError = error.message
-                this.displayFirebaseError = true
+                this.showToast(error.message, "red")
            })
        },

        deleteUserPreferences() {
-            const functions = getFunctions(app)
-            let host = window.location.hostname
-            if (host === '127.0.0.1' || host === 'localhost') {
-                connectFunctionsEmulator(functions, host, 5001);
+            if (!this.currentPassword) {
+                this.showToast("Missing password input", "red")
+                return
            }
-            const deletePreferencesData = httpsCallable(functions, 'deletePreferences')
-            deletePreferencesData().then(() => {
-                this.FirebaseSuccessMsg = "Successfully deleted filter preferences"
-                this.displayFirebaseSuccessMsg = true
+            
+            this.authenticateUser(this.currentPassword).then(() => {
+                if (!this.reAuthSuccessful) return
+                const functions = getFunctions(app)
+                let host = window.location.hostname
+                if (host === '127.0.0.1' || host === 'localhost') {
+                    connectFunctionsEmulator(functions, host, 5001);
+                }
+                
+                const deletePreferencesData = httpsCallable(functions, 'deletePreferences')
+                deletePreferencesData().then(() => {
+                    this.resetCredentials()
+                    this.showToast("Successfully deleted filter preferences", "green")
+                })
+                .catch((error) => {
+                    this.showToast(error.message, "red")
+                })
            })
            .catch((error) => {
-                this.FirebaseError = error.message
-                this.displayFirebaseError = true
+                this.showToast(error.message, "red")
            })
        }
    }
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@ -22,15 +22,14 @@
      <a @click="forgotPassword = !forgotPassword; this.email = ''">Go back</a>
    </div>
  </div>
-
-  <p v-if="displayFirebaseError">{{ FirebaseError }}</p>
-  <p v-if="displayFirebaseSuccessMsg">{{ FirebaseSuccessMsg }}</p>
 </div>
 </template>

 <script>
 import app from '../api/firebase';
 import { getAuth, signInWithEmailAndPassword, sendPasswordResetEmail } from "firebase/auth"
+import { createToast } from 'mosha-vue-toastify';
+import 'mosha-vue-toastify/dist/style.css'
 import Navbar from '../components/Navbar.vue'
 const auth = getAuth()

@ -38,14 +37,21 @@ export default {
  name: "LoginPage",

  data() {
+    const toast = () => {
+        createToast(this.toastMessage, {
+            hideProgressBar: true,
+            timeout: 4000,
+            toastBackgroundColor: this.toastBackground
+        })
+    }
+
    return {
      email: "",
      password: "",
-      displayFirebaseError: false,
-      FirebaseError: "",
-      displayFirebaseSuccessMsg: false,
-      FirebaseSuccessMsg: "",
-      forgotPassword: false
+      toastMessage: "",
+      toastBackground: "",
+      forgotPassword: false,
+      toast
    }
  },

@ -54,29 +60,30 @@ export default {
  },

  methods: {
+    showToast(message, backgroundColour) {
+        this.toastMessage = message
+        this.toastBackground = backgroundColour
+        this.toast()
+    },
+
    login() {
-      this.displayFirebaseError = false
      const auth = getAuth(app)
-      signInWithEmailAndPassword(auth, this.email, this.password)
-      .then((userCredential) => {
-          const user = userCredential.user
-          this.$router.push({path:'/'})
+      signInWithEmailAndPassword(auth, this.email, this.password).then(() => {
+        this.showToast("Logged in successfully", "green")
+        this.$router.push({path:'/'})
      })
      .catch((error) => {
-        this.FirebaseError = error.message
-        this.displayFirebaseError = true
+        this.showToast(error.message, "red")
      })
    },

    resetPasswordEmail() {
      sendPasswordResetEmail(auth, this.email).then(() => {
-        this.FirebaseSuccessMsg = "Reset password email sent"
-        this.displayFirebaseSuccessMsg = true
+        this.showToast("Reset password email sent", "green")
        this.email = ""
      })
      .catch((error) => {
-        this.FirebaseError = error.message
-        this.displayFirebaseError = true
+        this.showToast(error.message, "red")
      })
    }
  }
--- a/src/pages/MapPage.vue
+++ b/src/pages/MapPage.vue
@ -83,6 +83,8 @@
 import { store } from '../store/store';
 import { fromLonLat } from 'ol/proj.js';
 import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions";
+import { createToast } from 'mosha-vue-toastify';
+import 'mosha-vue-toastify/dist/style.css'
 import app from '../api/firebase';
 import Navbar from '../components/Navbar.vue';
 import MarqueeText from 'vue-marquee-text-component';
@ -93,32 +95,44 @@ export default {
    name: "MapPage",

    data() {
-        return {
-            center: fromLonLat([-7.5029786, 53.4494762]),
-            projection: 'EPSG:3857',
-            zoom: 7,
-            rotation: 0,
+      const toast = () => {
+        createToast(this.toastMessage, {
+            hideProgressBar: true,
+            timeout: 4000,
+            toastBackgroundColor: this.toastBackground
+        })
+      }

-            showTrains: [],
-            showStations: [],
-            trainCoordinates: [],
-            stationCoordinates: [],
-            allTrains: {},
-            allStations: {},
-            publicMessages: [],
-            isPaused: false,
-            store,
+      return {
+          center: fromLonLat([-7.5029786, 53.4494762]),
+          projection: 'EPSG:3857',
+          zoom: 7,
+          rotation: 0,

-            showMainlandStations: true, 
-            showDARTStations: true,
-            showLate: true,
-            showOnTime: true,
-            showMainland: true,
-            showDART: true, 
-            showRunning: true, 
-            showTerminated: true, 
-            showNotYetRunning: true,
-        }
+          showTrains: [],
+          showStations: [],
+          trainCoordinates: [],
+          stationCoordinates: [],
+          allTrains: {},
+          allStations: {},
+          publicMessages: [],
+          isPaused: false,
+          store,
+
+          toastMessage: "",
+          toastBackground: "",
+          toast,
+
+          showMainlandStations: true, 
+          showDARTStations: true,
+          showLate: true,
+          showOnTime: true,
+          showMainland: true,
+          showDART: true, 
+          showRunning: true, 
+          showTerminated: true, 
+          showNotYetRunning: true,
+      }
    },

    components: {
@ -141,6 +155,12 @@ export default {
    },

    methods: {
+        showToast(message, backgroundColour) {
+          this.toastMessage = message
+          this.toastBackground = backgroundColour
+          this.toast()
+        },
+
        getPreferences() {
          if (!store.loggedIn) return
          const functions = getFunctions(app);
@ -194,10 +214,10 @@ export default {
          
          const postPreferencesData = httpsCallable(functions, 'postPreferences')
          postPreferencesData(preferences).then(() => {
-            console.log("Sent preferences successfully")
+            this.showToast("Saved preferences successfully", "green")
          })
          .catch((error) => {
-            console.log(error.message)
+            this.showToast(error.message, "red")
          })
        },

--- a/src/pages/SignUpPage.vue
+++ b/src/pages/SignUpPage.vue
@ -19,17 +19,28 @@
 <script>
 import app from '../api/firebase';
 import {getAuth, createUserWithEmailAndPassword} from "firebase/auth"
+import { createToast } from 'mosha-vue-toastify';
+import 'mosha-vue-toastify/dist/style.css'
 import Navbar from '../components/Navbar.vue'

 export default {
  name: "SignupPage",

  data() {
+    const toast = () => {
+        createToast(this.toastMessage, {
+            hideProgressBar: true,
+            timeout: 4000,
+            toastBackgroundColor: this.toastBackground
+        })
+    }
+
    return {
      email: "",
      password: "",
-      displayFirebaseError: false,
-      FirebaseError: ""
+      toastMessage: "",
+      toastBackground: "",
+      toast
    }
  },

@ -38,17 +49,21 @@ export default {
  },

  methods: {
+    showToast(message, backgroundColour) {
+        this.toastMessage = message
+        this.toastBackground = backgroundColour
+        this.toast()
+    },
+
    signup() {
      this.displayFirebaseError = false;
      const auth = getAuth(app)
-      createUserWithEmailAndPassword(auth, this.email, this.password)
-      .then((userCredential) => {
-          const user = userCredential.user
-          this.$router.push({path:'/account'})
+      createUserWithEmailAndPassword(auth, this.email, this.password).then(() => {
+          this.showToast("Signed up successfully", "green")
+          this.$router.push({path:'/'})
      })
      .catch((error) => {
-        this.FirebaseError = error.message
-        this.displayFirebaseError = true
+        this.showToast(error.message, "red")
      })
    }
  }