Merge pull request #2528 from gradido/2474-Incorrectly-Email-Label-on-InputEmail

fix(frontend): input-email label and placeholder are displayed correctly per language

frontend/src/components/Inputs/InputEmail.vue

@@ -40,11 +40,11 @@ export default {
         }
       },
     },
-    name: { type: String, default: 'Email' },
-    label: { type: String, default: 'Email' },
-    placeholder: { type: String, default: 'Email' },
-    value: { required: true, type: String, default: '' },
-    disabled: { required: false, type: Boolean, default: false },
+    name: { type: String, required: true },
+    label: { type: String, required: true },
+    placeholder: { type: String, required: true },
+    value: { type: String, required: true },
+    disabled: { type: Boolean, required: false, default: false },
   },
   data() {
     return {

frontend/src/pages/ForgotPassword.spec.js

@@ -58,11 +58,11 @@ describe('ForgotPassword', () => {
       })
 
       it('has the label "Email"', () => {
-        expect(form.find('label').text()).toEqual('Email')
+        expect(form.find('label').text()).toEqual('form.email')
       })
 
       it('has the placeholder "Email"', () => {
-        expect(form.find('input').attributes('placeholder')).toEqual('Email')
+        expect(form.find('input').attributes('placeholder')).toEqual('form.email')
       })
 
       it('has a submit button', () => {

frontend/src/pages/ForgotPassword.vue

@@ -6,7 +6,12 @@
         <b-col>
           <validation-observer ref="observer" v-slot="{ handleSubmit }">
             <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-              <input-email v-model="form.email"></input-email>
+              <input-email
+                v-model="form.email"
+                :name="$t('form.email')"
+                :label="$t('form.email')"
+                :placeholder="$t('form.email')"
+              ></input-email>
               <div class="text-center">
                 <b-button type="submit" variant="gradido">
                   {{ $t('settings.password.send_now') }}

frontend/src/pages/Login.spec.js

@@ -76,7 +76,7 @@ describe('Login', () => {
       })
 
       it('has an Email input field', () => {
-        expect(wrapper.find('input[placeholder="Email"]').exists()).toBe(true)
+        expect(wrapper.find('div[data-test="input-email"]').find('input').exists()).toBe(true)
       })
 
       it('has an Password input field', () => {
@@ -110,7 +110,10 @@ describe('Login', () => {
       describe('valid data', () => {
         beforeEach(async () => {
           jest.clearAllMocks()
-          await wrapper.find('input[placeholder="Email"]').setValue('user@example.org')
+          await wrapper
+            .find('div[data-test="input-email"]')
+            .find('input')
+            .setValue('user@example.org')
           await wrapper.find('input[placeholder="form.password"]').setValue('1234')
           await flushPromises()
           apolloMutateMock.mockResolvedValue({
@@ -159,7 +162,10 @@ describe('Login', () => {
                 code: 'some-code',
               }
               wrapper = Wrapper()
-              await wrapper.find('input[placeholder="Email"]').setValue('user@example.org')
+              await wrapper
+                .find('div[data-test="input-email"]')
+                .find('input')
+                .setValue('user@example.org')
               await wrapper.find('input[placeholder="form.password"]').setValue('1234')
               await flushPromises()
               await wrapper.find('form').trigger('submit')
@@ -180,7 +186,10 @@ describe('Login', () => {
           })
           wrapper = Wrapper()
           jest.clearAllMocks()
-          await wrapper.find('input[placeholder="Email"]').setValue('user@example.org')
+          await wrapper
+            .find('div[data-test="input-email"]')
+            .find('input')
+            .setValue('user@example.org')
           await wrapper.find('input[placeholder="form.password"]').setValue('1234')
           await flushPromises()
           await wrapper.find('form').trigger('submit')

frontend/src/pages/Login.vue

@@ -5,7 +5,14 @@
       <validation-observer ref="observer" v-slot="{ handleSubmit }">
         <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
           <b-row>
-            <b-col sm="12" md="12" lg="6"><input-email v-model="form.email"></input-email></b-col>
+            <b-col sm="12" md="12" lg="6">
+              <input-email
+                v-model="form.email"
+                :name="$t('form.email')"
+                :label="$t('form.email')"
+                :placeholder="$t('form.email')"
+              ></input-email>
+            </b-col>
             <b-col sm="12" md="12" lg="6">
               <input-password
                 :label="$t('form.password')"

frontend/src/pages/Register.spec.js

@@ -65,7 +65,7 @@ describe('Register', () => {
       })
 
       it('has email input fields', () => {
-        expect(wrapper.find('#Email-input-field').exists()).toBe(true)
+        expect(wrapper.find('div[data-test="input-email"]').find('input').exists()).toBe(true)
       })
 
       it('has 1 checkbox input fields', () => {
@@ -107,7 +107,10 @@ describe('Register', () => {
         wrapper.find('#registerLastname').setValue('Mustermann')
       })
       it('has disabled submit button when missing input checked box', () => {
-        wrapper.find('#Email-input-field').setValue('max.mustermann@gradido.net')
+        wrapper
+          .find('div[data-test="input-email"]')
+          .find('input')
+          .setValue('max.mustermann@gradido.net')
         expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
       })
 
@@ -121,7 +124,10 @@ describe('Register', () => {
       beforeEach(() => {
         wrapper.find('#registerFirstname').setValue('Max')
         wrapper.find('#registerLastname').setValue('Mustermann')
-        wrapper.find('#Email-input-field').setValue('max.mustermann@gradido.net')
+        wrapper
+          .find('div[data-test="input-email"]')
+          .find('input')
+          .setValue('max.mustermann@gradido.net')
         wrapper.find('#registerCheckbox').setChecked()
       })
 
@@ -211,7 +217,10 @@ describe('Register', () => {
         wrapper = Wrapper()
         wrapper.find('#registerFirstname').setValue('Max')
         wrapper.find('#registerLastname').setValue('Mustermann')
-        wrapper.find('#Email-input-field').setValue('max.mustermann@gradido.net')
+        wrapper
+          .find('div[data-test="input-email"]')
+          .find('input')
+          .setValue('max.mustermann@gradido.net')
         wrapper.find('#registerCheckbox').setChecked()
         await wrapper.find('form').trigger('submit')
         await flushPromises()

frontend/src/pages/Register.vue

@@ -59,7 +59,14 @@
             </b-col>
           </b-row>
           <b-row>
-            <b-col><input-email v-model="form.email"></input-email></b-col>
+            <b-col>
+              <input-email
+                v-model="form.email"
+                :name="$t('form.email')"
+                :label="$t('form.email')"
+                :placeholder="$t('form.email')"
+              ></input-email>
+            </b-col>
           </b-row>
           <div class="my-4">
             <b-form-checkbox