@carlonicora/nextjs-jsonapi 1.24.2 → 1.25.0

package/src/core/registry/ModuleRegistry.ts

@@ -26,6 +26,8 @@ export interface FoundationModuleDefinitions {
   StripeProduct: ModuleWithPermissions;
   StripePrice: ModuleWithPermissions;
   StripeUsage: ModuleWithPermissions;
+  // OAuth modules
+  OAuth: ModuleWithPermissions;
 }
 
 // App-specific modules - apps will augment this interface ONLY

package/src/features/billing/stripe-price/components/forms/PriceEditor.tsx

@@ -16,10 +16,8 @@ import {
   DialogHeader,
   DialogTitle,
   Form,
-  FormControl,
-  FormItem,
-  FormLabel,
   Input,
+  Label,
 } from "../../../../../shadcnui";
 import { StripePriceInterface, StripePriceService } from "../../data";
 
@@ -249,18 +247,16 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
             />
 
             {/* Features List */}
-            <FormItem>
-              <FormLabel>Features (optional)</FormLabel>
+            <div className="space-y-2">
+              <Label>Features (optional)</Label>
               <div className="space-y-2">
                 {form.watch("features").map((_, index) => (
                   <div key={index} className="flex gap-2">
-                    <FormControl>
-                      <Input
-                        {...form.register(`features.${index}`)}
-                        placeholder={`Feature ${index + 1}`}
-                        className="flex-1"
-                      />
-                    </FormControl>
+                    <Input
+                      {...form.register(`features.${index}`)}
+                      placeholder={`Feature ${index + 1}`}
+                      className="flex-1"
+                    />
                     <Button
                       type="button"
                       variant="outline"
@@ -291,7 +287,7 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
                   Add Feature
                 </Button>
               </div>
-            </FormItem>
+            </div>
 
             <FormCheckbox form={form} id="active" name="Active" />
 

package/src/features/company/components/forms/CompanyConfigurationSecurityForm.tsx

@@ -2,7 +2,8 @@
 
 import { useTranslations } from "next-intl";
 import { UseFormReturn } from "react-hook-form";
-import { Checkbox, FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from "../../../../shadcnui";
+import { FormFieldWrapper } from "../../../../components/forms";
+import { Checkbox, Input } from "../../../../shadcnui";
 
 type SecurityConfigurationFormProps = {
   form: UseFormReturn<any>;
@@ -47,44 +48,29 @@ export function CompanyConfigurationSecurityForm({ form }: SecurityConfiguration
       }
 
       return (
-        <FormField
+        <FormFieldWrapper
           key={currentField}
-          control={form.control}
+          form={form}
           name={currentField}
-          render={({ field: formField }) =>
+          label={label}
+          description={type === "checkbox" ? placeholder : undefined}
+          isRequired={isRequired}
+          orientation={type === "checkbox" ? "horizontal" : "vertical"}
+        >
+          {(field) =>
             type === "checkbox" ? (
-              <FormItem className="flex items-start space-x-4">
-                <FormControl>
-                  <Checkbox
-                    id={currentField}
-                    checked={formField.value}
-                    onCheckedChange={(checked) => {
-                      return checked ? formField.onChange(true) : formField.onChange(false);
-                    }}
-                  />
-                </FormControl>
-                <div className="grid gap-2">
-                  <FormLabel htmlFor={currentField}>
-                    {label} {isRequired && <span className="text-destructive">*</span>}
-                  </FormLabel>
-                  <p className="text-muted-foreground text-sm">{placeholder}</p>
-                </div>
-                <FormLabel></FormLabel>
-                <FormMessage />
-              </FormItem>
+              <Checkbox
+                id={currentField}
+                checked={field.value}
+                onCheckedChange={(checked) => {
+                  return checked ? field.onChange(true) : field.onChange(false);
+                }}
+              />
             ) : (
-              <FormItem>
-                <FormLabel>
-                  {label} {isRequired && <span className="text-destructive">*</span>}
-                </FormLabel>
-                <FormControl>
-                  <Input type={type} placeholder={placeholder} {...formField} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
+              <Input type={type} placeholder={placeholder} {...field} />
             )
           }
-        />
+        </FormFieldWrapper>
       );
     });
   };

package/src/features/feature/components/forms/FormFeatures.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Checkbox, FormLabel, FormMessage, ScrollArea } from "../../../../shadcnui";
+import { Checkbox, Label, ScrollArea } from "../../../../shadcnui";
 import { FeatureInterface } from "../../data";
 
 type FormFeaturesProps = {
@@ -44,14 +44,13 @@ export function FormFeatures({ form, name, features, featureField = "featureIds"
                     toggleFeature(feature, val === true);
                   }}
                 />
-                <FormLabel htmlFor={feature.id} className="ml-3 cursor-pointer font-normal">
+                <Label htmlFor={feature.id} className="ml-3 cursor-pointer font-normal">
                   {feature.name}
-                </FormLabel>
+                </Label>
               </div>
             ))}
         </div>
       </ScrollArea>
