76 lines
2.5 KiB
Vue
76 lines
2.5 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
|
<form @submit.prevent="saveEmail" class="flex flex-col">
|
|
<label class="font-bold">Password</label>
|
|
<input v-model="password" required="true" class="input " :type="showPassword ? 'text' : 'password'">
|
|
|
|
<div class="mb-5 mt-1 flex items-center text-default">
|
|
<input v-model="showPassword" type="checkbox" class="mr-1 checkbox ">
|
|
<span>Show Password</span>
|
|
</div>
|
|
|
|
<label class="font-bold">New Email</label>
|
|
<input v-model="email" required="true" placeholder="user@example.com" class="input mb-5" type="email">
|
|
|
|
<div class="w-full flex flex-wrap justify-between">
|
|
<input :disabled="disableButtons" type="submit" value="Change Email" class="btn w-full sm:w-40 mb-1">
|
|
<button @click="router.back()" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reauthenticateWithCredential, EmailAuthProvider, updateEmail } from 'firebase/auth'
|
|
import { updateDoc, doc } from 'firebase/firestore'
|
|
import { useToast } from 'vue-toastification'
|
|
|
|
definePageMeta({
|
|
title: 'Change Password',
|
|
key: 'back'
|
|
})
|
|
|
|
const { user, auth, db } = inject('firebase')
|
|
|
|
const toast = useToast()
|
|
const router = useRouter()
|
|
|
|
const password = ref('')
|
|
const email = ref('')
|
|
const disableButtons = ref(false)
|
|
const showPassword = ref(false)
|
|
|
|
const saveEmail = () => {
|
|
disableButtons.value = true
|
|
|
|
const credential = EmailAuthProvider.credential(
|
|
user.value.email,
|
|
password.value
|
|
)
|
|
|
|
reauthenticateWithCredential(auth.value.currentUser, credential).then(() => {
|
|
updateEmail(auth.value.currentUser, email.value).then(async () => {
|
|
await updateDoc(doc(db, "users", user.value.uid), {
|
|
email: email.value
|
|
})
|
|
|
|
toast.success('Email is veranderd')
|
|
|
|
navigateTo('/settings')
|
|
disableButtons.value = false
|
|
}).catch((error) => {
|
|
toast.error('Error tijdens het email veranderen')
|
|
console.log(error)
|
|
disableButtons.value = false
|
|
});
|
|
}).catch((error) => {
|
|
disableButtons.value = false
|
|
|
|
if (error.code === 'auth/wrong-password') return toast.error('Wachtwoord is onjuist')
|
|
|
|
toast.error('Error tijdens het email veranderen')
|
|
|
|
console.log(error)
|
|
});
|
|
}
|
|
</script> |