82 lines
2.6 KiB
PHP
82 lines
2.6 KiB
PHP
@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
|