adding more things for managing users

src/components/page_list/page_list.vue

@@ -5,6 +5,9 @@
         :get-key="i => i"
         :items="items"
     >
+    <template v-slot:header="slotProps">
+        <slot name="header" v-bind="slotProps"/>
+    </template>
       <template v-slot:item="slotProps">
         <slot name="item" v-bind="slotProps"/>
       </template>

src/components/settings_modal/admin_tabs/admin_card.js

@@ -1,28 +1,108 @@
 import BasicUserCard from '../../basic_user_card/basic_user_card.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 const AdminCard = {
-  props: ['userId'],
-  data () {
-    return {
-      progress: false
-    }
-  },
-  computed: {
-    isLoaded () {
-      return typeof(this.user) !== 'undefined'
-    },
-    user () {
-      return this.$store.getters.findUser(this.userId)
-    },
-    relationship () {
-      return this.$store.getters.relationship(this.userId)
-    },
-  },
-  components: {
-    BasicUserCard
-  },
-  methods: {
-  }
+   props: ['userDetails'],
+   data () {
+      return {
+         progress: false,
+         top_level_expanded: false,
+         json_expanded: false,
+         just_approved: false,
+         just_confirmed: false,
+         just_deleted: false,
+      }
+   },
+   mounted () {
+   },
+   computed: {
+      isLoaded () {
+         return typeof(this.user) !== 'undefined'
+      },
+      user () {
+         return this.$store.getters.findUser(this.userDetails.id)
+      },
+      relationship () {
+         return this.$store.getters.relationship(this.userDetails.id)
+      },
+      is_local () {
+         const u = this.$store.getters.findUser(this.userDetails.id)
+         if (typeof(u) !== 'undefined') {
+            return u.is_local === true
+         }
+         return false
+      },
+      is_admin () {
+         const u = this.$store.getters.findUser(this.userDetails.id)
+         if (typeof(u) !== 'undefined') {
+            return u.rights.admin === true
+         }
+         return false
+      },
+      is_moderator () {
+         const u = this.$store.getters.findUser(this.userDetails.id)
+         if (typeof(u) !== 'undefined') {
+            return u.rights.moderator === true
+         }
+         return false
+      },
+      is_activated () {
+         const u = this.$store.getters.findUser(this.userDetails.id)
+         if (typeof(u) !== 'undefined') {
+            return u.deactivated === false
+         }
+         return false
+      },
+      is_confirmed () {
+         return (this.userDetails.is_confirmed === false) || (this.just_confirmed === true)
+      },
+      is_approved () {
+         return (this.userDetails.is_approved === false) || (this.just_approved === true)
+      }
+   },
+   components: {
+      BasicUserCard,
+      Checkbox
+   },
+   methods: {
+      toggle_admin (v) {
+         const u = this.$store.getters.findUser(this.userDetails.id)
+         console.log('user', u)
+         if (v === true) {
+            this.$store.dispatch('adminAddUserToAdminGroup', u).then(res => console.log("res: ", res))
+         } else {
+            this.$store.dispatch('adminRemoveUserFromAdminGroup', u)
+         }
+      },
+      toggle_moderator (v) {
+         const u = this.$store.getters.findUser(this.userDetails.id)
+         if (v === true) {
+            this.$store.dispatch('adminAddUserToModeratorGroup', u)
+         } else {
+            this.$store.dispatch('adminRemoveUserFromModeratorGroup', u)
+         }
+      },
+      toggle_activation (v) {
+         const u = this.$store.getters.findUser(this.userDetails.id)
+         if (v === true) {
+            this.$store.dispatch('adminActivateUser', u)
+         } else {
+            this.$store.dispatch('adminDeactivateUser', u)
+         }
+      },
+      toggle_confirmation () {},
+      toggle_approval () {},
+      force_update_user () {
+         this.$store.dispatch('fetchUser', this.userDetails.id)
+      },
+      delete_user () {
+         if (!this.just_deleted) {
+            const u = this.$store.getters.findUser(this.userDetails.id)
+            this.$store.dispatch('adminDeleteUser', u)
+            this.just_deleted = true
+         }
+      }
+   }
 }
 
 export default AdminCard

src/components/settings_modal/admin_tabs/admin_card.vue

@@ -1,42 +1,126 @@
+<!-- eslint-disable -->
 <template>
+  <div v-if="!just_deleted">
   <div
