From 72f41f399dba7db6b291ff47273a3d1e378013a1 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Wed, 8 Apr 2026 10:29:16 +0200
Subject: [PATCH] fix(settings): replace disabled username input with static
 display, use design tokens -e Signed-off-by: Peter Ringelmann
 <peter.ringelmann@nextcloud.com>

---
 .../src/components/Users/EditUserDialog.vue   | 15 +-----
 .../src/components/Users/NewUserDialog.vue    | 15 +-----
 .../src/components/Users/UserFormFields.vue   | 53 +++++++++++++++----
 .../src/components/Users/UserFormGroups.vue   |  3 ++
 4 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/apps/settings/src/components/Users/EditUserDialog.vue b/apps/settings/src/components/Users/EditUserDialog.vue
index 58c37d61052..ef592b05381 100644
--- a/apps/settings/src/components/Users/EditUserDialog.vue
+++ b/apps/settings/src/components/Users/EditUserDialog.vue
@@ -148,19 +148,8 @@ export default {
 
 <style lang="scss" scoped>
 .edit-dialog {
-	&__form {
-		padding: 0 8px;
-	}
-
-	&__submit {
-		margin-top: 4px;
-		margin-bottom: 8px;
-	}
-
-	:deep {
-		.dialog__actions {
-			margin: auto;
-		}
+	:deep(.dialog__actions) {
+		margin-block-start: calc(var(--default-grid-baseline, 4px) * 3);
 	}
 }
 </style>
diff --git a/apps/settings/src/components/Users/NewUserDialog.vue b/apps/settings/src/components/Users/NewUserDialog.vue
index c0b3e177ab7..7674fb7748a 100644
--- a/apps/settings/src/components/Users/NewUserDialog.vue
+++ b/apps/settings/src/components/Users/NewUserDialog.vue
@@ -162,19 +162,8 @@ export default {
 
 <style lang="scss" scoped>
 .dialog {
-	&__form {
-		padding: 0 8px;
-	}
-
-	&__submit {
-		margin-top: 4px;
-		margin-bottom: 8px;
-	}
-
-	:deep {
-		.dialog__actions {
-			margin: auto;
-		}
+	:deep(.dialog__actions) {
+		margin-block-start: calc(var(--default-grid-baseline, 4px) * 3);
 	}
 }
 </style>
diff --git a/apps/settings/src/components/Users/UserFormFields.vue b/apps/settings/src/components/Users/UserFormFields.vue
index 48465a961d0..84bcdc4f350 100644
--- a/apps/settings/src/components/Users/UserFormFields.vue
+++ b/apps/settings/src/components/Users/UserFormFields.vue
@@ -5,13 +5,26 @@
 
 <template>
 	<div class="user-form-fields">
+		<!-- Static display for non-editable username (edit dialog) -->
+		<div
+			v-if="fieldConfig.username?.show && fieldConfig.username?.disabled"
+			class="user-form-fields__item user-form-fields__static"
+			data-test="username">
+			<span class="user-form-fields__static-label">
+				{{ fieldConfig.username?.label }}
+			</span>
+			<span class="user-form-fields__static-value">
+				{{ formData.username }}
+			</span>
+		</div>
+
+		<!-- Editable username input (create dialog) -->
 		<NcTextField
-			v-if="fieldConfig.username?.show"
+			v-else-if="fieldConfig.username?.show"
 			ref="username"
 			v-model="formData.username"
 			class="user-form-fields__item"
 			data-test="username"
-			:disabled="fieldConfig.username?.disabled"
 			:label="fieldConfig.username?.label"
 			autocapitalize="none"
 			autocomplete="off"
@@ -171,7 +184,7 @@ export default {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 4px 0;
+	gap: calc(var(--default-grid-baseline, 4px) * 2) 0;
 
 	&__item {
 		width: 100%;
@@ -181,9 +194,31 @@ export default {
 		}
 	}
 
+	&__static {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		min-height: var(--default-clickable-area, 44px);
+		padding: var(--border-width-input-focused, 2px);
+		padding-inline: calc(var(--border-radius-element, 8px) + var(--border-width-input-focused, 2px));
+
+		&-label {
+			font-size: var(--font-size-small, 13px);
+			font-weight: 500;
+			line-height: 1.5;
+			color: var(--color-text-maxcontrast);
+		}
+
+		&-value {
+			font-size: var(--default-font-size, 14px);
+			line-height: 1.5;
+			color: var(--color-main-text);
+		}
+	}
+
 	&__hint {
 		color: var(--color-text-maxcontrast);
-		margin-top: 8px;
+		margin-block-start: calc(var(--default-grid-baseline, 4px) * 2);
 		align-self: flex-start;
 	}
 
@@ -196,18 +231,14 @@ export default {
 		width: 100%;
 	}
 
-	:deep(.user-form__managers) {
-		margin-bottom: 12px;
-	}
-
 	&__error-summary {
 		width: 100%;
-		margin-top: 8px;
+		margin-block-start: calc(var(--default-grid-baseline, 4px) * 2);
 		color: var(--color-error);
-		font-size: var(--default-font-size, 0.875rem);
+		font-size: var(--default-font-size, 14px);
 
 		p {
-			margin: 2px 0;
+			margin-block: calc(var(--default-grid-baseline, 4px) / 2);
 		}
 	}
 }
diff --git a/apps/settings/src/components/Users/UserFormGroups.vue b/apps/settings/src/components/Users/UserFormGroups.vue
index 1aebff4c7f4..8e28ec6fe54 100644
--- a/apps/settings/src/components/Users/UserFormGroups.vue
+++ b/apps/settings/src/components/Users/UserFormGroups.vue
@@ -125,6 +125,9 @@ export default {
 
 <style lang="scss" scoped>
 .user-form-groups {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline, 4px) * 2) 0;
 	width: 100%;
 }