fix tls modal
rabbitprincess committed
Mar 1, 2026 at 21:03 UTC
cd36ab9bc7c4337366dd8c3787d8fe01c7a981ca
1 file changed
+55
-40
cmd/relay-server/frontend/src/components/TunnelCommandModal.tsx
+55
-40
@@ -119,6 +119,29 @@ export function TunnelCommandModal({ trigger }: TunnelCommandModalProps) {
119
}
120
};
121
122
+ const isNoTLS = tlsMode === "no-tls";
123
+ const isSelfTLS = tlsMode === "self";
124
+
125
+ const onNoTLSToggle = (checked: boolean) => {
126
+ if (checked) {
127
+ setTlsMode("no-tls");
128
+ return;
129
+ }
130
+ if (tlsMode === "no-tls") {
131
+ setTlsMode("keyless");
132
+ }
133
+ };
134
+
135
+ const onSelfTLSToggle = (checked: boolean) => {
136
+ if (checked) {
137
+ setTlsMode("self");
138
+ return;
139
+ }
140
+ if (tlsMode === "self") {
141
+ setTlsMode("keyless");
142
+ }
143
+ };
144
+
145
return (
146
<Dialog>
147
<DialogTrigger asChild>
@@ -261,50 +284,42 @@ export function TunnelCommandModal({ trigger }: TunnelCommandModalProps) {
284
<label className="text-sm font-medium text-foreground">
285
TLS Mode
286
</label>
264
- <div className="flex p-1 bg-border rounded-md">
265
- <button
266
- type="button"
267
- onClick={() => setTlsMode("keyless")}
268
- className={cn(
269
- "flex-1 px-3 py-1.5 text-sm font-medium rounded-sm transition-all",
270
- tlsMode === "keyless"
271
- ? "bg-background text-foreground shadow-sm"
272
- : "text-muted-foreground hover:text-foreground"
273
- )}
274
- >
275
- keyless
276
- </button>
277
- <button
278
- type="button"
279
- onClick={() => setTlsMode("no-tls")}
280
- className={cn(
281
- "flex-1 px-3 py-1.5 text-sm font-medium rounded-sm transition-all",
282
- tlsMode === "no-tls"
283
- ? "bg-background text-foreground shadow-sm"
284
- : "text-muted-foreground hover:text-foreground"
285
- )}
286
- >
287
- no tls
288
- </button>
289
- <button
290
- type="button"
291
- onClick={() => setTlsMode("self")}
292
- className={cn(
293
- "flex-1 px-3 py-1.5 text-sm font-medium rounded-sm transition-all",
294
- tlsMode === "self"
295
- ? "bg-background text-foreground shadow-sm"
296
- : "text-muted-foreground hover:text-foreground"
297
- )}
298
- >
299
- self tls
300
- </button>
287
+ <div className="space-y-2 rounded-md border border-input/80 px-3 py-2">
288
+ <label className="flex items-center justify-between gap-3 text-sm text-foreground">
289
+ <span className="flex items-center gap-2">
290
+ <input
291
+ type="checkbox"
292
+ checked={isNoTLS}
293
+ onChange={(e) => onNoTLSToggle(e.target.checked)}
294
+ className="h-4 w-4"
295
+ />
296
+ No TLS
297
+ </span>
298
+ <span className="text-xs text-text-muted text-right">
299
+ Local-only testing mode.
300
+ </span>
301
+ </label>
302
+ <label className="flex items-center justify-between gap-3 text-sm text-foreground">
303
+ <span className="flex items-center gap-2">
304
+ <input
305
+ type="checkbox"
306
+ checked={isSelfTLS}
307
+ onChange={(e) => onSelfTLSToggle(e.target.checked)}
308
+ className="h-4 w-4"
309
+ />
310
+ Self TLS
311
+ </span>
312
+ <span className="text-xs text-text-muted text-right">
313
+ Bring your own cert and key.
314
+ </span>
315
+ </label>
316
</div>
317
<p className="text-xs text-text-muted">
318
{tlsMode === "no-tls"
304
- ? "No TLS"
319
+ ? "Local testing only (no TLS)."
320
: tlsMode === "keyless"
306
- ? "Keyless (auto)"
307
- : "Self TLS (manual cert/key)"}
321
+ ? "Recommended: Keyless TLS."
322
+ : "Advanced: Self-managed TLS cert/key."}
323
</p>
324
</div>
325