skillbox/client/src/pages/registration.vue

<template>
  <div class="registration">
    <h1 class="registration__title">Registrieren Sie ihr persönliches Konto.</h1>
    <form class="registration__form registration-form" novalidate @submit.prevent="validateBeforeSubmit">
      <div class="registration-form__field skillboxform-input">
        <label for="firstname" class="skillboxform-input__label">Vorname</label>
        <input
          id="firstname"
          name="firstname"
          type="text"
          v-model="firstname"
          data-vv-as="Vorname"
          v-validate="'required'"
          :class="{ 'skillboxform-input__input--error': errors.has('firstname') }"
          class="change-form__firstname skillbox-input skillboxform-input__input"
          autocomplete="off"
          data-cy="firstname-input"
        />
        <small
          v-if="errors.has('firstname') && submitted"
          class="skillboxform-input__error"
          data-cy="firstname-local-errors"
        >{{ errors.first('firstname') }}</small>
        <small
          v-for="error in firstnameErrors"
          :key="error"
          class="skillboxform-input__error"
          data-cy="firstname-remote-errors"
        >{{ error }}</small>
      </div>
      <div class="change-form__field skillboxform-input">
        <label for="lastname" class="skillboxform-input__label">Nachname</label>
        <input
          id="lastname"
          name="lastname"
          type="text"
          v-model="lastname"
          data-vv-as="Nachname"
          v-validate="'required'"
          :class="{ 'skillboxform-input__input--error': errors.has('lastname') }"
          class="change-form__new skillbox-input skillboxform-input__input"
          autocomplete="off"
          data-cy="lastname-input"
        />
        <small
          v-if="errors.has('lastname') && submitted"
          class="skillboxform-input__error"
          data-cy="lastname-local-errors"
        >{{ errors.first('lastname') }}</small>
        <small
          v-for="error in lastnameErrors"
          :key="error"
          class="skillboxform-input__error"
          data-cy="lastname-remote-errors"
        >{{ error }}</small>
      </div>
      <div class="change-form__field skillboxform-input">
        <label for="email" class="skillboxform-input__label">E-Mail</label>
        <input
          id="email"
          name="email"
          type="text"
          v-model="email"
          data-vv-as="E-Mail"
          v-validate="'required|email'"
          :class="{ 'skillboxform-input__input--error': errors.has('email') }"
          class="change-form__new skillbox-input skillboxform-input__input"
          autocomplete="off"
          data-cy="email-input"
        />
        <small
          v-if="errors.has('email') && submitted"
          class="skillboxform-input__error"
          data-cy="email-local-errors"
        >{{ errors.first('email') }}</small>
        <small
          v-for="error in emailErrors"
          :key="error"
          class="skillboxform-input__error"
          data-cy="email-remote-errors"
        >{{ error }}</small>
      </div>
      <div class="change-form__field skillboxform-input">
        <label for="licenseKey" class="skillboxform-input__label">Lizenz</label>
        <input
          id="licenseKey"
          name="licenseKey"
          type="text"
          v-model="licenseKey"
          data-vv-as="Lizenz"
          v-validate="'required'"
          :class="{ 'skillboxform-input__input--error': errors.has('licenseKey') }"
          class="change-form__new skillbox-input skillboxform-input__input"
          autocomplete="off"
          data-cy="licenseKey-input"
        />
        <small
          v-if="errors.has('licenseKey') && submitted"
          class="skillboxform-input__error"
          data-cy="licenseKey-local-errors"
        >{{ errors.first('licenseKey') }}</small>
        <small
          v-for="error in licenseKeyErrors"
          :key="error"
          class="skillboxform-input__error"
          data-cy="licenseKey-remote-errors"
        >{{ error }}</small>
      </div>
      <div class="skillboxform-input">
        <small class="skillboxform-input__error" data-cy="registration-error" v-if="registrationError">{{registrationError}}</small>
      </div>
      <div class="actions">
        <button class="button button--primary button--big actions__submit" data-cy="register-button">Jetzt registration</button>
      </div>
    </form>
  </div>
</template>

<script>
import REGISTRATION_MUTATION from '@/graphql/gql/mutations/registration.gql';

export default {
  components: {},

  methods: {
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        this.submitted = true;
        let that = this;
        if (result) {
          this.$apollo.mutate({
            client: 'publicClient',
            mutation: REGISTRATION_MUTATION,
            variables: {
              input: {
                firstnameInput: this.firstname,
                lastnameInput: this.lastname,
                emailInput: this.email,
                licenseKeyInput: this.licenseKey,
              }
            },
            update(
              store,
              {
                data: {
                  registration: { success, errors }
                }
              }
            ) {
              try {
                if (success) {
                  window.location.href = '/set-password/done/';
                } else {
                  errors.forEach(function(error) {
                    switch (error.field) {
                      case 'email':
                        that.emailErrors = ['Die angegebene E-Mail ist bereits registriert.'];
                        break;
                      case 'license_key':
                        that.licenseKeyErrors = ['Die angegebenen Lizenz ist unglültig'];
                    }
                  })
                }
              } catch (e) {
                console.warn(e);
                that.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
              }
            }
          });
        }
      });
    },
    resetForm() {
      this.email = '';
      this.lastname = '';
      this.firstname = '';
      this.licenseKey = '';
      this.firstnameErrors = '';
      this.lastnameErrors = '';
      this.emailErrors = '';
      this.licenseKeyErrors = '';
      this.registrationError = '';
      this.submitted = false;
      this.$validator.reset();
    }
  },

  data() {
    return {
      email: '',
      lastname: '',
      firstname: '',
      licenseKey: '',
      firstnameErrors: '',
      lastnameErrors: '',
      emailErrors: '',
      licenseKeyErrors: '',
      registrationError: '',
      submitted: false
    };
  }
};
</script>

<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.registration {
  &__title {
    margin-top: 48px;
    font-size: 2.75rem; // 44px
    margin-bottom: 24px;
    font-weight: 600;
  }
}

.text-link {
  font-family: $sans-serif-font-family;
  color: $color-brand;
}

.actions {
  &__reset {
    display: inline-block;
    margin-left: $large-spacing;
  }
}

.registration {
  &__text {
    font-family: $sans-serif-font-family;
    margin-bottom: $small-spacing;
  }
}

</style>