65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
<template>
|
|
<div class="block">
|
|
<div class="field">
|
|
<label class="label" :class="estilos.texto">
|
|
{{ textos.password }}
|
|
</label>
|
|
<div class="field has-addons">
|
|
<div class="control">
|
|
<input required
|
|
class="input"
|
|
:type="passwordType"
|
|
name="password"
|
|
:placeholder="textos.password">
|
|
</div>
|
|
<div class="control">
|
|
<a class="button" :class="estilos.botones" @click="togglePassword">
|
|
{{ textoBotonPassword }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p class="help"
|
|
:class="estilos.texto">
|
|
{{ textos.ayuda }}
|
|
</p>
|
|
</div>
|
|
<div class="field">
|
|
<div class="control">
|
|
<input type="submit" class="button" :class="estilos.botones" value="Log in"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
|
|
export default {
|
|
name: 'PasswordInput',
|
|
data() {
|
|
return {
|
|
passwordVisible: false,
|
|
passwordType: "password",
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters("login", ["textos", "estilos"]),
|
|
textoBotonPassword() {
|
|
return `${this.passwordVisible ? "Ocultar" : "Mostrar"} contraseña`;
|
|
}
|
|
},
|
|
methods: {
|
|
togglePassword() {
|
|
this.passwordType = this.passwordVisible ? "password" : "text";
|
|
this.passwordVisible = !this.passwordVisible;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.help {
|
|
font-size: 1rem;
|
|
}
|
|
</style>
|