<template>
    <div class="form-group" :class="{'has-error': form.errors.has(input_name)}">
        <label v-if="label" for="name">{{ label }}</label>
        <div class="input-group">
            <input :type="password_type ? 'password' : 'text'" 
                class="form-control" 
                :placeholder="placeholder" 
                v-model="form[input_name]"
                @keydown="form.errors.clear(input_name)"
            >
            <div class="input-group-prepend pointer-cursor" @click="passwordToggle">
                <span class="input-group-text">
                    <i :class="password_type ? 'fa fa-eye-slash' : 'fa fa-eye'" aria-hidden="true"></i>
                </span>
            </div>
        </div>
        <div class="text-danger text-left" v-if="form.errors.has(input_name)" v-text="form.errors.get(input_name)"></div>
    </div>
</template>

<script type="text/javascript">
    export default {
       props: {
            input_name: String,
            form: Object,
            placeholder: String,
            label: String
        },
        data() {
            let vm = this;
            return {
                password_type: true
            }
        },
        methods: {
            passwordToggle() {
                let vm = this;
                vm.password_type = !vm.password_type;
            }
        }
    }
</script>


