Skip to content

Commit

Permalink
refactor(editor): Convert ChangePasswordModal to composition api
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomi
tomi committed Aug 9, 2024
1 parent 1869c39 commit f00ebcf
Showing 1 changed file with 95 additions and 110 deletions.
205 changes: 95 additions & 110 deletions packages/editor-ui/src/components/ChangePasswordModal.vue
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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"
Expand All @@ -28,127 +28,112 @@
</Modal>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
<script setup lang="ts">
import { ref, onMounted } from 'vue';
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({
name: 'ChangePasswordModal',
components: { Modal },
props: {
modalName: {
type: String,
},
},
setup() {
return {
...useToast(),
};
},
data() {
const config = ref<IFormInputs | null>(null);
const formBus = createEventBus();
const modalBus = createEventBus();
const password = ref('');
const loading = ref(false);
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 {
config: null as null | IFormInputs,
formBus: createEventBus(),
modalBus: createEventBus(),
password: '',
loading: false,
CHANGE_PASSWORD_MODAL_KEY,
messageKey: 'auth.changePassword.passwordsMustMatchError',
};
},
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: {
label: this.$locale.baseText('auth.newPassword'),
type: 'password',
required: true,
validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
infoText: this.$locale.baseText('auth.defaultPasswordRequirements'),
autocomplete: 'new-password',
capitalize: true,
},
},
{
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,
},
},
];
}
this.config = form;
},
methods: {
passwordsMatch(value: string | number | boolean | null | undefined) {
if (typeof value !== 'string') {
return false;
}
return false;
};
if (value !== this.password) {
return {
messageKey: 'auth.changePassword.passwordsMustMatchError',
};
}
const onInput = (e: { name: string; value: string }) => {
if (e.name === 'password') {
password.value = e.value;
}
};
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);
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;
}
};
this.showMessage({
type: 'success',
title: this.$locale.baseText('auth.changePassword.passwordUpdated'),
message: this.$locale.baseText('auth.changePassword.passwordUpdatedMessage'),
});
const onSubmitClick = () => {
formBus.emit('submit');
};
this.modalBus.emit('close');
} catch (error) {
this.showError(error, this.$locale.baseText('auth.changePassword.error'));
}
this.loading = false;
onMounted(() => {
const form: IFormInputs = [
{
name: 'currentPassword',
properties: {
label: i18n.baseText('auth.changePassword.currentPassword'),
type: 'password',
required: true,
autocomplete: 'current-password',
capitalize: true,
focusInitially: true,
},
},
onSubmitClick() {
this.formBus.emit('submit');
{
name: 'password',
properties: {
label: i18n.baseText('auth.newPassword'),
type: 'password',
required: true,
validationRules: [{ name: 'DEFAULT_PASSWORD_RULES' }],
infoText: i18n.baseText('auth.defaultPasswordRequirements'),
autocomplete: 'new-password',
capitalize: true,
},
},
},
{
name: 'password2',
properties: {
label: i18n.baseText('auth.changePassword.reenterNewPassword'),
type: 'password',
required: true,
validators: {
TWO_PASSWORDS_MATCH: {
validate: passwordsMatch,
},
},
validationRules: [{ name: 'TWO_PASSWORDS_MATCH' }],
autocomplete: 'new-password',
capitalize: true,
},
},
];
config.value = form;
});
</script>

0 comments on commit f00ebcf

Please sign in to comment.