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

Fix validation

This commit is contained in:
Ramon Wenger 2022-10-27 15:46:12 +02:00
parent 6f37cec635
commit 1055b8c933
4 changed files with 158 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/validation/InputWrapper.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div
class="skillboxform-input"
>
<label
:for="id"
class="skillboxform-input__label"
>
{{ label }}
</label>
<slot :id="id" />
</div>
</template>
<script setup>
defineProps({
id: String,
label: String
}) ;
</script>

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

@ -1,108 +0,0 @@
<template>
<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&#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="remoteErrorsCy"-->
<!-- class="skillboxform-input__error"-->
<!-- v-for="error in remoteErrors"-->
<!-- :key="error"-->
<!-- >{{ error }}</small>-->
<!-- </div>-->
<!-- </ValidationProvider>-->
</template>
<!--<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';-->
<!-- defineRule('required', required);-->
<!-- 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';
</style>

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

@ -3,80 +3,90 @@
<h1 class="login__title public-page__title"> <h1 class="login__title public-page__title">
Melden Sie sich jetzt an Melden Sie sich jetzt an
</h1> </h1>
<h2>Todo: re-enable validation</h2> <v-form
<form class="login__form login-form"
novalidate novalidate
@submit.prevent="validateBeforeSubmit(validateBeforeSubmit)" @submit="validateBeforeSubmit"
> >
<input <Field
placeholder="email" :rules="required"
v-model="email" name="email"
label="E-Mail"
class="login-form__field"
v-slot="{field}"
> >
<input <input-wrapper
placeholder="password" v-slot="{id}"
type="password" label="E-Mail"
v-model="password" id="email"
>
<input
v-bind="field"
class="skillboxform-input__input skillbox-input"
data-cy="email-input"
name="email"
:id="id"
>
<ErrorMessage
name="email"
class="skillboxform-input__error"
/>
</input-wrapper>
</Field>
<Field
:rules="required"
name="password"
class="login-form__field"
label="Passwort"
v-slot="{field}"
> >
<input type="submit"> <input-wrapper
</form> v-slot="{id}"
<!-- <ValidationObserver v-slot="{handleSubmit}">--> label="Passwort"
<!-- <form--> id="password"
<!-- class="login__form login-form"--> >
<!-- novalidate--> <input
<!-- @submit.prevent="handleSubmit(validateBeforeSubmit)"--> v-bind="field"
<!-- >--> data-cy="password-input"
<!-- <validated-input--> class="skillboxform-input__input skillbox-input"
<!-- :remote-errors="emailErrors"--> name="password"
<!-- rules="required"--> type="password"
<!-- name="email"--> :id="id"
<!-- label="E-Mail"--> >
<!-- data-cy="email-input"--> <ErrorMessage
<!-- id="email"--> name="password"
<!-- v-model="email"--> class="skillboxform-input__error"
<!-- />--> />
</input-wrapper>
</Field>
<!-- <validated-input-->
<!-- :remote-errors="passwordErrors"-->
<!-- label="Passwort"-->
<!-- rules="required"-->
<!-- name="password"-->
<!-- type="password"-->
<!-- data-cy="password-input"-->
<!-- v-model="password"-->
<!-- />-->
<!-- <div class="skillboxform-input">--> <div class="actions">
<!-- <small--> <button
<!-- class="skillboxform-input__error"--> class="button button--primary button--big actions__submit"
<!-- data-cy="login-error"--> data-cy="login-button"
<!-- v-if="loginError"--> >
<!-- >{{ loginError }}</small>--> Anmelden
<!-- </div>--> </button>
<!-- <div class="actions">--> </div>
<!-- <button--> </v-form>
<!-- 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 {Form, Field, ErrorMessage} from 'vee-validate';
// import {defineAsyncComponent} from 'vue'; import {defineComponent} from 'vue';
import InputWrapper from '@/components/validation/InputWrapper';
// const ValidatedInput = defineAsyncComponent(() => import('@/components/validation/ValidatedInput'));
export default { export default defineComponent({
// components: { components: {
// ValidatedInput, InputWrapper,
// ValidationObserver, 'v-form': Form,
// }, Field,
ErrorMessage,
},
data() { data() {
return { return {
@ -90,13 +100,19 @@
}, },
methods: { methods: {
validateBeforeSubmit() { required(value, {field}) {
if (value && value.trim()) {
return true;
}
return `${field} ist ein Pflichtfeld`;
},
validateBeforeSubmit({email, password}) {
this.submitted = true; this.submitted = true;
const variables = { const variables = {
input: { input: {
usernameInput: this.email, usernameInput: email,
passwordInput: this.password, passwordInput: password,
}, },
}; };
@ -130,7 +146,7 @@
}); });
}, },
}, },
}; });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

