mirror
/
staticrypt
kopia lustrzana https://github.com/robinmoisson/staticrypt
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

add a reveal password icon

pull/189/head
Alek Pinchuk 2024-02-26 15:52:40 -05:00
rodzic 2a44c5973d
commit b54b8a892d
1 zmienionych plików z 42 dodań i 8 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

50
lib/password_template.html
Wyświetl plik

@ -38,7 +38,7 @@
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.staticrypt-form input[type="password"] {
.staticrypt-form input[type="text"], input[type="password"] {
outline: 0;
background: #f2f2f2;
width: 100%;
@ -49,6 +49,21 @@
font-size: 14px;
}
.staticrypt-password-toggle-icon {
position: relative;
margin-left: -30px;
cursor: pointer;
}
.staticrypt-password-toggle-icon i {
color: darkgray;
transition: color 0.3s ease-in-out;
}
.staticrypt-password-toggle-icon i:hover {
color: lightgray;
}
.staticrypt-form .staticrypt-decrypt-button {
text-transform: uppercase;
outline: 0;
@ -146,6 +161,8 @@
</head>
<body class="staticrypt-body">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="staticrypt_loading" class="staticrypt-spinner-container">
<div class="staticrypt-spinner"></div>
</div>
@ -161,13 +178,15 @@
<hr class="staticrypt-hr" />
<form id="staticrypt-form" action="#" method="post">
<input
id="staticrypt-password"
type="password"
name="password"
placeholder="/*[|template_placeholder|]*/0"
autofocus
/>
<div class="staticrypt-password-div">
<input
id="staticrypt-password"
type="password"
name="password"
placeholder="/*[|template_placeholder|]*/0"
autofocus />
<span class="staticrypt-password-toggle-icon"><i class="fa-solid fa-eye"></i></span>
</div>
<label id="staticrypt-remember-label" class="staticrypt-remember hidden">
<input id="staticrypt-remember" type="checkbox" name="remember" />
@ -217,6 +236,21 @@
}
};
// toggle password visibility
const toggleIcon = document.querySelector(".staticrypt-password-toggle-icon i");
toggleIcon.addEventListener("click", function () {
const passwordInput = document.getElementById("staticrypt-password");
if (passwordInput.type === "password") {
passwordInput.type = "text";
toggleIcon.classList.remove("fa-eye");
toggleIcon.classList.add("fa-eye-slash");
} else {
passwordInput.type = "password";
toggleIcon.classList.remove("fa-eye-slash");
toggleIcon.classList.add("fa-eye");
}
});
// handle password form submission
document.getElementById("staticrypt-form").addEventListener("submit", async function (e) {
e.preventDefault();