@percepta/create 3.3.0 → 3.4.1

package/templates/webapp/src/components/Header.tsx

@@ -9,10 +9,15 @@ import {
   DropdownMenuTrigger,
 } from "@percepta/design";
 import { LogOut } from "lucide-react";
+import Link from "next/link";
 import React, { useCallback } from "react";
 import { authClient } from "../lib/auth-client";
 
-export default function Header() {
+export default function Header({
+  showAdminLink,
+}: {
+  readonly showAdminLink: boolean;
+}) {
   const { data: session } = authClient.useSession();
   const user = session?.user;
 
@@ -31,7 +36,23 @@ export default function Header() {
   }
 
   return (
-    <header className="sticky top-0 z-30 flex h-16 w-full items-center justify-end border-b border-border bg-card px-4 shadow-sm sm:px-6 lg:px-8">
+    <header className="sticky top-0 z-30 flex h-16 w-full items-center justify-between border-b border-border bg-card px-4 shadow-sm sm:px-6 lg:px-8">
+      <nav aria-label="Primary navigation" className="flex items-center gap-2">
+        <Link
+          className="rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
+          href="/"
+        >
+          __APP_TITLE__
+        </Link>
+        {showAdminLink ? (
+          <Link
+            className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            href="/admin"
+          >
+            Admin
+          </Link>
+        ) : null}
+      </nav>
       <DropdownMenu>
         <DropdownMenuTrigger asChild={true}>
           <button

package/templates/webapp/src/server/api/routers/access.ts

@@ -5,8 +5,8 @@ export const accessRouter = router({
   roleManagementStatus: protectedProcedure
     .use(
       requirePermission({
-        permission: accessManifest.system.manageRolesPermission,
-        resource: accessManifest.system.ref(),
+        permission: accessManifest.application.manageAppRolesPermission,
+        resource: accessManifest.application.ref(),
       }),
     )
     .query(() => ({ canManageRoles: true })),

package/templates/webapp/src/services/access/AppAccessControl.ts

@@ -1,6 +1,7 @@
 import {
   type AppAccessRuntime,
   createAppAccessRuntime,
+  type CustomerAccessControl,
 } from "@percepta/access-control";
 import { accessManifest } from "../../access/access.manifest";
 import { getEnvConfig } from "../../config/getEnvConfig";
@@ -30,10 +31,32 @@ export function canAccessApplication(userId: string): Promise<boolean> {
   return appAccessRuntime.canAccessApplication(userId);
 }
 
+export function canManageAppRoles(userId: string): Promise<boolean> {
+  return appAccessRuntime.canManageAppRoles(userId);
+}
+
+export function canManageAppRolesStrong(userId: string): Promise<boolean> {
+  return appAccessRuntime.canManageAppRolesStrong(userId);
+}
+
+export function canManageDefaultRoles(userId: string): Promise<boolean> {
+  return appAccessRuntime.canManageDefaultRoles(userId);
+}
+
+export function canManageDefaultRolesStrong(
+  userId: string,
+): Promise<boolean> {
+  return appAccessRuntime.canManageDefaultRolesStrong(userId);
+}
+
 export function getAccessControl(): AppAccessControl {
   return appAccessRuntime.getAccessControl();
 }
 
+export function getCustomerAccessControl(): CustomerAccessControl {
+  return appAccessRuntime.getCustomerAccessControl();
+}
+
 export function toUserSubject(userId: string) {
   return appAccessRuntime.toUserSubject(userId);
 }

package/templates/webapp/src/services/inngest/events/AppEvents.ts

@@ -1,4 +1,4 @@
-import { ExampleEventPayload } from "./payloads/ExampleEventPayload";
+import { exampleEventPayloadSchema } from "./payloads/ExampleEventPayload";
 
 /**
  * Define all Inngest events for the application here.
@@ -24,5 +24,5 @@ import { ExampleEventPayload } from "./payloads/ExampleEventPayload";
  */
 export const AppEvents = {
   // Example event - replace with your actual events
-  "app/example.event": ExampleEventPayload.SCHEMA,
+  "app/example.event": exampleEventPayloadSchema,
 };

package/templates/webapp/src/services/inngest/events/payloads/ExampleEventPayload.ts

@@ -1,12 +1,8 @@
 import z from "zod";
 
-/**
- * Example event payload schema.
- * Replace this with your actual event payloads.
- */
-export type ExampleEventPayload = z.infer<typeof ExampleEventPayload.SCHEMA>;
-export namespace ExampleEventPayload {
-  export const SCHEMA = z.object({
-    exampleId: z.string(),
-  });
-}
+/** Example event payload schema. Replace this with your actual event payloads. */
+export const exampleEventPayloadSchema = z.object({
+  exampleId: z.string(),
+});
+
+export type ExampleEventPayload = z.infer<typeof exampleEventPayloadSchema>;

package/templates/webapp/src/app/(app)/admin/_lib/PrincipalRoleTable.tsx

@@ -1,113 +0,0 @@
-import type { SubjectRef } from "@percepta/access-control";
-import { ShieldCheck, ShieldMinus } from "lucide-react";
-import { type AccessAppRole, assignableRoles } from "./accessAdmin";
-
-type RoleAction = (formData: FormData) => Promise<void>;
-
-export interface PrincipalRoleRow {
-  readonly accessLabel: string;
-  readonly canAssignRoles?: boolean;
-  readonly detail: string;
-  readonly displayName: string;
-  readonly roles: readonly AccessAppRole[];
-  readonly subject: SubjectRef;
-}
-
-export function PrincipalRoleTable({
-  assignAction,
-  principalColumnLabel,
-  revokeAction,
-  rows,
-}: {
-  readonly assignAction: RoleAction;
-  readonly principalColumnLabel: string;
-  readonly revokeAction: RoleAction;
-  readonly rows: readonly PrincipalRoleRow[];
-}) {
-  return (
-    <div className="overflow-x-auto rounded-md border border-border">
-      <table className="w-full text-left text-sm">
-        <thead className="border-b border-border bg-muted/50 text-xs text-muted-foreground uppercase">
-          <tr>
-            <th className="px-4 py-3 font-medium">{principalColumnLabel}</th>
-            <th className="px-4 py-3 font-medium">Application Access</th>
-            <th className="px-4 py-3 font-medium">Roles</th>
-            <th className="px-4 py-3 font-medium">Actions</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border">
-          {rows.map((principal) => (
-            <tr key={principal.subject} className="align-top">
-              <td className="px-4 py-4">
-                <div className="font-medium text-foreground">
-                  {principal.displayName}
-                </div>
-                <div className="text-muted-foreground">{principal.detail}</div>
-              </td>
-              <td className="px-4 py-4 text-foreground">
-                {principal.accessLabel}
-              </td>
-              <td className="px-4 py-4">
-                {principal.roles.length > 0 ? (
-                  <div className="flex flex-wrap gap-2">
-                    {principal.roles.map((role) => (
-                      <span
-                        key={role}
-                        className="rounded-md border border-border bg-muted px-2 py-1 text-xs font-medium text-foreground"
-                      >
-                        {role}
-                      </span>
-                    ))}
-                  </div>
-                ) : (
-                  <span className="text-muted-foreground">None</span>
-                )}
-              </td>
-              <td className="px-4 py-4">
-                <div className="flex flex-wrap gap-2">
-                  {assignableRoles.map((role) => {
-                    const hasRole = principal.roles.includes(role);
-                    const action = hasRole ? revokeAction : assignAction;
-                    return (
-                      <form action={action} key={role}>
-                        <input
-                          name="subject"
-                          type="hidden"
-                          value={principal.subject}
-                        />
-                        <input name="role" type="hidden" value={role} />
-                        <button
-                          className={
-                            hasRole
-                              ? "inline-flex h-9 items-center gap-2 rounded-md border border-border px-3 text-sm font-medium text-foreground transition-colors hover:bg-muted"
-                              : "inline-flex h-9 items-center gap-2 rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
-                          }
-                          disabled={
-                            !hasRole && principal.canAssignRoles === false
-                          }
-                          type="submit"
-                        >
-                          {hasRole ? (
-                            <>
-                              <ShieldMinus className="h-4 w-4" />
-                              Revoke {role}
-                            </>
-                          ) : (
-                            <>
-                              <ShieldCheck className="h-4 w-4" />
-                              Assign {role}
-                            </>
-                          )}
-                        </button>
-                      </form>
-                    );
-                  })}
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/templates/webapp/src/app/(app)/admin/_lib/accessAdmin.ts

@@ -1,85 +0,0 @@
-import type { AppRole, SubjectRef } from "@percepta/access-control";
-import { revalidatePath } from "next/cache";
-import { notFound, redirect } from "next/navigation";
-import { accessManifest } from "../../../../access/access.manifest";
-import { getServerSession } from "../../../../lib/auth";
-import {
-  getAccessControl,
-  toUserSubject,
-} from "../../../../services/access/AppAccessControl";
-
-export type AccessAppRole = AppRole<typeof accessManifest>;
-
-export const assignableRoles: readonly AccessAppRole[] =
-  accessManifest.system.assignableRoles ?? [];
-
-export async function updatePrincipalRole(
-  formData: FormData,
-  operation: "assign" | "revoke",
-  path: string,
-) {
-  await requireRoleManager();
-  const app = getAccessControl().app;
-  const role = readAssignableRole(formData);
-  const subject = readPrincipalSubject(formData);
-
-  if (operation === "assign") {
-    await app.assignAppRole(role, subject);
-  } else {
-    await app.revokeAppRole(role, subject);
-  }
-
-  revalidatePath(path);
-}
-
-export async function requireRoleManager() {
-  if (!isAdminUiEnabled()) {
-    notFound();
-  }
-
-  const session = await getServerSession();
-
-  if (session?.user == null) {
-    redirect("/auth/signin");
-  }
-
-  const allowed = await getAccessControl().permissions.canStrong({
-    permission: accessManifest.system.manageRolesPermission,
-    resource: accessManifest.system.ref(),
-    subject: toUserSubject(session.user.id),
-  });
-  if (!allowed) {
-    notFound();
-  }
-}
-
-export function readAssignableRole(formData: FormData): AccessAppRole {
-  const role = formData.get("role");
-  if (
-    typeof role !== "string" ||
-    !assignableRoles.includes(role as AccessAppRole)
-  ) {
-    throw new Error("Invalid app role.");
-  }
-
-  return role as AccessAppRole;
-}
-
-function readPrincipalSubject(formData: FormData): SubjectRef {
-  const subject = formData.get("subject");
-  if (
-    typeof subject !== "string" ||
-    (!subject.startsWith("core/user:") &&
-      !/^core\/group:[^#]+#member$/.test(subject))
-  ) {
-    throw new Error("Invalid principal subject.");
-  }
-
-  return subject as SubjectRef;
-}
-
-function isAdminUiEnabled(): boolean {
-  const adminUI: { readonly enabled?: boolean } | undefined =
-    accessManifest.adminUI;
-  return adminUI?.enabled !== false;
-}

package/templates/webapp/src/app/(app)/admin/groups/page.tsx

@@ -1,117 +0,0 @@
-import type { SubjectRef } from "@percepta/access-control";
-import { db as authDb } from "@__REPO_NAME__/auth/db";
-import { groups } from "@__REPO_NAME__/auth/schema";
-import { inArray } from "drizzle-orm";
-import type { Metadata } from "next";
-import { accessManifest } from "../../../../access/access.manifest";
-import { getAccessControl } from "../../../../services/access/AppAccessControl";
-import {
-  type PrincipalRoleRow,
-  PrincipalRoleTable,
-} from "../_lib/PrincipalRoleTable";
-import { requireRoleManager, updatePrincipalRole } from "../_lib/accessAdmin";
-
-export const metadata: Metadata = {
-  title: "Groups - __APP_TITLE__",
-  description: "Groups - __APP_TITLE__",
-};
-
-const GROUP_SUBJECT_PATTERN = /^core\/group:([^#]+)#member$/;
-
-export default async function AdminGroupsPage() {
-  await requireRoleManager();
-
-  const rows = await listApplicationGroups();
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-foreground">Groups</h1>
-      </div>
-
-      {rows.length === 0 ? (
-        <div className="rounded-md border border-border bg-card p-8 text-sm text-muted-foreground">
-          <p className="font-medium text-foreground">No groups enrolled.</p>
-          <p className="mt-2">
-            Groups appear here after the customer identity sync projects them
-            into SpiceDB and grants this application access.
-          </p>
-        </div>
-      ) : (
-        <PrincipalRoleTable
-          assignAction={assignGroupRole}
-          principalColumnLabel="Group"
-          revokeAction={revokeGroupRole}
-          rows={rows}
-        />
-      )}
-    </div>
-  );
-}
-
-async function assignGroupRole(formData: FormData) {
-  "use server";
-
-  await updatePrincipalRole(formData, "assign", "/admin/groups");
-}
-
-async function revokeGroupRole(formData: FormData) {
-  "use server";
-
-  await updatePrincipalRole(formData, "revoke", "/admin/groups");
-}
-
-async function listApplicationGroups(): Promise<readonly PrincipalRoleRow[]> {
-  const access = getAccessControl();
-  const subjects = await access.permissions.lookupSubjects({
-    permission: accessManifest.system.accessPermission,
-    resource: accessManifest.system.ref(),
-    subjectRelation: "member",
-    subjectType: "core/group",
-  });
-
-  if (subjects.length === 0) {
-    return [];
-  }
-
-  const groupRefs = subjects.map((subject) => ({
-    id: groupIdFromSubject(subject),
-    subject,
-  }));
-  const groupNames = await listGroupNames(groupRefs.map(({ id }) => id));
-
-  const rows = await Promise.all(
-    groupRefs.map(async ({ id, subject }) => ({
-      accessLabel: "Allowed",
-      detail: subject,
-      displayName: groupNames.get(id) ?? id,
-      roles: await access.app.listAppRoles(subject),
-      subject,
-    })),
-  );
-
-  return rows.sort((a, b) => a.displayName.localeCompare(b.displayName));
-}
-
-async function listGroupNames(
-  groupIds: readonly string[],
-): Promise<ReadonlyMap<string, string>> {
-  const groupRows = await authDb
-    .select({
-      id: groups.id,
-      name: groups.name,
-    })
-    .from(groups)
-    .where(inArray(groups.id, [...new Set(groupIds)]));
-
-  return new Map(groupRows.map((group) => [group.id, group.name]));
-}
-
-function groupIdFromSubject(subject: SubjectRef): string {
-  const id = GROUP_SUBJECT_PATTERN.exec(subject)?.[1];
-  if (id == null) {
-    throw new Error("Invalid group subject.");
-  }
-
-  return id;
-}

package/templates/webapp/src/app/(app)/admin/users/page.tsx

@@ -1,79 +0,0 @@
-import { db as authDb } from "@__REPO_NAME__/auth/db";
-import { users } from "@__REPO_NAME__/auth/schema";
-import type { Metadata } from "next";
-import { accessManifest } from "../../../../access/access.manifest";
-import {
-  getAccessControl,
-  toUserSubject,
-} from "../../../../services/access/AppAccessControl";
-import { PrincipalRoleTable } from "../_lib/PrincipalRoleTable";
-import { requireRoleManager, updatePrincipalRole } from "../_lib/accessAdmin";
-
-export const metadata: Metadata = {
-  title: "Users - __APP_TITLE__",
-  description: "Users - __APP_TITLE__",
-};
-
-export default async function AdminUsersPage() {
-  await requireRoleManager();
-
-  const access = getAccessControl();
-  const userRows = await authDb
-    .select({
-      email: users.email,
-      id: users.id,
-      name: users.name,
-    })
-    .from(users)
-    .orderBy(users.email);
-
-  const rows = await Promise.all(
-    userRows.map(async (user) => {
-      const subject = toUserSubject(user.id);
-      const [canAccessApp, roles] = await Promise.all([
-        access.permissions.can({
-          permission: accessManifest.system.accessPermission,
-          resource: accessManifest.system.ref(),
-          subject,
-        }),
-        access.app.listAppRoles(subject),
-      ]);
-
-      return {
-        accessLabel: canAccessApp ? "Allowed" : "Not enrolled",
-        canAssignRoles: canAccessApp,
-        detail: user.email,
-        displayName: user.name,
-        roles,
-        subject,
-      };
-    }),
-  );
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold text-foreground">Users</h1>
-      </div>
-
-      <PrincipalRoleTable
-        assignAction={assignUserRole}
-        principalColumnLabel="User"
-        revokeAction={revokeUserRole}
-        rows={rows}
-      />
-    </div>
-  );
-}
-
-async function assignUserRole(formData: FormData) {
-  "use server";
-
-  await updatePrincipalRole(formData, "assign", "/admin/users");
-}
-
-async function revokeUserRole(formData: FormData) {
-  "use server";
-
-  await updatePrincipalRole(formData, "revoke", "/admin/users");
-}