ChangePassword.vue

<template>
  <slot-form title="Actualiza tu cuenta" :vuelidate="$v">
    <v-layout row wrap>
      <v-flex xs12>
        <v-alert block type="error" :value="samePassword">
          ¡La contraseña anterior y la nueva no pueden ser la misma!
        </v-alert>
      </v-flex>
      <v-flex xs12>
        <form-group name="email">
          <template slot-scope="{ attrs }">
            <v-text-field
              v-bind="attrs"
              :value="form.email"
              label="Correo electrónico"
              type="email"
              disabled
            ></v-text-field>
          </template>
        </form-group>
      </v-flex>
      <v-flex xs12 mb-2>
        <form-group name="password">
          <template slot-scope="{ attrs }">
            <v-text-field
              v-bind="attrs"
              v-model="form.password"
              name="password"
              label="Contraseña actual"
              @blur="$v.form.password.$touch()"
            ></v-text-field>
          </template>
        </form-group>
      </v-flex>
      <v-flex xs12 mb-2>
        <form-group name="newPassword">
          <template slot-scope="{ attrs }">
            <v-text-field
              v-bind="attrs"
              v-model="form.newPassword"
              name="newPassword"
              label="Nueva contraseña"
              @blur="$v.form.newPassword.$touch()"
            ></v-text-field>
          </template>
        </form-group>
      </v-flex>
      <v-flex xs12 lg6 md6 pl-1 pr-1>
        <v-btn block color="primary" @click="submit">{{
          Actualizar contraseña
        }}</v-btn>
      </v-flex>
    </v-layout>
    <hr class="mt-4 mb-2" />
    <legal-buttons />
  </slot-form>
</template>

<script>
import { Auth } from "aws-amplify";
import { getUser } from "@/utils/auth";
import { required, minLength } from "vuelidate/lib/validators";
import SlotForm from "../components/slots/Form";
export default {
  name: "ChangePassword",
  components: { SlotForm },
  mounted() {
    if (this.$store.state.auth.user) {
      this.form = {
        email: this.$store.state.auth.user.attributes.email,
        password: "",
        newPassword: ""
      };
    }
  },
  data() {
    return {
      valid: false,
      samePassword: false,
      form: {
        email: "",
        password: "",
        newPassword: ""
      },
      passwordVisible: false,
      newPasswordVisible: false
    };
  },
  computed: {
    newPasswordIsEqualThatOldPassword() {
      return this.form.password === this.form.newPassword;
    }
  },
  validations: {
    form: {
      email: { required, email },
      password: { required, minLength: minLength(6) },
      newPassword: {
        required,
        minLength: minLength(6)
      }
    }
  },
  methods: {
    async submit() {
      this.$v.$touch();
      if (this.$v.$anyError) return;

      if (this.newPasswordIsEqualThatOldPassword) {
        this.samePassword = true;
        return;
      }
      try {
        const user = await getUser(); // obtenemos el usuario
        await Auth.changePassword(
          user, // ¡aquí le pasamos el usuario de Cognito!
          this.form.password,
          this.form.newPassword
        );
        
        // contraseña actualizada
        
        this.form.password = "";
        this.form.newPassword = "";
        this.$v.$reset();
      } catch (e) {
        // error actualizando la contraseña, revisa e.code y e.message
      }
    }
  }
};
</script>