From 00531fe2b07efa77417d77a0d1bf3fbfcc81b961 Mon Sep 17 00:00:00 2001
From: Wilfred Asomani <devwilfredagyei@gmail.com>
Date: Tue, 1 Aug 2023 15:13:18 +0000
Subject: [PATCH] web/satellite/vuetify: add disable MFA dialog

Added disable MFA dialog and functionality.

Issue: https://github.com/storj/storj/issues/6091

Change-Id: I24cf863b2a04cc147894ab0640e1e1491acc430d
---
 .../components/dialogs/DisableMFADialog.vue   | 198 ++++++++++++++++++
 .../components/dialogs/EnableMFADialog.vue    |  12 +-
 .../vuetify-poc/src/views/AccountSettings.vue |   8 +-
 3 files changed, 209 insertions(+), 9 deletions(-)
 create mode 100644 web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue

diff --git a/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue
new file mode 100644
index 000000000..d939f8867
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/DisableMFADialog.vue
@@ -0,0 +1,198 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <v-dialog
+        v-model="model"
+        width="auto"
+        min-width="320px"
+        max-width="460px"
+        transition="fade-transition"
+    >
+        <v-card ref="innerContent" rounded="xlg">
+            <v-card-item class="pl-7 pr-0 pb-5 pt-0">
+                <v-row align="start" justify="space-between" class="ma-0">
+                    <v-row align="center" class="ma-0 pt-5">
+                        <img class="flex-shrink-0" src="@poc/assets/icon-mfa.svg" alt="Change password">
+                        <v-card-title class="font-weight-bold ml-4">Disable Two-Factor</v-card-title>
+                    </v-row>
+                    <v-btn
+                        icon="$close"
+                        variant="text"
+                        size="small"
+                        color="default"
+                        :disabled="isLoading"
+                        @click="model = false"
+                    />
+                </v-row>
+            </v-card-item>
+            <v-divider class="mx-8" />
+            <v-card-item class="px-8 py-4">
+                <p>Enter the authentication code generated in your two-factor application to disable 2FA.</p>
+            </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-1" :onsubmit="disable">
+                    <v-text-field
+                        v-model="confirmCode"
+                        variant="outlined"
+                        density="compact"
+                        :hint="useRecoveryCode ? '' : 'e.g.: 000000'"
+                        :rules="rules"
+                        :error-messages="isError ? 'Invalid code. Please re-enter.' : ''"
+                        :label="useRecoveryCode ? 'Recovery code' : '2FA Code'"
+                        required
+                        autofocus
+                    />
+                </v-form>
+            </v-card-item>
+            <v-card-item class="px-8 py-0">
+                <a class="text-decoration-underline" style="cursor: pointer;" @click="toggleRecoveryCodeState">
+                    {{ useRecoveryCode ? "or use 2FA code" : "or use a recovery code" }}
+                </a>
+            </v-card-item>
+            <v-divider class="mx-8 my-4" />
+            <v-card-actions dense class="px-7 pb-5 pt-0">
+                <v-col class="pl-0">
+                    <v-btn
+                        variant="outlined"
+                        color="default"
+                        block
+                        :disabled="isLoading"
+                        :loading="isLoading"
+                        @click="model = false"
+                    >
+                        Cancel
+                    </v-btn>
+                </v-col>
+                <v-col class="px-0">
+                    <v-btn
+                        color="primary"
+                        variant="flat"
+                        block
+                        :loading="isLoading"
+                        :disabled="!formValid"
+                        @click="disable"
+                    >
+                        Disable
+                    </v-btn>
+                </v-col>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { Component, computed, ref, watch } from 'vue';
+import {
+    VBtn,
+    VCard,
+    VCardActions,
+    VCardItem,
+    VCardTitle,
+    VCol,
+    VDialog,
+    VDivider,
+    VForm,
+    VRow,
+    VTextField,
+} from 'vuetify/components';
+
+import { useLoading } from '@/composables/useLoading';
+import { useConfigStore } from '@/store/modules/configStore';
+import { useUsersStore } from '@/store/modules/usersStore';
+import { DisableMFARequest } from '@/types/users';
+import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
+import { useNotify } from '@/utils/hooks';
+
+const { config } = useConfigStore().state;
+const usersStore = useUsersStore();
+const { isLoading, withLoading } = useLoading();
+const notify = useNotify();
+
+const innerContent = ref<Component | null>(null);
+
+const props = defineProps<{
+    modelValue: boolean,
+}>();
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean): void,
+}>();
+
+const confirmCode = ref<string>('');
+const isError = ref<boolean>(false);
+const useRecoveryCode = ref<boolean>(false);
+const formValid = ref<boolean>(false);
+
+const model = computed<boolean>({
+    get: () => props.modelValue,
+    set: value => emit('update:modelValue', value),
+});
+
+/**
+ * Returns validation rules based on whether recovery
+ * code input is being used.
+ */
+const rules = computed(() => {
+    if (useRecoveryCode.value) {
+        return [
+            (value: string) => (!!value || 'Can\'t be empty'),
+        ];
+    }
+    return [
+        (value: string) => (!!value || 'Can\'t be empty'),
+        (value: string) => (!value.includes(' ') || 'Can\'t contain spaces'),
+        (value: string) => (!!parseInt(value) || 'Can only be numbers'),
+        (value: string) => (value.length === 6 || 'Can only be 6 numbers long'),
+    ];
+});
+
+/**
+ * Toggles whether the MFA recovery code input is shown.
+ */
+function toggleRecoveryCodeState(): void {
+    isError.value = false;
+    confirmCode.value = '';
+    useRecoveryCode.value = !useRecoveryCode.value;
+}
+
+/**
+ * Disables user MFA.
+ */
+function disable(): void {
+    if (!formValid.value) return;
+
+    const request = new DisableMFARequest();
+    if (useRecoveryCode.value) {
+        request.recoveryCode = confirmCode.value;
+    } else {
+        request.passcode = confirmCode.value;
+    }
+
+    withLoading(async () => {
+        try {
+            await usersStore.disableUserMFA(request);
+            await usersStore.getUser();
+
+            notify.success('MFA was disabled successfully');
+            model.value = false;
+        } catch (error) {
+            notify.notifyError(error, AnalyticsErrorEventSource.DISABLE_MFA_MODAL);
+            isError.value = true;
+        }
+    });
+}
+
+watch(confirmCode, () => {
+    isError.value = false;
+});
+
+watch(innerContent, newContent => {
+    if (newContent) return;
+    // dialog has been closed
+    isError.value = false;
+    confirmCode.value = '';
+    useRecoveryCode.value = false;
+});
+</script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
index c0ecdf843..07613e4da 100644
--- a/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EnableMFADialog.vue
@@ -22,7 +22,7 @@
                         size="small"
                         color="default"
                         :disabled="isLoading"
