Comply to eslint

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 327 insertions, 305 deletions

diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue
index 35caf7cea59..2e0649f7f56 100644
--- a/apps/settings/src/views/Apps.vue
+++ b/apps/settings/src/views/Apps.vue
@@ -21,8 +21,10 @@
   -->
 
 <template>
-	<Content app-name="settings" :class="{ 'with-app-sidebar': currentApp}"
-	:content-class="{ 'icon-loading': loadingList }" :navigation-class="{ 'icon-loading': loading }">
+	<Content app-name="settings"
+		:class="{ 'with-app-sidebar': currentApp}"
+		:content-class="{ 'icon-loading': loadingList }"
+		:navigation-class="{ 'icon-loading': loading }">
 		<AppNavigation>
 			<ul id="appscategories">
 				<AppNavigationItem v-for="item in menu" :key="item.key" :item="item" />
@@ -38,32 +40,22 @@
 </template>
 
 <script>
-import { 
+import {
 	AppContent,
 	AppNavigation,
 	AppNavigationItem,
 	AppSidebar,
 	Content
-} from 'nextcloud-vue';
-import AppList from '../components/appList';
-import Vue from 'vue';
+} from 'nextcloud-vue'
+import AppList from '../components/AppList'
+import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
-import AppDetails from '../components/appDetails';
+import AppDetails from '../components/AppDetails'
 
 Vue.use(VueLocalStorage)
 
 export default {
 	name: 'Apps',
-	props: {
-		category: {
-			type: String,
-			default: 'installed',
-		},
-		id: {
-			type: String,
-			default: '',
-		}
-	},
 	components: {
 		AppContent,
 		AppNavigation,
@@ -73,110 +65,88 @@ export default {
 		AppDetails,
 		AppList
 	},
-	methods: {
-		setSearch(query) {
-			this.searchQuery = query;
-		},
-		resetSearch() {
-			this.setSearch('');
+	props: {
+		category: {
+			type: String,
+			default: 'installed'
 		},
-		hideAppDetails() {
-			this.$router.push({
-				name: 'apps-category',
-				params: {category: this.category}
-			})
+		id: {
+			type: String,
+			default: ''
 		}
 	},
-	beforeMount() {
-		this.$store.dispatch('getCategories');
-		this.$store.dispatch('getAllApps');
-		this.$store.dispatch('getGroups', {offset: 0, limit: 5});
-		this.$store.commit('setUpdateCount', this.$store.getters.getServerData.updateCount)
-	},
-	mounted() {
-		/** 
-		 * Register search
-		 */
-		this.appSearch = new OCA.Search(this.setSearch, this.resetSearch);
-	},
 	data() {
 		return {
 			searchQuery: ''
 		}
 	},
-	watch: {
-		category: function (val, old) {
-			this.setSearch('');
-		}
-	},
 	computed: {
 		loading() {
-			return this.$store.getters.loading('categories');
+			return this.$store.getters.loading('categories')
 		},
 		loadingList() {
-			return this.$store.getters.loading('list');
+			return this.$store.getters.loading('list')
 		},
 		currentApp() {
-			return this.apps.find(app => app.id === this.id );
+			return this.apps.find(app => app.id === this.id)
 		},
 		categories() {
-			return this.$store.getters.getCategories;
+			return this.$store.getters.getCategories
 		},
 		apps() {
-			return this.$store.getters.getAllApps;
+			return this.$store.getters.getAllApps
 		},
 		updateCount() {
-			return this.$store.getters.getUpdateCount;
+			return this.$store.getters.getUpdateCount
 		},
 		settings() {
-			return this.$store.getters.getServerData;
+			return this.$store.getters.getServerData
 		},
 
 		// BUILD APP NAVIGATION MENU OBJECT
 		menu() {
 			// Data provided php side
-			let categories = this.$store.getters.getCategories;
-			categories = Array.isArray(categories) ? categories : [];
+			let categories = this.$store.getters.getCategories
+			categories = Array.isArray(categories) ? categories : []
 
 			// Map groups
 			categories = categories.map(category => {
-				let item = {};
-				item.id = 'app-category-' + category.ident;
-				item.icon = 'icon-category-' + category.ident;
-				item.classes = [];							// empty classes, active will be set later
+				let item = {}
+				item.id = 'app-category-' + category.ident
+				item.icon = 'icon-category-' + category.ident
+				item.classes = []							// empty classes, active will be set later
 				item.router = {								// router link to
 					name: 'apps-category',
-					params: {category: category.ident}
-				};
-				item.text = category.displayName;
-
-				return item;
-			});
+					params: { category: category.ident }
+				}
+				item.text = category.displayName
 
+				return item
+			})
 
 			// Add everyone group
 			let defaultCategories = [
 				{
 					id: 'app-category-your-apps',
 					classes: [],
-					router: {name: 'apps'},
+					router: { name: 'apps' },
 					icon: 'icon-category-installed',
-					text: t('settings', 'Your apps'),
+					text: t('settings', 'Your apps')
 				},
 				{
 					id: 'app-category-enabled',
 					classes: [],
 					icon: 'icon-category-enabled',
-					router: {name: 'apps-category', params: {category: 'enabled'}},
-					text: t('settings', 'Active apps'),
+					router: { name: 'apps-category', params: { category: 'enabled' } },
+					text: t('settings', 'Active apps')
 				}, {
 					id: 'app-category-disabled',
 					classes: [],
 					icon: 'icon-category-disabled',
-					router: {name: 'apps-category', params: {category: 'disabled'}},
-					text: t('settings', 'Disabled apps'),
+					router: { name: 'apps-category', params: { category: 'disabled' } },
+					text: t('settings', 'Disabled apps')
 				}
-			];
+			]
 
 			if (!this.settings.appstoreEnabled) {
 				return defaultCategories
@@ -187,40 +157,71 @@ export default {
 					id: 'app-category-updates',
 					classes: [],
 					icon: 'icon-download',
-					router: {name: 'apps-category', params: {category: 'updates'}},
+					router: { name: 'apps-category', params: { category: 'updates' } },
 					text: t('settings', 'Updates'),
-					utils: {counter: this.$store.getters.getUpdateCount}
-				});
+					utils: { counter: this.$store.getters.getUpdateCount }
+				})
 			}
 
 			defaultCategories.push({
 				id: 'app-category-app-bundles',
 				classes: [],
 				icon: 'icon-category-app-bundles',
-				router: {name: 'apps-category', params: {category: 'app-bundles'}},
-				text: t('settings', 'App bundles'),
-			});
+				router: { name: 'apps-category', params: { category: 'app-bundles' } },
+				text: t('settings', 'App bundles')
+			})
 
