From 1a2f299e04abab808d417f39f703758978ac48cb Mon Sep 17 00:00:00 2001
From: Phillip Thelen <phillip@habitica.com>
Date: Wed, 17 Jul 2024 15:06:11 +0200
Subject: [PATCH] Make Admin panel design more consistent

---
 .../src/components/admin-panel/index.vue      |   9 +-
 .../admin-panel/user-support/achievements.vue |   8 +-
 .../user-support/avatarAndDrops.vue           |  10 +-
 .../user-support/contributorDetails.vue       |  63 ++++----
 .../admin-panel/user-support/cronAndAuth.vue  | 118 +++++++++-----
 .../user-support/customizationsOwned.vue      |  10 +-
 .../admin-panel/user-support/itemsOwned.vue   |  10 +-
 .../user-support/partyAndQuest.vue            |   8 +-
 .../user-support/privilegesAndGems.vue        |  86 ++++++----
 .../user-support/subscriptionAndPerks.vue     | 153 ++++++++++++------
 .../admin-panel/user-support/transactions.vue |  10 +-
 .../admin-panel/user-support/userProfile.vue  |  50 +++---
 website/server/controllers/api-v3/hall.js     |  17 +-
 13 files changed, 346 insertions(+), 206 deletions(-)

diff --git a/website/client/src/components/admin-panel/index.vue b/website/client/src/components/admin-panel/index.vue
index 5cd6e89826..8954076940 100644
--- a/website/client/src/components/admin-panel/index.vue
+++ b/website/client/src/components/admin-panel/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="row standard-page">
-    <div class="well col-12">
+  <div class="row standard-page col-12 d-flex justify-content-center">
+    <div class="admin-panel-content">
       <h1>Admin Panel</h1>
       <form
         class="form-inline"
@@ -39,6 +39,11 @@
   .input-group-append {
     width:auto;
   }
+
+  .admin-panel-content {
+    flex: 0 0 800px;
+    max-width: unset;
+  }
 </style>
 
 <script>
diff --git a/website/client/src/components/admin-panel/user-support/achievements.vue b/website/client/src/components/admin-panel/user-support/achievements.vue
index d3ab101b34..f9fdb13647 100644
--- a/website/client/src/components/admin-panel/user-support/achievements.vue
+++ b/website/client/src/components/admin-panel/user-support/achievements.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="accordion-group">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
       Achievements
     </h3>
-    <div v-if="expand">
+  </div>
+    <div v-if="expand" class="card-body">
       <ul>
         <li
           v-for="item in achievements"
diff --git a/website/client/src/components/admin-panel/user-support/avatarAndDrops.vue b/website/client/src/components/admin-panel/user-support/avatarAndDrops.vue
index 3790263f21..0b3b8b58fc 100644
--- a/website/client/src/components/admin-panel/user-support/avatarAndDrops.vue
+++ b/website/client/src/components/admin-panel/user-support/avatarAndDrops.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="accordion-group">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
-      Current Avatar Appearance, Drop Count Today
+    Current Avatar Appearance, Drop Count Today
     </h3>
-    <div v-if="expand">
+  </div>
+    <div v-if="expand" class="card-body">
       <div>Drops Today: {{ items.lastDrop.count }}</div>
       <div>Most Recent Drop: {{ items.lastDrop.date | formatDate }}</div>
       <div>Use Costume: {{ preferences.costume ? 'on' : 'off' }}</div>
diff --git a/website/client/src/components/admin-panel/user-support/contributorDetails.vue b/website/client/src/components/admin-panel/user-support/contributorDetails.vue
index 48b72b8358..a2e8d40ec5 100644
--- a/website/client/src/components/admin-panel/user-support/contributorDetails.vue
+++ b/website/client/src/components/admin-panel/user-support/contributorDetails.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="accordion-group">
+      <form @submit.prevent="saveHero({hero, msg: 'Contributor details', clearData: true})">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
-      Contributor Details
+    Contributor Details
     </h3>
