From a0eeec4e187a5aca75cac8e7b1fe76b303883a02 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 6 Feb 2020 15:14:35 +0100
Subject: [PATCH] Add extra fields to registration, remove unused fields

---
 .../gql/local/mutations/helloEmail.gql        |   3 +
 client/src/graphql/resolvers.js               |   4 +-
 client/src/main.js                            |   3 +-
 client/src/pages/hello.vue                    |   4 +-
 client/src/pages/login.vue                    | 129 ++++++++-------
 client/src/pages/registration.vue             | 147 +++++++-----------
 6 files changed, 128 insertions(+), 162 deletions(-)
 create mode 100644 client/src/graphql/gql/local/mutations/helloEmail.gql

diff --git a/client/src/graphql/gql/local/mutations/helloEmail.gql b/client/src/graphql/gql/local/mutations/helloEmail.gql
new file mode 100644
index 00000000..b171cb1b
--- /dev/null
+++ b/client/src/graphql/gql/local/mutations/helloEmail.gql
@@ -0,0 +1,3 @@
+mutation($helloEmail: String!) {
+  helloEmail(email: $helloEmail) @client
+}
diff --git a/client/src/graphql/resolvers.js b/client/src/graphql/resolvers.js
index ae68098a..27a60133 100644
--- a/client/src/graphql/resolvers.js
+++ b/client/src/graphql/resolvers.js
@@ -9,9 +9,9 @@ export const resolvers = {
       cache.writeQuery({query: SCROLL_POSITION, data});
       return data.scrollPosition;
     },
