Add toast notifications
This commit is contained in:
Conor McNamara
@ -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")
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user