password component is wroking and tested

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

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils'
+
+import InputPassword from './InputPassword'
+
+const localVue = global.localVue
+
+describe('InputPassword', () => {
+  let wrapper
+
+  const propsData = {
+    name: 'input-field-name',
+    label: 'input-field-label',
+    placeholder: 'input-field-placeholder',
+    value: '',
+  }
+
+  const Wrapper = () => {
+    return mount(InputPassword, { localVue, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has an input field', () => {
+      expect(wrapper.find('input').exists()).toBeTruthy()
+    })
+
+    describe('properties', () => {
+      it('has the name "input-field-name"', () => {
+        expect(wrapper.find('input').attributes('name')).toEqual('input-field-name')
+      })
+
+      it('has the id "input-field-name-input-field"', () => {
+        expect(wrapper.find('input').attributes('id')).toEqual('input-field-name-input-field')
+      })
+
+      it('has the placeholder "input-field-placeholder"', () => {
+        expect(wrapper.find('input').attributes('placeholder')).toEqual('input-field-placeholder')
+      })
+
+      it('has the value ""', () => {
+        expect(wrapper.vm.currentValue).toEqual('')
+      })
+
+      it('has the label "input-field-label"', () => {
+        expect(wrapper.find('label').text()).toEqual('input-field-label')
+      })
+
+      it('has the label for "input-field-name-input-field"', () => {
+        expect(wrapper.find('label').attributes('for')).toEqual('input-field-name-input-field')
+      })
+    })
+
+    describe('input value changes', () => {
+      it('emits input with new value', async () => {
+        await wrapper.find('input').setValue('12')
+        expect(wrapper.emitted('input')).toBeTruthy()
+        expect(wrapper.emitted('input')).toEqual([['12']])
+      })
+    })
+
+    describe('password visibilty', () => {
+      it('has type password by default', () => {
+        expect(wrapper.find('input').attributes('type')).toEqual('password')
+      })
+
+      it('changes to type text when icon is clicked', async () => {
+        await wrapper.find('button').trigger('click')
+        expect(wrapper.find('input').attributes('type')).toEqual('text')
+      })
+
+      it('changes back to type password when icon is clicked twice', async () => {
+        await wrapper.find('button').trigger('click')
+        await wrapper.find('button').trigger('click')
+        expect(wrapper.find('input').attributes('type')).toEqual('password')
+      })
+    })
+
+    describe('password visibilty icon', () => {
+      it('is by default bi-eye-slash', () => {
+        expect(wrapper.find('svg').classes('bi-eye-slash')).toBe(true)
+      })
+
+      it('changes to bi-eye when clicked', async () => {
+        await wrapper.find('button').trigger('click')
+        expect(wrapper.find('svg').classes('bi-eye')).toBe(true)
+      })
+
+      it('changes back to bi-eye-slash when clicked twice', async () => {
+        await wrapper.find('button').trigger('click')
+        await wrapper.find('button').trigger('click')
+        expect(wrapper.find('svg').classes('bi-eye-slash')).toBe(true)
+      })
+    })
+  })
+})

frontend/src/components/Inputs/InputPassword.vue

@@ -1,9 +1,15 @@
 <template>
-  <validation-provider tag="div" :rules="rules" :name="name" v-slot="{ errors, valid, validated }">
+  <validation-provider
+    tag="div"
+    :rules="rules"
+    :name="name"
+    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"
@@ -15,7 +21,7 @@
             <b-icon :icon="showPassword ? 'eye' : 'eye-slash'" />
           </b-button>
         </b-input-group-append>
-        <b-form-invalid-feedback>
+        <b-form-invalid-feedback v-bind="ariaMsg">
           {{ errors[0] }}
         </b-form-invalid-feedback>
       </b-input-group>
@@ -28,13 +34,15 @@ export default {
   props: {
     rules: {
       default: () => {
-        required: true
+        return {
+          required: true,
+        }
       },
     },
-    name: { default: '' },
-    label: { default: 'Password' },
-    placeholder: { default: 'Password' },
-    model: { required: true, type: String },
+    name: { type: String, default: 'password' },
+    label: { type: String, default: 'Password' },
+    placeholder: { type: String, default: 'Password' },
+    value: { required: true, type: String },
   },
   data() {
     return {
@@ -49,14 +57,12 @@ export default {
   },
   methods: {
     toggleShowPassword() {
-      console.log('toggleShowPassword', this.placeholder)
       this.showPassword = !this.showPassword
     },
   },
   watch: {
-    currentValue(val) {
-      console.log('currentValue', val)
-      this.$emit('input', val)
+    currentValue() {
+      this.$emit('input', this.currentValue)
     },
   },
 }

frontend/src/views/Pages/Login.vue

@@ -23,8 +23,8 @@
                 <small>{{ $t('login') }}</small>
               </div>
 
-              <validation-observer ref="observer" v-slot="{ handleSubmit }">
-                <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
+              <validation-observer ref="observer" v-slot="{ passes }">
+                <b-form @submit.stop.prevent="passes(onSubmit)">
                   <validation-provider
                     name="Email"
                     :rules="{ required: true, email: true }"
@@ -47,10 +47,9 @@
                   </validation-provider>
 
                   <input-password
-                    name="password"
                     :label="$t('form.password')"
                     :placeholder="$t('form.password')"
-                    model="form.password"
+                    v-model="form.password"
                   ></input-password>
 
                   <b-alert v-show="loginfail" show dismissible variant="warning">
@@ -116,7 +115,6 @@ export default {
     },
     async onSubmit() {
       // error info  ausschalten
-      console.log('submit', this.form.password)
       this.loginfail = false
       const loader = this.$loading.show({
         container: this.$refs.submitButton,