Add basic registration flow

client/src/hep-client/index.js

@@ -0,0 +1,11 @@
+import * as axios from 'axios'
+
+const hepBaseUrl = 'https://stage.hep-verlag.ch';
+
+export function register(registrationData) {
+  return axios.post(`${hepBaseUrl}/rest/deutsch/V1/customers`, registrationData);
+}
+
+export function login(username, password) {
+  return axios.post(`${hepBaseUrl}/rest/deutsch/V1/customers`, {username, password});
+}

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} from 'vee-validate/dist/rules.esm.js';
+import {required, min, decimal} 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'
@@ -76,6 +76,7 @@ const apolloProvider = new VueApollo({
 
 Validator.extend('required', required);
 Validator.extend('min', min);
+Validator.extend('decimal', decimal);
 
 const dict = {
   custom: {
@@ -91,6 +92,7 @@ const dict = {
 
 Validator.localize('de', veeDe)
 Validator.localize('de', dict)
+
 // https://github.com/baianat/vee-validate/issues/51
 Validator.extend('strongPassword', {
   getMessage: field => 'Das Passwort muss Grossbuchstaben, Zahlen und Sonderzeichen beinhalten',

client/src/pages/check-email.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="check-email">
+    <main class="check-email__content">
+      Ein Email ist auf dem Weg, bitte überprüfen sie ihre E-mail Konto.
+    </main>
+
+  </div>
+
+</template>
+
+<script>
+
+  export default {
+    components: {
+
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
+</style>

client/src/pages/registration.vue

@@ -2,6 +2,23 @@
   <div class="registration public-page">
     <h1 class="registration__title public-page__title">Registrieren Sie ihr persönliches Konto.</h1>
     <form class="registration__form registration-form" novalidate @submit.prevent="validateBeforeSubmit">
+        <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-input"
+        >
+          <option>Herr</option>
+          <option>Frau</option>
+        </select>
+      </div>
       <div class="registration-form__field skillboxform-input">
         <label for="firstname" class="skillboxform-input__label">Vorname</label>
         <input
@@ -59,7 +76,7 @@
         <input
           id="email"
           name="email"
-          type="text"
+          type="email"
           v-model="email"
           data-vv-as="E-Mail"
           v-validate="'required|email'"
@@ -81,29 +98,81 @@
         >{{ error }}</small>
       </div>
       <div class="change-form__field skillboxform-input">
-        <label for="licenseKey" class="skillboxform-input__label">Lizenz</label>
+        <label for="address" class="skillboxform-input__label">Adresse</label>
         <input
-          id="licenseKey"
-          name="licenseKey"
+          id="address"
+          name="address"
           type="text"
-          v-model="licenseKey"
-          data-vv-as="Lizenz"
+          v-model="address"
+          data-vv-as="Adresse"
           v-validate="'required'"
-          :class="{ 'skillboxform-input__input--error': errors.has('licenseKey') }"
+          :class="{ 'skillboxform-input__input--error': errors.has('address') }"
           class="change-form__new skillbox-input skillboxform-input__input"
           autocomplete="off"
-          data-cy="licenseKey-input"
+          data-cy="address-input"
         />
         <small
-          v-if="errors.has('licenseKey') && submitted"
+          v-if="errors.has('address') && submitted"
           class="skillboxform-input__error"
-          data-cy="licenseKey-local-errors"
-        >{{ errors.first('licenseKey') }}</small>
+          data-cy="address-local-errors"
+        >{{ errors.first('address') }}</small>
         <small
-          v-for="error in licenseKeyErrors"
+          v-for="error in addressErrors"
           :key="error"
           class="skillboxform-input__error"
-          data-cy="licenseKey-remote-errors"
+          data-cy="address-remote-errors"
+        >{{ error }}</small>
+      </div>
+      <div class="change-form__field skillboxform-input">
+        <label for="zipCode" class="skillboxform-input__label">PLZ</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"
+          type="text"
+          v-model="city"
+          data-vv-as="Ort"
+          v-validate="'required'"
+          :class="{ 'skillboxform-input__input--error': errors.has('city') }"
+          class="change-form__new skillbox-input skillboxform-input__input"
+          autocomplete="off"
+          data-cy="city-input"
+        />
+        <small
+          v-if="errors.has('city') && submitted"
+          class="skillboxform-input__error"
+          data-cy="city-local-errors"
+        >{{ errors.first('city') }}</small>
+        <small
+          v-for="error in cityErrors"
+          :key="error"
+          class="skillboxform-input__error"
+          data-cy="city-remote-errors"
         >{{ error }}</small>
       </div>
       <div class="skillboxform-input">
@@ -122,7 +191,8 @@
 </template>
 
 <script>
-import REGISTRATION_MUTATION from '@/graphql/gql/mutations/registration.gql';
+
+import {register} from '../hep-client/index'
 
 export default {
   components: {},
@@ -131,54 +201,58 @@ export default {
     validateBeforeSubmit() {
       this.$validator.validate().then(result => {
         this.submitted = true;
-        let that = this;
         if (result) {
-          this.$apollo.mutate({
-            client: 'publicClient',
-            mutation: REGISTRATION_MUTATION,
-            variables: {
-              input: {
-                firstnameInput: this.firstname,
-                lastnameInput: this.lastname,
-                emailInput: this.email,
-                licenseKeyInput: this.licenseKey,
-              }
-            },
-            fetchPolicy: 'no-cache'
+          const registrationData = {
+            customer: {
+              prefix: this.prefix,
+              email: this.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
+              }]
+            }
+          };
+
+          register(registrationData).then((response) => {
+            console.log(response)
+            if (response.data.id && response.data.id > 0) {
+              this.$router.push({name: 'checkEmail'});
+            }
           })
-          .then(({data: {registration: { success, errors }}}) => {
-            try {
-              if (success) {
-                window.location.href = '/registration/set-password/done/';
-              } else {
-                errors.forEach(function(error) {
-                  switch (error.field) {
-                    case 'email':
-                      that.emailErrors = ['Die angegebene E-Mail ist bereits registriert.'];
-                      break;
-                    case 'license_key':
-                      that.licenseKeyErrors = ['Die angegebenen Lizenz ist unglültig'];
-                  }
-                })
-              }
-            } catch (e) {
-              console.warn(e);
-              that.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
+          .catch((error) => {
+            if (error.response.data.message && error.response.data.message === 'Ein Kunde mit der gleichen E-Mail-Adresse existiert bereits in einer zugeordneten Website.') {
+              this.emailErrors = ['Die angegebene E-Mail ist bereits registriert.'];
+            } else {
+              this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
             }
           });
         }
       });
     },
     resetForm() {
+      this.prefix = '';
       this.email = '';
       this.lastname = '';
       this.firstname = '';
-      this.licenseKey = '';
-      this.firstnameErrors = '';
-      this.lastnameErrors = '';
-      this.emailErrors = '';
-      this.licenseKeyErrors = '';
-      this.registrationError = '';
+      this.zipCode = '';
+      this.address = '';
+      this.city = '';
+      this.firstnameErrors = [];
+      this.lastnameErrors = [];
+      this.emailErrors = [];
+      this.zipCodeErrors = [];
+      this.addressErrors = [];
+      this.cityErrors = [];
+      this.registrationError = [];
       this.submitted = false;
       this.$validator.reset();
     }
@@ -186,14 +260,19 @@ export default {
 
   data() {
     return {
+      prefix: '',
       email: '',
       lastname: '',
       firstname: '',
-      licenseKey: '',
+      zipCode: '',
+      address: '',
+      city: '',
       firstnameErrors: '',
       lastnameErrors: '',
       emailErrors: '',
-      licenseKeyErrors: '',
+      zipCodeErrors: '',
+      addressErrors: '',
+      cityErrors: '',
       registrationError: '',
       submitted: false
     };

client/src/router/index.js

@@ -30,6 +30,7 @@ import moduleRoom from '@/pages/moduleRoom'
 import login from '@/pages/login'
 import registration from '@/pages/registration'
 import waitForClass from '@/pages/waitForClass'
+import checkEmail from '@/pages/check-email'
 
 import store from '@/store/index';
 
@@ -134,6 +135,15 @@ const routes = [
     name: 'noClass',
     meta: {layout: 'public'}
   },
+  {
+    path: '/check-email',
+    component: checkEmail,
+    name: 'checkEmail',
+    meta: {
+      public: true,
+      layout: 'public'
+    }
+  },
   {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}
 ];