web/satellite/v2: fix otp paste issue

This change fixes an issue where pasting an OTP code with extra text in the OTP field will paste all that text instead of trimming it to the required length. Non-number characters are now rejected. It also fixes an issue where signup success redirect will fail because of a malformed URL. Finally, more route cleanups are done and a minor change has been made to the MFA loading UX. Issue: #6751 Change-Id: I1bbc73e3eb476a2de022bd92ac66b3be4bd9d7fc
storj · Feb 2, 2024 · add7676 · add7676
1 parent fe9abff
commit add7676
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 15 deletions.
diff --git a/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue b/web/satellite/vuetify-poc/src/layouts/default/ProjectNav.vue
@@ -26,7 +26,7 @@
                                 <IconProject />
                             </template>
                             <v-list-item-title class="ml-3">
-                                <v-chip color="secondary" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link @click="() => registerLinkClick('/projects')">
+                                <v-chip color="secondary" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link @click="() => registerLinkClick(ROUTES.Projects.path)">
                                     My Projects
                                 </v-chip>
                             </v-list-item-title>
@@ -57,7 +57,7 @@
                                 <IconProject />
                             </template>
                             <v-list-item-title class="ml-3">
-                                <v-chip color="green" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link @click="() => registerLinkClick('/projects')">
+                                <v-chip color="green" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link @click="() => registerLinkClick(ROUTES.Projects.path)">
                                     Shared Projects
                                 </v-chip>
                             </v-list-item-title>

diff --git a/web/satellite/vuetify-poc/src/views/ActivateAccountRequest.vue b/web/satellite/vuetify-poc/src/views/ActivateAccountRequest.vue
@@ -144,7 +144,7 @@ const satellite = computed({
         const sats = configStore.state.config.partneredSatellites ?? [];
         const satellite = sats.find(sat => sat.name === value.satellite);
         if (satellite) {
-            window.location.href = satellite.address + '/forgot-password';
+            window.location.href = satellite.address + ROUTES.Activate.path;
         }
     },
 });

diff --git a/web/satellite/vuetify-poc/src/views/ForgotPassword.vue b/web/satellite/vuetify-poc/src/views/ForgotPassword.vue
@@ -143,7 +143,7 @@ const satellite = computed({
         const sats = configStore.state.config.partneredSatellites ?? [];
         const satellite = sats.find(sat => sat.name === value.satellite);
         if (satellite) {
-            window.location.href = satellite.address + '/forgot-password';
+            window.location.href = satellite.address + ROUTES.ForgotPassword.path;
         }
     },
 });

diff --git a/web/satellite/vuetify-poc/src/views/Login.vue b/web/satellite/vuetify-poc/src/views/Login.vue
@@ -120,7 +120,7 @@
                         </v-form>
                     </v-card-text>
                 </v-card>
-                <login2-f-a
+                <mfa-component
                     v-else
                     v-model="useOTP"
                     v-model:error="isMFAError"
@@ -168,7 +168,7 @@ import { ErrorTooManyRequests } from '@/api/errors/ErrorTooManyRequests';
 import { ErrorBadRequest } from '@/api/errors/ErrorBadRequest';
 import { ROUTES } from '@poc/router';
 
-import Login2FA from '@poc/views/Login2FA.vue';
+import MfaComponent from '@poc/views/MfaComponent.vue';
 import PasswordInputEyeIcons from '@poc/components/PasswordInputEyeIcons.vue';
 
 const auth = new AuthHttpApi();
@@ -235,7 +235,7 @@ const satellite = computed({
         const sats = configStore.state.config.partneredSatellites ?? [];
         const satellite = sats.find(sat => sat.name === value.satellite);
         if (satellite) {
-            window.location.href = satellite.address + '/login';
+            window.location.href = satellite.address + ROUTES.Login.path;
         }
     },
 });

diff --git a/...ellite/vuetify-poc/src/views/Login2FA.vue → ...te/vuetify-poc/src/views/MfaComponent.vue b/...ellite/vuetify-poc/src/views/Login2FA.vue → ...te/vuetify-poc/src/views/MfaComponent.vue
@@ -9,7 +9,7 @@
                 <v-otp-input
                     :model-value="otp"
                     :error="error"
-                    :loading="loading"
+                    :disabled="loading"
                     autofocus
                     class="my-2"
                     maxlength="6"
@@ -19,6 +19,7 @@
 
             <v-btn
                 :disabled="otp.length < 6"
+                :loading="loading"
                 color="primary"
                 block
                 @click="verifyCode()"
@@ -41,7 +42,7 @@
                 <v-text-field
                     :model-value="recovery"
                     :error="error"
-                    :loading="loading"
+                    :disabled="loading"
                     :rules="[RequiredRule]"
                     label="Recovery Code"
                     class="mt-5"
@@ -50,8 +51,9 @@
                     @update:modelValue="value => onValueChange(value)"
                 />
                 <v-btn
-                    color="primary"
                     :disabled="!formValid"
+                    :loading="loading"
+                    color="primary"
                     size="large"
                     block
                     @click="verifyCode()"
@@ -121,10 +123,14 @@ function verifyCode() {
 
 function onValueChange(value: string) {
     if (model.value) {
-        emit('update:otp', value);
         if (props.recovery) {
             emit('update:recovery', '');
         }
+        const val = value.slice(0, 6);
+        if (isNaN(+val)) {
+            return;
+        }
+        emit('update:otp', val);
     } else {
         emit('update:recovery', value);
         if (props.otp) {

diff --git a/web/satellite/vuetify-poc/src/views/PasswordRecovery.vue b/web/satellite/vuetify-poc/src/views/PasswordRecovery.vue
@@ -65,7 +65,7 @@
                         </v-form>
                     </v-card-text>
                 </v-card>
-                <login2-f-a
+                <mfa-component
                     v-else
                     v-model="useOTP"
                     v-model:error="isMFAError"
@@ -94,7 +94,7 @@ import { useNotify } from '@/utils/hooks';
 import { useLoading } from '@/composables/useLoading';
 import { ROUTES } from '@poc/router';
 
-import Login2FA from '@poc/views/Login2FA.vue';
+import MfaComponent from '@poc/views/MfaComponent.vue';
 import PasswordInputEyeIcons from '@poc/components/PasswordInputEyeIcons.vue';
 import PasswordStrength from '@poc/components/PasswordStrength.vue';
 

diff --git a/web/satellite/vuetify-poc/src/views/Signup.vue b/web/satellite/vuetify-poc/src/views/Signup.vue
@@ -400,7 +400,7 @@ const satellite = computed({
         const sats = configStore.state.config.partneredSatellites ?? [];
         const satellite = sats.find(sat => sat.name === value.satellite);
         if (satellite) {
-            window.location.href = satellite.address + '/signup';
+            window.location.href = satellite.address + ROUTES.Signup.path;
         }
     },
 });
@@ -516,7 +516,7 @@ async function signup(): Promise<void> {
             const nonBraveSuccessPath = `${configuredRegisterSuccessPath}?email=${encodeURIComponent(email.value)}`;
             const braveSuccessPath = `${internalRegisterSuccessPath}?email=${encodeURIComponent(email.value)}`;
 
-            const altRoute = `${window.location.origin}${configStore.optionalV2Path}/${nonBraveSuccessPath}`;
+            const altRoute = `${window.location.origin}/${nonBraveSuccessPath}`;
             await detectBraveBrowser() ? await router.push(braveSuccessPath) : window.location.href = altRoute;
         } else {
             confirmCode.value = true;