Add hello page, add local mutation

This commit is contained in:
Christian Cueni 2020-02-06 11:07:03 +01:00
parent 1d50287dbf
commit 587d661ca8
12 changed files with 364 additions and 6 deletions

15
Pipfile.lock generated
View File

@ -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": [

View File

@ -102,6 +102,10 @@ export default function (uri) {
scrollPosition: {
__typename: 'ScrollPosition',
scrollTo: ''
},
helloEmail: {
__typename: 'HelloEmail',
email: ''
}
}
});

View File

@ -0,0 +1,5 @@
query HelloEmail {
helloEmail @client {
email
}
}

View File

@ -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;
},
}
};

View File

@ -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
}
`;

View File

@ -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
});
}

107
client/src/pages/hello.vue Normal file
View File

@ -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>

View File

@ -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>

View File

@ -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,

View File

@ -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)),
],
),
]

View File

View File

@ -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