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

Disable validation temporarily

This commit is contained in:
Ramon Wenger 2022-03-24 07:10:22 +01:00
parent 6cf9457dca
commit e116da3a57
2 changed files with 210 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
client/src/components/validation/ValidatedInput.vue
View File

@ -1,85 +1,108 @@
<template> <template>
<ValidationProvider v-slot="{ errors }" :name="name" :rules="rules"> <h1>todo: re-enable</h1>
<div class="skillboxform-input"> <!-- <ValidationProvider-->
<label :for="id" class="skillboxform-input__label">{{ label }}</label> <!-- v-slot="{errors}"-->
<input <!-- :name="name"-->
:value="value" <!-- :rules="rules"-->
:class="{ 'skillboxform-input__input--error': errors.length }" <!-- >-->
v-bind="$attrs" <!-- <div class="skillboxform-input">-->
class="change-form__email skillbox-input skillboxform-input__input" <!-- <label-->
autocomplete="off" <!-- :for="id"-->
:id="id" <!-- class="skillboxform-input__label"-->
@input="$emit('input', $event.target.value)" <!-- >{{ label }}</label>-->
/> <!-- <input-->
<!-- v-bind="$attrs"-->
<!-- :value="value"-->
<!-- :class="{ 'skillboxform-input__input&#45;&#45;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">{{ <!-- <small-->
error <!-- :data-cy="remoteErrorsCy"-->
}}</small> <!-- class="skillboxform-input__error"-->
</div> <!-- v-for="error in remoteErrors"-->
</ValidationProvider> <!-- :key="error"-->
<!-- >{{ error }}</small>-->
<!-- </div>-->
<!-- </ValidationProvider>-->
</template> </template>
<script> <!--<script lang="ts">-->
import { extend, localize, ValidationProvider } from 'vee-validate'; <!-- import {defineComponent} from "vue";-->
import de from 'vee-validate/dist/locale/de.json'; <!-- import {extend, localize, ValidationProvider, useField, defineRule} from 'vee-validate';-->
import { required } from 'vee-validate/dist/rules'; <!-- import de from 'vee-validate/dist/locale/de.json';-->
<!-- import {required} from '@vee-validate/rules';-->
extend('required', required);
localize('de', { <!-- defineRule('required', required);-->
...de,
names: {
password: 'Passwort',
email: 'E-Mail',
coupon: 'Coupon-Code',
},
});
// todo: use this in beta-login, license-activation and PasswordChangeForm <!-- localize('de', {-->
export default { <!-- ...de,-->
props: { <!-- names: {-->
value: { <!-- password: 'Passwort',-->
type: String, <!-- email: 'E-Mail',-->
default: '', <!-- coupon: 'Coupon-Code'-->
}, <!-- },-->
remoteErrors: { <!-- });-->
type: Array,
default: undefined, <!-- // todo: use this in beta-login, license-activation and PasswordChangeForm-->
}, <!-- export default defineComponent({-->
name: { <!-- props: {-->
type: String, <!-- value: {-->
default: '', <!-- type: String,-->
}, <!-- default: '',-->
label: { <!-- },-->
type: String, <!-- remoteErrors: {-->
default: '', <!-- type: Array,-->
}, <!-- default: undefined,-->
rules: { <!-- },-->
type: String, <!-- name: {-->
default: 'required', <!-- type: String,-->
}, <!-- default: '',-->
}, <!-- },-->
components: { <!-- label: {-->
ValidationProvider, <!-- type: String,-->
}, <!-- default: '',-->
inheritAttrs: false, <!-- },-->
computed: { <!-- rules: {-->
id() { <!-- type: String,-->
return this.$attrs.id || this._uid; <!-- default: 'required',-->
}, <!-- },-->
remoteErrorsCy() { <!-- },-->
return `${this.name}-remote-errors`; <!-- components: {-->
}, <!-- ValidationProvider,-->
localErrorsCy() { <!-- },-->
return `${this.name}-local-errors`; <!-- inheritAttrs: false,-->
}, <!-- setup() {-->
}, <!-- const {errorMessage, value} = useField();-->
mounted() {},
}; <!-- },-->
</script> <!-- computed: {-->
<!-- id() {-->
<!-- return this.$attrs.id;-->
<!-- },-->
<!-- remoteErrorsCy() {-->
<!-- return `${this.name}-remote-errors`;-->
<!-- },-->
<!-- localErrorsCy() {-->
<!-- return `${this.name}-local-errors`;-->
<!-- },-->
<!-- },-->
<!-- mounted() {-->
<!-- },-->
<!-- });-->
<!--</script>-->
<style scoped lang="scss"> <style scoped lang="scss">
@import '~styles/helpers'; @import '~styles/helpers';
</style> </style>

194
client/src/pages/beta-login.vue
View File

