EP/myep
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reveal password toggle for login form

Browse Source 
addresses #869cqrw6w
This commit is contained in:
Björn Fromme
2026-07-01 10:29:30 +02:00
parent 1b0d7ce1a9
commit 022819cbe6
3 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/controllers/password_reveal_controller.js
+11
View File
@@ -0,0 +1,11 @@
import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
static targets = [ 'field' ]
toggle() {
let type = this.fieldTarget.getAttribute('type') === 'password' ? 'text' : 'password'
this.fieldTarget.setAttribute('type', type)
}
}
templates/booking/create/authenticate.html.twig
+15 -7
View File
@@ -59,16 +59,24 @@
autocomplete="username"> autocomplete="username">
</div> </div>
<div class="mb-4"> <div class="mb-4" {{ stimulus_controller('password-reveal') }}>
<label for="password" class="mb-1 font-semibold text-white"> <label for="password" class="mb-1 font-semibold text-white">
Passwort: Passwort:
</label> </label>
<input type="password" <div class="relative">
id="password" <input type="password"
name="_password" id="password"
class="form-field" name="_password"
required class="form-field"
autocomplete="current-password"> {{ stimulus_target('password-reveal', 'field') }}
required
autocomplete="current-password">
<button type="button"
{{ stimulus_action('password-reveal', 'toggle') }}
class="absolute top-0 right-0 mt-2 mr-2">
{{ icon('eye', 'w-6 h-6 text-gray-500') }}
</button>
</div>
</div> </div>
<button type="submit" class="button button--primary w-full md:w-auto"> <button type="submit" class="button button--primary w-full md:w-auto">
templates/security/login.html.twig
+15 -7
View File
@@ -24,16 +24,24 @@
required required
autocomplete="username"> autocomplete="username">
</div> </div>
<div class="mb-4"> <div class="mb-4" {{ stimulus_controller('password-reveal') }}>
<label for="password" class="mb-1 font-semibold text-white"> <label for="password" class="mb-1 font-semibold text-white">
Passwort: Passwort:
</label> </label>
<input type="password" <div class="relative">
id="password" <input type="password"
name="_password" id="password"
class="form-field" name="_password"
required class="form-field"
autocomplete="current-password"> {{ stimulus_target('password-reveal', 'field') }}
required
autocomplete="current-password">
<button type="button"
{{ stimulus_action('password-reveal', 'toggle') }}
class="absolute top-0 right-0 mt-2 mr-2">
{{ icon('eye', 'w-6 h-6 text-gray-500') }}
</button>
</div>
</div> </div>
<div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4"> <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4">
<button type="submit" class="button button--primary"> <button type="submit" class="button button--primary">