aindreas/traintracker
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #53 from 0hAodha/notifications

Browse Source 
Add toast notifications 
"there's nothing to say"
This commit is contained in:
Aindréas Ó hAodha
2023-03-16 15:49:17 +00:00
committed by GitHub
parent 92be026633 1dc78bb9ad
commit 45987bb103
6 changed files with 166 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

111
src/pages/AccountPage.vue
View File

@ -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() {
if (!this.currentPassword) {
this.showToast("Missing password input", "red")
return
}
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.FirebaseSuccessMsg = "Successfully deleted filter preferences"
this.displayFirebaseSuccessMsg = true
this.resetCredentials()
this.showToast("Successfully deleted filter preferences", "green")
})
.catch((error) => {
this.FirebaseError = error.message
this.displayFirebaseError = true
this.showToast(error.message, "red")
})
})
.catch((error) => {
this.showToast(error.message, "red")
})
}
}

43
src/pages/LoginPage.vue
View File

@ -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
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")
})
}
}

24
src/pages/MapPage.vue
View File

@ -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,6 +95,14 @@ export default {
name: "MapPage",
data() {
const toast = () => {
createToast(this.toastMessage, {
hideProgressBar: true,
timeout: 4000,
toastBackgroundColor: this.toastBackground
})
}
return {
center: fromLonLat([-7.5029786, 53.4494762]),
projection: 'EPSG:3857',
@ -109,6 +119,10 @@ export default {
isPaused: false,
store,
toastMessage: "",
toastBackground: "",
toast,
showMainlandStations: true,
showDARTStations: true,
showLate: true,
@ -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")
})
},

31
src/pages/SignUpPage.vue
View File

@ -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")
})
}
}