From 0922c5d1983763f7493ce7134c56872e9b71287d Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Tue, 11 Feb 2020 14:36:48 +0100
Subject: [PATCH] Fix local signup, style header

---
 client/package-lock.json                      |  52 +++++---
 client/src/pages/activate-license.vue         |   0
 client/src/pages/hello.vue                    |   3 +-
 client/src/pages/license-activation.vue       | 126 ++++++++++++++++++
 client/src/pages/login.vue                    |   4 +-
 client/src/pages/registration.vue             |   4 +-
 client/src/router/index.js                    |   9 ++
 client/src/styles/_info_header.scss           |  13 ++
 client/src/styles/_password_forms.scss        |   1 +
 client/src/styles/main.scss                   |   2 +
 client/vue.config.js                          |   2 +-
 server/core/settings.py                       |   3 +-
 .../commands/create_dummy_license.py          |  12 +-
 server/users/mutations_public.py              |   1 +
 14 files changed, 201 insertions(+), 31 deletions(-)
 delete mode 100644 client/src/pages/activate-license.vue
 create mode 100644 client/src/pages/license-activation.vue
 create mode 100644 client/src/styles/_info_header.scss

diff --git a/client/package-lock.json b/client/package-lock.json
index 69308bb2..b27a9409 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2460,7 +2460,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -2492,7 +2492,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
@@ -11540,7 +11540,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -11582,7 +11583,8 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -11593,7 +11595,8 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -11710,7 +11713,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -11722,6 +11726,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -11736,6 +11741,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -11743,12 +11749,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"
@@ -11767,6 +11775,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -11847,7 +11856,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -11859,6 +11869,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -11944,7 +11955,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -11980,6 +11992,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",
@@ -11999,6 +12012,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -12042,12 +12056,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
             }
           }
         },
@@ -13198,7 +13214,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -13245,13 +13261,13 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
         "ora": {
           "version": "0.2.3",
-          "resolved": "http://registry.npmjs.org/ora/-/ora-0.2.3.tgz",
+          "resolved": "https://registry.npmjs.org/ora/-/ora-0.2.3.tgz",
           "integrity": "sha1-N1J9Igrc1Tw5tzVx11QVbV22V6Q=",
           "dev": true,
           "requires": {
@@ -13309,7 +13325,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -13373,7 +13389,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {
@@ -13405,7 +13421,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
@@ -13675,7 +13691,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
diff --git a/client/src/pages/activate-license.vue b/client/src/pages/activate-license.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index 26ef342b..899573b3 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="hello public-page">
-    <h1 class="hello__title public-page__title">Wollen sie mySkillbox jetzt im Unterricht verwenden</h1>
+    <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>
@@ -15,6 +15,7 @@
           class="change-form__email skillbox-input skillboxform-input__input"
           autocomplete="off"
           data-cy="email-input"
+          placeholder="E-Mail eingeben"
           tabindex="0"
         />
         <small
diff --git a/client/src/pages/license-activation.vue b/client/src/pages/license-activation.vue
new file mode 100644
index 00000000..bf1ce55d
--- /dev/null
+++ b/client/src/pages/license-activation.vue
@@ -0,0 +1,126 @@
+<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>
+    </header>
+    <section class="coupon">
+      <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>
+          <input
+            id="coupon"
+            name="coupon"
+            type="coupon"
+            data-vv-as="Passwort"
+            v-model="coupon"
+            v-validate="'required'"
+            :class="{ 'skillboxform-input__input--error': errors.has('coupon') }"
+            class="change-form__new skillbox-input skillboxform-input__input"
+            autocomplete="off"
+            data-cy="coupon-input"
+            tabindex="0"
+          />
+          <small
+            v-if="errors.has('coupon') && submitted"
+            class="skillboxform-input__error"
+            data-cy="coupon-local-errors"
+          >{{ errors.first('coupon') }}</small>
+          <small
+            v-for="error in couponErrors"
+            :key="error"
+            class="skillboxform-input__error"
+            data-cy="coupon-remote-errors"
+          >{{ error }}</small>
+        </div>
+        <div class="skillboxform-input">
+          <small class="skillboxform-input__error" data-cy="coupon-error" v-if="loginError">{{couponError}}</small>
+        </div>
+        <div class="actions">
+          <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>
+          <li><a href="https://www.hep-verlag.ch">mySkillobx für Lehrpersonen</a></li>
+          <li><a href="https://www.hep-verlag.ch">mySkillobx für Lernende</a></li>
+        </ul>
+    </section>
+  </div>
+</template>
+
+<script>
+
+import ME_QUERY from '@/graphql/gql/meQuery.gql';
+import {login} from '../hep-client/index';
+
+export default {
+  components: {},
+
+  methods: {
+    validateBeforeSubmit() {
+      // this.$validator.validate().then(result => {
+      //   this.submitted = true;
+      //   let that = this;
+      //   if (result) {
+
+      //     login(this.password)
+      //       .then((response) => {
+      //         console.log(response)
+      //       })
+      //     .catch((error) => {
+      //       console.log(error)
+      //       this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals.';
+      //     });
+
+
+      //   }
+      // });
+    },
+    resetForm() {
+      this.coupon = '';
+      this.submitted = false;
+      this.$validator.reset();
+    }
+  },
+
+  data() {
+    return {
+      coupon: '',
+      couponErrors: [],
+      loginError: '',
+      submitted: false
+    };
+  },
+
+  apollo: {
+    me: {
+      query: ME_QUERY,
+    },
+  },
+};
+</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;
+  }
+}
+
+.get-license {
+  margin-top: $large-spacing
+}
+
+</style>
diff --git a/client/src/pages/login.vue b/client/src/pages/login.vue
index f09df22c..8564b45f 100644
--- a/client/src/pages/login.vue
+++ b/client/src/pages/login.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login public-page">
-    <header>
-      <p>Super wir haben für {{helloEmail.email}} ein Hep Konto gefunden</p>
+    <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">Bitte geben Sie das passende Passwort ein</h1>
     </header>
     <form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit">
diff --git a/client/src/pages/registration.vue b/client/src/pages/registration.vue
index 6ce40fb8..9c57e342 100644
--- a/client/src/pages/registration.vue
+++ b/client/src/pages/registration.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="registration public-page">
-    <header>
-      <p>Für {{helloEmail.email}} haben wir kein Hep Konto gefunden.</p>
+    <header class="info-header">
+      <p class="info-header__text small-emph">Für <span class="info-header__emph">{{helloEmail.email}}</span> 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">
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 235db9c4..66a65779 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -34,6 +34,7 @@ import registration from '@/pages/registration'
 import waitForClass from '@/pages/waitForClass'
 import checkEmail from '@/pages/check-email'
 import emailVerification from '@/pages/email-verification'
+import licenseActivation from '@/pages/license-activation'
 
 import store from '@/store/index';
 
@@ -174,6 +175,14 @@ const routes = [
       layout: 'public'
     }
   },
