Merge pull request #646 from gradido/604-CSS-of-InputPassword-Component

Css color input error

frontend/src/components/Inputs/InputEmail.vue

@@ -6,22 +6,19 @@
     v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
   >
     <b-form-group :label="label" :label-for="labelFor">
-      <b-input-group>
-        <b-form-input
-          v-model="currentValue"
-          v-bind="ariaInput"
-          :id="labelFor"
-          :name="name"
-          :placeholder="placeholder"
-          type="email"
-          :state="validated ? valid : false"
-          trim
-          class="email-form-input"
-        ></b-form-input>
-        <b-form-invalid-feedback v-bind="ariaMsg">
-          {{ errors[0] }}
-        </b-form-invalid-feedback>
-      </b-input-group>
+      <b-form-input
+        v-model="currentValue"
+        v-bind="ariaInput"
+        :id="labelFor"
+        :name="name"
+        :placeholder="placeholder"
+        type="email"
+        :state="validated ? valid : false"
+        trim
+      ></b-form-input>
+      <b-form-invalid-feedback v-bind="ariaMsg">
+        {{ errors[0] }}
+      </b-form-invalid-feedback>
     </b-form-group>
   </validation-provider>
 </template>
@@ -62,12 +59,3 @@ export default {
   },
 }
 </script>
-<style>
-.email-form-input {
-  border-right-style: solid !important;
-  border-right-width: 1px !important;
-  padding-right: 12px !important;
-  border-top-right-radius: 6px !important;
-  border-bottom-right-radius: 6px !important;
-}
-</style>

frontend/src/components/Inputs/InputPassword.vue

@@ -19,7 +19,11 @@
           :state="validated ? valid : false"
         ></b-form-input>
         <b-input-group-append>
-          <b-button variant="outline-primary" @click="toggleShowPassword">
+          <b-button
+            variant="outline-light"
+            @click="toggleShowPassword"
+            class="border-left-0 rounded-right"
+          >
             <b-icon :icon="showPassword ? 'eye' : 'eye-slash'" />
           </b-button>
         </b-input-group-append>

frontend/src/components/Inputs/InputPasswordConfirmation.vue

@@ -10,11 +10,11 @@
             containsNumericCharacter: true,
             atLeastEightCharactera: true,
           }"
-          :label="$t('form.password_new')"
+          :label="register ? $t('form.password') : $t('form.password_new')"
           :showAllErrors="true"
           :immediate="true"
-          :name="$t('form.password_new')"
-          :placeholder="$t('form.password_new')"
+          :name="createId(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,8 +23,9 @@
       <b-col>
         <input-password
           :rules="{ samePassword: value.password }"
-          :label="$t('form.password_new_repeat')"
-          :placeholder="$t('form.password_new_repeat')"
+          :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>
       </b-col>
@@ -44,6 +45,10 @@ export default {
       type: Object,
       required: true,
     },