-			categories = defaultCategories.concat(categories);
+			categories = defaultCategories.concat(categories)
 
 			// Set current group as active
-			let activeGroup = categories.findIndex(group => group.id === 'app-category-' + this.category);
+			let activeGroup = categories.findIndex(group => group.id === 'app-category-' + this.category)
 			if (activeGroup >= 0) {
-				categories[activeGroup].classes.push('active');
+				categories[activeGroup].classes.push('active')
 			} else {
-				categories[0].classes.push('active');
+				categories[0].classes.push('active')
 			}
 
 			categories.push({
 				id: 'app-developer-docs',
 				classes: [],
 				href: this.settings.developerDocumentation,
-				text: t('settings', 'Developer documentation') + ' ↗',
-			});
+				text: t('settings', 'Developer documentation') + ' ↗'
+			})
 
 			// Return
 			return categories
+		}
+	},
+	watch: {
+		category: function(val, old) {
+			this.setSearch('')
+		}
+	},
+	beforeMount() {
+		this.$store.dispatch('getCategories')
+		this.$store.dispatch('getAllApps')
+		this.$store.dispatch('getGroups', { offset: 0, limit: 5 })
+		this.$store.commit('setUpdateCount', this.$store.getters.getServerData.updateCount)
+	},
+	mounted() {
+		/**
+		 * Register search
+		 */
+		this.appSearch = new OCA.Search(this.setSearch, this.resetSearch)
+	},
+	methods: {
+		setSearch(query) {
+			this.searchQuery = query
 		},
+		resetSearch() {
+			this.setSearch('')
+		},
+		hideAppDetails() {
+			this.$router.push({
+				name: 'apps-category',
+				params: { category: this.category }
+			})
+		}
 	}
 }
 </script>
