bulk menu and some cleanup, not finished yet

2025-08-18 16:47:18 +02:00 · 2025-08-18 16:47:18 +02:00 · ec5dbe1792
commit ec5dbe1792
parent bab5e6ee63
11 changed files with 595 additions and 243 deletions
--- a/src/components/confirm_modal/generic_confirm.js
+++ b/src/components/confirm_modal/generic_confirm.js
@ -0,0 +1,36 @@
+import ConfirmModal from './confirm_modal.vue'
+//import Select from 'src/components/select/select.vue'
+
+export default {
+  props: {
+    callback: {
+      type: Function
+    },
+    title: {
+      type: String
+    },
+    cancelText: {
+      type: String
+    },
+    confirmText: {
+      type: String
+    }
+  },
+  emits: ['hide', 'show'],
+  data: () => ({
+    showing: false
+  }),
+  components: {
+    ConfirmModal
+  },
+  methods: {
+    show () {
+      this.showing = true
+      this.$emit('show')
+    },
+    hide () {
+      this.showing = false
+      this.$emit('hide')
+    }
+  }
+}
--- a/src/components/confirm_modal/generic_confirm.vue
+++ b/src/components/confirm_modal/generic_confirm.vue
@ -0,0 +1,19 @@
+<template>
+  <ConfirmModal
+    v-if="showing"
+    :title="title"
+    :cancel-text="cancelText"
+    :confirm-text="confirmText"
+    @accepted="callback"
+    @cancelled="hide"
+  />
+</template>
+
+<script src="./generic_confirm.js" />
+
+<style lang="scss">
+.expiry-amount {
+  width: 4em;
+  text-align: right;
+}
+</style>
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@ -8,8 +8,8 @@ const SelectableList = {
  },
  props: {
    boxOnly: {
-       type: Boolean,
-       default: false
+      type: Boolean,
+      default: false
    },
    items: {
      type: Array,
--- a/src/components/settings_modal/admin_tabs/admin_card.js
+++ b/src/components/settings_modal/admin_tabs/admin_card.js
@ -2,6 +2,7 @@ import BasicUserCard from '../../basic_user_card/basic_user_card.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import PageList from 'src/components/page_list/page_list.vue'
 import AdminStatusCard from 'src/components/settings_modal/admin_tabs/admin_status_card.vue'
+import Modal from 'src/components/modal/modal.vue'

 const AdminCard = {
  props: {
@ -80,6 +81,7 @@ const AdminCard = {
    Checkbox,
    PageList,
    AdminStatusCard,
+    Modal
  },
  methods: {
    toggleAdmin (v) {
--- a/src/components/settings_modal/admin_tabs/admin_card.vue
+++ b/src/components/settings_modal/admin_tabs/admin_card.vue
@ -4,19 +4,21 @@
      {{ $t('admin_dash.users.loading_user') }}
    </div>
    <div v-else>
-      <div v-if="userDetails.id !== $store.state.users.currentUser.id">
-        <BasicUserCard :user="user" />
-        <div v-if="!topLevelExpanded">
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="topLevelExpanded = true"
-          >
-            {{ $t('admin_dash.users.expand_user') }}
-          </button>
-        </div>
-        <div
-          v-else
+      <BasicUserCard :user="user" />
+      <div v-if="!topLevelExpanded">
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="topLevelExpanded = true"
+        >
+          {{ $t('admin_dash.users.expand_user') }}
+        </button>
+      </div>
+      <div
+        v-else
+      >
+        <Modal
+          @backdrop-clicked="() => { topLevelExpanded = false }"
        >
          <ul class="setting-list">
            <li>
@ -99,81 +101,81 @@
              </button>
            </li>
          </ul>
-        </div>
-        <div v-if="!timelineExpanded">
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="timelineExpanded = true"
-          >
-            {{ $t('admin_dash.users.expand_timeline') }}
-          </button>
-        </div>
-        <div
-          v-else
-          class="setting-item"
+        </Modal>
+      </div>
+      <div v-if="!timelineExpanded">
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="timelineExpanded = true"
        >
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="timelineExpanded = false"
-          >
-            {{ $t('admin_dash.users.collapse_timeline') }}
-          </button>
-          <PageList
-            ref="timelineList"
-            :refresh="true"
-            :get-key="i => i"
-            :box-only="true"
-            :page-size="20"
-            :single-page="true"
-            :fetch-page="(store, opts) => fetchStatuses(store, opts)"
-          >
-            <template #header>
-              <button
-                class="button button-default btn"
-                type="button"
-                @click="deleteSelection"
-              >
-                {{ $t('admin_dash.users.delete') }}
-              </button>
-            </template>
-            <template #item="{item}">
-              <AdminStatusCard :status-details="item" />
-            </template>
-            <template #empty>
-              <p> {{ $t('admin_dash.users.user_has_no_posts') }} </p>
-            </template>
-            <template #load>
-              <p> {{ $t('admin_dash.users.loading') }} </p>
-            </template>
-          </PageList>
-        </div>
-        <div v-if="!jsonExpanded">
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="jsonExpanded = true"
-          >
-            {{ $t('admin_dash.users.expand_raw_info') }}
-          </button>
-        </div>
-        <div 
-          v-else
-          class="setting-item"
+          {{ $t('admin_dash.users.expand_timeline') }}
+        </button>
+      </div>
+      <div
+        v-else
+        class="setting-item"
+      >
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="timelineExpanded = false"
        >
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="jsonExpanded = false"
-          >
-            {{ $t('admin_dash.users.collapse_raw_info') }}
-          </button>
-          <h2> {{ $t('admin_dash.users.title_database') }} </h2>
-          <pre> {{ JSON.stringify(user, null, 2) }} </pre>
-          <h2> {{ $t('admin_dash.users.title_details') }} </h2>
-          <pre> {{ JSON.stringify(user_details, null, 2) }} </pre>
-        </div>
+          {{ $t('admin_dash.users.collapse_timeline') }}
+        </button>
+        <PageList
+          ref="timelineList"
+          :refresh="true"
+          :get-key="i => i"
+          :box-only="true"
+          :page-size="20"
+          :single-page="true"
+          :fetch-page="(store, opts) => fetchStatuses(store, opts)"
+        >
+          <template #header>
+            <button
+              class="button button-default btn"
+              type="button"
+              @click="deleteSelection"
+            >
+              {{ $t('admin_dash.users.delete') }}
+            </button>
+          </template>
+          <template #item="{item}">
+            <AdminStatusCard :status-details="item" />
+          </template>
+          <template #empty>
+            <p> {{ $t('admin_dash.users.user_has_no_posts') }} </p>
+          </template>
+          <template #load>
+            <p> {{ $t('admin_dash.users.loading') }} </p>
+          </template>
+        </PageList>
+      </div>
+      <div v-if="!jsonExpanded">
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="jsonExpanded = true"
+        >
+          {{ $t('admin_dash.users.expand_raw_info') }}
+        </button>
+      </div>
+      <div 
+        v-else
+        class="setting-item"
+      >
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="jsonExpanded = false"
+        >
+          {{ $t('admin_dash.users.collapse_raw_info') }}
+        </button>
+        <h2> {{ $t('admin_dash.users.title_database') }} </h2>
+        <pre> {{ JSON.stringify(user, null, 2) }} </pre>
+        <h2> {{ $t('admin_dash.users.title_details') }} </h2>
+        <pre> {{ JSON.stringify(user_details, null, 2) }} </pre>
      </div>
    </div>
  </div>
--- a/src/components/settings_modal/admin_tabs/users_tab.js
+++ b/src/components/settings_modal/admin_tabs/users_tab.js
@ -5,6 +5,8 @@ import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import AdminCard from 'src/components/settings_modal/admin_tabs/admin_card.vue'
 import PageList from 'src/components/page_list/page_list.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import Popover from 'src/components/popover/popover.vue'
+import GenericConfirm from 'src/components/confirm_modal/generic_confirm.vue'

 const UsersTab = {
  provide () {
@ -18,7 +20,7 @@ const UsersTab = {
      init: false,
      filtersOrigin: 'local',
      filtersActivity: 'all',
-      filtersPermission: 'all',
+      filtersPrivileges: 'all',
      filtersNeedApproval: false,
      filtersUnconfirmed: false,
      filtersQuery: '',
@ -30,10 +32,10 @@ const UsersTab = {
  },
  computed: {
    filtersIsAdmin () {
-      return this.filtersPermission === 'admin' || this.filtersPermission === 'modsnadmins'
+      return this.filtersPrivileges === 'admin' || this.filtersPrivileges === 'modsnadmins'
    },
    filtersIsModerator () {
-      return this.filtersPermission === 'moderator' || this.filtersPermission === 'modsnadmins'
+      return this.filtersPrivileges === 'moderator' || this.filtersPrivileges === 'modsnadmins'
    },
    filtersActive () {
      return this.filtersActivity === 'active'
@ -56,6 +58,8 @@ const UsersTab = {
    ProgressButton, 
    AdminCard,
    TabSwitcher,
+    Popover,
+    GenericConfirm
  },
  methods: {
    fetchPage (store, opts) {
@ -70,28 +74,134 @@ const UsersTab = {
        needApproval: this.filtersNeedApproval,
        unconfirmed: this.filtersUnconfirmeUnconfirmed
      }
-      const users = store.dispatch('fetchAdminUsers', { ...opts, ...{
+      const nopts = { ...opts, ...{
        query: this.filtersQuery,
        filters,
        name: this.filtersName,
        email: this.filtersEmail
-      }})
+      }}
+      const users = store.dispatch('fetchAdminUsers', nopts)
      return users
    },
    reset () {
      this.$refs.userList.reset()
    },
    activateSelection () {
+      this.$refs.confirmActivate.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    activateSelectionConfirmed () {
      const s = this.$refs.userList.getSelected()
      s.forEach(u => this.$store.dispatch('adminActivateUser', this.$store.getters.findUser(u.id)))
+      this.reset()
    },
    deactivateSelection () {
+      this.$refs.confirmDeactivate.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    deactivateSelectionConfirmed () {
      const s = this.$refs.userList.getSelected()
-      s.forEach(u => this.$store.dispatch('adminDeactivateUser', this.$store.getters.findUser(u.id)))
+      s.forEach(u => {
+        // avoid deactivating yourself
+        if (u.id !== this.$store.state.users.currentUser.id) {
+          this.$store.dispatch('adminDeactivateUser', this.$store.getters.findUser(u.id))
+        }
+      })
+      this.reset()
    },
    deleteSelection () {
+      this.$refs.confirmDelete.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    deleteSelectionConfirmed () {
      const s = this.$refs.userList.getSelected()
-      s.forEach(u => this.$store.dispatch('adminDeleteUser', this.$store.getters.findUser(u.id)))
+      s.forEach(u => {
+        // avoid deleting yourself
+        if (u.id !== this.$store.state.users.currentUser.id) {
+          this.$store.dispatch('adminDeleteUser', this.$store.getters.findUser(u.id))
+        }
+      })
+      this.reset()
+    },
+    grantAdminSelection () {
+      this.$refs.confirmGrantAdmin.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    grantAdminSelectionConfirmed () {
+      const s = this.$refs.userList.getSelected()
+      s.forEach(u => this.$store.dispatch('adminAddUserToAdminGroup', this.$store.getters.findUser(u.id)))
+      this.reset()
+    },
+    revokeAdminSelection () {
+      this.$refs.confirmRevokeAdminSelection.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    revokeAdminSelectionConfirmed () {
+      const s = this.$refs.userList.getSelected()
+      s.forEach(u => {
+        // avoid shooting yourself in the foot
+        if (u.id !== this.$store.state.users.currentUser.id) {
+          this.$store.dispatch('adminRemoveUserToAdminGroup', this.$store.getters.findUser(u.id))
+        }
+      })
+      this.reset()
+    },
+    grantModeratorSelection () {
+      this.$refs.confirmGrantModeratorSelection.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    grantModeratorSelectionConfirmed () {
+      const s = this.$refs.userList.getSelected()
+      s.forEach(u => this.$store.dispatch('adminAddUserToModeratorGroup', this.$store.getters.findUser(u.id)))
+      this.reset()
+    },
+    revokeModeratorSelection () {
+      this.$refs.confirmRevokeModeratorSelection.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    revokeModeratorSelectionConfirmed () {
+      const s = this.$refs.userList.getSelected()
+      s.forEach(u => {
+        // you know the drill
+        if (u.id !== this.$store.state.users.currentUser.id) {
+          this.$store.dispatch('adminRemoveUserToModeratorGroup', this.$store.getters.findUser(u.id))
+        }
+      })
+      this.reset()
+    },
+    approveSelection () {
+      this.$refs.confirmApproveSelection.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    approveSelectionConfirmed () {
+      const s = this.$refs.userList.getSelected()
+      s.forEach(u => this.$store.dispatch('adminApproveUser', this.$store.getters.findUser(u.id)))
+      this.reset()
+    },
+    confirmUserSelection () {
+      this.$refs.confirmSelection
+    },
+    confirmUserSelectionConfirmed () {
+      const s = this.$refs.userList.getSelected()
+      s.forEach(u => this.$store.dispatch('adminConfirmUser', this.$store.getters.findUser(u.id)))
+      this.reset()
+    },
+    resendEmailSelection () {
+      this.$refs.resendEmailSelection.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    resendEmailSelectionConfirmed () {
+      const s = this.$refs.userList.getSelected()
+      s.forEach(u => this.$store.dispatch('adminResendConfirmationEmail', this.$store.getters.findUser(u.id)))
+      this.reset()
+    },
+    requirePasswordChangeSelection () {
+      this.$refs.requirePasswordChangeSelection.show()
+      this.$refs.dropdown.hidePopover()
+    },
+    requirePasswordChangeSelectionConfirmed () {
+      const s = this.$refs.userList.getSelected()
+      s.forEach(u => this.$store.dispatch('adminRequirePasswordChange', this.$store.getters.findUser(u.id)))
      this.reset()
    }
  },
--- a/src/components/settings_modal/admin_tabs/users_tab.scss
+++ b/src/components/settings_modal/admin_tabs/users_tab.scss
@ -1,3 +1,16 @@
 .user-tab {
  height: 100%;
 }
+
+.query-label {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.filter-input {
+  width: 200px;
+}
+
+.filter-btn-box {
+  text-align: right;
+}
--- a/src/components/settings_modal/admin_tabs/users_tab.vue
+++ b/src/components/settings_modal/admin_tabs/users_tab.vue
@ -1,35 +1,32 @@
 <template>
  <div :label="$t('admin_dash.users.management')">
-    <div class="setting-item">
-      <h2> {{ $t('admin_dash.users.title_filter_user_search') }} </h2>
-      <ul
-        class="setting-list"
-      >
+    <div
+      class="setting-item"
+    >
+      <h2> {{ $t('admin_dash.users.title_users') }} </h2>
+      <ul class="setting-list">
        <li>
+          <label class="query-label"> {{ $t('admin_dash.users.label_query') }} </label>
          <input
            v-model="filtersQuery"
-            :placeholder="$t('admin_dash.users.placeholder_query')"
-            class="input string-input"
+            class="input string-input filter-input"
            @input="reset()"
          >
-        </li>
-        <li>
+          <label class="query-label"> {{ $t('admin_dash.users.label_name') }} </label>
          <input
            v-model="filtersName"
-            :placeholder="$t('admin_dash.users.placeholder_name')"
-            class="input string-input"
+            class="input string-input filter-input"
            @input="reset()"
          >
-        </li>
-        <li>
+          <label class="query-label"> {{ $t('admin_dash.users.label_email') }} </label>
          <input
            v-model="filtersEmail"
-            :placeholder="$t('admin_dash.users.placeholder_email')"
-            class="input string-input"
+            class="input string-input filter-input"
            @input="reset()"
          >
        </li>
        <li>
+          <label class="query-label"> {{ $t('admin_dash.users.label_origin') }} </label>
          <Select
            v-model="filtersOrigin"
            @update:model-value="reset"
@ -50,8 +47,7 @@
              {{ $t('admin_dash.users.only_external') }}
            </option>
          </Select>
-        </li>
-        <li>
+          <label class="query-label"> {{ $t('admin_dash.users.label_activity') }} </label>
          <Select
            v-model="filtersActivity"
            @update:model-value="reset"
@ -72,10 +68,9 @@
              {{ $t('admin_dash.users.only_deactivated') }}
            </option>
          </Select>
-        </li>
-        <li>
+          <label class="query-label"> {{ $t('admin_dash.users.label_privileges') }} </label>
          <Select
-            v-model="filtersPermission"
+            v-model="filtersPrivileges"
            @update:model-value="reset"
          >
            <option
@ -102,33 +97,19 @@
        </li>
        <li>
          <Checkbox
-            @update:model-value="v => {filtersNneedApproval = v; reset();}"
+            class="query-label"
+            @update:model-value="v => {filtersNeedApproval = v; reset();}"
          >
            {{ $t('admin_dash.users.only_unapproved') }}
          </Checkbox>
-        </li>
-        <li>
          <Checkbox
-            @update:model-value="v => {filtersUnconfirmed = v; reset();}"
+            class="query-label"
+            @update:model-value="v => {filtersUncomfirmed = v; reset();}"
          >
            {{ $t('admin_dash.users.only_unconfirmed') }}
          </Checkbox>
        </li>
-        <li>
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="reset"
-          >
-            {{ $t('admin_dash.users.refresh') }}
-          </button>
-        </li>
      </ul>
-    </div>
-    <div
-      class="setting-item"
-    >
-      <h2> {{ $t('admin_dash.users.title_users') }} </h2>
      <PageList
        ref="userList"
        :refresh="true"
@ -138,33 +119,179 @@
        :fetch-page="(store, opts) => fetchPage(store, opts)"
      >
        <template #header>
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="activateSelection"
+          <Popover
+            ref="dropdown"
+            trigger="click"
+            placement="bottom"
          >
-            {{ $t('admin_dash.users.activate') }}
-          </button>
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="deactivateSelection"
-          >
-            {{ $t('admin_dash.users.deactivate') }}
-          </button>
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="deleteSelection"
-          >
-            {{ $t('admin_dash.users.delete') }}
-          </button>
+            <template #trigger>
+              <button
+                class="button button-default btn"
+              >
+                {{ $t('admin_dash.users.bulk_actions.title') }}
+              </button>
+            </template>
+            <template #content>
+              <div class="dropdown-menu">
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="activateSelection"
+                  >
+                    {{ $t('admin_dash.users.activate') }}
+                  </button>
+                </div>
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="deactivateSelection"
+                  >
+                    {{ $t('admin_dash.users.deactivate') }}
+                  </button>
+                </div>
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="deleteSelection"
+                  >
+                    {{ $t('admin_dash.users.delete') }}
+                  </button>
+                </div>
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="grantAdminSelection"
+                  >
+                    {{ $t('admin_dash.users.grant_admin') }}
+                  </button>
+                </div>
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="revokeAdminSelection"
+                  >
+                    {{ $t('admin_dash.users.revoke_admin') }}
+                  </button>
+                </div>
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="grantModeratorSelection"
+                  >
+                    {{ $t('admin_dash.users.grant_moderator') }}
+                  </button>
+                </div>
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="revokeModeratorSelection"
+                  >
+                    {{ $t('admin_dash.users.revoke_moderator') }}
+                  </button>
+                </div>
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="approveSelection"
+                  >
+                    {{ $t('admin_dash.users.approve') }}
+                  </button>
+                </div>
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="confirmUserSelection"
+                  >
+                    {{ $t('admin_dash.users.confirm_user') }}
+                  </button>
+                </div>
+                <div class="menu-item dropdown-item">
+                  <button
+                    class="main-button"
+                    @click="requirePasswordChangeSelection"
+                  >
+                    {{ $t('admin_dash.users.require_password_change') }}
+                  </button>
+                </div>
+              </div>
+            </template>
+          </Popover>
        </template>
        <template #item="{item}">
          <AdminCard :user-details="item" />
        </template>
      </PageList>
    </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')"
+      @callback="activateSelectedConfirmed"
+    />
+    <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')"
+      @callback="deactivateSelectionConfirmed"
+    />
+    <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')"
+      @callback="deleteSelectionConfirmed"
+    />
+    <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')"
+      @callback="grantAdminSelectionConfirmed"
+    />
+    <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')"
+      @callback="revokeAdminSelectionConfirmed"
+    />
+    <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')"
+      @callback="grantModeratorSelectionConfirmed"
+    />
+    <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')"
+      @callback="revokeModeratorSelectionConfirmed"
+    />
+    <GenericConfirm
+      ref="confirmConfirmUser"
+      :title="$t('admin_dash.users.bulk_actions.confirmUser')"
+      :cancel-text="$t('admin_dash.users.bulk_actions.no')"
+      :confirm-text="$t('admin_dash.users.bulk_actions.yes')"
+      @callback="confirmUserSelectionConfirmed"
+    />
+    <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')"
+      @callback="resendEmailSelectionConfirmed"
+    />
+    <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')"
+      @callback="requirePasswordChangeSelectionConfirmed"
+    />
  </div>
 </template>
 <script src="./users_tab.js"></script>
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -1143,33 +1143,58 @@
      "management": "Management",
      "search_users": "Search for users...",
      "loading": "Loading...",
-      "placeholder_query": "Query",
-      "placeholder_name": "Name",
-      "placeholder_email": "Email",
+      "label_query": "Query",
+      "label_name": "Name",
+      "label_email": "Email",
+      "label_origin": "Origin",
+      "label_activity": "Activity",
+      "label_privileges": "Privileges",
      "all": "All",
-      "only_local": "Local only",
-      "only_external": "External only",
-      "only_active": "Active only",
-      "only_deactivated": "Deactivated only",
-      "only_administrators": "Admin only",
-      "all_privileged": "All privileged",
-      "only_moderators": "Moderators only",
-      "only_unapproved": "Unapproved only",
-      "only_unconfirmed": "Unconfirmed only",
+      "only_local": "Local Only",
+      "only_external": "External Only",
+      "only_active": "Active Only",
+      "only_deactivated": "Deactivated Only",
+      "only_administrators": "Admin Only",
+      "all_privileged": "All Privileged",
+      "only_moderators": "Moderators Only",
+      "only_unapproved": "Unapproved Only",
+      "only_unconfirmed": "Unconfirmed Only",
      "refresh": "Refresh",
+      "bulk_actions": {
+        "title": "Bulk Actions",
+        "yes": "Yes",
+        "no": "No",
+        "activate": "Activate Selected Users?",
+        "deactivate": "Deactivate Selected Users?",
+        "delete": "Delete Selected Users?",
+        "grant_admin": "Grant Admin Privileges To Selected Users?",
+        "revoke_admin": "Revoke Admin Privileges From Selected Users?",
+        "grant_moderator": "Grant Moderator Privileges To Selected Users?",
+        "revoke_moderator": "Revoke Moderator Privileges From Selected Users?",
+        "approve": "Approve Selected Users?",
+        "confirm": "Confirm Selected Users?",
+        "require_password_change": "Require Password Change For Selected Users?"
+      },
      "activate": "Activate",
      "deactivate": "Deactivate",
+      "resend_confirmation_email": "Resend confirmation email",
+      "approve": "Approve",
+      "grant_admin": "Grant Admin",
+      "revoke_admin": "Revoke Admin",
+      "grant_moderator": "Grant Moderator",
+      "revoke_moderator": "Revoke Moderator",
+      "confirm_user": "Confirm",
+      "resend_confirmation_email": "Resend Confirmation Email",
+      "require_password_change": "Require Password Change",
      "delete": "Delete",
      "loading_user": "Loading user...",
+      "delete_user": "Delete User",
      "expand_user": "Expand user",
      "collapse_user": "Collapse user",
      "is_admin": "Is admin",
      "is_moderator": "Is moderator",
      "is_confirmed": "Is confirmed",
-      "resend_confirmation_email": "Resend confirmation email",
-      "approve": "Approve",
      "is_active": "Is active",
-      "delete_user": "Delete user",
      "expand_timeline": "Expand timeline",
      "collapse_timeline": "Collapse timeline",
      "expand_raw_info": "Expand raw info",
@ -1188,7 +1213,6 @@
      "link_source": "Source",
      "title_database": "Database",
      "title_details": "Details",
-      "title_filter_user_search": "Filter User Search",
      "title_users": "Users",
      "user_has_no_posts": "User has no posts"
    },
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@ -70,16 +70,22 @@ const adminSettingsStorage = {
          .then(res => store.commit('updateRight', { user, right: 'admin', value: res.is_admin }))
    },
    adminRemoveUserFromAdminGroup (store, user) {
-       return store.rootState.api.backendInteractor.adminRemoveUserFromAdminGroup({ user })
-          .then(res => store.commit('updateRight', { user, right: 'admin', value: res.is_admin }))
+       // prevent revokation of own rights
+       if (user.id !== store.state.users.currentUser.id) {
+          return store.rootState.api.backendInteractor.adminRemoveUserFromAdminGroup({ user })
+             .then(res => store.commit('updateRight', { user, right: 'admin', value: res.is_admin }))
+       }
    },
    adminAddUserToModeratorGroup (store, user) {
       return store.rootState.api.backendInteractor.adminAddUserToModeratorGroup({ user })
          .then(res => store.commit('updateRight', { user, right: 'moderator', value: res.is_moderator }))
    },
    adminRemoveUserFromModeratorGroup (store, user) {
-       return store.rootState.api.backendInteractor.adminRemoveUserFromModeratorGroup({ user })
-          .then(res => store.commit('updateRight', { user, right: 'moderator', value: res.is_moderator }))
+       // prevent revokation of own rights
+       if (user.id !== store.state.users.currentUser.id) {
+          return store.rootState.api.backendInteractor.adminRemoveUserFromModeratorGroup({ user })
+             .then(res => store.commit('updateRight', { user, right: 'moderator', value: res.is_moderator }))
+       }
    },
    adminActivateUser (store, user) {
       return store.rootState.api.backendInteractor.activateUser({ user })
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@ -145,7 +145,7 @@ const PLEROMA_ADMIN_RESEND_CONFIRMATION_EMAIL_URL = '/api/v1/pleroma/admin/users
 const PLEROMA_ADMIN_APPROVE_URL = '/api/v1/pleroma/admin/users/approve'
 const PLEROMA_ADMIN_LIST_STATUSES_URL = (id, pageSize, godmode, withReblogs) => `/api/v1/pleroma/admin/users/${id}/statuses?page_size=${pageSize}&godmode=${godmode}&with_reblogs=${withReblogs}`
 const PLEROMA_ADMIN_CHANGE_STATUS_SCOPE_URL = (id) => `/api/v1/pleroma/admin/statuses/${id}`
-
+const PLEROMA_ADMIN_REQUIRE_PASSWORD_CHANGE_URL = '/api/v1/pleroma/admin/users/force_password_reset'
 const PLEROMA_EMOJI_RELOAD_URL = '/api/pleroma/admin/reload_emoji'
 const PLEROMA_EMOJI_IMPORT_FS_URL = '/api/pleroma/emoji/packs/import'
 const PLEROMA_EMOJI_PACKS_URL = (page, pageSize) => `/api/v1/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`
@ -1489,104 +1489,116 @@ const dismissAnnouncement = ({ id, credentials }) => {
 const adminListUsers = ({ opts, credentials }) => {
   // the reported list is hardly useful because standards are for dating i guess,
   // so make sure to fetchIfMissing right afterward using this call
-   const url = PLEROMA_ADMIN_USERS_URL(opts)
-   return promisedRequest({
-     url: url,
-     credentials,
-     method: 'GET'
-   }).then((data) => data.users.map(parseUser))
+  const url = PLEROMA_ADMIN_USERS_URL(opts)
+  return promisedRequest({
+    url: url,
+    credentials,
+    method: 'GET'
+  }).then((data) => data.users.map(parseUser))
 }

 const adminAddUserToAdminGroup = ({ user, credentials }) => {
-   const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'admin')
-   return promisedRequest({ url: url,
-      credentials,
-      method: 'POST'
-   })
+  const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'admin')
+  return promisedRequest({ url: url,
+    credentials,
+    method: 'POST'
+  })
 }

 const adminRemoveUserFromAdminGroup = ({ user, credentials }) => {
-   const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'admin')
-   return promisedRequest({ url: url,
-      credentials,
-      method: 'DELETE'
-   })
+  const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'admin')
+  return promisedRequest({ url: url,
+    credentials,
+    method: 'DELETE'
+  })
 }

 const adminAddUserToModeratorGroup = ({ user, credentials }) => {
-   const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'moderator')
-   return promisedRequest({ url: url,
-      credentials,
-      method: 'POST'
-   })
+  const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'moderator')
+  return promisedRequest({ url: url,
+    credentials,
+    method: 'POST'
+  })
 }

 const adminRemoveUserFromModeratorGroup = ({ user, credentials }) => {
-   const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'moderator')
-   return promisedRequest({ url: url,
-      credentials,
-      method: 'DELETE'
-   })
+  const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'moderator')
+  return promisedRequest({ url: url,
+    credentials,
+    method: 'DELETE'
+  })
 }

 const adminConfirmUser = ({user: { screen_name: nickname }, credentials }) => {
-   const url = PLEROMA_ADMIN_CONFIRM_USER_URL
-   return promisedRequest({url: url,
-      credentials,
-      method: 'PATCH',
-      payload: {
-         nicknames: [nickname]
-      }
-   })
+  const url = PLEROMA_ADMIN_CONFIRM_USER_URL
+  return promisedRequest({url: url,
+    credentials,
+    method: 'PATCH',
+    payload: {
+      nicknames: [nickname]
+    }
+  })
 }

 const adminResendConfirmationEmail = ({user: { screen_name: nickname }, credentials }) => {
-   const url = PLEROMA_ADMIN_RESEND_CONFIRMATION_EMAIL_URL
-   return promisedRequest({url: url,
-      credentials,
-      method: 'PATCH',
-      payload: {
-         nicknames: [nickname]
-      }
-   })
+  const url = PLEROMA_ADMIN_RESEND_CONFIRMATION_EMAIL_URL
+  return promisedRequest({url: url,
+    credentials,
+    method: 'PATCH',
+    payload: {
+      nicknames: [nickname]
+    }
+  })
 }

 const adminApproveUser = ({user : { screen_name: nickname }, credentials }) => {
-   const url = PLEROMA_ADMIN_APPROVE_URL
-   const r = promisedRequest({url: url,
-      credentials,
-      method: 'PATCH',
-      payload: {
-         nicknames: [nickname]
-      }
-   })
-   return r
+  const url = PLEROMA_ADMIN_APPROVE_URL
+  const r = promisedRequest({url: url,
+    credentials,
+    method: 'PATCH',
+    payload: {
+      nicknames: [nickname]
+    }
+  })
+  return r
 }

 const adminListStatuses = ({user: { id }, opts: { pageSize, godmode, withReblogs }, credentials }) => {
-   const url = PLEROMA_ADMIN_LIST_STATUSES_URL(id, pageSize, godmode, withReblogs)
-   return promisedRequest({url: url,
-      credentials,
-      method: 'GET'
-   })
+  const url = PLEROMA_ADMIN_LIST_STATUSES_URL(id, pageSize, godmode, withReblogs)
+  return promisedRequest({url: url,
+    credentials,
+    method: 'GET'
+  })
 }

 const adminChangeStatusScope = ({opts: { id, sensitive, visibility}, credentials }) => {
-   const url = PLEROMA_ADMIN_CHANGE_STATUS_SCOPE_URL(id)
-   var payload = {}
-   if (typeof(sensitive) !== 'undefined') {
-      payload['sensitive'] = sensitive
-   }
-   if (typeof(visibility) !== 'undefined') {
-      payload['visibility'] = visibility
-   }
-   return promisedRequest({url: url,
-      credentials,
-      method: 'PUT',
-      payload
-   })
+  const url = PLEROMA_ADMIN_CHANGE_STATUS_SCOPE_URL(id)
+  var payload = {}
+  if (typeof(sensitive) !== 'undefined') {
+    payload['sensitive'] = sensitive
+  }
+  if (typeof(visibility) !== 'undefined') {
+    payload['visibility'] = visibility
+  }
+  return promisedRequest({
+    url,
+    credentials,
+    method: 'PUT',
+    payload
+  })
 }

+const adminRequirePasswordChange = ({ user: { screen_name: nickname }, credentials }) => {
+  const url = PLEROMA_ADMIN_REQUIRE_PASSWORD_CHANGE_URL
+  return promisedRequest({
+    url,
+    credentials,
+    method: 'PATCH',
+    payload: {
+      nicknames: [nickname]
+    }
+  })
+}

 const announcementToPayload = ({ content, startsAt, endsAt, allDay }) => {
  const payload = { content }
@ -2270,6 +2282,7 @@ const apiService = {
  adminApproveUser,
  adminListStatuses,
  adminChangeStatusScope,
+  adminRequirePasswordChange
 }

 export default apiService