tag edit

src/components/confirm_modal/text_confirm.js

@@ -0,0 +1,41 @@
+import ConfirmModal from './confirm_modal.vue'
+//import Select from 'src/components/select/select.vue'
+
+export default {
+  props: {
+    title: {
+      type: String
+    },
+    message: {
+      type: String
+    },
+    cancelText: {
+      type: String
+    },
+    confirmText: {
+      type: String
+    }
+  },
+  emits: ['hide', 'show', 'action'],
+  data: () => ({
+    showing: false,
+    text: ""
+  }),
+  components: {
+    ConfirmModal
+  },
+  methods: {
+    show () {
+      this.showing = true
+      this.$emit('show')
+    },
+    hide () {
+      this.showing = false
+      this.$emit('hide')
+    },
+    doWithText () {
+      this.$emit('action', this.text)
+      this.hide()
+    }
+  }
+}

src/components/confirm_modal/text_confirm.vue

@@ -0,0 +1,27 @@
+<template>
+  <ConfirmModal
+    v-if="showing"
+    :title="title"
+    :cancel-text="cancelText"
+    :confirm-text="confirmText"
+    @accepted="doWithText"
+    @cancelled="hide"
+  >
+    <template #default>
+      <span v-text="message" />
+      <input
+        v-model="text"
+        class="input string-input filter-input"
+      >
+    </template>
+  </ConfirmModal>
+</template>
+
+<script src="./text_confirm.js" />
+
+<style lang="scss">
+.expiry-amount {
+  width: 4em;
+  text-align: right;
+}
+</style>

src/components/settings_modal/admin_tabs/admin_card.js

@@ -6,6 +6,7 @@ import Modal from 'src/components/modal/modal.vue'
 import Popover from 'src/components/popover/popover.vue'
 import GenericConfirm from 'src/components/confirm_modal/generic_confirm.vue'
 import Select from 'src/components/select/select.vue'