-    <div v-if="expand">
-      <form @submit.prevent="saveHero({hero, msg: 'Contributor details', clearData: true})">
-        <div>
-          <label>Permissions</label>
+  </div>
+    <div v-if="expand" class="card-body">
+        <div class="mb-4">
+          <h3 class="mt-0">Permissions</h3>
           <div class="checkbox">
             <label>
               <input
@@ -72,8 +74,9 @@
             </label>
           </div>
         </div>
-        <div class="form-group">
-          <label>Title</label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Title</label>
+          <div class="col-sm-9">
           <input
             v-model="hero.contributor.text"
             class="form-control textField"
@@ -88,9 +91,11 @@
             Advisor, Chamberlain, Designer, Mathematician, Shirtster, Spokesperson,
             Statistician, Tinker, Transcriber, Troubadour.
           </small>
+          </div>
         </div>
-        <div class="form-group form-inline">
-          <label>Tier</label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Tier</label>
+          <div class="col-sm-9">
           <input
             v-model="hero.contributor.level"
             class="form-control levelField"
@@ -101,20 +106,12 @@
             This determines which items, pets, mounts are available, and name-tag coloring.
             Tiers 8 and 9 are automatically given admin status.
           </small>
+          </div>
         </div>
-        <div
-          v-if="hero.secret.text"
-          class="form-group"
-        >
-          <label>Moderation Notes</label>
-          <div
-            v-markdown="hero.secret.text"
-            class="markdownPreview"
-          ></div>
-        </div>
-        <div class="form-group">
-          <label>Contributions</label>
-          <textarea
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Contributions</label>
+          <div class="col-sm-9">
+            <textarea
             v-model="hero.contributor.contributions"
             class="form-control"
             cols="5"
@@ -124,9 +121,11 @@
             v-markdown="hero.contributor.contributions"
             class="markdownPreview"
           ></div>
+          </div>
         </div>
-        <div class="form-group">
-          <label>Edit Moderation Notes</label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Moderation Notes</label>
+          <div class="col-sm-9">
           <textarea
             v-model="hero.secret.text"
             class="form-control"
@@ -137,15 +136,17 @@
             v-markdown="hero.secret.text"
             class="markdownPreview"
           ></div>
+          </div>
         </div>
+    </div>
+        <div class="card-footer" v-if="expand">
         <input
           type="submit"
-          value="Save and Clear Data"
-          class="btn btn-primary"
-        >
-      </form>
-    </div>
+          value="Save"
+          class="btn btn-primary mt-1"
+        ></div>
   </div>
+</form>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/admin-panel/user-support/cronAndAuth.vue b/website/client/src/components/admin-panel/user-support/cronAndAuth.vue
index 624992ae70..7b825c0c2d 100644
--- a/website/client/src/components/admin-panel/user-support/cronAndAuth.vue
+++ b/website/client/src/components/admin-panel/user-support/cronAndAuth.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="accordion-group">
+      <form @submit.prevent="saveHero({ hero, msg: 'Authentication' })">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
@@ -10,7 +12,8 @@
         v-if="errorsOrWarningsExist"
       >- ERRORS / WARNINGS EXIST</span>
     </h3>
-    <div v-if="expand">
+  </div>
+    <div v-if="expand" class="card-body">
       <p
         v-if="errorsOrWarningsExist"
         class="errorMessage"
@@ -18,13 +21,15 @@
         See error(s) below.
       </p>
 
-      <div>
-        Account created:
-        <strong>{{ hero.auth.timestamps.created | formatDate }}</strong>
+      <div class="form-group row">
+        <label class="col-sm-3 col-form-label">Account created:</label>
+        <strong class="col-sm-9 col-form-label">
+          {{ hero.auth.timestamps.created | formatDate }}</strong>
       </div>
