From 587d661ca89379939692ec21203af39dd7230daf Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 6 Feb 2020 11:07:03 +0100
Subject: [PATCH] Add hello page, add local mutation

---
 Pipfile.lock                                |  15 ++
 client/src/graphql/client.js                |   4 +
 client/src/graphql/gql/local/helloEmail.gql |   5 +
 client/src/graphql/resolvers.js             |   9 +-
 client/src/graphql/typedefs.js              |  12 +-
 client/src/hep-client/index.js              |   7 +
 client/src/pages/hello.vue                  | 107 +++++++++++++
 client/src/pages/login-local.vue            | 163 ++++++++++++++++++++
 client/src/router/index.js                  |  20 +++
 server/core/migrations/0001_initial.py      |  22 +++
 server/core/migrations/__init__.py          |   0
 server/core/views.py                        |   6 +-
 12 files changed, 364 insertions(+), 6 deletions(-)
 create mode 100644 client/src/graphql/gql/local/helloEmail.gql
 create mode 100644 client/src/pages/hello.vue
 create mode 100644 client/src/pages/login-local.vue
 create mode 100644 server/core/migrations/0001_initial.py
 create mode 100644 server/core/migrations/__init__.py

diff --git a/Pipfile.lock b/Pipfile.lock
index 5d8288a5..b5251119 100644
--- a/Pipfile.lock
+++ b/Pipfile.lock
@@ -654,11 +654,19 @@
     "develop": {
         "awscli": {
             "hashes": [
+<<<<<<< HEAD
                 "sha256:4c49f085fb827ca1aeba5e6e5e39f6005110a0059b5c772aeb1d51c4f33c4028",
                 "sha256:9459ac705c2a5d8724057492800c52084df714b624853eb3331087ecf8726a22"
             ],
             "index": "pypi",
             "version": "==1.17.9"
+=======
+                "sha256:7ddb43a5423725adfabb752e21ac7d47c0b440a10128e9884f578848c2369555",
+                "sha256:e5617cb8244863566df1cb12564e439b224e88ea2270f27b28da82df093eba0a"
+            ],
+            "index": "pypi",
+            "version": "==1.17.11"
+>>>>>>> Add hello page, add local mutation
         },
         "backcall": {
             "hashes": [
@@ -669,10 +677,17 @@
         },
         "botocore": {
             "hashes": [
+<<<<<<< HEAD
                 "sha256:cf3144994191847e30ef76781af867009bdc233b3f1f4736615e5330687a891e",
                 "sha256:f11ff8616f46ca04697df031e622c9ed50931b9d649d4e719f961e9d80771e8d"
             ],
             "version": "==1.14.10"
+=======
+                "sha256:5ad6f4b80f3151fc5aa940f89fb6bf2db3064bf8d3f8919f5b60f5c741054ba5",
+                "sha256:ac783a87bd90be8a4d08101bfc0d29a4b35fe0ced387f5c8bc91d01cdaa7a168"
+            ],
+            "version": "==1.14.11"
+>>>>>>> Add hello page, add local mutation
         },
         "colorama": {
             "hashes": [
diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js
index 9d287d8b..6a6dfdcf 100644
--- a/client/src/graphql/client.js
+++ b/client/src/graphql/client.js
@@ -102,6 +102,10 @@ export default function (uri) {
       scrollPosition: {
         __typename: 'ScrollPosition',
         scrollTo: ''
+      },
+      helloEmail: {
+        __typename: 'HelloEmail',
+        email: ''
       }
     }
   });
diff --git a/client/src/graphql/gql/local/helloEmail.gql b/client/src/graphql/gql/local/helloEmail.gql
new file mode 100644
index 00000000..4a9dfe6e
--- /dev/null
+++ b/client/src/graphql/gql/local/helloEmail.gql
@@ -0,0 +1,5 @@
+query HelloEmail {
+  helloEmail @client {
+    email
+  }
+}
diff --git a/client/src/graphql/resolvers.js b/client/src/graphql/resolvers.js
index 4b8b8845..ae68098a 100644
--- a/client/src/graphql/resolvers.js
+++ b/client/src/graphql/resolvers.js
@@ -1,4 +1,5 @@
 import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
