<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>
