PasswordForm.vue

<template>
  <BaseModal :dismissible="true" @close="closeModal">
    <div :class="$style.passwordForm">
      <h3 :class="$style.title">Alterar Senha</h3>
      <FormField label="Digite sua senha atual" :error="error.currentPassword">
        <BaseInput name="currentPassword" type="password" @change="onChangeField"/>
      </FormField>

      <FormField label="Digite a nova senha" :error="error.password">
        <BaseInput name="password" type="password" @change="onChangeField"/>
      </FormField>

      <FormField label="Confirme sua nova senha" :error="error.confirmNewPassword">
        <BaseInput name="confirmNewPassword" type="password" @change="onChangeField"/>
      </FormField>

      <div :class="$style.actionButtons">
        <BaseButton size="large" type="naked-red" @click="closeModal" >Cancelar</BaseButton>
        <BaseButton size="large" type="success" @click="submitForm" >Alterar Senha</BaseButton>
      </div>
    </div>
  </BaseModal>

</template>

<script>
import { FormField, BaseButton, GridCol, GridRow, BaseInput, BaseModal } from 'cr-ui';
import validator from '@/mixins/validator';
import { required, minLength, sameAs } from 'vuelidate/lib/validators';

export default {
  name: 'PasswordForm',
  mixins: [validator],

  components: {
    FormField,
    BaseButton,
    GridCol,
    GridRow,
    BaseInput,
    BaseModal,
  },

  data() {
    return {
      currentPassword: '',
      password: '',
      confirmNewPassword: '',
      error: {
        currentPassword: '',
        password: '',
        confirmNewPassword: '',
      },
    };
  },

  methods: {
    submitForm() {
      if (this.validateForm()) {
        const user = {
          password: this.password,
          password_confirmation: this.confirmNewPassword,
          current_password: this.currentPassword,
        };

        this.$emit('response', user);
      }
    },

    onChangeField(e) {
      this[e.name] = e.value;
      this.validate(e.name);
    },

    closeModal() {
      this.$emit('closeModal');
    },
  },

  validations: {
    currentPassword: {
      required,
      minLength: minLength(8)
    },
    password: {
      required,
      minLength: minLength(8)
    },
    confirmNewPassword: {
      required,
      minLength: minLength(8),
      sameAs: sameAs('password', 'foo'),
    }
  }
};
</script>

<style module>
  .passwordForm {
    padding: 20px 10px;
  }
  .passwordForm button{
    margin-top: 20px;
    width: 201px;
  }

  .actionButtons {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    flex-direction: row-reverse;
  }

  .title {
    margin-bottom: 20px;
    font-weight: 600;
  }

  @media(min-width: 768px) {
    .passwordForm {
      padding: 20px 20px;
    }
  }
</style>