-    helloEmail: (_, {helloEmail}, {cache}) => {
+    helloEmail: (_, {email}, {cache}) => {
       const data = cache.readQuery({query: HELLO_EMAIL});
-      data.helloEmail.helloEmail = helloEmail;
+      data.helloEmail.email = email;
       cache.writeQuery({query: HELLO_EMAIL, data});
       return data.helloEmail;
     },
diff --git a/client/src/main.js b/client/src/main.js
index 89f42ff4..8cc587f5 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -11,7 +11,7 @@ import store from '@/store/index'
 import VueScrollTo from 'vue-scrollto';
 import VueAnalytics from 'vue-analytics';
 import {Validator, install as VeeValidate} from 'vee-validate/dist/vee-validate.minimal.esm.js';
-import {required, min, decimal} from 'vee-validate/dist/rules.esm.js';
+import {required, min, decimal, confirmed} from 'vee-validate/dist/rules.esm.js';
 import veeDe from 'vee-validate/dist/locale/de';
 import {dateFilter} from './filters/date-filter';
 import autoGrow from '@/directives/auto-grow'
@@ -77,6 +77,7 @@ const apolloProvider = new VueApollo({
 Validator.extend('required', required);
 Validator.extend('min', min);
 Validator.extend('decimal', decimal);
+Validator.extend('confirmed', confirmed);
 
 const dict = {
   custom: {
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index 29fdabe3..3af0ac67 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -39,7 +39,7 @@
 <script>
 
 import {emailExists} from '../hep-client/index';
-import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/helloEmail.gql';
+import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
 
 export default {
   components: {},
@@ -59,7 +59,7 @@ export default {
             this.$apollo.mutate({
               mutation: HELLO_EMAIL_MUTATION,
               variables: {
-                email: this.email
+                helloEmail: this.email
               }
             })
 
diff --git a/client/src/pages/login.vue b/client/src/pages/login.vue
index 47860638..f12f696d 100644
--- a/client/src/pages/login.vue
+++ b/client/src/pages/login.vue
@@ -1,33 +1,10 @@
 <template>
   <div class="login public-page">
-    <h1 class="login__title public-page__title">Melden Sie sich jetzt an</h1>
+    <header>
+      <p>Super wir haben für {{helloEmail.email}} ein Hep Konto gefunden</p>
+      <h1 class="login__title public-page__title">Bitte geben Sie das passende Passwort ein</h1>
+    </header>
     <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>
-        <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') }"
-          class="change-form__email skillbox-input skillboxform-input__input"
-          autocomplete="off"
-          data-cy="email-input"
-        />
-        <small
-          v-if="errors.has('email') && submitted"
-          class="skillboxform-input__error"
-          data-cy="email-local-errors"
-        >{{ errors.first('email') }}</small>
-        <small
-          v-for="error in emailErrors"
-          :key="error"
-          class="skillboxform-input__error"
-          data-cy="email-remote-errors"
-        >{{ error }}</small>
-      </div>
       <div class="change-form__field skillboxform-input">
         <label for="pw" class="skillboxform-input__label">Passwort</label>
         <input
@@ -41,6 +18,7 @@
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="password-input"
+          tabindex="0"
         />
         <small
           v-if="errors.has('password') && submitted"
@@ -61,17 +39,14 @@
         <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>
-      </div>
     </form>
   </div>
 </template>
 
 <script>
-import LOGIN_MUTATION from '@/graphql/gql/mutations/login.gql';
+
+import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
+import {login} from '../hep-client/index';
 
 export default {
   components: {},
@@ -82,42 +57,58 @@ export default {
         this.submitted = true;
         let that = this;
         if (result) {
-          this.$apollo.mutate({
-            client: 'publicClient',
-            mutation: LOGIN_MUTATION,
-            variables: {
-              input: {
-                usernameInput: this.email,
-                passwordInput: this.password
-              }
-            },
-            fetchPolicy: 'no-cache',
-          }).then(({data: {login}}) => {
-              try {
-                if (login.success) {
-                  const redirectUrl = that.$route.query.redirect ? that.$route.query.redirect : '/'
-                  that.$router.push(redirectUrl);
-                } else {
-                  const firstError = login.errors[0];
-                  switch (firstError.field) {
-                    case 'invalid_credentials':
-                      that.loginError = 'Die E-Mail oder das Passwort ist falsch. Bitte versuchen Sie nochmals.';
-                      break;
-                    case 'license_inactive':
-                      that.loginError = 'Ihre Lizenz ist nicht mehr aktiv.';
-                      break;
-                  }
-                }
-              } catch (e) {
-                console.warn(e);
-                that.loginError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
-              }
+
+          login(this.password)
+            .then((response) => {
+              console.log(response)
+            })
+          .catch((error) => {
+            console.log(error)
+            this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
           });
+
+          // this.$apollo.mutate({
+          //   client: 'publicClient',
+          //   mutation: LOGIN_MUTATION,
+          //   variables: {
+          //     input: {
+          //       usernameInput: this.email,
+          //       passwordInput: this.password
+          //     }
+          //   },
+          //   update(
+          //     store,
+          //     {
+          //       data: {
+          //         login
+          //       }
+          //     }
+          //   ) {
+          //     try {
+          //       if (login.success) {
+          //         const redirectUrl = that.$route.query.redirect ? that.$route.query.redirect : '/'
+          //         that.$router.push(redirectUrl);
+          //       } else {
+          //         const firstError = login.errors[0];
+          //         switch (firstError.field) {
+          //           case 'invalid_credentials':
+          //             that.loginError = 'Die E-Mail oder das Passwort ist falsch. Bitte versuchen Sie nochmals.';
+          //             break;
+          //           case 'license_inactive':
+          //             that.loginError = 'Ihre Lizenz ist nicht mehr aktiv.';
+          //             break;
+          //         }
+          //       }
+          //     } catch (e) {
+          //       console.warn(e);
+          //       that.loginError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
+          //     }
+          //   }
+          // });
         }
       });
     },
     resetForm() {
-      this.email = '';
       this.password = '';
       this.submitted = false;
       this.$validator.reset();
@@ -126,14 +117,18 @@ export default {
 
   data() {
     return {
-      email: '',
       password: '',
-      emailErrors: [],
       passwordErrors: [],
       loginError: '',
       submitted: false
     };
-  }
+  },
+
+  apollo: {
+    helloEmail: {
+      query: HELLO_EMAIL
+    },
+  },
 };
 </script>
 
diff --git a/client/src/pages/registration.vue b/client/src/pages/registration.vue
index 08f71c22..6ce40fb8 100644
--- a/client/src/pages/registration.vue
+++ b/client/src/pages/registration.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="registration public-page">
-    <h1 class="registration__title public-page__title">Registrieren Sie ihr persönliches Konto.</h1>
+    <header>
+      <p>Für {{helloEmail.email}} haben wir kein Hep Konto gefunden.</p>
+      <h1 class="registration__title public-page__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">
-        <div class="registration-form__field skillboxform-input">
+      <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"
@@ -19,7 +23,6 @@
           <option>Frau</option>
         </select>
       </div>
-      <div class="registration-form__field skillboxform-input">
         <label for="firstname" class="skillboxform-input__label">Vorname</label>
         <input
           id="firstname"
@@ -71,7 +74,7 @@
           data-cy="lastname-remote-errors"
         >{{ error }}</small>
       </div>
-      <div class="change-form__field skillboxform-input">
+      <!-- <div class="change-form__field skillboxform-input">
         <label for="email" class="skillboxform-input__label">E-Mail</label>
         <input
           id="email"
@@ -96,96 +99,67 @@
           class="skillboxform-input__error"
           data-cy="email-remote-errors"
         >{{ error }}</small>
-      </div>
+      </div> -->
       <div class="change-form__field skillboxform-input">
-        <label for="address" class="skillboxform-input__label">Adresse</label>
+        <label for="password" class="skillboxform-input__label">Passwort</label>
         <input
-          id="address"
-          name="address"
+          id="password"
+          name="password"
           type="text"
-          v-model="address"
-          data-vv-as="Adresse"
-          v-validate="'required'"
-          :class="{ 'skillboxform-input__input--error': errors.has('address') }"
+          v-model="password"
+          data-vv-as="Passwort"
+          v-validate="'required|strongPassword'"
+          :class="{ 'skillboxform-input__input--error': errors.has('password') }"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
-          data-cy="address-input"
+          data-cy="password-input"
+          ref="password"
         />
         <small
-          v-if="errors.has('address') && submitted"
+          v-if="errors.has('password') && submitted"
           class="skillboxform-input__error"
-          data-cy="address-local-errors"
-        >{{ errors.first('address') }}</small>
+          data-cy="password-local-errors"
+        >{{ errors.first('password') }}</small>
         <small
-          v-for="error in addressErrors"
+          v-for="error in passwordErrors"
           :key="error"
           class="skillboxform-input__error"
-          data-cy="address-remote-errors"
+          data-cy="password-remote-errors"
         >{{ error }}</small>
       </div>
       <div class="change-form__field skillboxform-input">
-        <label for="zipCode" class="skillboxform-input__label">PLZ</label>
+        <label for="password2" class="skillboxform-input__label">Passwort wiederholen</label>
         <input
-          id="zipCode"
-          name="zipCode"
-          type="number"
-          v-model="zipCode"
-          data-vv-as="PLZ"
-          v-validate="'required'"
-          :class="{ 'skillboxform-input__input--error': errors.has('zipCode') }"
-          class="change-form__new skillbox-input skillboxform-input__input"
-          autocomplete="off"
-          data-cy="zipCode-input"
-        />
-        <small
-          v-if="errors.has('zipCode') && submitted"
-          class="skillboxform-input__error"
-          data-cy="zipCode-local-errors"
-        >{{ errors.first('zipCode') }}</small>
-        <small
-          v-for="error in zipCodeErrors"
-          :key="error"
-          class="skillboxform-input__error"
-          data-cy="zipCode-remote-errors"
-        >{{ error }}</small>
-      </div>
-      <div class="change-form__field skillboxform-input">
-        <label for="city" class="skillboxform-input__label">Ort</label>
-        <input
-          id="city"
-          name="city"
+          id="passwordConfirmation"
+          name="passwordConfirmation"
           type="text"
-          v-model="city"
-          data-vv-as="Ort"
-          v-validate="'required'"
-          :class="{ 'skillboxform-input__input--error': errors.has('city') }"
+          v-model="passwordConfirmation"
+          data-vv-as="Passwort wiederholen"
+          v-validate="'required|confirmed:password'"
+          :class="{ 'skillboxform-input__input--error': errors.has('passwordConfirmation') }"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
-          data-cy="city-input"
+          data-cy="passwordConfirmation-input"
         />
         <small
-          v-if="errors.has('city') && submitted"
+          v-if="errors.has('passwordConfirmation') && submitted"
           class="skillboxform-input__error"
-          data-cy="city-local-errors"
-        >{{ errors.first('city') }}</small>
+          data-cy="password-local-errors"
+        >{{ errors.first('passwordConfirmation') }}</small>
         <small
-          v-for="error in cityErrors"
+          v-for="error in passwordErrors"
           :key="error"
           class="skillboxform-input__error"
-          data-cy="city-remote-errors"
+          data-cy="password-remote-errors"
         >{{ error }}</small>
       </div>
       <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="register-button">Jetzt registrieren</button>
-      </div>
-      <div class="account-link">
-        <p class="account-link__text">Haben Sie ein Konto?</p>
-        <router-link class="account-link__link text-link" :to="{name: 'login'}">Jetzt anmelden
-        </router-link>
+        <button class="button button--primary button--big actions__submit" data-cy="register-button">Konto erstellen</button>
       </div>
+
     </form>
   </div>
 </template>
@@ -193,6 +167,7 @@
 <script>
 
 import {register} from '../hep-client/index'
+import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
 
 export default {
   components: {},
@@ -205,21 +180,12 @@ export default {
           const registrationData = {
             customer: {
               prefix: this.prefix,
-              email: this.email,
+              email: this.helloEmail.email,
               firstname: this.firstname,
               lastname: this.lastname,
               gender: this.prefix === 'Herr' ? 1 : 2,
-              addresses: [{
-                country_id: 'CH',
-                street: [this.address],
-                postcode: this.address,
-                city: this.city,
-                firstname: this.firstname,
-                lastname: this.lastname,
-                default_shipping: true,
-                default_billing: true
-              }]
-            }
+            },
+            password: this.password
           };
 
           register(registrationData).then((response) => {
@@ -240,18 +206,15 @@ export default {
     },
     resetForm() {
       this.prefix = '';
-      this.email = '';
       this.lastname = '';
       this.firstname = '';
-      this.zipCode = '';
-      this.address = '';
-      this.city = '';
+      this.password = '';
+      this.passwordConfirmation = '';
       this.firstnameErrors = [];
       this.lastnameErrors = [];
       this.emailErrors = [];
-      this.zipCodeErrors = [];
-      this.addressErrors = [];
-      this.cityErrors = [];
+      this.passwordsError = [];
+      this.passwordError = [];
       this.registrationError = [];
       this.submitted = false;
       this.$validator.reset();
@@ -261,22 +224,26 @@ export default {
   data() {
     return {
       prefix: '',
-      email: '',
       lastname: '',
       firstname: '',
-      zipCode: '',
-      address: '',
-      city: '',
+      password: '',
+      passwordConfirmation: '',
       firstnameErrors: '',
       lastnameErrors: '',
       emailErrors: '',
-      zipCodeErrors: '',
-      addressErrors: '',
-      cityErrors: '',
+      passwordsErrors: [],
+      passwordErrors: [],
       registrationError: '',
       submitted: false
     };
-  }
+  },
+
+  apollo: {
+    helloEmail: {
+      query: HELLO_EMAIL
+    },
+  },
+
 };
 </script>