fix checkbox alignment in admin panel

website/client/src/assets/scss/button.scss

@@ -175,16 +175,16 @@
 }
 
 .btn-warning {
-  background: $yellow-10;
+  background: $orange-10;
   border: 1px solid transparent;
 
   &:hover:not(:disabled):not(.disabled) {
-    background: $yellow-100;
+    background: $orange-100;
     border: 1px solid transparent;
   }
 
   &:focus {
-    background: $yellow-10;
+    background: $orange-10;
     border-color: $purple-400;
   }
 
@@ -194,7 +194,7 @@
   }
 
   &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
-    background: $yellow-10;
+    background: $orange-10;
     border: 1px solid transparent;
   }
 }

website/client/src/components/admin-panel/index.vue

@@ -17,16 +17,25 @@
             <button
               class="btn btn-primary"
               type="button"
-            @click="loadUser(userIdentifier)">Load User</button>
+              @click="loadUser(userIdentifier)"
+            >
+              Load User
+            </button>
             <button
               class="btn btn-secondary"
               type="button"
-            @click="searchUsers(userIdentifier)">Search</button>
+              @click="searchUsers(userIdentifier)"
+            >
+              Search
+            </button>
           </div>
         </div>
       </form>
 
-      <router-view @changeUserIdentifier="changeUserIdentifier" class="mt-3" />
+      <router-view
+        class="mt-3"
+        @changeUserIdentifier="changeUserIdentifier"
+      />
     </div>
   </div>
 </template>
