Xeovalyte
6fb439a754
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
88 lines
2.7 KiB
Vue
88 lines
2.7 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
|
|
<form @submit.prevent="savePassword" class="flex flex-col">
|
|
<label class="font-bold">Oud Wachtwoord</label>
|
|
<input v-model="form.oldPassword" required="true" class="input mb-5" :type="showPassword ? 'text' : 'password'">
|
|
|
|
<label class="font-bold">Nieuw Wachtwoord</label>
|
|
<input v-model="form.newPassword" required="true" class="input mb-5" :type="showPassword ? 'text' : 'password'">
|
|
|
|
<label class="font-bold">Herhaal Nieuw Wachtwoord</label>
|
|
<input v-model="form.confirmNewPassword" 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>Toon Wachtwoord</span>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-wrap justify-between">
|
|
<input :disabled="disableButtons" type="submit" value="Wijzig Wachtwoord" class="btn w-full sm:w-52 mb-1">
|
|
<button @click="router.back()" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Annuleer</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reauthenticateWithCredential, EmailAuthProvider, updatePassword } from 'firebase/auth'
|
|
import { useToast } from 'vue-toastification'
|
|
|
|
definePageMeta({
|
|
title: 'Wachtwoord Wijzigen',
|
|
key: 'back'
|
|
})
|
|
|
|
const toast = useToast()
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
const form = ref({
|
|
oldPassword: '',
|
|
newPassword: '',
|
|
confirmNewPassword: '',
|
|
})
|
|
|
|
onMounted(() => {
|
|
form.value = {
|
|
oldPassword: '',
|
|
newPassword: '',
|
|
confirmNewPassword: '',
|
|
}
|
|
})
|
|
|
|
const savePassword = () => {
|
|
if (form.value.newPassword !== form.value.confirmNewPassword) return alert ('Niewe wachtwoorden zijn niet hetzelfde')
|
|
|
|
disableButtons.value = true
|
|
|
|
const credential = EmailAuthProvider.credential(
|
|
userStore.user.email,
|
|
form.value.oldPassword
|
|
)
|
|
|
|
reauthenticateWithCredential(userStore.auth.currentUser, credential).then(() => {
|
|
updatePassword(userStore.auth.currentUser, form.value.newPassword).then(() => {
|
|
toast.success('Wachtwoord is veranderd')
|
|
|
|
navigateTo('/settings')
|
|
disableButtons.value = false
|
|
}).catch((error) => {
|
|
toast.error('Error tijdens het wachtwoord veranderen')
|
|
console.log(error)
|
|
disableButtons.value = false
|
|
});
|
|
}).catch((error) => {
|
|
disableButtons.value = false
|
|
|
|
if (error.code === 'auth/wrong-password') return toast.error('Oude wachtwoord is onjuist')
|
|
|
|
toast.error('Error tijdens het wachtwoord veranderen')
|
|
|
|
console.log(error)
|
|
});
|
|
}
|
|
|
|
const showPassword = ref(false)
|
|
const disableButtons = ref(false)
|
|
</script>
|