Skip to content

Commit c36cced

Browse files
faissalouxwilliamdes
faissaloux
and
williamdes
authored
improve Change Password modal UI (#17561)
* improve Change Password modal UI Signed-off-by: Faissal Wahabali <fwahabali@gmail.com> * fix Generate btn vertical position Signed-off-by: Faissal Wahabali <fwahabali@gmail.com> * fix js-lint Signed-off-by: Faissal Wahabali <fwahabali@gmail.com> * update test: testGetFormForChangePassword Signed-off-by: Faissal Wahabali <fwahabali@gmail.com> * add change_password_form string existance assertion Signed-off-by: Faissal Wahabali <fwahabali@gmail.com> * Update test/classes/Server/PrivilegesTest.php Co-authored-by: William Desportes <williamdes@wdes.fr> Co-authored-by: William Desportes <williamdes@wdes.fr> Signed-off-by: Faissal Wahabali <fwahabali@gmail.com>
1 parent a8a5655 commit c36cced

3 files changed

Lines changed: 33 additions & 21 deletions

File tree

‎js/src/functions.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -594,16 +594,22 @@ Functions.suggestPassword = function (passwordForm) {
594594
Functions.displayPasswordGenerateButton = function () {
595595
var generatePwdRow = $('<tr></tr>').addClass('align-middle');
596596
$('<td></td>').html(Messages.strGeneratePassword).appendTo(generatePwdRow);
597-
var pwdCell = $('<td></td>').appendTo(generatePwdRow);
597+
var pwdCell = $('<td colspan="2"></td>').addClass('row').appendTo(generatePwdRow);
598+
599+
pwdCell.append('<div class="d-flex align-items-center col-4"></div>');
600+
598601
var pwdButton = $('<input>')
599602
.attr({ type: 'button', id: 'button_generate_password', value: Messages.strGenerate })
600603
.addClass('btn btn-secondary button')
601604
.on('click', function () {
602605
Functions.suggestPassword(this.form);
603606
});
604607
var pwdTextbox = $('<input>')
605-
.attr({ type: 'text', name: 'generated_pw', id: 'generated_pw' });
606-
pwdCell.append(pwdButton).append(pwdTextbox);
608+
.attr({ type: 'text', name: 'generated_pw', id: 'generated_pw' })
609+
.addClass('col-6');
610+
611+
pwdCell.find('div').eq(0).append(pwdButton);
612+
pwdCell.append(pwdTextbox);
607613

608614
if (document.getElementById('button_generate_password') === null) {
609615
$('#tr_element_before_generate_password').parent().append(generatePwdRow);

‎templates/server/privileges/change_password.twig‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,41 +7,47 @@
77
{% endif %}
88

99
<div class="card mb-3" id="fieldset_change_password">
10-
<div{{ is_privileges ? ' class="card-header js-submenu-label" data-submenu-label="Change password"' }}>{% trans 'Change password' %}</div>
1110
<div class="card-body">
12-
<table class="table table-borderless w-auto">
13-
<tr>
14-
<td colspan="2">
11+
<table class="table-borderless" style="background: transparent;">
12+
<tr class="mb-4">
13+
<td colspan="3">
1514
<input type="radio" name="nopass" value="1" id="nopass_1">
1615
<label for="nopass_1">{% trans 'No Password' %}</label>
1716
</td>
1817
</tr>
19-
<tr class="align-middle">
18+
<tr class="align-middle mb-4">
2019
<td>
2120
<input type="radio" name="nopass" value="0" id="nopass_0" checked="checked">
2221
<label for="nopass_0">{% trans 'Password:' %}&nbsp;</label>
2322
</td>
2423
<td>
25-
{% trans 'Enter:' %}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
26-
<input type="password" name="pma_pw" id="text_pma_change_pw" size="10" class="textfield"
27-
onkeyup="Functions.checkPasswordStrength($(this).val(), $('#change_password_strength_meter'), meter_obj_label = $('#change_password_strength'), CommonParams.get('user'));"
28-
onchange="nopass[1].checked = true">
29-
<span>{% trans %}Strength:{% context %}Password strength{% endtrans %}</span>
30-
<meter max="4" id="change_password_strength_meter" name="pw_meter"></meter>
24+
<div class="row">
25+
<span class="d-flex align-items-center col-4">{% trans 'Enter:' %}</span>
26+
<input type="password" name="pma_pw" id="text_pma_change_pw" size="10" class="textfield col-6"
27+
onkeyup="Functions.checkPasswordStrength($(this).val(), $('#change_password_strength_meter'), meter_obj_label = $('#change_password_strength'), CommonParams.get('user'));"
28+
onchange="nopass[1].checked = true">
29+
</div>
30+
<div class="row mt-2">
31+
<span class="d-flex align-items-center col-4">{% trans 'Re-type:' %}</span>
32+
<input type="password" name="pma_pw2" id="text_pma_change_pw2" size="10" class="textfield col-6" onchange="nopass[1].checked = true">
33+
</div>
34+
</td>
35+
<td class="col-2">
36+
<div>
37+
<span>{% trans %}Strength:{% context %}Password strength{% endtrans %}</span>
38+
<meter max="4" id="change_password_strength_meter" name="pw_meter"></meter>
39+
</div>
3140
<span id="change_password_strength" name="pw_strength"></span>
32-
<br>
33-
{% trans 'Re-type:' %}&nbsp;
34-
<input type="password" name="pma_pw2" id="text_pma_change_pw2" size="10" class="textfield" onchange="nopass[1].checked = true">
3541
</td>
3642
</tr>
3743

3844
{% if not is_new or (is_new and has_more_auth_plugins) %}
39-
<tr class="align-middle">
45+
<tr class="align-middle mb-4">
4046
<td>
4147
<label for="select_authentication_plugin_cp">{% trans 'Password Hashing:' %}</label>
4248
</td>
43-
<td>
44-
<select name="authentication_plugin" id="select_authentication_plugin_cp">
49+
<td colspan="2">
50+
<select name="authentication_plugin" id="select_authentication_plugin_cp" class="col-8">
4551
{% for plugin_name, plugin_description in active_auth_plugins %}
4652
<option value="{{ plugin_name }}"{{ plugin_name == orig_auth_plugin ? ' selected' }}>{{ plugin_description }}</option>
4753
{% endfor %}

‎test/classes/Server/PrivilegesTest.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1840,7 +1840,7 @@ public function testGetFormForChangePassword(): void
18401840

18411841
//labels
18421842
$this->assertStringContainsString(
1843-
__('Change password'),
1843+
'change_password_form',
18441844
$html
18451845
);
18461846
$this->assertStringContainsString(

0 commit comments

Comments
 (0)