@carlonicora/nextjs-jsonapi 4.1.1 → 4.2.0

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState, useCallback } from "react";
-import { format } from "date-fns";
 import { Copy, Check, RefreshCw, Pencil, Trash2, ExternalLink } from "lucide-react";
 import {
   Badge,
@@ -23,7 +23,9 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "../../../shadcnui";
-import { OAuthClientInterface, OAUTH_SCOPE_DISPLAY } from "../interfaces/oauth.interface";
+import { useI18nLocale } from "../../../i18n";
+import { useOAuthScopeText } from "../hooks/useOAuthScopeText";
+import { OAuthClientInterface } from "../interfaces/oauth.interface";
 
 export interface OAuthClientDetailProps {
   /** The OAuth client to display */
@@ -48,6 +50,9 @@ export function OAuthClientDetail({
   onDelete,
   onRegenerateSecret,
 }: OAuthClientDetailProps) {
+  const t = useTranslations();
+  const locale = useI18nLocale();
+  const scopeText = useOAuthScopeText();
   const [copiedField, setCopiedField] = useState<string | null>(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [showRegenerateConfirm, setShowRegenerateConfirm] = useState(false);
@@ -86,7 +91,9 @@ export function OAuthClientDetail({
     }
   }, [onRegenerateSecret]);
 
-  const createdDate = client.createdAt ? format(new Date(client.createdAt), "MMMM d, yyyy") : "Unknown";
+  const createdDate = client.createdAt
+    ? new Date(client.createdAt).toLocaleDateString(locale, { dateStyle: "long" })
+    : t("oauth.ui.card.unknown");
 
   return (
     <>
@@ -99,23 +106,25 @@ export function OAuthClientDetail({
             </div>
             <div className="flex items-center gap-2">
               <Badge variant={client.isActive ? "default" : "secondary"}>
-                {client.isActive ? "Active" : "Inactive"}
+                {client.isActive ? t("oauth.ui.card.active") : t("oauth.ui.card.inactive")}
+              </Badge>
+              <Badge variant="outline">
+                {client.isConfidential ? t("oauth.ui.card.confidential") : t("oauth.ui.card.public")}
               </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>
+            <Label>{t("oauth.ui.detail.client_id")}</Label>
             <div className="flex gap-2">
               <Input value={client.clientId} readOnly className="tabular-nums" />
               <Button
                 variant="outline"
                 size="icon"
                 onClick={() => copyToClipboard(client.clientId, "clientId")}
-                title="Copy Client ID"
+                title={t("oauth.ui.detail.copy_client_id")}
               >
                 {copiedField === "clientId" ? <Check className="text-success h-4 w-4" /> : <Copy className="h-4 w-4" />}
               </Button>
@@ -124,7 +133,7 @@ export function OAuthClientDetail({
 
           {/* Client Secret */}
           <div className="space-y-2">
-            <Label>Client Secret</Label>
+            <Label>{t("oauth.ui.detail.client_secret")}</Label>
             <div className="flex gap-2">
               <Input value="••••••••••••••••••••••••••••••••" readOnly className="tabular-nums" />
               {onRegenerateSecret && (
@@ -132,23 +141,21 @@ export function OAuthClientDetail({
                   variant="outline"
                   size="icon"
                   onClick={() => setShowRegenerateConfirm(true)}
-                  title="Regenerate Secret"
+                  title={t("oauth.ui.detail.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>
+            <p className="text-xs text-muted-foreground">{t("oauth.ui.detail.regenerate_help")}</p>
           </div>
 
           <Separator />
 
           {/* Redirect URIs */}
           <div className="space-y-2">
-            <Label>Redirect URIs</Label>
+            <Label>{t("oauth.ui.redirect_uris.label")}</Label>
             <ul className="space-y-1">
               {client.redirectUris.map((uri, index) => (
                 <li key={index} className="flex items-center gap-2 text-sm tabular-nums">
@@ -161,11 +168,11 @@ export function OAuthClientDetail({
 
           {/* Scopes */}
           <div className="space-y-2">
-            <Label>Allowed Scopes</Label>
+            <Label>{t("oauth.ui.scope_selector.label")}</Label>
             <div className="flex flex-wrap gap-2">
               {client.allowedScopes.map((scope) => (
                 <Badge key={scope} variant="secondary">
-                  {OAUTH_SCOPE_DISPLAY[scope]?.name || scope}
+                  {scopeText(scope).name}
                 </Badge>
               ))}
             </div>
@@ -173,7 +180,7 @@ export function OAuthClientDetail({
 
           {/* Grant Types */}
           <div className="space-y-2">
-            <Label>Grant Types</Label>
+            <Label>{t("oauth.ui.detail.grant_types")}</Label>
             <div className="flex flex-wrap gap-2">
               {client.allowedGrantTypes.map((grant) => (
                 <Badge key={grant} variant="outline">
@@ -187,7 +194,7 @@ export function OAuthClientDetail({
 
           {/* Metadata */}
           <div className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-muted-foreground">
-            <span>Created: {createdDate}</span>
+            <span>{t("oauth.ui.detail.created", { date: createdDate })}</span>
           </div>
 
           {/* Actions */}
@@ -195,13 +202,13 @@ export function OAuthClientDetail({
             {onEdit && (
               <Button variant="outline" onClick={onEdit} disabled={isLoading}>
                 <Pencil className="h-4 w-4 me-2" />
-                Edit
+                {t("ui.buttons.edit")}
               </Button>
             )}
             {onDelete && (
               <Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={isLoading}>
                 <Trash2 className="h-4 w-4 me-2" />
-                Delete
+                {t("ui.buttons.delete")}
               </Button>
             )}
           </div>
@@ -212,19 +219,19 @@ export function OAuthClientDetail({
       <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete OAuth Application?</AlertDialogTitle>
+            <AlertDialogTitle>{t("oauth.settings.delete_title")}</AlertDialogTitle>
             <AlertDialogDescription>
-              This will permanently delete "{client.name}" and revoke all access tokens. This action cannot be undone.
+              {t("oauth.settings.delete_description", { name: client.name })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogCancel disabled={isDeleting}>{t("ui.buttons.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={handleDelete}
               disabled={isDeleting}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {isDeleting ? "Deleting..." : "Delete"}
+              {isDeleting ? t("oauth.ui.detail.deleting") : t("ui.buttons.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -234,16 +241,13 @@ export function OAuthClientDetail({
       <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>
+            <AlertDialogTitle>{t("oauth.ui.detail.regenerate_title")}</AlertDialogTitle>
+            <AlertDialogDescription>{t("oauth.ui.detail.regenerate_description")}</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={isRegenerating}>Cancel</AlertDialogCancel>
+            <AlertDialogCancel disabled={isRegenerating}>{t("ui.buttons.cancel")}</AlertDialogCancel>
             <AlertDialogAction onClick={handleRegenerateSecret} disabled={isRegenerating}>
-              {isRegenerating ? "Regenerating..." : "Regenerate"}
+              {isRegenerating ? t("oauth.ui.detail.regenerating") : t("oauth.ui.detail.regenerate")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState, useCallback } from "react";
 import {
   Button,
@@ -64,6 +65,7 @@ export function OAuthClientForm({
   availableScopes,
   defaultScopes = [],
 }: OAuthClientFormProps) {
+  const t = useTranslations();
   const isEditMode = !!client;
 
   const [formState, setFormState] = useState<FormState>({
@@ -80,21 +82,21 @@ export function OAuthClientForm({
     const newErrors: FormErrors = {};
 
     if (!formState.name.trim()) {
-      newErrors.name = "Application name is required";
+      newErrors.name = t("oauth.ui.form.errors.name_required");
     }
 
     const validUris = formState.redirectUris.filter((uri) => uri.trim());
     if (validUris.length === 0) {
-      newErrors.redirectUris = "At least one redirect URI is required";
+      newErrors.redirectUris = t("oauth.ui.form.errors.redirect_uri_required");
     }
 
     if (formState.allowedScopes.length === 0) {
-      newErrors.allowedScopes = "At least one scope must be selected";
+      newErrors.allowedScopes = t("oauth.ui.form.errors.scope_required");
     }
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
-  }, [formState]);
+  }, [formState, t]);
 
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
@@ -120,20 +122,20 @@ export function OAuthClientForm({
     <Card>
       <form onSubmit={handleSubmit}>
         <CardHeader>
-          <CardTitle>{isEditMode ? "Edit Application" : "Create OAuth Application"}</CardTitle>
+          <CardTitle>{isEditMode ? t("oauth.ui.form.edit_title") : t("oauth.settings.create_title")}</CardTitle>
           <CardDescription>
-            {isEditMode ? "Update your OAuth application settings." : "Register a new application to access the API."}
+            {isEditMode ? t("oauth.ui.form.edit_description") : t("oauth.ui.form.create_description")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
           {/* Name */}
           <div className="space-y-2">
-            <Label htmlFor="name">Application Name *</Label>
+            <Label htmlFor="name">{t("oauth.ui.form.name")} *</Label>
             <Input
               id="name"
               value={formState.name}
               onChange={(e) => setFormState((s) => ({ ...s, name: e.target.value }))}
-              placeholder="My Application"
+              placeholder={t("oauth.ui.form.name_placeholder")}
               disabled={isLoading}
               className={errors.name ? "border-destructive" : ""}
             />
@@ -142,12 +144,12 @@ export function OAuthClientForm({
 
           {/* Description */}
           <div className="space-y-2">
-            <Label htmlFor="description">Description</Label>
+            <Label htmlFor="description">{t("oauth.ui.form.description")}</Label>
             <Textarea
               id="description"
               value={formState.description}
               onChange={(e) => setFormState((s) => ({ ...s, description: e.target.value }))}
-              placeholder="A brief description of your application"
+              placeholder={t("oauth.ui.form.description_placeholder")}
               disabled={isLoading}
               rows={3}
             />
@@ -172,7 +174,7 @@ export function OAuthClientForm({
 
           {/* Client Type */}
           <div className="space-y-3">
-            <Label>Client Type</Label>
+            <Label>{t("oauth.ui.form.client_type")}</Label>
             <RadioGroup
               value={formState.isConfidential ? "confidential" : "public"}
               onValueChange={(v) => setFormState((s) => ({ ...s, isConfidential: v === "confidential" }))}
@@ -182,36 +184,34 @@ export function OAuthClientForm({
                 <RadioGroupItem value="confidential" id="confidential" className="mt-1" />
                 <div>
                   <Label htmlFor="confidential" className="cursor-pointer">
-                    Confidential
+                    {t("oauth.ui.card.confidential")}
                   </Label>
-                  <p className="text-sm text-muted-foreground">
-                    Server-side application that can securely store the client secret.
-                  </p>
+                  <p className="text-sm text-muted-foreground">{t("oauth.ui.form.confidential_help")}</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="cursor-pointer">
-                    Public
+                    {t("oauth.ui.card.public")}
                   </Label>
-                  <p className="text-sm text-muted-foreground">
-                    Mobile or desktop application. Requires PKCE for authorization.
-                  </p>
+                  <p className="text-sm text-muted-foreground">{t("oauth.ui.form.public_help")}</p>
                 </div>
               </div>
             </RadioGroup>
-            {isEditMode && (
-              <p className="text-sm text-muted-foreground">Client type cannot be changed after creation.</p>
-            )}
+            {isEditMode && <p className="text-sm text-muted-foreground">{t("oauth.ui.form.client_type_locked")}</p>}
           </div>
         </CardContent>
         <CardFooter className="flex justify-end gap-3">
           <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading}>
-            Cancel
+            {t("ui.buttons.cancel")}
           </Button>
           <Button type="submit" disabled={isLoading}>
-            {isLoading ? "Saving..." : isEditMode ? "Save Changes" : "Create Application"}
+            {isLoading
+              ? t("oauth.ui.form.saving")
+              : isEditMode
+                ? t("oauth.ui.form.save_changes")
+                : t("oauth.ui.list.create")}
           </Button>
         </CardFooter>
       </form>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Plus, Key } from "lucide-react";
 import { Button, Skeleton } from "../../../shadcnui";
 import { SectionHeader } from "../../../components/typography";
@@ -38,9 +39,12 @@ export function OAuthClientList({
   onCreateClick,
   onEditClick,
   onDeleteClick,
-  emptyStateMessage = "No OAuth applications yet. Create one to get started.",
-  title = "OAuth Applications",
+  emptyStateMessage: emptyStateMessageProp,
+  title: titleProp,
 }: OAuthClientListProps) {
+  const t = useTranslations();
+  const emptyStateMessage = emptyStateMessageProp ?? t("oauth.ui.list.empty_message");
+  const title = titleProp ?? t("oauth.ui.list.title");
   // Loading state
   if (isLoading && clients.length === 0) {
     return (
@@ -81,18 +85,18 @@ export function OAuthClientList({
           {onCreateClick && (
             <Button onClick={onCreateClick}>
               <Plus className="h-4 w-4 me-2" />
-              New App
+              {t("oauth.ui.list.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>
+          <h3 className="text-lg font-medium mb-2">{t("oauth.ui.list.empty_title")}</h3>
           <p className="text-muted-foreground mb-4">{emptyStateMessage}</p>
           {onCreateClick && (
             <Button onClick={onCreateClick}>
               <Plus className="h-4 w-4 me-2" />
-              Create Application
+              {t("oauth.ui.list.create")}
             </Button>
           )}
         </div>
@@ -108,7 +112,7 @@ export function OAuthClientList({
         {onCreateClick && (
           <Button onClick={onCreateClick}>
             <Plus className="h-4 w-4 me-2" />
-            New App
+            {t("oauth.ui.list.new_app")}
           </Button>
         )}
       </div>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useState, useCallback } from "react";
 import { Copy, Check, AlertTriangle } from "lucide-react";
 import {
@@ -42,6 +43,7 @@ export interface OAuthClientSecretDisplayProps {
  * ```
  */
 export function OAuthClientSecretDisplay({ secret, onDismiss, open, clientName }: OAuthClientSecretDisplayProps) {
+  const t = useTranslations();
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(async () => {
@@ -65,21 +67,21 @@ export function OAuthClientSecretDisplay({ secret, onDismiss, open, clientName }
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <AlertTriangle className="h-5 w-5 text-warning" />
-            Save Your Client Secret
+            {t("oauth.ui.secret_display.title")}
           </DialogTitle>
           <DialogDescription>
             {clientName
-              ? `Your client secret for "${clientName}" is shown below.`
-              : "Your client secret is shown below."}
+              ? t("oauth.ui.secret_display.description_named", { name: clientName })
+              : t("oauth.ui.secret_display.description")}
           </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>
+            <strong>{t("oauth.ui.secret_display.warning_title")}</strong>
             <br />
-            Copy it now and store it securely. You will not be able to retrieve it later.
+            {t("oauth.ui.secret_display.warning_body")}
           </AlertDescription>
         </Alert>
 
@@ -92,17 +94,17 @@ export function OAuthClientSecretDisplay({ secret, onDismiss, open, clientName }
             variant="outline"
             size="icon"
             onClick={handleCopy}
-            title={copied ? "Copied!" : "Copy to clipboard"}
+            title={copied ? t("oauth.ui.secret_display.copied_short") : t("oauth.ui.secret_display.copy_to_clipboard")}
           >
             {copied ? <Check className="text-success h-4 w-4" /> : <Copy className="h-4 w-4" />}
           </Button>
         </div>
 
-        {copied && <p className="text-success text-center text-sm">Copied to clipboard!</p>}
+        {copied && <p className="text-success text-center text-sm">{t("oauth.ui.secret_display.copied")}</p>}
 
         <DialogFooter className="mt-4">
           <Button onClick={handleDismiss} className="w-full">
-            I've Saved My Secret
+            {t("oauth.ui.secret_display.confirm")}
           </Button>
         </DialogFooter>
       </DialogContent>

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useCallback } from "react";
 import { Plus, Trash2 } from "lucide-react";
 import { Button, Input, Label } from "../../../shadcnui";
@@ -67,8 +68,10 @@ export function OAuthRedirectUriInput({
   onChange,
   error,
   disabled = false,
-  label = "Redirect URIs",
+  label: labelProp,
 }: OAuthRedirectUriInputProps) {
+  const t = useTranslations();
+  const label = labelProp ?? t("oauth.ui.redirect_uris.label");
   const handleAdd = useCallback(() => {
     onChange([...value, ""]);
   }, [value, onChange]);
@@ -94,10 +97,7 @@ export function OAuthRedirectUriInput({
   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>
+      <p className="text-sm text-muted-foreground">{t("oauth.ui.redirect_uris.help")}</p>
 
       <div className="space-y-2">
         {value.map((uri, index) => {
@@ -109,15 +109,11 @@ export function OAuthRedirectUriInput({
                 <Input
                   value={uri}
                   onChange={(e) => handleChange(index, e.target.value)}
-                  placeholder="https://example.com/callback or myapp://oauth"
+                  placeholder={t("oauth.ui.redirect_uris.placeholder")}
                   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>
-                )}
+                {!isValid && <p className="text-xs text-destructive mt-1">{t("oauth.ui.redirect_uris.invalid")}</p>}
               </div>
               <Button
                 type="button"
@@ -125,7 +121,7 @@ export function OAuthRedirectUriInput({
                 size="icon"
                 onClick={() => handleRemove(index)}
                 disabled={disabled || value.length === 1}
-                title="Remove URI"
+                title={t("oauth.ui.redirect_uris.remove")}
               >
                 <Trash2 className="h-4 w-4" />
               </Button>
@@ -136,7 +132,7 @@ export function OAuthRedirectUriInput({
 
       <Button type="button" variant="outline" size="sm" onClick={handleAdd} disabled={disabled} className="mt-2">
         <Plus className="h-4 w-4 me-2" />
-        Add Redirect URI
+        {t("oauth.ui.redirect_uris.add")}
       </Button>
 
       {error && <p className="text-destructive text-xs/relaxed">{error}</p>}

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

@@ -1,7 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useCallback } from "react";
 import { Checkbox, Label } from "../../../shadcnui";
+import { useOAuthScopeText } from "../hooks/useOAuthScopeText";
 import { AVAILABLE_OAUTH_SCOPES, OAuthScopeInfo } from "../interfaces/oauth.interface";
 
 export interface OAuthScopeSelectorProps {
@@ -39,8 +41,11 @@ export function OAuthScopeSelector({
   availableScopes = AVAILABLE_OAUTH_SCOPES,
   disabled = false,
   error,
-  label = "Allowed Scopes",
+  label: labelProp,
 }: OAuthScopeSelectorProps) {
+  const t = useTranslations();
+  const scopeText = useOAuthScopeText();
+  const label = labelProp ?? t("oauth.ui.scope_selector.label");
   const handleToggle = useCallback(
     (scope: string, checked: boolean) => {
       if (checked) {
@@ -56,7 +61,7 @@ export function OAuthScopeSelector({
   const groupedScopes = availableScopes.reduce(
     (acc, scope) => {
       const [category] = scope.scope.split(":");
-      const groupName = category === scope.scope ? "General" : category;
+      const groupName = category === scope.scope ? t("oauth.ui.scope_selector.general") : category;
 
       if (!acc[groupName]) {
         acc[groupName] = [];
@@ -71,7 +76,7 @@ export function OAuthScopeSelector({
     <div className="space-y-4">
       <div>
         <Label>{label} *</Label>
-        <p className="text-sm text-muted-foreground">Select the permissions your application needs.</p>
+        <p className="text-sm text-muted-foreground">{t("oauth.ui.scope_selector.help")}</p>
       </div>
 
       <div className="space-y-4">
@@ -98,10 +103,14 @@ export function OAuthScopeSelector({
                     />
                     <div className="flex-1">
                       <Label htmlFor={`scope-${scopeInfo.scope}`} className="cursor-pointer">
-                        {scopeInfo.name}
-                        {isAdmin && <span className="ms-2 text-xs text-destructive">(Dangerous)</span>}
+                        {scopeText(scopeInfo).name}
+                        {isAdmin && (
+                          <span className="ms-2 text-xs text-destructive">
+                            {t("oauth.ui.scope_selector.dangerous")}
+                          </span>
+                        )}
                       </Label>
-                      <p className="text-xs text-muted-foreground">{scopeInfo.description}</p>
+                      <p className="text-xs text-muted-foreground">{scopeText(scopeInfo).description}</p>
                     </div>
                   </div>
                 );

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

@@ -3,6 +3,8 @@ import { describe, expect, it, vi } from "vitest";
 import { OAuthClientForm } from "../OAuthClientForm";
 import { OAUTH_SCOPE_DISPLAY, OAuthClientInterface } from "../../interfaces/oauth.interface";
 
+vi.mock("next-intl", () => ({ useTranslations: () => (key: string) => key }));
+
 const scopeCheckbox = (name: string) => screen.getByRole("checkbox", { name: new RegExp(name) });
 
 const makeClient = (allowedScopes: string[]): OAuthClientInterface =>
@@ -18,9 +20,9 @@ describe("OAuthClientForm", () => {
   it("renders only the scopes passed in availableScopes", () => {
     render(<OAuthClientForm onSubmit={vi.fn()} onCancel={vi.fn()} availableScopes={[OAUTH_SCOPE_DISPLAY.mcp]} />);
 
-    expect(screen.getByText("MCP Server Access")).toBeTruthy();
-    expect(screen.queryByText("Read Access")).toBeNull();
-    expect(screen.queryByText("Write Access")).toBeNull();
+    expect(screen.getByText("oauth.ui.scopes.mcp.name")).toBeTruthy();
+    expect(screen.queryByText("oauth.ui.scopes.read.name")).toBeNull();
+    expect(screen.queryByText("oauth.ui.scopes.write.name")).toBeNull();
   });
 
   it("preselects defaultScopes in create mode", () => {
@@ -33,8 +35,8 @@ describe("OAuthClientForm", () => {
       />,
     );
 
-    expect(scopeCheckbox("MCP Server Access").getAttribute("aria-checked")).toBe("true");
-    expect(scopeCheckbox("Read Access").getAttribute("aria-checked")).toBe("false");
+    expect(scopeCheckbox("oauth.ui.scopes.mcp.name").getAttribute("aria-checked")).toBe("true");
+    expect(scopeCheckbox("oauth.ui.scopes.read.name").getAttribute("aria-checked")).toBe("false");
   });
 
   it("uses client.allowedScopes instead of defaultScopes in edit mode", () => {
@@ -48,15 +50,15 @@ describe("OAuthClientForm", () => {
       />,
     );
 
-    expect(scopeCheckbox("Read Access").getAttribute("aria-checked")).toBe("true");
-    expect(scopeCheckbox("MCP Server Access").getAttribute("aria-checked")).toBe("false");
+    expect(scopeCheckbox("oauth.ui.scopes.read.name").getAttribute("aria-checked")).toBe("true");
+    expect(scopeCheckbox("oauth.ui.scopes.mcp.name").getAttribute("aria-checked")).toBe("false");
   });
 
   it("offers the generic scope list by default, without Only35 scopes", () => {
     render(<OAuthClientForm onSubmit={vi.fn()} onCancel={vi.fn()} />);
 
-    expect(screen.getByText("MCP Server Access")).toBeTruthy();
-    expect(screen.getByText("Read Access")).toBeTruthy();
+    expect(screen.getByText("oauth.ui.scopes.mcp.name")).toBeTruthy();
+    expect(screen.getByText("oauth.ui.scopes.read.name")).toBeTruthy();
     expect(screen.queryByText("View Photographs")).toBeNull();
     expect(screen.queryByText("View Rolls")).toBeNull();
   });

package/src/features/oauth/components/consent/OAuthScopeList.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslations } from "next-intl";
 import { Eye, Pencil, Image, Upload, Film, FolderPlus, User, Shield, LucideIcon } from "lucide-react";
+import { useOAuthScopeText } from "../../hooks/useOAuthScopeText";
 import { OAuthScopeInfo } from "../../interfaces/oauth.interface";
 import { MicroLabel } from "../../../../components/typography";
 
@@ -27,6 +28,7 @@ const SCOPE_ICONS: Record<string, LucideIcon> = {
  */
 export function OAuthScopeList({ scopes }: OAuthScopeListProps) {
   const t = useTranslations();
+  const scopeText = useOAuthScopeText();
 
   if (scopes.length === 0) {
     return null;
@@ -47,8 +49,8 @@ export function OAuthScopeList({ scopes }: OAuthScopeListProps) {
                 </div>
               </div>
               <div className="flex-1">
-                <p className="font-medium">{scope.name}</p>
-                <p className="text-sm text-muted-foreground">{scope.description}</p>
+                <p className="font-medium">{scopeText(scope).name}</p>
+                <p className="text-sm text-muted-foreground">{scopeText(scope).description}</p>
               </div>
             </li>
           );