Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Commit 675f1f4

Browse files
rawilkrawilk
committed
Make toggleable password input compatible with password managers
1 parent 4580cd2 commit 675f1f4

File tree

5 files changed

+50
-18
lines changed

5 files changed

+50
-18
lines changed

‎resources/sass/utils/_addon.scss‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,20 +75,31 @@
7575
}
7676

7777
.trailing-icon {
78-
@apply absolute;
79-
@apply inset-y-0;
80-
@apply right-0;
8178
@apply pr-3;
8279
@apply flex;
8380
@apply items-center;
8481

82+
&:not(.password-toggle) {
83+
@apply absolute;
84+
@apply inset-y-0;
85+
@apply right-0;
86+
}
87+
8588
svg {
8689
@apply h-5;
8790
@apply w-5;
8891
@apply text-gray-400;
8992
}
9093
}
9194

95+
.password-toggle {
96+
@apply bg-white;
97+
@apply border;
98+
@apply rounded-md;
99+
@apply rounded-l-none;
100+
@apply border-l-0;
101+
}
102+
92103
.has-leading-addon {
93104
@apply rounded-none;
94105
@apply rounded-r-md;

‎resources/sass/utils/_input.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,15 @@
1717
@apply leading-5;
1818
}
1919
}
20+
21+
.password-toggleable {
22+
@apply border-r-0;
23+
@apply rounded-r-none;
24+
25+
&:focus {
26+
@apply shadow-none;
27+
@apply border;
28+
border-color: #d2d6dc;
29+
@apply border-r-0;
30+
}
31+
}

‎resources/views/components/inputs/password.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div @if ($showToggle)
22
x-data="{ show: false }"
3-
@endif
4-
class="form-text-container {{ $maxWidth }}"
3+
@endif
4+
class="{{ $containerClass() }}"
55
>
66
@include('form-components::partials.leading-addons')
77

@@ -31,7 +31,7 @@ class="form-text-container {{ $maxWidth }}"
3131
@if ($showToggle)
3232
<div @click="show = ! show"
3333
:title="show ? '{{ __('Hide') }}' : '{{ __('Show') }}'"
34-
class="trailing-icon clickable"
34+
class="trailing-icon password-toggle clickable"
3535
x-cloak
3636
>
3737
<span x-show="! show">

‎src/Components/Inputs/Password.php‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,18 @@ public function inputClass(): string
5252
$class = parent::inputClass();
5353

5454
if ($this->showToggle) {
55-
$class .= ' has-trailing-icon';
55+
$class .= ' password-toggleable has-trailing-icon';
5656
}
5757

5858
return $class;
5959
}
60+
61+
public function containerClass(): string
62+
{
63+
return collect([
64+
'form-text-container',
65+
$this->maxWidth,
66+
$this->showToggle ? 'focus-within:shadow-outline-blue rounded-md' : null,
67+
])->filter()->implode(' ');
68+
}
6069
}

‎tests/Components/Inputs/PasswordTest.php‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ public function can_render_component(): void
2626

2727
$expected = <<<HTML
2828
<div x-data="{ show: false }"
29-
class="form-text-container ">
30-
<input class="form-input form-text has-trailing-icon" name="password" id="password" :type="show ? 'text' : 'password'" />
29+
class="form-text-container focus-within:shadow-outline-blue rounded-md">
30+
<input class="form-input form-text password-toggleable has-trailing-icon" name="password" id="password" :type="show ? 'text' : 'password'" />
3131
3232
<div @click="show = ! show"
3333
:title="show ? 'Hide' : 'Show'"
34-
class="trailing-icon clickable"
34+
class="trailing-icon password-toggle clickable"
3535
x-cloak>
3636
<span x-show="! show">
3737
{$showIcon}
@@ -56,7 +56,7 @@ public function show_toggle_password_can_be_disabled(): void
5656
$this->withViewErrors([]);
5757

5858
$expected = <<<HTML
59-
<div class="form-text-container ">
59+
<div class="form-text-container">
6060
<input class="form-input form-text" name="password" id="password" type="password" />
6161
</div>
6262
HTML;
@@ -77,14 +77,14 @@ public function can_have_leading_addon(): void
7777

7878
$expected = <<<HTML
7979
<div x-data="{ show: false }"
80-
class="form-text-container ">
80+
class="form-text-container focus-within:shadow-outline-blue rounded-md">
8181
<span class="leading-addon">foo</span>
8282
83-
<input class="form-input form-text has-leading-addon has-trailing-icon" name="password" id="password" :type="show ? 'text' : 'password'" />
83+
<input class="form-input form-text has-leading-addon password-toggleable has-trailing-icon" name="password" id="password" :type="show ? 'text' : 'password'" />
8484
8585
<div @click="show = ! show"
8686
:title="show ? 'Hide' : 'Show'"
87-
class="trailing-icon clickable"
87+
class="trailing-icon password-toggle clickable"
8888
x-cloak>
8989
<span x-show="! show">
9090
{$showIcon}
@@ -114,7 +114,7 @@ public function it_ignores_trailing_addons(): void
114114

115115
// The "trailing-addon" should be regarded as a custom attribute instead
116116
$expected = <<<HTML
117-
<div class="form-text-container ">
117+
<div class="form-text-container">
118118
<input class="form-input form-text" trailing-addon="foo" name="password" id="password" type="password" />
119119
</div>
120120
HTML;
@@ -139,14 +139,14 @@ public function slotted_trailing_addons_are_ignored(): void
139139

140140
$expected = <<<HTML
141141
<div x-data="{ show: false }"
142-
class="form-text-container ">
142+
class="form-text-container focus-within:shadow-outline-blue rounded-md">
143143
<span class="leading-addon">foo</span>
144144
145-
<input class="form-input form-text has-leading-addon has-trailing-icon" name="password" id="password" :type="show ? 'text' : 'password'" />
145+
<input class="form-input form-text has-leading-addon password-toggleable has-trailing-icon" name="password" id="password" :type="show ? 'text' : 'password'" />
146146
147147
<div @click="show = ! show"
148148
:title="show ? 'Hide' : 'Show'"
149-
class="trailing-icon clickable"
149+
class="trailing-icon password-toggle clickable"
150150
x-cloak>
151151
<span x-show="! show">
152152
{$showIcon}

0 commit comments

Comments
 (0)