Self-contained Alpine-Toggle (Anzeigen/Verbergen) pro Feld; Props name/label/
autocomplete/placeholder/required/autofocus/show-error, id default auth-<name>,
Slot :labelAction fuer den 'Passwort vergessen?'-Link (login). Ersetzt die
field-pw-wrap-Bloecke in login, register (2), reset-password (2), confirm-
password (1). Die nun ungenutzten form-level x-data={showPassword...} entfernt.
Nebeneffekt/Bugfix: register+reset nutzten :placeholder="__(...)" auf rohem
<input> -> wurde als Alpine-Bind woertlich ausgegeben und schlug fehl (leerer
Platzhalter). Als Component-Prop wird __() korrekt in PHP aufgeloest, der
Hinweistext (z. B. 'Mindestens 8 Zeichen') erscheint jetzt.
Bestaetigungsfelder ohne Fehleranzeige (show-error=false, wie zuvor).
116 Auth-Tests gruen, alle Views kompilieren.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
72 lines
2.2 KiB
PHP
72 lines
2.2 KiB
PHP
@props([
|
|
/** Feldname: wire:model-Ziel + @error-Key (z. B. 'password', 'password_confirmation') */
|
|
'name',
|
|
|
|
/** Label-Text (bereits übersetzt) */
|
|
'label',
|
|
|
|
/** DOM-id; Standard: auth-<name mit Bindestrichen> */
|
|
'id' => null,
|
|
|
|
/** autocomplete-Hinweis (current-password | new-password) */
|
|
'autocomplete' => 'current-password',
|
|
|
|
/** Platzhalter im Feld */
|
|
'placeholder' => '••••••••••',
|
|
|
|
/** Pflichtfeld */
|
|
'required' => true,
|
|
|
|
/** Autofokus setzen (z. B. Passwort-Bestätigungsseite) */
|
|
'autofocus' => false,
|
|
|
|
/** aria-invalid + Fehlermeldung anzeigen (bei Bestätigungsfeldern aus) */
|
|
'showError' => true,
|
|
])
|
|
|
|
@php
|
|
$id ??= 'auth-'.str_replace('_', '-', $name);
|
|
@endphp
|
|
|
|
{{--
|
|
Passwort-Feld mit Anzeigen/Verbergen-Umschalter (self-contained Alpine).
|
|
Optionaler Slot :labelAction für Zusatzlink in der Label-Zeile (z. B.
|
|
„Passwort vergessen?"). Ersetzt die kopierten field-pw-wrap-Blöcke der
|
|
Auth-Seiten.
|
|
--}}
|
|
<div x-data="{ show: false }">
|
|
@isset($labelAction)
|
|
<div class="flex items-baseline justify-between mb-1.5">
|
|
<label class="field-label !mb-0" for="{{ $id }}">{{ $label }}</label>
|
|
{{ $labelAction }}
|
|
</div>
|
|
@else
|
|
<label class="field-label" for="{{ $id }}">{{ $label }}</label>
|
|
@endisset
|
|
|
|
<div class="field-pw-wrap">
|
|
<input
|
|
id="{{ $id }}"
|
|
wire:model="{{ $name }}"
|
|
:type="show ? 'text' : 'password'"
|
|
autocomplete="{{ $autocomplete }}"
|
|
@if ($required) required @endif
|
|
@if ($autofocus) autofocus @endif
|
|
class="field-input pr-[72px]"
|
|
placeholder="{{ $placeholder }}"
|
|
@if ($showError) @error($name) aria-invalid="true" @enderror @endif
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="field-affix"
|
|
@click="show = !show"
|
|
x-text="show ? '{{ __('Verbergen') }}' : '{{ __('Anzeigen') }}'"
|
|
>{{ __('Anzeigen') }}</button>
|
|
</div>
|
|
|
|
@if ($showError)
|
|
@error($name)
|
|
<p class="field-error">{{ $message }}</p>
|
|
@enderror
|
|
@endif
|
|
</div>
|