-      <div v-if="hero.flags.thirdPartyTools">
+      <div class="form-group row" v-if="hero.flags.thirdPartyTools">
         User has employed <strong>third party tools</strong>. Last known usage:
-        <strong>{{ hero.flags.thirdPartyTools | formatDate }}</strong>
+        <strong class="col-sm-9 col-form-label">
+          {{ hero.flags.thirdPartyTools | formatDate }}</strong>
       </div>
       <div v-if="cronError">
         "lastCron" value:
@@ -35,26 +40,34 @@
           ("auth.timestamps.loggedin" and "lastCron" dates are different).
         </span>
       </div>
-      <div class="form-inline">
-        <div>
-          Most recent cron:
-          <strong>{{ hero.auth.timestamps.loggedin | formatDate }}</strong>
-          ("auth.timestamps.loggedin")
-        </div>
+      <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Most recent cron:</label>
+
+        <div class="col-sm-9 col-form-label">
+          <strong>
+            {{ hero.auth.timestamps.loggedin | formatDate }}</strong>
         <button
-          class="btn btn-primary ml-2"
+          class="btn btn-warning btn-sm ml-4"
           @click="resetCron()"
         >
           Reset Cron to Yesterday
         </button>
+        </div>
       </div>
-      <div class="subsection-start">
-        Time zone:
-        <strong>{{ hero.preferences.timezoneOffset | formatTimeZone }}</strong>
+      <div class="form-group row">
+        <label class="col-sm-3 col-form-label">Time zone:</label>
+        <strong class="col-sm-9 col-form-label">
+          {{ hero.preferences.timezoneOffset | formatTimeZone }}</strong>
       </div>
-      <div>
-        Custom Day Start time (CDS):
-        <strong>{{ hero.preferences.dayStart }}</strong>
+      <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Custom Day Start time (CDS)</label>
+          <div class="col-sm-9">
+          <input
+            v-model="hero.preferences.dayStart"
+            class="form-control levelField"
+            type="number"
+          >
+          </div>
       </div>
       <div v-if="timezoneDiffError || timezoneMissingError">
         Time zone at previous cron:
@@ -87,18 +100,17 @@
         </div>
       </div>
 
-      <div class="subsection-start form-inline">
-        API Token: &nbsp;
-        <form @submit.prevent="changeApiToken()">
-          <input
-            type="submit"
+      <div class="form-group row">
+        <label class="col-sm-3 col-form-label">API Token</label>
+        <div class="col-sm-9">
+          <button
+            @click="changeApiToken()"
             value="Change API Token"
-            class="btn btn-primary"
-          >
-        </form>
+            class="btn btn-danger">
+            Change API Token
+          </button>
         <div
           v-if="tokenModified"
-          class="form-inline"
         >
           <strong>API Token has been changed. Tell the player something like this:</strong>
           <br>
@@ -111,35 +123,53 @@
           For the iOS app, if you can't log out you might need to uninstall it,
           reboot your phone, then reinstall it.
         </div>
+        </div>
       </div>
 
-      <div class="subsection-start">
-        Local authentication:
-        <span v-if="hero.auth.local.email">Yes, &nbsp;
-          <strong>{{ hero.auth.local.email }}</strong></span>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Local Authentication E-Mail</label>
+          <div class="col-sm-9">
+          <input
+            v-model="hero.auth.local.email"
+            class="form-control"
+            type="text"
+          >
+          </div>
+        </div>
+      <div class="form-group row">
+        <label class="col-sm-3 col-form-label">Google authentication</label>
+        <div class="col-sm-9">
+          <pre v-if="authMethodExists('google')">{{ hero.auth.google }}</pre>
         <span v-else><strong>None</strong></span>
+        </div>
       </div>
