added email and password config

frontend/pages/settings/config/changeemail.vue

@@ -1,12 +1,76 @@
 <template>
-    <div>
+    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
-        Change Email
+        <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 Email',
+    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>

frontend/pages/settings/config/changepassword.vue

@@ -1,12 +1,89 @@
 <template>
-    <div>
+    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
-        Change Password
+        <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>