Skip to content

Commit 963c748

Browse files
MauricioFauthMauricioFauth
committed
Replace fieldset with cards in add user account page
Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
1 parent 4790277 commit 963c748

4 files changed

Lines changed: 157 additions & 133 deletions

File tree

‎templates/server/privileges/add_user.twig‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,42 @@
1+
<div class="container">
12
<h2>
23
{{ get_icon('b_usradd') }}
34
{% trans 'Add user account' %}
45
</h2>
56

6-
<form name="usersForm" id="addUsersForm" action="{{ url('/server/privileges') }}" method="post" autocomplete="off">
7+
<div name="usersForm" id="addUsersForm" action="{{ url('/server/privileges') }}" method="post" autocomplete="off">
78
{{ get_hidden_inputs() }}
89

910
{{ login_information_fields_new|raw }}
1011

11-
<fieldset class="pma-fieldset" id="fieldset_add_user_database">
12-
<legend>{% trans 'Database for user account' %}</legend>
13-
14-
<input type="checkbox" name="createdb-1" id="createdb-1">
15-
<label for="createdb-1">{% trans 'Create database with same name and grant all privileges.' %}</label>
16-
<br>
17-
18-
<input type="checkbox" name="createdb-2" id="createdb-2">
19-
<label for="createdb-2">{% trans 'Grant all privileges on wildcard name (username\\_%).' %}</label>
20-
<br>
12+
<div class="card mb-3">
13+
<div class="card-header">{% trans 'Database for user account' %}</div>
14+
<div class="card-body">
15+
<input type="checkbox" name="createdb-1" id="createdb-1">
16+
<label for="createdb-1">{% trans 'Create database with same name and grant all privileges.' %}</label>
17+
<br>
2118

22-
{% if database is not empty %}
23-
<input type="checkbox" name="createdb-3" id="createdb-3" checked>
24-
<label for="createdb-3">{{ 'Grant all privileges on database %s.'|trans|format(database) }}</label>
25-
<input type="hidden" name="dbname" value="{{ database }}">
19+
<input type="checkbox" name="createdb-2" id="createdb-2">
20+
<label for="createdb-2">{% trans 'Grant all privileges on wildcard name (username\\_%).' %}</label>
2621
<br>
27-
{% endif %}
28-
</fieldset>
22+
23+
{% if database is not empty %}
24+
<input type="checkbox" name="createdb-3" id="createdb-3" checked>
25+
<label for="createdb-3">{{ 'Grant all privileges on database %s.'|trans|format(database) }}</label>
26+
<input type="hidden" name="dbname" value="{{ database }}">
27+
<br>
28+
{% endif %}
29+
</div>
30+
</div>
2931

3032
{% if is_grant_user %}
3133
{{ privileges_table|raw }}
3234
{% endif %}
3335

34-
<fieldset id="fieldset_add_user_footer" class="pma-fieldset tblFooters">
36+
<div class="card-footer">
3537
<input type="hidden" name="adduser_submit" value="1">
3638
<input class="btn btn-primary" type="submit" id="adduser_submit" value="{% trans 'Go' %}">
37-
</fieldset>
39+
</div>
40+
</div>
3841
</form>
42+
</div>

‎templates/server/privileges/login_information_fields.twig‎

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,93 @@
1-
<fieldset class="pma-fieldset" id="fieldset_add_user_login">
2-
<legend>{% trans 'Login Information' %}</legend>
3-
<div class="item">
4-
<label for="select_pred_username">{% trans 'User name:' %}</label>
5-
<span class="options">
6-
<select name="pred_username" id="select_pred_username" title="{% trans 'User name' %}">
7-
<option value="any"{{ pred_username == 'any' ? ' selected' }}>{% trans 'Any user' %}</option>
8-
<option value="userdefined"{{ pred_username is null or pred_username == 'userdefined' ? ' selected' }}>{% trans 'Use text field' %}</option>
9-
</select>
10-
</span>
11-
<input type="text" name="username" id="pma_username" class="autofocus" maxlength="{{ username_length }}" title="{% trans 'User name' %}"
12-
{%- if username is not empty %} value="{{ new_username is not null ? new_username : username }}"{% endif -%}
13-
{{- pred_username is null or pred_username == 'userdefined' ? ' required' }}>
1+
<div class="card mb-3" id="fieldset_add_user_login">
2+
<div class="card-header">{% trans 'Login Information' %}</div>
3+
<div class="card-body">
4+
<div class="item">
5+
<label for="select_pred_username">{% trans 'User name:' %}</label>
6+
<span class="options">
7+
<select name="pred_username" id="select_pred_username" title="{% trans 'User name' %}">
8+
<option value="any"{{ pred_username == 'any' ? ' selected' }}>{% trans 'Any user' %}</option>
9+
<option value="userdefined"{{ pred_username is null or pred_username == 'userdefined' ? ' selected' }}>{% trans 'Use text field' %}</option>
10+
</select>
11+
</span>
12+
<input type="text" name="username" id="pma_username" class="autofocus" maxlength="{{ username_length }}" title="{% trans 'User name' %}"
13+
{%- if username is not empty %} value="{{ new_username is not null ? new_username : username }}"{% endif -%}
14+
{{- pred_username is null or pred_username == 'userdefined' ? ' required' }}>
1415

