diff --git a/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx b/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx index d212ab4a..9c4bf2bf 100644 --- a/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx +++ b/src/app/[orgId]/settings/clients/machine/[niceId]/credentials/page.tsx @@ -32,6 +32,7 @@ import CopyToClipboard from "@app/components/CopyToClipboard"; import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert"; import { InfoIcon } from "lucide-react"; import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert"; +import { OlmInstallCommands } from "@app/components/olm-install-commands"; export default function CredentialsPage() { const { env } = useEnvContext(); @@ -204,6 +205,12 @@ export default function CredentialsPage() { )} + + ; - windows: Record; - docker: Record; -}; - -const platforms = ["unix", "docker", "windows"] as const; - -type Platform = (typeof platforms)[number]; - export default function Page() { const { env } = useEnvContext(); const api = createApiClient({ env }); @@ -113,13 +88,9 @@ export default function Page() { const [loadingPage, setLoadingPage] = useState(true); - const [platform, setPlatform] = useState("unix"); - const [architecture, setArchitecture] = useState("All"); - const [commands, setCommands] = useState(null); - const [olmId, setOlmId] = useState(""); const [olmSecret, setOlmSecret] = useState(""); - const [olmCommand, setOlmCommand] = useState(""); + const [olmVersion, setOlmVersion] = useState("latest"); const [createLoading, setCreateLoading] = useState(false); const [showAdvancedSettings, setShowAdvancedSettings] = useState(false); @@ -127,136 +98,6 @@ export default function Page() { const [clientDefaults, setClientDefaults] = useState(null); - const hydrateCommands = ( - id: string, - secret: string, - endpoint: string, - version: string - ) => { - const commands = { - unix: { - All: [ - { - title: t("install"), - command: `curl -fsSL https://static.pangolin.net/get-olm.sh | bash` - }, - { - title: t("run"), - command: `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}` - } - ] - }, - windows: { - x64: [ - { - title: t("install"), - command: `curl -o olm.exe -L "https://github.com/fosrl/olm/releases/download/${version}/olm_windows_installer.exe"` - }, - { - title: t("run"), - command: `olm.exe --id ${id} --secret ${secret} --endpoint ${endpoint}` - } - ] - }, - docker: { - "Docker Compose": [ - `services: - olm: - image: fosrl/olm - container_name: olm - restart: unless-stopped - network_mode: host - cap_add: - - NET_ADMIN - devices: - - /dev/net/tun:/dev/net/tun - environment: - - PANGOLIN_ENDPOINT=${endpoint} - - OLM_ID=${id} - - OLM_SECRET=${secret}` - ], - "Docker Run": [ - `docker run -dit --network host --cap-add NET_ADMIN --device /dev/net/tun:/dev/net/tun fosrl/olm --id ${id} --secret ${secret} --endpoint ${endpoint}` - ] - } - }; - setCommands(commands); - }; - - const getArchitectures = () => { - switch (platform) { - case "unix": - return ["All"]; - case "windows": - return ["x64"]; - case "docker": - return ["Docker Compose", "Docker Run"]; - default: - return ["x64"]; - } - }; - - const getPlatformName = (platformName: string) => { - switch (platformName) { - case "windows": - return "Windows"; - case "unix": - return "Unix & macOS"; - case "docker": - return "Docker"; - default: - return "Unix & macOS"; - } - }; - - const getCommand = (): CommandItem[] => { - const placeholder: CommandItem[] = [t("unknownCommand")]; - if (!commands) { - return placeholder; - } - let platformCommands = commands[platform as keyof Commands]; - - if (!platformCommands) { - // get first key - const firstPlatform = Object.keys(commands)[0] as Platform; - platformCommands = commands[firstPlatform as keyof Commands]; - - setPlatform(firstPlatform); - } - - let architectureCommands = platformCommands[architecture]; - if (!architectureCommands) { - // get first key - const firstArchitecture = Object.keys(platformCommands)[0]; - architectureCommands = platformCommands[firstArchitecture]; - - setArchitecture(firstArchitecture); - } - - return architectureCommands || placeholder; - }; - - const getPlatformIcon = (platformName: string) => { - switch (platformName) { - case "windows": - return ; - case "unix": - return ; - case "docker": - return ; - case "kubernetes": - return ; - case "podman": - return ; - case "freebsd": - return ; - case "nixos": - return ; - default: - return ; - } - }; - const form = useForm({ resolver: zodResolver(createClientFormSchema), defaultValues: { @@ -311,23 +152,6 @@ export default function Page() { const load = async () => { setLoadingPage(true); - // Fetch available sites - - // const res = await api.get>( - // `/org/${orgId}/sites/` - // ); - // const sites = res.data.data.sites.filter( - // (s) => s.type === "newt" && s.subnet - // ); - // setSites( - // sites.map((site) => ({ - // id: site.siteId.toString(), - // text: site.name - // })) - // ); - - let olmVersion = "latest"; - try { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 3000); @@ -348,7 +172,7 @@ export default function Page() { } const data = await response.json(); const latestVersion = data.tag_name; - olmVersion = latestVersion; + setOlmVersion(latestVersion); } catch (error) { if (error instanceof Error && error.name === "AbortError") { console.error(t("olmErrorFetchTimeout")); @@ -377,18 +201,9 @@ export default function Page() { const olmId = data.olmId; const olmSecret = data.olmSecret; - const olmCommand = `olm --id ${olmId} --secret ${olmSecret} --endpoint ${env.app.dashboardUrl}`; setOlmId(olmId); setOlmSecret(olmSecret); - setOlmCommand(olmCommand); - - hydrateCommands( - olmId, - olmSecret, - env.app.dashboardUrl, - olmVersion - ); if (data.subnet) { form.setValue("subnet", data.subnet); @@ -571,118 +386,12 @@ export default function Page() { - - - - {t("clientInstallOlm")} - - - {t("clientInstallOlmDescription")} - - - -
-

- {t("operatingSystem")} -

-
- {platforms.map((os) => ( - - ))} -
-
- -
-

- {["docker", "podman"].includes( - platform - ) - ? t("method") - : t("architecture")} -

-
- {getArchitectures().map( - (arch) => ( - - ) - )} -
-
-

- {t("commands")} -

-
- {getCommand().map( - (item, index) => { - const commandText = - typeof item === - "string" - ? item - : item.command; - const title = - typeof item === - "string" - ? undefined - : item.title; - - return ( -
- {title && ( -

- { - title - } -

- )} - -
- ); - } - )} -
-
-
- - + )} diff --git a/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx b/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx index a29480e0..f60e6836 100644 --- a/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx +++ b/src/app/[orgId]/settings/sites/[niceId]/credentials/page.tsx @@ -39,6 +39,7 @@ import { } from "@app/lib/wireguard"; import { QRCodeCanvas } from "qrcode.react"; import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert"; +import { NewtSiteInstallCommands } from "@app/components/newt-install-commands"; export default function CredentialsPage() { const { env } = useEnvContext(); @@ -186,107 +187,119 @@ export default function CredentialsPage() { return site?.name || site?.niceId || "My site"; }; - const displayNewtId = currentNewtId || siteDefaults?.newtId || null; - const displaySecret = regeneratedSecret || null; + const displayNewtId = currentNewtId ?? siteDefaults?.newtId ?? null; + const displaySecret = regeneratedSecret ?? null; return ( <> {site?.type === "newt" && ( - - - - {t("siteNewtCredentials")} - - - {t("siteNewtCredentialsDescription")} - - + <> + + + + {t("siteNewtCredentials")} + + + {t("siteNewtCredentialsDescription")} + + - + - - - - - {t("newtEndpoint")} - - - - - - - - {t("newtId")} - - - {displayNewtId ? ( + + + + + {t("newtEndpoint")} + + - ) : ( - {"••••••••••••••••"} - )} - - - - - {t("newtSecretKey")} - - - {displaySecret ? ( - - ) : ( - - { - "••••••••••••••••••••••••••••••••" - } - - )} - - - + + + + + {t("newtId")} + + + {displayNewtId ? ( + + ) : ( + + {"••••••••••••••••"} + + )} + + + + + {t("newtSecretKey")} + + + {displaySecret ? ( + + ) : ( + + { + "••••••••••••••••••••••••••••••••" + } + + )} + + + - {showCredentialsAlert && displaySecret && ( - - - - {t("siteCredentialsSave")} - - - {t("siteCredentialsSaveDescription")} - - + {showCredentialsAlert && displaySecret && ( + + + + {t("siteCredentialsSave")} + + + {t( + "siteCredentialsSaveDescription" + )} + + + )} + + {build !== "oss" && ( + + + + )} - - {build !== "oss" && ( - - - - - )} - + + + + )} {site?.type === "wireguard" && ( diff --git a/src/app/[orgId]/settings/sites/create/page.tsx b/src/app/[orgId]/settings/sites/create/page.tsx index 515c2c13..a873cbe2 100644 --- a/src/app/[orgId]/settings/sites/create/page.tsx +++ b/src/app/[orgId]/settings/sites/create/page.tsx @@ -62,6 +62,8 @@ import { QRCodeCanvas } from "qrcode.react"; import { useTranslations } from "next-intl"; import { build } from "@server/build"; +import { NewtSiteInstallCommands } from "@app/components/newt-install-commands"; +import { id } from "date-fns/locale"; type SiteType = "newt" | "wireguard" | "local"; @@ -189,10 +191,6 @@ export default function Page() { const [loadingPage, setLoadingPage] = useState(true); - const [platform, setPlatform] = useState("unix"); - const [architecture, setArchitecture] = useState("amd64"); - const [commands, setCommands] = useState(null); - const [newtId, setNewtId] = useState(""); const [newtSecret, setNewtSecret] = useState(""); const [newtEndpoint, setNewtEndpoint] = useState(""); @@ -202,7 +200,6 @@ export default function Page() { const [wgConfig, setWgConfig] = useState(""); const [createLoading, setCreateLoading] = useState(false); - const [acceptClients, setAcceptClients] = useState(true); const [newtVersion, setNewtVersion] = useState("latest"); const [showAdvancedSettings, setShowAdvancedSettings] = useState(false); @@ -216,187 +213,6 @@ export default function Page() { string | undefined >(); - const hydrateCommands = ( - id: string, - secret: string, - endpoint: string, - version: string, - acceptClients: boolean = true - ) => { - const acceptClientsFlag = !acceptClients ? " --disable-clients" : ""; - const acceptClientsEnv = !acceptClients - ? "\n - DISABLE_CLIENTS=true" - : ""; - - const commands = { - unix: { - All: [ - { - title: t("install"), - command: `curl -fsSL https://static.pangolin.net/get-newt.sh | bash` - }, - { - title: t("run"), - command: `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` - } - ] - }, - windows: { - x64: [ - { - title: t("install"), - command: `curl -o newt.exe -L "https://github.com/fosrl/newt/releases/download/${version}/newt_windows_amd64.exe"` - }, - { - title: t("run"), - command: `newt.exe --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` - } - ] - }, - docker: { - "Docker Compose": [ - `services: - newt: - image: fosrl/newt - container_name: newt - restart: unless-stopped - environment: - - PANGOLIN_ENDPOINT=${endpoint} - - NEWT_ID=${id} - - NEWT_SECRET=${secret}${acceptClientsEnv}` - ], - "Docker Run": [ - `docker run -dit fosrl/newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` - ] - }, - kubernetes: { - "Helm Chart": [ - `helm repo add fossorial https://charts.fossorial.io`, - `helm repo update fossorial`, - `helm install newt fossorial/newt \\ - --create-namespace \\ - --set newtInstances[0].name="main-tunnel" \\ - --set-string newtInstances[0].auth.keys.endpointKey="${endpoint}" \\ - --set-string newtInstances[0].auth.keys.idKey="${id}" \\ - --set-string newtInstances[0].auth.keys.secretKey="${secret}"` - ] - }, - podman: { - "Podman Quadlet": [ - `[Unit] -Description=Newt container - -[Container] -ContainerName=newt -Image=docker.io/fosrl/newt -Environment=PANGOLIN_ENDPOINT=${endpoint} -Environment=NEWT_ID=${id} -Environment=NEWT_SECRET=${secret}${!acceptClients ? "\nEnvironment=DISABLE_CLIENTS=true" : ""} -# Secret=newt-secret,type=env,target=NEWT_SECRET - -[Service] -Restart=always - -[Install] -WantedBy=default.target` - ], - "Podman Run": [ - `podman run -dit docker.io/fosrl/newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` - ] - }, - nixos: { - All: [ - `nix run 'nixpkgs#fosrl-newt' -- --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` - ] - } - }; - setCommands(commands); - }; - - const getArchitectures = () => { - switch (platform) { - case "unix": - return ["All"]; - case "windows": - return ["x64"]; - case "docker": - return ["Docker Compose", "Docker Run"]; - case "kubernetes": - return ["Helm Chart"]; - case "podman": - return ["Podman Quadlet", "Podman Run"]; - case "nixos": - return ["All"]; - default: - return ["x64"]; - } - }; - - const getPlatformName = (platformName: string) => { - switch (platformName) { - case "windows": - return "Windows"; - case "unix": - return "Unix & macOS"; - case "docker": - return "Docker"; - case "kubernetes": - return "Kubernetes"; - case "podman": - return "Podman"; - case "nixos": - return "NixOS"; - default: - return "Unix / macOS"; - } - }; - - const getCommand = (): CommandItem[] => { - const placeholder: CommandItem[] = [t("unknownCommand")]; - if (!commands) { - return placeholder; - } - let platformCommands = commands[platform as keyof Commands]; - - if (!platformCommands) { - // get first key - const firstPlatform = Object.keys(commands)[0] as Platform; - platformCommands = commands[firstPlatform as keyof Commands]; - - setPlatform(firstPlatform); - } - - let architectureCommands = platformCommands[architecture]; - if (!architectureCommands) { - // get first key - const firstArchitecture = Object.keys(platformCommands)[0]; - architectureCommands = platformCommands[firstArchitecture]; - - setArchitecture(firstArchitecture); - } - - return architectureCommands || placeholder; - }; - - const getPlatformIcon = (platformName: string) => { - switch (platformName) { - case "windows": - return ; - case "unix": - return ; - case "docker": - return ; - case "kubernetes": - return ; - case "podman": - return ; - case "nixos": - return ; - default: - return ; - } - }; - const form = useForm({ resolver: zodResolver(createSiteFormSchema), defaultValues: { @@ -414,7 +230,7 @@ WantedBy=default.target` let payload: CreateSiteBody = { name: data.name, - type: data.method as "newt" | "wireguard" | "local" + type: data.method }; if (data.method == "wireguard") { @@ -568,14 +384,6 @@ WantedBy=default.target` setNewtEndpoint(newtEndpoint); setClientAddress(clientAddress); - hydrateCommands( - newtId, - newtSecret, - env.app.dashboardUrl, - currentNewtVersion, - acceptClients - ); - const wgConfig = generateWireGuardConfig( privateKey, data.publicKey, @@ -631,11 +439,6 @@ WantedBy=default.target` load(); }, []); - // Sync form acceptClients value with local state - useEffect(() => { - form.setValue("acceptClients", acceptClients); - }, [acceptClients, form]); - // Sync form exitNodeId value with local state useEffect(() => { if (build !== "saas") { @@ -847,214 +650,15 @@ WantedBy=default.target` - - {/*
*/} - {/* */} - {/* ( */} - {/* */} - {/*
*/} - {/* { */} - {/* form.setValue( */} - {/* "copied", */} - {/* e as boolean */} - {/* ); */} - {/* }} */} - {/* /> */} - {/* */} - {/*
*/} - {/* */} - {/* */} - {/* )} */} - {/* /> */} - {/* */} - {/* */} - - - - {t("siteInstallNewt")} - - - {t("siteInstallNewtDescription")} - - - -
-

- {t("operatingSystem")} -

-
- {platforms.map((os) => ( - - ))} -
-
-
-

- {["docker", "podman"].includes( - platform - ) - ? t("method") - : t("architecture")} -

-
- {getArchitectures().map( - (arch) => ( - - ) - )} -
- -
-

- {t("siteConfiguration")} -

-
- { - const value = - checked as boolean; - setAcceptClients( - value - ); - form.setValue( - "acceptClients", - value - ); - // Re-hydrate commands with new acceptClients value - if ( - newtId && - newtSecret && - newtVersion - ) { - hydrateCommands( - newtId, - newtSecret, - env.app - .dashboardUrl, - newtVersion, - value - ); - } - }} - label={t( - "siteAcceptClientConnections" - )} - /> -
-

- {t( - "siteAcceptClientConnectionsDescription" - )} -

-
- -
-

- {t("commands")} -

-
- {getCommand().map( - (item, index) => { - const commandText = - typeof item === - "string" - ? item - : item.command; - const title = - typeof item === - "string" - ? undefined - : item.title; - - return ( -
- {title && ( -

- { - title - } -

- )} - -
- ); - } - )} -
-
-
- - + )} @@ -1087,7 +691,7 @@ WantedBy=default.target` )} - {build == "saas" && + {build === "saas" && form.watch("method") === "local" && ( diff --git a/src/components/LogAnalyticsData.tsx b/src/components/LogAnalyticsData.tsx index bdf984d7..7475fdb6 100644 --- a/src/components/LogAnalyticsData.tsx +++ b/src/components/LogAnalyticsData.tsx @@ -68,7 +68,6 @@ export function LogAnalyticsData(props: AnalyticsContentProps) { const router = useRouter(); - console.log({ filters }); const dateRange = { startDate: filters.timeStart ? new Date(filters.timeStart) diff --git a/src/components/newt-install-commands.tsx b/src/components/newt-install-commands.tsx new file mode 100644 index 00000000..c06b2047 --- /dev/null +++ b/src/components/newt-install-commands.tsx @@ -0,0 +1,314 @@ +import { useTranslations } from "next-intl"; +import CopyTextBox from "./CopyTextBox"; +import { + SettingsSection, + SettingsSectionBody, + SettingsSectionDescription, + SettingsSectionHeader, + SettingsSectionTitle +} from "./Settings"; +import { CheckboxWithLabel } from "./ui/checkbox"; +import { Button } from "./ui/button"; +import { useState } from "react"; +import { FaCubes, FaDocker, FaWindows } from "react-icons/fa"; +import { Terminal } from "lucide-react"; +import { SiKubernetes, SiNixos } from "react-icons/si"; + +export type CommandItem = string | { title: string; command: string }; + +const PLATFORMS = [ + "unix", + "windows", + "docker", + "kubernetes", + "podman", + "nixos" +] as const; + +type Platform = (typeof PLATFORMS)[number]; + +export type NewtSiteInstallCommandsProps = { + id: string; + secret: string; + endpoint: string; + version?: string; +}; + +export function NewtSiteInstallCommands({ + id, + secret, + endpoint, + version = "latest" +}: NewtSiteInstallCommandsProps) { + const t = useTranslations(); + + const [acceptClients, setAcceptClients] = useState(true); + const [platform, setPlatform] = useState("unix"); + const [architecture, setArchitecture] = useState( + () => getArchitectures(platform)[0] + ); + + const acceptClientsFlag = !acceptClients ? " --disable-clients" : ""; + const acceptClientsEnv = !acceptClients + ? "\n - DISABLE_CLIENTS=true" + : ""; + + const commandList: Record> = { + unix: { + All: [ + { + title: t("install"), + command: `curl -fsSL https://static.pangolin.net/get-newt.sh | bash` + }, + { + title: t("run"), + command: `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` + } + ] + }, + windows: { + x64: [ + { + title: t("install"), + command: `curl -o newt.exe -L "https://github.com/fosrl/newt/releases/download/${version}/newt_windows_amd64.exe"` + }, + { + title: t("run"), + command: `newt.exe --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` + } + ] + }, + docker: { + "Docker Compose": [ + `services: + newt: + image: fosrl/newt + container_name: newt + restart: unless-stopped + environment: + - PANGOLIN_ENDPOINT=${endpoint} + - NEWT_ID=${id} + - NEWT_SECRET=${secret}${acceptClientsEnv}` + ], + "Docker Run": [ + `docker run -dit fosrl/newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` + ] + }, + kubernetes: { + "Helm Chart": [ + `helm repo add fossorial https://charts.fossorial.io`, + `helm repo update fossorial`, + `helm install newt fossorial/newt \\ + --create-namespace \\ + --set newtInstances[0].name="main-tunnel" \\ + --set-string newtInstances[0].auth.keys.endpointKey="${endpoint}" \\ + --set-string newtInstances[0].auth.keys.idKey="${id}" \\ + --set-string newtInstances[0].auth.keys.secretKey="${secret}"` + ] + }, + podman: { + "Podman Quadlet": [ + `[Unit] +Description=Newt container + +[Container] +ContainerName=newt +Image=docker.io/fosrl/newt +Environment=PANGOLIN_ENDPOINT=${endpoint} +Environment=NEWT_ID=${id} +Environment=NEWT_SECRET=${secret}${!acceptClients ? "\nEnvironment=DISABLE_CLIENTS=true" : ""} +# Secret=newt-secret,type=env,target=NEWT_SECRET + +[Service] +Restart=always + +[Install] +WantedBy=default.target` + ], + "Podman Run": [ + `podman run -dit docker.io/fosrl/newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` + ] + }, + nixos: { + All: [ + `nix run 'nixpkgs#fosrl-newt' -- --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}` + ] + } + }; + + const commands = commandList[platform][architecture]; + + return ( + + + + {t("siteInstallNewt")} + + + {t("siteInstallNewtDescription")} + + + +
+

{t("operatingSystem")}

+
+ {PLATFORMS.map((os) => ( + + ))} +
+
+ +
+

+ {["docker", "podman"].includes(platform) + ? t("method") + : t("architecture")} +

+
+ {getArchitectures(platform).map((arch) => ( + + ))} +
+ +
+

+ {t("siteConfiguration")} +

+
+ { + const value = checked as boolean; + setAcceptClients(value); + }} + label={t("siteAcceptClientConnections")} + /> +
+