diff --git a/apps/settings/src/views/Users.vue b/apps/settings/src/views/Users.vue
index dcbef1cd799..3c3082fc077 100644
--- a/apps/settings/src/views/Users.vue
+++ b/apps/settings/src/views/Users.vue
@@ -23,47 +23,69 @@
 <template>
 	<Content app-name="settings" :navigation-class="{ 'icon-loading': loadingAddGroup }">
 		<AppNavigation>
-			<AppNavigationNew button-id="new-user-button" :text="t('settings','New user')" button-class="icon-add" @click="toggleNewUserMenu" />
+			<AppNavigationNew button-id="new-user-button"
+				:text="t('settings','New user')"
+				button-class="icon-add"
+				@click="toggleNewUserMenu" />
 			<ul id="usergrouplist">
 				<AppNavigationItem v-for="item in menu" :key="item.key" :item="item" />
 			</ul>
 			<AppNavigationSettings>
 				<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"
-								 :allowEmpty="false" :taggable="true"
-								 @tag="validateQuota" @input="setDefaultQuota">
-					</Multiselect>
-
+					<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"
+						:allow-empty="false"
+						:taggable="true"
+						@tag="validateQuota"
+						@input="setDefaultQuota" />
 				</div>
 				<div>
-					<input type="checkbox" id="showLanguages" class="checkbox" v-model="showLanguages">
-					<label for="showLanguages">{{t('settings', 'Show Languages')}}</label>
+					<input id="showLanguages"
+						v-model="showLanguages"
+						type="checkbox"
+						class="checkbox">
+					<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>
+					<input id="showLastLogin"
+						v-model="showLastLogin"
+						type="checkbox"
+						class="checkbox">
+					<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>
+					<input id="showUserBackend"
+						v-model="showUserBackend"
+						type="checkbox"
+						class="checkbox">
+					<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>
+					<input id="showStoragePath"
+						v-model="showStoragePath"
+						type="checkbox"
+						class="checkbox">
+					<label for="showStoragePath">{{ t('settings', 'Show storage path') }}</label>
 				</div>
 			</AppNavigationSettings>
 		</AppNavigation>
 		<AppContent>
-			<UserList #content :users="users" :showConfig="showConfig" :selectedGroup="selectedGroup" :externalActions="externalActions" />
+			<UserList #content
+				:users="users"
+				:show-config="showConfig"
+				:selected-group="selectedGroup"
+				:external-actions="externalActions" />
 		</AppContent>
 	</Content>
 </template>
 
 <script>
