<template>
  <div :class="[type==='password' && isPasswordError ? 'password-error' : '', 'input']">
    <div class="input__icon">
      <span :class="`icon-${icon}`"></span>
    </div>
    <input
      :type="type"
      :placeholder="placeholder"
      :value="value"
      @input="handleInput"
      autocomplete="new-password"
    >
  </div>
</template>

<script>
export default {
  name: 'login-input',
  components: {
  },
  props: {
    value: String,
    icon: {
      type: String,
      required: true,
      default: '',
    },
    type: {
      type: String,
      default: 'text',
    },
    placeholder: {
      type: String,
      default: '',
    },
    isPasswordError: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleInput(evt) {
      if (this.isPasswordError) this.$emit('clear-password-error');
      this.$emit('input', evt.target.value);
    },
  },
};
</script>

<style scoped>
  @import "./LoginInput.css";
</style>
