elearning/Frontend-Learner/components/common/FormInput.vue

<script setup lang="ts">
/**
 * @file FormInput.vue
 * @description Reusable input component with label, error handling, and support for disabled/required states.
 * Now supports password visibility toggle.
 */

const props = defineProps<{
  modelValue: string
  label: string
  type?: string
  placeholder?: string
  error?: string
  required?: boolean
  disabled?: boolean
}>()

const emit = defineEmits<{
  /** Update v-model value */
  'update:modelValue': [value: string]
}>()

// Password visibility state
const showPassword = ref(false)

// Toggle function
const togglePassword = () => {
  showPassword.value = !showPassword.value
}

// Compute input type based on visibility state
const inputType = computed(() => {
  if (props.type === 'password') {
    return showPassword.value ? 'text' : 'password'
  }
  return props.type || 'text'
})

const updateValue = (event: Event) => {
  emit('update:modelValue', (event.target as HTMLInputElement).value)
}
</script>

<template>
  <div class="form-group" :class="{ 'has-error': error }">
    <label class="input-label">
      {{ label }}
      <span v-if="required" class="required-mark">*</span>
    </label>
    
    <div class="input-wrapper">
      <input
        :type="inputType"
        :value="modelValue"
        class="input-field"
        :class="{ 'input-error': error, 'has-password-toggle': type === 'password' }"
        :placeholder="placeholder"
        :disabled="disabled"
        @input="updateValue"
      >
      
      <!-- Password Toggle Button -->
      <button
        v-if="type === 'password'"
        type="button"
        class="password-toggle-btn"
        @click="togglePassword"
        tabindex="-1"
      >
        <!-- Eye Icon (Show) -->
        <svg v-if="!showPassword" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/>
          <circle cx="12" cy="12" r="3"/>
        </svg>
        
        <!-- Eye Off Icon (Hide) -->
        <svg v-else xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/>
          <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/>
          <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7c.44 0 .87-.03 1.28-.08"/>
          <line x1="2" y1="2" x2="22" y2="22"/>
        </svg>
      </button>
    </div>

    <span v-if="error" class="error-message">
      <span class="error-icon">⚠</span>
      {{ error }}
    </span>
  </div>
</template>

<style scoped>
.form-group {
  margin-bottom: 16px;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.2s;
}

.password-toggle-btn:hover {
  color: #64748b;
  background-color: rgba(0, 0, 0, 0.05);
}

.input-field.has-password-toggle {
  padding-right: 42px;
}

.required-mark {
  color: var(--error);
  margin-left: 2px;
}

.input-error {
  border-color: var(--error) !important;
  background-color: rgba(239, 68, 68, 0.05);
}

.input-error:focus {
  outline-color: var(--error) !important;
}

.error-message {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--error);
  font-size: 12px;
  margin-top: 6px;
  animation: shake 0.3s ease-in-out;
}

.error-icon {
  font-size: 14px;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
</style>