<template>
    <div v-if="grupo_de_compra_elegido !== null" class="block">
        <div class="field">
            <label class="label"
                   :class="adminUrl ? 'has-text-white' : ''">{{ mensajes.mensaje }}</label>
            <div class="field has-addons">
                <div class="control">
                    <input required class="input" :type="this.passwordType" name="password"  :placeholder="mensajes.mensaje">
                </div>
                <div class="control">
                    <a class="button is-warning" @click="togglePassword">
                        {{ (passwordVisible ? 'Ocultar' : 'Mostrar') + ' contraseña'}}
                    </a>
                </div>
            </div>
            <p class="help"
               :class="adminUrl ? 'has-text-white' : ''">{{ mensajes.ayuda }}</p>
        </div>
        <div class="field">
            <div class="control">
                <input type="submit" class="button is-warning" value="Log in"/>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
    name: 'Login',
    data() {
        return {
            passwordVisible: false,
            passwordType: "password",
        }
    },
    computed: {
        ...mapState('login',["grupo_de_compra_elegido"]),
        ...mapGetters('login',["adminUrl","mensajes"]),
    },
    methods: {
        togglePassword() {
            if (this.passwordVisible) this.passwordType = "password";
            else this.passwordType = "text"
            this.passwordVisible = !this.passwordVisible
        }
    }
}
</script>


<style>
.help {
    font-size: 1rem;
}
</style>