fix

cmd/telesrv-admin/web/src/components/AddServerLinkModal.tsx

@@ -0,0 +1,81 @@
+import { Check, Copy, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { api, errorMessage } from "../api";
+import { copyToClipboard } from "../clipboard";
+import { Alert, LoadingSurface } from "./ui";
+
+// AddServerLinkModal shows a ready-made owpg://addserver link for this
+// exact server (host+port only -- see the Go handler's doc comment for why
+// name/description/key/DC are deliberately never embedded in it) -- an
+// operator hands this out (a website button, a QR code, a message
+// elsewhere) and the desktop/Android client's "Add Server" form opens
+// pre-filled from it, fetching the rest straight from this server itself.
+export function AddServerLinkModal({ onClose }: { onClose: () => void }) {
+  const [link, setLink] = useState<string | null>(null);
+  const [error, setError] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    api.addServerLink()
+      .then((result) => {
+        if (!cancelled) setLink(result.link);
+      })
+      .catch((err) => {
+        if (!cancelled) setError(errorMessage(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function copy() {
+    if (!link) return;
+    try {
+      await copyToClipboard(link);
+      setCopied(true);
+    } catch (err) {
+      setError(errorMessage(err));
+    }
+  }
+
+  return createPortal(
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal command-modal add-server-link-modal" role="dialog" aria-modal="true" aria-label={"Share server"}>
+        <div className="modal-head">
+          <div>
+            <div className="eyebrow">{"Server"}</div>
+            <h2>{"Share server"}</h2>
+          </div>
+          <button className="icon-btn" type="button" onClick={onClose} aria-label={"Close"}><X size={15} /></button>
+        </div>
+        <div className="command-body">
+          <p>{"Share this link (a button, a QR code, a message) so anyone with the OwpenGram client can add this server in one tap. It only carries the address and port -- the client fetches the name, description, and key directly from the server itself, so the link can never be tampered with to point someone at a fake identity for this address."}</p>
+          {error && <Alert>{error}</Alert>}
+          {!link && !error && <LoadingSurface label={"Building link..."} />}
+          {link && (
+            <div className="add-server-link-field">
+              <label className="form-field">
+                <span>{"owpg:// link"}</span>
+                <textarea value={link} readOnly rows={2} onFocus={(event) => event.currentTarget.select()} />
+              </label>
+              <button className="btn primary icon-text" type="button" onClick={() => void copy()}>
+                <Copy size={15} /> {copied ? "Copy again" : "Copy link"}
+              </button>
+              {copied && (
+                <div className="secret-reveal">
+                  <div className="secret-reveal-label"><Check size={14} /> {"Copied to clipboard."}</div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="modal-actions">
+          <button className="btn" type="button" onClick={onClose}>{"Close"}</button>
+        </div>
+      </section>
+    </div>,
+    document.body
+  );
+}