web/satellite/vuetify: add disable MFA dialog

Added disable MFA dialog and functionality.

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

Change-Id: I24cf863b2a04cc147894ab0640e1e1491acc430d
This commit is contained in:
Wilfred Asomani 2023-08-01 15:13:18 +00:00 committed by Storj Robot
parent 185ebe3dcf
commit 00531fe2b0
3 changed files with 209 additions and 9 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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);
/**