From f87065f58f7e9971be02c2078e55239f568ee0d3 Mon Sep 17 00:00:00 2001
From: Aarnav Tale <aarnavtale@icloud.com>
Date: Thu, 24 Apr 2025 18:58:37 -0400
Subject: [PATCH] feat: disable role changing on unmanaged users

---
 CHANGELOG.md                                  |  1 +
 app/routes/users/components/manage-banner.tsx |  2 +-
 app/routes/users/components/menu.tsx          |  2 +-
 app/routes/users/dialogs/create-user.tsx      | 33 +++++++++++++++++--
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b0b76c4..33b5177 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 - Machine tags now show states when waiting for subnet or exit node approval and when expiry is disabled.
 - Expiry status on the UI was incorrectly showing as never due to changes in the Headscale API.
 - Added validation for machine renaming to prevent invalid submissions (closes [#192](https://github.com/tale/headplane/issues/192)).
+- Unmanaged (non-OIDC) users cannot have a role assigned to them so the menu option was disabled.
 
 ### 0.5.10 (April 4, 2025)
 - Fix an issue where other preferences to skip onboarding affected every user.
diff --git a/app/routes/users/components/manage-banner.tsx b/app/routes/users/components/manage-banner.tsx
index 726e95e..4f2a2a2 100644
--- a/app/routes/users/components/manage-banner.tsx
+++ b/app/routes/users/components/manage-banner.tsx
@@ -61,7 +61,7 @@ export default function ManageBanner({ oidc, isDisabled }: ManageBannerProps) {
 							: 'You can add, remove, and rename users here.'}
 					</p>
 					<div className="flex items-center gap-2 mt-4">
-						<CreateUser isDisabled={isDisabled} />
+						<CreateUser isOidc={oidc !== undefined} isDisabled={isDisabled} />
 					</div>
 				</div>
 			</div>
diff --git a/app/routes/users/components/menu.tsx b/app/routes/users/components/menu.tsx
index 01c24e2..b4f9105 100644
--- a/app/routes/users/components/menu.tsx
+++ b/app/routes/users/components/menu.tsx
@@ -48,7 +48,7 @@ export default function UserMenu({ user }: MenuProps) {
 				/>
 			)}
 
-			<Menu disabledKeys={user.provider === 'oidc' ? ['rename'] : []}>
+			<Menu disabledKeys={user.provider === 'oidc' ? ['rename'] : ['reassign']}>
 				<Menu.IconButton
 					label="Machine Options"
 					className={cn(
diff --git a/app/routes/users/dialogs/create-user.tsx b/app/routes/users/dialogs/create-user.tsx
index dc85ae8..9a3cda1 100644
--- a/app/routes/users/dialogs/create-user.tsx
+++ b/app/routes/users/dialogs/create-user.tsx
@@ -2,11 +2,12 @@ import Dialog from '~/components/Dialog';
 import Input from '~/components/Input';
 
 interface CreateUserProps {
+	isOidc?: boolean;
 	isDisabled?: boolean;
 }
 
 // TODO: Support image upload for user avatars
-export default function CreateUser({ isDisabled }: CreateUserProps) {
+export default function CreateUser({ isOidc, isDisabled }: CreateUserProps) {
 	return (
 		<Dialog>
 			<Dialog.Button isDisabled={isDisabled}>Add a new user</Dialog.Button>
@@ -15,21 +16,49 @@ export default function CreateUser({ isDisabled }: CreateUserProps) {
 				<Dialog.Text className="mb-6">
 					Enter a username to create a new user. Usernames can be addressed when
 					managing ACL policies.
+					{isOidc ? (
+						<>
+							{' '}
+							Manually created users are given administrative access to
+							Headplane unless they become linked to an OIDC user in Headscale.
+						</>
+					) : undefined}
 				</Dialog.Text>
 				<input type="hidden" name="action_id" value="create_user" />
 				<div className="flex flex-col gap-4">
 					<Input
 						isRequired
 						name="username"
+						type="text"
 						label="Username"
 						placeholder="my-new-user"
+						validationBehavior="native"
+						validate={(value) => {
+							if (value.trim().length === 0) {
+								return 'Username is required';
+							}
+
+							if (value.includes(' ')) {
+								return 'Usernames cannot contain spaces';
+							}
+
+							return true;
+						}}
 					/>
 					<Input
 						name="display_name"
+						type="text"
 						label="Display Name"
 						placeholder="John Doe"
+						validationBehavior="native"
+					/>
+					<Input
+						name="email"
+						type="email"
+						label="Email"
+						placeholder="name@example.com"
+						validationBehavior="native"
 					/>
-					<Input name="email" label="Email" placeholder="name@example.com" />
 				</div>
 			</Dialog.Panel>
 		</Dialog>