From 7f118a9161e50a035dcad59728112c44d3382967 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 27 May 2020 16:24:37 +0200
Subject: [PATCH] Fix eslint issues

---
 client/src/layouts/DefaultFooter.vue    |  25 ++-
 client/src/layouts/PublicLayout.vue     |   6 +-
 client/src/pages/beta-login.vue         |  80 ++++++----
 client/src/pages/check-email.vue        |   4 +-
 client/src/pages/email-verification.vue |   8 +-
 client/src/pages/forgot-password.vue    |  12 +-
 client/src/pages/hello.vue              |  43 +++--
 client/src/pages/license-activation.vue |  69 +++++----
 client/src/pages/login.vue              |  29 ++--
 client/src/pages/registration.vue       | 198 ++++++++++++++----------
 10 files changed, 288 insertions(+), 186 deletions(-)

diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue
index 04839d31..0b2a693b 100644
--- a/client/src/layouts/DefaultFooter.vue
+++ b/client/src/layouts/DefaultFooter.vue
@@ -25,11 +25,26 @@
     </div>
     <div class="default-footer__section">
       <div class="default-footer__links">
-        <a href="https://www.myskillbox.ch/datenschutz" target="_blank" class="default-footer__link">Datenschutz</a>
-        <a href="https://www.myskillbox.ch/impressum" target="_blank" class="default-footer__link">Impressum</a>
-        <a href="https://www.hep-verlag.ch/agb" target="_blank" class="default-footer__link">AGB</a>
-        <a href="https://www.hep-verlag.ch/kontakt-verlag" target="_blank" class="default-footer__link">Kontakt</a>
-        <a href="https://www.hep-verlag.ch/kundenservice" target="_blank" class="default-footer__link">Hilfe</a>
+        <a
+          href="https://www.myskillbox.ch/datenschutz"
+          target="_blank"
+          class="default-footer__link">Datenschutz</a>
+        <a
+          href="https://www.myskillbox.ch/impressum"
+          target="_blank"
+          class="default-footer__link">Impressum</a>
+        <a
+          href="https://www.hep-verlag.ch/agb"
+          target="_blank"
+          class="default-footer__link">AGB</a>
+        <a
+          href="https://www.hep-verlag.ch/kontakt-verlag"
+          target="_blank"
+          class="default-footer__link">Kontakt</a>
+        <a
+          href="https://www.hep-verlag.ch/kundenservice"
+          target="_blank"
+          class="default-footer__link">Hilfe</a>
       </div>
     </div>
   </footer>
diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index 723ef650..84163064 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="layout layout--public public">
     <div class="public__logo">
-      <logo></logo>
+      <logo/>
     </div>
-    <router-view class="public__content layout__content"></router-view>
-    <default-footer class="skillbox__footer public__footer footer"></default-footer>
+    <router-view class="public__content layout__content"/>
+    <default-footer class="skillbox__footer public__footer footer"/>
   </div>
 </template>
 <script>
diff --git a/client/src/pages/beta-login.vue b/client/src/pages/beta-login.vue
index 56559ec1..4218865d 100644
--- a/client/src/pages/beta-login.vue
+++ b/client/src/pages/beta-login.vue
@@ -1,69 +1,85 @@
 <template>
   <div class="login public-page">
     <h1 class="login__title public-page__title">Melden Sie sich jetzt an</h1>
-    <form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit">
+    <form
+      class="login__form login-form"
+      novalidate
+      @submit.prevent="validateBeforeSubmit">
       <div class="login-form__field skillboxform-input">
-        <label for="email" class="skillboxform-input__label">E-Mail</label>
+        <label
+          for="email"
+          class="skillboxform-input__label">E-Mail</label>
         <input
-          id="email"
-          name="email"
-          type="text"
           v-model="email"
           v-validate="'required'"
-          data-vv-as="E-Mail"
           :class="{ 'skillboxform-input__input--error': errors.has('email') }"
+          name="email"
+          type="text"
+          data-vv-as="E-Mail"
           class="change-form__email skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="email-input"
-        />
+          id="email"
+        >
         <small
-          v-if="errors.has('email') && submitted"
           class="skillboxform-input__error"
           data-cy="email-local-errors"
+          v-if="errors.has('email') && submitted"
         >{{ errors.first('email') }}</small>
         <small