95
client/src/pages/license-activation.vue
View File

@ -7,41 +7,53 @@
</p> </p>
</header> </header>
<section class="coupon"> <section class="coupon">
<ValidationObserver <v-form
v-slot="{handleSubmit}" class="license-activation__form license-activation-form"
novalidate
@submit="validateBeforeSubmit"
> >
<form <h2>Geben Sie einen Coupon-Code ein</h2>
class="license-activation__form license-activation-form" <Field
novalidate :rules="required"
@submit.prevent="handleSubmit(validateBeforeSubmit)" name="coupon"
class="login-form__field"
label="Coupon-Code"
v-model="coupon"
v-slot="{field}"
> >
<h2>Geben Sie einen Coupon-Code ein</h2> <input-wrapper
<validated-input v-slot="{id}"
:remote-errors="couponErrors"
rules="required"
name="coupon"
label="Coupon-Code" label="Coupon-Code"
data-cy="coupon-input" id="coupon"
class="login-form__field" >
tabindex="0" <input
v-model="coupon" v-bind="field"
/> class="skillboxform-input__input skillbox-input"
<div class="actions"> data-cy="coupon-input"
<loading-button name="coupon"
:loading="loading" :id="id"
class="actions__submit" >
data-cy="coupon-button" <ErrorMessage
label="Coupon abschicken" name="coupon"
class="skillboxform-input__error"
/> />
<a </input-wrapper>
class="button button--big" </Field>
data-cy="license-activation-cancel" <div class="actions">
@click="logout" <loading-button
>Abmelden :loading="loading"
</a> class="actions__submit"
</div> data-cy="coupon-button"
</form> label="Coupon abschicken"
</ValidationObserver> />
<a
class="button button--big"
data-cy="license-activation-cancel"
@click="logout"
>Abmelden
</a>
</div>
</v-form>
</section> </section>
<section class="get-license"> <section class="get-license">
<h2>Oder, kaufen Sie eine Lizenz</h2> <h2>Oder, kaufen Sie eine Lizenz</h2>
@ -67,20 +79,20 @@
import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql'; import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql'; import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import LoadingButton from '@/components/LoadingButton'; import LoadingButton from '@/components/LoadingButton';
import {ValidationObserver} from 'vee-validate';
import me from '@/mixins/me'; import me from '@/mixins/me';
import logout from '@/mixins/logout'; import logout from '@/mixins/logout';
import {defineAsyncComponent} from 'vue'; import {Form, Field} from 'vee-validate';
const ValidatedInput = defineAsyncComponent(() => import('@/components/validation/ValidatedInput')); import InputWrapper from '@/components/validation/InputWrapper';
export default { export default {
mixins: [me, logout], mixins: [me, logout],
components: { components: {
InputWrapper,
LoadingButton, LoadingButton,
ValidationObserver, 'v-form': Form,
ValidatedInput, Field
}, },
data() { data() {
@ -98,14 +110,21 @@
}; };
}, },
methods: { methods: {
validateBeforeSubmit() { required(value, {field}) {
if (value && value.trim()) {
return true;
}
return `${field} ist ein Pflichtfeld`;
},
validateBeforeSubmit({coupon: couponCode}) {
console.log('coupon', couponCode);
this.submitted = true; this.submitted = true;
this.loading = true; this.loading = true;
this.$apollo.mutate({ this.$apollo.mutate({
mutation: REDEEM_COUPON, mutation: REDEEM_COUPON,
variables: { variables: {
input: { input: {
couponCode: this.coupon, couponCode
}, },
}, },
update: ( update: (