component for password confirmation

frontend/src/components/Inputs/InputPasswordConfirmation.spec.js

@@ -0,0 +1,79 @@
+import { mount } from '@vue/test-utils'
+import { extend } from 'vee-validate'
+
+import InputPasswordConfirmation from './InputPasswordConfirmation'
+
+const rules = [
+  'containsLowercaseCharacter',
+  'containsUppercaseCharacter',
+  'containsNumericCharacter',
+  'atLeastEightCharactera',
+  'samePassword',
+]
+
+rules.forEach((rule) => {
+  extend(rule, {
+    validate(value) {
+      return true
+    },
+  })
+})
+
+const localVue = global.localVue
+
+describe('InputPasswordConfirmation', () => {
+  let wrapper
+
+  const propsData = {
+    value: {
+      password: '',
+      passwordRepeat: '',
+    },
+  }
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+  }
+
+  const Wrapper = () => {
+    return mount(InputPasswordConfirmation, { localVue, propsData, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has two input fields', () => {
+      expect(wrapper.findAll('input')).toHaveLength(2)
+    })
+
+    describe('input values ', () => {
+      it('emits input with new value for first input field', async () => {
+        await wrapper.findAll('input').at(0).setValue('1234')
+        expect(wrapper.emitted('input')).toBeTruthy()
+        expect(wrapper.emitted('input')).toEqual([
+          [
+            {
+              password: '1234',
+              passwordRepeat: '',
+            },
+          ],
+        ])
+      })
+
+      it('emits input with new value for second input field', async () => {
+        await wrapper.findAll('input').at(1).setValue('1234')
+        expect(wrapper.emitted('input')).toBeTruthy()
+        expect(wrapper.emitted('input')).toEqual([
+          [
+            {
+              password: '',
+              passwordRepeat: '1234',
+            },
+          ],
+        ])
+      })
+    })
+  })
+})

frontend/src/components/Inputs/InputPasswordConfirmation.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <b-row class="mb-2">
+      <b-col>
+        <input-password
+          :rules="{
+            required: true,
+            containsLowercaseCharacter: true,
+            containsUppercaseCharacter: true,
+            containsNumericCharacter: true,
+            atLeastEightCharactera: true,
+          }"
+          :label="$t('form.password_new')"
+          :showAllErrors="true"
+          :immediate="true"
+          :name="$t('form.password_new')"
+          :placeholder="$t('form.password_new')"
+          v-model="password"
+        ></input-password>
+      </b-col>
+    </b-row>
+    <b-row class="mb-2">
+      <b-col>
+        <input-password
+          :rules="{ samePassword: value.password }"
+          :label="$t('form.password_new_repeat')"
+          :placeholder="$t('form.password_new_repeat')"
+          v-model="passwordRepeat"
+        ></input-password>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import InputPassword from './InputPassword'
+
+export default {
+  name: 'InputPasswordConfirm',
+  components: {
+    InputPassword,
+  },
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      password: '',
+      passwordRepeat: '',
+    }
+  },
+  computed: {
+    passwordObject() {
+      return { password: this.password, passwordRepeat: this.passwordRepeat }
+    },
+  },
+  watch: {
+    password() {
+      this.$emit('input', this.passwordObject)
+    },
+    passwordRepeat() {
+      this.$emit('input', this.passwordObject)
+    },
+  },
+}
+</script>

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue

@@ -28,36 +28,8 @@
                 ></input-password>
               </b-col>
             </b-row>
-            <b-row class="mb-2">
+            <input-password-confirmation v-model="form.newPassword" />
-              <b-col>
+            <b-row class="text-right">
-                <input-password
-                  :rules="{
-                    required: true,
-                    containsLowercaseCharacter: true,
-                    containsUppercaseCharacter: true,
-                    containsNumericCharacter: true,
-                    atLeastEightCharactera: true,
-                  }"
-                  :label="$t('form.password_new')"
-                  :showAllErrors="true"
-                  :immediate="true"
-                  :name="$t('form.password_new')"
-                  :placeholder="$t('form.password_new')"
-                  v-model="form.passwordNew"
-                ></input-password>
-              </b-col>
-            </b-row>
-            <b-row class="mb-2">
-              <b-col>
-                <input-password
-                  :rules="{ samePassword: form.passwordNew }"
-                  :label="$t('form.password_new_repeat')"
-                  :placeholder="$t('form.password_new_repeat')"
-                  v-model="form.passwordNewRepeat"
-                ></input-password>
-              </b-col>
-            </b-row>
-            <b-row class="text-right" v-if="editPassword">
               <b-col>
                 <div class="text-right">
                   <b-button type="submit" variant="primary" class="mt-4">
@@ -75,11 +47,13 @@
 <script>
 import loginAPI from '../../../apis/loginAPI'
 import InputPassword from '../../../components/Inputs/InputPassword'
+import InputPasswordConfirmation from '../../../components/Inputs/InputPasswordConfirmation'
 
 export default {
   name: 'FormUserPasswort',
   components: {
     InputPassword,
+    InputPasswordConfirmation,
   },
   data() {
     return {
@@ -87,8 +61,10 @@ export default {
       email: null,
       form: {
         password: '',
-        passwordNew: '',
+        newPassword: {
-        passwordNewRepeat: '',
+          password: '',
+          passwordRepeat: '',
+        },
       },
     }
   },
@@ -104,7 +80,7 @@ export default {
         this.$store.state.sessionId,
         this.$store.state.email,
         this.form.password,
-        this.form.passwordNew,
+        this.form.newPassword.password,
       )
       if (result.success) {
         this.$toast.success(this.$t('site.thx.reset'))