Reset and init new user form language

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

1 files changed, 48 insertions, 19 deletions

diff --git a/settings/src/components/userList.vue b/settings/src/components/userList.vue
index 48c8b9d7b86..36b638d97f1 100644
--- a/settings/src/components/userList.vue
+++ b/settings/src/components/userList.vue
@@ -141,6 +141,28 @@ import Multiselect from 'vue-multiselect';
 import InfiniteLoading from 'vue-infinite-loading';
 import Vue from 'vue';
 
+const unlimitedQuota = {
+	id: 'none',
+	label: t('settings', 'Unlimited')
+}
+const defaultQuota = {
+	id: 'default',
+	label: t('settings', 'Default quota')
+}
+const newUser = {
+	id: '',
+	displayName: '',
+	password: '',
+	mailAddress: '',
+	groups: [],
+	subAdminsGroups: [],
+	quota: defaultQuota,
+	language: {
+		code: 'en',
+		name: t('settings', 'Default language')
+	}
+}
+
 export default {
 	name: 'userList',
 	props: ['users', 'showConfig', 'selectedGroup', 'externalActions'],
@@ -150,27 +172,16 @@ export default {
 		InfiniteLoading
 	},
 	data() {
-		let unlimitedQuota = {id:'none', label:t('settings', 'Unlimited')},
-			defaultQuota = {id:'default', label:t('settings', 'Default quota')};
 		return {
-			unlimitedQuota: unlimitedQuota,
-			defaultQuota: defaultQuota,
+			unlimitedQuota,
+			defaultQuota,
 			loading: {
 				all: false,
 				groups: false
 			},
 			scrolled: false,
 			searchQuery: '',
-			newUser: {
-				id:'',
-				displayName:'',
-				password:'',
-				mailAddress:'',
-				groups: [],
-				subAdminsGroups: [],
-				quota: defaultQuota,
-				language: {code: 'en', name: t('settings', 'Default language')}
-			}
+			newUser: Object.assign({}, newUser)
 		};
 	},
 	mounted() {
@@ -186,10 +197,9 @@ export default {
 		Vue.set(this.newUser.language, 'code', this.settings.defaultLanguage);
 
 		/**
-		 * In case the user directly loaded the user list within a group
-		 * the watch won't be triggered. We need to initialize it.
+		 * Reset and init new user form
 		 */
-		this.setNewUserDefaultGroup(this.$route.params.selectedGroup);
+		this.resetForm()
 
 		/** 
 		 * Register search
@@ -321,7 +331,23 @@ export default {
 
 		resetForm() {
 			// revert form to original state
-			Object.assign(this.newUser, this.$options.data.call(this).newUser);
+			this.newUser = Object.assign({}, newUser);
+
+			/** 
+			 * Init default language from server data. The use of this.settings
+			 * requires a computed variable, which break the v-model binding of the form,
+			 * this is a much easier solution than getter and setter on a computed var
+			 */
+			if (this.settings.defaultLanguage) {
+				Vue.set(this.newUser.language, 'code', this.settings.defaultLanguage);
+			}
+
+			/**
+			 * In case the user directly loaded the user list within a group
+			 * the watch won't be triggered. We need to initialize it.
+			 */
+			this.setNewUserDefaultGroup(this.selectedGroup);
+
 			this.loading.all = false;
 		},
 		createUser() {
@@ -336,7 +362,10 @@ export default {
 				quota: this.newUser.quota.id,
 				language: this.newUser.language.code,
 			})
-			.then(() => this.resetForm())
+			.then(() => {
+				this.resetForm()
+				this.$refs.newusername.focus();
+			})
 			.catch((error) => {
 				this.loading.all = false;
 				if (error.response && error.response.data && error.response.data.ocs && error.response.data.ocs.meta) {