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

migrate to lingui

Browse Source
This commit is contained in:
Henry Dollman
2024-11-01 20:31:57 -04:00
parent 856683610a
commit a93ff63605
76 changed files with 14410 additions and 3837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,11 +19,9 @@ 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"
import { Trans } from "@lingui/macro"
export function AddSystemButton({ className }: { className?: string }) {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
const port = useRef() as MutableRefObject<HTMLInputElement>
const publicKey = useStore($publicKey)
@@ -73,56 +71,64 @@ 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 -ms-1" />
{t("add")}
<span className="hidden sm:inline">{t("system")}</span>
<Trans>
Add <span className="hidden sm:inline">System</span>
</Trans>
</Button>
</DialogTrigger>
<DialogContent className="w-[90%] sm:max-w-[440px] rounded-lg">
<Tabs defaultValue="docker">
<DialogHeader>
<DialogTitle className="mb-2">{t("add_system.add_new_system")}</DialogTitle>
<DialogTitle className="mb-2">
<Trans>Add New System</Trans>
</DialogTitle>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="docker">Docker</TabsTrigger>
<TabsTrigger value="binary">{t("add_system.binary")}</TabsTrigger>
<TabsTrigger value="binary">
<Trans>Binary</Trans>
</TabsTrigger>
</TabsList>
</DialogHeader>
{/* Docker */}
<TabsContent value="docker">
<DialogDescription className={"mb-4"}>
{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 className="mb-4 leading-normal">
<Trans>
The agent must be running on the system to connect. Copy the
<code className="bg-muted px-1 rounded-sm leading-3">docker-compose.yml</code> for the agent below.
</Trans>
</DialogDescription>
</TabsContent>
{/* Binary */}
<TabsContent value="binary">
<DialogDescription className={"mb-4"}>
{t("add_system.dialog_des_1")} <code className="bg-muted px-1 rounded-sm">install command</code>{" "}
{t("add_system.dialog_des_2")}
<DialogDescription className="mb-4 leading-normal">
<Trans>
The agent must be running on the system to connect. Copy the installation command for the agent below.
</Trans>
</DialogDescription>
</TabsContent>
<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-end">
{t("add_system.name")}
<Trans>Name</Trans>
</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-end">
{t("add_system.host_ip")}
<Trans>Host / IP</Trans>
</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-end">
{t("add_system.port")}
<Trans>Port</Trans>
</Label>
<Input ref={port} name="port" id="port" defaultValue="45876" className="col-span-3" required />
</div>
<div className="grid grid-cols-4 items-center gap-4 relative">
<Label htmlFor="pkey" className="text-end whitespace-pre">
{t("add_system.key")}
<Trans comment="Use 'Key' if your language requires many more characters">Public Key</Trans>
</Label>
<Input readOnly id="pkey" value={publicKey} className="col-span-3" required></Input>
<div
@@ -143,7 +149,9 @@ export function AddSystemButton({ className }: { className?: string }) {
</Button>
</TooltipTrigger>
<TooltipContent>
<p>{t("add_system.click_to_copy")}</p>
<p>
<Trans>Click to copy</Trans>
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
@@ -153,18 +161,22 @@ export function AddSystemButton({ className }: { className?: string }) {
<TabsContent value="docker">
<DialogFooter className="flex justify-end gap-2 sm:w-[calc(100%+20px)] sm:-ms-[20px]">
<Button type="button" variant={"ghost"} onClick={() => copyDockerCompose(port.current.value)}>
{t("copy")} docker compose
<Trans>Copy</Trans> docker compose
</Button>
<Button>
<Trans>Add system</Trans>
</Button>
<Button>{t("add_system.add_system")}</Button>
</DialogFooter>
</TabsContent>
{/* Binary */}
<TabsContent value="binary">
<DialogFooter className="flex justify-end gap-2 sm:w-[calc(100%+20px)] sm:-ms-[20px]">
<Button type="button" variant={"ghost"} onClick={() => copyInstallCommand(port.current.value)}>
{t("copy")} linux {t("add_system.command")}
<Trans>Copy Linux command</Trans>
</Button>
<Button>
<Trans>Add system</Trans>
</Button>
<Button>{t("add_system.add_system")}</Button>
</DialogFooter>
</TabsContent>
</form>