password setting row

website/client/src/pages/settings/generalSettings.vue

@@ -17,6 +17,7 @@
         <user-name-setting />
         <user-email-setting />
         <display-name-setting />
+        <password-setting />
         <tr>
           <td colspan="3"></td>
         </tr>
@@ -54,9 +55,11 @@ import notificationsMixin from '../../mixins/notifications';
 import UserNameSetting from '@/pages/settings/inlineSettings/userNameSetting';
 import UserEmailSetting from '@/pages/settings/inlineSettings/userEmailSetting';
 import DisplayNameSetting from '@/pages/settings/inlineSettings/displayNameSetting';
+import PasswordSetting from '@/pages/settings/inlineSettings/passwordSetting';
 
 export default {
   components: {
+    PasswordSetting,
     DisplayNameSetting,
     UserEmailSetting,
     UserNameSetting,

website/client/src/pages/settings/inlineSettings/_currentPasswordInput.vue

@@ -4,7 +4,10 @@
       <div class="settings-label">
         {{ $t(customLabel ?? "password") }}
       </div>
-      <div class="forgot-password">
+      <div
+        v-if="forgotPassword"
+        class="forgot-password"
+      >
         <a
           class="edit-link"
           @click.prevent=""
@@ -20,7 +23,7 @@
         <input
           v-model="currentPassword"
           class="form-control"
-          :placeholder="$t('password')"
+          :placeholder="$t(customLabel ?? 'password')"
           type="text"
           @keyup="$emit('passwordValue', currentPassword)"
         >
@@ -30,9 +33,13 @@
 </template>
 
 <script>
+
+// TODO change the authForm.vue to accept a query param so that it switches automically to
+// "forgot password" mode
+
 export default {
   name: 'CurrentPasswordInput',
-  props: ['customLabel'],
+  props: ['customLabel', 'showForgetPassword'],
   data () {
     return {
       currentPassword: '',

website/client/src/pages/settings/inlineSettings/displayNameSetting.vue

@@ -136,11 +136,11 @@ import { mapState } from '@/libs/store';
 
 import checkIcon from '@/assets/svg/check.svg';
 import SaveCancelButtons from '@/pages/settings/inlineSettings/_saveCancelButtons';
-import { _InlineSettingMixin } from '@/pages/settings/inlineSettings/_inlineSettingMixin';
+import { InlineSettingMixin } from '@/pages/settings/inlineSettings/inlineSettingMixin';
 
 export default {
   components: { SaveCancelButtons },
-  mixins: [_InlineSettingMixin],
+  mixins: [InlineSettingMixin],
   data () {
     return {
       show: false,

website/client/src/pages/settings/inlineSettings/inlineSettingMixin.js

@@ -1,4 +1,4 @@
-export const _InlineSettingMixin = {
+export const InlineSettingMixin = {
   data () {
     return {
       show: false,

website/client/src/pages/settings/inlineSettings/passwordSetting.vue

@@ -0,0 +1,141 @@
+<template>
+  <fragment>
+    <tr
+      v-if="!show"
+    >
+      <td class="settings-label">
+        {{ $t("password") }}
+      </td>
+      <td class="settings-value">
+      </td>
+      <td class="settings-button">
+        <a
+          class="edit-link"
+          @click.prevent="show = true"
+        >
+          {{ $t('edit') }}
+        </a>
+      </td>
+    </tr>
+    <tr
+      v-if="show"
+      class="expanded"
+    >
+      <td
+        colspan="3"
+        novalidate="novalidate"
+      >
+        <div
+          v-once
+          class="dialog-title"
+        >
+          {{ $t("password") }}
+        </div>
+        <div
+          v-once
+          class="dialog-disclaimer"
+        >
+          {{ $t("changePasswordDisclaimer") }}
+        </div>
+
+        <current-password-input
+          :show-forget-password="true"
+          custom-label="currentPass"
+          @passwordValue="passwordUpdates.password = $event"
+        />
+        <current-password-input
+          custom-label="newPass"
+          @passwordValue="passwordUpdates.newPassword = $event"
+        />
+        <current-password-input
+          custom-label="confirmPass"
+          @passwordValue="passwordUpdates.confirmPassword = $event"
+        />
+
+        <save-cancel-buttons
+          @saveClicked="changePassword( passwordUpdates)"
+          @cancelClicked="resetAndClose()"
+        />
+      </td>
+    </tr>
+  </fragment>
+</template>
+
+<style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
+.input-group {
+  position: relative;
+  background: white;
+}
+
+input {
+  margin-right: 2rem;
+}
+
+.input-floating-checkmark {
+  position: absolute;
+  background: none !important;
+  right: 0.5rem;
+  top: 0.5rem;
+
+  width: 1rem;
+  height: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-group.is-valid {
+  border-color: $green-10 !important;
+}
+
+.input-group:not(.is-valid) {
+  .check-icon {
+    display: none;
+  }
+}
+
+.check-icon {
+  width: 12px;
+  height: 10px;
+  color: $green-50;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+</style>
+
+<script>
+import axios from 'axios';
+
+import SaveCancelButtons from '@/pages/settings/inlineSettings/_saveCancelButtons';
+import { InlineSettingMixin } from '@/pages/settings/inlineSettings/inlineSettingMixin';
+import CurrentPasswordInput from '@/pages/settings/inlineSettings/_currentPasswordInput';
+
+export default {
+  components: { CurrentPasswordInput, SaveCancelButtons },
+  mixins: [InlineSettingMixin],
+  data () {
+    return {
+      passwordUpdates: {},
+    };
+  },
+  methods: {
+    async changePassword (updates) {
+      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,
+      });
+    },
+  },
+};
+</script>

website/client/src/pages/settings/inlineSettings/userEmailSetting.vue

@@ -64,7 +64,10 @@
           </div>
         </div>
 
-        <current-password-input @passwordValue="updates.password = $event" />
+        <current-password-input
+          :show-forget-password="true"
+          @passwordValue="updates.password = $event"
+        />
 
         <save-cancel-buttons
           :disable-save="allowedToSave"
@@ -131,15 +134,14 @@ import { mapState } from '@/libs/store';
 
 import checkIcon from '@/assets/svg/check.svg';
 import SaveCancelButtons from '@/pages/settings/inlineSettings/_saveCancelButtons';
-import { _InlineSettingMixin } from '@/pages/settings/inlineSettings/_inlineSettingMixin';
+import { InlineSettingMixin } from '@/pages/settings/inlineSettings/inlineSettingMixin';
 import CurrentPasswordInput from '@/pages/settings/inlineSettings/_currentPasswordInput';
 
 export default {
   components: { CurrentPasswordInput, SaveCancelButtons },
-  mixins: [_InlineSettingMixin],
+  mixins: [InlineSettingMixin],
   data () {
     return {
-      show: false,
       updates: {
         newEmail: '',
         password: '',
@@ -164,9 +166,6 @@ export default {
     this.restoreEmptyEmail();
   },
   methods: {
-    resetAndClose () {
-      this.show = false;
-    },
     restoreEmptyEmail () {
       if (this.updates.newEmail.length < 1) {
         this.updates.newEmail = this.user.auth.local.email;

website/client/src/pages/settings/inlineSettings/userNameSetting.vue

@@ -136,12 +136,14 @@ import debounce from 'lodash/debounce';
 import { mapState } from '@/libs/store';
 
 import checkIcon from '@/assets/svg/check.svg';
-import { _InlineSettingMixin } from './_inlineSettingMixin';
+import { InlineSettingMixin } from './inlineSettingMixin';
 import SaveCancelButtons from '@/pages/settings/inlineSettings/_saveCancelButtons';
 
+// TODO extract usernameIssues/checks to a mixin to share between this and the authForm
+
 export default {
   components: { SaveCancelButtons },
-  mixins: [_InlineSettingMixin],
+  mixins: [InlineSettingMixin],
   data () {
     return {
       inputValue: '',

website/common/locales/en/settings.json

@@ -51,6 +51,7 @@
     "customDayStartInfo1": "Habitica checks and resets your Dailies at midnight in your own time zone each day. You can adjust when that happens past the default time here.",
     "misc": "Misc",
     "showHeader": "Show Header",
+    "currentPass": "Current Password",
     "changePass": "Change Password",
     "changeUsername": "Change Username",
     "changeEmail": "Change Email Address",
@@ -192,6 +193,7 @@
     "changeUsernameDisclaimer": "Your username is used for invitations, @mentions in chat, and messaging. It must be 1 to 20 characters, containing only letters a to z, numbers 0 to 9, hyphens, or underscores, and cannot include any inappropriate terms.",
     "changeEmailDisclaimer": "This is the email address that you use to log in to Habitica, as well as receive notifications.",
     "changeDisplayNameDisclaimer": "This is the name that will be displayed for your Avatar in Habitica.",
+    "changePasswordDisclaimer": "Password must be 8 characters or more. We recommend a strong password that you're not using elsewhere.",
     "verifyUsernameVeteranPet": "One of these Veteran Pets will be waiting for you after you've finished confirming!",
     "mentioning": "Mentioning",
     "suggestMyUsername": "Suggest my username",