Projet

Général

Profil

0001-general-add-reveal-checkbox-to-password-fields-74652.patch

Frédéric Péters, 18 février 2023 14:42

Télécharger (3,09 ko)

Voir les différences: 

Subject: [PATCH] general: add reveal checkbox to password fields (#74652)


 gadjo/static/css/_forms.scss               | 14 ++++++++++++
 gadjo/templates/gadjo/password-widget.html | 26 ++++++++++++++++++++++
 gadjo/templates/gadjo/widget.html          |  5 +++--
 3 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 gadjo/templates/gadjo/password-widget.html
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
  
    
      const event = new Event('change');

  		




  
  23
  
    
      checkbox.dispatchEvent(event);

  		




  
  24
  
    
    })();

  		




  
  25
  
    
  </script>

  		




  
  26
  
    
{% 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
  
  
    
-