general: add reveal checkbox to password fields (#74652)

gadjo/static/css/_forms.scss

@@ -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;
+	}
+}

gadjo/templates/gadjo/password-widget.html

@@ -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 %}

gadjo/templates/gadjo/widget.html

@@ -1,9 +1,9 @@
 {% load gadjo i18n %}
-<div class="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 %}"
+<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 %}{% endblock %}"
      {% if field.id_for_label %}id="{{field.id_for_label}}_p"{% endif %}>
   {% block widget-title %}
     <div class="title" {% if field.id_for_label %}id="{{ field.id_for_label }}_title"{% endif %}>
@@ -36,6 +36,7 @@
           </p></div>
         {% endif %}
       {% endblock %}
+      {% block widget-bottom %}{% endblock %}
     </div>
   {% endblock %}
 </div>