ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add extra fields to registration, remove unused fields

This commit is contained in:
Christian Cueni 2020-02-06 15:14:35 +01:00
parent 587d661ca8
commit a0eeec4e18
6 changed files with 128 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/graphql/gql/local/mutations/helloEmail.gql Normal file
View File

@ -0,0 +1,3 @@
mutation($helloEmail: String!) {
helloEmail(email: $helloEmail) @client
}

4
client/src/graphql/resolvers.js
View File

@ -9,9 +9,9 @@ export const resolvers = {
cache.writeQuery({query: SCROLL_POSITION, data});
return data.scrollPosition;
},
helloEmail: (_, {helloEmail}, {cache}) => {
helloEmail: (_, {email}, {cache}) => {
const data = cache.readQuery({query: HELLO_EMAIL});
data.helloEmail.helloEmail = helloEmail;
data.helloEmail.email = email;
cache.writeQuery({query: HELLO_EMAIL, data});
return data.helloEmail;
},

3
client/src/main.js
View File

@ -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, decimal} from 'vee-validate/dist/rules.esm.js';
import {required, min, decimal, confirmed} 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'
@ -77,6 +77,7 @@ const apolloProvider = new VueApollo({
Validator.extend('required', required);
Validator.extend('min', min);
Validator.extend('decimal', decimal);
Validator.extend('confirmed', confirmed);
const dict = {
custom: {

4
client/src/pages/hello.vue
View File

@ -39,7 +39,7 @@
<script>
import {emailExists} from '../hep-client/index';
import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/helloEmail.gql';
import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
export default {
components: {},
@ -59,7 +59,7 @@ export default {
this.$apollo.mutate({
mutation: HELLO_EMAIL_MUTATION,
variables: {
email: this.email
helloEmail: this.email
}
})

129
client/src/pages/login.vue
View File

@ -1,33 +1,10 @@
<template>
<div class="login public-page">
<h1 class="login__title public-page__title">Melden Sie sich jetzt an</h1>
<header>
<p>Super wir haben für {{helloEmail.email}} 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">
<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
@ -41,6 +18,7 @@
class="change-form__new skillbox-input skillboxform-input__input"
autocomplete="off"
data-cy="password-input"
tabindex="0"
/>
<small
v-if="errors.has('password') && submitted"
@ -61,17 +39,14 @@
<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';
import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
import {login} from '../hep-client/index';
export default {
components: {},
@ -82,42 +57,58 @@ export default {
this.submitted = true;
let that = this;
if (result) {
this.$apollo.mutate({
client: 'publicClient',
mutation: LOGIN_MUTATION,
variables: {
input: {
usernameInput: this.email,
passwordInput: this.password
}
},
fetchPolicy: 'no-cache',
}).then(({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.';
}
login(this.password)
.then((response) => {
console.log(response)
})
.catch((error) => {
console.log(error)
this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
});
// 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();
@ -126,14 +117,18 @@ export default {
data() {
return {
email: '',
password: '',
emailErrors: [],
passwordErrors: [],
loginError: '',
submitted: false
};
}
},
apollo: {
helloEmail: {
query: HELLO_EMAIL
},
},
};
</script>

147
client/src/pages/registration.vue
View File

@ -1,8 +1,12 @@
<template>
<div class="registration public-page">
<h1 class="registration__title public-page__title">Registrieren Sie ihr persönliches Konto.</h1>
<header>
<p>Für {{helloEmail.email}} 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">
<div class="registration-form__field skillboxform-input">
<div class="registration-form__field skillboxform-input">
<div class="registration-form__field skillboxform-input">
<label for="prefix" class="skillboxform-input__label">Anrede</label>
<select
id="prefix"
@ -19,7 +23,6 @@
<option>Frau</option>
</select>
</div>
<div class="registration-form__field skillboxform-input">
<label for="firstname" class="skillboxform-input__label">Vorname</label>
<input
id="firstname"
@ -71,7 +74,7 @@
data-cy="lastname-remote-errors"
>{{ error }}</small>
</div>
<div class="change-form__field skillboxform-input">
<!-- <div class="change-form__field skillboxform-input">
<label for="email" class="skillboxform-input__label">E-Mail</label>
<input
id="email"
@ -96,96 +99,67 @@
class="skillboxform-input__error"
data-cy="email-remote-errors"
>{{ error }}</small>
</div>
</div> -->
<div class="change-form__field skillboxform-input">
<label for="address" class="skillboxform-input__label">Adresse</label>
<label for="password" class="skillboxform-input__label">Passwort</label>
<input
id="address"
name="address"
id="password"
name="password"
type="text"
v-model="address"
data-vv-as="Adresse"
v-validate="'required'"
:class="{ 'skillboxform-input__input--error': errors.has('address') }"
v-model="password"
data-vv-as="Passwort"
v-validate="'required|strongPassword'"
:class="{ 'skillboxform-input__input--error': errors.has('password') }"
class="change-form__new skillbox-input skillboxform-input__input"
autocomplete="off"
data-cy="address-input"
data-cy="password-input"
ref="password"
/>
<small
v-if="errors.has('address') && submitted"
v-if="errors.has('password') && submitted"
class="skillboxform-input__error"
data-cy="address-local-errors"
>{{ errors.first('address') }}</small>
data-cy="password-local-errors"
>{{ errors.first('password') }}</small>
<small
v-for="error in addressErrors"
v-for="error in passwordErrors"
:key="error"
class="skillboxform-input__error"
data-cy="address-remote-errors"
data-cy="password-remote-errors"
>{{ error }}</small>
</div>
<div class="change-form__field skillboxform-input">
<label for="zipCode" class="skillboxform-input__label">PLZ</label>
<label for="password2" class="skillboxform-input__label">Passwort wiederholen</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"
id="passwordConfirmation"
name="passwordConfirmation"
type="text"
v-model="city"
data-vv-as="Ort"
v-validate="'required'"
:class="{ 'skillboxform-input__input--error': errors.has('city') }"
v-model="passwordConfirmation"
data-vv-as="Passwort wiederholen"
v-validate="'required|confirmed:password'"
:class="{ 'skillboxform-input__input--error': errors.has('passwordConfirmation') }"
class="change-form__new skillbox-input skillboxform-input__input"
autocomplete="off"
data-cy="city-input"
data-cy="passwordConfirmation-input"
/>
<small
v-if="errors.has('city') && submitted"
v-if="errors.has('passwordConfirmation') && submitted"
class="skillboxform-input__error"
data-cy="city-local-errors"
>{{ errors.first('city') }}</small>
data-cy="password-local-errors"
>{{ errors.first('passwordConfirmation') }}</small>
<small
v-for="error in cityErrors"
v-for="error in passwordErrors"
:key="error"
class="skillboxform-input__error"
data-cy="city-remote-errors"
data-cy="password-remote-errors"
>{{ error }}</small>
</div>
<div class="skillboxform-input">
<small class="skillboxform-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="register-button">Jetzt registrieren</button>
</div>
<div class="account-link">
<p class="account-link__text">Haben Sie ein Konto?</p>
<router-link class="account-link__link text-link" :to="{name: 'login'}">Jetzt anmelden
</router-link>
<button class="button button--primary button--big actions__submit" data-cy="register-button">Konto erstellen</button>
</div>
</form>
</div>
</template>
@ -193,6 +167,7 @@
<script>
import {register} from '../hep-client/index'
import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
export default {
components: {},
@ -205,21 +180,12 @@ export default {
const registrationData = {
customer: {
prefix: this.prefix,
email: this.email,
email: this.helloEmail.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
}]
}
},
password: this.password
};
register(registrationData).then((response) => {
@ -240,18 +206,15 @@ export default {
},
resetForm() {
this.prefix = '';
this.email = '';
this.lastname = '';
this.firstname = '';
this.zipCode = '';
this.address = '';
this.city = '';
this.password = '';
this.passwordConfirmation = '';
this.firstnameErrors = [];
this.lastnameErrors = [];
this.emailErrors = [];
this.zipCodeErrors = [];
this.addressErrors = [];
this.cityErrors = [];
this.passwordsError = [];
this.passwordError = [];
this.registrationError = [];
this.submitted = false;
this.$validator.reset();
@ -261,22 +224,26 @@ export default {
data() {
return {
prefix: '',
email: '',
lastname: '',
firstname: '',
zipCode: '',
address: '',
city: '',
password: '',
passwordConfirmation: '',
firstnameErrors: '',
lastnameErrors: '',
emailErrors: '',
zipCodeErrors: '',
addressErrors: '',
cityErrors: '',
passwordsErrors: [],
passwordErrors: [],
registrationError: '',
submitted: false
};
}
},
apollo: {
helloEmail: {
query: HELLO_EMAIL
},
},
};
</script>