0001-general-add-reveal-checkbox-to-password-fields-74652.patch
gadjo/static/css/_forms.scss | ||
---|---|---|
703 | 703 |
} |
704 | 704 |
} |
705 | 705 |
} |
706 | ||
707 |
.gadjo-password-field { |
|
708 |
position: relative; |
|
709 |
} |
|
710 | ||
711 |
.password-visibility-checkbox { |
|
712 |
display: flex; |
|
713 |
position: absolute; |
|
714 |
top: 0; |
|
715 |
right: 0; |
|
716 |
input + label { |
|
717 |
margin: 0; |
|
718 |
} |
|
719 |
} |
gadjo/templates/gadjo/password-widget.html | ||
---|---|---|
1 |
{% extends "gadjo/widget.html" %} |
|
2 |
{% load i18n %} |
|
3 | ||
4 |
{% block widget-css-classes %}{{ block.super }} gadjo-password-field{% endblock %} |
|
5 | ||
6 |
{% block widget-bottom %} |
|
7 |
<div class="password-visibility-checkbox"> |
|
8 |
<input id="password-visibility-checkbox-{{ field.id_for_label }}" type="checkbox" aria-label="{% trans "Display password" %}"> |
|
9 |
<label for="password-visibility-checkbox-{{ field.id_for_label }}">{% trans "Display" %}</label> |
|
10 |
</div> |
|
11 |
<script> |
|
12 |
(function() { |
|
13 |
const checkbox = document.getElementById('password-visibility-checkbox-{{ field.id_for_label }}'); |
|
14 |
const password_input = document.querySelector('#{{field.id_for_label}}_p input[type=password]'); |
|
15 |
checkbox.addEventListener('change', function(e) { |
|
16 |
if (this.checked) { |
|
17 |
password_input.type = 'text'; |
|
18 |
} else { |
|
19 |
password_input.type = 'password'; |
|
20 |
} |
|
21 |
}); |
|
22 |
checkbox.checked = false; // force to be hidden on load |
|
23 |
})(); |
|
24 |
</script> |
|
25 |
{% endblock %} |
gadjo/templates/gadjo/widget.html | ||
---|---|---|
1 | 1 |
{% load gadjo i18n %} |
2 |
<div class="widget |
|
2 |
<div class="{% block widget-css-classes %}widget
|
|
3 | 3 |
{{ field.css_classes }} |
4 | 4 |
django-{{ field|field_class_name }} |
5 | 5 |
{% if field.errors %}widget-with-error{% endif %} |
6 |
{% if field.field.required %}widget-required{% else %}widget-optional{% endif %}" |
|
6 |
{% if field.field.required %}widget-required{% else %}widget-optional{% endif %}{% endblock %}"
|
|
7 | 7 |
id="{{field.id_for_label}}_p"> |
8 | 8 |
{% block widget-title %} |
9 | 9 |
<div class="title" id="{{ field.name }}"> |
... | ... | |
34 | 34 |
<div class="hint">{{ field.help_text|safe }}</div> |
35 | 35 |
{% endif %} |
36 | 36 |
{% endblock %} |
37 |
{% block widget-bottom %}{% endblock %} |
|
37 | 38 |
</div> |
38 | 39 |
{% endblock %} |
39 | 40 |
</div> |
40 |
- |