From 0431f5a4ee4da25313df3c92caa28ac03288a673 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Mon, 17 Jun 2024 04:52:38 -0400
Subject: [PATCH] refactor(editor): Migrate `MfaSetupModal.vue` to use script
 setup (no-changelog) (#9765)

---
 .../src/components/MfaSetupModal.vue          | 285 +++++++++---------
 1 file changed, 144 insertions(+), 141 deletions(-)

diff --git a/packages/editor-ui/src/components/MfaSetupModal.vue b/packages/editor-ui/src/components/MfaSetupModal.vue
index 0fb0781335..78c9cf7f61 100644
--- a/packages/editor-ui/src/components/MfaSetupModal.vue
+++ b/packages/editor-ui/src/components/MfaSetupModal.vue
@@ -5,11 +5,11 @@
 		max-height="640px"
 		:title="
 			!showRecoveryCodes
-				? $locale.baseText('mfa.setup.step1.title')
-				: $locale.baseText('mfa.setup.step2.title')
+				? i18.baseText('mfa.setup.step1.title')
+				: i18.baseText('mfa.setup.step2.title')
 		"
 		:event-bus="modalBus"
-		:name="MFA_SETUP_MODAL_KEY"
+		:name="MFA_SETUP_MODAL_KEY_NAME"
 		:center="true"
 		:loading="loadingQrCode"
 	>
@@ -17,21 +17,21 @@
 			<div v-if="!showRecoveryCodes" :class="[$style.container, $style.modalContent]">
 				<div :class="$style.textContainer">
 					<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>
 				</div>
 				<div>
 					<n8n-text size="medium" :bold="false">
 						<i18n-t keypath="mfa.setup.step1.instruction1.subtitle" tag="span">
 							<template #part1>
-								{{ $locale.baseText('mfa.setup.step1.instruction1.subtitle.part1') }}
+								{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part1') }}
 							</template>
 							<template #part2>
 								<a
 									:class="$style.secret"
 									data-test-id="mfa-secret-button"
 									@click="onCopySecretToClipboard"
-									>{{ $locale.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a
+									>{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a
 								>
 							</template>
 						</i18n-t>
@@ -42,7 +42,7 @@
 				</div>
 				<div :class="$style.textContainer">
 					<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>
 				</div>
 				<div :class="[$style.form, infoTextErrorMessage ? $style.error : '']">
@@ -50,7 +50,7 @@
 						size="medium"
 						:bold="false"
 						:class="$style.labelTooltip"
-						:label="$locale.baseText('mfa.setup.step1.input.label')"
+						:label="i18.baseText('mfa.setup.step1.input.label')"
 					>
 						<n8n-input
 							v-model="authenticatorCode"
@@ -70,7 +70,7 @@
 			<div v-else :class="$style.container">
 				<div>
 					<n8n-text size="medium" :bold="false">{{
-						$locale.baseText('mfa.setup.step2.description')
+						i18.baseText('mfa.setup.step2.description')
 					}}</n8n-text>
 				</div>
 				<div :class="$style.recoveryCodesContainer">
@@ -81,11 +81,11 @@
 				<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
 					<i18n-t keypath="mfa.setup.step2.infobox.description" tag="span">
 						<template #part1>
-							{{ $locale.baseText('mfa.setup.step2.infobox.description.part1') }}
+							{{ i18.baseText('mfa.setup.step2.infobox.description.part1') }}
 						</template>
 						<template #part2>
 							<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>
 						</template>
 					</i18n-t>
@@ -95,7 +95,7 @@
 						type="primary"
 						icon="download"
 						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"
 						@click="onDownloadClick"
 					/>
@@ -108,7 +108,7 @@
 					<n8n-button
 						float="right"
 						:disabled="!recoveryCodesDownloaded"
-						:label="$locale.baseText('mfa.setup.step2.button.save')"
+						:label="i18.baseText('mfa.setup.step2.button.save')"
 						size="large"
 						data-test-id="mfa-save-button"
 						@click="onSetupClick"
@@ -119,7 +119,7 @@
 				<div>
 					<n8n-button
 						float="right"
-						:label="$locale.baseText('mfa.setup.step1.button.continue')"
+						:label="i18.baseText('mfa.setup.step1.button.continue')"
 						size="large"
 						:disabled="!readyToSubmit"
 						@click="onSaveClick"
@@ -130,149 +130,152 @@
 	</Modal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Modal from './Modal.vue';
 import {
 	MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH,
 	MFA_AUTHENTICATION_TOKEN_WINDOW_EXPIRED,
 	MFA_SETUP_MODAL_KEY,
 } from '../constants';
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { useUIStore } from '@/stores/ui.store';
-import { useNDVStore } from '@/stores/ndv.store';
+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';
-export default defineComponent({
-	name: 'MfaSetupModal',
-	components: {
-		Modal,
-		QrcodeVue,
-	},
-	setup() {
-		const clipboard = useClipboard();
+import { useI18n } from '@/composables/useI18n';
 
-		return {
-			clipboard,
-			...useToast(),
-		};
-	},
-	data() {
-		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) {
-				this.infoTextErrorMessage = '';
-				return;
-			}
-			this.usersStore
-				.verifyMfaToken({ token: value })
-				.then(() => {
-					this.showRecoveryCodes = true;
-					this.authenticatorCode = value;
-				})
-				.catch(() => {
-					this.infoTextErrorMessage = this.$locale.baseText('mfa.setup.invalidCode');
-				});
-		},
-		onCopySecretToClipboard() {
-			void this.clipboard.copy(this.secret);
-			this.showToast({
-				title: this.$locale.baseText('mfa.setup.step1.toast.copyToClipboard.title'),
-				message: this.$locale.baseText('mfa.setup.step1.toast.copyToClipboard.message'),
-				type: 'success',
+// ---------------------------------------------------------------------------
+// #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 i18 = useI18n();
+const toast = useToast();
+
+// #endregion
+
+// ---------------------------------------------------------------------------
+// #region Methods
+// ---------------------------------------------------------------------------
+
+const closeDialog = () => {
+	modalBus.value.emit('close');
+};
+
+const onInput = (value: string) => {
+	if (value.length !== MFA_AUTHENTICATION_TOKEN_INPUT_MAX_LENGTH) {
+		infoTextErrorMessage.value = '';
+		return;
+	}
+	userStore
+		.verifyMfaToken({ token: value })
+		.then(() => {
+			showRecoveryCodes.value = true;
+			authenticatorCode.value = value;
+		})
+		.catch(() => {
+			infoTextErrorMessage.value = i18.baseText('mfa.setup.invalidCode');
+		});
+};
+
+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'),
 			});
-		},
-		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;
-				}
+			return;
+		}
 
-				this.showMessage({
-					type: 'error',
-					title: this.$locale.baseText('mfa.setup.step2.toast.setupFinished.error.message'),
-				});
-			}
-		},
-		async getMfaQR() {
-			try {
-				const { secret, qrCode, recoveryCodes } = await this.usersStore.getMfaQR();
-				this.qrCode = qrCode;
-				this.secret = secret;
-				this.recoveryCodes = recoveryCodes;
-			} catch (error) {
-				this.showError(error, this.$locale.baseText('settings.api.view.error'));
-			} finally {
-				this.loadingQrCode = false;
-			}
-		},
-	},
+		toast.showMessage({
+			type: 'error',
+			title: i18.baseText('mfa.setup.step2.toast.setupFinished.error.message'),
+		});
+	}
+};
+
+const getMfaQR = async () => {
+	try {
+		const response = await userStore.getMfaQR();
+		qrCode.value = response.qrCode;
+		secret.value = response.secret;
+		recoveryCodes.value = response.recoveryCodes;
+	} catch (error) {
+		toast.showError(error, i18.baseText('settings.api.view.error'));
+	} finally {
+		loadingQrCode.value = false;
+	}
+};
+
+// #endregion
+
+// ---------------------------------------------------------------------------
+// #region Lifecycle hooks
+// ---------------------------------------------------------------------------
+
+onMounted(async () => {
+	await getMfaQR();
 });
+
+// #endregion
 </script>
 
 <style module lang="scss">