Disable validation temporarily
This commit is contained in:
parent
6cf9457dca
commit
e116da3a57
|
|
@ -1,85 +1,108 @@
|
|||
<template>
|
||||
<ValidationProvider v-slot="{ errors }" :name="name" :rules="rules">
|
||||
<div class="skillboxform-input">
|
||||
<label :for="id" class="skillboxform-input__label">{{ label }}</label>
|
||||
<input
|
||||
:value="value"
|
||||
:class="{ 'skillboxform-input__input--error': errors.length }"
|
||||
v-bind="$attrs"
|
||||
class="change-form__email skillbox-input skillboxform-input__input"
|
||||
autocomplete="off"
|
||||
:id="id"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
/>
|
||||
<h1>todo: re-enable</h1>
|
||||
<!-- <ValidationProvider-->
|
||||
<!-- v-slot="{errors}"-->
|
||||
<!-- :name="name"-->
|
||||
<!-- :rules="rules"-->
|
||||
<!-- >-->
|
||||
<!-- <div class="skillboxform-input">-->
|
||||
<!-- <label-->
|
||||
<!-- :for="id"-->
|
||||
<!-- class="skillboxform-input__label"-->
|
||||
<!-- >{{ label }}</label>-->
|
||||
<!-- <input-->
|
||||
<!-- v-bind="$attrs"-->
|
||||
<!-- :value="value"-->
|
||||
<!-- :class="{ 'skillboxform-input__input--error': errors.length }"-->
|
||||
<!-- class="change-form__email skillbox-input skillboxform-input__input"-->
|
||||
<!-- autocomplete="off"-->
|
||||
<!-- :id="id"-->
|
||||
<!-- @input="$emit('input', $event.target.value)"-->
|
||||
<!-- >-->
|
||||
|
||||
<small :data-cy="localErrorsCy" class="skillboxform-input__error" v-if="errors.length">{{ errors[0] }}</small>
|
||||
<!-- <small-->
|
||||
<!-- :data-cy="localErrorsCy"-->
|
||||
<!-- class="skillboxform-input__error"-->
|
||||
<!-- v-if="errors.length"-->
|
||||
<!-- >{{ errors[0] }}</small>-->
|
||||
|
||||
<small :data-cy="remoteErrorsCy" class="skillboxform-input__error" v-for="error in remoteErrors" :key="error">{{
|
||||
error
|
||||
}}</small>
|
||||
</div>
|
||||
</ValidationProvider>
|
||||
<!-- <small-->
|
||||
<!-- :data-cy="remoteErrorsCy"-->
|
||||
<!-- class="skillboxform-input__error"-->
|
||||
<!-- v-for="error in remoteErrors"-->
|
||||
<!-- :key="error"-->
|
||||
<!-- >{{ error }}</small>-->
|
||||
<!-- </div>-->
|
||||
<!-- </ValidationProvider>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { extend, localize, ValidationProvider } from 'vee-validate';
|
||||
import de from 'vee-validate/dist/locale/de.json';
|
||||
import { required } from 'vee-validate/dist/rules';
|
||||
<!--<script lang="ts">-->
|
||||
<!-- import {defineComponent} from "vue";-->
|
||||
<!-- import {extend, localize, ValidationProvider, useField, defineRule} from 'vee-validate';-->
|
||||
<!-- import de from 'vee-validate/dist/locale/de.json';-->
|
||||
<!-- import {required} from '@vee-validate/rules';-->
|
||||
|
||||
extend('required', required);
|
||||
|
||||
localize('de', {
|
||||
...de,
|
||||
names: {
|
||||
password: 'Passwort',
|
||||
email: 'E-Mail',
|
||||
coupon: 'Coupon-Code',
|
||||
},
|
||||
});
|
||||
<!-- defineRule('required', required);-->
|
||||
|
||||
// todo: use this in beta-login, license-activation and PasswordChangeForm
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
remoteErrors: {
|
||||
type: Array,
|
||||
default: undefined,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
rules: {
|
||||
type: String,
|
||||
default: 'required',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ValidationProvider,
|
||||
},
|
||||
inheritAttrs: false,
|
||||
computed: {
|
||||
id() {
|
||||
return this.$attrs.id || this._uid;
|
||||
},
|
||||
remoteErrorsCy() {
|
||||
return `${this.name}-remote-errors`;
|
||||
},
|
||||
localErrorsCy() {
|
||||
return `${this.name}-local-errors`;
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
<!-- localize('de', {-->
|
||||
<!-- ...de,-->
|
||||
<!-- names: {-->
|
||||
<!-- password: 'Passwort',-->
|
||||
<!-- email: 'E-Mail',-->
|
||||
<!-- coupon: 'Coupon-Code'-->
|
||||
<!-- },-->
|
||||
<!-- });-->
|
||||
|
||||
<!-- // todo: use this in beta-login, license-activation and PasswordChangeForm-->
|
||||
<!-- export default defineComponent({-->
|
||||
<!-- props: {-->
|
||||
<!-- value: {-->
|
||||
<!-- type: String,-->
|
||||
<!-- default: '',-->
|
||||
<!-- },-->
|
||||
<!-- remoteErrors: {-->
|
||||
<!-- type: Array,-->
|
||||
<!-- default: undefined,-->
|
||||
<!-- },-->
|
||||
<!-- name: {-->
|
||||
<!-- type: String,-->
|
||||
<!-- default: '',-->
|
||||
<!-- },-->
|
||||
<!-- label: {-->
|
||||
<!-- type: String,-->
|
||||
<!-- default: '',-->
|
||||
<!-- },-->
|
||||
<!-- rules: {-->
|
||||
<!-- type: String,-->
|
||||
<!-- default: 'required',-->
|
||||
<!-- },-->
|
||||
<!-- },-->
|
||||
<!-- components: {-->
|
||||
<!-- ValidationProvider,-->
|
||||
<!-- },-->
|
||||
<!-- inheritAttrs: false,-->
|
||||
<!-- setup() {-->
|
||||
<!-- const {errorMessage, value} = useField();-->
|
||||
|
||||
<!-- },-->
|
||||
<!-- computed: {-->
|
||||
<!-- id() {-->
|
||||
<!-- return this.$attrs.id;-->
|
||||
<!-- },-->
|
||||
<!-- remoteErrorsCy() {-->
|
||||
<!-- return `${this.name}-remote-errors`;-->
|
||||
<!-- },-->
|
||||
<!-- localErrorsCy() {-->
|
||||
<!-- return `${this.name}-local-errors`;-->
|
||||
<!-- },-->
|
||||
<!-- },-->
|
||||
<!-- mounted() {-->
|
||||
<!-- },-->
|
||||
<!-- });-->
|
||||
<!--</script>-->
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
@import '~styles/helpers';
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,81 +1,112 @@
|
|||
<template>
|
||||
<div class="login public-page">
|
||||
<h1 class="login__title public-page__title">Melden Sie sich jetzt an</h1>
|
||||
<ValidationObserver v-slot="{ handleSubmit }">
|
||||
<form class="login__form login-form" novalidate @submit.prevent="handleSubmit(validateBeforeSubmit)">
|
||||
<validated-input
|
||||
:remote-errors="emailErrors"
|
||||
rules="required"
|
||||
name="email"
|
||||
label="E-Mail"
|
||||
data-cy="email-input"
|
||||
id="email"
|
||||
v-model="email"
|
||||
/>
|
||||
<h1 class="login__title public-page__title">
|
||||
Melden Sie sich jetzt an
|
||||
</h1>
|
||||
<h2>Todo: re-enable validation</h2>
|
||||
<form
|
||||
novalidate
|
||||
@submit.prevent="validateBeforeSubmit(validateBeforeSubmit)"
|
||||
>
|
||||
<input
|
||||
placeholder="email"
|
||||
v-model="email"
|
||||
>
|
||||
<input
|
||||
placeholder="password"
|
||||
type="password"
|
||||
v-model="password"
|
||||
>
|
||||
<input type="submit">
|
||||
</form>
|
||||
<!-- <ValidationObserver v-slot="{handleSubmit}">-->
|
||||
<!-- <form-->
|
||||
<!-- class="login__form login-form"-->
|
||||
<!-- novalidate-->
|
||||
<!-- @submit.prevent="handleSubmit(validateBeforeSubmit)"-->
|
||||
<!-- >-->
|
||||
<!-- <validated-input-->
|
||||
<!-- :remote-errors="emailErrors"-->
|
||||
<!-- rules="required"-->
|
||||
<!-- name="email"-->
|
||||
<!-- label="E-Mail"-->
|
||||
<!-- data-cy="email-input"-->
|
||||
<!-- id="email"-->
|
||||
<!-- v-model="email"-->
|
||||
<!-- />-->
|
||||
|
||||
<validated-input
|
||||
:remote-errors="passwordErrors"
|
||||
label="Passwort"
|
||||
rules="required"
|
||||
name="password"
|
||||
type="password"
|
||||
data-cy="password-input"
|
||||
v-model="password"
|
||||
/>
|
||||
<!-- <validated-input-->
|
||||
<!-- :remote-errors="passwordErrors"-->
|
||||
<!-- label="Passwort"-->
|
||||
<!-- rules="required"-->
|
||||
<!-- name="password"-->
|
||||
<!-- type="password"-->
|
||||
<!-- data-cy="password-input"-->
|
||||
<!-- v-model="password"-->
|
||||
<!-- />-->
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</ValidationObserver>
|
||||
<!-- <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>-->
|
||||
<!-- </div>-->
|
||||
<!-- </form>-->
|
||||
<!-- </ValidationObserver>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BETA_LOGIN_MUTATION from 'gql/public-client/betaLogin.gql';
|
||||
import { ValidationObserver } from 'vee-validate';
|
||||
import BETA_LOGIN_MUTATION from 'gql/public-client/betaLogin.gql';
|
||||
// import {ValidationObserver} from 'vee-validate';
|
||||
// import {defineAsyncComponent} from 'vue';
|
||||
|
||||
const ValidatedInput = () => import('@/components/validation/ValidatedInput');
|
||||
// const ValidatedInput = defineAsyncComponent(() => import('@/components/validation/ValidatedInput'));
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ValidatedInput,
|
||||
ValidationObserver,
|
||||
},
|
||||
export default {
|
||||
// components: {
|
||||
// ValidatedInput,
|
||||
// ValidationObserver,
|
||||
// },
|
||||
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
password: '',
|
||||
emailErrors: [],
|
||||
passwordErrors: [],
|
||||
loginError: '',
|
||||
submitted: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
validateBeforeSubmit() {
|
||||
this.submitted = true;
|
||||
|
||||
const variables = {
|
||||
input: {
|
||||
usernameInput: this.email,
|
||||
passwordInput: this.password,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
email: '',
|
||||
password: '',
|
||||
emailErrors: [],
|
||||
passwordErrors: [],
|
||||
loginError: '',
|
||||
submitted: false,
|
||||
};
|
||||
},
|
||||
|
||||
const redirectUrl = this.$route.query.redirect ? this.$route.query.redirect : '/';
|
||||
methods: {
|
||||
validateBeforeSubmit() {
|
||||
this.submitted = true;
|
||||
|
||||
this.$apollo
|
||||
.mutate({
|
||||
const variables = {
|
||||
input: {
|
||||
usernameInput: this.email,
|
||||
passwordInput: this.password,
|
||||
},
|
||||
};
|
||||
|
||||
const redirectUrl = this.$route.query.redirect ? this.$route.query.redirect : '/';
|
||||
|
||||
this.$apollo.mutate({
|
||||
client: 'publicClient',
|
||||
mutation: BETA_LOGIN_MUTATION,
|
||||
variables,
|
||||
update: (store, { data: { betaLogin } }) => {
|
||||
update: (store, {data: {betaLogin}}) => {
|
||||
try {
|
||||
if (betaLogin.success) {
|
||||
console.log(this);
|
||||
|
|
@ -86,8 +117,7 @@ export default {
|
|||
this.loginError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
|
||||
}
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
}).catch(error => {
|
||||
const firstError = error.graphQLErrors[0];
|
||||
switch (firstError.message) {
|
||||
case 'invalid_credentials':
|
||||
|
|
@ -98,28 +128,30 @@ export default {
|
|||
break;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~styles/helpers';
|
||||
@import "~styles/helpers";
|
||||
|
||||
.text-link {
|
||||
font-family: $sans-serif-font-family;
|
||||
color: $color-brand;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__reset {
|
||||
display: inline-block;
|
||||
margin-left: $large-spacing;
|
||||
padding: 15px;
|
||||
line-height: 19px;
|
||||
.text-link {
|
||||
font-family: $sans-serif-font-family;
|
||||
color: $color-brand;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&__reset {
|
||||
display: inline-block;
|
||||
margin-left: $large-spacing;
|
||||
padding: 15px;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue