refactor(settings): migrate UserList to script setup

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

Author: pringelmann

apps/settings/src/components/UserList.vue

@@ -59,9 +59,7 @@ import { formDataKey } from './injectionKeys.ts'
 import { diffPayload, userToFormData } from './userFormUtils.ts'
 
 const props = defineProps<{
-	/** The user being edited */
 	user: IUser
-	/** Quota preset options for the quota select */
 	quotaOptions: QuotaOption[]
 }>()
 
@@ -75,15 +73,13 @@ const allGroups = store.getters.getGroups
 const serverLanguages = store.getters.getServerData.languages
 const formData = userToFormData(props.user, allGroups, props.quotaOptions, serverLanguages)
 
-/** Snapshot of initial state for diffing */
 const initialData = structuredClone(formData)
-// Children inject this reactive object and mutate its properties via v-model.
-// Do not reassign editedUser entirely, the injected reference would go stale.
+// Children inject and mutate this object's properties; never reassign it or the
+// injected reference goes stale.
 const editedUser = reactive(formData)
 const saving = ref(false)
 const fieldErrors = ref<Record<string, string>>({})
 
-// Children inject editedUser and mutate its properties via v-model.
 provide(formDataKey, editedUser)
 
 const settings = computed(() => store.getters.getServerData)
@@ -102,8 +98,7 @@ const fieldConfig = computed(() => ({
 }))
 
 /**
- * Diff the form against its initial snapshot and submit only changed fields.
- * Maps a 422 response to per-field errors; closes the dialog on success or no-op.
+ * Submit the changed fields; map a 422 to per-field errors, else close.
  */
 async function save() {
 	// Guard against re-submit while a request is already running. The

apps/settings/src/components/Users/EditUserDialog.vue

@@ -54,11 +54,8 @@ import { useStore } from '../../store/index.js'
 import { formDataKey } from './injectionKeys.ts'
 
 const props = defineProps<{
-	/** Shared loading flags owned by UserList */
 	loading: { all: boolean }
-	/** The reactive new-user form state owned by UserList */
 	newUser: FormData
-	/** Quota preset options for the quota select */
 	quotaOptions: QuotaOption[]
 }>()
 
@@ -68,11 +65,10 @@ const emit = defineEmits<{
 
 const store = useStore()
 
-/** Template ref to UserFormFields, used to focus a field on mount / on error */
 const fields = ref<{ focusField: (name: 'username' | 'password') => void } | null>(null)
 
-// Children inject this reactive object and mutate its properties via v-model.
-// Do not reassign newUser entirely, the injected reference would go stale.
+// Children inject and mutate this object's properties; never reassign it or the
+// injected reference goes stale.
 provide(formDataKey, props.newUser)
 
 const settings = computed(() => store.getters.getServerData)
@@ -81,11 +77,6 @@ const usernameLabel = computed(() => settings.value.newUserGenerateUserID
 	? t('settings', 'Account name will be autogenerated')
 	: t('settings', 'Account name (required)'))
 
-/**
- * Reactive field configuration passed to UserFormFields.
- * Controls visibility, labels, and required state for each field
- * based on the current form values and server settings.
- */
 const fieldConfig = computed(() => ({
 	username: {
 		show: true,
@@ -116,8 +107,7 @@ const fieldConfig = computed(() => ({
 onMounted(() => fields.value?.focusField('username'))
 
 /**
- * Create the account from the current form state. On a known 4xx, focus the
- * offending field (102 = username taken, 107 = password policy).
+ * Create the account from the current form state.
  */
 async function createUser() {
 	// Guard against re-submit while a request is already running. The
@@ -146,8 +136,10 @@ async function createUser() {
 			.response?.data?.ocs?.meta
 		if (meta) {
 			if (meta.statuscode === 102) {
+				// Username already taken.
 				fields.value?.focusField('username')
 			} else if (meta.statuscode === 107) {
+				// Password policy rejected.
 				fields.value?.focusField('password')
 			}
 		}

apps/settings/src/components/Users/NewUserDialog.vue

@@ -113,28 +113,16 @@ import UserFormQuota from './UserFormQuota.vue'
 import { useStore } from '../../store/index.js'
 import { formDataKey } from './injectionKeys.ts'
 
-/** Per-field configuration for visibility, labels, and required state */
 interface FieldConfig {
 	username?: { show?: boolean, disabled?: boolean, label?: string, required?: boolean }
 	password?: { show?: boolean, label?: string, required?: boolean }
 	email?: { label?: string, required?: boolean }
 	showPasswordEmailHint?: boolean
 }
 
-/**
- * Shared form fields for creating and editing user accounts.
- *
- * Injects a reactive `formData` object (provided by the parent dialog)
- * and binds directly to its properties via v-model. Complex field logic
- * (groups, quota, language, manager) is delegated to dedicated sub-components
- * that also inject the same formData.
- */
 const props = withDefaults(defineProps<{
-	/** Quota preset options for the quota select */
 	quotaOptions: QuotaOption[]
-	/** Per-field configuration; only fields differing from defaults need specifying */
 	fieldConfig?: FieldConfig
-	/** Per-field error messages from 422 validation (e.g. { email: 'Invalid' }) */
 	errors?: Record<string, string>
 }>(), {
 	fieldConfig: () => ({}),
@@ -143,24 +131,21 @@ const props = withDefaults(defineProps<{
 
 const store = useStore()
 
-/** Shared, reactive form state provided by the parent dialog */
 const formData = inject(formDataKey)!
 
-/** Template refs used by the parent dialog to focus a field on error */
 const username = ref<{ focus?: () => void } | null>(null)
 const password = ref<{ focus?: () => void } | null>(null)
 
 const minPasswordLength = computed(() => store.getters.getPasswordPolicyMinLength)
 
-/** Errors not bound to a dedicated input, surfaced in the catch-all live region */
+// Errors not bound to a dedicated input, shown in the catch-all live region.
 const unhandledErrors = computed(() => {
 	const handled = new Set(['displayName', 'password', 'email'])
 	return Object.fromEntries(Object.entries(props.errors).filter(([key]) => !handled.has(key)))
 })
 
 /**
- * Focus a named field. Called by the parent dialog (e.g. on 422 to focus the
- * offending input, or on mount to focus the username).
+ * Focus a field. Exposed so the parent dialog can call it on mount or on a 422.
  *
  * @param name The field to focus
  */

apps/settings/src/components/Users/UserFormFields.vue

@@ -56,15 +56,12 @@ import { isSelectableGroup } from './userFormUtils.ts'
 
 const store = useStore()
 
-/** Shared, reactive form state provided by the parent dialog */
 const formData = inject(formDataKey)!
 
-/** True while a freshly tagged group is being created (disables the selects) */
 const creatingGroup = ref(false)
-/** In-flight group search, kept so a new search can cancel the previous one */
+// Kept so a new search can cancel the in-flight one.
 let promise: ReturnType<typeof searchGroupsApi> | null = null
 
-/** Server settings for the current user (admin/delegated-admin flags) */
 const settings = computed(() => store.getters.getServerData)
 
 const availableGroups = computed(() => {
@@ -85,7 +82,7 @@ const groupsLabel = computed(() => !settings.value.isAdmin && !settings.value.is
  * Search groups from the backend and add them to the store.
  *
  * @param query The current search string
- * @param toggleLoading NcSelect callback to toggle its loading spinner
+ * @param toggleLoading NcSelect callback to toggle its spinner
  */
 async function searchGroups(query: string, toggleLoading: (loading: boolean) => void) {
 	if (!settings.value.isAdmin && !settings.value.isDelegatedAdmin) {
@@ -109,7 +106,7 @@ async function searchGroups(query: string, toggleLoading: (loading: boolean) =>
 }
 
 /**
- * Create a new group from a tagged option and add it to the selection.
+ * Create a tagged group and add it to the selection.
  *
  * @param option The created NcSelect option
  * @param option.name The new group id/name

apps/settings/src/components/Users/UserFormGroups.vue

@@ -30,13 +30,10 @@ import { languageFilterBy } from './userFormUtils.ts'
 
 const store = useStore()
 
-/** Shared, reactive form state provided by the parent dialog */
 const formData = inject(formDataKey)!
 
-/** Per-admin UI flags from the store (controls language field visibility) */
 const showConfig = computed(() => store.getters.getShowConfig)
 
-/** Grouped options: a section header followed by its languages, twice */
 const languages = computed(() => {
 	const { commonLanguages, otherLanguages } = store.getters.getServerData.languages
 	return [

apps/settings/src/components/Users/UserFormLanguage.vue

@@ -29,19 +29,14 @@ import { formDataKey } from './injectionKeys.ts'
 
 const store = useStore()
 
-/** Shared, reactive form state provided by the parent dialog */
 const formData = inject(formDataKey)!
 
 const possibleManagers = ref<Array<{ id: string, displayname?: string, email?: string }>>([])
 const loading = ref(false)
 let searchTimeout: ReturnType<typeof setTimeout> | undefined
 let managerModelCache: NcSelectUsersModel | undefined
 
-/**
- * Map internal formData.manager to the NcSelectUsers model shape.
- * Cached to keep object identity stable across reads, so NcSelectUsers
- * doesn't see a fresh modelValue on every parent re-render.
- */
+// Cache by value so NcSelectUsers keeps a stable modelValue reference across re-renders.
 const managerModel = computed<NcSelectUsersModel | undefined>(() => {
 	const m = formData.manager
 	if (!m) {
@@ -56,7 +51,6 @@ const managerModel = computed<NcSelectUsersModel | undefined>(() => {
 	return managerModelCache
 })
 
-/** Map API users to the NcSelectUsers model shape */
 const managerOptions = computed<NcSelectUsersModel[]>(() => possibleManagers.value.map((u) => ({
 	id: u.id,
 	displayName: u.displayname ?? u.id,
@@ -66,9 +60,9 @@ const managerOptions = computed<NcSelectUsersModel[]>(() => possibleManagers.val
 onBeforeUnmount(() => clearTimeout(searchTimeout))
 
 /**
- * Map the NcSelectUsers model back to the internal formData shape
+ * Write the selected manager back to formData.
  *
- * @param value The selected manager model, or null when cleared
+ * @param value The selected model, or null when cleared
  */
 function onManagerChange(value: NcSelectUsersModel | NcSelectUsersModel[] | null) {
 	const manager = Array.isArray(value) ? value[0] : value
@@ -78,7 +72,7 @@ function onManagerChange(value: NcSelectUsersModel | NcSelectUsersModel[] | null
 }
 
 /**
- * Debounce keystrokes so a 10-char query produces 1-2 requests, not 10.
+ * Debounce the search so a 10-char query produces 1-2 requests, not 10.
  *
  * @param query The current search string
  */
@@ -88,7 +82,7 @@ function searchUserManager(query: string) {
 }
 
 /**
- * Fetch matching users from the store to populate the manager dropdown.
+ * Fetch matching users to populate the manager dropdown.
  *
  * @param query The current search string
  */

apps/settings/src/components/Users/UserFormManager.vue

@@ -27,18 +27,15 @@ import { formDataKey } from './injectionKeys.ts'
 import { validateQuota as validateQuotaOption } from './userFormUtils.ts'
 
 const props = defineProps<{
-	/** Quota preset options; the first entry is the fallback for invalid input */
 	quotaOptions: QuotaOption[]
 }>()
 
-/** Shared, reactive form state provided by the parent dialog */
 const formData = inject(formDataKey)!
 
 /**
- * Wraps the pure validator so NcSelect's create-option callback receives the
- * preset fallback (first option) for unparseable quota strings.
+ * Validate a typed quota, falling back to the first preset when unparseable.
  *
- * @param quota Raw quota string entered by the user
+ * @param quota The raw quota string entered in the select
  */
 function validateQuota(quota: string) {
 	return validateQuotaOption(quota, props.quotaOptions[0])

apps/settings/src/components/Users/UserFormQuota.vue

@@ -146,22 +146,15 @@ import { useStore } from '../../store/index.js'
 import { isObfuscated as isObfuscatedUser } from '../../utils/userUtils.ts'
 
 const props = withDefaults(defineProps<{
-	/** The user this row renders */
 	user: IUser
-	/** Whether the row is within the rendered viewport window */
 	visible: boolean
-	/** All loaded users (passed through from the list) */
 	users: IUser[]
-	/** Quota preset options */
 	quotaOptions: QuotaOption[]
-	/** Grouped language options */
 	languages: { languages: LanguageOption[] }[]
-	/** Server settings for the current admin (loose until the store is typed) */
+	// settings is loose until the store is typed.
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	settings: Record<string, any>
-	/** Extra row actions contributed by other apps */
 	externalActions?: { icon: string, text: string, action: (...args: unknown[]) => void }[]
-	/** Callback from UserList to open the edit dialog */
 	onEditUser?: ((user: IUser) => void) | null
 }>(), {
 	externalActions: () => [],
@@ -318,15 +311,17 @@ const userActions = computed(() => {
 	return actions.concat(props.externalActions)
 })
 
-/** Open the edit dialog for this user via the list-provided callback */
+/**
+ * Open the edit dialog via the list-provided callback.
+ */
 function toggleEdit() {
 	if (props.onEditUser) {
 		props.onEditUser(props.user)
 	}
 }
 
 /**
- * Confirm and remotely wipe all devices associated with this account.
+ * Confirm and remotely wipe the account's devices.
  */
 async function wipeUserDevices() {
 	const userid = props.user.id
@@ -361,7 +356,7 @@ async function wipeUserDevices() {
 }
 
 /**
- * Confirm and fully delete this account and its data.
+ * Confirm and fully delete the account and its data.
  */
 async function deleteUser() {
 	const userid = props.user.id
@@ -391,7 +386,7 @@ async function deleteUser() {
 }
 
 /**
- * Toggle this account's enabled state.
+ * Toggle the account's enabled state.
  */
 function enableDisableUser() {
 	loading.delete = true
@@ -409,7 +404,7 @@ function enableDisableUser() {
 }
 
 /**
- * Resend the welcome email to this account.
+ * Resend the welcome email to the account.
  */
 function sendWelcomeMail() {
 	loading.all = true

apps/settings/src/components/Users/UserRow.vue

@@ -50,18 +50,14 @@ interface UserAction {
 }
 
 const props = defineProps<{
-	/** Row action descriptors; the optional `enabled` predicate filters them per user */
 	actions: readonly UserAction[]
-	/** Disables all actions (e.g. while a request is pending) */
 	disabled: boolean
-	/** The user the actions operate on */
 	user: Record<string, unknown>
 }>()
 
 defineEmits<{
 	'update:edit': [value: boolean]
 }>()
 
-/** Actions whose optional `enabled(user)` predicate passes for this user */
 const enabledActions = computed<UserAction[]>(() => props.actions.filter((action) => typeof action.enabled === 'function' ? action.enabled(props.user) : true))
 </script>