+import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
 
 export const resolvers = {
   Mutation: {
@@ -7,6 +8,12 @@ export const resolvers = {
       data.scrollPosition.scrollTo = scrollTo;
       cache.writeQuery({query: SCROLL_POSITION, data});
       return data.scrollPosition;
-    }
+    },
+    helloEmail: (_, {helloEmail}, {cache}) => {
+      const data = cache.readQuery({query: HELLO_EMAIL});
+      data.helloEmail.helloEmail = helloEmail;
+      cache.writeQuery({query: HELLO_EMAIL, data});
+      return data.helloEmail;
+    },
   }
 };
diff --git a/client/src/graphql/typedefs.js b/client/src/graphql/typedefs.js
index effdbebf..f1e6c9ff 100644
--- a/client/src/graphql/typedefs.js
+++ b/client/src/graphql/typedefs.js
@@ -1,11 +1,19 @@
 import gql from 'graphql-tag';
 
 export const typeDefs = gql`
-  type ScrollPosition {    
+  type ScrollPosition {
     scrollTo: String!
   }
-  
+
+  type HelloEmail {
+    email: String!
+  }
+
   type Mutation {
     scrollTo(scrollTo: String!): ScrollPosition
   }
+
+  type Mutation {
+    helloEmail(email: String!): HelloEmail
+  }
 `;
