check password inputs and mark invalid for "password change" setting
This commit is contained in:
@@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user