-      <div>
-        Google authentication:
-        <pre v-if="authMethodExists('google')">{{ hero.auth.google }}</pre>
-        <span v-else><strong>None</strong></span>
-      </div>
-      <div>
-        Facebook authentication:
+      <div class="form-group row">
+        <label class="col-sm-3 col-form-label">Facebook authentication</label>
+        <div class="col-sm-9">
         <pre v-if="authMethodExists('facebook')">{{ hero.auth.facebook }}</pre>
         <span v-else><strong>None</strong></span>
+        </div>
       </div>
-      <div>
-        Apple ID authentication:
-        <pre v-if="authMethodExists('apple')">{{ hero.auth.apple }}</pre>
+      <div class="form-group row">
+        <label class="col-sm-3 col-form-label">Apple ID authentication</label>
+        <div class="col-sm-9">
+          <pre v-if="authMethodExists('apple')">{{ hero.auth.apple }}</pre>
         <span v-else><strong>None</strong></span>
+        </div>
       </div>
       <div class="subsection-start">
         Full "auth" object for checking above is correct:
         <pre>{{ hero.auth }}</pre>
       </div>
     </div>
+    <div class="card-footer" v-if="expand">
+        <input
+          type="submit"
+          value="Save"
+          class="btn btn-primary mt-1"
+        ></div>
   </div>
+</form>
 </template>
 
 <script>
diff --git a/website/client/src/components/admin-panel/user-support/customizationsOwned.vue b/website/client/src/components/admin-panel/user-support/customizationsOwned.vue
index 136baf2afb..251c6bc109 100644
--- a/website/client/src/components/admin-panel/user-support/customizationsOwned.vue
+++ b/website/client/src/components/admin-panel/user-support/customizationsOwned.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="accordion-group">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
-      Customizations
+    Customizations
     </h3>
-    <div v-if="expand">
+  </div>
+    <div v-if="expand" class="card-body">
       <div
         v-for="itemType in itemTypes"
         :key="itemType"
diff --git a/website/client/src/components/admin-panel/user-support/itemsOwned.vue b/website/client/src/components/admin-panel/user-support/itemsOwned.vue
index c637596766..0212a0f059 100644
--- a/website/client/src/components/admin-panel/user-support/itemsOwned.vue
+++ b/website/client/src/components/admin-panel/user-support/itemsOwned.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="accordion-group">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
-      Items
+    Items
     </h3>
-    <div v-if="expand">
+  </div>
+    <div v-if="expand" class="card-body">
       <div>
         The sections below display each item's key (bolded if the player has ever owned it),
         followed by the item's English name.
diff --git a/website/client/src/components/admin-panel/user-support/partyAndQuest.vue b/website/client/src/components/admin-panel/user-support/partyAndQuest.vue
index a00aa6bec8..a5cfd4e4bb 100644
--- a/website/client/src/components/admin-panel/user-support/partyAndQuest.vue
+++ b/website/client/src/components/admin-panel/user-support/partyAndQuest.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="accordion-group">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
@@ -10,7 +11,8 @@
         v-if="errorsOrWarningsExist"
       >- ERRORS / WARNINGS EXIST</span>
     </h3>
-    <div v-if="expand">
+    </div>
+    <div v-if="expand" class="card-body">
       <div
         v-if="errorsOrWarningsExist"
         class="errorMessage"
diff --git a/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue b/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
index 9de6873469..424d2efd02 100644
--- a/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
+++ b/website/client/src/components/admin-panel/user-support/privilegesAndGems.vue
@@ -1,68 +1,88 @@
 <template>
-  <div class="accordion-group">
+      <form @submit.prevent="saveHero({hero, msg: 'Privileges or Gems or Moderation Notes'})">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
-      Privileges, Gem Balance
+    Priviliges, Gem Balance
     </h3>
-    <div v-if="expand">
+  </div>
+    <div v-if="expand" class="card-body">
       <p
         v-if="errorsOrWarningsExist"
         class="errorMessage"
       >
         Player has had privileges removed or has moderation notes.
       </p>
