feat(auth): show/hide password toggle; email inputs to type=text (class validates)
Login + password-change + reset + forgot get an eye toggle. Email fields switch to type=text so validation lives only in the Livewire class (consistent custom messages). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>feat/v1-foundation
boban
parent
8cf8c771c8
commit
77fee98452
|
|
@ -9,6 +9,8 @@ return [
|
|||
'login_subtitle' => 'Zugang zum Clusev-Panel.',
|
||||
'email' => 'E-Mail',
|
||||
'password' => 'Passwort',
|
||||
'toggle_password' => 'Passwort anzeigen',
|
||||
'hide_password' => 'Passwort verbergen',
|
||||
'remember_me' => 'Angemeldet bleiben',
|
||||
'login_submit' => 'Anmelden',
|
||||
'checking' => 'Prüfe…',
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ return [
|
|||
'login_subtitle' => 'Access to the Clusev panel.',
|
||||
'email' => 'Email',
|
||||
'password' => 'Password',
|
||||
'toggle_password' => 'Show password',
|
||||
'hide_password' => 'Hide password',
|
||||
'remember_me' => 'Stay signed in',
|
||||
'login_submit' => 'Sign in',
|
||||
'checking' => 'Checking…',
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<form wire:submit="resetPassword" class="space-y-4">
|
||||
<div>
|
||||
<label for="email" class="{{ $label }}">{{ __('auth.email') }}</label>
|
||||
<input wire:model="email" id="email" type="email" autocomplete="username" class="{{ $field }}" placeholder="admin@clusev.local" />
|
||||
<input wire:model="email" id="email" type="text" autocomplete="username" class="{{ $field }}" placeholder="admin@clusev.local" />
|
||||
@error('email') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -24,12 +24,26 @@
|
|||
</div>
|
||||
<div>
|
||||
<label for="password" class="{{ $label }}">{{ __('auth.new_password') }}</label>
|
||||
<input wire:model="password" id="password" type="password" autocomplete="new-password" class="{{ $field }}" placeholder="••••••••" />
|
||||
<div class="relative" x-data="{ show: false }">
|
||||
<input wire:model="password" id="password" :type="show ? 'text' : 'password'" autocomplete="new-password" class="{{ $field }} pr-11" placeholder="••••••••" />
|
||||
<button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
|
||||
class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
|
||||
<svg x-show="!show" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
<svg x-show="show" x-cloak class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
@error('password') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="password_confirmation" class="{{ $label }}">{{ __('auth.confirm_new_password') }}</label>
|
||||
<input wire:model="password_confirmation" id="password_confirmation" type="password" autocomplete="new-password" class="{{ $field }}" placeholder="••••••••" />
|
||||
<div class="relative" x-data="{ show: false }">
|
||||
<input wire:model="password_confirmation" id="password_confirmation" :type="show ? 'text' : 'password'" autocomplete="new-password" class="{{ $field }} pr-11" placeholder="••••••••" />
|
||||
<button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
|
||||
class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
|
||||
<svg x-show="!show" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
<svg x-show="show" x-cloak class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="resetPassword">
|
||||
<span wire:loading.remove wire:target="resetPassword">{{ __('auth.forgot_submit') }}</span>
|
||||
|
|
|
|||
|
|
@ -21,15 +21,22 @@
|
|||
<form wire:submit="authenticate" class="space-y-4">
|
||||
<div>
|
||||
<label for="email" class="{{ $label }}">{{ __('auth.email') }}</label>
|
||||
<input wire:model="email" id="email" type="email" autocomplete="username" autofocus
|
||||
<input wire:model="email" id="email" type="text" autocomplete="username" autofocus
|
||||
class="{{ $field }}" placeholder="admin@clusev.local" />
|
||||
@error('email') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="{{ $label }}">{{ __('auth.password') }}</label>
|
||||
<input wire:model="password" id="password" type="password" autocomplete="current-password"
|
||||
class="{{ $field }}" placeholder="••••••••" />
|
||||
<div class="relative" x-data="{ show: false }">
|
||||
<input wire:model="password" id="password" :type="show ? 'text' : 'password'" autocomplete="current-password"
|
||||
class="{{ $field }} pr-11" placeholder="••••••••" />
|
||||
<button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
|
||||
class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
|
||||
<svg x-show="!show" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
<svg x-show="show" x-cloak class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
@error('password') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
||||
<a href="{{ route('password.request') }}" wire:navigate class="mt-1.5 block font-mono text-[11px] text-ink-3 transition-colors hover:text-accent-text">{{ __('auth.forgot_link') }}</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,19 +14,40 @@
|
|||
<form wire:submit="update" class="space-y-4">
|
||||
<div>
|
||||
<label for="current" class="{{ $label }}">{{ __('auth.current_password') }}</label>
|
||||
<input wire:model="current" id="current" type="password" autocomplete="current-password" class="{{ $field }}" />
|
||||
<div class="relative" x-data="{ show: false }">
|
||||
<input wire:model="current" id="current" :type="show ? 'text' : 'password'" autocomplete="current-password" class="{{ $field }} pr-11" />
|
||||
<button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
|
||||
class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
|
||||
<svg x-show="!show" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
<svg x-show="show" x-cloak class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
@error('current') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="{{ $label }}">{{ __('auth.new_password') }}</label>
|
||||
<input wire:model="password" id="password" type="password" autocomplete="new-password" class="{{ $field }}" />
|
||||
<div class="relative" x-data="{ show: false }">
|
||||
<input wire:model="password" id="password" :type="show ? 'text' : 'password'" autocomplete="new-password" class="{{ $field }} pr-11" />
|
||||
<button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
|
||||
class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
|
||||
<svg x-show="!show" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
<svg x-show="show" x-cloak class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
@error('password') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password_confirmation" class="{{ $label }}">{{ __('auth.confirm_new_password') }}</label>
|
||||
<input wire:model="password_confirmation" id="password_confirmation" type="password" autocomplete="new-password" class="{{ $field }}" />
|
||||
<div class="relative" x-data="{ show: false }">
|
||||
<input wire:model="password_confirmation" id="password_confirmation" :type="show ? 'text' : 'password'" autocomplete="new-password" class="{{ $field }} pr-11" />
|
||||
<button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
|
||||
class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
|
||||
<svg x-show="!show" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
<svg x-show="show" x-cloak class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="update">
|
||||
|
|
|
|||
|
|
@ -13,17 +13,31 @@
|
|||
<form wire:submit="resetPassword" class="space-y-4">
|
||||
<div>
|
||||
<label for="email" class="{{ $label }}">{{ __('auth.email') }}</label>
|
||||
<input wire:model="email" id="email" type="email" autocomplete="username" class="{{ $field }}" placeholder="admin@clusev.local" />
|
||||
<input wire:model="email" id="email" type="text" autocomplete="username" class="{{ $field }}" placeholder="admin@clusev.local" />
|
||||
@error('email') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="{{ $label }}">{{ __('auth.new_password') }}</label>
|
||||
<input wire:model="password" id="password" type="password" autocomplete="new-password" class="{{ $field }}" placeholder="••••••••" />
|
||||
<div class="relative" x-data="{ show: false }">
|
||||
<input wire:model="password" id="password" :type="show ? 'text' : 'password'" autocomplete="new-password" class="{{ $field }} pr-11" placeholder="••••••••" />
|
||||
<button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
|
||||
class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
|
||||
<svg x-show="!show" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
<svg x-show="show" x-cloak class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
@error('password') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label for="password_confirmation" class="{{ $label }}">{{ __('auth.confirm_new_password') }}</label>
|
||||
<input wire:model="password_confirmation" id="password_confirmation" type="password" autocomplete="new-password" class="{{ $field }}" placeholder="••••••••" />
|
||||
<div class="relative" x-data="{ show: false }">
|
||||
<input wire:model="password_confirmation" id="password_confirmation" :type="show ? 'text' : 'password'" autocomplete="new-password" class="{{ $field }} pr-11" placeholder="••••••••" />
|
||||
<button type="button" @click="show = !show" :aria-label="show ? '{{ __('auth.hide_password') }}' : '{{ __('auth.toggle_password') }}'"
|
||||
class="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-ink-3 transition-colors hover:text-accent-text focus:text-accent-text focus:outline-none">
|
||||
<svg x-show="!show" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
<svg x-show="show" x-cloak class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="resetPassword">
|
||||
<span wire:loading.remove wire:target="resetPassword">{{ __('auth.forgot_submit') }}</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue