@orhancodestudio/ocsm-core 0.1.0-alpha.1

package/src/admin/components/users-panel.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { type FormEvent, useState, useTransition } from "react";
+import type { PublicUser } from "../../users/user.types";
+import type {
+  CreateUserAction,
+  DeleteUserAction,
+  UpdateUserAction,
+} from "../admin.types";
+import styles from "../admin.module.css";
+import { DataTable, type DataTableColumn } from "./data-table";
+import { IconPencil, IconPlus, IconTrash } from "./icons";
+import { Modal } from "./modal";
+
+export interface RoleOption {
+  id: string;
+  name: string;
+}
+
+export interface UsersPanelProps {
+  users: PublicUser[];
+  roles: RoleOption[];
+  currentUserId: string;
+  createUser: CreateUserAction;
+  updateUser: UpdateUserAction;
+  deleteUser: DeleteUserAction;
+}
+
+type Dialog =
+  | { mode: "create" }
+  | { mode: "edit"; user: PublicUser }
+  | null;
+
+export function UsersPanel({
+  users,
+  roles,
+  currentUserId,
+  createUser,
+  updateUser,
+  deleteUser,
+}: UsersPanelProps) {
+  const router = useRouter();
+  const [dialog, setDialog] = useState<Dialog>(null);
+  const [pending, startTransition] = useTransition();
+
+  const roleName = (id: string) =>
+    roles.find((role) => role.id === id)?.name ?? id;
+
+  function onDelete(user: PublicUser) {
+    if (!window.confirm(`"${user.name}" kullanıcısı silinsin mi?`)) return;
+    startTransition(async () => {
+      const result = await deleteUser(user.id);
+      if (!result.ok && result.message) window.alert(result.message);
+      router.refresh();
+    });
+  }
+
+  const columns: DataTableColumn<PublicUser>[] = [
+    {
+      key: "name",
+      header: "Kullanıcı",
+      cell: (user) => (
+        <>
+          {user.name}
+          {user.id === currentUserId ? (
+            <span className={styles.badge} style={{ marginLeft: 8 }}>
+              sen
+            </span>
+          ) : null}
+        </>
+      ),
+    },
+    {
+      key: "username",
+      header: "Kullanıcı adı",
+      cell: (user) => <span className={styles.badge}>@{user.username}</span>,
+    },
+    {
+      key: "role",
+      header: "Rol",
+      cell: (user) => (
+        <span className={styles.roleBadge + " " + styles.roleAdmin}>
+          {roleName(user.role)}
+        </span>
+      ),
+    },
+    {
+      key: "actions",
+      header: "",
+      align: "right",
+      cell: (user) => (
+        <div className={styles.tableActions}>
+          <button
+            type="button"
+            className={`${styles.btn} ${styles.btnSm}`}
+            onClick={() => setDialog({ mode: "edit", user })}
+            title="Düzenle"
+          >
+            <IconPencil width={14} height={14} />
+          </button>
+          <button
+            type="button"
+            className={`${styles.btn} ${styles.btnSm} ${styles.btnDanger}`}
+            onClick={() => onDelete(user)}
+            disabled={user.id === currentUserId}
+            title={user.id === currentUserId ? "Kendini silemezsin" : "Sil"}
+          >
+            <IconTrash width={14} height={14} />
+          </button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>Kullanıcılar</h1>
+          <p className={styles.pageSubtitle}>{users.length} kullanıcı</p>
+        </div>
+        <button
+          type="button"
+          className={`${styles.btn} ${styles.btnPrimary}`}
+          onClick={() => setDialog({ mode: "create" })}
+        >
+          <IconPlus width={16} height={16} />
+          Yeni kullanıcı
+        </button>
+      </div>
+
+      <DataTable
+        columns={columns}
+        rows={users}
+        rowKey={(user) => user.id}
+        emptyText="Henüz kullanıcı yok."
+      />
+
+      {dialog?.mode === "create" ? (
+        <UserDialog
+          title="Yeni kullanıcı"
+          roles={roles}
+          pending={pending}
+          onClose={() => setDialog(null)}
+          onSubmit={(values, done) =>
+            startTransition(async () => {
+              const result = await createUser({
+                username: values.username,
+                name: values.name,
+                role: values.role,
+                password: values.password,
+              });
+              done(result.ok, result.message);
+              if (result.ok) {
+                setDialog(null);
+                router.refresh();
+              }
+            })
+          }
+        />
+      ) : null}
+
+      {dialog?.mode === "edit" ? (
+        <UserDialog
+          title="Kullanıcıyı düzenle"
+          roles={roles}
+          pending={pending}
+          initial={dialog.user}
+          onClose={() => setDialog(null)}
+          onSubmit={(values, done) =>
+            startTransition(async () => {
+              const result = await updateUser({
+                id: dialog.user.id,
+                name: values.name,
+                role: values.role,
+                password: values.password || undefined,
+              });
+              done(result.ok, result.message);
+              if (result.ok) {
+                setDialog(null);
+                router.refresh();
+              }
+            })
+          }
+        />
+      ) : null}
+    </div>
+  );
+}
+
+interface UserFormValues {
+  username: string;
+  name: string;
+  role: string;
+  password: string;
+}
+
+function UserDialog({
+  title,
+  roles,
+  initial,
+  pending,
+  onClose,
+  onSubmit,
+}: {
+  title: string;
+  roles: RoleOption[];
+  initial?: PublicUser;
+  pending: boolean;
+  onClose: () => void;
+  onSubmit: (
+    values: UserFormValues,
+    done: (ok: boolean, message?: string) => void,
+  ) => void;
+}) {
+  const isEdit = !!initial;
+  const [username, setUsername] = useState(initial?.username ?? "");
+  const [name, setName] = useState(initial?.name ?? "");
+  const [role, setRole] = useState(initial?.role ?? roles[0]?.id ?? "");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    setError(null);
+    onSubmit({ username, name, role, password }, (ok, message) => {
+      if (!ok) setError(message ?? "İşlem başarısız");
+    });
+  }
+
+  return (
+    <Modal
+      open
+      title={title}
+      onClose={onClose}
+      footer={
+        <>
+          <button
+            type="button"
+            className={styles.btn}
+            onClick={onClose}
+            disabled={pending}
+          >
+            Vazgeç
+          </button>
+          <button
+            type="submit"
+            form="ocsm-user-form"
+            className={`${styles.btn} ${styles.btnPrimary}`}
+            disabled={pending}
+          >
+            {pending ? "Kaydediliyor…" : "Kaydet"}
+          </button>
+        </>
+      }
+    >
+      <form id="ocsm-user-form" onSubmit={submit}>
+        {!isEdit ? (
+          <div className={styles.field}>
+            <label className={styles.label} htmlFor="u-username">
+              Kullanıcı adı
+            </label>
+            <input
+              id="u-username"
+              className={styles.input}
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              autoComplete="off"
+              required
+            />
+          </div>
+        ) : null}
+        <div className={styles.field}>
+          <label className={styles.label} htmlFor="u-name">
+            Ad Soyad
+          </label>
+          <input
+            id="u-name"
+            className={styles.input}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
+        <div className={styles.field}>
+          <label className={styles.label} htmlFor="u-role">
+            Rol
+          </label>
+          <select
+            id="u-role"
+            className={styles.select}
+            value={role}
+            onChange={(e) => setRole(e.target.value)}
+          >
+            {roles.map((r) => (
+              <option key={r.id} value={r.id}>
+                {r.name}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className={styles.field}>
+          <label className={styles.label} htmlFor="u-password">
+            {isEdit ? "Yeni şifre (boş bırakılırsa değişmez)" : "Şifre"}
+          </label>
+          <input
+            id="u-password"
+            type="password"
+            className={styles.input}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            autoComplete="new-password"
+            required={!isEdit}
+          />
+        </div>
+        {error ? <p className={styles.errorText}>{error}</p> : null}
+      </form>
+    </Modal>
+  );
+}

package/src/admin/index.ts

@@ -0,0 +1,20 @@
+export { OcsmAdmin, type OcsmAdminProps } from "./ocsm-admin";
+export type {
+  ActionResult,
+  CreateRoleAction,
+  CreateUserAction,
+  CreateUserActionInput,
+  DeleteDocumentAction,
+  DeleteRoleAction,
+  DeleteUserAction,
+  OcsmAdminActions,
+  RoleActionInput,
+  SaveDocumentAction,
+  SaveDocumentInput,
+  SaveLayoutAction,
+  SaveThemeAction,
+  SignOutAction,
+  UpdateRoleAction,
+  UpdateUserAction,
+  UpdateUserActionInput,
+} from "./admin.types";

package/src/admin/ocsm-admin.tsx

@@ -0,0 +1,259 @@
+import { userHasPermission } from "../auth/permissions";
+import type { SessionUser } from "../auth/session";
+import { type Block, createBlock, normalizeBlocks } from "../blocks/block.types";
+import type { Ocsm } from "../server/create-ocsm";
+import { checkForUpdates } from "../update/check-for-updates";
+import { OCSM_VERSION } from "../version";
+import type { OcsmAdminActions } from "./admin.types";
+import styles from "./admin.module.css";
+import { AccessDenied } from "./components/access-denied";
+import { AdminShell } from "./components/admin-shell";
+import { ContentListView } from "./components/content-list-view";
+import { DashboardView } from "./components/dashboard-view";
+import { PageBuilder } from "./components/page-builder";
+import { SettingsView } from "./components/settings-view";
+import { SystemView } from "./components/system-view";
+import { UsersPanel } from "./components/users-panel";
+
+const RESERVED = new Set(["users", "settings", "system"]);
+
+export interface OcsmAdminProps {
+  /** A configured OCS Management instance (from `createOcsm`). */
+  ocsm: Ocsm;
+  /** The authenticated user driving the panel. */
+  currentUser: SessionUser;
+  /** Catch-all route segments after `/ocsm-admin`. */
+  segments?: string[];
+  /** Server actions provided by the host app. */
+  actions: OcsmAdminActions;
+}
+
+/**
+ * The OCS Management admin panel. Render it from a catch-all route at
+ * `app/ocsm-admin/[[...segments]]/page.tsx`, passing the current user, your
+ * `ocsm` instance, and `"use server"` actions.
+ */
+export async function OcsmAdmin({
+  ocsm,
+  currentUser,
+  segments = [],
+  actions,
+}: OcsmAdminProps) {
+  const { brand, collections } = ocsm.config;
+  const canManageUsers = userHasPermission(currentUser, "users:manage");
+  const canManageSettings = userHasPermission(currentUser, "settings:manage");
+  const canDelete = userHasPermission(currentUser, "content:delete");
+
+  const update = await checkForUpdates();
+  const updateLatest = update.updateAvailable ? update.latest : null;
+  const storageBackend =
+    process.env.OCSM_GITHUB_TOKEN && process.env.OCSM_GITHUB_REPO
+      ? "github"
+      : "filesystem";
+
+  const [seg0, seg1] = segments;
+
+  const shell = (
+    active: string,
+    title: string,
+    children: React.ReactNode,
+  ) => (
+    <AdminShell
+      brand={brand}
+      collections={collections}
+      currentUser={currentUser}
+      active={active}
+      title={title}
+      canManageUsers={canManageUsers}
+      canManageSettings={canManageSettings}
+      signOut={actions.signOut}
+      updateLatest={updateLatest}
+    >
+      {children}
+    </AdminShell>
+  );
+
+  // --- Management sections ---
+  if (seg0 === "users") {
+    if (!canManageUsers) return shell("users", "Kullanıcılar", <AccessDenied />);
+    const [users, roles] = await Promise.all([
+      ocsm.users.list(),
+      ocsm.roles.list(),
+    ]);
+    return shell(
+      "users",
+      "Kullanıcılar",
+      <UsersPanel
+        users={users}
+        roles={roles.map((r) => ({ id: r.id, name: r.name }))}
+        currentUserId={currentUser.id}
+        createUser={actions.createUser}
+        updateUser={actions.updateUser}
+        deleteUser={actions.deleteUser}
+      />,
+    );
+  }
+
+  if (seg0 === "settings") {
+    if (!canManageSettings) {
+      return shell("settings", "Yapılandırma", <AccessDenied />);
+    }
+    const roles = await ocsm.roles.list();
+    return shell(
+      "settings",
+      "Yapılandırma",
+      <SettingsView
+        roles={roles}
+        createRole={actions.createRole}
+        updateRole={actions.updateRole}
+        deleteRole={actions.deleteRole}
+      />,
+    );
+  }
+
+  if (seg0 === "system") {
+    const userCount = await ocsm.users.count();
+    return shell(
+      "system",
+      "Sistem",
+      <SystemView
+        version={OCSM_VERSION}
+        updateLatest={updateLatest}
+        storageBackend={storageBackend}
+        userCount={userCount}
+        collectionCount={collections.length}
+      />,
+    );
+  }
+
+  // --- Content sections ---
+  const collection =
+    seg0 && !RESERVED.has(seg0)
+      ? collections.find((entry) => entry.name === seg0)
+      : undefined;
+
+  if (collection) {
+    // The page builder is a full-screen experience (rendered without the shell).
+    if (seg1 === "new") {
+      const [theme, headerBlocks, footerBlocks] = await Promise.all([
+        ocsm.theme.get(),
+        ocsm.layout.get("header"),
+        ocsm.layout.get("footer"),
+      ]);
+      return (
+        <PageBuilder
+          collection={collection.name}
+          collectionLabel={collection.label}
+          backHref={`/ocsm-admin/${collection.name}`}
+          saveAction={actions.saveDocument}
+          saveLayout={actions.saveLayout}
+          theme={theme}
+          initialBlocks={[]}
+          initialHeader={headerBlocks}
+          initialFooter={footerBlocks}
+        />
+      );
+    }
+
+    if (seg1) {
+      const [document, theme, headerBlocks, footerBlocks] = await Promise.all([
+        ocsm.getDocument(collection.name, seg1),
+        ocsm.theme.get(),
+        ocsm.layout.get("header"),
+        ocsm.layout.get("footer"),
+      ]);
+      return (
+        <PageBuilder
+          collection={collection.name}
+          collectionLabel={collection.label}
+          backHref={`/ocsm-admin/${collection.name}`}
+          saveAction={actions.saveDocument}
+          saveLayout={actions.saveLayout}
+          theme={theme}
+          initialSlug={seg1}
+          initialTitle={asString(document?.frontmatter.title)}
+          initialBlocks={loadInitialBlocks(
+            document?.frontmatter.blocks,
+            document?.body ?? "",
+          )}
+          initialHeader={headerBlocks}
+          initialFooter={footerBlocks}
+        />
+      );
+    }
+
+    const documents = await ocsm.listDocuments(collection.name);
+    return shell(
+      collection.name,
+      collection.label,
+      <ContentListView
+        collection={collection.name}
+        collectionLabel={collection.label}
+        canDelete={canDelete}
+        deleteAction={actions.deleteDocument}
+        documents={documents.map((entry) => ({
+          slug: entry.slug,
+          title: asString(entry.frontmatter.title) || entry.slug,
+        }))}
+      />,
+    );
+  }
+
+  if (seg0) {
+    return shell(
+      "dashboard",
+      "Bulunamadı",
+      <div className={styles.notice}>“{seg0}” bölümü bulunamadı.</div>,
+    );
+  }
+
+  // --- Dashboard ---
+  const overview = await Promise.all(
+    collections.map(async (entry) => ({
+      entry,
+      documents: await ocsm.listDocuments(entry.name),
+    })),
+  );
+
+  return shell(
+    "dashboard",
+    "Panel",
+    <DashboardView
+      currentUserName={currentUser.name}
+      version={OCSM_VERSION}
+      updateLatest={updateLatest}
+      stats={overview.map(({ entry, documents }) => ({
+        name: entry.name,
+        label: entry.label,
+        count: documents.length,
+      }))}
+      recent={overview
+        .flatMap(({ entry, documents }) =>
+          documents.map((document) => ({
+            collection: entry.name,
+            collectionLabel: entry.label,
+            slug: document.slug,
+            title: asString(document.frontmatter.title) || document.slug,
+          })),
+        )
+        .slice(0, 6)}
+    />,
+  );
+}
+
+function asString(value: unknown): string {
+  return typeof value === "string" ? value : "";
+}
+
+/**
+ * Builds the editor's initial blocks: prefers stored section blocks, and falls
+ * back to wrapping a legacy Markdown body in a single rich-text block.
+ */
+function loadInitialBlocks(frontmatterBlocks: unknown, body: string): Block[] {
+  const blocks = normalizeBlocks(frontmatterBlocks);
+  if (blocks.length > 0) return blocks;
+  if (body.trim()) {
+    return [{ ...createBlock("richText"), markdown: body } as Block];
+  }
+  return [];
+}

package/src/auth/authenticate.ts

@@ -0,0 +1,76 @@
+import type { RoleStore } from "../roles/role-store";
+import { SYSTEM_ADMIN_ROLE_ID } from "../roles/role.types";
+import type { UserStore } from "../users/user-store";
+import type { OcsmUser } from "../users/user.types";
+import { verifyPassword } from "./password";
+import type { SessionUser } from "./session";
+
+/**
+ * Verifies credentials against the user store and resolves the user's role into
+ * a session (name + permissions).
+ *
+ * Bootstrapping: if no users exist yet but `OCSM_ADMIN_USERNAME` and
+ * `OCSM_ADMIN_PASSWORD` are set, matching those credentials creates the first
+ * admin user and signs in.
+ *
+ * @returns the authenticated session user, or `null` on failure.
+ */
+export async function authenticate(
+  users: UserStore,
+  roles: RoleStore,
+  username: string,
+  password: string,
+): Promise<SessionUser | null> {
+  if ((await users.count()) === 0) {
+    const seedUsername = process.env.OCSM_ADMIN_USERNAME;
+    const seedPassword = process.env.OCSM_ADMIN_PASSWORD;
+    if (
+      seedUsername &&
+      seedPassword &&
+      username === seedUsername &&
+      password === seedPassword
+    ) {
+      const created = await users.create({
+        username: seedUsername,
+        name: "Yönetici",
+        role: SYSTEM_ADMIN_ROLE_ID,
+        password: seedPassword,
+      });
+      return toSessionUser(created, roles);
+    }
+    return null;
+  }
+
+  const user = await users.findByUsername(username);
+  if (!user || !verifyPassword(password, user.passwordHash)) return null;
+  return toSessionUser(user, roles);
+}
+
+/**
+ * Creates the first admin during initial setup. Only succeeds when no users
+ * exist yet — otherwise returns `null`.
+ */
+export async function setupFirstAdmin(
+  users: UserStore,
+  roles: RoleStore,
+  input: { username: string; name: string; password: string },
+): Promise<SessionUser | null> {
+  if ((await users.count()) > 0) return null;
+  const created = await users.create({ ...input, role: SYSTEM_ADMIN_ROLE_ID });
+  return toSessionUser(created, roles);
+}
+
+async function toSessionUser(
+  user: Pick<OcsmUser, "id" | "username" | "name" | "role">,
+  roles: RoleStore,
+): Promise<SessionUser> {
+  const resolved = await roles.resolve(user.role);
+  return {
+    id: user.id,
+    username: user.username,
+    name: user.name,
+    role: user.role,
+    roleName: resolved.name,
+    permissions: resolved.permissions,
+  };
+}

package/src/auth/index.ts

@@ -0,0 +1,9 @@
+export { authenticate, setupFirstAdmin } from "./authenticate";
+export { hashPassword, verifyPassword } from "./password";
+export { requirePermission, userHasPermission } from "./permissions";
+export {
+  createSession,
+  destroySession,
+  getSessionUser,
+  type SessionUser,
+} from "./session";

package/src/auth/password.ts

@@ -0,0 +1,22 @@
+import { randomBytes, scryptSync, timingSafeEqual } from "node:crypto";
+
+const KEY_LENGTH = 64;
+
+/**
+ * Hashes a password with scrypt and a random salt. Returns a `salt:hash` string
+ * safe to store in a committed file.
+ */
+export function hashPassword(password: string): string {
+  const salt = randomBytes(16).toString("hex");
+  const hash = scryptSync(password, salt, KEY_LENGTH).toString("hex");
+  return `${salt}:${hash}`;
+}
+
+/** Verifies a password against a `salt:hash` string in constant time. */
+export function verifyPassword(password: string, stored: string): boolean {
+  const [salt, hash] = stored.split(":");
+  if (!salt || !hash) return false;
+  const expected = Buffer.from(hash, "hex");
+  const actual = scryptSync(password, salt, KEY_LENGTH);
+  return expected.length === actual.length && timingSafeEqual(expected, actual);
+}