web/satellite: use Enter key to Continue in account onboarding steps

It is possible to go through signup/login/account onboarding using only the keyboard. Issue: #6876 Change-Id: I671485c5529b1d35f1ded6d53de9f0f67c9aeb77
storj · Mar 28, 2024 · c9c7162 · c9c7162
1 parent 13ce43a
commit c9c7162
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 72 deletions.
diff --git a/web/satellite/src/components/dialogs/accountSetupSteps/BusinessStep.vue b/web/satellite/src/components/dialogs/accountSetupSteps/BusinessStep.vue
@@ -14,7 +14,7 @@
             </v-col>
         </v-row>
 
-        <v-form v-model="formValid">
+        <v-form v-model="formValid" @submit.prevent="setupAccount">
             <v-row justify="center">
                 <v-col cols="12" sm="6" md="5" lg="4" class="py-0">
                     <p>Fields marked with an * are required</p>
@@ -123,35 +123,35 @@
                 </v-col>
                 <v-col v-if="smAndUp" cols="12" sm="4" md="3" lg="2" />
             </v-row>
-        </v-form>
 
-        <v-row justify="center" class="mt-4">
-            <v-col cols="12" sm="5" md="4" lg="3">
-                <v-btn
-                    size="large"
-                    variant="tonal"
-                    :prepend-icon="mdiChevronLeft"
-                    color="default"
-                    :disabled="isLoading"
-                    block
-                    @click="emit('next', OnboardingStep.AccountTypeSelection)"
-                >
-                    Back
-                </v-btn>
-            </v-col>
-            <v-col cols="12" sm="5" md="4" lg="3">
-                <v-btn
-                    size="large"
-                    :append-icon="mdiChevronRight"
-                    :loading="isLoading"
-                    :disabled="!formValid"
-                    block
-                    @click="setupAccount()"
-                >
-                    Continue
-                </v-btn>
-            </v-col>
-        </v-row>
+            <v-row justify="center" class="mt-4">
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-btn
+                        size="large"
+                        variant="tonal"
+                        :prepend-icon="mdiChevronLeft"
+                        color="default"
+                        :disabled="isLoading"
+                        block
+                        @click="emit('next', OnboardingStep.AccountTypeSelection)"
+                    >
+                        Back
+                    </v-btn>
+                </v-col>
+                <v-col cols="12" sm="5" md="4" lg="3">
+                    <v-btn
+                        size="large"
+                        :append-icon="mdiChevronRight"
+                        :loading="isLoading"
+                        :disabled="!formValid"
+                        block
+                        type="submit"
+                    >
+                        Continue
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-form>
     </v-container>
 </template>
 

diff --git a/web/satellite/src/components/dialogs/accountSetupSteps/PersonalStep.vue b/web/satellite/src/components/dialogs/accountSetupSteps/PersonalStep.vue
@@ -3,20 +3,20 @@
 
 <template>
     <v-container>
-        <v-row justify="center">
-            <v-col class="text-center pt-10 pb-4">
-                <icon-personal />
-                <p class="text-overline mt-2 mb-1">
-                    Personal Account
-                </p>
-                <h2 class="pb-3">Great, almost there.</h2>
-                <p>Please complete your account information.</p>
-            </v-col>
-        </v-row>
+        <v-form v-model="formValid" @submit.prevent="setupAccount">
+            <v-row justify="center">
+                <v-col class="text-center pt-10 pb-4">
+                    <icon-personal />
+                    <p class="text-overline mt-2 mb-1">
+                        Personal Account
+                    </p>
+                    <h2 class="pb-3">Great, almost there.</h2>
+                    <p>Please complete your account information.</p>
+                </v-col>
+            </v-row>
 
-        <v-row justify="center">
-            <v-col cols="12" sm="8" md="6" lg="4">
-                <v-form v-model="formValid">
+            <v-row justify="center">
+                <v-col cols="12" sm="8" md="6" lg="4">
                     <v-text-field
                         id="Name"
                         v-model="name"
@@ -34,37 +34,37 @@
                         class="mt-2"
                         @update:model-value="(v) => analyticsStore.eventTriggered(AnalyticsEvent.USE_CASE_SELECTED, { useCase: v })"
                     />
-                </v-form>
-            </v-col>
-        </v-row>
+                </v-col>
+            </v-row>
 
-        <v-row justify="center">
-            <v-col cols="6" sm="4" md="3" lg="2">
-                <v-btn
-                    size="large"
-                    variant="tonal"
-                    :prepend-icon="mdiChevronLeft"
-                    color="default"
-                    :disabled="isLoading"
-                    block
-                    @click="emit('next', OnboardingStep.AccountTypeSelection)"
-                >
-                    Back
-                </v-btn>
-            </v-col>
-            <v-col cols="6" sm="4" md="3" lg="2">
-                <v-btn
-                    size="large"
-                    :append-icon="mdiChevronRight"
-                    :loading="isLoading"
-                    :disabled="!formValid"
-                    block
-                    @click="setupAccount()"
-                >
-                    Continue
-                </v-btn>
-            </v-col>
-        </v-row>
+            <v-row justify="center">
+                <v-col cols="6" sm="4" md="3" lg="2">
+                    <v-btn
+                        size="large"
+                        variant="tonal"
+                        :prepend-icon="mdiChevronLeft"
+                        color="default"
+                        :disabled="isLoading"
+                        block
+                        @click="emit('next', OnboardingStep.AccountTypeSelection)"
+                    >
+                        Back
+                    </v-btn>
+                </v-col>
+                <v-col cols="6" sm="4" md="3" lg="2">
+                    <v-btn
+                        size="large"
+                        :append-icon="mdiChevronRight"
+                        :loading="isLoading"
+                        :disabled="!formValid"
+                        block
+                        type="submit"
+                    >
+                        Continue
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-form>
     </v-container>
 </template>