use paddword confirmation component

frontend/src/components/Inputs/InputPasswordConfirmation.vue

@@ -13,7 +13,7 @@
           :label="$t('form.password_new')"
           :showAllErrors="true"
           :immediate="true"
-          :name="$t('form.password_new')"
+          :name="createId($t('form.password_new'))"
           :placeholder="$t('form.password_new')"
           v-model="password"
         ></input-password>
@@ -24,6 +24,7 @@
         <input-password
           :rules="{ samePassword: value.password }"
           :label="$t('form.password_new_repeat')"
+          :name="createId($t('form.password_new_repeat'))"
           :placeholder="$t('form.password_new_repeat')"
           v-model="passwordRepeat"
         ></input-password>
@@ -51,6 +52,11 @@ export default {
       passwordRepeat: '',
     }
   },
+  methods: {
+    createId(text) {
+      return text.replace(/ +/g, '-')
+    },
+  },
   computed: {
     passwordObject() {
       return { password: this.password, passwordRepeat: this.passwordRepeat }

frontend/src/views/Pages/Register.spec.js

@@ -65,11 +65,11 @@ describe('Register', () => {
       })
 
       it('has password input fields', () => {
-        expect(wrapper.find('#registerPassword').exists()).toBeTruthy()
+        expect(wrapper.find('input[name="form.password_new"]').exists()).toBeTruthy()
       })
 
       it('has password repeat input fields', () => {
-        expect(wrapper.find('#registerPasswordRepeat').exists()).toBeTruthy()
+        expect(wrapper.find('input[name="form.password_new_repeat"]').exists()).toBeTruthy()
       })
 
       it('has 1 checkbox input fields', () => {
@@ -103,33 +103,8 @@ describe('Register', () => {
           'validations.messages.required',
         )
       })
-
-      /**
-       * it('shows a warning when no valid Email is entered', async () => {
-        wrapper.find('#registerEmail').setValue('no_valid@Email')
-        await flushPromises()
-        await expect(wrapper.find('#registerEmailLiveFeedback').text()).toEqual(
-          'validations.messages.email',
-        )
-      })
-      */
-
-      it('shows 4 warnings when no password is set', async () => {
-        const passwords = wrapper.findAll('input[type="password"]')
-        passwords.at(0).setValue('')
-        passwords.at(1).setValue('')
-        await flushPromises()
-        await expect(wrapper.find('div.hints').text()).toContain(
-          'site.signup.lowercase',
-          'site.signup.uppercase',
-          'site.signup.minimum',
-          'site.signup.one_number',
-        )
-      })
-
-      // TODO test different invalid password combinations
     })
 
-    // TODO test submit button
+    // To Do: Test lines 156-197,210-213
   })
 })

frontend/src/views/Pages/Register.vue

@@ -79,24 +79,8 @@
                   <input-email v-model="form.email" id="registerEmail"></input-email>
 
                   <hr />
-                  <input-password v-model="form.password" id="registerPassword" />
-                  <input-password v-model="form.passwordRepeat" id="registerPasswordRepeat" />
+                  <input-password-confirmation v-model="form.password" />
 
-                  <transition name="hint" appear>
-                    <div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
-                      <ul>
-                        <li v-for="error in passwordValidation.errors" :key="error">
-                          <small>{{ error }}</small>
-                        </li>
-                      </ul>
-                    </div>
-                    <div class="matches" v-else-if="!samePasswords">
-                      <p>
-                        {{ $t('site.signup.dont_match') }}
-                        <i class="ni ni-active-40" color="danger"></i>
-                      </p>
-                    </div>
-                  </transition>
                   <b-row class="my-4">
                     <b-col cols="12">
                       <b-form-checkbox
@@ -122,17 +106,7 @@
                     </span>
                   </b-alert>
 
-                  <div
-                    class="text-center"
-                    v-if="
-                      passwordsFilled &&
-                      samePasswords &&
-                      passwordValidation.valid &&
-                      namesFilled &&
-                      emailFilled &&
-                      form.agree
-                    "
-                  >
+                  <div class="text-center" v-if="namesFilled && emailFilled && form.agree">
                     <div class="text-center">
                       <b-button class="ml-2" @click="resetForm()">{{ $t('form.reset') }}</b-button>
                       <b-button type="submit" variant="primary">{{ $t('signup') }}</b-button>
@@ -153,10 +127,10 @@
 <script>
 import loginAPI from '../../apis/loginAPI'
 import InputEmail from '../../components/Inputs/InputEmail.vue'
-import InputPassword from '../../components/Inputs/InputPassword.vue'
+import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation.vue'
 
 export default {
-  components: { InputPassword, InputEmail },
+  components: { InputPasswordConfirmation, InputEmail },
   name: 'register',
   data() {
     return {
@@ -165,12 +139,11 @@ export default {
         lastname: '',
         email: '',
         agree: false,
-        password: '',
-        passwordRepeat: '',
+        password: {
+          password: '',
+          passwordRepeat: '',
+        },
       },
-
-      passwordVisible: false,
-      passwordVisibleRepeat: false,
       submitted: false,
       showError: false,
       messageError: '',
@@ -186,18 +159,12 @@ export default {
         lastname: '',
         email: '',
         password: '',
-        passwordRepeat: '',
+        agree: false,
       }
       this.$nextTick(() => {
         this.$refs.observer.reset()
       })
     },
-    togglePasswordVisibility() {
-      this.passwordVisible = !this.passwordVisible
-    },
-    togglePasswordRepeatVisibility() {
-      this.passwordVisibleRepeat = !this.passwordVisibleRepeat
-    },
     async onSubmit() {
       const result = await loginAPI.create(
         this.form.email,
@@ -231,12 +198,6 @@ export default {
     },
   },
   computed: {
-    samePasswords() {
-      return this.form.password === this.form.passwordRepeat
-    },
-    passwordsFilled() {
-      return this.form.password !== '' && this.form.passwordRepeat !== ''
-    },
     namesFilled() {
       return (
         this.form.firstname !== '' &&
@@ -256,18 +217,6 @@ export default {
         { message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
       ]
     },
-    passwordValidation() {
-      const errors = []
-      for (const condition of this.rules) {
-        if (!condition.regex.test(this.form.password)) {
-          errors.push(condition.message)
-        }
-      }
-      if (errors.length === 0) {
-        return { valid: true, errors }
-      }
-      return { valid: false, errors }
-    },
   },
 }
 </script>