Copy+Paste code form Password/Change, DRY later

webapp/components/PasswordReset/VerifyCode.vue

@@ -1,7 +1,14 @@
 <template>
   <ds-card class="verify-code">
     <ds-space margin="large">
-      <ds-form v-if="!codeSubmitted" v-model="formData" :schema="formSchema" @submit="handleSubmit">
+      <ds-form
+        v-if="!codeSubmitted"
+        v-model="verification.formData"
+        :schema="verification.formSchema"
+        @submit="handleSubmitVerify"
+        @input="handleInput"
+        @input-valid="handleInputValid"
+      >
         <ds-input
           :placeholder="$t('verify-code.form.input')"
           model="code"
@@ -13,46 +20,111 @@
             {{ $t('verify-code.form.description') }}
           </ds-text>
         </ds-space>
-        <ds-button
-          :disabled="disabled"
-          :loading="$apollo.loading"
-          primary
-          fullwidth
-          name="submit"
-          type="submit"
-        >
+        <ds-button :disabled="disabled" primary fullwidth name="submit" type="submit">
           {{ $t('verify-code.form.submit') }}
         </ds-button>
       </ds-form>
-      <div v-else class="change-password" />
+      <ds-form
+        v-else
+        v-model="password.formData"
+        :schema="password.formSchema"
+        @submit="handleSubmitPassword"
+        @input="handleInput"
+        @input-valid="handleInputValid"
+        class="change-password"
+      >
+        <ds-input
+          id="newPassword"
+          model="newPassword"
+          type="password"
+          :label="$t('settings.security.change-password.label-new-password')"
+        />
+        <ds-input
+          id="confirmPassword"
+          model="confirmPassword"
+          type="password"
+          :label="$t('settings.security.change-password.label-new-password-confirm')"
+        />
+        <password-strength :password="password.formData.newPassword" />
+        <ds-space margin-top="base">
+          <ds-button :loading="$apollo.loading" :disabled="disabled" primary>
+            {{ $t('settings.security.change-password.button') }}
+          </ds-button>
+        </ds-space>
+      </ds-form>
     </ds-space>
   </ds-card>
 </template>
 
 <script>
-
+import PasswordStrength from '../Password/Strength'
 export default {
+  components: {
+    PasswordStrength,
+  },
   data() {
     return {
-      formData: {
-        code: '',
-      },
-      formSchema: {
-        code: {
-          type: 'string',
-          min: 6,
-          max: 6,
-          required: true,
-          message: this.$t('common.validations.verification-code'),
+      verification: {
+        formData: {
+          code: '',
+        },
+        formSchema: {
+          code: {
+            type: 'string',
+            min: 6,
+            max: 6,
+            required: true,
+            message: this.$t('common.validations.verification-code'),
+          },
         },
       },
-      codeSubmitted: false
+      password: {
+        formData: {
+          newPassword: '',
+          confirmPassword: '',
+        },
+        formSchema: {
+          newPassword: {
+            type: 'string',
+            required: true,
+            message: this.$t('settings.security.change-password.message-new-password-required'),
+          },
+          confirmPassword: [
+            { validator: this.matchPassword },
+            {
+              type: 'string',
+              required: true,
+              message: this.$t(
+                'settings.security.change-password.message-new-password-confirm-required',
+              ),
+            },
+          ],
+        },
+      },
+      codeSubmitted: false,
+      disabled: true,
     }
   },
   methods: {
-    handleSubmit(){
+    async handleInput(data) {
+      this.disabled = true
+    },
+    async handleInputValid(data) {
+      this.disabled = false
+    },
+    handleSubmitVerify() {
       this.codeSubmitted = true
-    }
-  }
+    },
+    handleSubmitPassword() {},
+    matchPassword(rule, value, callback, source, options) {
+      var errors = []
+      if (this.password.formData.newPassword !== value) {
+        errors.push(
+          new Error(this.$t('settings.security.change-password.message-new-password-missmatch')),
+        )
+      }
+      callback(errors)
+    },
+  },
 }
 </script>