-    v-if="!isLoaded"
-  >
-    loading user...
+      v-if="!isLoaded"
+      >
+      loading user...
   </div>
-  <div
-    v-else
-  >
-  <BasicUserCard :user="user">
-    <div class="admin-card-content-container">
-      <!--<button
-        v-if="muted"
-        class="btn button-default"
-        :disabled="progress"
-        @click="unmuteUser"
-      >
-        <template v-if="progress">
-          {{ $t('user_card.unmute_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.unmute') }}
-        </template>
-      </button>
-      <button
+    <div
         v-else
-        class="btn button-default"
-        :disabled="progress"
-        @click="muteUser"
-      >
-        <template v-if="progress">
-          {{ $t('user_card.mute_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.mute') }}
-        </template>
-      </button>-->
+        >
+        <div v-if="userDetails.id !== this.$store.state.users.currentUser.id">
+          <BasicUserCard :user="user">
+          <div class="admin-card-content-container">
+            <!--<button
+              v-if="muted"
+              class="btn button-default"
+              :disabled="progress"
+              @click="unmuteUser"
+              >
+              <template v-if="progress">
+              {{ $t('user_card.unmute_progress') }}
+              </template>
+              <template v-else>
+              {{ $t('user_card.unmute') }}
+              </template>
+              </button>
+              <button
+              v-else
+              class="btn button-default"
+              :disabled="progress"
+              @click="muteUser"
+              >
+              <template v-if="progress">
+              {{ $t('user_card.mute_progress') }}
+              </template>
+              <template v-else>
+              {{ $t('user_card.mute') }}
+              </template>
+              </button>-->
+          </div>
+          </BasicUserCard>
+          <div v-if="!top_level_expanded">
+                  <button
+                      class="button button-default btn"
+                      type="button"
+                      @click="top_level_expanded = true"
+                      >
+                      expand user
+                  </button>
+          </div>
+            <div v-else>
+                  <button
+                      class="button button-default btn"
+                      type="button"
+                      @click="top_level_expanded = false"
+                      >
+                      collapse user
+                  </button><br>
+              <div v-if="is_local">
+                <Checkbox
+                    :model-value="is_admin"
+                    @update:model-value="v => toggle_admin(v)"
+                    >
+                    is admin
+                </Checkbox><br>
+                <Checkbox
+                    :model-value="is_moderator"
+                    @update:model-value="v => toggle_moderator(v)"
+                    >
+                    is moderator
+                </Checkbox><br>
+                <Checkbox
+                    :model-value="is_confirmed"
+                    @update:model-value="v => toggle_confirmation(v)"
+                    >
+                    is confirmed
+                </Checkbox><br>
+               <Checkbox
+                  :model-value="is_approved"
+                  @update:model-value="v => toggle_approval(v)"
+                  >
+                  is approved
+              </Checkbox><br>
+              </div>
+              <Checkbox
+                  :model-value="is_activated"
+                  @update:model-value="v => toggle_activation(v)"
+                  >
+                  is active
+              </Checkbox><br>
+              <button class="button button-default btn"
+                      type="button"
+                      @click="delete_user()"
+                      >
+                      delete user
+              </button>
+            </div>
+            <div v-if="!json_expanded"
+            >
+                  <button
+                      class="button button-default btn"
+                      type="button"
+                      @click="json_expanded = true"
+                      >
+            expand raw info
+                  </button>
+          </div>
+          <div v-else>
+                  <button
+                      class="button button-default btn"
+                      type="button"
+                      @click="json_expanded = false"
+                      >
+                      collapse raw info
+                  </button>
+           <h2> database </h2>
+           <pre> {{ JSON.stringify(user, null, 2) }} </pre>
+           <h2> details </h2>
+           <pre> {{ JSON.stringify(this.userDetails, null, 2) }} </pre>
+          </div>
+        </div>
     </div>
-  </BasicUserCard>
   </div>
 </template>
 

src/components/settings_modal/admin_tabs/users_tab.js

