Add loading to button on login and register

src/components/LoginForm.vue

@@ -14,7 +14,7 @@
       dense
       type="password"
     />
-    <v-btn type="submit" color="primary" block class="mt-4">
+    <v-btn type="submit" color="primary" :loading="isLoading" block class="mt-4">
       Inloggen
     </v-btn>
   </v-form>
@@ -29,10 +29,12 @@ const auth = useFirebaseAuth();
 
 const username = ref('');
 const password = ref('');
+const isLoading = ref(false);
 
 const emit = defineEmits(['login-success']);
 
 const login = () => {
+  isLoading.value = true;
   signInWithEmailAndPassword(auth, username.value, password.value)
     .then((userCredential) => {
       console.log('User logged-in as: ' + userCredential.user.email);
@@ -62,6 +64,9 @@ const login = () => {
           console.error(`User login failed: ${code} - ${message}`);
           break;
       }
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 };
 </script>

src/components/RegisterForm.vue

@@ -25,7 +25,7 @@
       dense
       type="password"
     />
-    <v-btn type="submit" color="secondary" block class="mt-4">
+    <v-btn type="submit" color="secondary" :loading="isLoading" block class="mt-4">
       Registreren
     </v-btn>
   </v-form>
@@ -39,10 +39,12 @@ import {useFirebaseAuth, useCurrentUser} from 'vuefire'
 const auth = useFirebaseAuth();
 const username = ref('');
 const password = ref('');
+const isLoading = ref(false);
 
 const emit = defineEmits(['register-success']);
 
 const register = () => {
+  isLoading.value = true;
   createUserWithEmailAndPassword(auth, username.value, password.value)
     .then((userCredential) => {
       const currentUser = useCurrentUser();
@@ -64,6 +66,9 @@ const register = () => {
           console.error(`User creation failed: ${code} - ${message}`);
           break;
       }
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 };
 </script>

src/components/ResetPasswordAction.vue

@@ -57,7 +57,7 @@ const verifyCode = () => {
 
 const handleResetPassword = () => {
   if (newPassword.value !== confirmPassword.value) {
-    emit('error', 'De ingevoerde wachtwoorden zijn niet hetzelfde.');
+    emit('error', 'De ingevoerde wachtwoorden komen niet overeen.');
     return;
   }