refactor currentPasswordInput.vue to use validatedTextInput.vue

website/client/src/components/ui/validatedTextInput.vue

@@ -1,26 +1,31 @@
 <template>
   <div>
-    <div
-      v-if="settingsLabel"
-      class="settings-label"
-    >
-      {{ $t(settingsLabel) }}
+    <div class="label-line">
+      <div
+        v-if="settingsLabel"
+        class="settings-label"
+      >
+        {{ $t(settingsLabel) }}
+      </div>
+
+      <slot name="top-right"></slot>
     </div>
+
     <div class="form-group">
       <div
         class="input-group"
         :class="{
-          'is-valid': canChangeClasses && isValid,
-          'is-invalid': canChangeClasses && !isValid
+          'is-valid': validStyle,
+          'is-invalid': invalidStyle
         }"
       >
         <input
           :value="value"
           class="form-control"
-          type="text"
+          :type="inputType"
           :class="{
-            'is-invalid input-invalid': canChangeClasses && !isValid,
-            'is-valid input-valid': canChangeClasses && isValid
+            'is-invalid input-invalid': invalidStyle,
+            'is-valid input-valid': validStyle
           }"
           :readonly="readonly"
           :aria-readonly="readonly"
@@ -58,6 +63,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    onlyShowInvalidState: {
+      type: Boolean,
+      default: false,
+    },
+    inputType: {
+      type: String,
+      default: 'text',
+    },
     readonly: {
       type: Boolean,
       default: false,
@@ -82,6 +95,12 @@ export default {
     canChangeClasses () {
       return !this.readonly && this.wasChanged;
     },
+    validStyle () {
+      return this.canChangeClasses && this.isValid && !this.onlyShowInvalidState;
+    },
+    invalidStyle () {
+      return this.canChangeClasses && !this.isValid;
+    },
   },
   methods: {
     handleChange ({ target: { value } }) {

website/client/src/pages/settings/components/currentPasswordInput.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="input-area">
-    <div class="label-line">
-      <div class="settings-label">
-        {{ $t(customLabel ?? "password") }}
-      </div>
+    <validated-text-input
+      v-model="currentPassword"
+      :settings-label="customLabel ?? 'password'"
+
+      :placeholder="$t(customLabel ?? 'password')"
+      :is-valid="isValid"
+      :invalid-issues="invalidIssues"
+      :only-show-invalid-state="true"
+      input-type="password"
+      @update:value="$emit('passwordValue', currentPassword)"
+    >
       <div
         v-if="showForgetPassword"
+        slot="top-right"
         class="forgot-password"
       >
         <router-link
@@ -15,28 +23,18 @@
           {{ $t('forgotPassword') }}
         </router-link>
       </div>
-    </div>
-    <div class="form-group">
-      <div
-        class="input-group"
-      >
-        <input
-          v-model="currentPassword"
-          class="form-control"
-          :placeholder="$t(customLabel ?? 'password')"
-          type="password"
-          @keyup="$emit('passwordValue', currentPassword)"
-        >
-      </div>
-    </div>
+    </validated-text-input>
   </div>
 </template>
 
 <script>
 
+import ValidatedTextInput from '@/components/ui/validatedTextInput.vue';
+
 export default {
   name: 'CurrentPasswordInput',
-  props: ['customLabel', 'showForgetPassword'],
+  components: { ValidatedTextInput },
+  props: ['customLabel', 'showForgetPassword', 'isValid', 'invalidIssues'],
   data () {
     return {
       currentPassword: '',
@@ -46,14 +44,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .label-line {
-    display: flex;
-  }
-
-  .settings-label {
-    flex: 1;
-  }
-
   .forgot-password {
     a {
       font-size: 12px;