mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 04:04:06 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor(editor): Convert ChangePasswordModal to composition api (no-changelog) (#10337)
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Details
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Details
Test Master / Lint (push) Blocked by required conditions
Details
Test Master / Notify Slack on failure (push) Blocked by required conditions
Details

Browse source
This commit is contained in:
Tomi Turtiainen 2024-08-09 12:00:33 +03:00 committed by GitHub
parent d720fdf324
commit c9d9245451
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 97 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

209
packages/editor-ui/src/components/ChangePasswordModal.vue
View file

@ -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">
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,
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 {
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() {
return {
...useToast(),
};
},
data() {
return {
config: null as null | IFormInputs,
formBus: createEventBus(),
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: {
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: '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,
},
},
{
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,
},
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({
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');
},
},
config.value = form;
});
</script>