-
-      <form @submit.prevent="saveHero({hero, msg: 'Privileges or Gems or Moderation Notes'})">
-        <div class="checkbox">
-          <label>
-            <input
+        <div class="form-group row">
+          <div class="col-sm-9 offset-sm-3">
+            <div class="form-check">
+              <input
               v-if="hero.flags"
               v-model="hero.flags.chatShadowMuted"
+              class="form-check-input"
               type="checkbox"
-            > Shadow Mute
-          </label>
+            >
+              <label class="form-check-label">
+                Shadow Mute
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="checkbox">
-          <label>
-            <input
+        <div class="form-group row">
+          <div class="col-sm-9 offset-sm-3">
+            <div class="form-check">
+              <input
               v-if="hero.flags"
               v-model="hero.flags.chatRevoked"
+              class="form-check-input"
               type="checkbox"
-            > Mute (Revoke Chat Privileges)
-          </label>
+            >
+              <label class="form-check-label">
+                Mute (Revoke Chat Privileges)
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="checkbox">
-          <label>
-            <input
+        <div class="form-group row">
+          <div class="col-sm-9 offset-sm-3">
+            <div class="form-check">
+              <input
               v-model="hero.auth.blocked"
+              class="form-check-input"
               type="checkbox"
-            > Ban / Block
-          </label>
+            >
+              <label class="form-check-label">
+                Ban / Block
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Balance
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.balance"
               class="form-control balanceField"
               type="number"
               step="0.25"
             >
-          </label>
-          <span>
             <small>
               Balance is in USD, not in Gems.
               E.g., if this number is 1, it means 4 Gems.
               Arrows change Balance by 0.25 (i.e., 1 Gem per click).
               Do not use when awarding tiers; tier gems are automatic.
             </small>
-          </span>
+          </div>
         </div>
-        <div class="form-group">
-          <label>Moderation Notes</label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Moderation Notes</label>
+          <div class="col-sm-9">
           <textarea
             v-model="hero.secret.text"
             class="form-control"
@@ -73,15 +93,17 @@
             v-markdown="hero.secret.text"
             class="markdownPreview"
           ></div>
+          </div>
         </div>
+    </div>
+    <div class="card-footer" v-if="expand">
         <input
           type="submit"
           value="Save"
-          class="btn btn-primary"
-        >
-      </form>
-    </div>
+          class="btn btn-primary mt-1"
+        ></div>
   </div>
+</form>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
index 1d58847a15..f18e57cc30 100644
--- a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
+++ b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
@@ -1,14 +1,16 @@
 <template>
-  <div class="accordion-group">
+      <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
-      Subscription, Monthly Perks
+    Subscription, Monthly Perks
     </h3>
-    <div v-if="expand">
-      <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
+  </div>
+    <div v-if="expand" class="card-body">
         <div v-if="hero.purchased.plan.paymentMethod">
           Payment method:
           <strong>{{ hero.purchased.plan.paymentMethod }}</strong>
@@ -23,46 +25,68 @@
         </div>
         <div
           v-if="hero.purchased.plan.dateCreated"
-          class="form-inline"
+          class="form-group row"
         >
           <label>
             Creation date:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.dateCreated"
               class="form-control"
               type="text"
-            > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
-          </label>
+            >
+            <div class="input-group-append">
+              <strong>
+                {{ dateFormat(hero.purchased.plan.dateCreated) }}
+              </strong>
+            </div>
+            </div>
         </div>
         <div
           v-if="hero.purchased.plan.dateCurrentTypeCreated"
-          class="form-inline"
+          class="form-group row"
         >
-          <label>
+          <label class="col-sm-3 col-form-label">
             Start date for current subscription type:
+          </label>
+          <div class="col-sm-9 input-group">
             <input
               v-model="hero.purchased.plan.dateCurrentTypeCreated"
               class="form-control"
               type="text"
             >
