From 04fa6665902e3b3aec3f6838db1551d23f1f7ff5 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Sat, 12 Jun 2021 11:36:07 +0200
Subject: [PATCH] fix lint, fix test, change ids

---
 frontend/src/locales/de.json               |   2 +-
 frontend/src/locales/en.json               |   2 +-
 frontend/src/views/Pages/Login.vue         |   9 +-
 frontend/src/views/Pages/Register.spec.js  |  25 ++-
 frontend/src/views/Pages/Register.vue      | 240 ++++++++++-----------
 frontend/src/views/Pages/ResetPassword.vue |   4 +-
 6 files changed, 137 insertions(+), 145 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index f47493aea..60015ef98 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -34,7 +34,7 @@
     "email":"E-Mail",
     "email_repeat":"eMail wiederholen",
     "password":"Passwort",
-    "password_repeat":"Passwort wiederholen",
+    "passwordRepeat":"Passwort wiederholen",
     "password_old":"altes Passwort",
     "password_new":"neues Passwort",
     "password_new_repeat":"neues Passwort wiederholen",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index dbb9b445c..5154aacc0 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -34,7 +34,7 @@
     "email":"Email",
     "email_repeat":"Repeat Email",
     "password":"Password",
-    "password_repeat":"Repeat password",
+    "passwordRepeat":"Repeat password",
     "password_old":"Old password",
     "password_new":"New password",
     "password_new_repeat":"Repeat new password",
diff --git a/frontend/src/views/Pages/Login.vue b/frontend/src/views/Pages/Login.vue
index 23e5741f2..4619dddf2 100755
--- a/frontend/src/views/Pages/Login.vue
+++ b/frontend/src/views/Pages/Login.vue
@@ -34,7 +34,7 @@
                       <b-form-input
                         id="login-email"
                         name="example-input-1"
-                        v-model="model.email"
+                        v-model="form.email"
                         placeholder="Email"
                         :state="getValidationState(validationContext)"
                         aria-describedby="login-email-live-feedback"
@@ -61,7 +61,7 @@
                         <b-form-input
                           id="input-pwd"
                           name="input-pwd"
-                          v-model="model.password"
+                          v-model="form.password"
                           :placeholder="$t('form.password')"
                           :type="passwordVisible ? 'text' : 'password'"
                           :state="getValidationState(validationContext)"