-          v-for="error in emailErrors"
           :key="error"
           class="skillboxform-input__error"
           data-cy="email-remote-errors"
+          v-for="error in emailErrors"
         >{{ error }}</small>
       </div>
       <div class="change-form__field skillboxform-input">
-        <label for="pw" class="skillboxform-input__label">Passwort</label>
+        <label
+          for="pw"
+          class="skillboxform-input__label">Passwort</label>
         <input
-          id="pw"
-          name="password"
-          type="password"
-          data-vv-as="Passwort"
           v-model="password"
           v-validate="'required'"
           :class="{ 'skillboxform-input__input--error': errors.has('password') }"
+          name="password"
+          type="password"
+          data-vv-as="Passwort"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="password-input"
-        />
+          id="pw"
+        >
         <small
-          v-if="errors.has('password') && submitted"
           class="skillboxform-input__error"
           data-cy="password-local-errors"
+          v-if="errors.has('password') && submitted"
         >{{ errors.first('password') }}</small>
         <small
-          v-for="error in passwordErrors"
           :key="error"
           class="skillboxform-input__error"
           data-cy="password-remote-errors"
+          v-for="error in passwordErrors"
         >{{ error }}</small>
       </div>
       <div class="skillboxform-input">
-        <small class="skillboxform-input__error" data-cy="login-error" v-if="loginError">{{loginError}}</small>
+        <small
+          class="skillboxform-input__error"
+          data-cy="login-error"
+          v-if="loginError">{{ loginError }}</small>
       </div>
       <div class="actions">
-        <button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button>
-        <a class="actions__reset text-link" href="/accounts/password_reset/">Passwort vergessen?</a>
+        <button
+          class="button button--primary button--big actions__submit"
+          data-cy="login-button">Anmelden</button>
+        <a
+          class="actions__reset text-link"
+          href="/accounts/password_reset/">Passwort vergessen?</a>
       </div>
       <div class="account-link">
         <p class="account-link__text">Haben Sie noch kein Konto?</p>
-        <router-link class="account-link__link text-link" :to="{name: 'registration'}">Jetzt registrieren
+        <router-link
+          :to="{name: 'registration'}"
+          class="account-link__link text-link">Jetzt registrieren
         </router-link>
       </div>
     </form>
