From 1055b8c93383410186de067099c91fef141f8414 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 27 Oct 2022 15:46:12 +0200
Subject: [PATCH] Fix validation

---
 .../components/validation/InputWrapper.vue    |  20 +++
 .../components/validation/ValidatedInput.vue  | 108 -------------
 client/src/pages/beta-login.vue               | 146 ++++++++++--------
 client/src/pages/license-activation.vue       |  95 +++++++-----
 4 files changed, 158 insertions(+), 211 deletions(-)
 create mode 100644 client/src/components/validation/InputWrapper.vue
 delete mode 100644 client/src/components/validation/ValidatedInput.vue

diff --git a/client/src/components/validation/InputWrapper.vue b/client/src/components/validation/InputWrapper.vue
new file mode 100644
index 00000000..d700b17e
--- /dev/null
+++ b/client/src/components/validation/InputWrapper.vue
@@ -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>
diff --git a/client/src/components/validation/ValidatedInput.vue b/client/src/components/validation/ValidatedInput.vue
deleted file mode 100644
index c537be50..00000000
--- a/client/src/components/validation/ValidatedInput.vue
+++ /dev/null
@@ -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>
diff --git a/client/src/pages/beta-login.vue b/client/src/pages/beta-login.vue
index 5b1add29..dd785eb2 100644
--- a/client/src/pages/beta-login.vue
+++ b/client/src/pages/beta-login.vue
@@ -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">
diff --git a/client/src/pages/license-activation.vue b/client/src/pages/license-activation.vue
index e3559b45..2ab88bd0 100644
--- a/client/src/pages/license-activation.vue
+++ b/client/src/pages/license-activation.vue
@@ -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: (