add show/hide password button

This commit is contained in:
Evgenii Alekseev 2022-11-23 01:53:27 +02:00
parent b26aa2145f
commit 45f5006db3
4 changed files with 29 additions and 7 deletions

View File

@ -12,6 +12,8 @@
<body>
{% include "utils/bootstrap-scripts.jinja2" %}
<div class="container">
<h1>ahriman
<img id="badge-version" src="https://img.shields.io/badge/version-unknown-informational" alt="unknown">
@ -106,8 +108,6 @@
{% include "build-status/login-modal.jinja2" %}
{% endif %}
{% include "utils/bootstrap-scripts.jinja2" %}
{% include "build-status/failed-modal.jinja2" %}
{% include "build-status/success-modal.jinja2" %}

View File

@ -16,7 +16,12 @@
<div class="form-group row">
<label for="password" class="col-sm-2 col-form-label">password</label>
<div class="col-sm-10">
<input id="password" type="password" class="form-control" placeholder="enter password" name="password" required>
<div class="input-group">
<input id="password" type="password" class="form-control" placeholder="enter password" name="password" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick="showPassword()"><i id="show-hide-password" class="bi bi-eye"></i></button>
</div>
</div>
</div>
</div>
</div>
@ -27,3 +32,20 @@
</div>
</div>
</div>
<script>
const passwordInput = $("#password");
const showHidePasswordButton = $("#show-hide-password");
function showPassword() {
if (passwordInput.attr("type") === "password") {
passwordInput.attr("type", "text");
showHidePasswordButton.removeClass("bi-eye");
showHidePasswordButton.addClass("bi-eye-slash");
} else {
passwordInput.attr("type", "password");
showHidePasswordButton.removeClass("bi-eye-slash");
showHidePasswordButton.addClass("bi-eye");
}
}
</script>

View File

@ -12,6 +12,8 @@
<body>
{% include "utils/bootstrap-scripts.jinja2" %}
<div class="d-flex flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
@ -24,8 +26,6 @@
</div>
</div>
{% include "utils/bootstrap-scripts.jinja2" %}
</body>
</html>

View File

@ -10,6 +10,8 @@
<body>
{% include "utils/bootstrap-scripts.jinja2" %}
<div class="container">
<h1>Arch linux user repository</h1>
</div>
@ -93,8 +95,6 @@ SigLevel = Database{% if has_repo_signed %}Required{% else %}Never{% endif %} Pa
</footer>
</div>
{% include "utils/bootstrap-scripts.jinja2" %}
<script>
const pacmanConf = $("#pacman-conf");
const pacmanConfCopyButton = $("#copy-btn");