From e116da3a5768e3c3ba1fdd3d2eb1929e0b520399 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 24 Mar 2022 07:10:22 +0100
Subject: [PATCH] Disable validation temporarily

---
 .../components/validation/ValidatedInput.vue  | 171 ++++++++-------
 client/src/pages/beta-login.vue               | 194 ++++++++++--------
 2 files changed, 210 insertions(+), 155 deletions(-)

diff --git a/client/src/components/validation/ValidatedInput.vue b/client/src/components/validation/ValidatedInput.vue
index 71908c15..c537be50 100644
--- a/client/src/components/validation/ValidatedInput.vue
+++ b/client/src/components/validation/ValidatedInput.vue
@@ -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&#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">{{
-        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>
diff --git a/client/src/pages/beta-login.vue b/client/src/pages/beta-login.vue
index d5ce9361..5b1add29 100644
--- a/client/src/pages/beta-login.vue
+++ b/client/src/pages/beta-login.vue
@@ -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&#45;&#45;primary button&#45;&#45;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>