feat: support oidc restriction management in the settings

app/routes/settings/dialogs/add-domain.tsx

@@ -0,0 +1,64 @@
+import { useMemo, useState } from 'react';
+import Dialog from '~/components/Dialog';
+import Input from '~/components/Input';
+
+interface AddDomainProps {
+	domains: string[];
+	isDisabled?: boolean;
+}
+
+export default function AddDomain({ domains, isDisabled }: AddDomainProps) {
+	const [domain, setDomain] = useState('');
+
+	const isInvalid = useMemo(() => {
+		if (!domain || domain.trim().length === 0) {
+			// Empty domain is invalid, but no error shown
+			return false;
+		}
+
+		if (domains.includes(domain.trim())) {
+			return true;
+		}
+
+		try {
+			// Check if domain is a valid FQDN
+			const url = new URL(`http://${domain.trim()}`);
+			return url.hostname !== domain.trim();
+		} catch (e) {
+			// If URL constructor fails, it's not a valid domain
+			return true;
+		}
+	}, [domain, domains]);
+
+	return (
+		<Dialog>
+			<Dialog.Button isDisabled={isDisabled}>Add domain</Dialog.Button>
+			<Dialog.Panel>
+				<Dialog.Title>Add domain</Dialog.Title>
+				<Dialog.Text className="mb-4">
+					Add this domain to a list of allowed email domains that can
+					authenticate with Headscale via OIDC.
+				</Dialog.Text>
+				<input type="hidden" name="action_id" value="add_domain" />
+				<Input
+					isRequired
+					label="Domain"
+					description={
+						domain.trim().length > 0
+							? `Matches users with <user>@${domain.trim()}`
+							: 'Enter a domain to match users with their email addresses.'
+					}
+					placeholder="example.com"
+					name="domain"
+					onChange={setDomain}
+					isInvalid={domain.trim().length === 0 || isInvalid}
+				/>
+				{isInvalid && (
+					<p className="text-red-500 text-sm mt-2">
+						The domain you entered is invalid or already exists in the list.
+					</p>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	);
+}

app/routes/settings/dialogs/add-group.tsx

@@ -0,0 +1,51 @@
+import { useMemo, useState } from 'react';
+import Dialog from '~/components/Dialog';
+import Input from '~/components/Input';
+
+interface AddGroupProps {
+	groups: string[];
+	isDisabled?: boolean;
+}
+
+export default function AddGroup({ groups, isDisabled }: AddGroupProps) {
+	const [group, setGroup] = useState('');
+
+	const isInvalid = useMemo(() => {
+		if (!group || group.trim().length === 0) {
+			// Empty group is invalid, but no error shown
+			return false;
+		}
+
+		if (groups.includes(group.trim())) {
+			return true;
+		}
+	}, [group, groups]);
+
+	return (
+		<Dialog>
+			<Dialog.Button isDisabled={isDisabled}>Add group</Dialog.Button>
+			<Dialog.Panel>
+				<Dialog.Title>Add group</Dialog.Title>
+				<Dialog.Text className="mb-4">
+					Add this group to a list of allowed groups that can authenticate with
+					Headscale via OIDC.
+				</Dialog.Text>
+				<input type="hidden" name="action_id" value="add_group" />
+				<Input
+					isRequired
+					label="Group"
+					description="The group to allow for OIDC authentication."
+					placeholder="admin"
+					name="group"
+					onChange={setGroup}
+					isInvalid={group.trim().length === 0 || isInvalid}
+				/>
+				{isInvalid && (
+					<p className="text-red-500 text-sm mt-2">
+						The group you entered already exists in the list of allowed groups.
+					</p>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	);
+}

app/routes/settings/dialogs/add-user.tsx

@@ -0,0 +1,51 @@
+import { useMemo, useState } from 'react';
+import Dialog from '~/components/Dialog';
+import Input from '~/components/Input';
+
+interface AddUserProps {
+	users: string[];
+	isDisabled?: boolean;
+}
+
+export default function AddUser({ users, isDisabled }: AddUserProps) {
+	const [user, setUser] = useState('');
+
+	const isInvalid = useMemo(() => {
+		if (!user || user.trim().length === 0) {
+			// Empty user is invalid, but no error shown
+			return false;
+		}
+
+		if (users.includes(user.trim())) {
+			return true;
+		}
+	}, [user, users]);
+
+	return (
+		<Dialog>
+			<Dialog.Button isDisabled={isDisabled}>Add user</Dialog.Button>
+			<Dialog.Panel>
+				<Dialog.Title>Add user</Dialog.Title>
+				<Dialog.Text className="mb-4">
+					Add this user to a list of allowed users that can authenticate with
+					Headscale via OIDC.
+				</Dialog.Text>
+				<input type="hidden" name="action_id" value="add_user" />
+				<Input
+					isRequired
+					label="User"
+					description="The user to allow for OIDC authentication."
+					placeholder="john_doe"
+					name="user"
+					onChange={setUser}
+					isInvalid={user.trim().length === 0 || isInvalid}
+				/>
+				{isInvalid && (
+					<p className="text-red-500 text-sm mt-2">
+						The user you entered already exists in the list of allowed users.
+					</p>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	);
+}