@@ -123,7 +123,7 @@ export default {
   name: 'login',
   data() {
     return {
-      model: {
+      form: {
         email: '',
         password: '',
         // rememberMe: false
@@ -137,7 +137,6 @@ export default {
     getValidationState({ dirty, validated, valid = null }) {
       return dirty || validated ? valid : null
     },
-    
 
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
@@ -148,7 +147,7 @@ export default {
       const loader = this.$loading.show({
         container: this.$refs.submitButton,
       })
-      const result = await loginAPI.login(this.model.email, this.model.password)
+      const result = await loginAPI.login(this.form.email, this.form.password)
       if (result.success) {
         this.$store.dispatch('login', {
           sessionId: result.result.data.session_id,
diff --git a/frontend/src/views/Pages/Register.spec.js b/frontend/src/views/Pages/Register.spec.js
index 3d4296567..36ee6987b 100644
--- a/frontend/src/views/Pages/Register.spec.js
+++ b/frontend/src/views/Pages/Register.spec.js
@@ -53,16 +53,27 @@ describe('Register', () => {
         expect(wrapper.find('form').exists()).toBeTruthy()
       })
 
-      it('has 3 text input fields', () => {
-        expect(wrapper.findAll('input[type="text"]').length).toBe(3)
+      it('has firstname input fields', () => {
+        expect(wrapper.find('#registerFirstname').exists()).toBeTruthy()
+      })
+      it('has lastname input fields', () => {
+        expect(wrapper.find('#registerLastname').exists()).toBeTruthy()
       })
 
-      it('has 2 password input fields', () => {
-        expect(wrapper.findAll('input[type="password"]').length).toBe(2)
+      it('has email input fields', () => {
+        expect(wrapper.find('#registerEmail').exists()).toBeTruthy()
+      })
+
+      it('has password input fields', () => {
+        expect(wrapper.find('#registerPassword').exists()).toBeTruthy()
+      })
+
+      it('has password repeat input fields', () => {
+        expect(wrapper.find('#registerPasswordRepeat').exists()).toBeTruthy()
       })
 
       it('has 1 checkbox input fields', () => {
-        expect(wrapper.findAll('input[type="checkbox"]').length).toBe(1)
+        expect(wrapper.find('#registerCheckbox').exists()).toBeTruthy()
       })
 
       it('has no submit button when not completely filled', () => {
@@ -70,9 +81,9 @@ describe('Register', () => {
       })
 
       it('shows a warning when no valid Email is entered', async () => {
-        wrapper.findAll('input[type="text"]').at(2).setValue('no_valid@Email')
+        wrapper.find('#registerEmail').setValue('no_valid@Email')
         await flushPromises()
-        await expect(wrapper.find('.invalid-feedback').text()).toEqual(
+        await expect(wrapper.find('#registerEmailLiveFeedback').text()).toEqual(
           'The Email field must be a valid email',
         )
       })
diff --git a/frontend/src/views/Pages/Register.vue b/frontend/src/views/Pages/Register.vue
index f427c5a8c..7f475ebae 100755
--- a/frontend/src/views/Pages/Register.vue
+++ b/frontend/src/views/Pages/Register.vue
@@ -23,107 +23,101 @@
               <div class="text-center text-muted mb-4">
                 <small>{{ $t('signup') }}</small>
               </div>
-      
- 
-                   <validation-observer ref="observer" v-slot="{ handleSubmit }">
-                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
 
-                   <validation-provider
+              <validation-observer ref="observer" v-slot="{ handleSubmit }">
+                <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
+                  <validation-provider
                     :name="$t('form.firstname')"
                     :rules="{ required: true, min: 3 }"
                     v-slot="validationContext"
                   >
-
-                   <b-form-group class="mb-3" :label="$t('form.firstname')" label-for="register-firstname">
+                    <b-form-group
+                      class="mb-3"
+                      :label="$t('form.firstname')"
+                      label-for="registerFirstname"
+                    >
                       <b-form-input
-                        id="register-firstname"
+                        id="registerFirstname"
                         :name="$t('form.firstname')"
-                        v-model="model.firstname"
+                        v-model="form.firstname"
                         :placeholder="$t('form.firstname')"
                         :state="getValidationState(validationContext)"
-                        aria-describedby="register-firstname-live-feedback"
+                        aria-describedby="registerFirstnameLiveFeedback"
                       ></b-form-input>
 
-                      <b-form-invalid-feedback id="register-firstname-live-feedback">
+                      <b-form-invalid-feedback id="registerFirstnameLiveFeedback">
                         {{ validationContext.errors[0] }}
                       </b-form-invalid-feedback>
                     </b-form-group>
-
-
-                   </validation-provider>
-
-  
+                  </validation-provider>
 
                   <validation-provider
                     :name="$t('form.lastname')"
                     :rules="{ required: true, min: 2 }"
                     v-slot="validationContext"
                   >
-
-                   <b-form-group class="mb-3" :label="$t('form.lastname')" label-for="register-lastname">
+                    <b-form-group
+                      class="mb-3"
+                      :label="$t('form.lastname')"
+                      label-for="registerLastname"
+                    >
                       <b-form-input
-                        id="register-lastname"
+                        id="registerLastname"
                         :name="$t('form.lastname')"
-                        v-model="model.lastname"
+                        v-model="form.lastname"
                         :placeholder="$t('form.lastname')"
                         :state="getValidationState(validationContext)"
-                        aria-describedby="register-lastname-live-feedback"
+                        aria-describedby="registerLastnameLiveFeedback"
                       ></b-form-input>
 
-                      <b-form-invalid-feedback id="register-lastname-live-feedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </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="input-login-email">
-                      <b-form-input
-                        id="input-login-email"
-                        name="example-input-1"
-                        v-model="model.email"
-                        placeholder="Email"
-                        :state="getValidationState(validationContext)"
-                        aria-describedby="login-email-live-feedback"
-                      ></b-form-input>
-
-                      <b-form-invalid-feedback id="login-email-live-feedback">
+                      <b-form-invalid-feedback id="registerLastnameLiveFeedback">
                         {{ validationContext.errors[0] }}
                       </b-form-invalid-feedback>
                     </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>
+
                   <hr />
 
-
-
-
                   <validation-provider
                     :name="$t('form.password')"
                     :rules="{ required: true }"
                     v-slot="validationContext"
                   >
                     <b-form-group
-                      class="mb-5"                     
+                      class="mb-5"
                       :label="$t('form.password')"
-                      label-for="input-password"
+                      label-for="registerPassword"
                     >
                       <b-input-group>
                         <b-form-input
-                          id="input-password"
+                          id="registerPassword"
                           :name="$t('form.password')"
-                          v-model="password"
+                          v-model="form.password"
                           :placeholder="$t('form.password')"
                           :type="passwordVisible ? 'text' : 'password'"
                           :state="getValidationState(validationContext)"
-                          aria-describedby="register-password-live-feedback"
+                          aria-describedby="registerPasswordLiveFeedback"
                         ></b-form-input>
 
                         <b-input-group-append>
@@ -132,37 +126,34 @@
                           </b-button>
                         </b-input-group-append>
                       </b-input-group>
-                      <b-form-invalid-feedback id="register-password-live-feedback">
+                      <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.password_repeat')"
-                      label-for="input-password_repeat"
-                    >
-                      <b-input-group>
-                        <b-form-input
-                          id="input-password_repeat"
-                          :name="$t('form.password_repeat')"
-                          v-model.lazy="passwordRepeat"
-                          :placeholder="$t('form.password_repeat')"
-                          :type="passwordVisibleRepeat ? 'text' : 'password'"
-                          
-                          aria-describedby="register-password-repeat-live-feedback"
-                        ></b-form-input>
+                  <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>
 
-                        <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>
@@ -180,18 +171,13 @@
                   </transition>
                   <b-row class="my-4">
                     <b-col cols="12">
-                     
-
-                       <b-form-checkbox
-      id="register-checkbox"
-      v-model="model.agree"
-      name="register-checkbox"
-      
-    >
-      <span class="text-muted" v-html="$t('site.signup.agree')"></span>
-    </b-form-checkbox>
-
-  
+                      <b-form-checkbox
+                        id="registerCheckbox"
+                        v-model="form.agree"
+                        :name="$t('site.signup.agree')"
+                      >
+                        <span class="text-muted" v-html="$t('site.signup.agree')"></span>
+                      </b-form-checkbox>
                     </b-col>
                   </b-row>
                   <b-alert
@@ -216,17 +202,13 @@
                       passwordValidation.valid &&
                       namesFilled &&
                       emailFilled &&
-                      model.agree
+                      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>
-                  </div>
-
+                    <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>
+                    </div>
                   </div>
                 </b-form>
               </validation-observer>
@@ -247,15 +229,15 @@ export default {
   name: 'register',
   data() {
     return {
-      model: {
+      form: {
         firstname: '',
         lastname: '',
         email: '',
         agree: false,
+        password: '',
+        passwordRepeat: '',
       },
 
-      password: '',
-      passwordRepeat: '',
       passwordVisible: false,
       passwordVisibleRepeat: false,
       submitted: false,
@@ -268,14 +250,13 @@ export default {
       return dirty || validated ? valid : null
     },
     resetForm() {
-      this.model = {
+      this.form = {
         firstname: '',
         lastname: '',
         email: '',
-      }    
-       this.password= '',
-      this.passwordRepeat= '',
-
+        password: '',
+        passwordRepeat: '',
+      }
       this.$nextTick(() => {
         this.$refs.observer.reset()
       })
@@ -288,20 +269,21 @@ export default {
     },
     async onSubmit() {
       const result = await loginAPI.create(
-        this.model.email,
-        this.model.firstname,
-        this.model.lastname,
-        this.password,
+        this.form.email,
+        this.form.firstname,
+        this.form.lastname,
+        this.form.password,
       )
       if (result.success) {
         this.$store.dispatch('login', {
           sessionId: result.result.data.session_id,
-          email: this.model.email,
+          email: this.form.email,
         })
-        this.model.email = ''
-        this.model.firstname = ''
-        this.model.lastname = ''
+        this.form.email = ''
+        this.form.firstname = ''
+        this.form.lastname = ''
         this.password = ''
+        this.passwordVisibleRepeat = ''
         this.$router.push('/thx/register')
       } else {
         this.showError = true
@@ -311,29 +293,29 @@ export default {
     closeAlert() {
       this.showError = false
       this.messageError = ''
-      this.model.email = ''
-      this.model.firstname = ''
-      this.model.lastname = ''
-      this.password = ''
+      this.form.email = ''
+      this.form.firstname = ''
+      this.form.lastname = ''
+      this.form.password = ''
     },
   },
   computed: {
     samePasswords() {
-      return this.password === this.passwordRepeat
+      return this.form.password === this.form.passwordRepeat
     },
     passwordsFilled() {
-      return this.password !== '' && this.passwordRepeat !== ''
+      return this.form.password !== '' && this.form.passwordRepeat !== ''
     },
     namesFilled() {
       return (
-        this.model.firstname !== '' &&
-        this.model.firstname.length > 2 &&
-        this.model.lastname !== '' &&
-        this.model.lastname.length > 1
+        this.form.firstname !== '' &&
+        this.form.firstname.length > 2 &&
+        this.form.lastname !== '' &&
+        this.form.lastname.length > 1
       )
     },
     emailFilled() {
-      return this.model.email !== ''
+      return this.form.email !== ''
     },
     rules() {
       return [
@@ -346,7 +328,7 @@ export default {
     passwordValidation() {
       const errors = []
       for (const condition of this.rules) {
-        if (!condition.regex.test(this.password)) {
+        if (!condition.regex.test(this.form.password)) {
           errors.push(condition.message)
         }
       }
diff --git a/frontend/src/views/Pages/ResetPassword.vue b/frontend/src/views/Pages/ResetPassword.vue
index 99892612c..e8982b170 100644
--- a/frontend/src/views/Pages/ResetPassword.vue
+++ b/frontend/src/views/Pages/ResetPassword.vue
@@ -43,10 +43,10 @@
                   </b-form-group>
 
                   <base-input
-                    :label="$t('form.password_repeat')"
+                    :label="$t('form.passwordRepeat')"
                     type="password"
                     name="password-repeat"
-                    :placeholder="$t('form.password_repeat')"
+                    :placeholder="$t('form.passwordRepeat')"
                     prepend-icon="ni ni-lock-circle-open"
                     v-model.lazy="checkPassword"
                     :class="{ valid: passwordValidation.valid }"