@naviyra/cloud-panel 0.0.3-beta → 0.0.3-beta3

package/apps/panel/app/ui/cloudflare.jsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Check,
   Cloud,
@@ -10,6 +10,8 @@ import {
   Trash2,
 } from "lucide-react";
 import { EmailSkeleton } from "./skeleton";
+import { useConfirm } from "./confirm";
+import { useToast } from "./toast";
 
 async function api(url, options = {}) {
   const response = await fetch(`/api/${url}`, {
@@ -29,9 +31,15 @@ function when(value) {
   return value ? new Date(value).toLocaleString() : "—";
 }
 export function CloudflareConnect({ initial, onReady, canWrite }) {
+  const toast = useToast();
+  const seen = useRef("");
   const [progress, setProgress] = useState(initial?.login || { state: "idle" });
-  const [error, setError] = useState(initial?.error || "");
   const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    if (!initial?.error || initial.error === seen.current) return;
+    seen.current = initial.error;
+    toast.failed(initial.error);
+  }, [initial?.error, toast]);
   useEffect(() => {
     if (progress.state !== "running") return undefined;
     const timer = setInterval(async () => {
@@ -42,16 +50,22 @@ export function CloudflareConnect({ initial, onReady, canWrite }) {
         ]);
         setProgress(current);
         if (status.registered) onReady(status);
-        else if (current.state === "error") setError(current.error);
+        else if (current.state === "error" && current.error !== seen.current) {
+          seen.current = current.error;
+          toast.failed(current.error);
+        }
       } catch (e) {
-        setError(e.message);
+        if (seen.current !== e.message) {
+          seen.current = e.message;
+          toast.failed(e.message);
+        }
       }
     }, 1000);
     return () => clearInterval(timer);
-  }, [progress.state, onReady]);
+  }, [progress.state, onReady, toast]);
   async function connect() {
     setBusy(true);
-    setError("");
+    seen.current = "";
     try {
       const started = await api("cloudflare/login", { method: "POST" });
       setProgress(started);
@@ -59,8 +73,9 @@ export function CloudflareConnect({ initial, onReady, canWrite }) {
         onReady(await api("cloudflare/status"));
         return;
       }
+      toast.progress("Waiting for Cloudflare approval.");
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setBusy(false);
     }
@@ -96,7 +111,6 @@ export function CloudflareConnect({ initial, onReady, canWrite }) {
             </li>
           ))}
         </ol>
