From 77fee98452a75eb5c213d5136e023170f1eaa249 Mon Sep 17 00:00:00 2001
From: boban <boban@git.bave.dev>
Date: Sun, 14 Jun 2026 23:10:37 +0200
Subject: [PATCH] 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>
---
 lang/de/auth.php                              |  2 ++
 lang/en/auth.php                              |  2 ++
 .../livewire/auth/forgot-password.blade.php   | 20 +++++++++++---
 resources/views/livewire/auth/login.blade.php | 13 ++++++---
 .../livewire/auth/password-change.blade.php   | 27 ++++++++++++++++---
 .../livewire/auth/reset-password.blade.php    | 20 +++++++++++---
 6 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/lang/de/auth.php b/lang/de/auth.php
index 9d56823..6986507 100644
--- a/lang/de/auth.php
+++ b/lang/de/auth.php
@@ -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…',
diff --git a/lang/en/auth.php b/lang/en/auth.php
index 16008f6..62cbc22 100644
--- a/lang/en/auth.php
+++ b/lang/en/auth.php
@@ -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…',
diff --git a/resources/views/livewire/auth/forgot-password.blade.php b/resources/views/livewire/auth/forgot-password.blade.php
index 2dc1443..02bb928 100644
--- a/resources/views/livewire/auth/forgot-password.blade.php
+++ b/resources/views/livewire/auth/forgot-password.blade.php
@@ -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>
diff --git a/resources/views/livewire/auth/login.blade.php b/resources/views/livewire/auth/login.blade.php
index 1fb2109..acf5b2b 100644
--- a/resources/views/livewire/auth/login.blade.php
+++ b/resources/views/livewire/auth/login.blade.php
@@ -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>
diff --git a/resources/views/livewire/auth/password-change.blade.php b/resources/views/livewire/auth/password-change.blade.php
index 744db21..faedbea 100644
--- a/resources/views/livewire/auth/password-change.blade.php
+++ b/resources/views/livewire/auth/password-change.blade.php
@@ -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">
diff --git a/resources/views/livewire/auth/reset-password.blade.php b/resources/views/livewire/auth/reset-password.blade.php
index 7ee353c..e07d976 100644
--- a/resources/views/livewire/auth/reset-password.blade.php
+++ b/resources/views/livewire/auth/reset-password.blade.php
@@ -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>