Add form validation, style form

client/package.json

@@ -68,6 +68,7 @@
     "uploadcare-widget": "^3.6.0",
     "url-loader": "^1.0.1",
     "uuid": "^3.2.1",
+    "vee-validate": "^2.2.0",
     "vue": "^2.5.17",
     "vue-analytics": "^5.16.2",
     "vue-apollo": "^3.0.0-beta.16",

client/src/components/PasswordReset.vue

@@ -1,11 +1,27 @@
 <template>
   <div class="pw-reset">
-    <form class="pw-reset__form reset-form">
-      <label for="current-pw" class="reset-form__current-label">Aktuells Passwort</label>
-      <input id="current-pw" type="text" class="reset-form__current">
-      <label for="new-pw" class="reset-form__new-label">Neues Passwort</label>
-      <input id="new-pw" type="text" class="reset-form__new">
-      <button class="reset-form__submit">Zurücksetzen</button>
+    <form class="pw-reset__form reset-form" novalidate @submit.prevent="validateBeforeSubmit">
+      <div class="reset-form__field sbform-input">
+        <label for="old-pw" class="sbform-input__label">Aktuells Passwort</label>
+        <input id="old-pw"
+               name="oldPassword"
+               type="text"
+               v-validate="'required'"
+               :class="{ 'sbform-input__input--error': errors.has('oldPassword') }"
+               class="reset-form__old skillbox-input sbform-input__input">
+        <small v-if="errors.has('oldPassword') && submitted" class="sbform-input__error">{{ errors.first('oldPassword') }}</small>
+      </div>
+      <div class="reset-form__field sbform-input">
+        <label for="new-pw" class="sbform-input__label">Neues Passwort</label>
+        <input id="new-pw"
+               name="newPassword"
+               type="text"
+               v-validate="'required|min:8|strongPassword'"
+               :class="{ 'sbform-input__input--error': errors.has('newPassword') }"
+               class="reset-form__new skillbox-input sbform-input__input">
+        <small v-if="errors.has('newPassword') && submitted" class=" sbform-input__error">{{ errors.first('newPassword') }}</small>
+      </div>
+      <button class="button button--primary reset-form__submit">Zurücksetzen</button>
     </form>
   </div>
 </template>
@@ -15,10 +31,17 @@
     components: {
 
     },
-
-    data() {
-      return {
-        me: []
+    data: () => ({
+      oldPassword: '',
+      newPassword: '',
+      submitted: false
+    }),
+    methods: {
+      validateBeforeSubmit () {
+        this.$validator.validate().then((result) => {
+          this.submitted = true;
+          console.log(this)
+        })
       }
     }
   }
@@ -26,5 +49,39 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_buttons.scss";
+
+  .reset-form {
+    width: 50%;
+
+    @media screen and (max-width: 480px) {
+      width: 100%;
+    }
+  }
+
+  .sbform-input {
+
+    margin-bottom: 20px;
+    font-family: $sans-serif-font-family;
+
+    &__label {
+      margin-bottom: 10px;
+      display: inline-block;
+    }
+
+    &__input {
+      width: 100%;
+
+      &--error {
+        border-color: $color-error;
+      }
+    }
+
+    &__error {
+      margin-top: 10px;
+      color: $color-error;
+      display: inline-block;
+    }
+  }
 
 </style>

client/src/main.js

@@ -10,6 +10,9 @@ import router from './router'
 import store from '@/store/index'
 import VueScrollTo from 'vue-scrollto';
 import VueAnalytics from 'vue-analytics';
+import { Validator, install as VeeValidate } from 'vee-validate/dist/vee-validate.minimal.esm.js';
+import { required, min } from 'vee-validate/dist/rules.esm.js';
+import veeDe from 'vee-validate/dist/locale/de';
 
 Vue.config.productionTip = false;
 
@@ -73,6 +76,35 @@ const apolloProvider = new VueApollo({
   defaultClient: apolloClient
 });
 
+Validator.extend('required', required);
+Validator.extend('min', min);
+
+const dict = {
+  custom: {
+    oldPassword: {
+      required: 'Dein jetztiges Passwort fehlt'
+    },
+    newPassword: {
+      required: 'Dein neues Passwort fehlt',
+      min: 'Das neue Passwort muss mindestens 8 Zeichen lang sein'
+    }
+  }
+}
+
+Validator.localize('de', veeDe)
+Validator.localize('de', dict)
+// https://github.com/baianat/vee-validate/issues/51
+Validator.extend('strongPassword', {
+  getMessage: field => 'Das Passwort muss Grossbuchstaben, Zahlen und Sonderzeichen beinhalten',
+  validate: value => {
+    const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*?(),.":{}|<>+])(?=.{8,})/;
+    return strongRegex.test(value);
+  }
+})
+Vue.use(VeeValidate, {
+  locale: 'de'
+});
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',