mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 10:31:15 +00:00
refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)
This commit is contained in:
Alex Grozav
375
packages/frontend/editor-ui/src/components/MfaSetupModal.vue
Normal file
375
packages/frontend/editor-ui/src/components/MfaSetupModal.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<script setup lang="ts">
|
||||
import Modal from './Modal.vue';
|
||||
import {
|
||||
MFA_AUTHENTICATION_CODE_INPUT_MAX_LENGTH,
|
||||
MFA_AUTHENTICATION_CODE_WINDOW_EXPIRED,
|
||||
MFA_SETUP_MODAL_KEY,
|
||||
} from '../constants';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useUsersStore } from '@/stores/users.store';
|
||||
import { mfaEventBus } from '@/event-bus';
|
||||
import { useToast } from '@/composables/useToast';
|
||||
//@ts-ignore
|
||||
import QrcodeVue from 'qrcode.vue';
|
||||
import { useClipboard } from '@/composables/useClipboard';
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// #region Reactive properties
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
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 i18n = useI18n();
|
||||
const toast = useToast();
|
||||
|
||||
// #endregion
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// #region Methods
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const closeDialog = () => {
|
||||
modalBus.value.emit('close');
|
||||
};
|
||||
|
||||
const onInput = (value: string) => {
|
||||
if (value.length !== MFA_AUTHENTICATION_CODE_INPUT_MAX_LENGTH) {
|
||||
infoTextErrorMessage.value = '';
|
||||
return;
|
||||
}
|
||||
userStore
|
||||
.verifyMfaCode({ mfaCode: value })
|
||||
.then(() => {
|
||||
showRecoveryCodes.value = true;
|
||||
authenticatorCode.value = value;
|
||||
})
|
||||
.catch(() => {
|
||||
infoTextErrorMessage.value = i18n.baseText('mfa.setup.invalidCode');
|
||||
});
|
||||
};
|
||||
|
||||
const onCopySecretToClipboard = () => {
|
||||
void clipboard.copy(secret.value);
|
||||
toast.showToast({
|
||||
title: i18n.baseText('mfa.setup.step1.toast.copyToClipboard.title'),
|
||||
message: i18n.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({ mfaCode: authenticatorCode.value });
|
||||
closeDialog();
|
||||
toast.showMessage({
|
||||
type: 'success',
|
||||
title: i18n.baseText('mfa.setup.step2.toast.setupFinished.message'),
|
||||
});
|
||||
} catch (e) {
|
||||
if (e.errorCode === MFA_AUTHENTICATION_CODE_WINDOW_EXPIRED) {
|
||||
toast.showMessage({
|
||||
type: 'error',
|
||||
title: i18n.baseText('mfa.setup.step2.toast.tokenExpired.error.message'),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toast.showMessage({
|
||||
type: 'error',
|
||||
title: i18n.baseText('mfa.setup.step2.toast.setupFinished.error.message'),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getMfaQR = async () => {
|
||||
try {
|
||||
const response = await userStore.fetchMfaQR();
|
||||
qrCode.value = response.qrCode;
|
||||
secret.value = response.secret;
|
||||
recoveryCodes.value = response.recoveryCodes;
|
||||
} catch (error) {
|
||||
toast.showError(error, i18n.baseText('settings.api.view.error'));
|
||||
} finally {
|
||||
loadingQrCode.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// #endregion
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// #region Lifecycle hooks
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
onMounted(async () => {
|
||||
await getMfaQR();
|
||||
});
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
width="460px"
|
||||
height="80%"
|
||||
max-height="640px"
|
||||
:title="
|
||||
!showRecoveryCodes
|
||||
? i18n.baseText('mfa.setup.step1.title')
|
||||
: i18n.baseText('mfa.setup.step2.title')
|
||||
"
|
||||
:event-bus="modalBus"
|
||||
:name="MFA_SETUP_MODAL_KEY_NAME"
|
||||
:center="true"
|
||||
:loading="loadingQrCode"
|
||||
>
|
||||
<template #content>
|
||||
<div v-if="!showRecoveryCodes" :class="[$style.container, $style.modalContent]">
|
||||
<div :class="$style.textContainer">
|
||||
<n8n-text size="large" color="text-dark" :bold="true">{{
|
||||
i18n.baseText('mfa.setup.step1.instruction1.title')
|
||||
}}</n8n-text>
|
||||
</div>
|
||||
<div>
|
||||
<n8n-text size="medium" :bold="false">
|
||||
<i18n-t keypath="mfa.setup.step1.instruction1.subtitle" tag="span">
|
||||
<template #part1>
|
||||
{{ i18n.baseText('mfa.setup.step1.instruction1.subtitle.part1') }}
|
||||
</template>
|
||||
<template #part2>
|
||||
<a
|
||||
:class="$style.secret"
|
||||
data-test-id="mfa-secret-button"
|
||||
@click="onCopySecretToClipboard"
|
||||
>{{ i18n.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a
|
||||
>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</n8n-text>
|
||||
</div>
|
||||
<div :class="$style.qrContainer">
|
||||
<QrcodeVue :value="qrCode" :size="150" level="H" />
|
||||
</div>
|
||||
<div :class="$style.textContainer">
|
||||
<n8n-text size="large" color="text-dark" :bold="true">{{
|
||||
i18n.baseText('mfa.setup.step1.instruction2.title')
|
||||
}}</n8n-text>
|
||||
</div>
|
||||
<div :class="[$style.form, infoTextErrorMessage ? $style.error : '']">
|
||||
<n8n-input-label
|
||||
size="medium"
|
||||
:bold="false"
|
||||
:class="$style.labelTooltip"
|
||||
:label="i18n.baseText('mfa.setup.step1.input.label')"
|
||||
>
|
||||
<n8n-input
|
||||
v-model="authenticatorCode"
|
||||
type="text"
|
||||
:maxlength="6"
|
||||
:placeholder="i18n.baseText('mfa.code.input.placeholder')"
|
||||
:required="true"
|
||||
data-test-id="mfa-token-input"
|
||||
@input="onInput"
|
||||
/>
|
||||
</n8n-input-label>
|
||||
<div :class="[$style.infoText, 'mt-4xs']">
|
||||
<span size="small" v-text="infoTextErrorMessage"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else :class="$style.container">
|
||||
<div>
|
||||
<n8n-text size="medium" :bold="false">{{
|
||||
i18n.baseText('mfa.setup.step2.description')
|
||||
}}</n8n-text>
|
||||
</div>
|
||||
<div :class="$style.recoveryCodesContainer">
|
||||
<div v-for="recoveryCode in recoveryCodes" :key="recoveryCode">
|
||||
<n8n-text size="medium">{{ recoveryCode }}</n8n-text>
|
||||
</div>
|
||||
</div>
|
||||
<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
|
||||
<i18nn-t keypath="mfa.setup.step2.infobox.description" tag="span">
|
||||
<template #part1>
|
||||
{{ i18n.baseText('mfa.setup.step2.infobox.description.part1') }}
|
||||
</template>
|
||||
<template #part2>
|
||||
<n8n-text size="small" :bold="true" :class="$style.loseAccessText">
|
||||
{{ i18n.baseText('mfa.setup.step2.infobox.description.part2') }}
|
||||
</n8n-text>
|
||||
</template>
|
||||
</i18nn-t>
|
||||
</n8n-info-tip>
|
||||
<div>
|
||||
<n8n-button
|
||||
type="primary"
|
||||
icon="download"
|
||||
float="right"
|
||||
:label="i18n.baseText('mfa.setup.step2.button.download')"
|
||||
data-test-id="mfa-recovery-codes-button"
|
||||
@click="onDownloadClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="showRecoveryCodes">
|
||||
<div>
|
||||
<n8n-button
|
||||
float="right"
|
||||
:disabled="!recoveryCodesDownloaded"
|
||||
:label="i18n.baseText('mfa.setup.step2.button.save')"
|
||||
size="large"
|
||||
data-test-id="mfa-save-button"
|
||||
@click="onSetupClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
<n8n-button
|
||||
float="right"
|
||||
:label="i18n.baseText('mfa.setup.step1.button.continue')"
|
||||
size="large"
|
||||
:disabled="!readyToSubmit"
|
||||
@click="onSaveClick"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style module lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
overflow: visible;
|
||||
margin-bottom: var(--spacing-s);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.textContainer {
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.formContainer {
|
||||
padding-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.qrContainer {
|
||||
text-align: center;
|
||||
|
||||
canvas {
|
||||
border: 4px solid var(--prim-gray-10);
|
||||
}
|
||||
}
|
||||
|
||||
.headerContainer {
|
||||
text-align: center;
|
||||
}
|
||||
.recoveryCodesContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-mfa-recovery-code-background);
|
||||
text-align: center;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: normal;
|
||||
align-content: normal;
|
||||
padding-top: var(--spacing-xs);
|
||||
padding-bottom: var(--spacing-xs);
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-2xs);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.recoveryCodesContainer span {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--spacing-m);
|
||||
color: var(--color-mfa-recovery-code-color);
|
||||
}
|
||||
|
||||
.form:first-child span {
|
||||
color: var(--color-text-base);
|
||||
font-weight: var(--font-weight-regular);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
.form input {
|
||||
width: 50%;
|
||||
height: 30px;
|
||||
}
|
||||
.secret {
|
||||
color: var(--color-primary);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.loseAccessText {
|
||||
color: var(--color-mfa-lose-access-text-color);
|
||||
}
|
||||
|
||||
.error input {
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
|
||||
.error > div > span {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-2xs);
|
||||
}
|
||||
|
||||
.modalFooter {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user