feat: simplify self TLS file input section in TunnelCommandModal
gosunuts committed
Feb 27, 2026 at 14:27 UTC
77fc67b3c53af2f52e447b80929a9a19b2206343
1 file changed
+43
-50
cmd/relay-server/frontend/src/components/TunnelCommandModal.tsx
+43
-50
@@ -308,59 +308,52 @@ export function TunnelCommandModal({ trigger }: TunnelCommandModalProps) {
308
</p>
309
</div>
310
311
- <div
312
- className={cn(
313
- "space-y-3 rounded-md border border-input/80 p-3 transition-opacity",
314
- tlsMode === "self" ? "opacity-100" : "opacity-60"
315
- )}
316
- >
317
- <p className="text-xs font-medium text-foreground">Self TLS Files</p>
318
- <div className="space-y-2">
319
- <label
320
- htmlFor="tls-cert-file"
321
- className="text-sm font-medium text-foreground"
322
- >
323
- TLS Cert File
324
- </label>
325
- <div className="flex items-center rounded-md bg-border">
326
- <span className="px-3 text-sm text-text-muted">TLS_CERT_FILE=</span>
327
- <Input
328
- id="tls-cert-file"
329
- type="text"
330
- value={tlsCertFile}
331
- onChange={(e) => setTlsCertFile(e.target.value)}
332
- placeholder="/path/to/fullchain.pem"
333
- className="rounded-l-none"
334
- disabled={tlsMode !== "self"}
335
- />
311
+ {tlsMode === "self" && (
312
+ <div className="space-y-3 rounded-md border border-input/80 p-3">
313
+ <p className="text-xs font-medium text-foreground">Self TLS Files</p>
314
+ <div className="space-y-2">
315
+ <label
316
+ htmlFor="tls-cert-file"
317
+ className="text-sm font-medium text-foreground"
318
+ >
319
+ TLS Cert File
320
+ </label>
321
+ <div className="flex items-center rounded-md bg-border">
322
+ <span className="px-3 text-sm text-text-muted">TLS_CERT_FILE=</span>
323
+ <Input
324
+ id="tls-cert-file"
325
+ type="text"
326
+ value={tlsCertFile}
327
+ onChange={(e) => setTlsCertFile(e.target.value)}
328
+ placeholder="/path/to/fullchain.pem"
329
+ className="rounded-l-none"
330
+ />
331
+ </div>
332
</div>
337
- </div>
338
- <div className="space-y-2">
339
- <label
340
- htmlFor="tls-key-file"
341
- className="text-sm font-medium text-foreground"
342
- >
343
- TLS Key File
344
- </label>
345
- <div className="flex items-center rounded-md bg-border">
346
- <span className="px-3 text-sm text-text-muted">TLS_KEY_FILE=</span>
347
- <Input
348
- id="tls-key-file"
349
- type="text"
350
- value={tlsKeyFile}
351
- onChange={(e) => setTlsKeyFile(e.target.value)}
352
- placeholder="/path/to/privkey.pem"
353
- className="rounded-l-none"
354
- disabled={tlsMode !== "self"}
355
- />
333
+ <div className="space-y-2">
334
+ <label
335
+ htmlFor="tls-key-file"
336
+ className="text-sm font-medium text-foreground"
337
+ >
338
+ TLS Key File
339
+ </label>
340
+ <div className="flex items-center rounded-md bg-border">
341
+ <span className="px-3 text-sm text-text-muted">TLS_KEY_FILE=</span>
342
+ <Input
343
+ id="tls-key-file"
344
+ type="text"
345
+ value={tlsKeyFile}
346
+ onChange={(e) => setTlsKeyFile(e.target.value)}
347
+ placeholder="/path/to/privkey.pem"
348
+ className="rounded-l-none"
349
+ />
350
+ </div>
351
</div>
352
+ <p className="text-xs text-text-muted">
353
+ Self TLS selected. These files are included in the command.
354
+ </p>
355
</div>
358
- <p className="text-xs text-text-muted">
359
- {tlsMode === "self"
360
- ? "Self TLS selected. These files are included in the command."
361
- : "This section is used only when TLS mode is self tls."}
362
- </p>
363
- </div>
356
+ )}
357
358
{/* Generated Command */}
359
<div className="space-y-2">