Skip to content

Instantly share code, notes, and snippets.

@uno-de-piera

uno-de-piera/ChangePassword.vue Secret

Created Sep 10, 2019
Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.