diff options
Diffstat (limited to 'settings/src/views/Users.vue')
-rw-r--r-- | settings/src/views/Users.vue | 301 |
1 files changed, 301 insertions, 0 deletions
diff --git a/settings/src/views/Users.vue b/settings/src/views/Users.vue new file mode 100644 index 00000000000..c88487635a9 --- /dev/null +++ b/settings/src/views/Users.vue @@ -0,0 +1,301 @@ +<template> + <div id="app"> + <app-navigation :menu="menu"> + <template slot="settings-content"> + <div> + <p>{{t('settings', 'Default quota :')}}</p> + <multiselect :value="defaultQuota" :options="quotaOptions" + tag-placeholder="create" :placeholder="t('settings', 'Select default quota')" + label="label" track-by="id" class="multiselect-vue" + :allowEmpty="false" :taggable="true" + @tag="validateQuota" @input="setDefaultQuota"> + </multiselect> + + </div> + <div> + <input type="checkbox" id="showLanguages" class="checkbox" v-model="showLanguages"> + <label for="showLanguages">{{t('settings', 'Show Languages')}}</label> + </div> + <div> + <input type="checkbox" id="showLastLogin" class="checkbox" v-model="showLastLogin"> + <label for="showLastLogin">{{t('settings', 'Show last login')}}</label> + </div> + <div> + <input type="checkbox" id="showUserBackend" class="checkbox" v-model="showUserBackend"> + <label for="showUserBackend">{{t('settings', 'Show user backend')}}</label> + </div> + <div> + <input type="checkbox" id="showStoragePath" class="checkbox" v-model="showStoragePath"> + <label for="showStoragePath">{{t('settings', 'Show storage path')}}</label> + </div> + </template> + </app-navigation> + <user-list :users="users" :showConfig="showConfig" :selectedGroup="selectedGroup" /> + </div> +</template> + +<script> +import appNavigation from '../components/appNavigation'; +import userList from '../components/userList'; +import Vue from 'vue'; +import VueLocalStorage from 'vue-localstorage' +import Multiselect from 'vue-multiselect'; +import api from '../store/api'; + +Vue.use(VueLocalStorage) +Vue.use(VueLocalStorage) + +export default { + name: 'Users', + props: ['selectedGroup'], + components: { + appNavigation, + userList, + Multiselect + }, + 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'); + }, + data() { + return { + // default quota is unlimited + unlimitedQuota: {id:'default', label:t('settings', 'Unlimited')}, + // temporary value used for multiselect change + selectedQuota: false, + showConfig: { + showStoragePath: false, + showUserBackend: false, + showLastLogin: false, + showNewUserForm: false, + showLanguages: false + } + } + }, + methods: { + toggleNewUserMenu() { + this.showConfig.showNewUserForm = !this.showConfig.showNewUserForm; + if (this.showConfig.showNewUserForm) { + Vue.nextTick(() => { + window.newusername.focus(); + }); + } + }, + getLocalstorage(key) { + // force initialization + let localConfig = this.$localStorage.get(key); + // if localstorage is null, fallback to original values + this.showConfig[key] = localConfig !== null ? localConfig === 'true' : this.showConfig[key]; + return this.showConfig[key]; + }, + setLocalStorage(key, status) { + this.showConfig[key] = status; + this.$localStorage.set(key, status); + return status; + }, + removeGroup(groupid) { + let self = this; + // TODO migrate to a vue js confirm dialog component + OC.dialogs.confirm( + t('settings', 'You are about to remove the group {group}. The users will NOT be deleted.', {group: groupid}), + t('settings','Please confirm the group removal '), + function (success) { + if (success) { + self.$store.dispatch('removeGroup', groupid); + } + } + ); + }, + + /** + * Dispatch default quota set request + * + * @param {string|Object} quota Quota in readable format '5 GB' or Object {id: '5 GB', label: '5GB'} + * @returns {string} + */ + setDefaultQuota(quota = 'none') { + this.$store.dispatch('setAppConfig', { + app: 'files', + key: 'default_quota', + // ensure we only send the preset id + value: quota.id ? quota.id : quota + }).then(() => { + if (typeof quota !== 'object') { + quota = {id: quota, label: quota}; + } + this.defaultQuota = quota; + }); + }, + + /** + * Validate quota string to make sure it's a valid human file size + * + * @param {string} quota Quota in readable format '5 GB' + * @returns {Promise|boolean} + */ + validateQuota(quota) { + // only used for new presets sent through @Tag + let validQuota = OC.Util.computerFileSize(quota); + if (validQuota === 0) { + return this.setDefaultQuota('none'); + } else if (validQuota !== null) { + // unify format output + return this.setDefaultQuota(OC.Util.humanFileSize(OC.Util.computerFileSize(quota))); + } + // if no valid do not change + return false; + }, + }, + computed: { + users() { + return this.$store.getters.getUsers; + }, + loading() { + return Object.keys(this.users).length === 0; + }, + usersOffset() { + return this.$store.getters.getUsersOffset; + }, + usersLimit() { + return this.$store.getters.getUsersLimit; + }, + + // Local settings + showLanguages: { + get: function() {return this.getLocalstorage('showLanguages')}, + set: function(status) { + this.setLocalStorage('showLanguages', status); + } + }, + showLastLogin: { + get: function() {return this.getLocalstorage('showLastLogin')}, + set: function(status) { + this.setLocalStorage('showLastLogin', status); + } + }, + showUserBackend: { + get: function() {return this.getLocalstorage('showUserBackend')}, + set: function(status) { + this.setLocalStorage('showUserBackend', status); + } + }, + showStoragePath: { + get: function() {return this.getLocalstorage('showStoragePath')}, + set: function(status) { + this.setLocalStorage('showStoragePath', status); + } + }, + + userCount() { + return this.$store.getters.getUserCount; + }, + settings() { + return this.$store.getters.getServerData; + }, + + // default quota + quotaOptions() { + // convert the preset array into objects + let quotaPreset = this.settings.quotaPreset.reduce((acc, cur) => acc.concat({id:cur, label:cur}), []); + // add default presets + quotaPreset.unshift(this.unlimitedQuota); + return quotaPreset; + }, + // mapping saved values to objects + defaultQuota: { + get: function() { + if (this.selectedQuota !== false) { + return this.selectedQuota; + } + if (OC.Util.computerFileSize(this.settings.defaultQuota) > 0) { + // if value is valid, let's map the quotaOptions or return custom quota + return {id:this.settings.defaultQuota, label:this.settings.defaultQuota}; + } + return this.unlimitedQuota; // unlimited + }, + set: function(quota) { + this.selectedQuota = quota; + } + + }, + + // BUILD APP NAVIGATION MENU OBJECT + menu() { + // Data provided php side + let groups = this.$store.getters.getGroups; + groups = Array.isArray(groups) ? groups : []; + + // Map groups + groups = groups.map(group => { + let item = {}; + item.id = group.id.replace(' ', '_'); + item.classes = []; // empty classes, active will be set later + item.router = { // router link to + name: 'group', + params: {selectedGroup: group.id} + }; + item.text = group.name; // group name + item.utils = {counter: group.usercount}; // users count + + if (item.id !== 'admin' && item.id !== 'disabled' && this.settings.isAdmin) { + // add delete button on real groups + let self = this; + item.utils.actions = [{ + icon: 'icon-delete', + text: t('settings', 'Remove group'), + action: function() {self.removeGroup(group.id)} + }]; + }; + return item; + }); + + // Adjust data + let adminGroup = groups.find(group => group.id == 'admin'); + let disabledGroupIndex = groups.findIndex(group => group.id == 'disabled'); + let disabledGroup = groups[disabledGroupIndex]; + if (adminGroup && adminGroup.text) { + adminGroup.text = t('settings', 'Admins'); // rename admin group + } + if (disabledGroup && disabledGroup.text) { + disabledGroup.text = t('settings', 'Disabled users'); // rename disabled group + if (disabledGroup.utils.counter === 0) { + groups.splice(disabledGroupIndex, 1); // remove disabled if empty + } + } + + // Add everyone group + groups.unshift({ + id: 'everyone', + classes: [], + router: {name:'users'}, + text: t('settings', 'Everyone'), + utils: {counter: this.userCount} + }); + + // Set current group as active + let activeGroup = groups.findIndex(group => group.id === this.selectedGroup); + if (activeGroup >= 0) { + groups[activeGroup].classes.push('active'); + } else { + groups[0].classes.push('active'); + } + + // Return + return { + id: 'usergrouplist', + new: { + id:'new-user-button', + text: t('settings','New user'), + icon: 'icon-add', + action: this.toggleNewUserMenu + }, + items: groups + } + }, + } +} +</script> |