skillbox/client/src/pages/login.vue

<template>
  <div class="login">
    <h1 class="login__title">Melden Sie sich jetzt an</h1>
    <form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit">
      <div class="login-form__field skillboxform-input">
        <label for="email" class="skillboxform-input__label">E-Mail</label>
        <input
          id="email"
          name="email"
          type="text"
          v-model="email"
          v-validate="'required'"
          :class="{ 'skillboxform-input__input--error': errors.has('email') }"
          class="change-form__email 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="pw" class="skillboxform-input__label">Passwort</label>
        <input
          id="pw"
          name="password"
          type="password"
          v-model="password"
          v-validate="'required'"
          :class="{ 'skillboxform-input__input--error': errors.has('password') }"
          class="change-form__new skillbox-input skillboxform-input__input"
          autocomplete="off"
          data-cy="password-input"
        />
        <small
          v-if="errors.has('password') && submitted"
          class="skillboxform-input__error"
          data-cy="password-local-errors"
        >{{ errors.first('password') }}</small>
        <small
          v-for="error in passwordErrors"
          :key="error"
          class="skillboxform-input__error"
          data-cy="password-remote-errors"
        >{{ error }}</small>
      </div>
      <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>
        <a class="actions__reset text-link" href="/accounts/password_reset/">Passwort vergessen?</a>
      </div>
      <!--div class="registration">
        <p class="registration__text">Haben Sie noch kein Konto?</p>
        <a class="registration__link text-link" href="/accounts/password_reset/">Jetzt registrieren</a>
      </div-->
    </form>
  </div>
</template>

<script>
import LOGIN_MUTATION from '@/graphql/gql/mutations/login.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: LOGIN_MUTATION,
            variables: {
              input: {
                usernameInput: this.email,
                passwordInput: this.password
              }
            },
            update(
              store,
              {
                data: {
                  login: { success }
                }
              }
            ) {
              try {
                if (success) {
                  const redirectUrl = that.$route.query.redirect ? that.$route.query.redirect : '/'
                  that.$router.push(redirectUrl);
                } else {
                  that.loginError = 'Die E-Mail oder das Passwort ist falsch. Bitte versuchen Sie nochmals.';
                }
              } catch (e) {
                console.warn(e);
                that.loginError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
              }
            }
          });
        }
      });
    },
    resetForm() {
      this.email = '';
      this.password = '';
      this.submitted = false;
      this.$validator.reset();
    }
  },

  data() {
    return {
      email: '',
      password: '',
      emailErrors: [],
      passwordErrors: [],
      loginError: '',
      submitted: false
    };
  }
};
</script>

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

.login {
  &__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 {
  margin-top: $large-spacing;
  &__text {
    font-family: $sans-serif-font-family;
    margin-bottom: $small-spacing;
  }
}

</style>