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

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

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