mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 05:17:28 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Migrate MfaSetupModal.vue to use script setup (no-changelog) (#9765)

Browse source
This commit is contained in:
Ricardo Espinoza 2024-06-17 04:52:38 -04:00 committed by GitHub
parent 21a9682862
commit 0431f5a4ee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 144 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
packages/editor-ui/src/components/MfaSetupModal.vue
View file

@ -5,11 +5,11 @@
max-height="640px" max-height="640px"
:title=" :title="
!showRecoveryCodes !showRecoveryCodes
? $locale.baseText('mfa.setup.step1.title') ? i18.baseText('mfa.setup.step1.title')
: $locale.baseText('mfa.setup.step2.title') : i18.baseText('mfa.setup.step2.title')
" "
:event-bus="modalBus" :event-bus="modalBus"
:name="MFA_SETUP_MODAL_KEY" :name="MFA_SETUP_MODAL_KEY_NAME"
:center="true" :center="true"
:loading="loadingQrCode" :loading="loadingQrCode"
> >
@ -17,21 +17,21 @@
<div v-if="!showRecoveryCodes" :class="[$style.container, $style.modalContent]"> <div v-if="!showRecoveryCodes" :class="[$style.container, $style.modalContent]">
<div :class="$style.textContainer"> <div :class="$style.textContainer">
<n8n-text size="large" color="text-dark" :bold="true">{{ <n8n-text size="large" color="text-dark" :bold="true">{{
$locale.baseText('mfa.setup.step1.instruction1.title') i18.baseText('mfa.setup.step1.instruction1.title')
}}</n8n-text> }}</n8n-text>
</div> </div>
<div> <div>
<n8n-text size="medium" :bold="false"> <n8n-text size="medium" :bold="false">
<i18n-t keypath="mfa.setup.step1.instruction1.subtitle" tag="span"> <i18n-t keypath="mfa.setup.step1.instruction1.subtitle" tag="span">
<template #part1> <template #part1>
{{ $locale.baseText('mfa.setup.step1.instruction1.subtitle.part1') }} {{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part1') }}
</template> </template>
<template #part2> <template #part2>
<a <a
:class="$style.secret" :class="$style.secret"
data-test-id="mfa-secret-button" data-test-id="mfa-secret-button"
@click="onCopySecretToClipboard" @click="onCopySecretToClipboard"
>{{ $locale.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a >{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a
> >
</template> </template>
</i18n-t> </i18n-t>
@ -42,7 +42,7 @@
</div> </div>
<div :class="$style.textContainer"> <div :class="$style.textContainer">
<n8n-text size="large" color="text-dark" :bold="true">{{ <n8n-text size="large" color="text-dark" :bold="true">{{
$locale.baseText('mfa.setup.step1.instruction2.title') i18.baseText('mfa.setup.step1.instruction2.title')
}}</n8n-text> }}</n8n-text>
</div> </div>
<div :class="[$style.form, infoTextErrorMessage ? $style.error : '']"> <div :class="[$style.form, infoTextErrorMessage ? $style.error : '']">
@ -50,7 +50,7 @@
size="medium" size="medium"
:bold="false" :bold="false"
:class="$style.labelTooltip" :class="$style.labelTooltip"
:label="$locale.baseText('mfa.setup.step1.input.label')" :label="i18.baseText('mfa.setup.step1.input.label')"
> >
<n8n-input <n8n-input
v-model="authenticatorCode" v-model="authenticatorCode"
@ -70,7 +70,7 @@
<div v-else :class="$style.container"> <div v-else :class="$style.container">
<div> <div>
<n8n-text size="medium" :bold="false">{{ <n8n-text size="medium" :bold="false">{{
$locale.baseText('mfa.setup.step2.description') i18.baseText('mfa.setup.step2.description')
}}</n8n-text> }}</n8n-text>
</div> </div>
<div :class="$style.recoveryCodesContainer"> <div :class="$style.recoveryCodesContainer">
@ -81,11 +81,11 @@
<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']"> <n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
<i18n-t keypath="mfa.setup.step2.infobox.description" tag="span"> <i18n-t keypath="mfa.setup.step2.infobox.description" tag="span">
<template #part1> <template #part1>
{{ $locale.baseText('mfa.setup.step2.infobox.description.part1') }} {{ i18.baseText('mfa.setup.step2.infobox.description.part1') }}
</template> </template>
<template #part2> <template #part2>
<n8n-text size="small" :bold="true" :class="$style.loseAccessText"> <n8n-text size="small" :bold="true" :class="$style.loseAccessText">
{{ $locale.baseText('mfa.setup.step2.infobox.description.part2') }} {{ i18.baseText('mfa.setup.step2.infobox.description.part2') }}
</n8n-text> </n8n-text>
</template> </template>
</i18n-t> </i18n-t>
@ -95,7 +95,7 @@
type="primary" type="primary"
icon="download" icon="download"
float="right" float="right"
:label="$locale.baseText('mfa.setup.step2.button.download')" :label="i18.baseText('mfa.setup.step2.button.download')"
data-test-id="mfa-recovery-codes-button" data-test-id="mfa-recovery-codes-button"
@click="onDownloadClick" @click="onDownloadClick"
/> />
@ -108,7 +108,7 @@
<n8n-button <n8n-button
float="right" float="right"
:disabled="!recoveryCodesDownloaded" :disabled="!recoveryCodesDownloaded"
:label="$locale.baseText('mfa.setup.step2.button.save')" :label="i18.baseText('mfa.setup.step2.button.save')"
size="large" size="large"
data-test-id="mfa-save-button" data-test-id="mfa-save-button"
@click="onSetupClick" @click="onSetupClick"
@ -119,7 +119,7 @@
<div> <div>
<n8n-button <n8n-button
float="right" float="right"
:label="$locale.baseText('mfa.setup.step1.button.continue')" :label="i18.baseText('mfa.setup.step1.button.continue')"
size="large" size="large"
:disabled="!readyToSubmit" :disabled="!readyToSubmit"
@click="onSaveClick" @click="onSaveClick"
@ -130,149 +130,152 @@
</Modal> </Modal>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import Modal from './Modal.vue'; import Modal from './Modal.vue';
import { import {
MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH, MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH,
MFA_AUTHENTICATION_TOKEN_WINDOW_EXPIRED, MFA_AUTHENTICATION_TOKEN_WINDOW_EXPIRED,
MFA_SETUP_MODAL_KEY, MFA_SETUP_MODAL_KEY,
} from '../constants'; } from '../constants';
import { defineComponent } from 'vue'; import { ref, onMounted } from 'vue';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui.store';
import { useNDVStore } from '@/stores/ndv.store';
import { useUsersStore } from '@/stores/users.store'; import { useUsersStore } from '@/stores/users.store';
import { mfaEventBus } from '@/event-bus'; import { mfaEventBus } from '@/event-bus';
import { useToast } from '@/composables/useToast'; import { useToast } from '@/composables/useToast';
//@ts-ignore //@ts-ignore
import QrcodeVue from 'qrcode.vue'; import QrcodeVue from 'qrcode.vue';
import { useClipboard } from '@/composables/useClipboard'; import { useClipboard } from '@/composables/useClipboard';
export default defineComponent({ import { useI18n } from '@/composables/useI18n';
name: 'MfaSetupModal',
components: {
Modal,
QrcodeVue,
},
setup() {
const clipboard = useClipboard();
return { // ---------------------------------------------------------------------------
clipboard, // #region Reactive properties
...useToast(), // ---------------------------------------------------------------------------
const MFA_SETUP_MODAL_KEY_NAME = ref(MFA_SETUP_MODAL_KEY);
const modalBus = ref(mfaEventBus);
const secret = ref('');
const qrCode = ref('');
const readyToSubmit = ref(false);
const formBus = ref(mfaEventBus);
const showRecoveryCodes = ref(false);
const recoveryCodes = ref<string[]>([]);
const recoveryCodesDownloaded = ref(false);
const authenticatorCode = ref('');
const infoTextErrorMessage = ref('');
const loadingQrCode = ref(true);
// #endregion
// ---------------------------------------------------------------------------
// #region Composable
// ---------------------------------------------------------------------------
const clipboard = useClipboard();
const userStore = useUsersStore();
const i18 = useI18n();
const toast = useToast();
// #endregion
// ---------------------------------------------------------------------------
// #region Methods
// ---------------------------------------------------------------------------
const closeDialog = () => {
modalBus.value.emit('close');
}; };
},
data() { const onInput = (value: string) => {
return {
modalBus: mfaEventBus,
MFA_SETUP_MODAL_KEY,
secret: '',
qrCode: '',
readyToSubmit: false,
formBus: mfaEventBus,
showRecoveryCodes: false,
recoveryCodes: [] as string[],
recoveryCodesDownloaded: false,
authenticatorCode: '',
infoTextErrorMessage: '',
loadingQrCode: true,
};
},
computed: {
...mapStores(useNDVStore, useUIStore, useUsersStore),
},
async mounted() {
await this.getMfaQR();
},
methods: {
closeDialog(): void {
this.modalBus.emit('close');
},
onInput(value: string) {
if (value.length !== MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH) { if (value.length !== MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH) {
this.infoTextErrorMessage = ''; infoTextErrorMessage.value = '';
return; return;
} }
this.usersStore userStore
.verifyMfaToken({ token: value }) .verifyMfaToken({ token: value })
.then(() => { .then(() => {
this.showRecoveryCodes = true; showRecoveryCodes.value = true;
this.authenticatorCode = value; authenticatorCode.value = value;
}) })
.catch(() => { .catch(() => {
this.infoTextErrorMessage = this.$locale.baseText('mfa.setup.invalidCode'); infoTextErrorMessage.value = i18.baseText('mfa.setup.invalidCode');
}); });
}, };
onCopySecretToClipboard() {
void this.clipboard.copy(this.secret); const onCopySecretToClipboard = () => {
this.showToast({ void clipboard.copy(secret.value);
title: this.$locale.baseText('mfa.setup.step1.toast.copyToClipboard.title'), toast.showToast({
message: this.$locale.baseText('mfa.setup.step1.toast.copyToClipboard.message'), title: i18.baseText('mfa.setup.step1.toast.copyToClipboard.title'),
message: i18.baseText('mfa.setup.step1.toast.copyToClipboard.message'),
type: 'success', type: 'success',
}); });
}, };
async onSubmit(form: { authenticatorCode: string }) {
try { const onSaveClick = () => {
await this.usersStore.verifyMfaToken({ token: form.authenticatorCode }); formBus.value.emit('submit');
this.showRecoveryCodes = true; };
this.authenticatorCode = form.authenticatorCode;
} catch (error) { const onDownloadClick = () => {
this.showError(error, this.$locale.baseText('settings.mfa.invalidAuthenticatorCode'));
}
},
onSaveClick() {
this.formBus.emit('submit');
},
onDownloadClick() {
const filename = 'n8n-recovery-codes.txt'; const filename = 'n8n-recovery-codes.txt';
const temporalElement = document.createElement('a'); const temporalElement = document.createElement('a');
temporalElement.setAttribute( temporalElement.setAttribute(
'href', 'href',
'data:text/plain;charset=utf-8,' + encodeURIComponent(this.recoveryCodes.join('\n')), 'data:text/plain;charset=utf-8,' + encodeURIComponent(recoveryCodes.value.join('\n')),
); );
temporalElement.setAttribute('download', filename); temporalElement.setAttribute('download', filename);
temporalElement.style.display = 'none'; temporalElement.style.display = 'none';
document.body.appendChild(temporalElement); document.body.appendChild(temporalElement);
temporalElement.click(); temporalElement.click();
document.body.removeChild(temporalElement); document.body.removeChild(temporalElement);
this.recoveryCodesDownloaded = true; recoveryCodesDownloaded.value = true;
}, };
async onSetupClick() {
const onSetupClick = async () => {
try { try {
await this.usersStore.enableMfa({ token: this.authenticatorCode }); await userStore.enableMfa({ token: authenticatorCode.value });
this.closeDialog(); closeDialog();
this.showMessage({ toast.showMessage({
type: 'success', type: 'success',
title: this.$locale.baseText('mfa.setup.step2.toast.setupFinished.message'), title: i18.baseText('mfa.setup.step2.toast.setupFinished.message'),
}); });
} catch (e) { } catch (e) {
if (e.errorCode === MFA_AUTHENTICATION_TOKEN_WINDOW_EXPIRED) { if (e.errorCode === MFA_AUTHENTICATION_TOKEN_WINDOW_EXPIRED) {
this.showMessage({ toast.showMessage({
type: 'error', type: 'error',
title: this.$locale.baseText('mfa.setup.step2.toast.tokenExpired.error.message'), title: i18.baseText('mfa.setup.step2.toast.tokenExpired.error.message'),
}); });
return; return;
} }
this.showMessage({ toast.showMessage({
type: 'error', type: 'error',
title: this.$locale.baseText('mfa.setup.step2.toast.setupFinished.error.message'), title: i18.baseText('mfa.setup.step2.toast.setupFinished.error.message'),
}); });
} }
}, };
async getMfaQR() {
const getMfaQR = async () => {
try { try {
const { secret, qrCode, recoveryCodes } = await this.usersStore.getMfaQR(); const response = await userStore.getMfaQR();
this.qrCode = qrCode; qrCode.value = response.qrCode;
this.secret = secret; secret.value = response.secret;
this.recoveryCodes = recoveryCodes; recoveryCodes.value = response.recoveryCodes;
} catch (error) { } catch (error) {
this.showError(error, this.$locale.baseText('settings.api.view.error')); toast.showError(error, i18.baseText('settings.api.view.error'));
} finally { } finally {
this.loadingQrCode = false; loadingQrCode.value = false;
} }
}, };
},
// #endregion
// ---------------------------------------------------------------------------
// #region Lifecycle hooks
// ---------------------------------------------------------------------------
onMounted(async () => {
await getMfaQR();
}); });
// #endregion
</script> </script>
<style module lang="scss"> <style module lang="scss">