@ -1,81 +1,112 @@
<template> <template>
<div class="login public-page"> <div class="login public-page">
<h1 class="login__title public-page__title">Melden Sie sich jetzt an</h1> <h1 class="login__title public-page__title">
<ValidationObserver v-slot="{ handleSubmit }"> Melden Sie sich jetzt an
<form class="login__form login-form" novalidate @submit.prevent="handleSubmit(validateBeforeSubmit)"> </h1>
<validated-input <h2>Todo: re-enable validation</h2>
:remote-errors="emailErrors" <form
rules="required" novalidate
name="email" @submit.prevent="validateBeforeSubmit(validateBeforeSubmit)"
label="E-Mail" >
data-cy="email-input" <input
id="email" placeholder="email"
v-model="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 <!-- <validated-input-->
:remote-errors="passwordErrors" <!-- :remote-errors="passwordErrors"-->
label="Passwort" <!-- label="Passwort"-->
rules="required" <!-- rules="required"-->
name="password" <!-- name="password"-->
type="password" <!-- type="password"-->
data-cy="password-input" <!-- data-cy="password-input"-->
v-model="password" <!-- v-model="password"-->
/> <!-- />-->
<div class="skillboxform-input"> <!-- <div class="skillboxform-input">-->
<small class="skillboxform-input__error" data-cy="login-error" v-if="loginError">{{ loginError }}</small> <!-- <small-->
</div> <!-- class="skillboxform-input__error"-->
<div class="actions"> <!-- data-cy="login-error"-->
<button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button> <!-- v-if="loginError"-->
</div> <!-- >{{ loginError }}</small>-->
</form> <!-- </div>-->
</ValidationObserver> <!-- <div class="actions">-->
<!-- <button-->
<!-- class="button button&#45;&#45;primary button&#45;&#45;big actions__submit"-->
<!-- data-cy="login-button"-->
<!-- >-->
<!-- Anmelden-->
<!-- </button>-->
<!-- </div>-->
<!-- </form>-->
<!-- </ValidationObserver>-->
</div> </div>
</template> </template>
<script> <script>
import BETA_LOGIN_MUTATION from 'gql/public-client/betaLogin.gql'; import BETA_LOGIN_MUTATION from 'gql/public-client/betaLogin.gql';
import { ValidationObserver } from 'vee-validate'; // import {ValidationObserver} from 'vee-validate';
// import {defineAsyncComponent} from 'vue';
const ValidatedInput = () => import('@/components/validation/ValidatedInput'); // const ValidatedInput = defineAsyncComponent(() => import('@/components/validation/ValidatedInput'));
export default { export default {
components: { // components: {
ValidatedInput, // ValidatedInput,
ValidationObserver, // ValidationObserver,
}, // },
data() { data() {
return { return {
email: '', email: '',
password: '', password: '',
emailErrors: [], emailErrors: [],
passwordErrors: [], passwordErrors: [],
loginError: '', loginError: '',
submitted: false, submitted: false,
};
},
methods: {
validateBeforeSubmit() {
this.submitted = true;
const variables = {
input: {
usernameInput: this.email,
passwordInput: this.password,
},
}; };
},
const redirectUrl = this.$route.query.redirect ? this.$route.query.redirect : '/'; methods: {
validateBeforeSubmit() {
this.submitted = true;
this.$apollo const variables = {
.mutate({ input: {
usernameInput: this.email,
passwordInput: this.password,
},
};
const redirectUrl = this.$route.query.redirect ? this.$route.query.redirect : '/';
this.$apollo.mutate({
client: 'publicClient', client: 'publicClient',
mutation: BETA_LOGIN_MUTATION, mutation: BETA_LOGIN_MUTATION,
variables, variables,
update: (store, { data: { betaLogin } }) => { update: (store, {data: {betaLogin}}) => {
try { try {
if (betaLogin.success) { if (betaLogin.success) {
console.log(this); console.log(this);
@ -86,8 +117,7 @@ export default {
this.loginError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.'; this.loginError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
} }
}, },
}) }).catch(error => {
.catch((error) => {
const firstError = error.graphQLErrors[0]; const firstError = error.graphQLErrors[0];
switch (firstError.message) { switch (firstError.message) {
case 'invalid_credentials': case 'invalid_credentials':
@ -98,28 +128,30 @@ export default {
break; break;
} }
}); });
},
}, },
}, };
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '~styles/helpers'; @import "~styles/helpers";
.text-link { .text-link {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-brand; color: $color-brand;
}
.actions {
display: flex;
justify-content: space-between;
&__reset {
display: inline-block;
margin-left: $large-spacing;
padding: 15px;
line-height: 19px;
} }
}
.actions {
display: flex;
justify-content: space-between;
&__reset {
display: inline-block;
margin-left: $large-spacing;
padding: 15px;
line-height: 19px;
}
}
</style> </style>