+    register: {
+      type: Boolean,
+      required: false,
+    },
   },
   data() {
     return {
@@ -51,6 +56,11 @@ export default {
       passwordRepeat: '',
     }
   },
+  methods: {
+    createId(text) {
+      return text.replace(/ +/g, '-')
+    },
+  },
   computed: {
     passwordObject() {
       return { password: this.password, passwordRepeat: this.passwordRepeat }

frontend/src/components/SidebarPlugin/SideBar.vue

@@ -16,7 +16,11 @@
         <ul class="nav align-items-center d-md-none">
           <div class="media align-items-center">
             <span class="avatar avatar-sm">
-              <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+              <vue-qrcode
+                v-if="$store.state.email"
+                :value="$store.state.email"
+                type="image/png"
+              ></vue-qrcode>
             </span>
           </div>
         </ul>

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

@@ -61,15 +61,15 @@ describe('Register', () => {
       })
 
       it('has email input fields', () => {
-        expect(wrapper.find('#registerEmail').exists()).toBeTruthy()
+        expect(wrapper.find('#Email-input-field').exists()).toBeTruthy()
       })
 
       it('has password input fields', () => {
-        expect(wrapper.find('#registerPassword').exists()).toBeTruthy()
+        expect(wrapper.find('input[name="form.password"]').exists()).toBeTruthy()
       })
 
       it('has password repeat input fields', () => {
-        expect(wrapper.find('#registerPasswordRepeat').exists()).toBeTruthy()
+        expect(wrapper.find('input[name="form.passwordRepeat"]').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 () => {
-        wrapper.find('#registerEmail').setValue('no_valid@Email')
+      it('displays a message that Email is required', async () => {
+        await wrapper.find('form').trigger('submit')
         await flushPromises()
-        await expect(wrapper.find('#registerEmailLiveFeedback').text()).toEqual(
-          'validations.messages.email',
+        expect(wrapper.findAll('div.invalid-feedback').at(0).text()).toBe(
+          'validations.messages.required',
         )
       })
 
-      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('')
+      it('displays a message that password is required', async () => {
+        await wrapper.find('form').trigger('submit')
         await flushPromises()
-        await expect(wrapper.find('div.hints').text()).toContain(
-          'site.signup.lowercase',
-          'site.signup.uppercase',
-          'site.signup.minimum',
-          'site.signup.one_number',
+        expect(wrapper.findAll('div.invalid-feedback').at(1).text()).toBe(
+          'validations.messages.required',
         )
       })
 
-      // 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

@@ -76,99 +76,14 @@
                     </b-form-group>
                   </validation-provider>
 
-                  <validation-provider
-                    name="Email"
-                    :rules="{ required: true, email: true }"
-                    v-slot="validationContext"
-                  >
-                    <b-form-group class="mb-3" label="Email" label-for="registerEmail">
-                      <b-form-input
-                        id="registerEmail"
-                        name="Email"
-                        v-model="form.email"
-                        placeholder="Email"
-                        :state="getValidationState(validationContext)"
-                        aria-describedby="registerEmailLiveFeedback"
-                      ></b-form-input>
-
-                      <b-form-invalid-feedback id="registerEmailLiveFeedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </validation-provider>
+                  <input-email v-model="form.email"></input-email>
 
                   <hr />
+                  <input-password-confirmation
+                    v-model="form.password"
+                    :register="register"
+                  ></input-password-confirmation>
 
-                  <validation-provider
-                    :name="$t('form.password')"
-                    :rules="{ required: true }"
-                    v-slot="validationContext"
-                  >
-                    <b-form-group
-                      class="mb-5"
-                      :label="$t('form.password')"
-                      label-for="registerPassword"
-                    >
-                      <b-input-group>
-                        <b-form-input
-                          id="registerPassword"
-                          :name="$t('form.password')"
-                          v-model="form.password"
-                          :placeholder="$t('form.password')"
-                          :type="passwordVisible ? 'text' : 'password'"
-                          :state="getValidationState(validationContext)"
-                          aria-describedby="registerPasswordLiveFeedback"
-                        ></b-form-input>
-
-                        <b-input-group-append>
-                          <b-button variant="outline-primary" @click="togglePasswordVisibility">
-                            <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
-                          </b-button>
-                        </b-input-group-append>
-                      </b-input-group>
-                      <b-form-invalid-feedback id="registerPasswordLiveFeedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </validation-provider>
-
-                  <b-form-group
-                    class="mb-5"
-                    :label="$t('form.passwordRepeat')"
-                    label-for="registerPasswordRepeat"
-                  >
-                    <b-input-group>
-                      <b-form-input
-                        id="registerPasswordRepeat"
-                        :name="$t('form.passwordRepeat')"
-                        v-model.lazy="form.passwordRepeat"
-                        :placeholder="$t('form.passwordRepeat')"
-                        :type="passwordVisibleRepeat ? 'text' : 'password'"
-                      ></b-form-input>
-
-                      <b-input-group-append>
-                        <b-button variant="outline-primary" @click="togglePasswordRepeatVisibility">
-                          <b-icon :icon="passwordVisibleRepeat ? 'eye' : 'eye-slash'" />
-                        </b-button>
-                      </b-input-group-append>
-                    </b-input-group>
-                  </b-form-group>
-
-                  <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
@@ -194,17 +109,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>
@@ -224,8 +129,11 @@
 </template>
 <script>
 import loginAPI from '../../apis/loginAPI'
+import InputEmail from '../../components/Inputs/InputEmail.vue'
+import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation.vue'
 
 export default {
+  components: { InputPasswordConfirmation, InputEmail },
   name: 'register',
   data() {
     return {
@@ -234,15 +142,15 @@ export default {
         lastname: '',
         email: '',
         agree: false,
-        password: '',
-        passwordRepeat: '',
+        password: {
+          password: '',
+          passwordRepeat: '',
+        },
       },
-
-      passwordVisible: false,
-      passwordVisibleRepeat: false,
       submitted: false,
       showError: false,
       messageError: '',
+      register: true,
     }
   },
   methods: {
@@ -254,36 +162,39 @@ export default {
         firstname: '',
         lastname: '',
         email: '',
-        password: '',
-        passwordRepeat: '',
+        password: {
+          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,
         this.form.firstname,
         this.form.lastname,
-        this.form.password,
+        this.form.password.password,
       )
       if (result.success) {
-        this.$store.dispatch('login', {
+        /* this.$store.dispatch('login', {
           sessionId: result.result.data.session_id,
-          email: this.form.email,
+          user: {
+            email: this.form.email,
+            firstName: this.form.firstname,
+            lastName: this.form.lastname
+          }
+
         })
+        */
         this.form.email = ''
         this.form.firstname = ''
         this.form.lastname = ''
-        this.password = ''
-        this.passwordVisibleRepeat = ''
+        this.form.password.password = ''
+
         this.$router.push('/thx/register')
       } else {
         this.showError = true
@@ -296,16 +207,10 @@ export default {
       this.form.email = ''
       this.form.firstname = ''
       this.form.lastname = ''
-      this.form.password = ''
+      this.form.password.password = ''
     },
   },
   computed: {
-    samePasswords() {
-      return this.form.password === this.form.passwordRepeat
-    },
-    passwordsFilled() {
-      return this.form.password !== '' && this.form.passwordRepeat !== ''
-    },
     namesFilled() {
       return (
         this.form.firstname !== '' &&
@@ -317,26 +222,6 @@ export default {
     emailFilled() {
       return this.form.email !== ''
     },
-    rules() {
-      return [
-        { message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
-        { message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
-        { message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
-        { 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>

frontend/src/views/Pages/ResetPassword.vue

@@ -26,7 +26,7 @@
             <b-card-body class="p-4">
               <validation-observer ref="observer" v-slot="{ handleSubmit }">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <input-password-confirmation v-model="form" />
+                  <input-password-confirmation v-model="form" :register="register" />
                   <div class="text-center">
                     <b-button type="submit" variant="primary" class="mt-4">
                       {{ $t('reset') }}
@@ -65,6 +65,7 @@ export default {
       sessionId: null,
       email: null,
       pending: true,
+      register: false,
     }
   },
   methods: {

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

@@ -28,7 +28,7 @@
                 ></input-password>
               </b-col>
             </b-row>
-            <input-password-confirmation v-model="form.newPassword" />
+            <input-password-confirmation v-model="form.newPassword" :register="register" />
             <b-row class="text-right">
               <b-col>
                 <div class="text-right">
@@ -66,6 +66,7 @@ export default {
           passwordRepeat: '',
         },
       },
+      register: false,
     }
   },
   methods: {