135 lines
3.4 KiB
TypeScript
135 lines
3.4 KiB
TypeScript
import { Form, useFetcher, Link } from '@remix-run/react'
|
|
import { Dispatch, SetStateAction, useState, useEffect } 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 Spinner from '~/components/Spinner'
|
|
import { toast } from '~/components/Toaster'
|
|
import { Machine, User } from '~/types'
|
|
|
|
export interface NewProps {
|
|
server: string
|
|
users: User[]
|
|
}
|
|
|
|
export default function New(data: NewProps) {
|
|
const fetcher = useFetcher<{ success?: boolean }>()
|
|
const mkeyState = useState(false)
|
|
const [mkey, setMkey] = useState('')
|
|
const [user, setUser] = useState('')
|
|
const [toasted, setToasted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (!fetcher.data || toasted) {
|
|
return
|
|
}
|
|
|
|
if (fetcher.data.success) {
|
|
toast('Registered new machine')
|
|
} else {
|
|
toast('Failed to register machine due to an invalid key')
|
|
}
|
|
|
|
setToasted(true)
|
|
}, [fetcher.data, toasted, mkey])
|
|
|
|
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 isCopyable>
|
|
tailscale up --login-server=
|
|
{data.server}
|
|
</Code>
|
|
{' '}
|
|
on your device.
|
|
</Dialog.Text>
|
|
<fetcher.Form method="POST" onSubmit={e => {
|
|
fetcher.submit(e.currentTarget)
|
|
close()
|
|
}}>
|
|
<input type="hidden" name="_method" value="register" />
|
|
<input type="hidden" name="id" value="_" />
|
|
<TextField
|
|
label='Machine Key'
|
|
placeholder='mkey: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"
|
|
isDisabled={!mkey || !mkey.trim().startsWith('mkey:') || !user}
|
|
>
|
|
{fetcher.state === 'idle'
|
|
? undefined
|
|
: (
|
|
<Spinner className="w-3 h-3" />
|
|
)}
|
|
Register
|
|
</Dialog.Action>
|
|
</div>
|
|
</fetcher.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>
|
|
<Link to="/settings/auth-keys">
|
|
<KeyIcon className='w-4 h-4 mr-2'/>
|
|
Generate Pre-auth Key
|
|
</Link>
|
|
</Menu.ItemButton>
|
|
</Menu.Items>
|
|
</Menu>
|
|
</>
|
|
)
|
|
}
|