123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375 |
- <!--
- - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @author John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
- <template>
- <Fragment>
- <NcContent app-name="settings" :navigation-class="{ 'icon-loading': loadingAddGroup }">
- <NcAppNavigation>
- <NcAppNavigationNew button-id="new-user-button"
- :text="t('settings','New user')"
- button-class="icon-add"
- @click="showNewUserMenu"
- @keyup.enter="showNewUserMenu"
- @keyup.space="showNewUserMenu">
- <template #icon>
- <Plus :size="20" />
- </template>
- </NcAppNavigationNew>
- <template #list>
- <NcAppNavigationNewItem id="addgroup"
- ref="addGroup"
- :edit-placeholder="t('settings', 'Enter group name')"
- :editable="true"
- :loading="loadingAddGroup"
- :name="t('settings', 'Add group')"
- @click="showAddGroupForm"
- @new-item="createGroup">
- <template #icon>
- <Plus :size="20" />
- </template>
- </NcAppNavigationNewItem>
- <NcAppNavigationItem id="everyone"
- :exact="true"
- :name="t('settings', 'Active users')"
- :to="{ name: 'users' }">
- <template #icon>
- <AccountGroup :size="20" />
- </template>
- <template #counter>
- <NcCounterBubble :type="!selectedGroupDecoded ? 'highlighted' : undefined">
- {{ userCount }}
- </NcCounterBubble>
- </template>
- </NcAppNavigationItem>
- <NcAppNavigationItem v-if="settings.isAdmin"
- id="admin"
- :exact="true"
- :name="t('settings', 'Admins')"
- :to="{ name: 'group', params: { selectedGroup: 'admin' } }">
- <template #icon>
- <ShieldAccount :size="20" />
- </template>
- <template v-if="adminGroupMenu.count > 0" #counter>
- <NcCounterBubble :type="selectedGroupDecoded === 'admin' ? 'highlighted' : undefined">
- {{ adminGroupMenu.count }}
- </NcCounterBubble>
- </template>
- </NcAppNavigationItem>
- <!-- Hide the disabled if none, if we don't have the data (-1) show it -->
- <NcAppNavigationItem v-if="disabledGroupMenu.usercount > 0 || disabledGroupMenu.usercount === -1"
- id="disabled"
- :exact="true"
- :name="t('settings', 'Disabled users')"
- :to="{ name: 'group', params: { selectedGroup: 'disabled' } }">
- <template #icon>
- <AccountOff :size="20" />
- </template>
- <template v-if="disabledGroupMenu.usercount > 0" #counter>
- <NcCounterBubble :type="selectedGroupDecoded === 'disabled' ? 'highlighted' : undefined">
- {{ disabledGroupMenu.usercount }}
- </NcCounterBubble>
- </template>
- </NcAppNavigationItem>
- <NcAppNavigationCaption v-if="groupList.length > 0" :name="t('settings', 'Groups')" />
- <GroupListItem v-for="group in groupList"
- :id="group.id"
- :key="group.id"
- :active="selectedGroupDecoded === group.id"
- :name="group.title"
- :count="group.count" />
- </template>
- <template #footer>
- <ul class="app-navigation-entry__settings">
- <NcAppNavigationItem :name="t('settings', 'User management settings')"
- @click="isDialogOpen = true">
- <template #icon>
- <Cog :size="20" />
- </template>
- </NcAppNavigationItem>
- </ul>
- </template>
- </NcAppNavigation>
- <NcAppContent>
- <UserList :selected-group="selectedGroupDecoded"
- :external-actions="externalActions" />
- </NcAppContent>
- </NcContent>
- <UserSettingsDialog :open.sync="isDialogOpen" />
- </Fragment>
- </template>
- <script>
- import Vue from 'vue'
- import VueLocalStorage from 'vue-localstorage'
- import { Fragment } from 'vue-frag'
- import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
- import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
- import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
- import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
- import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js'
- import NcAppNavigationNewItem from '@nextcloud/vue/dist/Components/NcAppNavigationNewItem.js'
- import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
- import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
- import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'
- import AccountOff from 'vue-material-design-icons/AccountOff.vue'
- import Cog from 'vue-material-design-icons/Cog.vue'
- import Plus from 'vue-material-design-icons/Plus.vue'
- import ShieldAccount from 'vue-material-design-icons/ShieldAccount.vue'
- import GroupListItem from '../components/GroupListItem.vue'
- import UserList from '../components/UserList.vue'
- import UserSettingsDialog from '../components/Users/UserSettingsDialog.vue'
- Vue.use(VueLocalStorage)
- export default {
- name: 'Users',
- components: {
- AccountGroup,
- AccountOff,
- Cog,
- Fragment,
- GroupListItem,
- NcAppContent,
- NcAppNavigation,
- NcAppNavigationCaption,
- NcAppNavigationItem,
- NcAppNavigationNew,
- NcAppNavigationNewItem,
- NcContent,
- NcCounterBubble,
- Plus,
- ShieldAccount,
- UserList,
- UserSettingsDialog,
- },
- props: {
- selectedGroup: {
- type: String,
- default: null,
- },
- },
- data() {
- return {
- // temporary value used for multiselect change
- externalActions: [],
- loadingAddGroup: false,
- isDialogOpen: false,
- }
- },
- computed: {
- showConfig() {
- return this.$store.getters.getShowConfig
- },
- selectedGroupDecoded() {
- return this.selectedGroup ? decodeURIComponent(this.selectedGroup) : null
- },
- users() {
- return this.$store.getters.getUsers
- },
- groups() {
- return this.$store.getters.getGroups
- },
- usersOffset() {
- return this.$store.getters.getUsersOffset
- },
- usersLimit() {
- return this.$store.getters.getUsersLimit
- },
- userCount() {
- return this.$store.getters.getUserCount
- },
- settings() {
- return this.$store.getters.getServerData
- },
- groupList() {
- const groups = Array.isArray(this.groups) ? this.groups : []
- return groups
- // filter out disabled and admin
- .filter(group => group.id !== 'disabled' && group.id !== 'admin')
- .map(group => this.formatGroupMenu(group))
- },
- adminGroupMenu() {
- return this.formatGroupMenu(this.groups.find(group => group.id === 'admin'))
- },
- disabledGroupMenu() {
- return this.formatGroupMenu(this.groups.find(group => group.id === 'disabled'))
- },
- },
- beforeMount() {
- this.$store.commit('initGroups', {
- groups: this.$store.getters.getServerData.groups,
- orderBy: this.$store.getters.getServerData.sortGroups,
- userCount: this.$store.getters.getServerData.userCount,
- })
- this.$store.dispatch('getPasswordPolicyMinLength')
- },
- created() {
- // init the OCA.Settings.UserList object
- // and add the registerAction method
- Object.assign(OCA, {
- Settings: {
- UserList: {
- registerAction: this.registerAction,
- },
- },
- })
- },
- methods: {
- showNewUserMenu() {
- this.$store.commit('setShowConfig', {
- key: 'showNewUserForm',
- value: true,
- })
- },
- /**
- * Register a new action for the user menu
- *
- * @param {string} icon the icon class
- * @param {string} text the text to display
- * @param {Function} action the function to run
- * @return {Array}
- */
- registerAction(icon, text, action) {
- this.externalActions.push({
- icon,
- text,
- action,
- })
- return this.externalActions
- },
- /**
- * Create a new group
- *
- * @param {string} gid The group id
- */
- async createGroup(gid) {
- // group is not valid
- if (gid.trim() === '') {
- return
- }
- try {
- this.loadingAddGroup = true
- await this.$store.dispatch('addGroup', gid.trim())
- this.hideAddGroupForm()
- await this.$router.push({
- name: 'group',
- params: {
- selectedGroup: encodeURIComponent(gid.trim()),
- },
- })
- } catch {
- this.showAddGroupForm()
- } finally {
- this.loadingAddGroup = false
- }
- },
- showAddGroupForm() {
- this.$refs.addGroup.newItemActive = true
- this.$nextTick(() => {
- this.$refs.addGroup.$refs.newItemInput.focusInput()
- })
- },
- hideAddGroupForm() {
- this.$refs.addGroup.newItemActive = false
- this.$refs.addGroup.newItemValue = ''
- },
- /**
- * Format a group to a menu entry
- *
- * @param {object} group the group
- * @return {object}
- */
- formatGroupMenu(group) {
- const item = {}
- if (typeof group === 'undefined') {
- return {}
- }
- item.id = group.id
- item.title = group.name
- item.usercount = group.usercount
- // users count for all groups
- if (group.usercount - group.disabled > 0) {
- item.count = group.usercount - group.disabled
- }
- return item
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- .app-content {
- // Virtual list needs to be full height and is scrollable
- display: flex;
- overflow: hidden;
- flex-direction: column;
- max-height: 100%;
- }
- // force hiding the editing action for the add group entry
- .app-navigation__list #addgroup::v-deep .app-navigation-entry__utils {
- display: none;
- }
- .app-navigation-entry__settings {
- height: auto !important;
- // Prevent shrinking or growing
- flex: 0 0 auto;
- }
- </style>
|