+import TextConfirm from 'src/components/confirm_modal/text_confirm.vue'
 
 const AdminCard = {
   props: {
@@ -133,7 +134,8 @@ const AdminCard = {
     Modal,
     Popover,
     GenericConfirm,
-    Select
+    Select,
+    TextConfirm
   },
   methods: {
     /**
@@ -217,6 +219,22 @@ const AdminCard = {
         this.justDeleted = true
       }
     },
+    /**
+     * @param {string} text name of tag to be added to user
+     */
+    addUserTag (text) {
+      const u = this.$store.getters.findUser(this.userDetails.id)
+      this.$store.dispatch('adminTagUser', { user: u, tag: text })
+        .then(() => this.$store.dispatch('fetchUser', this.userDetails.id))
+    },
+    /**
+     * @param {string} text name of tag to be removed from user
+     */
+    removeUserTag (text) {
+      const u = this.$store.getters.findUser(this.userDetails.id)
+      this.$store.dispatch('adminUntagUser', { user: u, tag: text })
+        .then(() => this.$store.dispatch('fetchUser', this.userDetails.id))
+    },
     /**
      * @param {object} store
      * @param {object} opts

src/components/settings_modal/admin_tabs/admin_card.vue

@@ -1,6 +1,10 @@
 <template>
   <div v-if="!isLoaded">
-    {{ $t('admin_dash.users.loading_user') }}
+    <FAIcon
+      icon="circle-notch"
+      spin
+      size="lg"
+    />
   </div>
   <div v-else>
     <div class="inline-layout">
@@ -9,38 +13,38 @@
         v-if="isAdmin"
         class="alert neutral user-role"
       >
-        {{ $t('admin_dash.users.indicator_admin') }}
+        {{ $t('admin_dash.users.indicator.admin') }}
       </label>
       <label
         v-if="isModerator"
         class="alert neutral user-role"
       >
-        {{ $t('admin_dash.users.indicator_moderator') }}
+        {{ $t('admin_dash.users.indicator.moderator') }}
       </label>
       <label
         v-if="isActivated"
         class="alert info user-role"
       >
-        {{ $t('admin_dash.users.indicator_active') }}
+        {{ $t('admin_dash.users.indicator.active') }}
       </label>
       <label
         v-if="!isActivated"
         class="alert error user-role"
       >
-        {{ $t('admin_dash.users.indicator_deactivated') }}
+        {{ $t('admin_dash.users.indicator.deactivated') }}
       </label>
       <label
         v-if="isConfirmed"
         class="alert neutral user-role"
       >
-        {{ $t('admin_dash.users.indicator_confirmed') }}
+        {{ $t('admin_dash.users.indicator.confirmed') }}
       </label>
       <button
         class="button button-default btn"
         type="button"
         @click="detailsExpanded = true"
       >
-        {{ $t('admin_dash.users.title_details') }}
+        {{ $t('admin_dash.users.details.button') }}
       </button>
       <Popover
         ref="dropdownuser"
@@ -51,7 +55,7 @@
           <button
             class="button button-default btn"
           >
-            {{ $t('admin_dash.users.title_actions') }}
+            {{ $t('admin_dash.users.actions.title') }}
           </button>
         </template>
         <template #content>
@@ -230,6 +234,9 @@
             class="panel-body"
             style="overflow-y: auto;"
           >
+            <h2 class="title">
+              {{ $t('admin_dash.users.details.overview') }}
+            </h2>
             <ul
               class="setting-list"
               style="columns: 2;"
@@ -240,9 +247,6 @@
               <li>
                 {{ $t('admin_dash.users.details.actor_type') }}
               </li>
-              <li>
-                {{ $t('admin_dash.users.details.tags') }}
-              </li>
               <li>
                 {{ $t('admin_dash.users.details.roles') }}
               </li>
@@ -258,9 +262,6 @@
               <li>
                 {{ $t('admin_dash.users.details.actor_types.' + user.actor_type.toLowerCase()) }}
               </li>
-              <li>
-                {{ user.tags }}
-              </li>
               <li>
                 <span v-if="user.rights.admin === true"> {{ $t('admin_dash.users.details.admin') }} </span>
                 <span v-if="user.rights.admin === true && user.rights.moderator === true"> ,&nbsp; </span>
@@ -275,6 +276,36 @@
                 <span v-else> {{ $t('admin_dash.users.details.inactive') }} </span>
               </li>
             </ul>
+            <h2 class="title">
+              {{ $t('admin_dash.users.details.tags') }}
+            </h2>
+            <ul class="setting-list">
+              <li
+                v-for="tag in user.tags"
+                :key="tag"
+              >
+                {{ tag }}
+                <button
+                  class="button button-default btn"
+                  @click="removeUserTag(tag)"
+                >
+                  <FAIcon
+                    icon="minus"
+                    size="lg"
+                  />
+                </button>
+              </li>
+            </ul>
+            <button
+              class="button button-default btn"
+              @click="$refs.addTextBox.show()"
+            >
+              {{ $t('admin_dash.users.tags.add_new') }}
+              <FAIcon
+                icon="plus"
+                size="lg"
+              />
+            </button>
             <PageList
               ref="timelineList"
               :refresh="true"
@@ -317,7 +348,7 @@
                     <button
                       class="button button-default btn"
                     >
-                      {{ $t('admin_dash.users.actions.button.title') }}
+                      {{ $t('admin_dash.users.actions.title') }}
                     </button>
                   </template>
                   <p> wrap </p>
@@ -459,6 +490,14 @@
     :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
     @action="userActionConfirmed('adminDisableMFA')"
   />
+  <TextConfirm
+    ref="addTextBox"
+    style="z-index: 10001;"
+    :title="$t('admin_dash.users.tags.new_title')"
+    :cancel-text="$t('admin_dash.users.tags.no')"
+    :confirm-text="$t('admin_dash.users.tags.yes')"
+    @action="addUserTag"
+  />
 </template>
 
 <script src="./admin_card.js"></script>

src/components/settings_modal/admin_tabs/users_tab.vue

@@ -3,22 +3,22 @@
     <div
       class="setting-item"
     >
-      <h2> {{ $t('admin_dash.users.title_users') }} </h2>
+      <h2> {{ $t('admin_dash.users.title') }} </h2>
       <ul class="setting-list">
         <li>
-          <label class="query-label"> {{ $t('admin_dash.users.label_query') }} </label>
+          <label class="query-label"> {{ $t('admin_dash.users.labels.query') }} </label>
           <input
             v-model="filtersQuery"
             class="input string-input filter-input"
             @input="reset()"
           >
-          <label class="query-label"> {{ $t('admin_dash.users.label_name') }} </label>
+          <label class="query-label"> {{ $t('admin_dash.users.labels.name') }} </label>
           <input
             v-model="filtersName"
             class="input string-input filter-input"
             @input="reset()"
           >
-          <label class="query-label"> {{ $t('admin_dash.users.label_email') }} </label>
+          <label class="query-label"> {{ $t('admin_dash.users.labels.email') }} </label>
           <input
             v-model="filtersEmail"
             class="input string-input filter-input"
@@ -26,7 +26,7 @@
           >
         </li>
         <li>
-          <label class="query-label"> {{ $t('admin_dash.users.label_origin') }} </label>
+          <label class="query-label"> {{ $t('admin_dash.users.labels.origin') }} </label>
           <Select
             v-model="filtersOrigin"
             @update:model-value="reset"
@@ -34,20 +34,20 @@
             <option
               value="all"
             >
-              {{ $t('admin_dash.users.all') }}
+              {{ $t('admin_dash.users.options.all') }}
             </option>
             <option
               value="local"
             >
-              {{ $t('admin_dash.users.only_local') }}
+              {{ $t('admin_dash.users.options.only_local') }}
             </option>
             <option
               value="external"
             >
-              {{ $t('admin_dash.users.only_external') }}
+              {{ $t('admin_dash.users.options.only_external') }}
             </option>
           </Select>
-          <label class="query-label"> {{ $t('admin_dash.users.label_activity') }} </label>
+          <label class="query-label"> {{ $t('admin_dash.users.labels.activity') }} </label>
           <Select
             v-model="filtersActivity"
             @update:model-value="reset"
@@ -55,20 +55,20 @@
             <option
               value="all"
             >
-              {{ $t('admin_dash.users.all') }}
+              {{ $t('admin_dash.users.options.all') }}
             </option>
             <option
               value="active"
             >
-              {{ $t('admin_dash.users.only_active') }}
+              {{ $t('admin_dash.users.options.only_active') }}
             </option>
             <option
               value="deactivated"
             >
-              {{ $t('admin_dash.users.only_deactivated') }}
+              {{ $t('admin_dash.users.options.only_deactivated') }}
             </option>
           </Select>
-          <label class="query-label"> {{ $t('admin_dash.users.label_privileges') }} </label>
+          <label class="query-label"> {{ $t('admin_dash.users.labels.privileges') }} </label>
           <Select
             v-model="filtersPrivileges"
             @update:model-value="reset"
@@ -76,22 +76,22 @@
             <option
               value="all"
             >
-              {{ $t('admin_dash.users.all') }}
+              {{ $t('admin_dash.users.options.all') }}
             </option>
             <option
               value="admin"
             >
-              {{ $t('admin_dash.users.only_administrators') }}
+              {{ $t('admin_dash.users.options.only_admins') }}
             </option>
             <option
               value="modsnadmins"
             >
-              {{ $t('admin_dash.users.all_privileged') }}
+              {{ $t('admin_dash.users.options.only_privileged') }}
             </option>
             <option
               value="moderator"
             >
-              {{ $t('admin_dash.users.only_moderators') }}
+              {{ $t('admin_dash.users.options.only_moderators') }}
             </option>
           </Select>
         </li>
@@ -100,13 +100,13 @@
             class="query-label"
             @update:model-value="v => {filtersNeedApproval = v; reset();}"
           >
-            {{ $t('admin_dash.users.only_unapproved') }}
+            {{ $t('admin_dash.users.options.only_unapproved') }}
           </Checkbox>
           <Checkbox
             class="query-label"
             @update:model-value="v => {filtersUncomfirmed = v; reset();}"
           >
-            {{ $t('admin_dash.users.only_unconfirmed') }}
+            {{ $t('admin_dash.users.options.only_unconfirmed') }}
           </Checkbox>
         </li>
       </ul>
@@ -128,7 +128,7 @@
               <button
                 class="button button-default btn"
               >
-                {{ $t('admin_dash.users.bulk_actions.title') }}
+                {{ $t('admin_dash.users.actions.title') }}
               </button>
             </template>
             <template #content>
@@ -138,7 +138,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmActivate')"
                   >
-                    {{ $t('admin_dash.users.activate') }}
+                    {{ $t('admin_dash.users.actions.activate') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -146,7 +146,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmDeactivate')"
                   >
-                    {{ $t('admin_dash.users.deactivate') }}
+                    {{ $t('admin_dash.users.actions.deactivate') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -154,7 +154,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmDelete')"
                   >
-                    {{ $t('admin_dash.users.delete') }}
+                    {{ $t('admin_dash.users.actions.delete_user') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -162,7 +162,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmGrantAdmin')"
                   >
-                    {{ $t('admin_dash.users.grant_admin') }}
+                    {{ $t('admin_dash.users.actions.grant_admin') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -170,7 +170,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmRevokeAdmin')"
                   >
-                    {{ $t('admin_dash.users.revoke_admin') }}
+                    {{ $t('admin_dash.users.actions.revoke_admin') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -178,7 +178,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmGrantModerator')"
                   >
-                    {{ $t('admin_dash.users.grant_moderator') }}
+                    {{ $t('admin_dash.users.actions.grant_moderator') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -186,7 +186,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmRevokeModerator')"
                   >
-                    {{ $t('admin_dash.users.revoke_moderator') }}
+                    {{ $t('admin_dash.users.actions.revoke_moderator') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -194,7 +194,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmApprove')"
                   >
-                    {{ $t('admin_dash.users.approve') }}
+                    {{ $t('admin_dash.users.actions.approve') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -202,7 +202,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmConfirm')"
                   >
-                    {{ $t('admin_dash.users.confirm_user') }}
+                    {{ $t('admin_dash.users.actions.confirm') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -210,7 +210,7 @@
                     class="main-button"
                     @click="confirmSelection('confirmResendEmail')"
                   >
-                    {{ $t('admin_dash.users.resend_confirmation_email') }}
+                    {{ $t('admin_dash.users.actions.resend_confirmation_email') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
@@ -218,15 +218,15 @@
                     class="main-button"
                     @click="confirmSelection('confirmRequirePasswordChange')"
                   >
-                    {{ $t('admin_dash.users.require_password_change') }}
+                    {{ $t('admin_dash.users.actions.require_password_change') }}
                   </button>
                 </div>
                 <div class="menu-item dropdown-item">
                   <button
                     class="main-button"
-                    @click="confirmSelection('adminDisableMFA')"
+                    @click="confirmSelection('confirmDisableMFA')"
                   >
-                    {{ $t('admin_dash.users.disable_mfa') }}
+                    {{ $t('admin_dash.users.actions.disable_mfa') }}
                   </button>
                 </div>
               </div>
@@ -246,87 +246,98 @@
     </div>
     <GenericConfirm
       ref="confirmActivate"
-      :title="$t('admin_dash.users.bulk_actions.activate')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.activate')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminActivateUser')"
     />
     <GenericConfirm
       ref="confirmDeactivate"
-      :title="$t('admin_dash.users.bulk_actions.deactivate')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.deactivate')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminDeactivateUser')"
     />
     <GenericConfirm
       ref="confirmDelete"
-      :title="$t('admin_dash.users.bulk_actions.delete')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.delete_user')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminDeleteUser')"
     />
     <GenericConfirm
       ref="confirmGrantAdmin"
-      :title="$t('admin_dash.users.bulk_actions.grant_admin')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.grant_admin')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminAddUserToAdminGroup')"
     />
     <GenericConfirm
       ref="confirmRevokeAdmin"
-      :title="$t('admin_dash.users.bulk_actions.revoke_admin')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.revoke_admin')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminRemoveUserFromAdminGroup')"
     />
     <GenericConfirm
       ref="confirmGrantModerator"
-      :title="$t('admin_dash.users.bulk_actions.grant_moderator')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.grant_moderator')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminAddUserToModeratorGroup')"
     />
     <GenericConfirm
       ref="confirmRevokeModerator"
-      :title="$t('admin_dash.users.bulk_actions.revoke_moderator')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.revoke_moderator')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminRemoveUserFromModeratorGroup')"
     />
     <GenericConfirm
       ref="confirmApprove"
-      :title="$t('admin_dash.users.bulk_actions.approve')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.approve')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminApproveUser')"
     />
     <GenericConfirm
       ref="confirmConfirm"
-      :title="$t('admin_dash.users.bulk_actions.confirm')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.confirm')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminConfirmUser')"
     />
     <GenericConfirm
       ref="confirmResendEmail"
-      :title="$t('admin_dash.users.bulk_actions.resend_confirmation_email')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.resend_confirmation_email')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminResendConfirmationEmail')"
     />
     <GenericConfirm
       ref="confirmRequirePasswordChange"
-      :title="$t('admin_dash.users.bulk_actions.require_password_change')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.confirm_multi.require_password_change')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminRequirePasswordChange')"
     />
     <GenericConfirm
       ref="confirmDisableMFA"
-      :title="$t('admin_dash.users.title_confirm')"
-      :message="$t('admin_dash.users.bulk_actions.disable_mfa')"
-      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
-      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      :title="$t('admin_dash.users.actions.confirm_multi.title')"
+      :message="$t('admin_dash.users.actions.disable_mfa')"
+      :cancel-text="$t('admin_dash.users.actions.no')"
+      :confirm-text="$t('admin_dash.users.actions.yes')"
       @action="selectionConfirmed('adminDisableMFA')"
     />
   </div>