89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import { Computer, KeySquare } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { useNavigate } from 'react-router';
|
|
import Code from '~/components/Code';
|
|
import Dialog from '~/components/Dialog';
|
|
import Input from '~/components/Input';
|
|
import Menu from '~/components/Menu';
|
|
import Select from '~/components/Select';
|
|
import type { User } from '~/types';
|
|
|
|
export interface NewProps {
|
|
server: string;
|
|
users: User[];
|
|
}
|
|
|
|
export default function New(data: NewProps) {
|
|
const [pushDialog, setPushDialog] = useState(false);
|
|
const [mkey, setMkey] = useState('');
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<>
|
|
<Dialog isOpen={pushDialog} onOpenChange={setPushDialog}>
|
|
<Dialog.Panel isDisabled={!mkey.trim().startsWith('mkey:')}>
|
|
<Dialog.Title>Register Machine Key</Dialog.Title>
|
|
<Dialog.Text className="mb-4">
|
|
The machine key is given when you run{' '}
|
|
<Code isCopyable>
|
|
tailscale up --login-server=
|
|
{data.server}
|
|
</Code>{' '}
|
|
on your device.
|
|
</Dialog.Text>
|
|
<input type="hidden" name="_method" value="register" />
|
|
<input type="hidden" name="id" value="_" />
|
|
<Input
|
|
isRequired
|
|
label="Machine Key"
|
|
placeholder="mkey:ff....."
|
|
validationBehavior="native"
|
|
name="mkey"
|
|
onChange={setMkey}
|
|
/>
|
|
<Select
|
|
isRequired
|
|
label="Owner"
|
|
name="user"
|
|
placeholder="Select a user"
|
|
>
|
|
{data.users.map((user) => (
|
|
<Select.Item key={user.id}>{user.name}</Select.Item>
|
|
))}
|
|
</Select>
|
|
</Dialog.Panel>
|
|
</Dialog>
|
|
<Menu>
|
|
<Menu.Button variant="heavy">Add Device</Menu.Button>
|
|
<Menu.Panel
|
|
onAction={(key) => {
|
|
if (key === 'register') {
|
|
setPushDialog(true);
|
|
return;
|
|
}
|
|
|
|
if (key === 'pre-auth') {
|
|
navigate('/settings/auth-keys');
|
|
}
|
|
}}
|
|
>
|
|
<Menu.Section>
|
|
<Menu.Item key="register" textValue="Register Machine Key">
|
|
<div className="flex items-center gap-x-3">
|
|
<Computer className="w-4" />
|
|
Register Machine Key
|
|
</div>
|
|
</Menu.Item>
|
|
<Menu.Item key="pre-auth" textValue="Generate Pre-auth Key">
|
|
<div className="flex items-center gap-x-3">
|
|
<KeySquare className="w-4" />
|
|
Generate Pre-auth Key
|
|
</div>
|
|
</Menu.Item>
|
|
</Menu.Section>
|
|
</Menu.Panel>
|
|
</Menu>
|
|
</>
|
|
);
|
|
}
|