15-
<div id="user_exists_warning" class="hide">
16-
{{ 'An account already exists with the same username but possibly a different hostname.'|trans|notice }}
16+
<div id="user_exists_warning" class="hide">
17+
{{ 'An account already exists with the same username but possibly a different hostname.'|trans|notice }}
18+
</div>
1719
</div>
18-
</div>
1920

20-
<div class="item">
21-
<label for="select_pred_hostname">
22-
{% trans 'Host name:' %}
23-
</label>
24-
<span class="options">
25-
<select name="pred_hostname" id="select_pred_hostname" title="{% trans 'Host name' %}"
26-
{{- this_host is not null and this_host != 'localhost' and this_host != '127.0.0.1' ? ' data-thishost="' ~ this_host ~ '"' }}>
27-
<option value="any"{{ pred_hostname == 'any' ? ' selected' }}>{% trans 'Any host' %}</option>
28-
<option value="localhost"{{ pred_hostname == 'localhost' ? ' selected' }}>{% trans 'Local' %}</option>
29-
{% if this_host is not empty %}
30-
<option value="thishost"{{ pred_hostname == 'thishost' ? ' selected' }}>{% trans 'This host' %}</option>
31-
{% endif %}
32-
<option value="hosttable"{{ pred_hostname == 'hosttable' ? ' selected' }}>{% trans 'Use host table' %}</option>
33-
<option value="userdefined"{{ pred_hostname == 'userdefined' ? ' selected' }}>{% trans 'Use text field' %}</option>
34-
</select>
35-
</span>
36-
<input type="text" name="hostname" id="pma_hostname" maxlength="{{ hostname_length }}" value="{{ hostname|default('%') }}" title="
37-
{%- trans 'Host name' %}"{{ pred_hostname == 'userdefined' ? ' required' }}>
21+
<div class="item">
22+
<label for="select_pred_hostname">
23+
{% trans 'Host name:' %}
24+
</label>
25+
<span class="options">
26+
<select name="pred_hostname" id="select_pred_hostname" title="{% trans 'Host name' %}"
27+
{{- this_host is not null and this_host != 'localhost' and this_host != '127.0.0.1' ? ' data-thishost="' ~ this_host ~ '"' }}>
28+
<option value="any"{{ pred_hostname == 'any' ? ' selected' }}>{% trans 'Any host' %}</option>
29+
<option value="localhost"{{ pred_hostname == 'localhost' ? ' selected' }}>{% trans 'Local' %}</option>
30+
{% if this_host is not empty %}
31+
<option value="thishost"{{ pred_hostname == 'thishost' ? ' selected' }}>{% trans 'This host' %}</option>
32+
{% endif %}
33+
<option value="hosttable"{{ pred_hostname == 'hosttable' ? ' selected' }}>{% trans 'Use host table' %}</option>
34+
<option value="userdefined"{{ pred_hostname == 'userdefined' ? ' selected' }}>{% trans 'Use text field' %}</option>
35+
</select>
36+
</span>
37+
<input type="text" name="hostname" id="pma_hostname" maxlength="{{ hostname_length }}" value="{{ hostname|default('%') }}" title="
38+
{%- trans 'Host name' %}"{{ pred_hostname == 'userdefined' ? ' required' }}>
3839

39-
{{ show_hint('When Host table is used, this field is ignored and values stored in Host table are used instead.'|trans) }}
40-
</div>
40+
{{ show_hint('When Host table is used, this field is ignored and values stored in Host table are used instead.'|trans) }}
41+
</div>
4142

