5.5: <x-password-input> + 6 Auth-Passwortfelder umgestellt
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>
This commit is contained in:
parent
1729e35943
commit
9fadfe6458
5 changed files with 112 additions and 143 deletions
72
resources/views/components/password-input.blade.php
Normal file
72
resources/views/components/password-input.blade.php
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
@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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue