refactor(editor): Convert ChangePasswordModal to composition api (no-changelog) (#10337)

packages/editor-ui/src/components/ChangePasswordModal.vue

@@ -1,7 +1,7 @@
 <template>
 	<Modal
 		:name="CHANGE_PASSWORD_MODAL_KEY"
-		:title="$locale.baseText('auth.changePassword')"
+		:title="i18n.baseText('auth.changePassword')"
 		:center="true"
 		width="460px"
 		:event-bus="modalBus"
@@ -19,7 +19,7 @@
 		<template #footer>
 			<n8n-button
 				:loading="loading"
-				:label="$locale.baseText('auth.changePassword')"
+				:label="i18n.baseText('auth.changePassword')"
 				float="right"
 				data-test-id="change-password-button"
 				@click="onSubmitClick"
@@ -28,127 +28,112 @@
 	</Modal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
+import { ref, onMounted } from 'vue';
-
-import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
 import { useToast } from '@/composables/useToast';
+import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
 import Modal from '@/components/Modal.vue';
-import type { IFormInputs } from '@/Interface';
-import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from 'n8n-design-system/utils';
+import type { IFormInputs } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
+const config = ref<IFormInputs | null>(null);
-	name: 'ChangePasswordModal',
+const formBus = createEventBus();
-	components: { Modal },
+const modalBus = createEventBus();
-	props: {
+const password = ref('');
-		modalName: {
+const loading = ref(false);
-			type: String,
+
+const i18n = useI18n();
+const { showMessage, showError } = useToast();
+const usersStore = useUsersStore();
+
+const passwordsMatch = (value: string | number | boolean | null | undefined) => {
+	if (typeof value !== 'string') {
+		return false;
+	}
+
+	if (value !== password.value) {
+		return {
+			messageKey: 'auth.changePassword.passwordsMustMatchError',
+		};
+	}
+
+	return false;
+};
+
+const onInput = (e: { name: string; value: string }) => {
+	if (e.name === 'password') {
+		password.value = e.value;
+	}
+};
+
+const onSubmit = async (values: { currentPassword: string; password: string }) => {
+	try {
+		loading.value = true;
+		await usersStore.updateCurrentUserPassword(values);
+
+		showMessage({
+			type: 'success',
+			title: i18n.baseText('auth.changePassword.passwordUpdated'),
+			message: i18n.baseText('auth.changePassword.passwordUpdatedMessage'),
+		});
+
+		modalBus.emit('close');
+	} catch (error) {
+		showError(error, i18n.baseText('auth.changePassword.error'));
+	} finally {
+		loading.value = false;
+	}
+};
+
+const onSubmitClick = () => {
+	formBus.emit('submit');
+};
+
+onMounted(() => {
+	const form: IFormInputs = [
+		{
+			name: 'currentPassword',
+			properties: {
+				label: i18n.baseText('auth.changePassword.currentPassword'),
+				type: 'password',
+				required: true,
+				autocomplete: 'current-password',
+				capitalize: true,
+				focusInitially: true,
+			},
 		},
-	},
+		{
-	setup() {
+			name: 'password',
-		return {
+			properties: {
-			...useToast(),
+				label: i18n.baseText('auth.newPassword'),
-		};
+				type: 'password',
-	},
+				required: true,
-	data() {
+				validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
-		return {
+				infoText: i18n.baseText('auth.defaultPasswordRequirements'),
-			config: null as null | IFormInputs,
+				autocomplete: 'new-password',
-			formBus: createEventBus(),
+				capitalize: true,
-			modalBus: createEventBus(),
-			password: '',
-			loading: false,
-			CHANGE_PASSWORD_MODAL_KEY,
-		};
-	},
-	computed: {
-		...mapStores(useUsersStore),
-	},
-	mounted() {
-		const form: IFormInputs = [
-			{
-				name: 'currentPassword',
-				properties: {
-					label: this.$locale.baseText('auth.changePassword.currentPassword'),
-					type: 'password',
-					required: true,
-					autocomplete: 'current-password',
-					capitalize: true,
-					focusInitially: true,
-				},
 			},
-			{
+		},
-				name: 'password',
+		{
-				properties: {
+			name: 'password2',
-					label: this.$locale.baseText('auth.newPassword'),
+			properties: {
-					type: 'password',
+				label: i18n.baseText('auth.changePassword.reenterNewPassword'),
-					required: true,
+				type: 'password',
-					validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
+				required: true,
-					infoText: this.$locale.baseText('auth.defaultPasswordRequirements'),
+				validators: {
-					autocomplete: 'new-password',
+					TWO_PASSWORDS_MATCH: {
-					capitalize: true,
+						validate: passwordsMatch,
-				},
-			},
-			{
-				name: 'password2',
-				properties: {
-					label: this.$locale.baseText('auth.changePassword.reenterNewPassword'),
-					type: 'password',
-					required: true,
-					validators: {
-						TWO_PASSWORDS_MATCH: {
-							validate: this.passwordsMatch,
-						},
 					},
-					validationRules: [{ name: 'TWO_PASSWORDS_MATCH' }],
-					autocomplete: 'new-password',
-					capitalize: true,
 				},
+				validationRules: [{ name: 'TWO_PASSWORDS_MATCH' }],
+				autocomplete: 'new-password',
+				capitalize: true,
 			},
-		];
-
-		this.config = form;
-	},
-	methods: {
-		passwordsMatch(value: string | number | boolean | null | undefined) {
-			if (typeof value !== 'string') {
-				return false;
-			}
-
-			if (value !== this.password) {
-				return {
-					messageKey: 'auth.changePassword.passwordsMustMatchError',
-				};
-			}
-
-			return false;
 		},
-		onInput(e: { name: string; value: string }) {
+	];
-			if (e.name === 'password') {
-				this.password = e.value;
-			}
-		},
-		async onSubmit(values: { currentPassword: string; password: string }) {
-			try {
-				this.loading = true;
-				await this.usersStore.updateCurrentUserPassword(values);
 
-				this.showMessage({
+	config.value = form;
-					type: 'success',
-					title: this.$locale.baseText('auth.changePassword.passwordUpdated'),
-					message: this.$locale.baseText('auth.changePassword.passwordUpdatedMessage'),
-				});
-
-				this.modalBus.emit('close');
-			} catch (error) {
-				this.showError(error, this.$locale.baseText('auth.changePassword.error'));
-			}
-			this.loading = false;
-		},
-		onSubmitClick() {
-			this.formBus.emit('submit');
-		},
-	},
 });
 </script>