opacacms 0.1.0

package/src/admin/ui/views/settings-view.tsx

@@ -0,0 +1,729 @@
+import { Check, Copy, Key, Loader2, Plus, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import type { SerializableConfig } from "../../../types";
+import { api } from "../../api-client";
+import type { ToastType } from "../../stores/ui";
+
+interface ApiKey {
+  id: string;
+  name: string;
+  prefix: string;
+  createdAt: string | number | Date;
+  permissions?: Record<string, string[]>;
+}
+
+export interface SettingsViewProps {
+  notify?: (message: string, type?: ToastType) => void;
+  config: SerializableConfig;
+}
+
+export function SettingsView({ notify, config }: SettingsViewProps) {
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [generating, setGenerating] = useState(false);
+  const [newKey, setNewKey] = useState<string | null>(null);
+  const [keyName, setKeyName] = useState("");
+  const [expiresIn, setExpiresIn] = useState<string>("31536000"); // Default: 1 year in seconds
+  const [copied, setCopied] = useState(false);
+  const [selectedPermissions, setSelectedPermissions] = useState<Record<string, string[]>>({});
+
+  const fetchApiKeys = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await api.get("api/auth/api-key/list").json<{ apiKeys: ApiKey[] }>();
+      setApiKeys(res.apiKeys || []);
+    } catch (err: unknown) {
+      console.error(err);
+      notify?.("Failed to load API keys", "error");
+    } finally {
+      setLoading(false);
+    }
+  }, [notify]);
+
+  useEffect(() => {
+    fetchApiKeys();
+  }, [fetchApiKeys]);
+
+  const togglePermission = (collectionSlug: string, permission: string) => {
+    setSelectedPermissions((prev) => {
+      const current = prev[collectionSlug] || [];
+      const newPermissions = { ...prev };
+
+      if (current.includes(permission)) {
+        const filtered = current.filter((p: string) => p !== permission);
+        if (filtered.length === 0) {
+          delete newPermissions[collectionSlug];
+        } else {
+          newPermissions[collectionSlug] = filtered;
+        }
+      } else {
+        newPermissions[collectionSlug] = [...current, permission];
+      }
+      return newPermissions;
+    });
+  };
+
+  const handleSelectAll = (collection: string) => {
+    setSelectedPermissions((prev) => ({
+      ...prev,
+      [collection]: ACTIONS,
+    }));
+  };
+
+  const handleClearAll = (collection: string) => {
+    setSelectedPermissions((prev) => {
+      const next = { ...prev };
+      delete next[collection];
+      return next;
+    });
+  };
+
+  const handleGenerateKey = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!keyName.trim()) return;
+
+    try {
+      setGenerating(true);
+      const res = await api
+        .post("api/__admin/api-key/create", {
+          json: {
+            name: keyName,
+            expiresIn: expiresIn ? Number(expiresIn) : undefined,
+            permissions: selectedPermissions,
+          },
+        })
+        .json<{ key: string }>();
+
+      setNewKey(res.key);
+      setKeyName("");
+      setExpiresIn("31536000");
+      setSelectedPermissions({});
+      await fetchApiKeys();
+      notify?.("API Key generated successfully");
+    } catch (err: unknown) {
+      console.error("API Key Creation Error:", err);
+      const errorData = (err as any).response?.json
+        ? await (err as any).response.json().catch(() => ({}))
+        : {};
+      notify?.(
+        errorData.message || (err as Error).message || "Failed to generate API key",
+        "error",
+      );
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const handleDeleteKey = async (keyId: string) => {
+    if (!confirm("Are you sure you want to delete this API key? This action cannot be undone."))
+      return;
+
+    try {
+      await api.post("api/auth/api-key/delete", {
+        json: { keyId },
+      });
+      await fetchApiKeys();
+      notify?.("API Key deleted successfully");
+    } catch (err: unknown) {
+      console.error(err);
+      notify?.("Failed to delete API key", "error");
+    }
+  };
+
+  const copyToClipboard = () => {
+    if (newKey) {
+      navigator.clipboard.writeText(newKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+      notify?.("API Key copied to clipboard");
+    }
+  };
+
+  const ACTIONS = ["read", "create", "update", "delete"];
+
+  return (
+    <div className="opaca-admin-form">
+      <div className="opaca-header">
+        <div>
+          <h1 className="opaca-title">Settings</h1>
+          <p className="opaca-subtitle">Manage project settings and API Keys.</p>
+        </div>
+      </div>
+
+      <div style={{ display: "grid", gap: "2.5rem" }}>
+        {/* Create API Key Section */}
+        <div
+          className="opaca-card"
+          style={{
+            padding: "2.5rem",
+            border: "1px solid var(--opaca-border-strong)",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              marginBottom: "1rem",
+            }}
+          >
+            <div
+              style={{
+                width: "32px",
+                height: "32px",
+                borderRadius: "8px",
+                background: "rgba(var(--opaca-accent-rgb), 0.1)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Plus size={18} color="var(--opaca-accent)" />
+            </div>
+            <h2 style={{ fontSize: "1.25rem", fontWeight: "600", margin: 0 }}>
+              Create New API Key
+            </h2>
+          </div>
+
+          <p
+            style={{
+              fontSize: "0.925rem",
+              color: "var(--opaca-text-dim)",
+              marginBottom: "2.5rem",
+              maxWidth: "600px",
+            }}
+          >
+            Generate a secure token for external systems. Define granular permissions to control
+            which data can be accessed or modified.
+          </p>
+
+          <form onSubmit={handleGenerateKey} style={{ display: "grid", gap: "2rem" }}>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "1rem",
+              }}
+            >
+              <div className="opaca-form-group" style={{ margin: 0 }}>
+                <label className="opaca-label" htmlFor="key-name">
+                  Key Name
+                </label>
+                <input
+                  id="key-name"
+                  type="text"
+                  className="opaca-input"
+                  style={{ fontSize: "1rem", padding: "0.875rem 1rem" }}
+                  value={keyName}
+                  onChange={(e) => setKeyName(e.target.value)}
+                  placeholder="e.g. Production Mobile App"
+                  required
+                />
+                <span
+                  style={{
+                    fontSize: "0.75rem",
+                    color: "var(--opaca-text-muted)",
+                    marginTop: "0.5rem",
+                    display: "block",
+                  }}
+                >
+                  A descriptive name to help you identify where this key is used.
+                </span>
+              </div>
+              <div className="opaca-form-group" style={{ margin: 0 }}>
+                <label className="opaca-label" htmlFor="expires-in">
+                  Expiration
+                </label>
+                <select
+                  id="expires-in"
+                  className="opaca-input"
+                  style={{
+                    fontSize: "1rem",
+                    padding: "0.875rem 1rem",
+                    height: "auto",
+                  }}
+                  value={expiresIn}
+                  onChange={(e) => setExpiresIn(e.target.value)}
+                >
+                  <option value="2592000">30 days</option>
+                  <option value="7776000">90 days</option>
+                  <option value="31536000">1 year</option>
+                  <option value="">Never expire</option>
+                </select>
+                <span
+                  style={{
+                    fontSize: "0.75rem",
+                    color: "var(--opaca-text-muted)",
+                    marginTop: "0.5rem",
+                    display: "block",
+                  }}
+                >
+                  How long until this key automatically expires.
+                </span>
+              </div>
+            </div>
+
+            <div
+              style={{
+                background: "rgba(var(--opaca-card-bg-rgb), 0.5)",
+                border: "1px solid var(--opaca-border)",
+                borderRadius: "12px",
+                overflow: "hidden",
+              }}
+            >
+              <div
+                style={{
+                  padding: "1rem 1.25rem",
+                  background: "rgba(0,0,0,0.2)",
+                  borderBottom: "1px solid var(--opaca-border)",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <label
+                  htmlFor="permissions-matrix"
+                  className="opaca-label"
+                  style={{ margin: 0, fontWeight: "600" }}
+                >
+                  Permissions Matrix
+                </label>
+                <span
+                  style={{
+                    fontSize: "0.75rem",
+                    color: "var(--opaca-text-muted)",
+                  }}
+                >
+                  Actions for {config.collections.length}{" "}
+                  {config.collections.length === 1 ? "collection" : "collections"}
+                </span>
+              </div>
+
+              <div style={{ overflowX: "auto" }}>
+                <table
+                  style={{
+                    width: "100%",
+                    borderCollapse: "collapse",
+                    textAlign: "left",
+                  }}
+                >
+                  <thead>
+                    <tr
+                      style={{
+                        borderBottom: "1px solid var(--opaca-border)",
+                        background: "rgba(255,255,255,0.02)",
+                      }}
+                    >
+                      <th
+                        style={{
+                          padding: "1rem 1.25rem",
+                          fontSize: "0.75rem",
+                          fontWeight: "600",
+                          color: "var(--opaca-text-muted)",
+                          textTransform: "uppercase",
+                        }}
+                      >
+                        Collection
+                      </th>
+                      {ACTIONS.map((action) => (
+                        <th
+                          key={action}
+                          style={{
+                            padding: "1rem",
+                            fontSize: "0.75rem",
+                            fontWeight: "600",
+                            color: "var(--opaca-text-muted)",
+                            textAlign: "center",
+                            textTransform: "uppercase",
+                          }}
+                        >
+                          {action}
+                        </th>
+                      ))}
+                      <th
+                        style={{
+                          padding: "1rem 1.25rem",
+                          fontSize: "0.75rem",
+                          fontWeight: "600",
+                          color: "var(--opaca-text-muted)",
+                          textAlign: "right",
+                          textTransform: "uppercase",
+                        }}
+                      >
+                        Full Access
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {config.collections.map((col) => {
+                      const selectedForCol = selectedPermissions[col.slug] || [];
+                      const isFullAccess = ACTIONS.every((a) => selectedForCol.includes(a));
+
+                      return (
+                        <tr
+                          key={col.slug}
+                          style={{
+                            borderBottom: "1px solid var(--opaca-border)",
+                            transition: "background 0.2s",
+                          }}
+                        >
+                          <td style={{ padding: "1rem 1.25rem" }}>
+                            <span
+                              style={{
+                                fontSize: "0.875rem",
+                                fontWeight: "600",
+                              }}
+                            >
+                              {col.slug}
+                            </span>
+                          </td>
+                          {ACTIONS.map((action) => {
+                            const isSelected = selectedForCol.includes(action);
+                            return (
+                              <td
+                                key={action}
+                                style={{
+                                  padding: "0.5rem",
+                                  textAlign: "center",
+                                }}
+                              >
+                                <button
+                                  type="button"
+                                  onClick={() => togglePermission(col.slug, action)}
+                                  style={{
+                                    width: "32px",
+                                    height: "32px",
+                                    borderRadius: "6px",
+                                    border: "1px solid",
+                                    borderColor: isSelected
+                                      ? "var(--opaca-accent)"
+                                      : "var(--opaca-border)",
+                                    background: isSelected
+                                      ? "rgba(var(--opaca-accent-rgb), 0.15)"
+                                      : "transparent",
+                                    color: isSelected
+                                      ? "var(--opaca-accent)"
+                                      : "var(--opaca-text-muted)",
+                                    display: "inline-flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    cursor: "pointer",
+                                    transition: "all 0.2s",
+                                  }}
+                                  title={`${action.charAt(0).toUpperCase() + action.slice(1)} ${col.slug}`}
+                                >
+                                  <Check
+                                    size={14}
+                                    style={{ opacity: isSelected ? 1 : 0.1 }}
+                                    strokeWidth={3}
+                                  />
+                                </button>
+                              </td>
+                            );
+                          })}
+                          <td
+                            style={{
+                              padding: "1rem 1.25rem",
+                              textAlign: "right",
+                            }}
+                          >
+                            <button
+                              type="button"
+                              onClick={() =>
+                                isFullAccess ? handleClearAll(col.slug) : handleSelectAll(col.slug)
+                              }
+                              style={{
+                                fontSize: "0.75rem",
+                                color: isFullAccess
+                                  ? "var(--opaca-accent)"
+                                  : "var(--opaca-text-dim)",
+                                background: "transparent",
+                                border: "1px solid",
+                                borderColor: isFullAccess
+                                  ? "var(--opaca-accent)"
+                                  : "var(--opaca-border)",
+                                padding: "0.3rem 0.75rem",
+                                borderRadius: "6px",
+                                cursor: "pointer",
+                                transition: "all 0.2s",
+                              }}
+                            >
+                              {isFullAccess ? "All Actions" : "Full Access?"}
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+
+              {config.collections.length === 0 && (
+                <div style={{ padding: "3rem 1rem", textAlign: "center" }}>
+                  <p
+                    style={{
+                      fontSize: "0.875rem",
+                      color: "var(--opaca-text-dim)",
+                    }}
+                  >
+                    No collections available to configure.
+                  </p>
+                </div>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              className="opaca-btn opaca-btn-primary"
+              disabled={generating || !keyName.trim()}
+              style={{
+                width: "100%",
+                height: "48px",
+                fontSize: "1rem",
+                fontWeight: "600",
+                boxShadow: "0 4px 12px rgba(var(--opaca-accent-rgb), 0.2)",
+                marginTop: "0.5rem",
+              }}
+            >
+              {generating ? (
+                <Loader2 size={18} className="opaca-spin" />
+              ) : (
+                <Plus size={18} strokeWidth={2.5} />
+              )}
+              Generate API Key
+            </button>
+          </form>
+        </div>
+
+        {/* Existing API Keys Section */}
+        <div style={{ padding: "0 0.5rem" }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              marginBottom: "1.5rem",
+            }}
+          >
+            <Key size={18} color="var(--opaca-text-dim)" />
+            <h2 style={{ fontSize: "1.125rem", fontWeight: "500", margin: 0 }}>Existing Keys</h2>
+            <div
+              style={{
+                height: "1px",
+                flex: 1,
+                background: "var(--opaca-border)",
+                marginLeft: "0.5rem",
+              }}
+            />
+          </div>
+
+          {newKey && (
+            <div
+              style={{
+                marginBottom: "2.5rem",
+                padding: "1.75rem",
+                background:
+                  "linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(52, 211, 153, 0.02) 100%)",
+                border: "1px solid rgba(52, 211, 153, 0.3)",
+                borderRadius: "16px",
+                position: "relative",
+                overflow: "hidden",
+              }}
+            >
+              <div
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "4px",
+                  height: "100%",
+                  background: "var(--opaca-success)",
+                }}
+              />
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "flex-start",
+                  marginBottom: "1.25rem",
+                }}
+              >
+                <div>
+                  <h3
+                    style={{
+                      fontSize: "1rem",
+                      fontWeight: "600",
+                      color: "var(--opaca-success)",
+                      margin: "0 0 0.4rem 0",
+                    }}
+                  >
+                    Key Generated Successfully
+                  </h3>
+                  <p
+                    style={{
+                      fontSize: "0.875rem",
+                      color: "var(--opaca-text-dim)",
+                      margin: 0,
+                    }}
+                  >
+                    Copy this key now. For security reasons, it cannot be displayed again.
+                  </p>
+                </div>
+                <div
+                  style={{
+                    padding: "0.4rem 0.8rem",
+                    borderRadius: "20px",
+                    background: "rgba(52, 211, 153, 0.2)",
+                    color: "var(--opaca-success)",
+                    fontSize: "0.7rem",
+                    fontWeight: "700",
+                    textTransform: "uppercase",
+                  }}
+                >
+                  Confidential
+                </div>
+              </div>
+              <div style={{ display: "flex", gap: "0.75rem" }}>
+                <code
+                  style={{
+                    flex: 1,
+                    padding: "1rem 1.25rem",
+                    background: "rgba(0,0,0,0.4)",
+                    border: "1px solid rgba(255,255,255,0.1)",
+                    borderRadius: "10px",
+                    fontFamily: "monospace",
+                    fontSize: "1rem",
+                    color: "#fff",
+                    letterSpacing: "0.5px",
+                  }}
+                >
+                  {newKey}
+                </code>
+                <button
+                  type="button"
+                  onClick={copyToClipboard}
+                  className="opaca-btn"
+                  style={{
+                    background: "white",
+                    color: "#000",
+                    width: "48px",
+                    height: "48px",
+                    borderRadius: "10px",
+                  }}
+                >
+                  {copied ? <Check size={18} /> : <Copy size={18} />}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {loading ? (
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                padding: "2rem",
+              }}
+            >
+              <Loader2 size={24} className="opaca-spin" color="var(--opaca-text-muted)" />
+            </div>
+          ) : apiKeys.length === 0 ? (
+            <div
+              style={{
+                textAlign: "center",
+                padding: "2rem",
+                color: "var(--opaca-text-muted)",
+                fontSize: "0.875rem",
+                background: "rgba(0,0,0,0.1)",
+                borderRadius: "var(--opaca-radius)",
+              }}
+            >
+              No API keys generated yet.
+            </div>
+          ) : (
+            <div style={{ display: "grid", gap: "0.5rem" }}>
+              {apiKeys.map((key) => (
+                <div
+                  key={key.id}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "1rem",
+                    background: "var(--opaca-card-bg)",
+                    border: "1px solid var(--opaca-border)",
+                    borderRadius: "var(--opaca-radius)",
+                  }}
+                >
+                  <div>
+                    <div
+                      style={{
+                        fontWeight: "500",
+                        fontSize: "0.875rem",
+                        marginBottom: "0.25rem",
+                      }}
+                    >
+                      {key.name}
+                    </div>
+                    <div
+                      style={{
+                        display: "flex",
+                        gap: "1rem",
+                        fontSize: "0.75rem",
+                        color: "var(--opaca-text-dim)",
+                      }}
+                    >
+                      <span>Created: {new Date(key.createdAt).toLocaleDateString()}</span>
+                      <span>Prefix: {key.prefix}...</span>
+                    </div>
+                    {key.permissions && Object.keys(key.permissions).length > 0 && (
+                      <div
+                        style={{
+                          marginTop: "0.75rem",
+                          display: "flex",
+                          flexWrap: "wrap",
+                          gap: "0.375rem",
+                        }}
+                      >
+                        {Object.entries(key.permissions).map(([col, perms]) => (
+                          <div
+                            key={col}
+                            style={{
+                              fontSize: "10px",
+                              background: "rgba(255,255,255,0.05)",
+                              padding: "0.125rem 0.5rem",
+                              borderRadius: "4px",
+                              border: "1px solid var(--opaca-border)",
+                              color: "var(--opaca-text-dim)",
+                            }}
+                          >
+                            <strong style={{ color: "var(--opaca-text)" }}>{col}:</strong>{" "}
+                            {(perms as string[]).join(", ")}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteKey(key.id)}
+                    className="opaca-btn"
+                    style={{
+                      color: "var(--opaca-error)",
+                      background: "transparent",
+                      border: "none",
+                      padding: "0.5rem",
+                    }}
+                    title="Revoke Key"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}