jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 10:46:16 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

ctrl k & i18n

Browse Source
This commit is contained in:
Arsfy
2024-10-28 13:37:21 +08:00
parent b7176fc8f3
commit 376e8d4621
17 changed files with 441 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
beszel/site/src/components/add-system.tsx
View File

@@ -24,8 +24,11 @@ import { useState, useRef, MutableRefObject } from 'react'
import { useStore } from '@nanostores/react'
import { cn, copyToClipboard, isReadOnlyUser } from '@/lib/utils'
import { navigate } from './router'
import { useTranslation } from 'react-i18next'
export function AddSystemButton({ className }: { className?: string }) {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
const port = useRef() as MutableRefObject<HTMLInputElement>
const publicKey = useStore($publicKey)
@@ -74,41 +77,40 @@ export function AddSystemButton({ className }: { className?: string }) {
className={cn('flex gap-1 max-xs:h-[2.4rem]', className, isReadOnlyUser() && 'hidden')}
>
<PlusIcon className="h-4 w-4 -ml-1" />
Add <span className="hidden xs:inline">System</span>
{t('add')} <span className="hidden xs:inline">{t('system')}</span>
</Button>
</DialogTrigger>
<DialogContent className="w-[90%] sm:max-w-[425px] rounded-lg">
<Tabs defaultValue="docker">
<DialogHeader>
<DialogTitle className="mb-2">Add New System</DialogTitle>
<DialogTitle className="mb-2">{t('add_system.add_new_system')}</DialogTitle>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="docker">Docker</TabsTrigger>
<TabsTrigger value="binary">Binary</TabsTrigger>
<TabsTrigger value="binary">{t('add_system.binary')}</TabsTrigger>
</TabsList>
</DialogHeader>
<TabsContent value="docker">
<DialogDescription className={'mb-4'}>
The agent must be running on the system to connect. Copy the{' '}
<code className="bg-muted px-1 rounded-sm">docker-compose.yml</code> for the agent
below.
{t('add_system.dialog_des_1')}{' '}
<code className="bg-muted px-1 rounded-sm">docker-compose.yml</code> {t('add_system.dialog_des_2')}
</DialogDescription>
<form onSubmit={handleSubmit as any}>
<div className="grid gap-3 mt-1 mb-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="name" className="text-right">
Name
{t('add_system.name')}
</Label>
<Input id="name" name="name" className="col-span-3" required />
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="host" className="text-right">
Host / IP
{t('add_system.host_ip')}
</Label>
<Input id="host" name="host" className="col-span-3" required />
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="port" className="text-right">
Port
{t('add_system.port')}
</Label>
<Input
ref={port}
@@ -121,7 +123,7 @@ export function AddSystemButton({ className }: { className?: string }) {
</div>
<div className="grid grid-cols-4 items-center gap-4 relative">
<Label htmlFor="pkey" className="text-right whitespace-pre">
Public Key
{t('add_system.public_key')}
</Label>
<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
<div
@@ -142,7 +144,7 @@ export function AddSystemButton({ className }: { className?: string }) {
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Click to copy</p>
<p>{t('add_system.click_to_copy')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
@@ -154,34 +156,34 @@ export function AddSystemButton({ className }: { className?: string }) {
variant={'ghost'}
onClick={() => copyDockerCompose(port.current.value)}
>
Copy docker compose
{t('copy')} docker compose
</Button>
<Button>Add system</Button>
<Button>{t('add_system.add_system')}</Button>
</DialogFooter>
</form>
</TabsContent>
<TabsContent value="binary">
<DialogDescription className={'mb-4'}>
The agent must be running on the system to connect. Copy the{' '}
<code className="bg-muted px-1 rounded-sm">install command</code> for the agent below.
{t('add_system.dialog_des_1')}{' '}
<code className="bg-muted px-1 rounded-sm">install command</code> {t('add_system.dialog_des_2')}
</DialogDescription>
<form onSubmit={handleSubmit as any}>
<div className="grid gap-3 mt-1 mb-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="name" className="text-right">
Name
{t('add_system.name')}
</Label>
<Input id="name" name="name" className="col-span-3" required />
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="host" className="text-right">
Host / IP
{t('add_system.host_ip')}
</Label>
<Input id="host" name="host" className="col-span-3" required />
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="port" className="text-right">
Port
{t('add_system.port')}
</Label>
<Input
ref={port}
@@ -194,7 +196,7 @@ export function AddSystemButton({ className }: { className?: string }) {
</div>
<div className="grid grid-cols-4 items-center gap-4 relative">
<Label htmlFor="pkey" className="text-right whitespace-pre">
Public Key
{t('add_system.public_key')}
</Label>
<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
<div
@@ -215,7 +217,7 @@ export function AddSystemButton({ className }: { className?: string }) {
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Click to copy</p>
<p>{t('add_system.click_to_copy')}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
@@ -227,14 +229,14 @@ export function AddSystemButton({ className }: { className?: string }) {
variant={'ghost'}
onClick={() => copyInstallCommand(port.current.value)}
>
Copy linux command
{t('copy')} linux {t('add_system.command')}
</Button>
<Button>Add system</Button>
<Button>{t('add_system.add_system')}</Button>
</DialogFooter>
</form>
</TabsContent>
</Tabs>
</DialogContent>
</Dialog >
</Dialog>
)
}