check password inputs and mark invalid for "password change" setting

This commit is contained in:
negue
2023-05-30 22:41:42 +02:00
parent 4497514eeb
commit f9ff5e5c55
5 changed files with 44 additions and 28 deletions
@@ -3,8 +3,8 @@
* *
* <current-password-input * <current-password-input
* :show-forget-password="true" * :show-forget-password="true"
* :is-valid="mixinData.passwordIssues.length === 0" * :is-valid="mixinData.currentPasswordIssues.length === 0"
* :invalid-issues="mixinData.passwordIssues" * :invalid-issues="mixinData.currentPasswordIssues"
* @passwordValue="updates.password = $event" * @passwordValue="updates.password = $event"
* /> * />
*/ */
@@ -13,13 +13,15 @@ export const PasswordInputChecksMixin = {
data () { data () {
return { return {
mixinData: { mixinData: {
passwordIssues: [], currentPasswordIssues: [],
newPasswordIssues: [],
}, },
}; };
}, },
methods: { methods: {
clearPasswordIssues () { clearPasswordIssues () {
this.mixinData.passwordIssues.length = 0; this.mixinData.currentPasswordIssues.length = 0;
this.mixinData.newPasswordIssues.length = 0;
}, },
/** /**
* @param {() => Promise<void>} promiseCall * @param {() => Promise<void>} promiseCall
@@ -34,8 +36,10 @@ export const PasswordInputChecksMixin = {
} catch (axiosError) { } catch (axiosError) {
const message = axiosError.response?.data?.message; const message = axiosError.response?.data?.message;
if (message === this.$t('wrongPassword')) { if ([this.$t('wrongPassword'), this.$t('missingPassword')].includes(message)) {
this.mixinData.passwordIssues.push(message); this.mixinData.currentPasswordIssues.push(message);
} else if ([this.$t('missingNewPassword'), this.$t('passwordIssueLength'), this.$t('passwordConfirmationMatch')].includes(message)) {
this.mixinData.newPasswordIssues.push(message);
} }
} }
}, },
@@ -40,8 +40,8 @@
<current-password-input <current-password-input
v-if="hasPassword" v-if="hasPassword"
:show-forget-password="true" :show-forget-password="true"
:is-valid="mixinData.passwordIssues.length === 0" :is-valid="mixinData.currentPasswordIssues.length === 0"
:invalid-issues="mixinData.passwordIssues" :invalid-issues="mixinData.currentPasswordIssues"
@passwordValue="passwordValue = $event" @passwordValue="passwordValue = $event"
/> />
@@ -41,14 +41,21 @@
v-if="hasPassword" v-if="hasPassword"
:show-forget-password="true" :show-forget-password="true"
custom-label="currentPass" custom-label="currentPass"
:is-valid="mixinData.currentPasswordIssues.length === 0"
:invalid-issues="mixinData.currentPasswordIssues"
@passwordValue="passwordUpdates.password = $event" @passwordValue="passwordUpdates.password = $event"
/> />
<current-password-input <current-password-input
custom-label="newPass" custom-label="newPass"
:is-valid="mixinData.newPasswordIssues.length === 0"
:invalid-issues="mixinData.newPasswordIssues"
@passwordValue="passwordUpdates.newPassword = $event" @passwordValue="passwordUpdates.newPassword = $event"
/> />
<current-password-input <current-password-input
custom-label="confirmPass" custom-label="confirmPass"
:is-valid="mixinData.newPasswordIssues.length === 0"
:invalid-issues="mixinData.newPasswordIssues"
@passwordValue="passwordUpdates.confirmPassword = $event" @passwordValue="passwordUpdates.confirmPassword = $event"
/> />
@@ -117,10 +124,11 @@ import SaveCancelButtons from '../components/saveCancelButtons.vue';
import { InlineSettingMixin } from '../components/inlineSettingMixin'; import { InlineSettingMixin } from '../components/inlineSettingMixin';
import CurrentPasswordInput from '../components/currentPasswordInput.vue'; import CurrentPasswordInput from '../components/currentPasswordInput.vue';
import { mapState } from '@/libs/store'; import { mapState } from '@/libs/store';
import { PasswordInputChecksMixin } from '@/mixins/passwordInputChecks';
export default { export default {
components: { CurrentPasswordInput, SaveCancelButtons }, components: { CurrentPasswordInput, SaveCancelButtons },
mixins: [InlineSettingMixin], mixins: [InlineSettingMixin, PasswordInputChecksMixin],
data () { data () {
return { return {
passwordUpdates: { passwordUpdates: {
@@ -147,27 +155,31 @@ export default {
}, },
methods: { methods: {
async changePassword (updates) { async changePassword (updates) {
await axios.put('/api/v4/user/auth/update-password', updates); await this.passwordInputCheckMixinTryCall(async () => {
await axios.put('/api/v4/user/auth/update-password', updates);
this.passwordUpdates = {}; this.passwordUpdates = {};
this.$store.dispatch('snackbars:add', { this.$store.dispatch('snackbars:add', {
title: 'Habitica', title: 'Habitica',
text: this.$t('passwordSuccess'), text: this.$t('passwordSuccess'),
type: 'success', type: 'success',
timeout: true, timeout: true,
});
}); });
}, },
async addLocalAuth () { async addLocalAuth () {
const localAuthData = { await this.passwordInputCheckMixinTryCall(async () => {
password: this.passwordUpdates.newPassword, const localAuthData = {
confirmPassword: this.passwordUpdates.confirmPassword, password: this.passwordUpdates.newPassword,
email: this.user.auth.local.email, confirmPassword: this.passwordUpdates.confirmPassword,
username: this.user.auth.local.username, email: this.user.auth.local.email,
}; username: this.user.auth.local.username,
};
await axios.post('/api/v4/user/auth/local/register', localAuthData); await axios.post('/api/v4/user/auth/local/register', localAuthData);
window.location.reload(); window.location.reload();
});
}, },
}, },
@@ -66,8 +66,8 @@
<div class="input-area"> <div class="input-area">
<current-password-input <current-password-input
:show-forget-password="true" :show-forget-password="true"
:is-valid="mixinData.passwordIssues.length === 0" :is-valid="mixinData.currentPasswordIssues.length === 0"
:invalid-issues="mixinData.passwordIssues" :invalid-issues="mixinData.currentPasswordIssues"
@passwordValue="passwordValue = $event" @passwordValue="passwordValue = $event"
/> />
<save-cancel-buttons <save-cancel-buttons
@@ -47,8 +47,8 @@
<current-password-input <current-password-input
:show-forget-password="true" :show-forget-password="true"
:is-valid="mixinData.passwordIssues.length === 0" :is-valid="mixinData.currentPasswordIssues.length === 0"
:invalid-issues="mixinData.passwordIssues" :invalid-issues="mixinData.currentPasswordIssues"
@passwordValue="updates.password = $event" @passwordValue="updates.password = $event"
/> />