@@ -76,6 +92,17 @@ import BETA_LOGIN_MUTATION from '@/graphql/gql/mutations/betaLogin.gql';
 export default {
   components: {},
 
+  data() {
+    return {
+      email: '',
+      password: '',
+      emailErrors: [],
+      passwordErrors: [],
+      loginError: '',
+      submitted: false
+    };
+  },
+
   methods: {
     validateBeforeSubmit() {
       this.$validator.validate().then(result => {
@@ -130,17 +157,6 @@ export default {
       this.$validator.reset();
     }
   },
-
-  data() {
-    return {
-      email: '',
-      password: '',
-      emailErrors: [],
-      passwordErrors: [],
-      loginError: '',
-      submitted: false
-    };
-  }
 };
 </script>
 
diff --git a/client/src/pages/check-email.vue b/client/src/pages/check-email.vue
index 03211c62..29771e2e 100644
--- a/client/src/pages/check-email.vue
+++ b/client/src/pages/check-email.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="check-email">
-    <main class="check-email__content content" data-cy="email-check">
+    <main
+      class="check-email__content content"
+      data-cy="email-check">
       <p class="content__instructions">Eine Email ist auf dem Weg, bitte überprüfen sie ihre E-mail Konto.</p>
     </main>
 
diff --git a/client/src/pages/email-verification.vue b/client/src/pages/email-verification.vue
index 7550cefb..5cc9b955 100644
--- a/client/src/pages/email-verification.vue
+++ b/client/src/pages/email-verification.vue
@@ -2,8 +2,12 @@
   <div class="emailconfirmation public-page">
     <h1 class="emailconfirmation__title public-page__title">Überprüfung der E-Mail Adresse</h1>
     <p v-if="loading">Der Verifikationscode wird überprüft.</p>
-    <p v-if="showOkMessage" data-cy="code-ok-msg">Der Verifikationscode ist gültig. Sie werden weitergeleitet.</p>
-    <p v-if="showErrorMessage" data-cy="code-nok-msg">{{errorMessage}}</p>
+    <p
+      data-cy="code-ok-msg"
+      v-if="showOkMessage">Der Verifikationscode ist gültig. Sie werden weitergeleitet.</p>
+    <p
+      data-cy="code-nok-msg"
+      v-if="showErrorMessage">{{ errorMessage }}</p>
 
   </div>
 </template>
diff --git a/client/src/pages/forgot-password.vue b/client/src/pages/forgot-password.vue
index 981712fb..e1f29d4c 100644
--- a/client/src/pages/forgot-password.vue
+++ b/client/src/pages/forgot-password.vue
@@ -1,15 +1,21 @@
 <template>
   <div class="forgot-password public-page">
     <header class="info-header">
-      <h1 class="forgot-password__title public-page__title" data-cy="forgot-password">Passwort vergessen?</h1>
+      <h1
+        class="forgot-password__title public-page__title"
+        data-cy="forgot-password">Passwort vergessen?</h1>
     </header>
     <section class="forgot-password__section forgot-password__text">
       <p class="forgot-info">Ihr Benutzerkonto wird durch den Hep Verlag verwaltet und deshalb können Sie das Passwort ausschliesslicht auf
-        <a class="hep-link" href="https://www.hep-verlag.ch">www.hep-verlag.ch</a> verwaltet werden.</p>
+        <a
+          class="hep-link"
+          href="https://www.hep-verlag.ch">www.hep-verlag.ch</a> verwaltet werden.</p>
       <p class="forgot-info">Melden Sie sich mit der gleichen E-Mail-Adresse und dem gleichen </p>
     </section>
     <section class="forgot-password__section forgot-password__link">
-      <a class="button button--primary button--big actions__submit" href="https://www.hep-verlag.ch">Hep Verlag Webseite besuchen</a>
+      <a
+        class="button button--primary button--big actions__submit"
+        href="https://www.hep-verlag.ch">Hep Verlag Webseite besuchen</a>
     </section>
   </div>
 </template>
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index 3523ec92..61902b31 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -1,31 +1,40 @@
 <template>
   <div class="hello public-page">
-    <h1 class="hello__title public-page__title" data-cy="hello-title">Wollen sie mySkillbox jetzt im Unterricht verwenden?</h1>
-    <form class="hello__form hello-form" novalidate @submit.prevent="validateBeforeSubmit">
+    <h1
+      class="hello__title public-page__title"
+      data-cy="hello-title">Wollen sie mySkillbox jetzt im Unterricht verwenden?</h1>
+    <form
+      class="hello__form hello-form"
+      novalidate
+      @submit.prevent="validateBeforeSubmit">
       <div class="hello-form__field skillboxform-input">
-        <label for="email" class="skillboxform-input__label">E-Mail</label>
+        <label
+          for="email"
+          class="skillboxform-input__label">E-Mail</label>
         <input
-          id="email"
-          name="email"
-          type="email"
           v-model="email"
           v-validate="'required'"
-          data-vv-as="E-Mail"
           :class="{ 'skillboxform-input__input--error': errors.has('email') }"
+          name="email"
+          type="email"
+          data-vv-as="E-Mail"
           class="change-form__email skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="email-input"
           placeholder="E-Mail eingeben"
           tabindex="0"
-        />
+          id="email"
+        >
         <small
-          v-if="errors.has('email') && submitted"
           class="skillboxform-input__error"
           data-cy="email-local-errors"
+          v-if="errors.has('email') && submitted"
         >{{ errors.first('email') }}</small>
       </div>
       <div class="actions">
-        <button class="button button--primary button--big actions__submit" data-cy="hello-button">Los geht's</button>
+        <button
+          class="button button--primary button--big actions__submit"
+          data-cy="hello-button">Los geht's</button>
       </div>
     </form>
   </div>
@@ -39,6 +48,13 @@ import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
 export default {
   components: {},
 
+  data() {
+    return {
+      email: '',
+      submitted: false
+    };
+  },
+
   methods: {
     validateBeforeSubmit() {
       this.$validator.validate().then(result => {
@@ -69,13 +85,6 @@ export default {
       this.$validator.reset();
     }
   },
-
-  data() {
-    return {
-      email: '',
-      submitted: false
-    };
-  },
 };
 </script>
 
diff --git a/client/src/pages/license-activation.vue b/client/src/pages/license-activation.vue
index 633b657f..0484cd1e 100644
--- a/client/src/pages/license-activation.vue
+++ b/client/src/pages/license-activation.vue
@@ -1,49 +1,60 @@
 <template>
   <div class="license-activation public-page">
     <header class="info-header">
-      <p class="info-header__text small-emph">Für <span class="info-header__emph">{{me.email}}</span> haben wir keine gültige Lizenz gefunden</p>
+      <p class="info-header__text small-emph">Für <span class="info-header__emph">{{ me.email }}</span> haben wir keine gültige Lizenz gefunden</p>
     </header>
     <section class="coupon">
-      <form class="license-activation__form license-activation-form" novalidate @submit.prevent="validateBeforeSubmit">
+      <form
+        class="license-activation__form license-activation-form"
+        novalidate
+        @submit.prevent="validateBeforeSubmit">
         <h2>Geben Sie einen Coupon-Code ein</h2>
         <div class="change-form__field skillboxform-input">
-          <label for="coupon" class="skillboxform-input__label">Coupon-Code</label>
+          <label
+            for="coupon"
+            class="skillboxform-input__label">Coupon-Code</label>
           <input
-            id="coupon"
-            name="coupon"
-            type="coupon"
-            data-vv-as="Coupon"
             v-model="coupon"
             v-validate="'required'"
             :class="{ 'skillboxform-input__input--error': errors.has('coupon') }"
+            name="coupon"
+            type="coupon"
+            data-vv-as="Coupon"
             class="change-form__new skillbox-input skillboxform-input__input"
             autocomplete="off"
             data-cy="coupon-input"
             tabindex="0"
-          />
+            id="coupon"
+          >
           <small
-            v-if="errors.has('coupon') && submitted"
             class="skillboxform-input__error"
             data-cy="coupon-local-errors"
+            v-if="errors.has('coupon') && submitted"
           >{{ errors.first('coupon') }}</small>
           <small
-            v-for="error in couponErrors"
             :key="error"
             class="skillboxform-input__error"
             data-cy="coupon-remote-errors"
+            v-for="error in couponErrors"
           >{{ error }}</small>
         </div>
         <div class="actions">
-          <button class="button button--primary button--big actions__submit" data-cy="coupon-button">Coupon abschicken</button>
+          <button
+            class="button button--primary button--big actions__submit"
+            data-cy="coupon-button">Coupon abschicken</button>
         </div>
       </form>
     </section>
     <section class="get-license">
       <h2>Oder, kaufen Sie eine Lizenz</h2>
-        <ul class="license-links">
-          <li class="license-links__item"><a :href="teacherEditionUrl" class="hep-link">mySkillobx für Lehrpersonen</a></li>
-          <li class="license-links__item"><a :href="studentEditionUrl" class="hep-link">mySkillobx für Lernende</a></li>
-        </ul>
+      <ul class="license-links">
+        <li class="license-links__item"><a
+          :href="teacherEditionUrl"
+          class="hep-link">mySkillobx für Lehrpersonen</a></li>
+        <li class="license-links__item"><a
+          :href="studentEditionUrl"
+          class="hep-link">mySkillobx für Lernende</a></li>
+      </ul>
     </section>
   </div>
 </template>
@@ -56,6 +67,20 @@ import ME_QUERY from '@/graphql/gql/meQuery.gql';
 
 export default {
   mixins: [me],
+
+  data() {
+    return {
+      coupon: '',
+      couponErrors: [],
+      loginError: '',
+      submitted: false,
+      me: {
+        email: ''
+      },
+      teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
+      studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`
+    };
+  },
   methods: {
     validateBeforeSubmit() {
       this.$validator.validate().then(result => {
@@ -99,20 +124,6 @@ export default {
       this.$validator.reset();
     }
   },
-
-  data() {
-    return {
-      coupon: '',
-      couponErrors: [],
-      loginError: '',
-      submitted: false,
-      me: {
-        email: ''
-      },
-      teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
-      studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`
-    };
-  },
 };
 </script>
 
diff --git a/client/src/pages/login.vue b/client/src/pages/login.vue
index 85581fbc..cd132d4d 100644
--- a/client/src/pages/login.vue
+++ b/client/src/pages/login.vue
@@ -2,10 +2,15 @@
   <div class="login public-page">
     <header class="info-header">
       <p class="info-header__text small-emph">Super wir haben für <span
-        class="info-header__emph">{{helloEmail.email}}</span> ein Hep Konto gefunden</p>
-      <h1 class="login__title public-page__title" data-cy="login-title">Bitte geben Sie das passende Passwort ein</h1>
+        class="info-header__emph">{{ helloEmail.email }}</span> ein Hep Konto gefunden</p>
+      <h1
+        class="login__title public-page__title"
+        data-cy="login-title">Bitte geben Sie das passende Passwort ein</h1>
     </header>
-    <form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit">
+    <form
+      class="login__form login-form"
+      novalidate
+      @submit.prevent="validateBeforeSubmit">
       <div class="change-form__field skillboxform-input">
         <label
           for="password"
@@ -14,7 +19,6 @@
           v-model="password"
           v-validate="'required'"
           :class="{ 'skillboxform-input__input--error': errors.has('password') }"
-          id="password"
           name="password"
           type="password"
           data-vv-as="Passwort"
@@ -22,19 +26,26 @@
           autocomplete="off"
           data-cy="password-input"
           tabindex="0"
-        />
+          id="password"
+        >
         <small
-          v-for="error in passwordErrors"
           :key="error"
           class="skillboxform-input__error"
           data-cy="password-errors"
+          v-for="error in passwordErrors"
         >{{ error }}</small>
       </div>
       <div class="actions">
-        <button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button>
-        <router-link class="button button--big actions__submit back-button" :to="{name: 'hello'}">Abbrechen
+        <button
+          class="button button--primary button--big actions__submit"
+          data-cy="login-button">Anmelden</button>
+        <router-link
+          :to="{name: 'hello'}"
+          class="button button--big actions__submit back-button">Abbrechen
         </router-link>
-        <router-link class="actions__reset text-link" :to="{name: 'forgotPassword'}">Passwort vergessen?</router-link>
+        <router-link
+          :to="{name: 'forgotPassword'}"
+          class="actions__reset text-link">Passwort vergessen?</router-link>
       </div>
     </form>
   </div>
diff --git a/client/src/pages/registration.vue b/client/src/pages/registration.vue
index bcdaa8a9..be5d39fe 100644
--- a/client/src/pages/registration.vue
+++ b/client/src/pages/registration.vue
@@ -1,203 +1,231 @@
 <template>
   <div class="registration public-page">
     <header class="info-header">
-      <p class="info-header__text small-emph">Für <span class="info-header__emph">{{helloEmail}}</span> haben wir kein Hep Konto gefunden.</p>
-      <h1 class="registration__title public-page__title" data-cy="registration-title">Damit Sie mySkillbox verwenden können, müssen Sie ein Konto erstellen.</h1>
+      <p class="info-header__text small-emph">Für <span class="info-header__emph">{{ helloEmail }}</span> haben wir kein Hep Konto gefunden.</p>
+      <h1
+        class="registration__title public-page__title"
+        data-cy="registration-title">Damit Sie mySkillbox verwenden können, müssen Sie ein Konto erstellen.</h1>
     </header>
-    <form class="registration__form registration-form" novalidate @submit.prevent="validateBeforeSubmit">
+    <form
+      class="registration__form registration-form"
+      novalidate
+      @submit.prevent="validateBeforeSubmit">
       <div class="registration-form__field skillboxform-input">
-       <div class="registration-form__field skillboxform-input">
-        <label for="prefix" class="skillboxform-input__label">Anrede</label>
-        <select
-          id="prefix"
-          name="prefix"
-          v-model="prefix"
-          data-vv-as="Prefix"
-          v-validate="'required'"
-          :class="{ 'skillboxform-input__input--error': errors.has('prefix') }"
-          class="change-form__prefix skillbox-input skillboxform-input__input skillbox-dropdown"
-          autocomplete="off"
-          data-cy="prefix-selection"
-        >
-          <option value="Herr" selected>Herr</option>
-          <option value="Frau">Frau</option>
-        </select>
-      </div>
-        <label for="firstname" class="skillboxform-input__label">Vorname</label>
+        <div class="registration-form__field skillboxform-input">
+          <label
+            for="prefix"
+            class="skillboxform-input__label">Anrede</label>
+          <select
+            v-model="prefix"
+            v-validate="'required'"
+            :class="{ 'skillboxform-input__input--error': errors.has('prefix') }"
+            name="prefix"
+            data-vv-as="Prefix"
+            class="change-form__prefix skillbox-input skillboxform-input__input skillbox-dropdown"
+            autocomplete="off"
+            data-cy="prefix-selection"
+            id="prefix"
+          >
+            <option
+              value="Herr"
+              selected>Herr</option>
+            <option value="Frau">Frau</option>
+          </select>
+        </div>
+        <label
+          for="firstname"
+          class="skillboxform-input__label">Vorname</label>
         <input
-          id="firstname"
-          name="firstname"
-          type="text"
           v-model="firstname"
-          data-vv-as="Vorname"
           v-validate="'required'"
           :class="{ 'skillboxform-input__input--error': errors.has('firstname') }"
+          name="firstname"
+          type="text"
+          data-vv-as="Vorname"
           class="change-form__firstname skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="firstname-input"
-        />
+          id="firstname"
+        >
         <small
-          v-if="errors.has('firstname') && submitted"
           class="skillboxform-input__error"
           data-cy="firstname-local-errors"
+          v-if="errors.has('firstname') && submitted"
         >{{ errors.first('firstname') }}</small>
         <small
-          v-for="error in firstnameErrors"
           :key="error"
           class="skillboxform-input__error"
           data-cy="firstname-remote-errors"
+          v-for="error in firstnameErrors"
         >{{ error }}</small>
       </div>
       <div class="change-form__field skillboxform-input">
-        <label for="lastname" class="skillboxform-input__label">Nachname</label>
+        <label
+          for="lastname"
+          class="skillboxform-input__label">Nachname</label>
         <input
-          id="lastname"
-          name="lastname"
-          type="text"
           v-model="lastname"
-          data-vv-as="Nachname"
           v-validate="'required'"
           :class="{ 'skillboxform-input__input--error': errors.has('lastname') }"
+          name="lastname"
+          type="text"
+          data-vv-as="Nachname"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="lastname-input"
-        />
+          id="lastname"
+        >
         <small
-          v-if="errors.has('lastname') && submitted"
           class="skillboxform-input__error"
           data-cy="lastname-local-errors"
+          v-if="errors.has('lastname') && submitted"
         >{{ errors.first('lastname') }}</small>
         <small
-          v-for="error in lastnameErrors"
           :key="error"
           class="skillboxform-input__error"
           data-cy="lastname-remote-errors"
+          v-for="error in lastnameErrors"
         >{{ error }}</small>
       </div>
       <div class="change-form__field skillboxform-input">
-        <label for="street" class="skillboxform-input__label">Strasse</label>
+        <label
+          for="street"
+          class="skillboxform-input__label">Strasse</label>
         <input
-          id="street"
-          name="street"
-          type="text"
           v-model="street"
-          data-vv-as="Strasse"
           v-validate="'required'"
           :class="{ 'skillboxform-input__input--error': errors.has('street') }"
+          name="street"
+          type="text"
+          data-vv-as="Strasse"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="street-input"
-        />
+          id="street"
+        >
         <small
-          v-if="errors.has('street') && submitted"
           class="skillboxform-input__error"
           data-cy="street-local-errors"
+          v-if="errors.has('street') && submitted"
         >{{ errors.first('street') }}</small>
         <small
-          v-for="error in streetErrors"
           :key="error"
           class="skillboxform-input__error"
           data-cy="street-remote-errors"
+          v-for="error in streetErrors"
         >{{ error }}</small>
       </div>
       <div class="change-form__field skillboxform-input">
-        <label for="city" class="skillboxform-input__label">Ort</label>
+        <label
+          for="city"
+          class="skillboxform-input__label">Ort</label>
         <input
-          id="city"
-          name="city"
-          type="text"
           v-model="city"
-          data-vv-as="Ort"
           v-validate="'required'"
           :class="{ 'skillboxform-input__input--error': errors.has('city') }"
+          name="city"
+          type="text"
+          data-vv-as="Ort"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="city-input"
-        />
+          id="city"
+        >
         <small
-          v-if="errors.has('city') && submitted"
           class="skillboxform-input__error"
           data-cy="city-local-errors"
+          v-if="errors.has('city') && submitted"
         >{{ errors.first('city') }}</small>
         <small
-          v-for="error in cityErrors"
           :key="error"
           class="skillboxform-input__error"
           data-cy="city-remote-errors"
+          v-for="error in cityErrors"
         >{{ error }}</small>
       </div>
       <div class="change-form__field skillboxform-input">
-        <label for="postcode" class="skillboxform-input__label">Postleitzahl</label>
+        <label
+          for="postcode"
+          class="skillboxform-input__label">Postleitzahl</label>
         <input
-          id="postcode"
-          name="postcode"
-          type="text"
           v-model="postcode"
-          data-vv-as="Postleitzahl"
           v-validate="'required'"
           :class="{ 'skillboxform-input__input--error': errors.has('postcode') }"
+          name="postcode"
+          type="text"
+          data-vv-as="Postleitzahl"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="postcode-input"
-        />
+          id="postcode"
+        >
         <small
-          v-if="errors.has('postcode') && submitted"
           class="skillboxform-input__error"
           data-cy="postcode-local-errors"
+          v-if="errors.has('postcode') && submitted"
         >{{ errors.first('postcode') }}</small>
         <small
-          v-for="error in postcodeErrors"
           :key="error"
           class="skillboxform-input__error"
           data-cy="postcode-remote-errors"
+          v-for="error in postcodeErrors"
         >{{ error }}</small>
       </div>
       <div class="change-form__field skillboxform-input">
-        <label for="password" class="skillboxform-input__label">Passwort</label>
+        <label
+          for="password"
+          class="skillboxform-input__label">Passwort</label>
         <input
-          id="password"
+          v-model="password"
+          v-validate="'required|strongPassword'"
+          :class="{ 'skillboxform-input__input--error': errors.has('password') && submitted }"
           name="password"
           type="text"
-          v-model="password"
           data-vv-as="Passwort"
-          v-validate="'required|strongPassword'"
-          :class="{ 'skillboxform-input__input--error': errors.has('password')  && submitted }"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="password-input"
+          id="password"
           ref="password"
-        />
+        >
         <small
-          v-if="errors.has('password') && submitted"
           class="skillboxform-input__error"
           data-cy="password-local-errors"
+          v-if="errors.has('password') && submitted"
         >{{ errors.first('password') }}</small>
       </div>
       <div class="change-form__field skillboxform-input">
-        <label for="password2" class="skillboxform-input__label">Passwort wiederholen</label>
+        <label
+          for="password2"
+          class="skillboxform-input__label">Passwort wiederholen</label>
         <input
-          id="passwordConfirmation"
-          name="passwordConfirmation"
-          type="text"
           v-model="passwordConfirmation"
-          data-vv-as="Passwort wiederholen"
           v-validate="'required|confirmed:password'"
           :class="{ 'skillboxform-input__input--error': errors.has('passwordConfirmation') && submitted }"
+          name="passwordConfirmation"
+          type="text"
+          data-vv-as="Passwort wiederholen"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="passwordConfirmation-input"
-        />
+          id="passwordConfirmation"
+        >
         <small
-          v-if="errors.has('passwordConfirmation') && submitted"
           class="skillboxform-input__error"
           data-cy="passwordConfirmation-local-errors"
+          v-if="errors.has('passwordConfirmation') && submitted"
         >{{ errors.first('passwordConfirmation') }}</small>
       </div>
       <div class="skillboxform-input">
-        <small class="skillboxform-input__error" data-cy="registration-error" v-if="registrationError">{{registrationError}}</small>
+        <small
+          class="skillboxform-input__error"
+          data-cy="registration-error"
+          v-if="registrationError">{{ registrationError }}</small>
       </div>
       <div class="actions">
-        <button class="button button--primary button--big actions__submit" data-cy="register-button">Konto erstellen</button>
+        <button
+          class="button button--primary button--big actions__submit"
+          data-cy="register-button">Konto erstellen</button>
       </div>
 
     </form>
@@ -235,6 +263,15 @@ function initialData() {
 export default {
   components: {},
 
+  data() {
+    return Object.assign(
+      {
+        helloEmail: ''
+      },
+      initialData()
+    );
+  },
+
   methods: {
     validateBeforeSubmit() {
       this.$validator.validate().then(result => {
@@ -284,15 +321,6 @@ export default {
     }
   },
 
-  data() {
-    return Object.assign(
-      {
-        helloEmail: ''
-      },
-      initialData()
-    );
-  },
-
   apollo: {
     helloEmail: {
       query: HELLO_EMAIL,