opacacms 0.1.11 → 0.1.13

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

@@ -1,729 +0,0 @@
-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>
-  );
-}