bulk menu and some cleanup, not finished yet

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')
+    }
+  }
+}

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>

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,

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) {

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>

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()
     }
   },

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;
+}

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>