general: add reveal checkbox to password fields (#74652)
This commit is contained in:
parent
3d57dc94f0
commit
d78ac5112b
|
@ -703,3 +703,23 @@ div.godo--editor {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gadjo-password-field {
|
||||
position: relative;
|
||||
.title label {
|
||||
padding-right: 6em;
|
||||
}
|
||||
}
|
||||
|
||||
.password-visibility-checkbox {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
input + label {
|
||||
margin: 0;
|
||||
}
|
||||
input {
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
{% extends "gadjo/widget.html" %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block widget-css-classes %}{{ block.super }} gadjo-password-field{% endblock %}
|
||||
|
||||
{% block widget-bottom %}
|
||||
<div class="password-visibility-checkbox">
|
||||
<input id="password-visibility-checkbox-{{ field.id_for_label }}" type="checkbox" aria-label="{% trans "Display password" %}">
|
||||
<label for="password-visibility-checkbox-{{ field.id_for_label }}">{% trans "Display" %}</label>
|
||||
</div>
|
||||
<script>
|
||||
(function() {
|
||||
const checkbox = document.getElementById('password-visibility-checkbox-{{ field.id_for_label }}');
|
||||
const password_input = document.querySelector('#{{field.id_for_label}}_p input[type=password]');
|
||||
checkbox.addEventListener('change', function(e) {
|
||||
if (this.checked) {
|
||||
password_input.type = 'text';
|
||||
} else {
|
||||
password_input.type = 'password';
|
||||
}
|
||||
});
|
||||
checkbox.checked = false; // force to be hidden on load
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
|
@ -1,9 +1,9 @@
|
|||
{% load gadjo i18n %}
|
||||
<div class="widget
|
||||
<div class="{% block widget-css-classes %}widget
|
||||
{{ field.css_classes }}
|
||||
django-{{ field|field_class_name }}
|
||||
{% if field.errors %}widget-with-error{% endif %}
|
||||
{% if field.field.required %}widget-required{% else %}widget-optional{% endif %}"
|
||||
{% if field.field.required %}widget-required{% else %}widget-optional{% endif %}{% endblock %}"
|
||||
id="{{field.id_for_label}}_p">
|
||||
{% block widget-title %}
|
||||
<div class="title" id="{{ field.name }}">
|
||||
|
@ -34,6 +34,7 @@
|
|||
<div class="hint">{{ field.help_text|safe }}</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block widget-bottom %}{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue