Menampilkan password dengan icon | Laravel
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<input type="password" id="password"
class="form-control" name="password" required>
<div class="input-group-append">
<button type="button" id="togglePassword"
class="btn btn-outline-secondary">
<i id="passwordIcon" class="fas fa-eye"></i>
</button>
</div>
</div>
</div>
<div class="form-group">
<label for="password_confirmation">Konfirmasi Password</label>
<div class="input-group">
<input type="password" id="password_confirmation"
class="form-control" name="password_confirmation" required>
<div class="input-group-append">
<button type="button" id="togglePassword2"
class="btn btn-outline-secondary">
<i id="passwordIcon2" class="fas fa-eye"></i>
</button>
</div>
</div>
</div>
2. Javascript
<script>
document.addEventListener('DOMContentLoaded', function() {
const togglePassword = document.getElementById('togglePassword');
const password = document.getElementById('password');
const passwordIcon = document.getElementById('passwordIcon');
togglePassword.addEventListener('click', function() {
// Toggle the type attribute
const type = password.getAttribute('type')
=== 'password' ? 'text' : 'password';
password.setAttribute('type', type);
// Toggle the icon
passwordIcon.classList.toggle('fa-eye');
passwordIcon.classList.toggle('fa-eye-slash');
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const togglePassword = document.getElementById('togglePassword2');
const password = document.getElementById('password_confirmation');
const passwordIcon = document.getElementById('passwordIcon2');
togglePassword.addEventListener('click', function() {
// Toggle the type attribute
const type = password.getAttribute('type')
=== 'password' ? 'text' : 'password';
password.setAttribute('type', type);
// Toggle the icon
passwordIcon.classList.toggle('fa-eye');
passwordIcon.classList.toggle('fa-eye-slash');
});
});
</script>
3. Link Fontawesome
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
Posting Komentar