-      <FormMessage />
     </div>
   );
 }

package/src/features/index.ts

@@ -17,3 +17,4 @@ export * from "./role";
 export * from "./s3";
 export * from "./search";
 export * from "./user";
+export * from "./oauth";

package/src/features/oauth/atoms/index.ts

@@ -0,0 +1 @@
+export * from "./oauth.atoms";

package/src/features/oauth/atoms/oauth.atoms.ts

@@ -0,0 +1,131 @@
+import { atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import { OAuthClientInterface } from "../interfaces/oauth.interface";
+
+// ==========================================
+// OAUTH CLIENTS STATE
+// ==========================================
+
+/**
+ * Primary store for OAuth clients
+ * Populated by useOAuthClients hook
+ */
+export const oauthClientsAtom = atom<OAuthClientInterface[]>([]);
+
+/**
+ * Loading state for OAuth clients list
+ */
+export const oauthClientsLoadingAtom = atom<boolean>(false);
+
+/**
+ * Error state for OAuth client operations
+ */
+export const oauthClientsErrorAtom = atom<Error | null>(null);
+
+/**
+ * Derived atom family for getting a single client by ID
+ * Usage: const client = useAtomValue(oauthClientByIdAtom(clientId))
+ *
+ * @param clientId - The client ID (not the internal id, but the clientId field)
+ * @returns The client if found, undefined otherwise
+ */
+export const oauthClientByIdAtom = atomFamily((clientId: string) =>
+  atom((get) => {
+    const clients = get(oauthClientsAtom);
+    return clients.find((c) => c.clientId === clientId || c.id === clientId);
+  }),
+);
+
+// ==========================================
+// ONE-TIME SECRET DISPLAY STATE
+// ==========================================
+
+/**
+ * Stores the client secret for one-time display
+ * Set after createClient or regenerateSecret, cleared after user acknowledges
+ */
+export const oauthNewClientSecretAtom = atom<string | null>(null);
+
+/**
+ * The client ID associated with the new secret
+ * Used to know which client the secret belongs to
+ */
+export const oauthNewClientIdAtom = atom<string | null>(null);
+
+// ==========================================
+// CONSENT FLOW STATE
+// ==========================================
+
+/**
+ * Loading state for consent screen data fetch
+ */
+export const oauthConsentLoadingAtom = atom<boolean>(false);
+
+/**
+ * Error state for consent flow
+ */
+export const oauthConsentErrorAtom = atom<Error | null>(null);
+
+// ==========================================
+// WRITE ATOMS (for actions)
+// ==========================================
+
+/**
+ * Write atom to set a new client secret and associated client ID
+ */
+export const setNewClientSecretAtom = atom(null, (get, set, value: { clientId: string; secret: string } | null) => {
+  if (value === null) {
+    set(oauthNewClientSecretAtom, null);
+    set(oauthNewClientIdAtom, null);
+  } else {
+    set(oauthNewClientSecretAtom, value.secret);
+    set(oauthNewClientIdAtom, value.clientId);
+  }
+});
+
+/**
+ * Write atom to clear the new client secret (after user acknowledges)
+ */
+export const clearNewClientSecretAtom = atom(null, (get, set) => {
+  set(oauthNewClientSecretAtom, null);
+  set(oauthNewClientIdAtom, null);
+});
+
+/**
+ * Write atom to update the clients list
+ */
+export const setOAuthClientsAtom = atom(null, (get, set, clients: OAuthClientInterface[]) => {
+  set(oauthClientsAtom, clients);
+});
+
+/**
+ * Write atom to add a client to the list
+ */
+export const addOAuthClientAtom = atom(null, (get, set, client: OAuthClientInterface) => {
+  const clients = get(oauthClientsAtom);
+  set(oauthClientsAtom, [...clients, client]);
+});
+
+/**
+ * Write atom to update a client in the list
+ */
+export const updateOAuthClientAtom = atom(null, (get, set, updatedClient: OAuthClientInterface) => {
+  const clients = get(oauthClientsAtom);
+  const index = clients.findIndex((c) => c.id === updatedClient.id || c.clientId === updatedClient.clientId);
+  if (index !== -1) {
+    const newClients = [...clients];
+    newClients[index] = updatedClient;
+    set(oauthClientsAtom, newClients);
+  }
+});
+
+/**
+ * Write atom to remove a client from the list
+ */
+export const removeOAuthClientAtom = atom(null, (get, set, clientId: string) => {
+  const clients = get(oauthClientsAtom);
+  set(
+    oauthClientsAtom,
+    clients.filter((c) => c.id !== clientId && c.clientId !== clientId),
+  );
+});

package/src/features/oauth/components/OAuthClientCard.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { formatDistanceToNow } from "date-fns";
+import { Key, MoreVertical, Pencil, Trash2 } from "lucide-react";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../../shadcnui";
+import { OAuthClientInterface } from "../interfaces/oauth.interface";
+
+export interface OAuthClientCardProps {
+  /** The OAuth client to display */
+  client: OAuthClientInterface;
+  /** Called when card is clicked */
+  onClick?: () => void;
+  /** Called when edit is clicked */
+  onEdit?: () => void;
+  /** Called when delete is clicked */
+  onDelete?: () => void;
+}
+
+/**
+ * Card component for displaying an OAuth client in a list
+ */
+export function OAuthClientCard({
+  client,
+  onClick,
+  onEdit,
+  onDelete,
+}: OAuthClientCardProps) {
+  // Truncate client ID for display
+  const truncatedId = client.clientId.length > 12
+    ? `${client.clientId.slice(0, 8)}...${client.clientId.slice(-4)}`
+    : client.clientId;
+
+  const createdAgo = client.createdAt
+    ? formatDistanceToNow(new Date(client.createdAt), { addSuffix: true })
+    : "Unknown";
+
+  return (
+    <Card
+      className={`cursor-pointer transition-colors hover:bg-accent/50 ${!client.isActive ? "opacity-60" : ""}`}
+      onClick={onClick}
+    >
+      <CardHeader className="pb-2">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-2">
+            <Key className="h-5 w-5 text-muted-foreground" />
+            <CardTitle className="text-lg">{client.name}</CardTitle>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant={client.isActive ? "default" : "secondary"}>
+              {client.isActive ? "Active" : "Inactive"}
+            </Badge>
+            {(onEdit || onDelete) && (
+              <DropdownMenu>
+                <DropdownMenuTrigger onClick={(e) => e.stopPropagation()}>
+                  <Button render={<div />} nativeButton={false} variant="ghost" size="icon" className="h-8 w-8">
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {onEdit && (
+                    <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onEdit(); }}>
+                      <Pencil className="h-4 w-4 mr-2" />
+                      Edit
+                    </DropdownMenuItem>
+                  )}
+                  {onDelete && (
+                    <DropdownMenuItem
+                      onClick={(e) => { e.stopPropagation(); onDelete(); }}
+                      className="text-destructive"
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      Delete
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+        </div>
+        {client.description && (
+          <CardDescription className="line-clamp-2">{client.description}</CardDescription>
+        )}
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">
+          <span className="font-mono">{truncatedId}</span>
+          <span>Created {createdAgo}</span>
+          <span>{client.isConfidential ? "Confidential" : "Public"}</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/features/oauth/components/OAuthClientDetail.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { format } from "date-fns";
+import { Copy, Check, RefreshCw, Pencil, Trash2, ExternalLink } from "lucide-react";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Separator,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../../../shadcnui";
+import { OAuthClientInterface, OAUTH_SCOPE_DISPLAY } from "../interfaces/oauth.interface";
+
+export interface OAuthClientDetailProps {
+  /** The OAuth client to display */
+  client: OAuthClientInterface;
+  /** Whether data is loading */
+  isLoading?: boolean;
+  /** Called when edit is clicked */
+  onEdit?: () => void;
+  /** Called when delete is clicked */
+  onDelete?: () => Promise<void>;
+  /** Called when regenerate secret is clicked */
+  onRegenerateSecret?: () => Promise<void>;
+}
+
+/**
+ * Detailed view of an OAuth client
+ */
+export function OAuthClientDetail({
+  client,
+  isLoading = false,
+  onEdit,
+  onDelete,
+  onRegenerateSecret,
+}: OAuthClientDetailProps) {
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showRegenerateConfirm, setShowRegenerateConfirm] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+
+  const copyToClipboard = useCallback(async (text: string, field: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedField(field);
+      setTimeout(() => setCopiedField(null), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  }, []);
+
+  const handleDelete = useCallback(async () => {
+    if (!onDelete) return;
+    setIsDeleting(true);
+    try {
+      await onDelete();
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteConfirm(false);
+    }
+  }, [onDelete]);
+
+  const handleRegenerateSecret = useCallback(async () => {
+    if (!onRegenerateSecret) return;
+    setIsRegenerating(true);
+    try {
+      await onRegenerateSecret();
+    } finally {
+      setIsRegenerating(false);
+      setShowRegenerateConfirm(false);
+    }
+  }, [onRegenerateSecret]);
+
+  const createdDate = client.createdAt
+    ? format(new Date(client.createdAt), "MMMM d, yyyy")
+    : "Unknown";
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <div className="flex items-start justify-between">
+            <div>
+              <CardTitle className="text-2xl">{client.name}</CardTitle>
+              {client.description && (
+                <CardDescription className="mt-1">{client.description}</CardDescription>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant={client.isActive ? "default" : "secondary"}>
+                {client.isActive ? "Active" : "Inactive"}
+              </Badge>
+              <Badge variant="outline">
+                {client.isConfidential ? "Confidential" : "Public"}
+              </Badge>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Client ID */}
+          <div className="space-y-2">
+            <Label>Client ID</Label>
+            <div className="flex gap-2">
+              <Input value={client.clientId} readOnly className="font-mono" />
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => copyToClipboard(client.clientId, "clientId")}
+                title="Copy Client ID"
+              >
+                {copiedField === "clientId" ? (
+                  <Check className="h-4 w-4 text-green-600" />
+                ) : (
+                  <Copy className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          {/* Client Secret */}
+          <div className="space-y-2">
+            <Label>Client Secret</Label>
+            <div className="flex gap-2">
+              <Input value="••••••••••••••••••••••••••••••••" readOnly className="font-mono" />
+              {onRegenerateSecret && (
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => setShowRegenerateConfirm(true)}
+                  title="Regenerate Secret"
+                  disabled={isLoading}
+                >
+                  <RefreshCw className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Regenerating will invalidate the current secret and all existing tokens.
+            </p>
+          </div>
+
+          <Separator />
+
+          {/* Redirect URIs */}
+          <div className="space-y-2">
+            <Label>Redirect URIs</Label>
+            <ul className="space-y-1">
+              {client.redirectUris.map((uri, index) => (
+                <li key={index} className="flex items-center gap-2 text-sm font-mono">
+                  <ExternalLink className="h-3 w-3 text-muted-foreground" />
+                  {uri}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Scopes */}
+          <div className="space-y-2">
+            <Label>Allowed Scopes</Label>
+            <div className="flex flex-wrap gap-2">
+              {client.allowedScopes.map((scope) => (
+                <Badge key={scope} variant="secondary">
+                  {OAUTH_SCOPE_DISPLAY[scope]?.name || scope}
+                </Badge>
+              ))}
+            </div>
+          </div>
+
+          {/* Grant Types */}
+          <div className="space-y-2">
+            <Label>Grant Types</Label>
+            <div className="flex flex-wrap gap-2">
+              {client.allowedGrantTypes.map((grant) => (
+                <Badge key={grant} variant="outline">
+                  {grant.replace(/_/g, " ")}
+                </Badge>
+              ))}
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Metadata */}
+          <div className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-muted-foreground">
+            <span>Created: {createdDate}</span>
+          </div>
+
+          {/* Actions */}
+          <div className="flex gap-3 pt-4">
+            {onEdit && (
+              <Button variant="outline" onClick={onEdit} disabled={isLoading}>
+                <Pencil className="h-4 w-4 mr-2" />
+                Edit
+              </Button>
+            )}
+            {onDelete && (
+              <Button
+                variant="destructive"
+                onClick={() => setShowDeleteConfirm(true)}
+                disabled={isLoading}
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Delete Confirmation */}
+      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete OAuth Application?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete "{client.name}" and revoke all access tokens.
+              This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeleting ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Regenerate Confirmation */}
+      <AlertDialog open={showRegenerateConfirm} onOpenChange={setShowRegenerateConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Regenerate Client Secret?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will generate a new client secret and invalidate the old one.
+              All existing tokens will be revoked. You will need to update your application
+              with the new secret.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isRegenerating}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleRegenerateSecret} disabled={isRegenerating}>
+              {isRegenerating ? "Regenerating..." : "Regenerate"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}