+  {
+    path: '/license-activation',
+    component: licenseActivation,
+    name: 'licenseActivation',
+    meta: {
+      layout: 'public'
+    }
+  },
   {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}
 ];
diff --git a/client/src/styles/_info_header.scss b/client/src/styles/_info_header.scss
new file mode 100644
index 00000000..145162ba
--- /dev/null
+++ b/client/src/styles/_info_header.scss
@@ -0,0 +1,13 @@
+.info-header {
+  margin-top: $large-spacing;
+  margin-bottom: $large-spacing;
+
+  &__text {
+    font-family: $sans-serif-font-family;
+  }
+
+  &__emph {
+    color: $color-brand;
+    font-weight: 600;
+  }
+}
diff --git a/client/src/styles/_password_forms.scss b/client/src/styles/_password_forms.scss
index 3159ff7a..d7b4a076 100644
--- a/client/src/styles/_password_forms.scss
+++ b/client/src/styles/_password_forms.scss
@@ -6,6 +6,7 @@
   &__label {
     margin-bottom: 10px;
     display: inline-block;
+    font-weight: 600;
   }
 
   &__input {
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 62d4cf26..f1eaa9f3 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -22,3 +22,5 @@
 @import "public-page";
 @import "student-submission";
 @import "module-activity";
+@import "info_header";
+
diff --git a/client/vue.config.js b/client/vue.config.js
index adb5f4c4..0249610b 100644
--- a/client/vue.config.js
+++ b/client/vue.config.js
@@ -8,5 +8,5 @@ module.exports = {
         `
       }
     }
-  }
+  },
 };
diff --git a/server/core/settings.py b/server/core/settings.py
index 204cf128..c40a19c0 100644
--- a/server/core/settings.py
+++ b/server/core/settings.py
@@ -369,7 +369,8 @@ TASKBASE_SUPERPASSWORD = os.environ.get("TASKBASE_SUPERPASSWORD")
 TASKBASE_BASEURL = os.environ.get("TASKBASE_BASEURL")
 
 
-USE_LOCAL_REGISTRATION = False
+USE_LOCAL_REGISTRATION = True
+
 
 # HEP
 HEP_ADMIN_USER = "adminuser"
diff --git a/server/registration/management/commands/create_dummy_license.py b/server/registration/management/commands/create_dummy_license.py
index 8ae4c88e..47330473 100644
--- a/server/registration/management/commands/create_dummy_license.py
+++ b/server/registration/management/commands/create_dummy_license.py
@@ -10,7 +10,7 @@
 from django.conf import settings
 from django.core.management import BaseCommand
 
-from registration.models import LicenseType
+# from registration.models import LicenseType
 from users.models import Role
 
 
@@ -23,8 +23,8 @@ class Command(BaseCommand):
         except Role.DoesNotExist:
             print("LicenseType requires that a Teacher Role exsits")
 
-        LicenseType.objects.create(name='dummy_license',
-                                   for_role=role,
-                                   active=True,
-                                   key='c1fa2e2a-2e27-480d-8469-2e88414c4ad8',
-                                   description='dummy license')
+        # LicenseType.objects.create(name='dummy_license',
+        #                            for_role=role,
+        #                            active=True,
+        #                            key='c1fa2e2a-2e27-480d-8469-2e88414c4ad8',
+        #                            description='dummy license')
diff --git a/server/users/mutations_public.py b/server/users/mutations_public.py
index 4dc03bb9..a834b386 100644
--- a/server/users/mutations_public.py
+++ b/server/users/mutations_public.py
@@ -40,6 +40,7 @@ class Login(relay.ClientIDMutation):
             user = authenticate(username=username, password=password)
             if user is None:
                 return cls.return_login_message('invalid_credentials')
+            login(info.context, user)
 
         else:
             hep_client = HepClient()