From a57e67b96f7ff08ccc514d0f9430ab04894880f1 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 25 Nov 2022 23:16:16 +0100
Subject: [PATCH] Better style for the settings' users and token panels

---
 .../src/components/panels/Settings/Token.vue  | 37 ++++++++++++----
 .../src/components/panels/Settings/Users.vue  | 42 ++++++-------------
 2 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/Token.vue b/platypush/backend/http/webapp/src/components/panels/Settings/Token.vue
index 74937a599f..ce5d17f47d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Settings/Token.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Settings/Token.vue
@@ -31,25 +31,33 @@
       <div class="form-container">
         <form @submit.prevent="generateToken" ref="generateTokenForm">
           <label>
-            Username
-            <input type="text" name="username" :value="currentUser.username" disabled>
+            <span>Username</span>
+            <span>
+              <input type="text" name="username" :value="currentUser.username" disabled>
+            </span>
           </label>
 
           <label>
-            Password
-            <input type="password" name="password">
+            <span>Confirm password</span>
+            <span>
+              <input type="password" name="password">
+            </span>
           </label>
 
           <label>
-            Token validity in days
-            <input type="text" name="validityDays">
+            <span>Token validity in days</span>
+            <span>
+              <input type="text" name="validityDays">
+            </span>
             <span class="note">
               Decimal values are also supported (e.g. <i>0.5</i> to identify 6 hours). An empty or zero value means that
               the token has no expiry date.
             </span>
           </label>
 
-          <input type="submit" value="Generate token">
+          <label>
+            <input type="submit" class="btn btn-primary" value="Generate token">
+          </label>
         </form>
       </div>
     </div>
@@ -161,6 +169,12 @@ export default {
       font-size: .75em;
       margin: -.75em 0 2em 0;
     }
+
+    span {
+      input {
+        width: 100%;
+      }
+    }
   }
 
   input[type=password] {
@@ -181,6 +195,11 @@ export default {
     label {
       display: flex;
       flex-direction: column;
+
+      span {
+        display: block;
+        width: 100%;
+      }
     }
 
     textarea {
@@ -219,6 +238,10 @@ export default {
       width: 50%;
       justify-content: right;
       padding: 1em;
+
+      label {
+        text-align: left;
+      }
     }
 
     .body {
diff --git a/platypush/backend/http/webapp/src/components/panels/Settings/Users.vue b/platypush/backend/http/webapp/src/components/panels/Settings/Users.vue
index 78d5ce78f5..7e4eea2647 100644
--- a/platypush/backend/http/webapp/src/components/panels/Settings/Users.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Settings/Users.vue
@@ -12,8 +12,9 @@
       <label>
         <input type="password" name="confirm_password" placeholder="Confirm password" :disabled="commandRunning">
       </label>
-
-      <input type="submit" value="Create User" :disabled="commandRunning">
+      <label>
+        <input type="submit" class="btn btn-primary" value="Create User" :disabled="commandRunning">
+      </label>
     </form>
   </Modal>
 
@@ -31,7 +32,9 @@
       <label>
         <input type="password" name="confirm_new_password" placeholder="Confirm new password" :disabled="commandRunning">
       </label>
-      <input type="submit" value="Change Password" :disabled="commandRunning">
+      <label>
+        <input type="submit" class="btn btn-primary" value="Change Password" :disabled="commandRunning">
+      </label>
     </form>
   </modal>
 
@@ -138,32 +141,6 @@ export default {
       await this.refresh()
     },
 
-    // onTokenFocus(event) {
-    //   event.target.select()
-    //   this.document.execCommand('copy')
-    //   event.target.setAttribute('disabled', true)
-    //
-    //   this.notify({
-    //     text: 'Token copied to the clipboard',
-    //     image: {
-    //       iconClass: 'fas fa-copy',
-    //     },
-    //   })
-    // },
-    //
-    // onTokenBlur(event) {
-    //   event.target.select()
-    //   this.document.execCommand('copy')
-    //   event.target.removeAttribute('disabled')
-    //
-    //   this.notify({
-    //     text: 'Token copied to clipboard',
-    //     image: {
-    //       iconClass: 'fas fa-copy',
-    //     },
-    //   })
-    // },
-
     async changePassword(event) {
       event.preventDefault()
 
@@ -264,6 +241,13 @@ export default {
     }
   }
 
+  form {
+    label {
+      display: block;
+      text-align: center;
+    }
+  }
+
   .users-list {
     background: $background-color;
     margin-top: .15em;