Testing Alpha

resources/views/components/form/input-password.blade.php

@@ -0,0 +1,81 @@
+@props([
+    'uid' => uniqid(),
+    'model' => '',
+    'label' => 'Contraseña',
+    'placeholder' => '············',
+    'labelClass' => '',
+    'icon' => null,
+])
+
+@php
+    $livewireModel = $attributes->get('wire:model', $model);
+    $name = $attributes->get('name', $livewireModel);
+    $inputId = $attributes->get('id', $name . '_' . $uid);
+
+    $errorKey = $livewireModel ?: $name;
+    $hasError = $errors->has($errorKey);
+    $errorClass = $hasError ? 'is-invalid' : '';
+@endphp
+
+<div class="mb-4 fv-row">
+    <label class="form-label {{ $labelClass }}" for="{{ $inputId }}">{{ $label }}</label>
+
+    <div class="input-group input-group-merge">
+        {{-- Prefijo (opcional) --}}
+        @if ($icon)
+            <span class="input-group-text">
+                <i class="{{ $icon }}"></i>
+            </span>
+        @endif
+
+        {{-- Input --}}
+        <input
+            type="password"
+            id="{{ $inputId }}"
+            name="{{ $name }}"
+            wire:model="{{ $livewireModel }}"
+            class="form-control {{ $errorClass }}"
+            placeholder="{{ $placeholder }}"
+            autocomplete="new-password"
+            aria-describedby="{{ $inputId }}-aria"
+        />
+
+        {{-- Toggle --}}
+        <span class="input-group-text cursor-pointer toggle-password" data-target="{{ $inputId }}">
+            <i class="ti ti-eye-off password-toggle-icon"></i>
+        </span>
+    </div>
+    @if ($hasError)
+        <span class="text-danger">{{ $errors->first($errorKey) }}</span>
+    @endif
+</div>
+
+@push('page-script')
+    <script>
+        function attachPasswordToggles() {
+            document.querySelectorAll('.toggle-password').forEach(toggle => {
+                const alreadyAttached = toggle.getAttribute('data-bound');
+                if (alreadyAttached) return;
+
+                toggle.setAttribute('data-bound', 'true');
+
+                toggle.addEventListener('click', function () {
+                    const targetId = this.getAttribute('data-target');
+                    const input = document.getElementById(targetId);
+                    const icon = this.querySelector('.password-toggle-icon');
+
+                    if (input && icon) {
+                        const isPassword = input.type === 'password';
+                        input.type = isPassword ? 'text' : 'password';
+                        icon.classList.toggle('ti-eye', isPassword);
+                        icon.classList.toggle('ti-eye-off', !isPassword);
+                    }
+                });
+            });
+        }
+
+        document.addEventListener("DOMContentLoaded", function () {
+            attachPasswordToggles();
+        });
+    </script>
+@endpush