@carlonicora/nextjs-jsonapi 1.24.2 → 1.25.0

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

@@ -0,0 +1,212 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  Textarea,
+  RadioGroup,
+  RadioGroupItem,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../../shadcnui";
+import { OAuthRedirectUriInput } from "./OAuthRedirectUriInput";
+import { OAuthScopeSelector } from "./OAuthScopeSelector";
+import { OAuthClientCreateRequest, OAuthClientInterface, DEFAULT_GRANT_TYPES } from "../interfaces/oauth.interface";
+
+export interface OAuthClientFormProps {
+  /** Existing client for edit mode (undefined = create mode) */
+  client?: OAuthClientInterface;
+  /** Called on form submit */
+  onSubmit: (data: OAuthClientCreateRequest) => Promise<void>;
+  /** Called on cancel */
+  onCancel: () => void;
+  /** Whether form is submitting */
+  isLoading?: boolean;
+}
+
+interface FormState {
+  name: string;
+  description: string;
+  redirectUris: string[];
+  allowedScopes: string[];
+  isConfidential: boolean;
+}
+
+interface FormErrors {
+  name?: string;
+  redirectUris?: string;
+  allowedScopes?: string;
+}
+
+/**
+ * Form for creating or editing an OAuth client
+ */
+export function OAuthClientForm({
+  client,
+  onSubmit,
+  onCancel,
+  isLoading = false,
+}: OAuthClientFormProps) {
+  const isEditMode = !!client;
+
+  const [formState, setFormState] = useState<FormState>({
+    name: client?.name || "",
+    description: client?.description || "",
+    redirectUris: client?.redirectUris?.length ? client.redirectUris : [""],
+    allowedScopes: client?.allowedScopes || [],
+    isConfidential: client?.isConfidential ?? true,
+  });
+
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  const validate = useCallback((): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (!formState.name.trim()) {
+      newErrors.name = "Application name is required";
+    }
+
+    const validUris = formState.redirectUris.filter((uri) => uri.trim());
+    if (validUris.length === 0) {
+      newErrors.redirectUris = "At least one redirect URI is required";
+    }
+
+    if (formState.allowedScopes.length === 0) {
+      newErrors.allowedScopes = "At least one scope must be selected";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [formState]);
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+
+      if (!validate()) return;
+
+      const data: OAuthClientCreateRequest = {
+        name: formState.name.trim(),
+        description: formState.description.trim() || undefined,
+        redirectUris: formState.redirectUris.filter((uri) => uri.trim()),
+        allowedScopes: formState.allowedScopes,
+        allowedGrantTypes: DEFAULT_GRANT_TYPES,
+        isConfidential: formState.isConfidential,
+      };
+
+      await onSubmit(data);
+    },
+    [formState, validate, onSubmit]
+  );
+
+  return (
+    <Card>
+      <form onSubmit={handleSubmit}>
+        <CardHeader>
+          <CardTitle>{isEditMode ? "Edit Application" : "Create OAuth Application"}</CardTitle>
+          <CardDescription>
+            {isEditMode
+              ? "Update your OAuth application settings."
+              : "Register a new application to access the API."}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* Name */}
+          <div className="space-y-2">
+            <Label htmlFor="name">Application Name *</Label>
+            <Input
+              id="name"
+              value={formState.name}
+              onChange={(e) => setFormState((s) => ({ ...s, name: e.target.value }))}
+              placeholder="My Lightroom Plugin"
+              disabled={isLoading}
+              className={errors.name ? "border-destructive" : ""}
+            />
+            {errors.name && <p className="text-sm text-destructive">{errors.name}</p>}
+          </div>
+
+          {/* Description */}
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formState.description}
+              onChange={(e) => setFormState((s) => ({ ...s, description: e.target.value }))}
+              placeholder="A brief description of your application"
+              disabled={isLoading}
+              rows={3}
+            />
+          </div>
+
+          {/* Redirect URIs */}
+          <OAuthRedirectUriInput
+            value={formState.redirectUris}
+            onChange={(uris) => setFormState((s) => ({ ...s, redirectUris: uris }))}
+            error={errors.redirectUris}
+            disabled={isLoading}
+          />
+
+          {/* Scopes */}
+          <OAuthScopeSelector
+            value={formState.allowedScopes}
+            onChange={(scopes) => setFormState((s) => ({ ...s, allowedScopes: scopes }))}
+            error={errors.allowedScopes}
+            disabled={isLoading}
+          />
+
+          {/* Client Type */}
+          <div className="space-y-3">
+            <Label>Client Type</Label>
+            <RadioGroup
+              value={formState.isConfidential ? "confidential" : "public"}
+              onValueChange={(v) => setFormState((s) => ({ ...s, isConfidential: v === "confidential" }))}
+              disabled={isLoading || isEditMode}
+            >
+              <div className="flex items-start space-x-3 p-3 rounded-md border">
+                <RadioGroupItem value="confidential" id="confidential" className="mt-1" />
+                <div>
+                  <Label htmlFor="confidential" className="font-medium cursor-pointer">
+                    Confidential
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    Server-side application that can securely store the client secret.
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start space-x-3 p-3 rounded-md border">
+                <RadioGroupItem value="public" id="public" className="mt-1" />
+                <div>
+                  <Label htmlFor="public" className="font-medium cursor-pointer">
+                    Public
+                  </Label>
+                  <p className="text-sm text-muted-foreground">
+                    Mobile or desktop application. Requires PKCE for authorization.
+                  </p>
+                </div>
+              </div>
+            </RadioGroup>
+            {isEditMode && (
+              <p className="text-sm text-muted-foreground">
+                Client type cannot be changed after creation.
+              </p>
+            )}
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-end gap-3">
+          <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isLoading}>
+            {isLoading ? "Saving..." : isEditMode ? "Save Changes" : "Create Application"}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

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

