Mask for private key on Peer and Wireguard instance forms.

This commit is contained in:
Eduardo Silva 2024-03-08 12:32:05 -03:00
parent 54806edeb6
commit 013f120756
3 changed files with 51 additions and 3 deletions

View File

@ -31,7 +31,12 @@
<!-- Private Key --> <!-- Private Key -->
<div class="form-group"> <div class="form-group">
<label for="{{ form.private_key.id_for_label }}">{{ form.private_key.label }}</label> <label for="{{ form.private_key.id_for_label }}">{{ form.private_key.label }}</label>
<input type="text" class="form-control" id="{{ form.private_key.id_for_label }}" name="{{ form.private_key.html_name }}" placeholder="Private Key" value="{{ form.private_key.value|default_if_none:'' }}" required> <div class="input-group">
<input type="password" class="form-control" id="{{ form.private_key.id_for_label }}" name="{{ form.private_key.html_name }}" placeholder="Private Key" value="{{ form.private_key.value|default_if_none:'' }}" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary toggle-password" type="button"><i class="fas fa-eye"></i></button>
</div>
</div>
</div> </div>
<!-- Pre-Shared Key --> <!-- Pre-Shared Key -->
@ -120,6 +125,21 @@
} }
} }
</script> </script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('.toggle-password').addEventListener('click', function () {
let passwordInput = document.getElementById('{{ form.private_key.id_for_label }}');
let passStatus = passwordInput.getAttribute('type') === 'password';
passwordInput.setAttribute('type', passStatus ? 'text' : 'password');
this.innerHTML = passStatus ? '<i class="fas fa-eye-slash"></i>' : '<i class="fas fa-eye"></i>';
});
document.getElementById('{{ form.private_key.id_for_label }}').addEventListener('keypress', function () {
this.setAttribute('type', 'text');
});
});
</script>
{% endblock %} {% endblock %}

View File

@ -57,10 +57,22 @@
</div> </div>
<!-- Line 3: Private Key and Persistent Keepalive --> <!-- Line 3: Private Key and Persistent Keepalive -->
<div class="form-row"> <div class="form-row">
{% comment %}
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="{{ form.private_key.id_for_label }}">{{ form.private_key.label }}</label> <label for="{{ form.private_key.id_for_label }}">{{ form.private_key.label }}</label>
<input type="text" class="form-control" id="{{ form.private_key.id_for_label }}" name="{{ form.private_key.html_name }}" placeholder="Private Key" value="{{ form.private_key.value|default_if_none:'' }}" required> <input type="text" class="form-control" id="{{ form.private_key.id_for_label }}" name="{{ form.private_key.html_name }}" placeholder="Private Key" value="{{ form.private_key.value|default_if_none:'' }}" required>
</div> </div>
{% endcomment %}
<div class="form-group col-md-6">
<label for="{{ form.private_key.id_for_label }}">{{ form.private_key.label }}</label>
<div class="input-group">
<input type="password" class="form-control" id="{{ form.private_key.id_for_label }}" name="{{ form.private_key.html_name }}" placeholder="Private Key" value="{{ form.private_key.value|default_if_none:'' }}" required>
<div class="input-group-append">
<button class="btn btn-outline-secondary toggle-password" type="button"><i class="fas fa-eye"></i></button>
</div>
</div>
</div>
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="{{ form.public_key.id_for_label }}">{{ form.public_key.label }}</label> <label for="{{ form.public_key.id_for_label }}">{{ form.public_key.label }}</label>
<input type="text" class="form-control" id="{{ form.public_key.id_for_label }}" name="{{ form.public_key.html_name }}" placeholder="public Key" value="{{ form.public_key.value|default_if_none:'' }}" required> <input type="text" class="form-control" id="{{ form.public_key.id_for_label }}" name="{{ form.public_key.html_name }}" placeholder="public Key" value="{{ form.public_key.value|default_if_none:'' }}" required>
@ -142,5 +154,21 @@
} }
} }
</script> </script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('.toggle-password').addEventListener('click', function () {
let passwordInput = document.getElementById('{{ form.private_key.id_for_label }}');
let passStatus = passwordInput.getAttribute('type') === 'password';
passwordInput.setAttribute('type', passStatus ? 'text' : 'password');
this.innerHTML = passStatus ? '<i class="fas fa-eye-slash"></i>' : '<i class="fas fa-eye"></i>';
});
document.getElementById('{{ form.private_key.id_for_label }}').addEventListener('keypress', function () {
this.setAttribute('type', 'text');
});
});
</script>
{% endblock %} {% endblock %}

View File

@ -129,6 +129,6 @@ STATICFILES_DIRS = [
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
WIREGUARD_WEBADMIN_VERSION = 9506 WIREGUARD_WEBADMIN_VERSION = 9507
from wireguard_webadmin.production_settings import * from wireguard_webadmin.production_settings import *