mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 21:07: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

285
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);
data() { const modalBus = ref(mfaEventBus);
return { const secret = ref('');
modalBus: mfaEventBus, const qrCode = ref('');
MFA_SETUP_MODAL_KEY, const readyToSubmit = ref(false);
secret: '', const formBus = ref(mfaEventBus);
qrCode: '', const showRecoveryCodes = ref(false);
readyToSubmit: false, const recoveryCodes = ref<string[]>([]);
formBus: mfaEventBus, const recoveryCodesDownloaded = ref(false);
showRecoveryCodes: false, const authenticatorCode = ref('');
recoveryCodes: [] as string[], const infoTextErrorMessage = ref('');
recoveryCodesDownloaded: false, const loadingQrCode = ref(true);
authenticatorCode: '',
infoTextErrorMessage: '', // #endregion
loadingQrCode: true,
}; // ---------------------------------------------------------------------------
}, // #region Composable
computed: { // ---------------------------------------------------------------------------
...mapStores(useNDVStore, useUIStore, useUsersStore),
}, const clipboard = useClipboard();
async mounted() { const userStore = useUsersStore();
await this.getMfaQR(); const i18 = useI18n();
}, const toast = useToast();
methods: {
closeDialog(): void { // #endregion
this.modalBus.emit('close');
}, // ---------------------------------------------------------------------------
onInput(value: string) { // #region Methods
if (value.length !== MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH) { // ---------------------------------------------------------------------------
this.infoTextErrorMessage = '';
return; const closeDialog = () => {
} modalBus.value.emit('close');
this.usersStore };
.verifyMfaToken({ token: value })
.then(() => { const onInput = (value: string) => {
this.showRecoveryCodes = true; if (value.length !== MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH) {
this.authenticatorCode = value; infoTextErrorMessage.value = '';
}) return;
.catch(() => { }
this.infoTextErrorMessage = this.$locale.baseText('mfa.setup.invalidCode'); userStore
}); .verifyMfaToken({ token: value })
}, .then(() => {
onCopySecretToClipboard() { showRecoveryCodes.value = true;
void this.clipboard.copy(this.secret); authenticatorCode.value = value;
this.showToast({ })
title: this.$locale.baseText('mfa.setup.step1.toast.copyToClipboard.title'), .catch(() => {
message: this.$locale.baseText('mfa.setup.step1.toast.copyToClipboard.message'), infoTextErrorMessage.value = i18.baseText('mfa.setup.invalidCode');
type: 'success', });
};
const onCopySecretToClipboard = () => {
void clipboard.copy(secret.value);
toast.showToast({
title: i18.baseText('mfa.setup.step1.toast.copyToClipboard.title'),
message: i18.baseText('mfa.setup.step1.toast.copyToClipboard.message'),
type: 'success',
});
};
const onSaveClick = () => {
formBus.value.emit('submit');
};
const onDownloadClick = () => {
const filename = 'n8n-recovery-codes.txt';
const temporalElement = document.createElement('a');
temporalElement.setAttribute(
'href',
'data:text/plain;charset=utf-8,' + encodeURIComponent(recoveryCodes.value.join('\n')),
);
temporalElement.setAttribute('download', filename);
temporalElement.style.display = 'none';
document.body.appendChild(temporalElement);
temporalElement.click();
document.body.removeChild(temporalElement);
recoveryCodesDownloaded.value = true;
};
const onSetupClick = async () => {
try {
await userStore.enableMfa({ token: authenticatorCode.value });
closeDialog();
toast.showMessage({
type: 'success',
title: i18.baseText('mfa.setup.step2.toast.setupFinished.message'),
});
} catch (e) {
if (e.errorCode === MFA_AUTHENTICATION_TOKEN_WINDOW_EXPIRED) {
toast.showMessage({
type: 'error',
title: i18.baseText('mfa.setup.step2.toast.tokenExpired.error.message'),
}); });
}, return;
async onSubmit(form: { authenticatorCode: string }) { }
try {
await this.usersStore.verifyMfaToken({ token: form.authenticatorCode });
this.showRecoveryCodes = true;
this.authenticatorCode = form.authenticatorCode;
} catch (error) {
this.showError(error, this.$locale.baseText('settings.mfa.invalidAuthenticatorCode'));
}
},
onSaveClick() {
this.formBus.emit('submit');
},
onDownloadClick() {
const filename = 'n8n-recovery-codes.txt';
const temporalElement = document.createElement('a');
temporalElement.setAttribute(
'href',
'data:text/plain;charset=utf-8,' + encodeURIComponent(this.recoveryCodes.join('\n')),
);
temporalElement.setAttribute('download', filename);
temporalElement.style.display = 'none';
document.body.appendChild(temporalElement);
temporalElement.click();
document.body.removeChild(temporalElement);
this.recoveryCodesDownloaded = true;
},
async onSetupClick() {
try {
await this.usersStore.enableMfa({ token: this.authenticatorCode });
this.closeDialog();
this.showMessage({
type: 'success',
title: this.$locale.baseText('mfa.setup.step2.toast.setupFinished.message'),
});
} catch (e) {
if (e.errorCode === MFA_AUTHENTICATION_TOKEN_WINDOW_EXPIRED) {
this.showMessage({
type: 'error',
title: this.$locale.baseText('mfa.setup.step2.toast.tokenExpired.error.message'),
});
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() {
try { const getMfaQR = async () => {
const { secret, qrCode, recoveryCodes } = await this.usersStore.getMfaQR(); try {
this.qrCode = qrCode; const response = await userStore.getMfaQR();
this.secret = secret; qrCode.value = response.qrCode;
this.recoveryCodes = recoveryCodes; secret.value = response.secret;
} catch (error) { recoveryCodes.value = response.recoveryCodes;
this.showError(error, this.$locale.baseText('settings.api.view.error')); } catch (error) {
} finally { toast.showError(error, i18.baseText('settings.api.view.error'));
this.loadingQrCode = false; } finally {
} loadingQrCode.value = false;
}, }
}, };
// #endregion
// ---------------------------------------------------------------------------
// #region Lifecycle hooks
// ---------------------------------------------------------------------------
onMounted(async () => {
await getMfaQR();
}); });
// #endregion
</script> </script>
<style module lang="scss"> <style module lang="scss">