wrbapp/frontend/pages/settings/config/changeemail.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">
            <p class="mb-5 text-lg text-red-500 font-bold">Let op! Je verandert alleen het Email van de app dus <u>NIET</u> van de vereniging!</p>
            <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>