From 836cd63cfd023bd294785382909f6fbc2501a310 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 23 Oct 2019 10:56:42 +0200
Subject: [PATCH] Style inputs, make registration page public

---
 client/package-lock.json          | 35 ++++++++++++++------
 client/src/pages/login.vue        |  7 ++--
 client/src/pages/registration.vue | 53 +++++++++++++++----------------
 client/src/router/index.js        | 10 +++++-
 4 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index cdca0119..10fba723 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11428,7 +11428,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -11456,6 +11457,7 @@
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -11470,7 +11472,8 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -11481,7 +11484,8 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -11598,7 +11602,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -11610,6 +11615,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -11624,6 +11630,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -11631,12 +11638,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -11655,6 +11664,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -11735,7 +11745,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -11747,6 +11758,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -11832,7 +11844,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -11868,6 +11881,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -11887,6 +11901,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -11930,12 +11945,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
diff --git a/client/src/pages/login.vue b/client/src/pages/login.vue
index a2eea1e3..230efab6 100644
--- a/client/src/pages/login.vue
+++ b/client/src/pages/login.vue
@@ -59,10 +59,11 @@
         <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="registration">
+      <div class="registration">
         <p class="registration__text">Haben Sie noch kein Konto?</p>
-        <a class="registration__link text-link" href="/accounts/password_reset/">Jetzt registrieren</a>
-      </div-->
+        <router-link class="registration__link text-link" :to="{name: 'registration'}">Jetzt registrieren
+        </router-link>
+      </div>
     </form>
   </div>
 </template>
diff --git a/client/src/pages/registration.vue b/client/src/pages/registration.vue
index 5ccdc0c1..ffea32cf 100644
--- a/client/src/pages/registration.vue
+++ b/client/src/pages/registration.vue
@@ -2,8 +2,8 @@
   <div class="registration">
     <h1 class="registration__title">Registrieren Sie ihr persönliches Konto.</h1>
     <form class="registration__form registration-form" novalidate @submit.prevent="validateBeforeSubmit">
-      <div class="registration-form__field sbform-input">
-        <label for="firstname" class="sbform-input__label">Vorname</label>
+      <div class="registration-form__field skillboxform-input">
+        <label for="firstname" class="skillboxform-input__label">Vorname</label>
         <input
           id="firstname"
           name="firstname"
@@ -11,25 +11,25 @@
           v-model="firstname"
           data-vv-as="Vorname"
           v-validate="'required'"
-          :class="{ 'sbform-input__input--error': errors.has('firstname') }"
-          class="change-form__firstname skillbox-input sbform-input__input"
+          :class="{ 'skillboxform-input__input--error': errors.has('firstname') }"
+          class="change-form__firstname skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="firstname-input"
         />
         <small
           v-if="errors.has('firstname') && submitted"
-          class="sbform-input__error"
+          class="skillboxform-input__error"
           data-cy="firstname-local-errors"
         >{{ errors.first('firstname') }}</small>
         <small
           v-for="error in firstnameErrors"
           :key="error"
-          class="sbform-input__error"
+          class="skillboxform-input__error"
           data-cy="firstname-remote-errors"
         >{{ error }}</small>
       </div>
-      <div class="change-form__field sbform-input">
-        <label for="lastname" class="sbform-input__label">Nachname</label>
+      <div class="change-form__field skillboxform-input">
+        <label for="lastname" class="skillboxform-input__label">Nachname</label>
         <input
           id="lastname"
           name="lastname"
@@ -37,25 +37,25 @@
           v-model="lastname"
           data-vv-as="Nachname"
           v-validate="'required'"
-          :class="{ 'sbform-input__input--error': errors.has('lastname') }"
-          class="change-form__new skillbox-input sbform-input__input"
+          :class="{ 'skillboxform-input__input--error': errors.has('lastname') }"
+          class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="lastname-input"
         />
         <small
           v-if="errors.has('lastname') && submitted"
-          class="sbform-input__error"
+          class="skillboxform-input__error"
           data-cy="lastname-local-errors"
         >{{ errors.first('lastname') }}</small>
         <small
           v-for="error in lastnameErrors"
           :key="error"
-          class="sbform-input__error"
+          class="skillboxform-input__error"
           data-cy="lastname-remote-errors"
         >{{ error }}</small>
       </div>
-      <div class="change-form__field sbform-input">
-        <label for="email" class="sbform-input__label">E-Mail</label>
+      <div class="change-form__field skillboxform-input">
+        <label for="email" class="skillboxform-input__label">E-Mail</label>
         <input
           id="email"
           name="email"
@@ -63,25 +63,25 @@
           v-model="email"
           data-vv-as="E-Mail"
           v-validate="'required|email'"
-          :class="{ 'sbform-input__input--error': errors.has('email') }"
-          class="change-form__new skillbox-input sbform-input__input"
+          :class="{ 'skillboxform-input__input--error': errors.has('email') }"
+          class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="email-input"
         />
         <small
           v-if="errors.has('email') && submitted"
-          class="sbform-input__error"
+          class="skillboxform-input__error"
           data-cy="email-local-errors"
         >{{ errors.first('email') }}</small>
         <small
           v-for="error in emailErrors"
           :key="error"
-          class="sbform-input__error"
+          class="skillboxform-input__error"
           data-cy="email-remote-errors"
         >{{ error }}</small>
       </div>
-      <div class="change-form__field sbform-input">
-        <label for="licenseKey" class="sbform-input__label">Lizenz</label>
+      <div class="change-form__field skillboxform-input">
+        <label for="licenseKey" class="skillboxform-input__label">Lizenz</label>
         <input
           id="licenseKey"
           name="licenseKey"
@@ -89,25 +89,25 @@
           v-model="licenseKey"
           data-vv-as="Lizenz"
           v-validate="'required'"
-          :class="{ 'sbform-input__input--error': errors.has('licenseKey') }"
-          class="change-form__new skillbox-input sbform-input__input"
+          :class="{ 'skillboxform-input__input--error': errors.has('licenseKey') }"
+          class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="licenseKey-input"
         />
         <small
           v-if="errors.has('licenseKey') && submitted"
-          class="sbform-input__error"
+          class="skillboxform-input__error"
           data-cy="licenseKey-local-errors"
         >{{ errors.first('licenseKey') }}</small>
         <small
           v-for="error in licenseKeyErrors"
           :key="error"
-          class="sbform-input__error"
+          class="skillboxform-input__error"
           data-cy="licenseKey-remote-errors"
         >{{ error }}</small>
       </div>
-      <div class="sbform-input">
-        <small class="sbform-input__error" data-cy="registration-error" v-if="registrationError">{{registrationError}}</small>
+      <div class="skillboxform-input">
+        <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="registration-button">Jetzt registration</button>
@@ -229,7 +229,6 @@ export default {
 }
 
 .registration {
-  margin-top: $large-spacing;
   &__text {
     font-family: $sans-serif-font-family;
     margin-bottom: $small-spacing;
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 3a3c754a..44ce2b7d 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -118,7 +118,15 @@ const routes = [
     props: true,
     meta: {layout: 'simple'}
   },
-  {path: '/register', component: registration},
+  {
+    path: '/register',
+    component: registration,
+    name: 'registration',
+    meta: {
+      public: true,
+      layout: 'public',
+    }
+  },
   {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}
 ];