49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import Code from '~/components/Code';
|
|
import Dialog from '~/components/Dialog';
|
|
import Input from '~/components/Input';
|
|
|
|
interface Props {
|
|
name: string;
|
|
isDisabled: boolean;
|
|
}
|
|
|
|
export default function RenameTailnet({ name, isDisabled }: Props) {
|
|
return (
|
|
<div className="flex flex-col w-2/3 gap-y-4">
|
|
<h1 className="text-2xl font-medium mb-2">Tailnet Name</h1>
|
|
<p>
|
|
This is the base domain name of your Tailnet. Devices are accessible at{' '}
|
|
<Code>[device].{name}</Code> when Magic DNS is enabled.
|
|
</p>
|
|
<Input
|
|
isReadOnly
|
|
labelHidden
|
|
className="w-3/5 font-medium text-sm"
|
|
label="Tailnet name"
|
|
value={name}
|
|
onFocus={(event) => {
|
|
event.target.select();
|
|
}}
|
|
/>
|
|
<Dialog>
|
|
<Dialog.Button isDisabled={isDisabled}>Rename Tailnet</Dialog.Button>
|
|
<Dialog.Panel isDisabled={isDisabled}>
|
|
<Dialog.Title>Rename Tailnet</Dialog.Title>
|
|
<Dialog.Text className="mb-8">
|
|
Keep in mind that changing this can lead to all sorts of unexpected
|
|
behavior and may break existing devices in your tailnet.
|
|
</Dialog.Text>
|
|
<input type="hidden" name="action_id" value="rename_tailnet" />
|
|
<Input
|
|
isRequired
|
|
label="Tailnet name"
|
|
placeholder="ts.net"
|
|
defaultValue={name}
|
|
name="new_name"
|
|
/>
|
|
</Dialog.Panel>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|