wrbapp/frontend/pages/settings/config/changepassword.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">Old Password</label>
            <input v-model="form.oldPassword" required="true" class="input  mb-5" :type="showPassword ? 'text' : 'password'">

            <label class="font-bold">New Password</label>
            <input v-model="form.newPassword" required="true" class="input  mb-5" :type="showPassword ? 'text' : 'password'">

            <label class="font-bold">Confirm New Password</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>Show Password</span>
            </div>

            <div class="w-full flex flex-wrap justify-between">
                <input :disabled="disableButtons" type="submit" value="Change Password" 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, updatePassword } from 'firebase/auth'
import { useToast } from 'vue-toastification'

definePageMeta({
    title: 'Change Password',
    key: 'back'
})

const { user, auth } = inject('firebase')

const toast = useToast()
const router = useRouter()

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(
        user.value.email,
        form.value.oldPassword
    )

    reauthenticateWithCredential(auth.value.currentUser, credential).then(() => {
        updatePassword(auth.value.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>