+ {t("siteAcceptClientConnectionsDescription")} +

+
+ +
+

{t("commands")}

+
+ {commands.map((item, index) => { + const commandText = + typeof item === "string" + ? item + : item.command; + const title = + typeof item === "string" + ? undefined + : item.title; + + return ( +
+ {title && ( +

+ {title} +

+ )} + +
+ ); + })} +
+
+
+ + + ); +} + +function getPlatformIcon(platformName: Platform) { + switch (platformName) { + case "windows": + return ; + case "unix": + return ; + case "docker": + return ; + case "kubernetes": + return ; + case "podman": + return ; + case "nixos": + return ; + default: + return ; + } +} + +function getPlatformName(platformName: Platform) { + switch (platformName) { + case "windows": + return "Windows"; + case "unix": + return "Unix & macOS"; + case "docker": + return "Docker"; + case "kubernetes": + return "Kubernetes"; + case "podman": + return "Podman"; + case "nixos": + return "NixOS"; + default: + return "Unix / macOS"; + } +} + +function getArchitectures(platform: Platform) { + switch (platform) { + case "unix": + return ["All"]; + case "windows": + return ["x64"]; + case "docker": + return ["Docker Compose", "Docker Run"]; + case "kubernetes": + return ["Helm Chart"]; + case "podman": + return ["Podman Quadlet", "Podman Run"]; + case "nixos": + return ["All"]; + default: + return ["x64"]; + } +} diff --git a/src/components/olm-install-commands.tsx b/src/components/olm-install-commands.tsx new file mode 100644 index 00000000..d4c27ae2 --- /dev/null +++ b/src/components/olm-install-commands.tsx @@ -0,0 +1,220 @@ +import { Terminal } from "lucide-react"; +import { useTranslations } from "next-intl"; +import { useState } from "react"; +import { FaDocker, FaWindows } from "react-icons/fa"; +import CopyTextBox from "./CopyTextBox"; +import { + SettingsSection, + SettingsSectionBody, + SettingsSectionDescription, + SettingsSectionHeader, + SettingsSectionTitle +} from "./Settings"; +import { Button } from "./ui/button"; + +export type CommandItem = string | { title: string; command: string }; + +const PLATFORMS = ["unix", "windows", "docker"] as const; + +type Platform = (typeof PLATFORMS)[number]; + +export type OlmInstallCommandsProps = { + id: string; + secret: string; + endpoint: string; + version?: string; +}; + +export function OlmInstallCommands({ + id, + secret, + endpoint, + version = "latest" +}: OlmInstallCommandsProps) { + const t = useTranslations(); + + const [platform, setPlatform] = useState("unix"); + const [architecture, setArchitecture] = useState( + () => getArchitectures(platform)[0] + ); + + const commandList: Record> = { + unix: { + All: [ + { + title: t("install"), + command: `curl -fsSL https://static.pangolin.net/get-olm.sh | bash` + }, + { + title: t("run"), + command: `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}` + } + ] + }, + windows: { + x64: [ + { + title: t("install"), + command: `curl -o olm.exe -L "https://github.com/fosrl/olm/releases/download/${version}/olm_windows_installer.exe"` + }, + { + title: t("run"), + command: `olm.exe --id ${id} --secret ${secret} --endpoint ${endpoint}` + } + ] + }, + docker: { + "Docker Compose": [ + `services: + olm: + image: fosrl/olm + container_name: olm + restart: unless-stopped + network_mode: host + cap_add: + - NET_ADMIN + devices: + - /dev/net/tun:/dev/net/tun + environment: + - PANGOLIN_ENDPOINT=${endpoint} + - OLM_ID=${id} + - OLM_SECRET=${secret}` + ], + "Docker Run": [ + `docker run -dit --network host --cap-add NET_ADMIN --device /dev/net/tun:/dev/net/tun fosrl/olm --id ${id} --secret ${secret} --endpoint ${endpoint}` + ] + } + }; + + const commands = commandList[platform][architecture]; + return ( + + + + {t("clientInstallOlm")} + + + {t("clientInstallOlmDescription")} + + + +
+

{t("operatingSystem")}

+
+ {PLATFORMS.map((os) => ( + + ))} +
+
+ +
+

+ {["docker", "podman"].includes(platform) + ? t("method") + : t("architecture")} +

+
+ {getArchitectures(platform).map((arch) => ( + + ))} +
+
+

{t("commands")}

+
+ {commands.map((item, index) => { + const commandText = + typeof item === "string" + ? item + : item.command; + const title = + typeof item === "string" + ? undefined + : item.title; + + return ( +
+ {title && ( +

+ {title} +

+ )} + +
+ ); + })} +
+
+
+ + + ); +} + +function getArchitectures(platform: Platform) { + switch (platform) { + case "unix": + return ["All"]; + case "windows": + return ["x64"]; + case "docker": + return ["Docker Compose", "Docker Run"]; + default: + return ["x64"]; + } +} + +function getPlatformName(platformName: Platform) { + switch (platformName) { + case "windows": + return "Windows"; + case "unix": + return "Unix & macOS"; + case "docker": + return "Docker"; + default: + return "Unix & macOS"; + } +} + +function getPlatformIcon(platformName: Platform) { + switch (platformName) { + case "windows": + return ; + case "unix": + return ; + case "docker": + return ; + default: + return ; + } +}