@@ -5,8 +5,7 @@ import BasicUserCard from 'src/components/basic_user_card/basic_user_card.vue'
 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'
 
 const UsersTab = {
    provide () {
@@ -17,8 +16,14 @@ const UsersTab = {
    },
    data() {
       return {
+         /* filters must match the filter options below initially, or the ui is gonna have a computer moment
+          * no, i won't fix this
+          * */
+         filters_origin: "local",
+         filters_activity: "all",
+         filters_permission: "all",
          filters: {
-            local: false,
+            local: true,
             external: false,
             active: false,
             need_approval: false,
@@ -38,35 +43,89 @@ const UsersTab = {
       PageList,
       ProgressButton, 
       AdminCard,
+      TabSwitcher,
    },
    computed: {
    },
    methods: {
+   update_origin (v) {
+         switch (v) {
+            case 'local':
+            this.filters.local = true
+            this.filters.external = false
+            break;
+            case 'external':
+            this.filters.local = false
+            this.filters.external = true
+            break;
+            default:
+            case 'all':
+            this.filters.local = false
+            this.filters.external = false
+            break;
+         }
+         this.reset()
+      },
+   update_activity (v) {
+         switch (v) {
+            case 'active':
+            this.filters.active = true
+            this.filters.deactivated = false
+            break;
+            case 'deactivated':
+            this.filters.active = false
+            this.filters.deactivated = true
+            break;
+            default:
+            case 'all':
+            this.filters.active = false
+            this.filters.deactivated = false
+            break;
+         }
+         this.reset()
+      },
+      update_permission (v) {
+         switch (v) {
+            case 'admin':
+            this.filters.is_admin = true
+            this.filters.is_moderator = false
+            break;
+            case 'moderator':
+            this.filters.is_admin = false
+            this.filters.is_moderator = true
+            break;
+            case 'modsnadmins':
+            this.filters.is_admin = true
+            this.filters.is_moderator = true
+            break;
+            default:
+            case 'all':
+            this.filters.is_admin = false
+            this.filters.is_moderator = false
+            break;
+         }
+         this.reset()
+      },
       delete_selection () {
-         console.log('delete selection')
       },
       delete_user () {},
       fetch_page (store, opts) {
          opts.query = ""
-         console.log('current filters:', this.filters)
          opts.filters = this.filters
          opts.name = ""
          opts.email = ""
          const users = store.dispatch('fetchAdminUsers', opts)
-         console.log('users', users)
          return users
       },
       reset () {
         this.$refs.userList.reset()
       },
       toggleLocal () {
-         console.log('toggle local')
          this.filters.local = !this.filters.local
          this.reset()
       }
    },
    mounted() {
-      console.log("mounted")
    }
 }
 

src/components/settings_modal/admin_tabs/users_tab.scss

@@ -0,0 +1,3 @@
+.user-tab {
+  height: 100%;
+}

src/components/settings_modal/admin_tabs/users_tab.vue

@@ -1,101 +1,130 @@
+<!-- eslint-disable -->
 <template>
-  <div :label="$t('admin_dash.tabs.users')">
-    <Checkbox
-      :model-value="filters[local]"
-      @update:model-value="v => {filters.local = v; reset();}"
-    >
-      only local
-    </Checkbox><br>
-    <Checkbox
-      :model-value="filters[external]"
-      @update:model-value="v => {filters.external = v; reset();}"
-    >
-      only external
-    </Checkbox><br>
-    <Checkbox
-      :model-value="filters[active]"
-      @update:model-value="v => {filters.active = v; reset();}"
-    >
-      only active
-    </Checkbox><br>
-    <Checkbox
-      :model-value="filters[need_approval]"
-      @update:model-value="v => {filters.need_approval = v; reset();}"
-    >
-      only unconfirmed
-    </Checkbox><br>
-    <Checkbox
-      :model-value="filters[deactivated]"
-      @update:model-value="v => {filters.deactivated = v; reset();}"
-    >
-      only deactivated
-    </Checkbox><br>
-    <Checkbox
-      :model-value="filters[is_admin]"
-      @update:model-value="v => {filters.is_admin = v; reset();}"
-    >
-      only if admin
-    </Checkbox><br>
-    <Checkbox
-      :model-value="filters[is_moderator]"
-      @update:model-value="v => {filters.is_moderator = v; reset();}"
-    >
-      only if moderator
-    </Checkbox><br>
-    <button
-      class="button button-default btn"
-      type="button"
-      @click="delete_selection"
-    >
-      {{ $t('admin_dash.users.activate') }}
-    </button>
-    <button
-      class="button button-default btn"
-      type="button"
-      @click="activate_selection"
-    >
-      {{ $t('admin_dash.users.deactivate') }}
-    </button>
-    <button
-      class="button button-default btn"
-      type="button"
-      @click="deactivate_selection"
-    >
-      {{ $t('admin_dash.users.delete') }}
-    </button>
-    <PageList
-      ref="userList"
-      :refresh="true"
-      :get-key="i => i"
-      :box-only="true"
-      :page-size="50"
-      :fetch-page="(store, opts) => this.fetch_page(store, opts)"
-    >
-      <template #item="{item}">
-        <AdminCard :user-id="item.id" />
-        <button
-          class="button button-default btn"
-          type="button"
-          @click="delete_user"
-        >
-          {{ $t('admin_dash.users.activate') }}
-        </button>
-        <button
-          class="button button-default btn"
-          type="button"
-          @click="activate_user"
-        >
-          {{ $t('admin_dash.users.deactivate') }}
-        </button>
-        <button
-          class="button button-default btn"
-          type="button"
-          @click="deactivate_user"
-        >
-          {{ $t('admin_dash.users.delete') }}
-        </button>
-      </template>
-    </PageList>
-  </div>
+  <TabSwitcher
+      :scrollable-tabs="false"
+      class="user-tab"
+      >
+      <div :label="$t('admin_dash.users.management')">
+        <div class="setting-item">
+          <h2> filter user search </h2>
+          todo: query, name and email input<br>
+          <Select
+              :model-value="filters_origin"
+              @update:model-value="v => update_origin(v) "
+              >
+              <option
+                  value="all"
+                  >
+                  all
+              </option>
+              <option
+                  value="local"
+                  >
+                  local only
+              </option>
+              <option
+                  value="external"
+                  >
+                  external only
+              </option>
+          </Select>
+          <Select
+              :model-value="filters_activity"
+              @update:model-value="v => update_activity(v) "
+              >
+              <option
+                  value="all"
+                  >
+                  all
+              </option>
+              <option
+                  value="active"
+                  >
+                  active only
+              </option>
+              <option
+                  value="deactivated"
+                  >
+                  deactivated only
+              </option>
+          </Select>
+          <Select
+              :model-value="filters_permission"
+              @update:model-value="v => update_permission(v) "
+              >
+              <option
+                  value="all"
+                  >
+                  all
+              </option>
+              <option
+                  value="admin"
+                  >
+                  admin only
+              </option>
+              <option
+                  value="modsnadmins"
+                  >
+                  all privileged
+              </option>
+              <option
+                  value="moderator"
+                  >
+                  moderator only
+              </option>
+          </Select>
+          <Checkbox
+              @update:model-value="v => {filters.need_approval = v; reset();}"
+              >
+              only unapproved
+          </Checkbox>
+          <Checkbox
+              @update:model-value="v => {filters.unconfirmed = v; reset();}"
+              >
+              only unconfirmed
+          </Checkbox>
+        </div>
+        <PageList
+            ref="userList"
+            :refresh="true"
+            :get-key="i => i"
+            :box-only="true"
+            :page-size="50"
+            :fetch-page="(store, opts) => this.fetch_page(store, opts)"
+            >
+            <template #header>
+              <button
+                  class="button button-default btn"
+                  type="button"
+                  @click="delete_selection"
+                  >
+                  {{ $t('admin_dash.users.activate') }}
+              </button>
+                <button
+                    class="button button-default btn"
+                    type="button"
+                    @click="activate_selection"
+                    >
+                    {{ $t('admin_dash.users.deactivate') }}
+                </button>
+                  <button
+                      class="button button-default btn"
+                      type="button"
+                      @click="deactivate_selection"
+                      >
+                      {{ $t('admin_dash.users.delete') }}
+                  </button>
+            </template>
+            <template #item="{item}">
+              <AdminCard :user-details="item" />
+            </template>
+        </PageList>
+      </div>
+
+      <div :label="$t('admin_dash.users.invitations')">
+        TBC
+      </div>
+  </TabSwitcher>
 </template>
 <script src="./users_tab.js"></script>
+<style lang="scss" src="./users_tab.scss"></style>

src/i18n/en.json

@@ -1132,7 +1132,8 @@
       }
     },
     "users": {
-      "users": "User Management",
+      "management": "Management",
+      "invitations": "Invitations",
       "search_users": "Search for users...",
       "filters": {
          "show_all": "show all",

src/modules/adminSettings.js

@@ -57,7 +57,7 @@ const adminSettingsStorage = {
     },
     resetAdminDraft (state) {
       state.draft = cloneDeep(state.config)
-    }
+    },
   },
   actions: {
     async fetchAdminUsers (store, opts) {
@@ -67,6 +67,34 @@ const adminSettingsStorage = {
       //)
        return users
     },
+    adminAddUserToAdminGroup (store, user) {
+       store.rootState.api.backendInteractor.adminAddUserToAdminGroup({ user })
+          .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 }))
+    },
+    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 }))
+    },
+    adminActivateUser (store, user) {
+       return store.rootState.api.backendInteractor.activateUser({ user })
+         .then(res => console.log(res))
+    },
+    adminDeactivateUser (store, user) {
+       return store.rootState.api.backendInteractor.deactivateUser({ user })
+         .then(res => console.log(res))
+    },
+    adminDeleteUser (store, user) {
+       return store.rootState.api.backendInteractor.deleteUser({ user })
+         .then(res => console.log(res))
+    },
     loadFrontendsStuff ({ rootState, commit }) {
       rootState.api.backendInteractor.fetchAvailableFrontends()
         .then(frontends => commit('setAvailableFrontends', { frontends }))

src/services/api/api.service.js

@@ -136,6 +136,7 @@ const PLEROMA_ADMIN_USERS_URL = ({page, pageSize, filters = {}, query = '', name
                      + (is_moderator ? 'is_moderator,' : '')
    return `/api/v1/pleroma/admin/users?page=${page}&page_size=${pageSize}&filters=${filters_str}&query=${query}&name=${name}&email=${email}`
 }
+const PLEROMA_ADMIN_MODIFY_GROUP_URL = (nickname, group) => `/api/v1/pleroma/admin/users/${nickname}/permission_group/${group}`
 const PLEROMA_ADMIN_DELETE_USERS_URL = '/api/v1/pleroma/admin/users'
 const PLEROMA_ADMIN_ACTIVATE_USER_URL = '/api/v1/pleroma/admin/users/activate'
 const PLEROMA_ADMIN_DEACTIVATE_USER_URL = '/api/v1/pleroma/admin/users/deactivate'
@@ -1475,37 +1476,35 @@ const adminListUsers = ({ opts, credentials }) => {
    }).then((data) => data.users.map(parseUser))
 }
 
