SignInForm

SignInForm.vue

<template>
  <form-container ref="SignInForm" :schema="schema">
    <form class="SignInForm" slot-scope="{ errors, fields }">
      <v-entry-text
        type="text"
        class="entry"
        label="Código AASP"
        :error="errors.code"
        :value="fields.code"
        @input="fields.code = $event.replace(/\D/g, '')"
        autocomplete="username"
        is-required
      />

      <v-entry-text
        type="password"
        class="entry"
        label="Senha"
        :error="errors.password"
        v-model="fields.password"
        maxlength="4"
        autocomplete="current-password"
        is-required
      />

      <v-link :to="recoveryLink" class="link">Esqueceu sua senha?</v-link>

      <VButton
        type="inverse"
        class="button"
        :loading="isLoading"
        @click="onSignIn()"
        submit
      >
        Entrar
      </VButton>

      <p class="notes">
        <span class="text">Não é associado?</span>
        <v-link :to="subscribeLink" class="text">Filie-se</v-link>
      </p>
    </form>
  </form-container>
</template>

<script>
  import VLink from '@/components/VLink';
  import VButton from '@/components/VButton';
  import VEntryText from '@/components/VEntryText';

  export default {
    components: { VLink, VButton, VEntryText },
    props: {
      schema: Object,
      isLoading: Boolean,
      recoveryLink: {
        type: String,
        required: true
      },
      subscribeLink: {
        type: String,
        required: true
      }
    },
    methods: {
      async onSignIn () {
        const form = this.$refs['SignInForm'];
        await form.validateForm();
        if (!form.isValid)
          return;
        this.$emit('submit', form.values);
      }
    }
  };
</script>

<style lang="stylus">
  @import '~@/assets/styles/flex.styl'

  .SignInForm
    column(center, flex-end)
    padding-left: 30px
    padding-right: @padding-left

    > .entry
      margin-bottom: 15px

    > .link
      align-self: flex-start
      margin-bottom: 40px

    > .button
      width: 100%
      margin-bottom: 40px

    > .notes
      @extends .SignInForm-notes
      margin-bottom: 40px
    
    &-notes
      margin: 0
      text-align: center

      > .text
        display: block
        margin-bottom: 5px
</style>

SignInFormContainer.vue

<template>
  <SignInForm
    :schema="schema"
    :recovery-link="recoveryLink"
    :subscribe-link="subscribeLink"
    :isLoading="isLoading"
    @submit="onSubmit($event)"
  />
</template>

<script>
  import SignInForm from '@/components/SignIn/SignInForm';
  import SignInFormSchema from '@/components/SignIn/SignInFormSchema';
  import { mapActions, mapGetters } from 'vuex';
  import { authentication as types } from '@/store/types'

  const recoveryLink = 'https://aplicacao.aasp.org.br/aasp/login/rs_index.asp';

  const subscribeLink = 'https://filiacao.aasp.org.br/';

  export default {
    components: { SignInForm },
    data: () => ({
      schema: SignInFormSchema,
      isLoading: false,
      recoveryLink,
      subscribeLink,
    }),
    computed: mapGetters({ isAuthenticated: types.IsAuthenticated }),
    methods: {
      async onSubmit (params) {
        this.isLoading = true;
        await this.$store.dispatch(types.Authenticate, params);
        this.isLoading = false;
        if (!this.isAuthenticated)
          return;
        this.$router.push({ name: 'Application' });
      }
    }
  };
</script>

SignInFormSchema.js

import check from '@/helpers/check';
import { isNotEmptyString, isNumeric, isLength } from '@/helpers/predicates';

export default {
  code: [
    check(isNotEmptyString, 'O código AASP é obrigatório.'),
    check(isNumeric, 'O código AASP é um campo numérico.'),
    check(isLength(1, 8), 'O código AASP deveria ter entre 1 e 8 dígitos.')
  ],
  password: [
    check(isNotEmptyString, 'A senha é obrigatória.'),
    check(isNumeric, 'A senha é um campo numérico.'),
    check(isLength(4), 'A senha deveria ter exatos 4 dígitos.')
  ]
};