Merge branch '604-CSS-of-InputPassword-Component' of https://github.com/gradido/gradido into 604-CSS-of-InputPassword-Component

frontend/src/components/Inputs/InputPasswordConfirmation.vue

@@ -3,7 +3,6 @@
     <b-row class="mb-2">
       <b-col>
         <input-password
-           id="inputPassword"
           :rules="{
             required: true,
             containsLowercaseCharacter: true,
@@ -13,9 +12,9 @@
           }"
           :label="register ? $t('form.password') : $t('form.password_new')"
           :showAllErrors="true"
-          :immediate="true"
+          :immediate="true" 
-          :name="register ? $t('form.password') : $t('form.password_new')"
+          :name="createId(register ? $t('form.password') : $t('form.password_new'))"
-          :placeholder="register ? $t('form.password') : $t('form.password_new')"
+          :placeholder="register ? $t('form.password') : $t('form.password_new')" 
           v-model="password"
         ></input-password>
       </b-col>
@@ -23,9 +22,8 @@
     <b-row class="mb-2">
       <b-col>
         <input-password
-          id="inputPasswordRepeat"
-          :rules="{ samePassword: value.password }"
           :label="register ? $t('form.passwordRepeat') : $t('form.password_new_repeat')"
+          :name="createId(register ? $t('form.passwordRepeat') : $t('form.password_new_repeat'))"
           :placeholder="register ? $t('form.passwordRepeat') : $t('form.password_new_repeat')"
           v-model="passwordRepeat"
         ></input-password>
@@ -57,6 +55,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('#inputPassword').exists()).toBeTruthy()
+        expect(wrapper.find('input[name="form.password_new"]').exists()).toBeTruthy()
       })
 
       it('has password repeat input fields', () => {
-        expect(wrapper.find('#inputPasswordRepeat').exists()).toBeTruthy()
+        expect(wrapper.find('input[name="form.password_new_repeat"]').exists()).toBeTruthy()
       })
 
       it('has 1 checkbox input fields', () => {
@@ -80,30 +80,31 @@ describe('Register', () => {
         expect(wrapper.find('button[type="submit"]').exists()).toBe(false)
       })
 
-      it('shows a warning when no valid Email is entered', async () => {
+      it('displays a message that Email is required', async () => {
-        wrapper.find('#Email-input-field').setValue('no_valid@Email')
+        await wrapper.find('form').trigger('submit')
         await flushPromises()
-        await expect(wrapper.find('#Email-input-field b-form-invalid-feedback').text()).toEqual(
+        expect(wrapper.findAll('div.invalid-feedback').at(0).text()).toBe(
-          'validations.messages.email',
+          'validations.messages.required',
         )
       })
 
-      it('shows 4 warnings when no password is set', async () => {
+      it('displays a message that password is required', async () => {
-        const passwords = wrapper.findAll('input[type="password"]')
+        await wrapper.find('form').trigger('submit')
-        passwords.at(0).setValue('')
-        passwords.at(1).setValue('')
         await flushPromises()
-        await expect(wrapper.find('div.hints').text()).toContain(
+        expect(wrapper.findAll('div.invalid-feedback').at(1).text()).toBe(
-          'site.signup.lowercase',
+          'validations.messages.required',
-          'site.signup.uppercase',
-          'site.signup.minimum',
-          'site.signup.one_number',
         )
       })
 
-      // TODO test different invalid password combinations
+      it('displays a message that passwordConfirm is required', async () => {
+        await wrapper.find('form').trigger('submit')
+        await flushPromises()
+        expect(wrapper.findAll('div.invalid-feedback').at(2).text()).toBe(
+          'validations.messages.required',
+        )
+      })
     })
 
-    // TODO test submit button
+    // To Do: Test lines 156-197,210-213
   })
 })

frontend/src/views/Pages/Register.vue

@@ -109,16 +109,7 @@
                     </span>
                   </b-alert>
 
-                  <div
+                  <div class="text-center" v-if="namesFilled && emailFilled && form.agree">
-                    class="text-center"
-                    v-if="
-                      passwordsFilled &&
-                      samePasswords &&
-                      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>
@@ -175,12 +166,12 @@ export default {
           password: '',
           passwordRepeat: '',
         },
+        agree: false,
       }
       this.$nextTick(() => {
         this.$refs.observer.reset()
       })
     },
-   
     async onSubmit() {
       const result = await loginAPI.create(
         this.form.email,
@@ -214,12 +205,6 @@ export default {
     },
   },
   computed: {
-    samePasswords() {
-      return this.form.password.password === this.form.password.passwordRepeat
-    },
-    passwordsFilled() {
-      return this.form.password.password !== '' && this.form.password.passwordRepeat !== ''
-    },
     namesFilled() {
       return (
         this.form.firstname !== '' &&