115 lines
2.8 KiB
TypeScript
115 lines
2.8 KiB
TypeScript
import { Form, useSubmit } from '@remix-run/react'
|
|
import { Dispatch, SetStateAction, useState } from 'react'
|
|
import { PlusIcon, ServerIcon, KeyIcon } from '@primer/octicons-react'
|
|
import { cn } from '~/utils/cn'
|
|
|
|
import Code from '~/components/Code'
|
|
import Dialog from '~/components/Dialog'
|
|
import TextField from '~/components/TextField'
|
|
import Select from '~/components/Select'
|
|
import Menu from '~/components/Menu'
|
|
import { Machine, User } from '~/types'
|
|
|
|
export interface NewProps {
|
|
server: string
|
|
users: User[]
|
|
}
|
|
|
|
export default function New(data: NewProps) {
|
|
const submit = useSubmit()
|
|
const mkeyState = useState(false)
|
|
const pkeyState = useState(false)
|
|
const [mkey, setMkey] = useState('')
|
|
const [user, setUser] = useState(data.users[0].id)
|
|
|
|
return (
|
|
<>
|
|
<Dialog>
|
|
<Dialog.Panel control={mkeyState}>
|
|
{close => (
|
|
<>
|
|
<Dialog.Title>
|
|
Register Machine Key
|
|
</Dialog.Title>
|
|
<Dialog.Text className='mb-4'>
|
|
The machine key is given when you run
|
|
{' '}
|
|
<Code>
|
|
tailscale up --login-server=
|
|
</Code>
|
|
<Code>
|
|
{data.server}
|
|
</Code>
|
|
{' '}
|
|
on your device.
|
|
</Dialog.Text>
|
|
<Form
|
|
method="POST"
|
|
onSubmit={(e) => {
|
|
submit(e.currentTarget)
|
|
}}
|
|
>
|
|
<input type="hidden" name="_method" value="register" />
|
|
<input type="hidden" name="id" value="_" />
|
|
<TextField
|
|
label='Machine Key'
|
|
placeholder='nodekey:ff.....'
|
|
name="mkey"
|
|
state={[mkey, setMkey]}
|
|
className='my-2 font-mono'
|
|
/>
|
|
<Select
|
|
label="Owner"
|
|
name="user"
|
|
placeholder="Select a user"
|
|
state={[user, setUser]}
|
|
>
|
|
{data.users.map(user => (
|
|
<Select.Item key={user.id} id={user.name}>
|
|
{user.name}
|
|
</Select.Item>
|
|
))}
|
|
</Select>
|
|
<div className='mt-6 flex justify-end gap-2 mt-6'>
|
|
<Dialog.Action
|
|
variant="cancel"
|
|
onPress={close}
|
|
>
|
|
Cancel
|
|
</Dialog.Action>
|
|
<Dialog.Action
|
|
variant="confirm"
|
|
onPress={close}
|
|
>
|
|
Register
|
|
</Dialog.Action>
|
|
</div>
|
|
</Form>
|
|
</>
|
|
)}
|
|
</Dialog.Panel>
|
|
</Dialog>
|
|
<Menu>
|
|
<Menu.Button
|
|
className={cn(
|
|
'w-fit text-sm rounded-lg px-4 py-2',
|
|
'bg-main-700 dark:bg-main-800 text-white',
|
|
'hover:bg-main-800 dark:hover:bg-main-700',
|
|
)}
|
|
>
|
|
Add Device
|
|
</Menu.Button>
|
|
<Menu.Items>
|
|
<Menu.ItemButton control={mkeyState}>
|
|
<ServerIcon className='w-4 h-4 mr-2'/>
|
|
Register Machine Key
|
|
</Menu.ItemButton>
|
|
<Menu.ItemButton control={pkeyState} isDisabled>
|
|
<KeyIcon className='w-4 h-4 mr-2'/>
|
|
Generate Pre-auth Key
|
|
</Menu.ItemButton>
|
|
</Menu.Items>
|
|
</Menu>
|
|
</>
|
|
)
|
|
}
|