52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
}
|