-import Vue from 'vue';
+import Vue from 'vue'
 import VueLocalStorage from 'vue-localstorage'
 import {
 	AppContent,
@@ -71,52 +93,35 @@ import {
 	AppNavigationItem,
 	AppNavigationNew,
 	AppNavigationSettings,
-	AppSidebar,
 	Content,
 	Multiselect
-} from 'nextcloud-vue';
-import UserList from '../components/userList';
-import api from '../store/api';
+} from 'nextcloud-vue'
+import UserList from '../components/UserList'
 
 Vue.use(VueLocalStorage)
 
 export default {
 	name: 'Users',
-	props: ['selectedGroup'],
 	components: {
 		AppContent,
 		AppNavigation,
 		AppNavigationItem,
 		AppNavigationNew,
 		AppNavigationSettings,
-		AppSidebar,
 		Content,
 		UserList,
-		Multiselect,
+		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');
-	},
-	created() {
-		// init the OCA.Settings.UserList object
-		// and add the registerAction method
-		Object.assign(OCA, {
-			Settings: {
-				UserList: {
-					registerAction: this.registerAction
-				}
-			}
-		});
+	props: {
+		selectedGroup: {
+			type: String,
+			default: null
+		}
 	},
 	data() {
 		return {
 			// default quota is set to unlimited
-			unlimitedQuota: {id: 'none', label: t('settings', 'Unlimited')},
+			unlimitedQuota: { id: 'none', label: t('settings', 'Unlimited') },
 			// temporary value used for multiselect change
 			selectedQuota: false,
 			externalActions: [],
@@ -131,217 +136,103 @@ export default {
 			}
 		}
 	},
-	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 === null) {
-				return this.setDefaultQuota('none');
-			} else {
-				// unify format output
-				return this.setDefaultQuota(OC.Util.humanFileSize(OC.Util.computerFileSize(quota)));
-			}
-			// if no valid do not change
-			return false;
-		},
-
-		/**
-		 * 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
-		 */
-		registerAction(icon, text, action) {
-			this.externalActions.push({
-				icon: icon,
-				text: text,
-				action: action
-			});
-			return this.externalActions;
-		},
-
-		/**
-		 * Create a new group
-		 * 
-		 * @param {Object} event The form submit event
-		 */
-		createGroup(event) {
-			let gid = event.target[0].value;
-			this.loadingAddGroup = true;
-			this.$store.dispatch('addGroup', gid)
-				.then(() => {
-					this.showAddGroupEntry = false;
-					this.loadingAddGroup = false;
-					this.$router.push({
-						name: 'group',
-						params: {
-							selectedGroup: gid
-						}
-					})
-				})
-				.catch(() => {
-					this.loadingAddGroup = false;
-				});
-		}
-	},
 	computed: {
 		users() {
-			return this.$store.getters.getUsers;
+			return this.$store.getters.getUsers
 		},
 		usersOffset() {
-			return this.$store.getters.getUsersOffset;
+			return this.$store.getters.getUsersOffset
 		},
 		usersLimit() {
-			return this.$store.getters.getUsersLimit;
+			return this.$store.getters.getUsersLimit
 		},
 
 		// Local settings
 		showLanguages: {
-			get: function() {return this.getLocalstorage('showLanguages')},
+			get: function() { return this.getLocalstorage('showLanguages') },
 			set: function(status) {
-				this.setLocalStorage('showLanguages', status);
+				this.setLocalStorage('showLanguages', status)
 			}
 		},
 		showLastLogin: {
-			get: function() {return this.getLocalstorage('showLastLogin')},
+			get: function() { return this.getLocalstorage('showLastLogin') },
 			set: function(status) {
-				this.setLocalStorage('showLastLogin', status);
+				this.setLocalStorage('showLastLogin', status)
 			}
 		},
 		showUserBackend: {
-			get: function() {return this.getLocalstorage('showUserBackend')},
+			get: function() { return this.getLocalstorage('showUserBackend') },
 			set: function(status) {
-				this.setLocalStorage('showUserBackend', status);
+				this.setLocalStorage('showUserBackend', status)
 			}
 		},
 		showStoragePath: {
-			get: function() {return this.getLocalstorage('showStoragePath')},
+			get: function() { return this.getLocalstorage('showStoragePath') },
 			set: function(status) {
-				this.setLocalStorage('showStoragePath', status);
+				this.setLocalStorage('showStoragePath', status)
 			}
 		},
 
 		userCount() {
-			return this.$store.getters.getUserCount;
+			return this.$store.getters.getUserCount
 		},
 		settings() {
-			return this.$store.getters.getServerData;
+			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}), []);
+			let quotaPreset = this.settings.quotaPreset.reduce((acc, cur) => acc.concat({ id: cur, label: cur }), [])
 			// add default presets
