dahjah/headplane
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add modal to disable magic dns

Browse Source
This commit is contained in:
Aarnav Tale 2024-03-28 14:20:19 -04:00
parent 6d4e6ebce1
commit db9d08b7f3
No known key found for this signature in database
2 changed files with 75 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/routes/_data.dns._index/rename.tsx
View File

@ -1,7 +1,12 @@
import { Dialog } from '@headlessui/react'
import { Form } from '@remix-run/react'
import { useState } from 'react'
export default function Modal() {
type Properties = {
readonly name: string;
}
export default function Modal({ name }: Properties) {
const [isOpen, setIsOpen] = useState(false)
return (
@ -22,29 +27,29 @@ export default function Modal() {
}}
>
<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
<div className='fixed inset-0 flex w-screen items-center justify-center p-4'>
<div className='fixed inset-0 flex w-screen items-center justify-center'>
<Dialog.Panel className='bg-white rounded-lg p-4 w-full max-w-md'>
<Dialog.Title>
Rename Tailnet
<Dialog.Title className='text-lg font-bold'>
Rename {name}
</Dialog.Title>
<Dialog.Description>
<p>
Enter a new name for your Tailnet.
</p>
<Dialog.Description className='text-gray-500 dark:text-gray-400'>
Keep in mind that changing this can lead to all sorts
of unexpected behavior and may break existing devices
in your tailnet.
</Dialog.Description>
<div className='flex gap-4'>
<Form method='PATCH'>
<input
type='text'
className='border rounded-lg p-2 w-full'
placeholder='New name'
className='border rounded-lg p-2 w-full mt-4'
placeholder={name}
/>
<button
type='button'
className='rounded-lg px-3 py-2 bg-gray-800 text-white w-fit text-sm'
className='rounded-lg py-2 bg-gray-800 text-white w-full mt-2'
>
Rename
</button>
</div>
</Form>
</Dialog.Panel>
</div>
</Dialog>

59
app/routes/_data.dns._index/route.tsx
View File

@ -5,6 +5,7 @@ import { useState } from 'react'
import { getConfig } from '~/utils/config'
import MagicModal from './magic'
import RenameModal from './rename'
// We do not want to expose every config value
@ -51,7 +52,7 @@ export default function Page() {
event.target.select()
}}
/>
<RenameModal/>
<RenameModal name={data.baseDomain}/>
</div>
<div className='flex flex-col w-2/3'>
<h1 className='text-2xl font-medium mb-4'>Nameservers</h1>
@ -59,7 +60,7 @@ export default function Page() {
Set the nameservers used by devices on the Tailnet
to resolve DNS queries.
</p>
<div className='my-8'>
<div className='mt-4'>
<div className='flex items-center justify-between mb-2'>
<h2 className='text-md font-medium opacity-80'>
Global Nameservers
@ -106,8 +107,62 @@ export default function Page() {
</div>
))}
</div>
{/* TODO: Split DNS and Custom A Records */}
</div>
</div>
<div className='flex flex-col w-2/3'>
<h1 className='text-2xl font-medium mb-4'>Search Domains</h1>
<p className='text-gray-700 dark:text-gray-300'>
Set custom DNS search domains for your Tailnet.
When using Magic DNS, your tailnet domain is used as the first search domain.
</p>
<div className='border border-gray-200 rounded-lg bg-gray-50'>
{data.magicDns ? (
<div
key='magic-dns-sd'
className={clsx(
'flex items-center justify-between px-3 py-2',
'border-b border-gray-200 last:border-b-0'
)}
>
<p className='font-mono text-sm'>{data.baseDomain}</p>
</div>
) : undefined}
{data.searchDomains.map((sd, index) => (
<div
// eslint-disable-next-line react/no-array-index-key
key={index}
className={clsx(
'flex items-center justify-between px-3 py-2',
'border-b border-gray-200 last:border-b-0'
)}
>
<p className='font-mono text-sm'>{sd}</p>
<button
type='button'
className='text-sm text-red-700'
>
Remove
</button>
</div>
))}
</div>
</div>
<div className='flex flex-col w-2/3'>
<h1 className='text-2xl font-medium mb-4'>Magic DNS</h1>
<p className='text-gray-700 dark:text-gray-300 mb-4'>
Automaticall register domain names for each device
on the tailnet. Devices will be accessible at
{' '}
<code className='bg-gray-100 p-1 rounded-md'>
[device].[user].{data.baseDomain}
</code>
{' '}
when Magic DNS is enabled.
</p>
<MagicModal isEnabled={data.magicDns} baseDomain={data.baseDomain}/>
</div>
</div>
)
}