42-
<div class="item">
43-
<label for="select_pred_password">{% trans 'Password:' %}</label>
44-
<span class="options">
45-
<select name="pred_password" id="select_pred_password" title="{% trans 'Password' %}">
46-
{% if is_change %}
47-
<option value="keep" selected>{% trans 'Do not change the password' %}</option>
48-
{% endif %}
49-
<option value="none"{{ username is not null and not is_change ? ' selected' }}>{% trans 'No password' %}</option>
50-
<option value="userdefined"{{ username is null ? ' selected' }}>{% trans 'Use text field' %}</option>
51-
</select>
52-
</span>
53-
<input type="password" id="text_pma_pw" name="pma_pw" title="{% trans 'Password' %}"{{ username is null ? ' required' }}>
54-
<span>{% trans %}Strength:{% context %}Password strength{% endtrans %}</span>
55-
<meter max="4" id="password_strength_meter" name="pw_meter"></meter>
56-
<span id="password_strength" name="pw_strength"></span>
57-
</div>
43+
<div class="item">
44+
<label for="select_pred_password">{% trans 'Password:' %}</label>
45+
<span class="options">
46+
<select name="pred_password" id="select_pred_password" title="{% trans 'Password' %}">
47+
{% if is_change %}
48+
<option value="keep" selected>{% trans 'Do not change the password' %}</option>
49+
{% endif %}
50+
<option value="none"{{ username is not null and not is_change ? ' selected' }}>{% trans 'No password' %}</option>
51+
<option value="userdefined"{{ username is null ? ' selected' }}>{% trans 'Use text field' %}</option>
52+
</select>
53+
</span>
54+
<input type="password" id="text_pma_pw" name="pma_pw" title="{% trans 'Password' %}"{{ username is null ? ' required' }}>
55+
<span>{% trans %}Strength:{% context %}Password strength{% endtrans %}</span>
56+
<meter max="4" id="password_strength_meter" name="pw_meter"></meter>
57+
<span id="password_strength" name="pw_strength"></span>
58+
</div>
5859

59-
<div class="item" id="div_element_before_generate_password">
60-
<label for="text_pma_pw2">{% trans 'Re-type:' %}</label>
61-
<span class="options">&nbsp;</span>
62-
<input type="password" name="pma_pw2" id="text_pma_pw2" title="{% trans 'Re-type' %}"{{ username is null ? ' required' }}>
63-
</div>
60+
<div class="item" id="div_element_before_generate_password">
61+
<label for="text_pma_pw2">{% trans 'Re-type:' %}</label>
62+
<span class="options">&nbsp;</span>
63+
<input type="password" name="pma_pw2" id="text_pma_pw2" title="{% trans 'Re-type' %}"{{ username is null ? ' required' }}>
64+
</div>
6465

65-
<div class="item" id="authentication_plugin_div">
66-
<label for="select_authentication_plugin">
67-
{% if is_new %}
68-
{% trans 'Authentication plugin' %}
69-
{% else %}
70-
{% trans 'Password hashing method' %}
71-
{% endif %}
72-
</label>
73-
<span class="options">&nbsp;</span>
66+
<div class="item" id="authentication_plugin_div">
67+
<label for="select_authentication_plugin">
68+
{% if is_new %}
69+
{% trans 'Authentication plugin' %}
70+
{% else %}
71+
{% trans 'Password hashing method' %}
72+
{% endif %}
73+
</label>
74+
<span class="options">&nbsp;</span>
7475

75-
<select name="authentication_plugin" id="select_authentication_plugin">
76-
{% for plugin_name, plugin_description in active_auth_plugins %}
77-
<option value="{{ plugin_name }}"{{ plugin_name == auth_plugin ? ' selected' }}>{{ plugin_description }}</option>
78-
{% endfor %}
79-
</select>
76+
<select name="authentication_plugin" id="select_authentication_plugin">
77+
{% for plugin_name, plugin_description in active_auth_plugins %}
78+
<option value="{{ plugin_name }}"{{ plugin_name == auth_plugin ? ' selected' }}>{{ plugin_description }}</option>
79+
{% endfor %}
80+
</select>
8081

81-
<div id="ssl_reqd_warning"{{ auth_plugin != 'sha256_password' ? ' class="hide"' }}>
82-
{% apply notice %}
83-
{% trans %}
84-
This method requires using an '<em>SSL connection</em>' or an '<em>unencrypted connection that encrypts the password using RSA</em>'; while connecting to the server.
85-
{% endtrans %}
86-
{{ show_mysql_docu('sha256-authentication-plugin') }}
87-
{% endapply %}
82+
<div id="ssl_reqd_warning"{{ auth_plugin != 'sha256_password' ? ' class="hide"' }}>
83+
{% apply notice %}
84+
{% trans %}
85+
This method requires using an '<em>SSL connection</em>' or an '<em>unencrypted connection that encrypts the password using RSA</em>'; while connecting to the server.
86+
{% endtrans %}
87+
{{ show_mysql_docu('sha256-authentication-plugin') }}
88+
{% endapply %}
89+
</div>
8890
</div>
91+
{# Generate password added here via jQuery #}
8992
</div>
90-
{# Generate password added here via jQuery #}
91-
</fieldset>
93+
</div>

‎templates/server/privileges/privileges_table.twig‎

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -249,8 +249,8 @@
249249
{% else %}
250250

251251
{% set grant_count = 0 %}
252-
<fieldset class="pma-fieldset" id="fieldset_user_global_rights">
253-
<legend data-submenu-label="
252+
<div class="card">
253+
<div class="card-header" data-submenu-label="
254254
{%- if is_global %}
255255
{%- trans 'Global' -%}
256256
{% elseif is_database %}
@@ -267,17 +267,19 @@
267267
{% endif %}
268268
<input type="checkbox" id="addUsersForm_checkall" class="checkall_box" title="{% trans 'Check all' %}">
269269
<label for="addUsersForm_checkall">{% trans 'Check all' %}</label>
270-
</legend>
271-
<p>
270+
</div>
271+
<div class="card-body row g-3">
272+
<p class="col-12">
272273
<small><em>{% trans 'Note: MySQL privilege names are expressed in English.' %}</em></small>
273274
</p>
274-
275-
<fieldset class="pma-fieldset">
276-
<legend>
275+
<div class="col">
276+
<div class="card">
277+
<div class="card-header">
277278
<input type="checkbox" class="sub_checkall_box" id="checkall_Data_priv" title="{% trans 'Check all' %}">
278279
<label for="checkall_Data_priv">{% trans 'Data' %}</label>
279-
</legend>
280+
</div>
280281

282+
<div class="card-body">
281283
<div class="item">
282284
{% set grant_count = grant_count + 1 %}
283285
<input type="checkbox" class="checkall" name="Select_priv" id="checkbox_Select_priv" value="Y" title="
@@ -344,14 +346,17 @@
344346
</label>
345347
</div>
346348
{% endif %}
347-
</fieldset>
348-
349-
<fieldset class="pma-fieldset">
350-
<legend>
349+
</div>
350+
</div>
351+
</div>
352+
<div class="col">
353+
<div class="card">
354+
<div class="card-header">
351355
<input type="checkbox" class="sub_checkall_box" id="checkall_Structure_priv" title="{% trans 'Check all' %}">
352356
<label for="checkall_Structure_priv">{% trans 'Structure' %}</label>
353-
</legend>
357+
</div>
354358

359+
<div class="card-body">
355360
<div class="item">
356361
{% set grant_count = grant_count + 1 %}
357362
<input type="checkbox" class="checkall" name="Create_priv" id="checkbox_Create_priv" value="Y" title="
@@ -544,13 +549,18 @@
544549
</label>
545550
</div>
546551
{% endif %}
547-
</fieldset>
552+
</div>
553+
</div>
554+
</div>
555+
<div class="col">
548556

549-
<fieldset class="pma-fieldset">
550-
<legend>
557+
<div class="card">
558+
<div class="card-header">
551559
<input type="checkbox" class="sub_checkall_box" id="checkall_Administration_priv" title="{% trans 'Check all' %}">
552560
<label for="checkall_Administration_priv">{% trans 'Administration' %}</label>
553-
</legend>
561+
</div>
562+
563+
<div class="card-body">
554564

555565
{% if is_global %}
556566
<div class="item">
@@ -714,11 +724,15 @@
714724
</label>
715725
</div>
716726
{% endif %}
717-
</fieldset>
727+
</div>
728+
</div>
729+
</div>
718730

719731
{% if is_global %}
720-
<fieldset class="pma-fieldset">
721-
<legend>{% trans 'Resource limits' %}</legend>
732+
<div class="col">
733+
<div class="card">
734+
<div class="card-header">{% trans 'Resource limits' %}</div>
735+
<div class="card-body">
722736
<p>
723737
<small><em>{% trans 'Note: Setting these options to 0 (zero) removes the limit.' %}</em></small>
724738
</p>
@@ -774,10 +788,14 @@
774788
{{- row.max_user_connections ?? '0' }}" title="
775789
{%- trans 'Limits the number of simultaneous connections the user may have.' %}">
776790
</div>
777-
</fieldset>
791+
</div>
792+
</div>
793+
</div>
794+
<div class="col">
778795

779-
<fieldset class="pma-fieldset">
780-
<legend>SSL</legend>
796+
<div class="card">
797+
<div class="card-header">SSL</div>
798+
<div class="card-body">
781799
<div id="require_ssl_div">
782800
<div class="item">
783801
<input type="radio" name="ssl_type" id="ssl_type_NONE" title="
@@ -843,18 +861,18 @@
843861
</div>
844862
</div>
845863
</div>
846-
</fieldset>
864+
</div>
865+
</div>
866+
</div>
847867
{% endif %}
848-
849-
<div class="clearfloat"></div>
850-
</fieldset>
868+
</div>
851869
<input type="hidden" name="grant_count" value="{{ grant_count - (row['Grant_priv'] is defined ? 1 : 0) }}">
852870

853871
{% endif %}
854872

855873
{% if has_submit %}
856-
<fieldset id="fieldset_user_privtable_footer" class="pma-fieldset tblFooters">
874+
<div class="card-footer">
857875
<input type="hidden" name="update_privs" value="1">
858876
<input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
859-
</fieldset>
877+
</div>
860878
{% endif %}

0 commit comments

Comments
 (0)