-			quotaPreset.unshift(this.unlimitedQuota);
-			return quotaPreset;
+			quotaPreset.unshift(this.unlimitedQuota)
+			return quotaPreset
 		},
 		// mapping saved values to objects
 		defaultQuota: {
 			get: function() {
 				if (this.selectedQuota !== false) {
-					return this.selectedQuota;
+					return this.selectedQuota
 				}
 				if (this.settings.defaultQuota !== this.unlimitedQuota.id && 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 { id: this.settings.defaultQuota, label: this.settings.defaultQuota }
 				}
-				return this.unlimitedQuota; // unlimited
+				return this.unlimitedQuota // unlimited
 			},
 			set: function(quota) {
-				this.selectedQuota =  quota;
+				this.selectedQuota = quota
 			}
-			
+
 		},
 
 		// BUILD APP NAVIGATION MENU OBJECT
 		menu() {
 			// Data provided php side
-			let self = this;
-			let groups = this.$store.getters.getGroups;
-			groups = Array.isArray(groups) ? groups : [];
+			let self = this
+			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.key = item.id;
+				let item = {}
+				item.id = group.id.replace(' ', '_')
+				item.key = item.id
 				item.utils = {}
 
 				// router link to
 				item.router = {
 					name: 'group',
-					params: {selectedGroup: group.id}
-				};
+					params: { selectedGroup: group.id }
+				}
 
 				// group name
-				item.text = group.name;
-				item.title = group.name;
+				item.text = group.name
+				item.title = group.name
 
 				// users count for all groups
 				if (group.usercount - group.disabled > 0 || group.usercount === -1) {
-					item.utils.counter = group.usercount - group.disabled;
+					item.utils.counter = group.usercount - group.disabled
 				}
 
 				if (item.id !== 'admin' && item.id !== 'disabled' && this.settings.isAdmin) {
@@ -352,65 +243,64 @@ export default {
 						action: function() {
 							self.removeGroup(group.id)
 						}
-					}];
-				};
-				return item;
-			});
+					}]
+				}
+				return item
+			})
 
 			// Every item is added on top of the array, so we're going backward
 			// Groups, separator, disabled, admin, everyone
 
 			// Add separator
-			let realGroups = groups.find((group) => {return group.id !== 'disabled' && group.id !== 'admin'});
-			realGroups = typeof realGroups === 'undefined' ? [] : realGroups;
-			realGroups = Array.isArray(realGroups) ? realGroups : [realGroups];
+			let realGroups = groups.find((group) => { return group.id !== 'disabled' && group.id !== 'admin' })
+			realGroups = typeof realGroups === 'undefined' ? [] : realGroups
+			realGroups = Array.isArray(realGroups) ? realGroups : [realGroups]
 			if (realGroups.length > 0) {
 				let separator = {
 					caption: true,
 					text: t('settings', 'Groups')
-				};
-				groups.unshift(separator);
+				}
+				groups.unshift(separator)
 			}
 
 			// Adjust admin and disabled groups
-			let adminGroup = groups.find(group => group.id == 'admin');
-			let disabledGroup = groups.find(group => group.id == 'disabled');
+			let adminGroup = groups.find(group => group.id === 'admin')
+			let disabledGroup = groups.find(group => group.id === 'disabled')
 
 			// filter out admin and disabled
