Add registration component

client/src/components/profile/PasswordChangeForm.vue

@@ -11,6 +11,7 @@
                :class="{ 'skillboxform-input__input--error': errors.has('oldPassword') }"
                class="change-form__old skillbox-input skillboxform-input__input"
                autocomplete="off"
+               data-vv-as="Altes Passwort"
                data-cy="old-password">
         <small v-if="errors.has('oldPassword') && submitted" class="skillboxform-input__error" data-cy="old-password-local-errors">{{ errors.first('oldPassword') }}</small>
         <small v-for="error in oldPasswordErrors" :key="error" class=" skillboxform-input__error" data-cy="old-password-remote-errors">{{ error }}</small>
@@ -21,6 +22,7 @@
                name="newPassword"
                type="text"
                v-model="newPassword"
+               data-vv-as="Neues Passwort"
                v-validate="'required|min:8|strongPassword'"
                :class="{ 'skillboxform-input__input--error': errors.has('newPassword') }"
                class="change-form__new skillbox-input skillboxform-input__input"

client/src/graphql/gql/mutations/registration.gql

@@ -0,0 +1,8 @@
+mutation Registration($input: RegistrationInput!){
+  registration(input: $input) {
+    success
+    errors {
+      field
+    }
+  }
+}

client/src/pages/registration.vue

@@ -0,0 +1,233 @@
+<template>
+  <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>
+        <input
+          id="firstName"
+          name="firstName"
+          type="text"
+          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"
+          autocomplete="off"
+          data-cy="firstName-input"
+        />
+        <small
+          v-if="errors.has('firstName') && submitted"
+          class="sbform-input__error"
+          data-cy="firstName-local-errors"
+        >{{ errors.first('firstName') }}</small>
+        <small
+          v-for="error in firstNameErrors"
+          :key="error"
+          class="sbform-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>
+        <input
+          id="lastName"
+          name="lastName"
+          type="text"
+          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"
+          autocomplete="off"
+          data-cy="lastName-input"
+        />
+        <small
+          v-if="errors.has('lastName') && submitted"
+          class="sbform-input__error"
+          data-cy="lastName-local-errors"
+        >{{ errors.first('lastName') }}</small>
+        <small
+          v-for="error in lastNameErrors"
+          :key="error"
+          class="sbform-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>
+        <input
+          id="email"
+          name="email"
+          type="email"
+          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"
+          autocomplete="off"
+          data-cy="email-input"
+        />
+        <small
+          v-if="errors.has('email') && submitted"
+          class="sbform-input__error"
+          data-cy="email-local-errors"
+        >{{ errors.first('email') }}</small>
+        <small
+          v-for="error in emailErrors"
+          :key="error"
+          class="sbform-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>
+        <input
+          id="licenseKey"
+          name="licenseKey"
+          type="text"
+          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"
+          autocomplete="off"
+          data-cy="licenseKey-input"
+        />
+        <small
+          v-if="errors.has('licenseKey') && submitted"
+          class="sbform-input__error"
+          data-cy="licenseKey-local-errors"
+        >{{ errors.first('licenseKey') }}</small>
+        <small
+          v-for="error in licenseKeyErrors"
+          :key="error"
+          class="sbform-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>
+      <div class="actions">
+        <button class="button button--primary button--big actions__submit" data-cy="registration-button">Jetzt registration</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import REGISTRATION_MUTATION from '@/graphql/gql/mutations/registration.gql';
+
+export default {
+  components: {},
+
+  methods: {
+    validateBeforeSubmit() {
+      this.$validator.validate().then(result => {
+        console.log(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,
+              }
+            },
+            update(
+              store,
+              {
+                data: {
+                  registration: { success, errors }
+                }
+              }
+            ) {
+              try {
+                if (success) {
+                  const redirectUrl = that.$route.query.redirect ? that.$route.query.redirect : '/'
+                  that.$router.push(redirectUrl);
+                } else {
+                  console.log(errors)
+                  that.registrationError = 'Die E-Mail oder das Passwort ist falsch. Bitte versuchen Sie nochmals.';
+                }
+              } catch (e) {
+                console.warn(e);
+                that.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
+              }
+            }
+          });
+        }
+      });
+    },
+    resetForm() {
+      this.email = '';
+      this.lastName = '';
+      this.firstName = '';
+      this.licenseKey = '';
+      this.firstNameErrors = '';
+      this.lastNameErrors = '';
+      this.emailErrors = '';
+      this.licenseKeyErrors = '';
+      this.registrationError = '';
+      this.submitted = false;
+      this.$validator.reset();
+    }
+  },
+
+  data() {
+    return {
+      email: '',
+      lastName: '',
+      firstName: '',
+      licenseKey: '',
+      firstNameErrors: '',
+      lastNameErrors: '',
+      emailErrors: '',
+      licenseKeyErrors: '',
+      registrationError: '',
+      submitted: false
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "@/styles/_variables.scss";
+@import "@/styles/_mixins.scss";
+
+.registration {
+  &__title {
+    margin-top: 48px;
+    font-size: 2.75rem; // 44px
+    margin-bottom: 24px;
+    font-weight: 600;
+  }
+}
+
+.text-link {
+  font-family: $sans-serif-font-family;
+  color: $color-brand;
+}
+
+.actions {
+  &__reset {
+    display: inline-block;
+    margin-left: $large-spacing;
+  }
+}
+
+.registration {
+  margin-top: $large-spacing;
+  &__text {
+    font-family: $sans-serif-font-family;
+    margin-bottom: $small-spacing;
+  }
+}
+
+</style>

client/src/router/index.js

@@ -28,6 +28,7 @@ import surveyPage from '@/pages/survey'
 import styleGuidePage from '@/pages/styleguide'
 import moduleRoom from '@/pages/moduleRoom'
 import login from '@/pages/login'
+import registration from '@/pages/registration'
 
 import store from '@/store/index';
 
@@ -117,6 +118,7 @@ const routes = [
     props: true,
     meta: {layout: 'simple'}
   },
+  {path: '/register', component: registration},
   {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}
 ];

server/registration/admin.py

@@ -0,0 +1,24 @@
+# -*- coding: utf-8 -*-
+#
+# ITerativ GmbH
+# http://www.iterativ.ch/
+#
+# Copyright (c) 2019 ITerativ GmbH. All rights reserved.
+#
+# Created on 2019-10-10
+# @author: chrigu <christian.cueni@iterativ.ch>
+from django.contrib import admin
+
+from registration.models import LicenseType, License
+
+
+@admin.register(LicenseType)
+class LicenseTypeAdmin(admin.ModelAdmin):
+    list_display = ('id', 'key', 'for_role')
+    list_filter = ('for_role',)
+
+
+@admin.register(License)
+class LicenseAdmin(admin.ModelAdmin):
+    list_display = ('license_type', 'licensee')
+    list_filter = ('license_type', 'licensee')