mirror of
https://github.com/fosrl/pangolin.git
synced 2026-06-10 09:33:15 +00:00
use react forms
This commit is contained in:
miloschwartz
@@ -3465,6 +3465,7 @@
|
||||
"sshTerminalError": "Error: {error}",
|
||||
"sshConnectionClosedCode": "Connection closed (code {code})",
|
||||
"sshPrivateKeyPlaceholder": "-----BEGIN OPENSSH PRIVATE KEY-----",
|
||||
"sshPrivateKeyRequired": "Private key is required",
|
||||
"vncTitle": "VNC",
|
||||
"vncSignInDescription": "Enter your VNC password to connect",
|
||||
"vncPasswordOptional": "Password (optional)",
|
||||
|
||||
@@ -1,9 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from "@app/components/ui/form";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import type {
|
||||
UserInteraction,
|
||||
@@ -43,7 +53,7 @@ declare module "react" {
|
||||
}
|
||||
}
|
||||
|
||||
type FormState = {
|
||||
type RdpCredentialsForm = {
|
||||
username: string;
|
||||
password: string;
|
||||
domain: string;
|
||||
@@ -52,6 +62,23 @@ type FormState = {
|
||||
enableClipboard: boolean;
|
||||
};
|
||||
|
||||
function loadStoredCredentials(key: string): RdpCredentialsForm {
|
||||
try {
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved) return JSON.parse(saved) as RdpCredentialsForm;
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
return {
|
||||
username: "",
|
||||
password: "",
|
||||
domain: "",
|
||||
kdcProxyUrl: "",
|
||||
pcb: "",
|
||||
enableClipboard: true
|
||||
};
|
||||
}
|
||||
|
||||
const isIronError = (error: unknown): error is IronError => {
|
||||
return (
|
||||
typeof error === "object" &&
|
||||
@@ -73,21 +100,18 @@ export default function RdpClient({
|
||||
const t = useTranslations();
|
||||
const STORAGE_KEY = "pangolin_rdp_credentials";
|
||||
|
||||
const [form, setForm] = useState<FormState>(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (saved) return JSON.parse(saved) as FormState;
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
return {
|
||||
username: "",
|
||||
password: "",
|
||||
domain: "",
|
||||
kdcProxyUrl: "",
|
||||
pcb: "",
|
||||
enableClipboard: true
|
||||
};
|
||||
const formSchema = z.object({
|
||||
username: z.string().min(1, { message: t("usernameRequired") }),
|
||||
password: z.string().min(1, { message: t("passwordRequired") }),
|
||||
domain: z.string(),
|
||||
kdcProxyUrl: z.string(),
|
||||
pcb: z.string(),
|
||||
enableClipboard: z.boolean()
|
||||
});
|
||||
|
||||
const form = useForm<RdpCredentialsForm>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: loadStoredCredentials(STORAGE_KEY)
|
||||
});
|
||||
|
||||
const [showLogin, setShowLogin] = useState(true);
|
||||
@@ -167,12 +191,7 @@ export default function RdpClient({
|
||||
el.addEventListener("ready", onReady);
|
||||
};
|
||||
|
||||
const update = <K extends keyof FormState>(key: K, value: FormState[K]) => {
|
||||
setForm((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const startSession = async () => {
|
||||
setSubmitError(null);
|
||||
const startSession = async (values: RdpCredentialsForm) => {
|
||||
setConnecting(true);
|
||||
const userInteraction = userInteractionRef.current;
|
||||
const exts = extensionsRef.current;
|
||||
@@ -182,7 +201,7 @@ export default function RdpClient({
|
||||
return;
|
||||
}
|
||||
|
||||
userInteraction.setEnableClipboard(form.enableClipboard);
|
||||
userInteraction.setEnableClipboard(values.enableClipboard);
|
||||
|
||||
// Dispose any previous session's provider and create a fresh one so
|
||||
// there is no stale upload state from a prior connection.
|
||||
@@ -248,13 +267,13 @@ export default function RdpClient({
|
||||
|
||||
const builder = userInteraction
|
||||
.configBuilder()
|
||||
.withUsername(form.username)
|
||||
.withPassword(form.password)
|
||||
.withUsername(values.username)
|
||||
.withPassword(values.password)
|
||||
.withDestination(destination)
|
||||
.withProxyAddress(
|
||||
`${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/gateway/rdp`
|
||||
)
|
||||
.withServerDomain(form.domain)
|
||||
.withServerDomain(values.domain)
|
||||
.withAuthToken(target.authToken)
|
||||
.withDesktopSize({
|
||||
width: window.innerWidth,
|
||||
@@ -262,18 +281,18 @@ export default function RdpClient({
|
||||
})
|
||||
.withExtension(exts.displayControl(true));
|
||||
|
||||
if (form.pcb !== "") {
|
||||
builder.withExtension(exts.preConnectionBlob(form.pcb));
|
||||
if (values.pcb !== "") {
|
||||
builder.withExtension(exts.preConnectionBlob(values.pcb));
|
||||
}
|
||||
if (form.kdcProxyUrl !== "") {
|
||||
builder.withExtension(exts.kdcProxyUrl(form.kdcProxyUrl));
|
||||
if (values.kdcProxyUrl !== "") {
|
||||
builder.withExtension(exts.kdcProxyUrl(values.kdcProxyUrl));
|
||||
}
|
||||
|
||||
try {
|
||||
const sessionInfo = await userInteraction.connect(builder.build());
|
||||
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(form));
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(values));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
@@ -296,6 +315,11 @@ export default function RdpClient({
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (values: RdpCredentialsForm) => {
|
||||
setSubmitError(null);
|
||||
startSession(values);
|
||||
};
|
||||
|
||||
const ui = () => userInteractionRef.current;
|
||||
|
||||
const toggleCursorKind = () => {
|
||||
@@ -340,87 +364,76 @@ export default function RdpClient({
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<Field label={t("domain")} id="domain">
|
||||
<Input
|
||||
id="domain"
|
||||
value={form.domain}
|
||||
onChange={(e) =>
|
||||
update("domain", e.target.value)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={t("username")} id="username">
|
||||
<Input
|
||||
id="username"
|
||||
value={form.username}
|
||||
onChange={(e) =>
|
||||
update("username", e.target.value)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={t("password")} id="password">
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(e) =>
|
||||
update("password", e.target.value)
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
{/*
|
||||
<Field label="Pre Connection Blob (optional)" id="pcb">
|
||||
<Input
|
||||
id="pcb"
|
||||
value={form.pcb}
|
||||
onChange={(e) => update("pcb", e.target.value)}
|
||||
/>
|
||||
</Field> */}
|
||||
|
||||
{/* <Field
|
||||
label="KDC Proxy URL (optional)"
|
||||
id="kdcProxyUrl"
|
||||
>
|
||||
<Input
|
||||
id="kdcProxyUrl"
|
||||
value={form.kdcProxyUrl}
|
||||
onChange={(e) =>
|
||||
update("kdcProxyUrl", e.target.value)
|
||||
}
|
||||
/>
|
||||
</Field> */}
|
||||
{/* <div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="enable_clipboard"
|
||||
checked={form.enableClipboard}
|
||||
onCheckedChange={(checked) =>
|
||||
update("enableClipboard", checked === true)
|
||||
}
|
||||
/>
|
||||
<Label htmlFor="enable_clipboard">
|
||||
Enable Clipboard
|
||||
</Label>
|
||||
</div> */}
|
||||
{submitError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{submitError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={startSession}
|
||||
disabled={!moduleReady}
|
||||
loading={connecting}
|
||||
className="w-full"
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-4"
|
||||
>
|
||||
{moduleReady
|
||||
? t("browserGatewayConnect")
|
||||
: t("rdpLoadingModule")}
|
||||
</Button>
|
||||
</div>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="domain"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("domain")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("username")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("password")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!moduleReady || connecting}
|
||||
loading={connecting}
|
||||
className="w-full"
|
||||
>
|
||||
{t("browserGatewayConnect")}
|
||||
</Button>
|
||||
{submitError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{submitError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</BrandedAuthSurface>
|
||||
@@ -539,20 +552,3 @@ export default function RdpClient({
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
id,
|
||||
children
|
||||
}: {
|
||||
label: string;
|
||||
id: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor={id}>{label}</Label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,10 +2,19 @@
|
||||
|
||||
import "@xterm/xterm/css/xterm.css";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useForm } from "react-hook-form";
|
||||
import * as z from "zod";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import { Textarea } from "@app/components/ui/textarea";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from "@app/components/ui/form";
|
||||
import { GetBrowserTargetResponse } from "@server/routers/browserGatewayTarget";
|
||||
import {
|
||||
Card,
|
||||
@@ -16,7 +25,7 @@ import {
|
||||
} from "@app/components/ui/card";
|
||||
import Link from "next/link";
|
||||
import { ExternalLink, Loader2 } from "lucide-react";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Alert, AlertDescription } from "@app/components/ui/alert";
|
||||
import { HorizontalTabs } from "@app/components/HorizontalTabs";
|
||||
import type { SignSshKeyResponse } from "@server/routers/ssh/types";
|
||||
import { useTranslations } from "next-intl";
|
||||
@@ -25,7 +34,7 @@ import PoweredByPangolin from "@app/components/PoweredByPangolin";
|
||||
|
||||
type AuthTab = "password" | "privateKey";
|
||||
|
||||
type FormState = {
|
||||
type SshCredentialsForm = {
|
||||
username: string;
|
||||
password: string;
|
||||
privateKey: string;
|
||||
@@ -38,6 +47,16 @@ type ConnectCredentials = {
|
||||
certificate?: string;
|
||||
};
|
||||
|
||||
function loadStoredCredentials(key: string): SshCredentialsForm {
|
||||
try {
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved) return JSON.parse(saved) as SshCredentialsForm;
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
return { username: "", password: "", privateKey: "" };
|
||||
}
|
||||
|
||||
export default function SshClient({
|
||||
target,
|
||||
error,
|
||||
@@ -52,18 +71,21 @@ export default function SshClient({
|
||||
primaryColor?: string | null;
|
||||
}) {
|
||||
const STORAGE_KEY = "pangolin_ssh_credentials";
|
||||
const t = useTranslations();
|
||||
|
||||
const [form, setForm] = useState<FormState>(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (saved) return JSON.parse(saved) as FormState;
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
return { username: "", password: "", privateKey: "" };
|
||||
const passwordTabSchema = z.object({
|
||||
username: z.string().min(1, { message: t("usernameRequired") }),
|
||||
password: z.string().min(1, { message: t("passwordRequired") })
|
||||
});
|
||||
|
||||
const t = useTranslations();
|
||||
const privateKeyTabSchema = z.object({
|
||||
username: z.string().min(1, { message: t("usernameRequired") }),
|
||||
privateKey: z.string().min(1, { message: t("sshPrivateKeyRequired") })
|
||||
});
|
||||
|
||||
const form = useForm<SshCredentialsForm>({
|
||||
defaultValues: loadStoredCredentials(STORAGE_KEY)
|
||||
});
|
||||
|
||||
function handleKeyFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
@@ -72,11 +94,10 @@ export default function SshClient({
|
||||
reader.onload = (ev) => {
|
||||
const text = ev.target?.result;
|
||||
if (typeof text === "string") {
|
||||
setForm((prev) => ({ ...prev, privateKey: text }));
|
||||
form.setValue("privateKey", text, { shouldDirty: true });
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
// Reset input so the same file can be re-selected if needed.
|
||||
e.target.value = "";
|
||||
}
|
||||
|
||||
@@ -128,14 +149,12 @@ export default function SshClient({
|
||||
xtermRef.current = terminal;
|
||||
fitAddonRef.current = fitAddon;
|
||||
|
||||
// Send user keystrokes to the WebSocket.
|
||||
terminal.onData((data) => {
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(JSON.stringify({ type: "data", data }));
|
||||
}
|
||||
});
|
||||
|
||||
// Send resize events.
|
||||
terminal.onResize(({ cols, rows }) => {
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
@@ -144,7 +163,6 @@ export default function SshClient({
|
||||
}
|
||||
});
|
||||
|
||||
// Send the initial size once the terminal is rendered.
|
||||
const { cols, rows } = terminal;
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
@@ -158,14 +176,12 @@ export default function SshClient({
|
||||
};
|
||||
}, [connected]);
|
||||
|
||||
// Refit terminal when the window resizes.
|
||||
useEffect(() => {
|
||||
const onResize = () => fitAddonRef.current?.fit();
|
||||
window.addEventListener("resize", onResize);
|
||||
return () => window.removeEventListener("resize", onResize);
|
||||
}, []);
|
||||
|
||||
// Cleanup on unmount.
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
wsRef.current?.close();
|
||||
@@ -173,7 +189,6 @@ export default function SshClient({
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Auto-connect when signed key data is provided (push PAM mode).
|
||||
useEffect(() => {
|
||||
if (signedKeyData && signedPrivateKey && target) {
|
||||
connect({
|
||||
@@ -188,7 +203,6 @@ export default function SshClient({
|
||||
override?: ConnectCredentials,
|
||||
authMethod: AuthTab = "password"
|
||||
) {
|
||||
setConnectError(null);
|
||||
setConnecting(true);
|
||||
|
||||
if (!target) {
|
||||
@@ -197,13 +211,14 @@ export default function SshClient({
|
||||
return;
|
||||
}
|
||||
|
||||
const username = override?.username ?? form.username;
|
||||
const values = form.getValues();
|
||||
const username = override?.username ?? values.username;
|
||||
const password =
|
||||
override?.password ??
|
||||
(authMethod === "password" ? form.password : "");
|
||||
(authMethod === "password" ? values.password : "");
|
||||
const privateKey =
|
||||
override?.privateKey ??
|
||||
(authMethod === "privateKey" ? form.privateKey : "");
|
||||
(authMethod === "privateKey" ? values.privateKey : "");
|
||||
const certificate = override?.certificate;
|
||||
|
||||
const proxyAddress = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/gateway/ssh`;
|
||||
@@ -222,16 +237,10 @@ export default function SshClient({
|
||||
const ws = new WebSocket(url.toString(), ["ssh"]);
|
||||
wsRef.current = ws;
|
||||
|
||||
// Track whether the server has confirmed auth by sending the first
|
||||
// data frame. Until then, errors are shown in the login form.
|
||||
let authConfirmed = false;
|
||||
let authErrorShown = false;
|
||||
|
||||
ws.onopen = () => {
|
||||
// Send credentials as the first frame so the proxy can complete
|
||||
// SSH authentication before piping pty data. Stay in "connecting"
|
||||
// state until the server responds - this prevents the flash to the
|
||||
// terminal page that would occur if we set connected=true here.
|
||||
ws.send(
|
||||
JSON.stringify({
|
||||
type: "auth",
|
||||
@@ -242,7 +251,10 @@ export default function SshClient({
|
||||
);
|
||||
if (!override) {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(form));
|
||||
localStorage.setItem(
|
||||
STORAGE_KEY,
|
||||
JSON.stringify(form.getValues())
|
||||
);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
@@ -266,7 +278,6 @@ export default function SshClient({
|
||||
xtermRef.current?.write(msg.data);
|
||||
} else if (msg.type === "error") {
|
||||
if (!authConfirmed) {
|
||||
// Auth-phase error - show in the login form.
|
||||
authErrorShown = true;
|
||||
setConnecting(false);
|
||||
setConnectError(
|
||||
@@ -312,8 +323,6 @@ export default function SshClient({
|
||||
`\r\n\x1b[33m${t("sshConnectionClosedCode", { code: evt.code })}\x1b[0m\r\n`
|
||||
);
|
||||
}
|
||||
// If auth was never confirmed the login form is already visible;
|
||||
// a generic error is shown only when no specific error was received.
|
||||
if (!authConfirmed && !authErrorShown) {
|
||||
setConnectError(t("sshErrorConnectionClosed"));
|
||||
}
|
||||
@@ -327,7 +336,40 @@ export default function SshClient({
|
||||
setConnected(false);
|
||||
}
|
||||
|
||||
// In push mode, show a connecting/connected state without the login form.
|
||||
function applyTabSchemaErrors(
|
||||
schema: z.ZodObject<z.ZodRawShape>,
|
||||
values: SshCredentialsForm
|
||||
) {
|
||||
form.clearErrors();
|
||||
const result = schema.safeParse(values);
|
||||
if (result.success) return true;
|
||||
for (const issue of result.error.issues) {
|
||||
const field = issue.path[0];
|
||||
if (typeof field === "string") {
|
||||
form.setError(field as keyof SshCredentialsForm, {
|
||||
message: issue.message
|
||||
});
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function onPasswordSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setConnectError(null);
|
||||
const values = form.getValues();
|
||||
if (!applyTabSchemaErrors(passwordTabSchema, values)) return;
|
||||
connect(undefined, "password");
|
||||
}
|
||||
|
||||
function onPrivateKeySubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setConnectError(null);
|
||||
const values = form.getValues();
|
||||
if (!applyTabSchemaErrors(privateKeyTabSchema, values)) return;
|
||||
connect(undefined, "privateKey");
|
||||
}
|
||||
|
||||
if (signedKeyData && signedPrivateKey) {
|
||||
return (
|
||||
<>
|
||||
@@ -352,7 +394,10 @@ export default function SshClient({
|
||||
</div>
|
||||
)}
|
||||
{connectError && (
|
||||
<Alert variant="destructive" className="w-full">
|
||||
<Alert
|
||||
variant="destructive"
|
||||
className="w-full"
|
||||
>
|
||||
<AlertDescription>
|
||||
{connectError}
|
||||
</AlertDescription>
|
||||
@@ -406,155 +451,164 @@ export default function SshClient({
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<HorizontalTabs
|
||||
clientSide
|
||||
defaultTab={0}
|
||||
items={[
|
||||
{ title: t("sshPasswordTab"), href: "#" },
|
||||
{ title: t("sshPrivateKeyTab"), href: "#" }
|
||||
]}
|
||||
>
|
||||
<div className="space-y-4 mt-4 p-1">
|
||||
<Field
|
||||
label={t("username")}
|
||||
id="username-pw"
|
||||
<Form {...form}>
|
||||
<HorizontalTabs
|
||||
clientSide
|
||||
defaultTab={0}
|
||||
items={[
|
||||
{
|
||||
title: t("sshPasswordTab"),
|
||||
href: "#"
|
||||
},
|
||||
{
|
||||
title: t("sshPrivateKeyTab"),
|
||||
href: "#"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<form
|
||||
onSubmit={onPasswordSubmit}
|
||||
className="space-y-4 mt-4 p-1"
|
||||
>
|
||||
<Input
|
||||
id="username-pw"
|
||||
value={form.username}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
username: e.target.value
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={t("password")} id="password">
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
password: e.target.value
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<div className="mt-4 space-y-3">
|
||||
{connectError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{connectError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={() =>
|
||||
connect(undefined, "password")
|
||||
}
|
||||
loading={connecting}
|
||||
disabled={
|
||||
!form.username || !form.password
|
||||
}
|
||||
className="w-full"
|
||||
>
|
||||
{connecting
|
||||
? t("sshConnecting")
|
||||
: t("sshAuthenticate")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mt-4 p-1">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("sshPrivateKeyDisclaimer")}{" "}
|
||||
<Link
|
||||
href="https://docs.pangolin.net/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
{t("sshLearnMore")}
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
</p>
|
||||
<Field
|
||||
label={t("username")}
|
||||
id="username-key"
|
||||
>
|
||||
<Input
|
||||
id="username-key"
|
||||
value={form.username}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
username: e.target.value
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label={t("sshPrivateKeyField")}
|
||||
id="privateKey"
|
||||
>
|
||||
<Textarea
|
||||
id="privateKey"
|
||||
value={form.privateKey}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
privateKey: e.target.value
|
||||
})
|
||||
}
|
||||
placeholder={t(
|
||||
"sshPrivateKeyPlaceholder"
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("username")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
rows={5}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label={t("sshPrivateKeyFile")}
|
||||
id="privateKeyFile"
|
||||
>
|
||||
<Input
|
||||
id="privateKeyFile"
|
||||
type="file"
|
||||
accept=".pem,.key,.pub,*"
|
||||
onChange={handleKeyFile}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("password")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</Field>
|
||||
<div className="mt-4 space-y-3">
|
||||
{connectError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{connectError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<div className="mt-4 space-y-3">
|
||||
<Button
|
||||
type="submit"
|
||||
loading={connecting}
|
||||
disabled={connecting}
|
||||
className="w-full"
|
||||
>
|
||||
{t("sshAuthenticate")}
|
||||
</Button>
|
||||
{connectError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{connectError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<Button
|
||||
onClick={() =>
|
||||
connect(undefined, "privateKey")
|
||||
}
|
||||
loading={connecting}
|
||||
disabled={
|
||||
!form.username ||
|
||||
!form.privateKey
|
||||
}
|
||||
className="w-full"
|
||||
>
|
||||
{connecting
|
||||
? t("sshConnecting")
|
||||
: t("sshAuthenticate")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</HorizontalTabs>
|
||||
<form
|
||||
onSubmit={onPrivateKeySubmit}
|
||||
className="space-y-4 mt-4 p-1"
|
||||
>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("sshPrivateKeyDisclaimer")}{" "}
|
||||
<Link
|
||||
href="https://docs.pangolin.net/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
{t("sshLearnMore")}
|
||||
<ExternalLink className="size-3.5 shrink-0" />
|
||||
</Link>
|
||||
</p>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("username")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="privateKey"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t(
|
||||
"sshPrivateKeyField"
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
{...field}
|
||||
placeholder={t(
|
||||
"sshPrivateKeyPlaceholder"
|
||||
)}
|
||||
rows={5}
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("sshPrivateKeyFile")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="file"
|
||||
accept=".pem,.key,.pub,*"
|
||||
onChange={handleKeyFile}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
<div className="mt-4 space-y-3">
|
||||
<Button
|
||||
type="submit"
|
||||
loading={connecting}
|
||||
disabled={connecting}
|
||||
className="w-full"
|
||||
>
|
||||
{t("sshAuthenticate")}
|
||||
</Button>
|
||||
{connectError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{connectError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</HorizontalTabs>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</BrandedAuthSurface>
|
||||
@@ -581,20 +635,3 @@ export default function SshClient({
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
id,
|
||||
children
|
||||
}: {
|
||||
label: string;
|
||||
id: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor={id}>{label}</Label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import { Input } from "@app/components/ui/input";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from "@app/components/ui/form";
|
||||
import { toast } from "@app/hooks/useToast";
|
||||
import { GetBrowserTargetResponse } from "@server/routers/browserGatewayTarget";
|
||||
import {
|
||||
@@ -18,10 +28,20 @@ import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
|
||||
import PoweredByPangolin from "@app/components/PoweredByPangolin";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
type FormState = {
|
||||
type VncCredentialsForm = {
|
||||
password: string;
|
||||
};
|
||||
|
||||
function loadStoredCredentials(key: string): VncCredentialsForm {
|
||||
try {
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved) return JSON.parse(saved) as VncCredentialsForm;
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
return { password: "" };
|
||||
}
|
||||
|
||||
export default function VncClient({
|
||||
target,
|
||||
error,
|
||||
@@ -34,14 +54,13 @@ export default function VncClient({
|
||||
const t = useTranslations();
|
||||
const STORAGE_KEY = "pangolin_vnc_credentials";
|
||||
|
||||
const [form, setForm] = useState<FormState>(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (saved) return JSON.parse(saved) as FormState;
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
return { password: "" };
|
||||
const formSchema = z.object({
|
||||
password: z.string()
|
||||
});
|
||||
|
||||
const form = useForm<VncCredentialsForm>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: loadStoredCredentials(STORAGE_KEY)
|
||||
});
|
||||
|
||||
const [connected, setConnected] = useState(false);
|
||||
@@ -49,11 +68,6 @@ export default function VncClient({
|
||||
const rfbRef = useRef<any>(null);
|
||||
const screenRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const update = <K extends keyof FormState>(key: K, value: FormState[K]) => {
|
||||
setForm((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
// Disconnect and clean up the RFB instance.
|
||||
const disconnect = () => {
|
||||
if (rfbRef.current) {
|
||||
rfbRef.current.disconnect();
|
||||
@@ -62,14 +76,11 @@ export default function VncClient({
|
||||
setConnected(false);
|
||||
};
|
||||
|
||||
// Clean up on unmount.
|
||||
useEffect(() => {
|
||||
return () => disconnect();
|
||||
}, []);
|
||||
|
||||
const connect = async () => {
|
||||
setConnectError(null);
|
||||
|
||||
const connect = async (values: VncCredentialsForm) => {
|
||||
if (!target) {
|
||||
setConnectError(t("vncNoResourceTarget"));
|
||||
return;
|
||||
@@ -77,11 +88,8 @@ export default function VncClient({
|
||||
|
||||
if (!screenRef.current) return;
|
||||
|
||||
// Disconnect any existing session first.
|
||||
disconnect();
|
||||
|
||||
// noVNC has no ESM default export — import the module dynamically to
|
||||
// keep it out of the server bundle, then grab the default export.
|
||||
let RFB: new (
|
||||
target: HTMLElement,
|
||||
url: string,
|
||||
@@ -100,8 +108,6 @@ export default function VncClient({
|
||||
return;
|
||||
}
|
||||
|
||||
// Build the proxy WebSocket URL:
|
||||
// ws://<proxyAddress>?authToken=<token>&host=<ip>&port=<port>
|
||||
const proxyAddress = `${window.location.protocol === "https:" ? "wss" : "ws"}://${window.location.host}/gateway/vnc`;
|
||||
const base = proxyAddress.replace(/\/$/, "");
|
||||
const params = new URLSearchParams({
|
||||
@@ -111,12 +117,11 @@ export default function VncClient({
|
||||
});
|
||||
const wsUrl = `${base}?${params.toString()}`;
|
||||
|
||||
// Clear the container so noVNC gets a clean mount point.
|
||||
screenRef.current.innerHTML = "";
|
||||
|
||||
const options: Record<string, unknown> = {};
|
||||
if (form.password) {
|
||||
options.credentials = { password: form.password };
|
||||
if (values.password) {
|
||||
options.credentials = { password: values.password };
|
||||
}
|
||||
|
||||
const rfb: any = new RFB(screenRef.current, wsUrl, options);
|
||||
@@ -126,7 +131,7 @@ export default function VncClient({
|
||||
|
||||
rfb.addEventListener("connect", () => {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(form));
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(values));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
@@ -157,6 +162,11 @@ export default function VncClient({
|
||||
rfbRef.current = rfb;
|
||||
};
|
||||
|
||||
const onSubmit = (values: VncCredentialsForm) => {
|
||||
setConnectError(null);
|
||||
connect(values);
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<BrandedAuthSurface primaryColor={primaryColor}>
|
||||
@@ -188,33 +198,41 @@ export default function VncClient({
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<Field
|
||||
label={t("vncPasswordOptional")}
|
||||
id="password"
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(e) =>
|
||||
update("password", e.target.value)
|
||||
}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t("vncPasswordOptional")}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
{connectError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{connectError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Button onClick={connect} className="w-full">
|
||||
{t("browserGatewayConnect")}
|
||||
</Button>
|
||||
</div>
|
||||
<Button type="submit" className="w-full">
|
||||
{t("browserGatewayConnect")}
|
||||
</Button>
|
||||
{connectError && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription>
|
||||
{connectError}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</BrandedAuthSurface>
|
||||
@@ -259,7 +277,6 @@ export default function VncClient({
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* noVNC mounts a <canvas> inside this div */}
|
||||
<div
|
||||
ref={screenRef}
|
||||
className="flex-1 overflow-hidden"
|
||||
@@ -269,20 +286,3 @@ export default function VncClient({
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
id,
|
||||
children
|
||||
}: {
|
||||
label: string;
|
||||
id: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor={id}>{label}</Label>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user