fix(settings): Move user creation modal to dialog

Signed-off-by: Christopher Ng <chrng8@gmail.com>

2 files changed, 55 insertions, 38 deletions

diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 00289c6f84a..ec8b9fe17d3 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -22,12 +22,12 @@
 
 <template>
 	<Fragment>
-		<NewUserModal v-if="showConfig.showNewUserForm"
+		<NewUserDialog v-if="showConfig.showNewUserForm"
 			:loading="loading"
 			:new-user="newUser"
 			:quota-options="quotaOptions"
 			@reset="resetForm"
-			@close="closeModal" />
+			@closing="closeDialog" />
 
 		<NcEmptyContent v-if="filteredUsers.length === 0"
 			class="empty"
@@ -88,7 +88,7 @@ import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import VirtualList from './Users/VirtualList.vue'
-import NewUserModal from './Users/NewUserModal.vue'
+import NewUserDialog from './Users/NewUserDialog.vue'
 import UserListFooter from './Users/UserListFooter.vue'
 import UserListHeader from './Users/UserListHeader.vue'
 import UserRow from './Users/UserRow.vue'
@@ -119,7 +119,7 @@ export default {
 		NcEmptyContent,
 		NcIconSvgWrapper,
 		NcLoadingIcon,
-		NewUserModal,
+		NewUserDialog,
 		UserListFooter,
 		UserListHeader,
 		VirtualList,
@@ -332,7 +332,7 @@ export default {
 			this.isInitialLoad = false
 		},
 
-		closeModal() {
+		closeDialog() {
 			this.$store.commit('setShowConfig', {
 				key: 'showNewUserForm',
 				value: false,
diff --git a/apps/settings/src/components/Users/NewUserModal.vue b/apps/settings/src/components/Users/NewUserDialog.vue
index 249baa6faf0..076e352733b 100644
--- a/apps/settings/src/components/Users/NewUserModal.vue
+++ b/apps/settings/src/components/Users/NewUserDialog.vue
@@ -21,16 +21,18 @@
 -->
 
 <template>
-	<NcModal class="modal"
+	<NcDialog class="dialog"
 		size="small"
+		:name="t('settings', 'New user')"
+		out-transition
 		v-on="$listeners">
-		<form class="modal__form"
+		<form id="new-user-form"
+			class="dialog__form"
 			data-test="form"
 			:disabled="loading.all"
 			@submit.prevent="createUser">
-			<h2>{{ t('settings', 'New user') }}</h2>
 			<NcTextField ref="username"
-				class="modal__item"
+				class="dialog__item"
 				data-test="username"
 				:value.sync="newUser.id"
 				:disabled="settings.newUserGenerateUserID"
@@ -40,7 +42,7 @@
 				spellcheck="false"
 				pattern="[a-zA-Z0-9 _\.@\-']+"
 				required />
-			<NcTextField class="modal__item"
+			<NcTextField class="dialog__item"
 				data-test="displayName"
 				:value.sync="newUser.displayName"
 				:label="t('settings', 'Display name')"
@@ -49,11 +51,11 @@
 				spellcheck="false" />
 			<span v-if="!settings.newUserRequireEmail"
 				id="password-email-hint"
-				class="modal__hint">
+				class="dialog__hint">
 				{{ t('settings', 'Either password or email is required') }}
 			</span>
 			<NcPasswordField ref="password"
-				class="modal__item"
+				class="dialog__item"
 				data-test="password"
 				:value.sync="newUser.password"
 				:minlength="minPasswordLength"
@@ -64,7 +66,7 @@
 				autocomplete="new-password"
 				spellcheck="false"
 				:required="newUser.mailAddress === ''" />
-			<NcTextField class="modal__item"
+			<NcTextField class="dialog__item"
 				data-test="email"
 				type="email"
 				:value.sync="newUser.mailAddress"
@@ -74,12 +76,12 @@
 				autocomplete="off"
 				spellcheck="false"
 				:required="newUser.password === '' || settings.newUserRequireEmail" />
-			<div class="modal__item">
-				<label class="modal__label"
+			<div class="dialog__item">
+				<label class="dialog__label"
 					for="new-user-groups">
 					{{ !settings.isAdmin ? t('settings', 'Groups (required)') : t('settings', 'Groups') }}
 				</label>
-				<NcSelect class="modal__select"
+				<NcSelect class="dialog__select"
 					input-id="new-user-groups"
 					:placeholder="t('settings', 'Set user groups')"
 					:disabled="loading.groups || loading.all"
@@ -97,13 +99,13 @@
 						Therefore, empty select is forbidden -->
 			</div>
 			<div v-if="subAdminsGroups.length > 0"
-				class="modal__item">
-				<label class="modal__label"
+				class="dialog__item">
+				<label class="dialog__label"
 					for="new-user-sub-admin">
 					{{ t('settings', 'Administered groups') }}
 				</label>
 				<NcSelect v-model="newUser.subAdminsGroups"
-					class="modal__select"
+					class="dialog__select"
 					input-id="new-user-sub-admin"
 					:placeholder="t('settings', 'Set user as admin for …')"
 					:options="subAdminsGroups"
@@ -111,13 +113,13 @@
 					:multiple="true"
 					label="name" />
 			</div>
-			<div class="modal__item">
-				<label class="modal__label"
+			<div class="dialog__item">
+				<label class="dialog__label"
 					for="new-user-quota">
 					{{ t('settings', 'Quota') }}
 				</label>
 				<NcSelect v-model="newUser.quota"
-					class="modal__select"
+					class="dialog__select"
 					input-id="new-user-quota"
 					:placeholder="t('settings', 'Set user quota')"
 					:options="quotaOptions"
@@ -126,13 +128,13 @@
 					:create-option="validateQuota" />
 			</div>
 			<div v-if="showConfig.showLanguages"
-				class="modal__item">
-				<label class="modal__label"
+				class="dialog__item">
+				<label class="dialog__label"
 					for="new-user-language">
 					{{ t('settings', 'Language') }}
 				</label>
 				<NcSelect	v-model="newUser.language"
-					class="modal__select"
+					class="dialog__select"
 					input-id="new-user-language"
 					:placeholder="t('settings', 'Set default language')"
 					:clearable="false"
@@ -141,14 +143,14 @@
 					:options="languages"
 					label="name" />
 			</div>
-			<div :class="['modal__item managers', { 'icon-loading-small': loading.manager }]">
-				<label class="modal__label"
+			<div :class="['dialog__item dialog__managers', { 'icon-loading-small': loading.manager }]">
+				<label class="dialog__label"
 					for="new-user-manager">
 					<!-- TRANSLATORS This string describes a manager in the context of an organization -->
 					{{ t('settings', 'Manager') }}
 				</label>
 				<NcSelect v-model="newUser.manager"
-					class="modal__select"
+					class="dialog__select"
 					input-id="new-user-manager"
 					:placeholder="managerLabel"
 					:options="possibleManagers"
@@ -156,29 +158,33 @@
 					label="displayname"
 					@search="searchUserManager" />
 			</div>
-			<NcButton class="modal__submit"
+		</form>
+
+		<template #actions>
+			<NcButton class="dialog__submit"
 				data-test="submit"
+				form="new-user-form"
 				type="primary"
 				native-type="submit">
 				{{ t('settings', 'Add new user') }}
 			</NcButton>
-		</form>
-	</NcModal>
+		</template>
+	</NcDialog>
 </template>
 
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 export default {
-	name: 'NewUserModal',
+	name: 'NewUserDialog',
 
 	components: {
 		NcButton,
-		NcModal,
+		NcDialog,
 		NcPasswordField,
 		NcSelect,
 		NcTextField,
@@ -290,7 +296,7 @@ export default {
 
 				this.$emit('reset')
 				this.$refs.username?.$refs?.inputField?.$refs?.input?.focus?.()
-				this.$emit('close')
+				this.$emit('closing')
 			} catch (error) {
 				this.loading.all = false
 				if (error.response && error.response.data && error.response.data.ocs && error.response.data.ocs.meta) {
@@ -383,12 +389,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.modal {
+.dialog {
 	&__form {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		padding: 20px;
+		padding: 0 8px;
 		gap: 4px 0;
 	}
 
@@ -415,8 +421,19 @@ export default {
 		width: 100%;
 	}
 
+	&__managers {
+		margin-bottom: 12px;
+	}
+
 	&__submit {
-		margin-top: 20px;
+		margin-top: 4px;
+		margin-bottom: 8px;
+	}
+
+	:deep {
+		.dialog__actions {
+			margin: auto;
+		}
 	}
 }
 </style>