-                        @click="closeDialog"
+                        @click="model = false"
                     />
                 </v-row>
             </v-card-item>
@@ -97,7 +97,7 @@
                         block
                         :disabled="isLoading"
                         :loading="isLoading"
-                        @click="closeDialog"
+                        @click="model = false"
                     >
                         Cancel
                     </v-btn>
@@ -130,7 +130,7 @@
                         color="primary"
                         variant="flat"
                         block
-                        @click="closeDialog"
+                        @click="model = false"
                     >
                         Done
                     </v-btn>
@@ -260,11 +260,6 @@ async function showCodes() {
     }
 }
 
-function closeDialog() {
-    model.value = false;
-    isError.value = false;
-}
-
 watch(canvas, async val => {
     if (!val) return;
     try {
@@ -283,5 +278,6 @@ watch(innerContent, newContent => {
     // dialog has been closed
     step.value = 0;
     confirmPasscode.value = '';
+    isError.value = false;
 });
 </script>
\ No newline at end of file
diff --git a/web/satellite/vuetify-poc/src/views/AccountSettings.vue b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
index 6b1e1e137..d5440be11 100644
--- a/web/satellite/vuetify-poc/src/views/AccountSettings.vue
+++ b/web/satellite/vuetify-poc/src/views/AccountSettings.vue
@@ -88,7 +88,7 @@
                     <template #append>
                         <v-list-item-action>
                             <v-btn v-if="!user.isMFAEnabled" size="small" @click="toggleEnableMFADialog">Enable Two-factor</v-btn>
-                            <v-btn v-else variant="outlined" color="default" size="small">Disable Two-factor</v-btn>
+                            <v-btn v-else variant="outlined" color="default" size="small" @click="isDisableMFADialogShown = true">Disable Two-factor</v-btn>
                         </v-list-item-action>
                     </template>
                 </v-list-item>
@@ -152,6 +152,10 @@
         v-model="isEnableMFADialogShown"
     />
 
+    <DisableMFADialog
+        v-model="isDisableMFADialogShown"
+    />
+
     <SetSessionTimeoutDialog
         v-model="isSetSessionTimeoutDialogShown"
     />
@@ -182,6 +186,7 @@ import { Duration } from '@/utils/time';
 import ChangePasswordDialog from '@poc/components/dialogs/ChangePasswordDialog.vue';
 import ChangeNameDialog from '@poc/components/dialogs/ChangeNameDialog.vue';
 import EnableMFADialog from '@poc/components/dialogs/EnableMFADialog.vue';
+import DisableMFADialog from '@poc/components/dialogs/DisableMFADialog.vue';
 import SetSessionTimeoutDialog from '@poc/components/dialogs/SetSessionTimeoutDialog.vue';
 
 const usersStore = useUsersStore();
@@ -190,6 +195,7 @@ const notify = useNotify();
 const isChangePasswordDialogShown = ref<boolean>(false);
 const isChangeNameDialogShown = ref<boolean>(false);
 const isEnableMFADialogShown = ref<boolean>(false);
+const isDisableMFADialogShown = ref<boolean>(false);
 const isSetSessionTimeoutDialogShown = ref<boolean>(false);
 
 /**