KoPKB/erahn-click
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added password-eyes to the login page

Browse Source
This commit is contained in:
Hafifie PKB
2025-08-27 12:46:27 +08:00
parent 4accfb3021
commit 4c4dbe18c6
1 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/includes/login/loginportal.blade.php
+35 -2
View File
@@ -30,8 +30,41 @@
</span>
@endif
<div class="input-group input-group-outline mb-3">
<input placeholder="Kata Laluan" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" type="password" name="password" id="login-password">
<div class="input-group input-group-outline mb-3 position-relative">
<input
placeholder="Kata Laluan"
class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}"
type="password"
name="password"
id="login-password"
autocomplete="current-password"
style="padding-right: 2.5rem;"
>
<span
class="input-group-text border-0 position-absolute end-0 top-0 h-100 d-flex align-items-center"
style="cursor:pointer; z-index: 3; border-radius: 0 0.375rem 0.375rem 0; border-left: none; border: 1px solid #ced4da; background: transparent; padding: 0 12px; height: 100%; display: flex; align-items: center; box-shadow: none; top: 0; bottom: 0;"
onclick="togglePasswordVisibility()"
tabindex="0"
aria-label="Toggle password visibility"
>
<svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#6c757d" viewBox="0 0 16 16" style="transition: fill 0.2s; pointer-events: none;">
<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
<path id="eyeIconInner" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
</svg>
</span>
<script>
function togglePasswordVisibility() {
const passwordInput = document.getElementById('login-password');
const eyeIcon = document.getElementById('eyeIcon');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
eyeIcon.setAttribute('fill', '#12B652');
} else {
passwordInput.type = 'password';
eyeIcon.setAttribute('fill', '#6c757d');
}
}
</script>
</div>
@if ($errors->has('password'))
<span class="invalid-feedback" style="display: block;margin-top:-10px !important;" role="alert">