-			groups = groups.filter(group => ['admin', 'disabled'].indexOf(group.id) === -1);
+			groups = groups.filter(group => ['admin', 'disabled'].indexOf(group.id) === -1)
 
 			if (adminGroup && adminGroup.text) {
-				adminGroup.text = t('settings', 'Admins');	// rename admin group
-				adminGroup.icon = 'icon-user-admin';		// set icon
-				groups.unshift(adminGroup);					// add admin group if present
+				adminGroup.text = t('settings', 'Admins')	// rename admin group
+				adminGroup.icon = 'icon-user-admin'			// set icon
+				groups.unshift(adminGroup)					// add admin group if present
 			}
 			if (disabledGroup && disabledGroup.text) {
-				disabledGroup.text = t('settings', 'Disabled users');	// rename disabled group
-				disabledGroup.icon = 'icon-disabled-users';				// set icon
+				disabledGroup.text = t('settings', 'Disabled users')	// rename disabled group
+				disabledGroup.icon = 'icon-disabled-users'				// set icon
 				if (disabledGroup.utils && (
-					   disabledGroup.utils.counter > 0					// add disabled if not empty 
-					|| disabledGroup.utils.counter === -1)				// add disabled if ldap enabled 
+					disabledGroup.utils.counter > 0						// add disabled if not empty
+					|| disabledGroup.utils.counter === -1)				// add disabled if ldap enabled
 				) {
-					groups.unshift(disabledGroup);						
+					groups.unshift(disabledGroup)
 				}
 			}
 
-
 			// Add everyone group
 			let everyoneGroup = {
 				id: 'everyone',
 				key: 'everyone',
 				icon: 'icon-contacts-dark',
-				router: {name:'users'},
-				text: t('settings', 'Everyone'),
-			};
+				router: { name: 'users' },
+				text: t('settings', 'Everyone')
+			}
 			// users count
 			if (this.userCount > 0) {
 				Vue.set(everyoneGroup, 'utils', {
 					counter: this.userCount
-				});
+				})
 			}
-			groups.unshift(everyoneGroup);
+			groups.unshift(everyoneGroup)
 
 			let addGroup = {
 				id: 'addgroup',
@@ -418,7 +308,7 @@ export default {
 				icon: 'icon-add',
 				text: t('settings', 'Add group'),
 				classes: this.loadingAddGroup ? 'icon-loading-small' : ''
-			};
+			}
 			if (this.showAddGroupEntry) {
 				Vue.set(addGroup, 'edit', {
 					text: t('settings', 'Add group'),
@@ -426,8 +316,8 @@ export default {
 					reset: function() {
 						self.showAddGroupEntry = false
 					}
-				});
-				addGroup.classes = 'editing';
+				})
+				addGroup.classes = 'editing'
 			} else {
 				Vue.set(addGroup, 'action', function() {
 					self.showAddGroupEntry = true
@@ -437,10 +327,141 @@ export default {
 					})
 				})
 			}
-			groups.unshift(addGroup);
+			groups.unshift(addGroup)
 
-			return groups;
+			return groups
+		}
+	},
+	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: {
+		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'}
+		 */
+		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 === null) {
+				return this.setDefaultQuota('none')
+			} else {
+				// unify format output
+				return this.setDefaultQuota(OC.Util.humanFileSize(OC.Util.computerFileSize(quota)))
+			}
+		},
+
+		/**
+		 * 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
+		 * @returns {Array}
+		 */
+		registerAction(icon, text, action) {
+			this.externalActions.push({
+				icon: icon,
+				text: text,
+				action: action
+			})
+			return this.externalActions
+		},
+
+		/**
+		 * Create a new group
+		 *
+		 * @param {Object} event The form submit event
+		 */
+		createGroup(event) {
+			let gid = event.target[0].value
+			this.loadingAddGroup = true
+			this.$store.dispatch('addGroup', gid)
+				.then(() => {
+					this.showAddGroupEntry = false
+					this.loadingAddGroup = false
+					this.$router.push({
+						name: 'group',
+						params: {
+							selectedGroup: gid
+						}
+					})
+				})
+				.catch(() => {
+					this.loadingAddGroup = false
+				})
+		}
 	}
 }
 </script>