From ea38b9f78e1026786758e5de2886443293394c30 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Wed, 16 Aug 2023 08:32:11 +0000
Subject: [PATCH] web/satellite/vuetify-poc: fix vuetify form reloads

This change fixes an issue where the vuetify app will reload when
"enter" is pressed in a form. It also adds a success notification on
successfully enabling 2FA.

Change-Id: I23a66122dce4f1bd2ff21a5cd6ae0f1b22be9395
---
 .../vuetify-poc/src/components/dialogs/ChangeNameDialog.vue | 2 +-
 .../src/components/dialogs/ChangePasswordDialog.vue         | 2 +-
 .../src/components/dialogs/CreateBucketDialog.vue           | 2 +-
 .../vuetify-poc/src/components/dialogs/DisableMFADialog.vue | 2 +-
 .../vuetify-poc/src/components/dialogs/EnableMFADialog.vue  | 6 +++++-
 .../dialogs/createAccessSteps/CreateNewAccessStep.vue       | 2 +-
 .../dialogs/createAccessSteps/EnterPassphraseStep.vue       | 2 +-
 web/satellite/vuetify-poc/src/views/Team.vue                | 5 +++--
 8 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
index 46affd849..7b088172f 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ChangeNameDialog.vue
@@ -29,7 +29,7 @@
 
             <v-divider />
             <v-card-item class="px-7 py-5">
-                <v-form v-model="formValid">
+                <v-form v-model="formValid" @submit.prevent="onChangeName">
                     <v-col cols="12" class="px-0">
                         <v-text-field
                             v-model="name"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue
index 6307ca933..6b5c92fd5 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ChangePasswordDialog.vue
@@ -32,7 +32,7 @@
             </v-card-item>
             <v-divider />
             <v-card-item class="px-7 py-5">
-                <v-form v-model="formValid">
+                <v-form v-model="formValid" @submit.prevent="onChangePassword">
                     <v-col cols="12" class="px-0">
                         <v-text-field
                             v-model="oldPassword"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
index dadf1c81f..188f48d04 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/CreateBucketDialog.vue
@@ -33,7 +33,7 @@
 
             <v-divider />
 
-            <v-form v-model="formValid" class="pa-8 pb-3">
+            <v-form v-model="formValid" class="pa-8 pb-3" @submit.prevent="onCreate">
                 <v-row>
                     <v-col>
                         <p>Buckets are used to store and organize your files.</p>
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue
index 21691f741..233fc13ef 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue
@@ -32,7 +32,7 @@
             </v-card-item>
             <v-divider class="mx-8" />
             <v-card-item class="px-8 pt-4 pb-0">
-                <v-form v-model="formValid" class="pt-2">
+                <v-form v-model="formValid" class="pt-2" @submit.prevent="disable">
                     <v-text-field
                         v-model="confirmCode"
                         variant="outlined"
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
index 037298790..5e74d8a90 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
@@ -56,7 +56,7 @@
                     </v-card-item>
                     <v-divider class="mx-8" />
                     <v-card-item class="px-8 pt-4 pb-0">
-                        <v-form v-model="formValid" class="pt-2">
+                        <v-form v-model="formValid" class="pt-2" @submit.prevent>
                             <v-text-field
                                 v-model="confirmPasscode"
                                 variant="outlined"
@@ -277,6 +277,10 @@ watch(confirmPasscode, () => {
 watch(innerContent, newContent => {
     if (newContent) return;
     // dialog has been closed
+    if (step.value === 2) {
+        // recovery codes/success step
+        notify.success('2FA successfully enabled');
+    }
     step.value = 0;
     confirmPasscode.value = '';
     isError.value = false;
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue
index f5ab2e1ba..b181ac8da 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/CreateNewAccessStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8">
+    <v-form ref="form" class="pa-8" @submit.prevent>
         <v-row>
             <v-col cols="12">
                 <v-text-field
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EnterPassphraseStep.vue b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EnterPassphraseStep.vue
index 407e24557..5819aa070 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EnterPassphraseStep.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/createAccessSteps/EnterPassphraseStep.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <v-form ref="form" class="pa-8">
+    <v-form ref="form" class="pa-8" @submit.prevent>
         <v-row>
             <v-col cols="12">
                 <p v-if="passphraseType === CreateAccessStep.EnterMyPassphrase">
diff --git a/web/satellite/vuetify-poc/src/views/Team.vue b/web/satellite/vuetify-poc/src/views/Team.vue
index 4f2a11751..64349bb74 100644
--- a/web/satellite/vuetify-poc/src/views/Team.vue
+++ b/web/satellite/vuetify-poc/src/views/Team.vue
@@ -56,7 +56,7 @@
 
                             <v-divider />
 
-                            <v-form v-model="valid" class="pa-7 pb-4">
+                            <v-form v-model="valid" class="pa-7 pb-4" @submit.prevent="onAddUsersClick">
                                 <v-row>
                                     <v-col>
                                         <p>Invite team members to join you in this project.</p>
@@ -163,13 +163,14 @@ const selectedProjectID = computed((): string => projectsStore.state.selectedPro
  * Tries to add users related to entered emails list to current project.
  */
 async function onAddUsersClick(): Promise<void> {
-    if (isLoading.value) return;
+    if (isLoading.value || !valid.value) return;
 
     isLoading.value = true;
 
     try {
         await pmStore.inviteMembers([email.value], selectedProjectID.value);
         notify.notify('Invites sent!');
+        email.value = '';
     } catch (error) {
         error.message = `Error adding project members. ${error.message}`;
         notify.notifyError(error, AnalyticsErrorEventSource.ADD_PROJECT_MEMBER_MODAL);