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,49 +28,75 @@
 	</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();
-	setup() {
+const usersStore = useUsersStore();
+
+const passwordsMatch = (value: string | number | boolean | null | undefined) => {
+	if (typeof value !== 'string') {
+		return false;
+	}
+
+	if (value !== password.value) {
 		return {
-			...useToast(),
+			messageKey: 'auth.changePassword.passwordsMustMatchError',
 		};
-	},
+	}
-	data() {
+
-		return {
+	return false;
-			config: null as null | IFormInputs,
-			formBus: createEventBus(),
-			modalBus: createEventBus(),
-			password: '',
-			loading: false,
-			CHANGE_PASSWORD_MODAL_KEY,
 };
-	},
+
-	computed: {
+const onInput = (e: { name: string; value: string }) => {
-		...mapStores(useUsersStore),
+	if (e.name === 'password') {
-	},
+		password.value = e.value;
-	mounted() {
+	}
+};
+
+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: this.$locale.baseText('auth.changePassword.currentPassword'),
+				label: i18n.baseText('auth.changePassword.currentPassword'),
 				type: 'password',
 				required: true,
 				autocomplete: 'current-password',
@@ -81,11 +107,11 @@ export default defineComponent({
 		{
 			name: 'password',
 			properties: {
-					label: this.$locale.baseText('auth.newPassword'),
+				label: i18n.baseText('auth.newPassword'),
 				type: 'password',
 				required: true,
 				validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
-					infoText: this.$locale.baseText('auth.defaultPasswordRequirements'),
+				infoText: i18n.baseText('auth.defaultPasswordRequirements'),
 				autocomplete: 'new-password',
 				capitalize: true,
 			},
@@ -93,12 +119,12 @@ export default defineComponent({
 		{
 			name: 'password2',
 			properties: {
-					label: this.$locale.baseText('auth.changePassword.reenterNewPassword'),
+				label: i18n.baseText('auth.changePassword.reenterNewPassword'),
 				type: 'password',
 				required: true,
 				validators: {
 					TWO_PASSWORDS_MATCH: {
-							validate: this.passwordsMatch,
+						validate: passwordsMatch,
 					},
 				},
 				validationRules: [{ name: 'TWO_PASSWORDS_MATCH' }],
@@ -108,47 +134,6 @@ export default defineComponent({
 		},
 	];
 
-		this.config = form;
+	config.value = 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({
-					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>