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 %}
|
{% load gadjo i18n %}
|
||||||
<div class="widget
|
<div class="{% block widget-css-classes %}widget
|
||||||
{{ field.css_classes }}
|
{{ field.css_classes }}
|
||||||
django-{{ field|field_class_name }}
|
django-{{ field|field_class_name }}
|
||||||
{% if field.errors %}widget-with-error{% endif %}
|
{% 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">
|
id="{{field.id_for_label}}_p">
|
||||||
{% block widget-title %}
|
{% block widget-title %}
|
||||||
<div class="title" id="{{ field.name }}">
|
<div class="title" id="{{ field.name }}">
|
||||||
|
@ -34,6 +34,7 @@
|
||||||
<div class="hint">{{ field.help_text|safe }}</div>
|
<div class="hint">{{ field.help_text|safe }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
{% block widget-bottom %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue