From f8a0757469a33377c28b72d3aa385b0459a0a85f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Fri, 6 May 2022 15:32:07 -0300
Subject: [PATCH] Convert the edit privileges pages fieldsets to cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 .../server/privileges/change_password.twig    | 12 +--
 .../privileges/edit_routine_privileges.twig   | 26 +++---
 .../server/privileges/privileges_summary.twig | 14 ++--
 .../server/privileges/privileges_table.twig   | 11 +--
 .../server/privileges/user_properties.twig    | 83 ++++++++++---------
 test/classes/Server/PrivilegesTest.php        | 10 ++-
 6 files changed, 88 insertions(+), 68 deletions(-)

diff --git a/templates/server/privileges/change_password.twig b/templates/server/privileges/change_password.twig
index a32ec48085..066c670312 100644
--- a/templates/server/privileges/change_password.twig
+++ b/templates/server/privileges/change_password.twig
@@ -6,8 +6,9 @@
     <input type="hidden" name="hostname" value="{{ hostname }}">
   {% endif %}
 
-  <fieldset class="pma-fieldset" id="fieldset_change_password">
-    <legend{{ is_privileges ? ' class="js-submenu-label" data-submenu-label="Change password"' }}>{% trans 'Change password' %}</legend>
+  <div class="card mb-3" id="fieldset_change_password">
+    <div{{ is_privileges ? ' class="card-header js-submenu-label" data-submenu-label="Change password"' }}>{% trans 'Change password' %}</div>
+    <div class="card-body">
     <table class="table table-borderless w-auto">
       <tr>
         <td colspan="2">
@@ -62,11 +63,12 @@
         {% endapply %}
       </div>
     {% endif %}
+    </div>
 
-  </fieldset>
+  </div>
 
-  <fieldset id="fieldset_change_password_footer" class="pma-fieldset tblFooters">
+  <div id="fieldset_change_password_footer">
     <input type="hidden" name="change_pw" value="1">
     <input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
-  </fieldset>
+  </div>
 </form>
diff --git a/templates/server/privileges/edit_routine_privileges.twig b/templates/server/privileges/edit_routine_privileges.twig
index 946a329a7d..af6179d4e1 100644
--- a/templates/server/privileges/edit_routine_privileges.twig
+++ b/templates/server/privileges/edit_routine_privileges.twig
@@ -1,4 +1,4 @@
-<div id="edit_user_dialog">
+<div class="container" id="edit_user_dialog">
   <h2>
     {{ get_icon('b_usredit') }}
     {% trans 'Edit privileges:' %}
@@ -42,21 +42,23 @@
     <input type="hidden" name="routinename" value="{{ routine }}">
     <input type="hidden" name="grant_count" value="{{ privileges|length }}">
 
-    <fieldset class="pma-fieldset" id="fieldset_user_global_rights">
-      <legend class="js-submenu-label" data-submenu-label="{% trans 'Routine' %}">
+    <div class="card mb-3" id="fieldset_user_global_rights">
+      <div class="card-header js-submenu-label" data-submenu-label="{% trans 'Routine' %}">
         {% trans 'Routine-specific privileges' %}
-      </legend>
+      </div>
+      <div class="card-body">
       <p>
         <small>
           <em>{% trans 'Note: MySQL privilege names are expressed in English.' %}</em>
         </small>
       </p>
 
-      <fieldset class="pma-fieldset">
-        <legend>
+      <div class="card">
+        <div class="card-header">
           <input type="checkbox" class="sub_checkall_box" id="checkall_Routine_priv" title="{% trans 'Check all' %}">
           <label for="checkall_Routine_priv">{% trans 'Routine' %}</label>
-        </legend>
+        </div>
+        <div class="card-body">
 
         <div class="item">
           <input type="checkbox" class="checkall" name="Grant_priv" id="checkbox_Grant_priv" value="Y" title="
@@ -94,12 +96,14 @@
             </code>
           </label>
         </div>
-      </fieldset>
-    </fieldset>
+      </div>
+      </div>
+      </div>
+    </div>
 
-    <fieldset id="fieldset_user_privtable_footer" class="pma-fieldset tblFooters">
+    <div id="fieldset_user_privtable_footer">
       <input type="hidden" name="update_privs" value="1">
       <input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
-    </fieldset>
+    </div>
   </form>
 </div>
diff --git a/templates/server/privileges/privileges_summary.twig b/templates/server/privileges/privileges_summary.twig
index 5c7848c941..d498a0e842 100644
--- a/templates/server/privileges/privileges_summary.twig
+++ b/templates/server/privileges/privileges_summary.twig
@@ -3,11 +3,12 @@
     <input type="hidden" name="username" value="{{ username }}">
     <input type="hidden" name="hostname" value="{{ hostname }}">
 
-    <fieldset class="pma-fieldset">
-        <legend class="js-submenu-label" data-submenu-label="{{ sub_menu_label }}">
+    <div class="card mb-3">
+        <div class="card-header js-submenu-label" data-submenu-label="{{ sub_menu_label }}">
             {{ legend }}
-        </legend>
+        </div>
 
+        <div class="card-body">
         <table class="table table-light table-striped table-hover w-auto">
             <thead class="table-light">
                 <tr>
@@ -96,9 +97,10 @@
 
             <input type="text" id="text_routinename" name="routinename">
         {% endif %}
-    </fieldset>
+        </div>
+    </div>
 
-    <fieldset class="pma-fieldset tblFooters">
+    <div>
         <input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
-    </fieldset>
+    </div>
 </form>
diff --git a/templates/server/privileges/privileges_table.twig b/templates/server/privileges/privileges_table.twig
index fb88ff713b..36110167b6 100644
--- a/templates/server/privileges/privileges_table.twig
+++ b/templates/server/privileges/privileges_table.twig
@@ -2,10 +2,11 @@
 
   <input type="hidden" name="grant_count" value="{{ row|length }}">
   <input type="hidden" name="column_count" value="{{ columns|length }}">
-  <fieldset class="pma-fieldset" id="fieldset_user_priv">
-    <legend class="js-submenu-label" data-submenu-label="{% trans 'Table' %}">
+  <div class="card mb-3" id="fieldset_user_priv">
+    <div class="card-header js-submenu-label" data-submenu-label="{% trans 'Table' %}">
       {% trans 'Table-specific privileges' %}
-    </legend>
+    </div>
+    <div class="card-body">
     <p>
       <small><em>{% trans 'Note: MySQL privilege names are expressed in English.' %}</em></small>
     </p>
@@ -243,8 +244,8 @@
         </div>
       {% endif %}
     </div>
-    <div class="clearfloat"></div>
-  </fieldset>
+    </div>
+  </div>
 
 {% else %}
 
diff --git a/templates/server/privileges/user_properties.twig b/templates/server/privileges/user_properties.twig
index 287881f04e..6fbf783c15 100644
--- a/templates/server/privileges/user_properties.twig
+++ b/templates/server/privileges/user_properties.twig
@@ -1,4 +1,4 @@
-<div id="edit_user_dialog">
+<div class="container" id="edit_user_dialog">
   <h2>
     {{ get_icon('b_usredit') }}
     {% trans 'Edit privileges:' %}
@@ -102,51 +102,56 @@
       <input type="hidden" name="old_usergroup" value="{{ user_group }}">
     {% endif %}
 
-    <fieldset class="pma-fieldset" id="fieldset_change_copy_user">
-      <legend class="js-submenu-label" data-submenu-label="{% trans 'Login Information' %}">
+    <div class="card mb-3">
+      <div class="card-header js-submenu-label" data-submenu-label="{% trans 'Login Information' %}">
         {% trans 'Change login information / Copy user account' %}
-      </legend>
+      </div>
 
-      {{ change_login_info_fields|raw }}
+      <div class="card-body">
+        {{ change_login_info_fields|raw }}
 
-      <fieldset class="pma-fieldset" id="fieldset_mode">
-        <legend>
-          {% trans 'Create a new user account with the same privileges and …' %}
-        </legend>
+        <div class="card">
+          <div class="card-header">
+            {% trans 'Create a new user account with the same privileges and …' %}
+          </div>
 
-        <div class="mb-3 form-check">
-          <input class="form-check-input" type="radio" name="mode" id="mode_4" value="4" checked>
-          <label class="form-check-label" for="mode_4">
-            {% trans '… keep the old one.' %}
-          </label>
+          <div class="card-body">
+
+            <div class="mb-3 form-check">
+              <input class="form-check-input" type="radio" name="mode" id="mode_4" value="4" checked>
+              <label class="form-check-label" for="mode_4">
+                {% trans '… keep the old one.' %}
+              </label>
+            </div>
+
+            <div class="mb-3 form-check">
+              <input class="form-check-input" type="radio" name="mode" id="mode_1" value="1">
+              <label class="form-check-label" for="mode_1">
+                {% trans '… delete the old one from the user tables.' %}
+              </label>
+            </div>
+
+            <div class="mb-3 form-check">
+              <input class="form-check-input" type="radio" name="mode" id="mode_2" value="2">
+              <label class="form-check-label" for="mode_2">
+                {% trans '… revoke all active privileges from the old one and delete it afterwards.' %}
+              </label>
+            </div>
+
+            <div class="mb-3 form-check">
+              <input class="form-check-input" type="radio" name="mode" id="mode_3" value="3">
+              <label class="form-check-label" for="mode_3">
+                {% trans '… delete the old one from the user tables and reload the privileges afterwards.' %}
+              </label>
+            </div>
+          </div>
         </div>
+      </div>
+    </div>
 
-        <div class="mb-3 form-check">
-          <input class="form-check-input" type="radio" name="mode" id="mode_1" value="1">
-          <label class="form-check-label" for="mode_1">
-            {% trans '… delete the old one from the user tables.' %}
-          </label>
-        </div>
-
-        <div class="mb-3 form-check">
-          <input class="form-check-input" type="radio" name="mode" id="mode_2" value="2">
-          <label class="form-check-label" for="mode_2">
-            {% trans '… revoke all active privileges from the old one and delete it afterwards.' %}
-          </label>
-        </div>
-
-        <div class="mb-3 form-check">
-          <input class="form-check-input" type="radio" name="mode" id="mode_3" value="3">
-          <label class="form-check-label" for="mode_3">
-            {% trans '… delete the old one from the user tables and reload the privileges afterwards.' %}
-          </label>
-        </div>
-      </fieldset>
-    </fieldset>
-
-    <fieldset id="fieldset_change_copy_user_footer" class="pma-fieldset tblFooters">
+    <div>
       <input type="hidden" name="change_copy" value="1">
       <input class="btn btn-primary" type="submit" value="{% trans 'Go' %}">
-    </fieldset>
+    </div>
   </form>
 </div>
diff --git a/test/classes/Server/PrivilegesTest.php b/test/classes/Server/PrivilegesTest.php
index 662cfcb226..08251c873a 100644
--- a/test/classes/Server/PrivilegesTest.php
+++ b/test/classes/Server/PrivilegesTest.php
@@ -1638,7 +1638,10 @@ class PrivilegesTest extends AbstractTestCase
         $actual = $this->serverPrivileges->getHtmlForAllTableSpecificRights('pma', 'host', 'table', 'pmadb');
         $this->assertStringContainsString('<input type="hidden" name="username" value="pma">', $actual);
         $this->assertStringContainsString('<input type="hidden" name="hostname" value="host">', $actual);
-        $this->assertStringContainsString('<legend class="js-submenu-label" data-submenu-label="Table">', $actual);
+        $this->assertStringContainsString(
+            '<div class="card-header js-submenu-label" data-submenu-label="Table">',
+            $actual
+        );
         $this->assertStringContainsString('Table-specific privileges', $actual);
 
         // Test case 2
@@ -1649,7 +1652,10 @@ class PrivilegesTest extends AbstractTestCase
             'z',
         ];
         $actual = $this->serverPrivileges->getHtmlForAllTableSpecificRights('pma2', 'host2', 'database', '');
-        $this->assertStringContainsString('<legend class="js-submenu-label" data-submenu-label="Database">', $actual);
+        $this->assertStringContainsString(
+            '<div class="card-header js-submenu-label" data-submenu-label="Database">',
+            $actual
+        );
         $this->assertStringContainsString('Database-specific privileges', $actual);
     }