diff --git a/client/src/hep-client/index.js b/client/src/hep-client/index.js
index 56f4a4eb..6642b73d 100644
--- a/client/src/hep-client/index.js
+++ b/client/src/hep-client/index.js
@@ -9,3 +9,10 @@ export function register(registrationData) {
 export function login(username, password) {
   return axios.post(`${hepBaseUrl}/rest/deutsch/V1/customers`, {username, password});
 }
+
+export function emailExists(email) {
+  return axios.post(`${hepBaseUrl}/rest/deutsch/V1/customers/isEmailAvailable`, {
+    customerEmail: email,
+    websiteId: 1
+  });
+}
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
new file mode 100644
index 00000000..29fdabe3
--- /dev/null
+++ b/client/src/pages/hello.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="hello public-page">
+    <h1 class="hello__title public-page__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>
+        <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') }"
+          class="change-form__email skillbox-input skillboxform-input__input"
+          autocomplete="off"
+          data-cy="email-input"
+          tabindex="0"
+        />
+        <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="actions">
+        <button class="button button--primary button--big actions__submit" data-cy="hello-button">Los geht's</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+
+import {emailExists} from '../hep-client/index';
+import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/helloEmail.gql';
+
+export default {
+  components: {},
+
+  methods: {
+    validateBeforeSubmit() {
+      this.$validator.validate().then(result => {
+        this.submitted = true;
+        if (result) {
+          emailExists(this.email).then((response) => {
+            let redirectRouteName = 'login';
+
+            if (response.data) {
+              redirectRouteName = 'registration';
+            }
+
+            this.$apollo.mutate({
+              mutation: HELLO_EMAIL_MUTATION,
+              variables: {
+                email: this.email
+              }
+            })
+
+            this.$router.push({name: redirectRouteName});
+          })
+          .catch(() => {
+            this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
+          });
+        }
+      });
+    },
+    resetForm() {
+      this.email = '';
+      this.submitted = false;
+      this.$validator.reset();
+    }
+  },
+
+  data() {
+    return {
+      email: '',
+      emailErrors: [],
+      submitted: false
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/_variables.scss";
+@import "@/styles/_mixins.scss";
+
+.text-link {
+  font-family: $sans-serif-font-family;
+  color: $color-brand;
+}
+
+.actions {
+  &__reset {
+    display: inline-block;
+    margin-left: $large-spacing;
+  }
+}
+
+</style>
diff --git a/client/src/pages/login-local.vue b/client/src/pages/login-local.vue
new file mode 100644
index 00000000..94155c82
--- /dev/null
+++ b/client/src/pages/login-local.vue
@@ -0,0 +1,163 @@
+<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">
+      <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
+          id="pw"
+          name="password"
+          type="password"
+          data-vv-as="Passwort"
+          v-model="password"
+          v-validate="'required'"
+          :class="{ 'skillboxform-input__input--error': errors.has('password') }"
+          class="change-form__new skillbox-input skillboxform-input__input"
+          autocomplete="off"
+          data-cy="password-input"
+        />
+        <small
+          v-if="errors.has('password') && submitted"
+          class="skillboxform-input__error"
+          data-cy="password-local-errors"
+        >{{ errors.first('password') }}</small>
+        <small
+          v-for="error in passwordErrors"
+          :key="error"
+          class="skillboxform-input__error"
+          data-cy="password-remote-errors"
+        >{{ error }}</small>
+      </div>
+      <div class="skillboxform-input">
+        <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>
+      </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';
+
+export default {
+  components: {},
+
+  methods: {
+    validateBeforeSubmit() {
+      this.$validator.validate().then(result => {
+        this.submitted = true;
+        let that = this;
+        if (result) {
+          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();
+    }
+  },
+
+  data() {
+    return {
+      email: '',
+      password: '',
+      emailErrors: [],
+      passwordErrors: [],
+      loginError: '',
+      submitted: false
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/_variables.scss";
+@import "@/styles/_mixins.scss";
+
+.text-link {
+  font-family: $sans-serif-font-family;
+  color: $color-brand;
+}
+
+.actions {
+  &__reset {
+    display: inline-block;
+    margin-left: $large-spacing;
+  }
+}
+
+</style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 3221518a..d5ea5bc6 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -28,6 +28,8 @@ import surveyPage from '@/pages/survey'
 import styleGuidePage from '@/pages/styleguide'
 import moduleRoom from '@/pages/moduleRoom'
 import login from '@/pages/login'
+import loginLocal from '@/pages/login-local'
+import hello from '@/pages/hello'
 import registration from '@/pages/registration'
 import waitForClass from '@/pages/waitForClass'
 import checkEmail from '@/pages/check-email'
@@ -50,6 +52,24 @@ const routes = [
       public: true
     }
   },
+  {
+    path: '/hello',
+    name: 'hello',
+    component: hello,
+    meta: {
+      layout: 'public',
+      public: true
+    }
+  },
+  {
+    path: '/login-local',
+    name: 'loginLocal',
+    component: loginLocal,
+    meta: {
+      layout: 'public',
+      public: true
+    }
+  },
   {
     path: '/module/:slug',
     component: moduleBase,
diff --git a/server/core/migrations/0001_initial.py b/server/core/migrations/0001_initial.py
new file mode 100644
index 00000000..6be51120
--- /dev/null
+++ b/server/core/migrations/0001_initial.py
@@ -0,0 +1,22 @@
+# Generated by Django 2.0.6 on 2020-02-05 13:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='AdminData',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('hep_admin_token', models.CharField(max_length=100)),
+                ('updated_at', models.DateTimeField(auto_now=True, null=True)),
+            ],
+        ),
+    ]
diff --git a/server/core/migrations/__init__.py b/server/core/migrations/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/server/core/views.py b/server/core/views.py
index 8ccd7dd2..f8a8bba8 100644
--- a/server/core/views.py
+++ b/server/core/views.py
@@ -83,14 +83,14 @@ class ConfirmationKeyDisplayView(TemplateView):
 
     template_name = 'confirmation_key.html'
 
-    def get_context_data(self, request, *args, **kwargs):
+    def get_context_data(self, *args, **kwargs):
 
-        email = request.GET.get('email', '')
+        email = self.request.GET.get('email', '')
 
         hep_client = HepClient()
         admin_token = AdminData.objects.get_admin_token()
         hep_user = hep_client.customers_search(admin_token, email)
 
-        context = super().get_context_data(**kwargs)
+        context = super().get_context_data(self.request, **kwargs)
         context['confirmation_key'] = hep_user['confirmation']
         return context