feat(admin-settings): show/hide toggle on SMTP password field
Some checks failed
Some checks failed
Wrap the SMTP password input in a relative container with an eye / eye-off toggle button so admins can reveal the value while typing — helps catch copy-paste artifacts and typos when re-applying credentials after a reset. State scoped to the field's own x-data block so it doesn't leak into the parent Alpine context. autocomplete=new-password prevents browsers from autofilling stale values. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -435,9 +435,22 @@
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Username</label>
|
||||
<input type="text" x-model="emailForm.smtp_user" placeholder="username" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
||||
</div>
|
||||
<div>
|
||||
<div x-data="{ showSmtpPassword: false }">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">SMTP Password</label>
|
||||
<input type="password" x-model="emailForm.smtp_password" placeholder="Enter new password" class="block w-full px-3 py-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
||||
<div class="relative">
|
||||
<input :type="showSmtpPassword ? 'text' : 'password'"
|
||||
x-model="emailForm.smtp_password"
|
||||
placeholder="Enter new password"
|
||||
autocomplete="new-password"
|
||||
class="block w-full px-3 py-2 pr-10 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600" />
|
||||
<button type="button"
|
||||
@click="showSmtpPassword = !showSmtpPassword"
|
||||
:aria-label="showSmtpPassword ? 'Hide password' : 'Show password'"
|
||||
class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
|
||||
<span x-show="!showSmtpPassword" x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||
<span x-show="showSmtpPassword" x-html="$icon('eye-off', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Leave blank to keep existing</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
|
||||
Reference in New Issue
Block a user