-const adminDeleteUser = ({ nicknames, credentials }) => {
-   return promisedRequest({
-      url: PLEROMA_ADMIN_DELETE_USERS_URL,
+const adminAddUserToAdminGroup = ({ user, credentials }) => {
+   const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'admin')
+   return promisedRequest({ url: url,
       credentials,
-      method: 'DELETE',
-      headers: {
-         'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({'nicknames': nicknames})
+      method: 'POST'
    })
 }
 
-const adminActivateUser = ({ nicknames, credentials }) => {
-   return promisedRequest({ url: PLEROMA_ADMIN_ACTIVATE_USER_URL,
+const adminRemoveUserFromAdminGroup = ({ user, credentials }) => {
+   const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'admin')
+   return promisedRequest({ url: url,
       credentials,
-      method: 'PATCH',
-      headers: {
-         'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({'nicknames': nicknames})
+      method: 'DELETE'
    })
 }
 
-const adminDeactivateUser = ({ nicknames, credentials }) => {
-   return promisedRequest({ url: PLEROMA_ADMIN_DEACTIVATE_USER_URL,
+const adminAddUserToModeratorGroup = ({ user, credentials }) => {
+   const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'moderator')
+   return promisedRequest({ url: url,
       credentials,
-      method: 'PATCH',
-      headers: {
-         'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({'nicknames': nicknames})
+      method: 'POST'
+   })
+}
+
+const adminRemoveUserFromModeratorGroup = ({ user, credentials }) => {
+   const url = PLEROMA_ADMIN_MODIFY_GROUP_URL(user.name_html, 'moderator')
+   return promisedRequest({ url: url,
+      credentials,
+      method: 'DELETE'
    })
 }
 
@@ -2182,9 +2181,10 @@ const apiService = {
   updateBookmarkFolder,
   deleteBookmarkFolder,
   adminListUsers,
-  adminDeleteUser,
-  adminActivateUser,
-  adminDeactivateUser,
+  adminAddUserToAdminGroup,
+  adminRemoveUserFromAdminGroup,
+  adminAddUserToModeratorGroup,
+  adminRemoveUserFromModeratorGroup,
 }
 
 export default apiService