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">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>