@@ -0,0 +1,127 @@
+"use client";
+
+import { Plus, Key } from "lucide-react";
+import { Button, Skeleton } from "../../../shadcnui";
+import { OAuthClientCard } from "./OAuthClientCard";
+import { OAuthClientInterface } from "../interfaces/oauth.interface";
+
+export interface OAuthClientListProps {
+  /** List of OAuth clients */
+  clients: OAuthClientInterface[];
+  /** Whether list is loading */
+  isLoading?: boolean;
+  /** Error to display */
+  error?: Error | null;
+  /** Called when a client is clicked */
+  onClientClick?: (client: OAuthClientInterface) => void;
+  /** Called when create button is clicked */
+  onCreateClick?: () => void;
+  /** Called when edit is clicked on a client */
+  onEditClick?: (client: OAuthClientInterface) => void;
+  /** Called when delete is clicked on a client */
+  onDeleteClick?: (client: OAuthClientInterface) => void;
+  /** Message to show when list is empty */
+  emptyStateMessage?: string;
+  /** Title for the list */
+  title?: string;
+}
+
+/**
+ * Component for displaying a list of OAuth clients
+ */
+export function OAuthClientList({
+  clients,
+  isLoading = false,
+  error,
+  onClientClick,
+  onCreateClick,
+  onEditClick,
+  onDeleteClick,
+  emptyStateMessage = "No OAuth applications yet. Create one to get started.",
+  title = "OAuth Applications",
+}: OAuthClientListProps) {
+  // Loading state
+  if (isLoading && clients.length === 0) {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold">{title}</h2>
+          <Skeleton className="h-10 w-32" />
+        </div>
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-32 w-full" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold">{title}</h2>
+        </div>
+        <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center">
+          <p className="text-destructive">{error.message}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (clients.length === 0) {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h2 className="text-2xl font-bold">{title}</h2>
+          {onCreateClick && (
+            <Button onClick={onCreateClick}>
+              <Plus className="h-4 w-4 mr-2" />
+              New App
+            </Button>
+          )}
+        </div>
+        <div className="rounded-lg border border-dashed p-12 text-center">
+          <Key className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+          <h3 className="text-lg font-medium mb-2">No OAuth Applications</h3>
+          <p className="text-muted-foreground mb-4">{emptyStateMessage}</p>
+          {onCreateClick && (
+            <Button onClick={onCreateClick}>
+              <Plus className="h-4 w-4 mr-2" />
+              Create Application
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // List view
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-2xl font-bold">{title}</h2>
+        {onCreateClick && (
+          <Button onClick={onCreateClick}>
+            <Plus className="h-4 w-4 mr-2" />
+            New App
+          </Button>
+        )}
+      </div>
+      <div className="space-y-3">
+        {clients.map((client) => (
+          <OAuthClientCard
+            key={client.id || client.clientId}
+            client={client}
+            onClick={() => onClientClick?.(client)}
+            onEdit={onEditClick ? () => onEditClick(client) : undefined}
+            onDelete={onDeleteClick ? () => onDeleteClick(client) : undefined}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,127 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Copy, Check, AlertTriangle } from "lucide-react";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Alert,
+  AlertDescription,
+  Input,
+} from "../../../shadcnui";
+
+export interface OAuthClientSecretDisplayProps {
+  /** The client secret to display */
+  secret: string;
+  /** Called when user dismisses the dialog */
+  onDismiss: () => void;
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Optional client name for context */
+  clientName?: string;
+}
+
+/**
+ * Modal dialog for displaying a client secret ONE TIME
+ * Shows warning that secret cannot be retrieved again
+ *
+ * @example
+ * ```tsx
+ * const [secret, setSecret] = useAtom(oauthNewClientSecretAtom);
+ *
+ * <OAuthClientSecretDisplay
+ *   secret={secret || ''}
+ *   open={!!secret}
+ *   onDismiss={() => setSecret(null)}
+ * />
+ * ```
+ */
+export function OAuthClientSecretDisplay({
+  secret,
+  onDismiss,
+  open,
+  clientName,
+}: OAuthClientSecretDisplayProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(secret);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy to clipboard:", err);
+    }
+  }, [secret]);
+
+  const handleDismiss = useCallback(() => {
+    setCopied(false);
+    onDismiss();
+  }, [onDismiss]);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleDismiss()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-warning" />
+            Save Your Client Secret
+          </DialogTitle>
+          <DialogDescription>
+            {clientName
+              ? `Your client secret for "${clientName}" is shown below.`
+              : "Your client secret is shown below."}
+          </DialogDescription>
+        </DialogHeader>
+
+        <Alert variant="destructive" className="my-4">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription>
+            <strong>This is the only time your client secret will be displayed.</strong>
+            <br />
+            Copy it now and store it securely. You will not be able to retrieve it later.
+          </AlertDescription>
+        </Alert>
+
+        <div className="flex items-center space-x-2">
+          <div className="flex-1">
+            <Input
+              value={secret}
+              readOnly
+              className="font-mono text-sm"
+              onClick={(e) => e.currentTarget.select()}
+            />
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={handleCopy}
+            title={copied ? "Copied!" : "Copy to clipboard"}
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-green-600" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+
+        {copied && (
+          <p className="text-sm text-green-600 text-center">Copied to clipboard!</p>
+        )}
+
+        <DialogFooter className="mt-4">
+          <Button onClick={handleDismiss} className="w-full">
+            I've Saved My Secret
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,152 @@
+"use client";
+
+import { useCallback } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button, Input, Label } from "../../../shadcnui";
+
+export interface OAuthRedirectUriInputProps {
+  /** Current array of redirect URIs */
+  value: string[];
+  /** Called when URIs change */
+  onChange: (uris: string[]) => void;
+  /** Error message to display */
+  error?: string;
+  /** Whether input is disabled */
+  disabled?: boolean;
+  /** Label text */
+  label?: string;
+}
+
+/**
+ * Validates a redirect URI
+ * Allows: https://, http://localhost, custom schemes (myapp://)
+ */
+function isValidRedirectUri(uri: string): boolean {
+  if (!uri.trim()) return false;
+
+  // Allow localhost for development
+  if (uri.startsWith("http://localhost") || uri.startsWith("http://127.0.0.1")) {
+    return true;
+  }
+
+  // Require HTTPS for non-localhost
+  if (uri.startsWith("https://")) {
+    try {
+      new URL(uri);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  // Allow custom schemes (e.g., myapp://oauth/callback)
+  if (uri.includes("://")) {
+    const schemeMatch = uri.match(/^([a-zA-Z][a-zA-Z0-9+.-]*):\/\//);
+    return schemeMatch !== null;
+  }
+
+  return false;
+}
+
+/**
+ * Dynamic input for managing OAuth redirect URIs
+ *
+ * @example
+ * ```tsx
+ * const [redirectUris, setRedirectUris] = useState<string[]>(['']);
+ *
+ * <OAuthRedirectUriInput
+ *   value={redirectUris}
+ *   onChange={setRedirectUris}
+ *   error={errors.redirectUris}
+ * />
+ * ```
+ */
+export function OAuthRedirectUriInput({
+  value,
+  onChange,
+  error,
+  disabled = false,
+  label = "Redirect URIs",
+}: OAuthRedirectUriInputProps) {
+  const handleAdd = useCallback(() => {
+    onChange([...value, ""]);
+  }, [value, onChange]);
+
+  const handleRemove = useCallback(
+    (index: number) => {
+      const newUris = value.filter((_, i) => i !== index);
+      // Keep at least one empty input
+      onChange(newUris.length > 0 ? newUris : [""]);
+    },
+    [value, onChange]
+  );
+
+  const handleChange = useCallback(
+    (index: number, newValue: string) => {
+      const newUris = [...value];
+      newUris[index] = newValue;
+      onChange(newUris);
+    },
+    [value, onChange]
+  );
+
+  return (
+    <div className="space-y-2">
+      <Label>{label} *</Label>
+      <p className="text-sm text-muted-foreground">
+        Enter the URIs where users will be redirected after authorization.
+        Use https:// for production, or custom schemes for mobile apps.
+      </p>
+
+      <div className="space-y-2">
+        {value.map((uri, index) => {
+          const isValid = !uri || isValidRedirectUri(uri);
+
+          return (
+            <div key={index} className="flex gap-2">
+              <div className="flex-1">
+                <Input
+                  value={uri}
+                  onChange={(e) => handleChange(index, e.target.value)}
+                  placeholder="https://example.com/callback or myapp://oauth"
+                  disabled={disabled}
+                  className={!isValid ? "border-destructive" : ""}
+                />
+                {!isValid && (
+                  <p className="text-xs text-destructive mt-1">
+                    Must be https://, http://localhost, or a custom scheme (app://)
+                  </p>
+                )}
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => handleRemove(index)}
+                disabled={disabled || value.length === 1}
+                title="Remove URI"
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handleAdd}
+        disabled={disabled}
+        className="mt-2"
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        Add Redirect URI
+      </Button>
+
+      {error && <p className="text-sm text-destructive">{error}</p>}
+    </div>
+  );
+}