<template>
    <div class="block">
        <div class="field">
            <label class="label">Usuario</label>
            <div class="field">
                <div class="control">
                    <input required class="input" type="text" name="name"  placeholder="Usuario">
                </div>
            </div>
        </div>
        <div class="field">
            <label class="label">Contraseña</label>
            <div class="field has-addons">
				<div class="control">
					<input required class="input" :type="this.passwordType" name="password"  placeholder="Contraseña">
				</div>
				<div class="control">
					<a class="button is-dark" @click="togglePassword">
						{{ (passwordVisible ? 'Ocultar' : 'Mostrar') + ' contraseña'}}
					</a>
				</div>
			</div>
        </div>
        <div class="field">
            <div class="control">
                <input type="submit" class="button is-dark" value="Ingresar"/>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "LoginAdmin",
        data() {
            return {
				passwordVisible: false,
				passwordType: "password",
            }
        },
		methods: {
			togglePassword() {
				if (this.passwordVisible) this.passwordType = "password";
				else this.passwordType = "text"
				this.passwordVisible = !this.passwordVisible
			}
		}
    }
</script>

<style>
</style>