-        {error && <div className="error">{error}</div>}
         {progress.log && <pre className="connect-log">{progress.log}</pre>}
         {progress.url && (
           <a className="primary connect-link" href={progress.url} target="_blank" rel="noreferrer">
@@ -119,22 +133,20 @@ export function CloudflareConnect({ initial, onReady, canWrite }) {
   );
 }
 export function DnsScreen({ canWrite }) {
+  const toast = useToast();
   const [data, setData] = useState(null);
   const [detail, setDetail] = useState(null);
   const [draft, setDraft] = useState(null);
-  const [error, setError] = useState("");
-  const [notice, setNotice] = useState("");
   const [query, setQuery] = useState("");
   const [type, setType] = useState("all");
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   async function load() {
     setLoading(true);
-    setError("");
     try {
       setData(await api("cloudflare/dns"));
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setLoading(false);
     }
@@ -153,23 +165,19 @@ export function DnsScreen({ canWrite }) {
       priority: record.priority ?? 10,
       comment: record.comment || "",
     });
-    setNotice("");
-    setError("");
   }
   async function open(id) {
     setDraft(null);
-    setError("");
     try {
       setDetail(await api(`cloudflare/dns/${id}`));
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     }
   }
   async function saveEdit(event) {
     event.preventDefault();
     if (!detail) return;
     setSaving(true);
-    setError("");
     try {
       const saved = await api(`cloudflare/dns/${detail.id}`, {
         method: "PUT",
@@ -187,9 +195,9 @@ export function DnsScreen({ canWrite }) {
             }
           : current,
       );
-      setNotice("DNS record updated.");
+      toast.success("DNS record updated.");
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setSaving(false);
     }
@@ -216,8 +224,6 @@ export function DnsScreen({ canWrite }) {
           Refresh
         </button>
       </div>
-      {error && <div className="error">{error}</div>}
-      {notice && <div className="notice">{notice}</div>}
       <section className="panel">
         {loading && data && (
           <div
@@ -484,9 +490,11 @@ export function DnsScreen({ canWrite }) {
   );
 }
 export function EmailScreen({ canWrite }) {
+  const confirm = useConfirm();
+  const toast = useToast();
+  const seen = useRef("");
+  const addressError = useRef("");
   const [data, setData] = useState(null);
-  const [error, setError] = useState("");
-  const [notice, setNotice] = useState("");
   const [busy, setBusy] = useState(false);
   const [loading, setLoading] = useState(true);
   const [authorized, setAuthorized] = useState(false);
@@ -494,11 +502,10 @@ export function EmailScreen({ canWrite }) {
   const [matcher, setMatcher] = useState("literal");
   async function load() {
     setLoading(true);
-    setError("");
     try {
       setData(await api("cloudflare/email"));
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setLoading(false);
     }
@@ -514,7 +521,7 @@ export function EmailScreen({ canWrite }) {
       })
       .catch((e) => {
         if (!stop) {
-          setError(e.message);
+          toast.failed(e.message);
           setLoading(false);
         }
       });
@@ -522,6 +529,12 @@ export function EmailScreen({ canWrite }) {
       stop = true;
     };
   }, []);
+  useEffect(() => {
+    const message = data?.address_error || "";
+    if (message === addressError.current) return;
+    addressError.current = message;
+    if (message) toast.failed(message);
+  }, [data?.address_error, toast]);
   useEffect(() => {
     if (apiProgress.state !== "running") return undefined;
     const timer = setInterval(async () => {
@@ -530,41 +543,45 @@ export function EmailScreen({ canWrite }) {
         setApiProgress(current);
         if (current.state === "done" || current.skipped) {
           setAuthorized(true);
-          setNotice("Cloudflare API authorized.");
+          toast.success("Cloudflare API authorized.");
           await load();
-        } else if (current.state === "error") setError(current.error);
+        } else if (current.state === "error" && current.error !== seen.current) {
+          seen.current = current.error || "";
+          if (current.error) toast.failed(current.error);
+        }
       } catch (e) {
-        setError(e.message);
+        if (seen.current !== e.message) {
+          seen.current = e.message;
+          toast.failed(e.message);
+        }
       }
     }, 1000);
     return () => clearInterval(timer);
   }, [apiProgress.state]);
   async function authorize() {
     setBusy(true);
-    setError("");
+    seen.current = "";
     try {
       const started = await api("cloudflare/api-login", { method: "POST" });
       setApiProgress(started);
       if (started.skipped || started.registered) {
         setAuthorized(true);
-        setNotice("Cloudflare API authorized.");
+        toast.success("Cloudflare API authorized.");
         await load();
-      }
+      } else toast.progress("Waiting for Wrangler approval.");
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setBusy(false);
     }
   }
   async function run(action) {
     setBusy(true);
-    setError("");
-    setNotice("");
     try {
       await action();
       await load();
     } catch (e) {
-      setError(e.message);
+      toast.failed(e.message);
     } finally {
       setBusy(false);
     }
@@ -588,7 +605,7 @@ export function EmailScreen({ canWrite }) {
       });
       form.reset();
       setMatcher("literal");
-      setNotice("Routing rule created.");
+      toast.success("Routing rule created.");
     });
   }
   return (
@@ -609,8 +626,6 @@ export function EmailScreen({ canWrite }) {
           Refresh
         </button>
       </div>
-      {error && <div className="error">{error}</div>}
-      {notice && <div className="notice">{notice}</div>}
       {!authorized && (
         <section className="panel connect-panel">
           <div className="section-heading">
@@ -673,7 +688,7 @@ export function EmailScreen({ canWrite }) {
                       method: "POST",
                       body: JSON.stringify({ enabled: !data.settings.enabled }),
                     });
-                    setNotice(
+                    toast.success(
                       data.settings.enabled
                         ? "Email routing disabled."
                         : "Email routing enabled. Cloudflare adds the required MX and SPF records.",
@@ -688,7 +703,6 @@ export function EmailScreen({ canWrite }) {
               <div className="section-heading">
                 <h2>Destination addresses</h2>
               </div>
-              {data.address_error && <div className="error">{data.address_error}</div>}
               {canWrite && (
                 <form
                   className="inline-form address-form"
@@ -702,7 +716,7 @@ export function EmailScreen({ canWrite }) {
                         body: JSON.stringify({ email }),
                       });
                       form.reset();
-                      setNotice("Verification email sent to that destination.");
+                      toast.success("Verification email sent to that destination.");
                     });
                   }}
                 >
@@ -735,8 +749,15 @@ export function EmailScreen({ canWrite }) {
                               <button
                                 className="text-button danger-text"
                                 disabled={busy}
-                                onClick={() => {
-                                  if (window.confirm(`Remove ${address.email}?`))
+                                onClick={async () => {
+                                  if (
+                                    await confirm({
+                                      title: `Remove ${address.email}?`,
+                                      message:
+                                        "This address will stop receiving forwarded mail.",
+                                      confirmLabel: "Remove",
+                                    })
+                                  )
                                     run(() =>
                                       api(`cloudflare/email/addresses/${address.id}`, {
                                         method: "DELETE",
@@ -876,7 +897,7 @@ export function EmailScreen({ canWrite }) {
                                           enabled: !rule.enabled,
                                         }),
                                       });
-                                      setNotice(
+                                      toast.success(
                                         rule.enabled ? "Rule disabled." : "Rule enabled.",
                                       );
                                     })
@@ -887,9 +908,13 @@ export function EmailScreen({ canWrite }) {
                                 <button
                                   className="text-button danger-text"
                                   disabled={busy}
-                                  onClick={() => {
+                                  onClick={async () => {
                                     if (
-                                      window.confirm(`Delete “${rule.name}”?`)
+                                      await confirm({
+                                        title: `Delete “${rule.name}”?`,
+                                        message: "This routing rule will be removed.",
+                                        confirmLabel: "Delete",
+                                      })
                                     )
                                       run(() =>
                                         api(

package/apps/panel/app/ui/confirm.jsx

@@ -0,0 +1,109 @@
+"use client";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+
+const ConfirmContext = createContext(null);
+
+export function useConfirm() {
+  const confirm = useContext(ConfirmContext);
+  if (!confirm) throw Error("Confirm dialog is unavailable");
+  return confirm;
+}
+
+function requestFrom(options) {
+  const value = typeof options === "string" ? { message: options } : options || {};
+  return {
+    title: value.title || "Please confirm",
+    message: value.message || "",
+    confirmLabel: value.confirmLabel || "OK",
+    cancelLabel: value.cancelLabel || "Cancel",
+    danger: value.danger !== false,
+  };
+}
+
+export function ConfirmProvider({ children }) {
+  const [request, setRequest] = useState(null);
+  const resolver = useRef(null);
+  const finish = useCallback((accepted) => {
+    resolver.current?.(accepted);
+    resolver.current = null;
+    setRequest(null);
+  }, []);
+  const confirm = useCallback((options) => {
+    if (resolver.current) resolver.current(false);
+    return new Promise((resolve) => {
+      resolver.current = resolve;
+      setRequest(requestFrom(options));
+    });
+  }, []);
+  return (
+    <ConfirmContext.Provider value={confirm}>
+      {children}
+      {request && <ConfirmDialog request={request} onFinish={finish} />}
+    </ConfirmContext.Provider>
+  );
+}
+
+function ConfirmDialog({ request, onFinish }) {
+  const cancelRef = useRef(null);
+  const confirmRef = useRef(null);
+  useEffect(() => {
+    cancelRef.current?.focus();
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onFinish(false);
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const items = [cancelRef.current, confirmRef.current].filter(Boolean);
+      const first = items[0];
+      const last = items.at(-1);
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onFinish]);
+  return (
+    <div
+      className="modal-backdrop alert-backdrop"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onFinish(false);
+      }}
+    >
+      <section
+        className="modal alert-modal"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="confirm-title"
+        aria-describedby="confirm-message"
+      >
+        <h2 id="confirm-title">{request.title}</h2>
+        {request.message && <p id="confirm-message">{request.message}</p>}
+        <div className="modal-actions">
+          <button
+            ref={cancelRef}
+            className="secondary"
+            type="button"
+            onClick={() => onFinish(false)}
+          >
+            {request.cancelLabel}
+          </button>
+          <button
+            ref={confirmRef}
+            className={request.danger ? "alert-confirm" : "primary"}
+            type="button"
+            onClick={() => onFinish(true)}
+          >
+            {request.confirmLabel}
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}