entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

inclure une case à cocher pour afficher en clair le mot de passe (#74652) #4

Merged
fpeters merged 2 commits from wip/74652-password-reveal into main 2023-04-14 08:06:38 +02:00
Conversation 3 Commits 2 Files Changed 4 +65 -29
4 changed files with 65 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
gadjo/locale/fr/LC_MESSAGES/django.po
View File

@ -7,8 +7,8 @@ msgid ""
msgstr ""
"Project-Id-Version: gadjo 0\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2020-08-21 06:03+0000\n"
"PO-Revision-Date: 2020-08-21 08:03+0200\n"
"POT-Creation-Date: 2023-02-25 18:07+0100\n"
"PO-Revision-Date: 2023-02-25 18:08+0100\n"
"Last-Translator: Frederic Peters <fpeters@entrouvert.com>\n"
"Language: French\n"
"MIME-Version: 1.0\n"
@ -25,36 +25,26 @@ msgstr "Il y a eu un problème à la validation du formulaire."
msgid "(Hidden field %(name)s) %(error)s"
msgstr "(champ caché %(name)s) %(error)s"
#: templates/gadjo/root.html:36
#: templates/gadjo/password-widget.html:8
msgid "Display password"
msgstr "Afficher le mot de passe"
#: templates/gadjo/password-widget.html:9
msgid "Display"
msgstr "Afficher"
#: templates/gadjo/root.html:39
msgid "Logout"
msgstr "Déconnexion"
#: templates/gadjo/root.html:54
msgid ""
"\n"
" <p><strong>Do you know your web browser is obsolete?</strong> We "
"recommend\n"
" you to <a href=\"http://windows.microsoft.com/en-us/internet-explorer/"
"download-ie\">update\n"
" your web browser</a> or to <a href=\"http://browsehappy.com/\">use\n"
" different web browsers</a> as some features may not work.\n"
" "
msgstr ""
"\n"
" <p><strong>Savez-vous que votre navigateur est obsolète ?</strong> Nous "
"vous recommandons de <a href=\"http://windows.microsoft.com/en-us/internet-"
"explorer/download-ie\">mettre à jour votre navigateur</a> ou d'<a href="
"\"http://browsehappy.com/\">utiliser un navigateur différent</a>.\n"
" "
#: templates/gadjo/root.html:70
#: templates/gadjo/root.html:60
msgid "Homepage"
msgstr "Accueil"
#: templates/gadjo/widget.html:11
#: templates/gadjo/widget.html:12
msgid "This field is required."
msgstr "Ce champ est obligatoire."
#: templates/gadjo/widget.html:13
#: templates/gadjo/widget.html:14
msgid "(optional)"
msgstr "(optionnel)"

20
gadjo/static/css/_forms.scss
View File

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

25
gadjo/templates/gadjo/password-widget.html Normal file
View File

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

11
gadjo/templates/gadjo/widget.html
View File

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