-          </label>
-          <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}</strong>
+            <div class="input-group-append">
+              <strong>
+                {{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}
+              </strong>
+            </div>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Termination date:
-            <div>
+          </label>
+            <div class="col-sm-9">
+              <div class="input-group">
               <input
                 v-model="hero.purchased.plan.dateTerminated"
                 class="form-control"
                 type="text"
-              > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateTerminated) }}</strong>
+              >
+            <div class="input-group-append">
+              <strong class="input-group-text">
+                {{ dateFormat(hero.purchased.plan.dateTerminated) }}
+              </strong>
+            </div>
+          </div>
             </div>
-          </label>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Consecutive months:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.count"
               class="form-control"
@@ -70,11 +94,13 @@
               min="0"
               step="1"
             >
-          </label>
+            </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Perk offset months:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.offset"
               class="form-control"
@@ -82,11 +108,14 @@
               min="0"
               step="1"
             >
-          </label>
+            </div>
         </div>
-        <div class="form-inline">
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
           Perk month count:
-          <input
+          </label>
+          <div class="col-sm-9">
+            <input
             v-model="hero.purchased.plan.perkMonthCount"
             class="form-control"
             type="number"
@@ -94,26 +123,33 @@
             max="2"
             step="1"
           >
+          </div>
         </div>
-        <div>
-          Next Mystic Hourglass:
-          <strong>{{ nextHourglassDate }}</strong>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Next Mystic Hourglass:
+            </label>
+          <strong class="col-sm-9 col-form-label">{{ nextHourglassDate }}</strong>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Mystic Hourglasses:
-            <input
+          </label>
+            <div class="col-sm-9">
+              <input
               v-model="hero.purchased.plan.consecutive.trinkets"
               class="form-control"
               type="number"
               min="0"
               step="1"
             >
-          </label>
+            </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Gem cap increase:
+          </label>
+            <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.gemCapExtra"
               class="form-control"
@@ -122,16 +158,22 @@
               max="25"
               step="5"
             >
+            </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Total Gem cap:
           </label>
