diff --git a/website/client/src/mixins/passwordInputChecks.js b/website/client/src/mixins/passwordInputChecks.js index 677d6dea4a..0052ffa281 100644 --- a/website/client/src/mixins/passwordInputChecks.js +++ b/website/client/src/mixins/passwordInputChecks.js @@ -3,8 +3,8 @@ * * */ @@ -13,13 +13,15 @@ export const PasswordInputChecksMixin = { data () { return { mixinData: { - passwordIssues: [], + currentPasswordIssues: [], + newPasswordIssues: [], }, }; }, methods: { clearPasswordIssues () { - this.mixinData.passwordIssues.length = 0; + this.mixinData.currentPasswordIssues.length = 0; + this.mixinData.newPasswordIssues.length = 0; }, /** * @param {() => Promise} promiseCall @@ -34,8 +36,10 @@ export const PasswordInputChecksMixin = { } catch (axiosError) { const message = axiosError.response?.data?.message; - if (message === this.$t('wrongPassword')) { - this.mixinData.passwordIssues.push(message); + if ([this.$t('wrongPassword'), this.$t('missingPassword')].includes(message)) { + this.mixinData.currentPasswordIssues.push(message); + } else if ([this.$t('missingNewPassword'), this.$t('passwordIssueLength'), this.$t('passwordConfirmationMatch')].includes(message)) { + this.mixinData.newPasswordIssues.push(message); } } }, diff --git a/website/client/src/pages/settings/settingRows/deleteAccount.vue b/website/client/src/pages/settings/settingRows/deleteAccount.vue index 68eda0d2e2..9e14531d09 100644 --- a/website/client/src/pages/settings/settingRows/deleteAccount.vue +++ b/website/client/src/pages/settings/settingRows/deleteAccount.vue @@ -40,8 +40,8 @@ diff --git a/website/client/src/pages/settings/settingRows/passwordSetting.vue b/website/client/src/pages/settings/settingRows/passwordSetting.vue index fa5bf905b6..92a47130c2 100644 --- a/website/client/src/pages/settings/settingRows/passwordSetting.vue +++ b/website/client/src/pages/settings/settingRows/passwordSetting.vue @@ -41,14 +41,21 @@ v-if="hasPassword" :show-forget-password="true" custom-label="currentPass" + :is-valid="mixinData.currentPasswordIssues.length === 0" + :invalid-issues="mixinData.currentPasswordIssues" + @passwordValue="passwordUpdates.password = $event" /> @@ -117,10 +124,11 @@ import SaveCancelButtons from '../components/saveCancelButtons.vue'; import { InlineSettingMixin } from '../components/inlineSettingMixin'; import CurrentPasswordInput from '../components/currentPasswordInput.vue'; import { mapState } from '@/libs/store'; +import { PasswordInputChecksMixin } from '@/mixins/passwordInputChecks'; export default { components: { CurrentPasswordInput, SaveCancelButtons }, - mixins: [InlineSettingMixin], + mixins: [InlineSettingMixin, PasswordInputChecksMixin], data () { return { passwordUpdates: { @@ -147,27 +155,31 @@ export default { }, methods: { 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.$store.dispatch('snackbars:add', { - title: 'Habitica', - text: this.$t('passwordSuccess'), - type: 'success', - timeout: true, + this.passwordUpdates = {}; + this.$store.dispatch('snackbars:add', { + title: 'Habitica', + text: this.$t('passwordSuccess'), + type: 'success', + timeout: true, + }); }); }, async addLocalAuth () { - const localAuthData = { - password: this.passwordUpdates.newPassword, - confirmPassword: this.passwordUpdates.confirmPassword, - email: this.user.auth.local.email, - username: this.user.auth.local.username, - }; + await this.passwordInputCheckMixinTryCall(async () => { + const localAuthData = { + password: this.passwordUpdates.newPassword, + confirmPassword: this.passwordUpdates.confirmPassword, + email: this.user.auth.local.email, + username: this.user.auth.local.username, + }; - await axios.post('/api/v4/user/auth/local/register', localAuthData); - window.location.reload(); + await axios.post('/api/v4/user/auth/local/register', localAuthData); + window.location.reload(); + }); }, }, diff --git a/website/client/src/pages/settings/settingRows/resetAccount.vue b/website/client/src/pages/settings/settingRows/resetAccount.vue index df4cc39978..4daaa00c23 100644 --- a/website/client/src/pages/settings/settingRows/resetAccount.vue +++ b/website/client/src/pages/settings/settingRows/resetAccount.vue @@ -66,8 +66,8 @@