@@ -75,7 +84,7 @@ export default {
     },
     async searchUsers (userIdentifier) {
       if (!userIdentifier || userIdentifier === '') {
-        loadUser();
+        this.loadUser();
         return;
       }
       this.$router.push({

website/client/src/components/admin-panel/search.vue

@@ -1,29 +1,38 @@
 <template>
   <div>
-    <div class="alert alert-warning" role="alert"
+    <div
       v-if="noUsersFound"
+      class="alert alert-warning"
+      role="alert"
     >
       Could not find any matching users.
     </div>
-    <div class="list-group"
+    <div
-      v-if="users.length > 0">
+      v-if="users.length > 0"
-      <a href="#" class="list-group-item list-group-item-action"
+      class="list-group"
+    >
+      <a
         v-for="user in users"
         :key="user._id"
+        href="#"
+        class="list-group-item list-group-item-action"
         @click="loadUser(user._id)"
       >
         <div class="d-flex w-100 justify-content-between">
           <h5 class="mb-1">{{ user.profile.name }}</h5>
           <small>{{ user._id }}</small>
         </div>
-        <p class="mb-1"
+        <p
-        :class="{'font-weight-bold': matchValueToIdentifier(user.auth.local.username)}">
+          class="mb-1"
+          :class="{'font-weight-bold': matchValueToIdentifier(user.auth.local.username)}"
+        >
           @{{ user.auth.local.username }}</p>
         <p class="mb-0">
           <span
             v-for="email in userEmails(user)"
+            :key="email"
             :class="{'font-weigh-bold': matchValueToIdentifier(email)}"
-              :key="email">
+          >
             {{ email }}
           </span>
         </p>

website/client/src/components/admin-panel/user-support/achievements.vue

@@ -9,7 +9,10 @@
         Achievements
       </h3>
     </div>
-    <div v-if="expand" class="card-body">
+    <div
+      v-if="expand"
+      class="card-body"
+    >
       <ul>
         <li
           v-for="item in achievements"

website/client/src/components/admin-panel/user-support/avatarAndDrops.vue

@@ -9,7 +9,10 @@
         Current Avatar Appearance, Drop Count Today
       </h3>
     </div>
-    <div v-if="expand" class="card-body">
+    <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>

website/client/src/components/admin-panel/user-support/contributorDetails.vue

@@ -10,68 +10,31 @@
           Contributor Details
         </h3>
       </div>
-    <div v-if="expand" class="card-body">
+      <div
+        v-if="expand"
+        class="card-body"
+      >
         <div class="mb-4">
-          <h3 class="mt-0">Permissions</h3>
+          <h3 class="mt-0">
-          <div class="checkbox">
+            Permissions
-            <label>
+          </h3>
+          <div
+            v-for="permission in permissionList"
+            :key="permission.key"
+            class="col-sm-9 offset-sm-3"
+          >
+            <div class="custom-control custom-checkbox">
               <input
-                v-model="hero.permissions.fullAccess"
+                v-model="hero.permissions[permission.key]"
-                :disabled="!hasPermission(user, 'fullAccess')"
+                :disabled="!hasPermission(user, permission.key)"
+                class="custom-control-input"
                 type="checkbox"
               >
-              Full Admin Access (Allows access to everything. EVERYTHING)
+              <label class="custom-control-label">
+                {{ permission.name }}<br>
+                <small class="text-secondary">{{ permission.description }}</small>
               </label>
             </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.userSupport"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              User Support (Access this form, access purchase history)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.news"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              News poster (Bailey CMS)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.moderator"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Community Moderator (ban and mute users, access chat flags, manage social spaces)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.challengeAdmin"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Challenge Admin (can create official habitica challenges and admin all challenges)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.coupons"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Coupon Creator (can manage coupon codes)
-            </label>
           </div>
         </div>
         <div class="form-group row">
@@ -104,7 +67,6 @@
             <small>
               1-7 for normal contributors, 8 for moderators, 9 for staff.
               This determines which items, pets, mounts are available, and name-tag coloring.
-            Tiers 8 and 9 are automatically given admin status.
             </small>
           </div>
         </div>
@@ -116,7 +78,8 @@
               class="form-control"
               cols="5"
               rows="5"
-          ></textarea>
+            >
+              </textarea>
             <div
               v-markdown="hero.contributor.contributions"
               class="markdownPreview"
@@ -139,12 +102,16 @@
           </div>
         </div>
       </div>
-        <div class="card-footer" v-if="expand">
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
           class="btn btn-primary mt-1"
-        ></div>
+        >
+      </div>
     </div>
   </form>
 </template>
@@ -153,6 +120,7 @@
 .levelField {
   min-width: 10ch;
 }
+
 .textField {
   min-width: 50ch;
 }
@@ -165,6 +133,39 @@ import saveHero from '../mixins/saveHero';
 import { mapState } from '@/libs/store';
 import { userStateMixin } from '../../../mixins/userState';
 
+const permissionList = [
+  {
+    key: 'fullAccess',
+    name: 'Full Admin Access',
+    description: 'Allows access to everything. EVERYTHING',
+  },
+  {
+    key: 'userSupport',
+    name: 'User Support',
+    description: 'Access this form, access purchase history',
+  },
+  {
+    key: 'news',
+    name: 'News Poster',
+    description: 'Bailey CMS',
+  },
+  {
+    key: 'moderator',
+    name: 'Community Moderator',
+    description: 'Ban and mute users, access chat flags, manage social spaces',
+  },
+  {
+    key: 'challengeAdmin',
+    name: 'Challenge Admin',
+    description: 'Can create official habitica challenges and admin all challenges',
+  },
+  {
+    key: 'coupons',
+    name: 'Coupon Creator',
+    description: 'Can manage coupon codes',
+  },
+];
+
 function resetData (self) {
   self.expand = self.hero.contributor.level;
 }
@@ -193,6 +194,7 @@ export default {
   data () {
     return {
       expand: false,
+      permissionList,
     };
   },
   watch: {

website/client/src/components/admin-panel/user-support/cronAndAuth.vue

@@ -13,7 +13,10 @@
           >- ERRORS / WARNINGS EXIST</span>
         </h3>
       </div>
-    <div v-if="expand" class="card-body">
+      <div
+        v-if="expand"
+        class="card-body"
+      >
         <p
           v-if="errorsOrWarningsExist"
           class="errorMessage"
@@ -26,7 +29,10 @@
           <strong class="col-sm-9 col-form-label">
             {{ hero.auth.timestamps.created | formatDate }}</strong>
         </div>
-      <div class="form-group row" v-if="hero.flags.thirdPartyTools">
+        <div
+          v-if="hero.flags.thirdPartyTools"
+          class="form-group row"
+        >
           User has employed <strong>third party tools</strong>. Last known usage:
           <strong class="col-sm-9 col-form-label">
             {{ hero.flags.thirdPartyTools | formatDate }}</strong>
@@ -104,9 +110,10 @@
           <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-danger">
+              class="btn btn-danger"
+              @click="changeApiToken()"
+            >
               Change API Token
             </button>
             <div
@@ -162,12 +169,16 @@
           <pre>{{ hero.auth }}</pre>
         </div>
       </div>
-    <div class="card-footer" v-if="expand">
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
           class="btn btn-primary mt-1"
-        ></div>
+        >
+      </div>
     </div>
   </form>
 </template>

website/client/src/components/admin-panel/user-support/customizationsOwned.vue

@@ -9,7 +9,10 @@
         Customizations
       </h3>
     </div>
-    <div v-if="expand" class="card-body">
+    <div
+      v-if="expand"
+      class="card-body"
+    >
       <div
         v-for="itemType in itemTypes"
         :key="itemType"

website/client/src/components/admin-panel/user-support/itemsOwned.vue

@@ -9,7 +9,10 @@
         Items
       </h3>
     </div>
-    <div v-if="expand" class="card-body">
+    <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.

website/client/src/components/admin-panel/user-support/partyAndQuest.vue

@@ -12,7 +12,10 @@
         >- ERRORS / WARNINGS EXIST</span>
       </h3>
     </div>
-    <div v-if="expand" class="card-body">
+    <div
+      v-if="expand"
+      class="card-body"
+    >
       <div
         v-if="errorsOrWarningsExist"
         class="errorMessage"

website/client/src/components/admin-panel/user-support/privilegesAndGems.vue

@@ -10,38 +10,53 @@
           Priviliges, Gem Balance
         </h3>
       </div>
-    <div v-if="expand" class="card-body">
+      <div
+        v-if="expand"
+        class="card-body"
+      >
         <p
           v-if="errorsOrWarningsExist"
           class="errorMessage"
         >
           Player has had privileges removed or has moderation notes.
         </p>
-        <div class="form-group row">
+        <div
-          <div class="col-sm-9 offset-sm-3">
-            <div class="form-check">
-              <input
           v-if="hero.flags"
+          class="form-group row"
+        >
+          <div class="col-sm-9 offset-sm-3">
+            <div class="custom-control custom-checkbox">
+              <input
+                id="chatShadowMuted"
                 v-model="hero.flags.chatShadowMuted"
-              class="form-check-input"
+                class="custom-control-input"
                 type="checkbox"
               >
-              <label class="form-check-label">
+              <label
+                class="custom-control-label"
+                for="chatShadowMuted"
+              >
                 Shadow Mute
               </label>
             </div>
           </div>
         </div>
-        <div class="form-group row">
+        <div
-          <div class="col-sm-9 offset-sm-3">
-            <div class="form-check">
-              <input
           v-if="hero.flags"
+          class="form-group row"
+        >
+          <div class="col-sm-9 offset-sm-3">
+            <div class="custom-control custom-checkbox">
+              <input
+                id="chatRevoked"
                 v-model="hero.flags.chatRevoked"
-              class="form-check-input"
+                class="custom-control-input"
                 type="checkbox"
               >
-              <label class="form-check-label">
+              <label
+                class="custom-control-label"
+                for="chatRevoked"
+              >
                 Mute (Revoke Chat Privileges)
               </label>
             </div>
@@ -49,13 +64,17 @@
         </div>
         <div class="form-group row">
           <div class="col-sm-9 offset-sm-3">
-            <div class="form-check">
+            <div class="custom-control custom-checkbox">
               <input
+                id="blocked"
                 v-model="hero.auth.blocked"
-              class="form-check-input"
+                class="custom-control-input"
                 type="checkbox"
               >
-              <label class="form-check-label">
+              <label
+                class="custom-control-label"
+                for="blocked"
+              >
                 Ban / Block
               </label>
             </div>
@@ -96,12 +115,16 @@
           </div>
         </div>
       </div>
-    <div class="card-footer" v-if="expand">
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
           class="btn btn-primary mt-1"
-        ></div>
+        >
+      </div>
     </div>
   </form>
 </template>

website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue

@@ -2,11 +2,18 @@
   <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
     <div class="card mt-2">
       <div class="card-header">
-        <h3 class="mb-0 mt-0" :class="{ 'open': expand }" @click="expand = !expand">
+        <h3
+          class="mb-0 mt-0"
+          :class="{ 'open': expand }"
+          @click="expand = !expand"
+        >
           Subscription, Monthly Perks
         </h3>
       </div>
-      <div v-if="expand" class="card-body">
+      <div
+        v-if="expand"
+        class="card-body"
+      >
         <div v-if="hero.purchased.plan.paymentMethod">
           Payment method:
           <strong>{{ hero.purchased.plan.paymentMethod }}</strong>
@@ -19,13 +26,20 @@
           Group plan ID:
           <strong>{{ hero.purchased.plan.owner }}</strong>
         </div>
-        <div v-if="hero.purchased.plan.dateCreated" class="form-group row">
+        <div
+          v-if="hero.purchased.plan.dateCreated"
+          class="form-group row"
+        >
           <label class="col-sm-3 col-form-label">
             Creation date:
           </label>
           <div class="col-sm-9">
             <div class="input-group">
-              <input v-model="hero.purchased.plan.dateCreated" class="form-control" type="text">
+              <input
+                v-model="hero.purchased.plan.dateCreated"
+                class="form-control"
+                type="text"
+              >
               <div class="input-group-append">
                 <strong>
                   {{ dateFormat(hero.purchased.plan.dateCreated) }}
@@ -34,13 +48,20 @@
             </div>
           </div>
         </div>
-        <div v-if="hero.purchased.plan.dateCurrentTypeCreated" class="form-group row">
+        <div
+          v-if="hero.purchased.plan.dateCurrentTypeCreated"
+          class="form-group row"
+        >
           <label class="col-sm-3 col-form-label">
             Current sub start date:
           </label>
           <div class="col-sm-9">
             <div class="input-group">
-              <input v-model="hero.purchased.plan.dateCurrentTypeCreated" class="form-control" type="text">
+              <input
+                v-model="hero.purchased.plan.dateCurrentTypeCreated"
+                class="form-control"
+                type="text"
+              >
               <div class="input-group-append">
                 <strong>
                   {{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}
@@ -55,7 +76,11 @@
           </label>
           <div class="col-sm-9">
             <div class="input-group">
-              <input v-model="hero.purchased.plan.dateTerminated" class="form-control" type="text">
+              <input
+                v-model="hero.purchased.plan.dateTerminated"
+                class="form-control"
+                type="text"
+              >
               <div class="input-group-append">
                 <strong class="input-group-text">
                   {{ dateFormat(hero.purchased.plan.dateTerminated) }}
@@ -69,7 +94,13 @@
             Consecutive months:
           </label>
           <div class="col-sm-9">
-            <input v-model="hero.purchased.plan.consecutive.count" class="form-control" type="number" min="0" step="1">
+            <input
+              v-model="hero.purchased.plan.consecutive.count"
+              class="form-control"
+              type="number"
+              min="0"
+              step="1"
+            >
           </div>
         </div>
         <div class="form-group row">
@@ -77,7 +108,13 @@
             Perk offset months:
           </label>
           <div class="col-sm-9">
-            <input v-model="hero.purchased.plan.consecutive.offset" class="form-control" type="number" min="0" step="1">
+            <input
+              v-model="hero.purchased.plan.consecutive.offset"
+              class="form-control"
+              type="number"
+              min="0"
+              step="1"
+            >
           </div>
         </div>
         <div class="form-group row">
@@ -85,8 +122,14 @@
             Perk month count:
           </label>
           <div class="col-sm-9">
-            <input v-model="hero.purchased.plan.perkMonthCount" class="form-control" type="number" min="0" max="2"
+            <input
-              step="1">
+              v-model="hero.purchased.plan.perkMonthCount"
+              class="form-control"
+              type="number"
+              min="0"
+              max="2"
+              step="1"
+            >
           </div>
         </div>
         <div class="form-group row">
@@ -100,8 +143,13 @@
             Mystic Hourglasses:
           </label>
           <div class="col-sm-9">
-            <input v-model="hero.purchased.plan.consecutive.trinkets" class="form-control" type="number" min="0"
+            <input
-              step="1">
+              v-model="hero.purchased.plan.consecutive.trinkets"
+              class="form-control"
+              type="number"
+              min="0"
+              step="1"
+            >
           </div>
         </div>
         <div class="form-group row">
@@ -109,8 +157,14 @@
             Gem cap increase:
           </label>
           <div class="col-sm-9">
-            <input v-model="hero.purchased.plan.consecutive.gemCapExtra" class="form-control" type="number" min="0"
+            <input
-              max="25" step="5">
+              v-model="hero.purchased.plan.consecutive.gemCapExtra"
+              class="form-control"
+              type="number"
+              min="0"
+              max="25"
+              step="5"
+            >
           </div>
         </div>
         <div class="form-group row">
@@ -126,8 +180,14 @@
             Gems bought this month:
           </label>
           <div class="col-sm-9">
-            <input v-model="hero.purchased.plan.gemsBought" class="form-control" type="number" min="0"
+            <input
-              :max="hero.purchased.plan.consecutive.gemCapExtra + 25" step="1">
+              v-model="hero.purchased.plan.gemsBought"
+              class="form-control"
+              type="number"
+              min="0"
+              :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
+              step="1"
+            >
           </div>
         </div>
         <div v-if="hero.purchased.plan.extraMonths > 0">
@@ -140,7 +200,10 @@
           </label>
           <div class="col-sm-9 col-form-label">
             <span v-if="hero.purchased.plan.mysteryItems.length > 0">
-              <span v-for="(item, index) in hero.purchased.plan.mysteryItems" :key="index">
+              <span
+                v-for="(item, index) in hero.purchased.plan.mysteryItems"
+                :key="index"
+              >
                 <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
                   {{ item }},
                 </strong>
@@ -153,8 +216,15 @@
           </div>
         </div>
       </div>
-      <div class="card-footer" v-if="expand">
+      <div
-        <input type="submit" value="Save" class="btn btn-primary mt-1">
+        v-if="expand"
+        class="card-footer"
+      >
+        <input
+          type="submit"
+          value="Save"
+          class="btn btn-primary mt-1"
+        >
       </div>
     </div>
   </form>

website/client/src/components/admin-panel/user-support/transactions.vue

@@ -9,7 +9,10 @@
         Transactions
       </h3>
     </div>
-    <div v-if="expand" class="card-body">
+    <div
+      v-if="expand"
+      class="card-body"
+    >
       <purchase-history-table
         :gem-transactions="gemTransactions"
         :hourglass-transactions="hourglassTransactions"

website/client/src/components/admin-panel/user-support/userProfile.vue

@@ -10,7 +10,10 @@
           User Profile
         </h3>
       </div>
-    <div v-if="expand" class="card-body">
+      <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">
@@ -28,7 +31,8 @@
               v-model="hero.profile.imageUrl"
               class="form-control"
               type="text"
-          ></div>
+            >
+          </div>
         </div>
         <div class="form-group row">
           <label class="col-sm-3 col-form-label">About</label>
@@ -45,12 +49,16 @@
           </div>
         </div>
       </div>
-        <div class="card-footer" v-if="expand">
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
           class="btn btn-primary mt-1"
-        ></div>
+        >
+      </div>
     </div>
   </form>
 </template>