+          <strong class="col-sm-9 col-form-label">
+            {{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}
+          </strong>
         </div>
-        <div>
-          Total Gem cap:
-          <strong>{{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}</strong>
-        </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Gems bought this month:
-            <input
+          </label>
+            <div class="col-sm-9">
+              <input
               v-model="hero.purchased.plan.gemsBought"
               class="form-control"
               type="number"
@@ -139,7 +181,7 @@
               :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
               step="1"
             >
-          </label>
+            </div>
         </div>
         <div
           v-if="hero.purchased.plan.extraMonths > 0"
@@ -147,8 +189,11 @@
           Additional credit (applied upon cancellation):
           <strong>{{ hero.purchased.plan.extraMonths }}</strong>
         </div>
-        <div>
-          Mystery Items:
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Mystery Items:
+          </label>
+          <div class="col-sm-9 col-form-label">
           <span
             v-if="hero.purchased.plan.mysteryItems.length > 0"
           >
@@ -165,17 +210,31 @@
           <span v-else>
             <strong>None</strong>
           </span>
+          </div>
         </div>
+    </div>
+        <div class="card-footer" v-if="expand">
         <input
           type="submit"
           value="Save"
           class="btn btn-primary mt-1"
-        >
-      </form>
-    </div>
+        ></div>
   </div>
+</form>
 </template>
 
+<style scoped>
+.input-group-append {
+    width:auto;
+
+    .input-group-text {
+
+    border-bottom-right-radius: 2px;
+    border-top-right-radius: 2px;
+    }
+  }
+</style>
+
 <script>
 import moment from 'moment';
 import { getPlanContext } from '@/../../common/script/cron';
diff --git a/website/client/src/components/admin-panel/user-support/transactions.vue b/website/client/src/components/admin-panel/user-support/transactions.vue
index 8c4704a247..8aedb42c27 100644
--- a/website/client/src/components/admin-panel/user-support/transactions.vue
+++ b/website/client/src/components/admin-panel/user-support/transactions.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="accordion-group">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="toggleTransactionsOpen"
     >
-      Transactions
+    Transactions
     </h3>
-    <div v-if="expand">
+  </div>
+    <div v-if="expand" class="card-body">
       <purchase-history-table
         :gem-transactions="gemTransactions"
         :hourglass-transactions="hourglassTransactions"
diff --git a/website/client/src/components/admin-panel/user-support/userProfile.vue b/website/client/src/components/admin-panel/user-support/userProfile.vue
index adb100382e..8a97084cda 100644
--- a/website/client/src/components/admin-panel/user-support/userProfile.vue
+++ b/website/client/src/components/admin-panel/user-support/userProfile.vue
@@ -1,52 +1,58 @@
 <template>
-  <div class="accordion-group">
+      <form @submit.prevent="saveHero({hero, msg: 'Users Profile'})">
+  <div class="card mt-2">
+    <div class="card-header">
     <h3
-      class="expand-toggle"
+      class="mb-0 mt-0"
       :class="{'open': expand}"
       @click="expand = !expand"
     >
-      Users Profile
+    User Profile
     </h3>
-    <div v-if="expand">
-      <form @submit.prevent="saveHero({hero, msg: 'Users Profile'})">
-        <div class="form-group">
-          <label>Display name</label>
-          <input
+  </div>
+    <div v-if="expand" class="card-body">
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Display name</label>
+          <div class="col-sm-9">
+            <input
             v-model="hero.profile.name"
-            class="form-control textField"
+            class="form-control"
             type="text"
           >
+          </div>
         </div>
-        <div class="form-group">
-          <label>Photo URL</label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Photo URL</label>
+          <div class="col-sm-9">
           <input
             v-model="hero.profile.imageUrl"
-            class="form-control textField"
+            class="form-control"
             type="text"
-          >
+          ></div>
         </div>
-        <div class="form-group">
-          <label>About</label>
-          <div class="row about-row">
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">About</label>
+          <div class="col-sm-9">
             <textarea
               v-model="hero.profile.blurb"
-              class="form-control col"
+              class="form-control"
               rows="10"
             ></textarea>
             <div
               v-markdown="hero.profile.blurb"
-              class="markdownPreview col"
+              class="markdownPreview"
             ></div>
           </div>
         </div>
+    </div>
+        <div class="card-footer" v-if="expand">
         <input
           type="submit"
           value="Save"
-          class="btn btn-primary"
-        >
-      </form>
-    </div>
+          class="btn btn-primary mt-1"
+        ></div>
   </div>
+</form>
 </template>
 
 <style lang="scss" scoped>
diff --git a/website/server/controllers/api-v3/hall.js b/website/server/controllers/api-v3/hall.js
index bf0eeb9097..c2580eefba 100644
--- a/website/server/controllers/api-v3/hall.js
+++ b/website/server/controllers/api-v3/hall.js
@@ -389,12 +389,17 @@ api.updateHero = {
       hero.markModified('items');
     }
 
-    if (updateData.auth && updateData.auth.blocked === true) {
-      hero.auth.blocked = updateData.auth.blocked;
-      hero.preferences.sleep = true; // when blocking, have them rest at an inn to prevent damage
-    }
-    if (updateData.auth && updateData.auth.blocked === false) {
-      hero.auth.blocked = false;
+    if (updateData.auth) {
+      if (updateData.auth.blocked === true) {
+        hero.auth.blocked = updateData.auth.blocked;
+        hero.preferences.sleep = true; // when blocking, have them rest at an inn to prevent damage
+      } else if (updateData.auth.blocked === false) {
+        hero.auth.blocked = false;
+      }
+
+      if (updateData.auth.local && updateData.auth.local.email) {
+        hero.auth.local.email = updateData.auth.local.email;
+      }
     }
 
     if (updateData.flags && _.isBoolean(updateData.flags.chatRevoked)) {