Display validation errors returned by the server

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.0.2] - 2026-04-30
+
+### Added
+- OIDC:
+    - Include `email` and `profile` scopes in OIDC authentication requests.
+- TOTP:
+    - Add "Copy Secret" button to TOTP setup flow.
+
+### Changed
+
+### Fixed
+- Display validation errors returned by the server.
+
 ## [1.0.1] - 2026-04-25
 
 ### Added

src/components/bootstrap/BootstrapWizard.tsx

@@ -19,7 +19,7 @@ import { toast } from '@/hooks/use-toast';
 import { resolveObject, resolveSchema, resolveForm, buildCreateDefaults, deepMerge } from '@/lib/schemaResolver';
 import { calculateJmapPatch } from '@/lib/jmapPatch';
 import { jmapGet, jmapSet, getAccountId } from '@/services/jmap/client';
-import { friendlySetError } from '@/lib/jmapErrors';
+import { friendlySetError, validationErrorMessage } from '@/lib/jmapErrors';
 
 import type { Field, Fields, Form, FormField } from '@/types/schema';
 import type { JmapSetError, JmapSetResponse } from '@/types/jmap';
@@ -181,19 +181,7 @@ export function BootstrapWizard() {
         for (const ve of error.validationErrors) {
           const top = ve.property?.split('/')[0] ?? '';
           if (!top) continue;
-          const msg =
+          record(top, validationErrorMessage(ve));
-            ve.type === 'Required'
-              ? t('form.required', 'This field is required.')
-              : ve.type === 'MaxLength'
-                ? t('form.maxLengthIs', 'Maximum length is {{max}}.', { max: ve.required })
-                : ve.type === 'MinLength'
-                  ? t('form.minLengthIs', 'Minimum length is {{min}}.', { min: ve.required })
-                  : ve.type === 'MaxValue'
-                    ? t('form.maxValueIs', 'Maximum value is {{max}}.', { max: ve.required })
-                    : ve.type === 'MinValue'
-                      ? t('form.minValueIs', 'Minimum value is {{min}}.', { min: ve.required })
-                      : t('form.invalidValue', 'Invalid value.');
-          record(top, msg);
         }
       }
 

src/components/forms/DynamicForm.tsx

@@ -46,7 +46,7 @@ import {
 } from '@/lib/schemaResolver';
 import { jmapGet, jmapSet, jmapRequest, getAccountId } from '@/services/jmap/client';
 import { calculateJmapPatch } from '@/lib/jmapPatch';
-import { friendlySetError } from '@/lib/jmapErrors';
+import { friendlySetError, validationErrorMessage } from '@/lib/jmapErrors';
 import { coerceLabel } from '@/lib/objectOptions';
 import { SECRET_MASK } from '@/lib/jmapUtils';
 import { toast } from '@/hooks/use-toast';
@@ -347,21 +347,12 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
       if (error.validationErrors && error.validationErrors.length > 0) {
         for (const ve of error.validationErrors) {
           if (ve.property && currentFields?.properties[ve.property]) {
-            const msg =
+            newFieldErrors[ve.property] = validationErrorMessage(ve);
-              ve.type === 'Required'
-                ? t('form.required', 'This field is required.')
-                : ve.type === 'MaxLength'
-                  ? t('form.maxLengthIs', 'Maximum length is {{max}}.', { max: ve.required })
-                  : ve.type === 'MinLength'
-                    ? t('form.minLengthIs', 'Minimum length is {{min}}.', { min: ve.required })
-                    : ve.type === 'MaxValue'
-                      ? t('form.maxValueIs', 'Maximum value is {{max}}.', { max: ve.required })
-                      : ve.type === 'MinValue'
-                        ? t('form.minValueIs', 'Minimum value is {{min}}.', { min: ve.required })
-                        : t('form.invalidValue', 'Invalid value.');
-            newFieldErrors[ve.property] = msg;
           } else if (ve.property) {
-            setGeneralError((prev) => (prev ? `${prev}\n${ve.property}: ${ve.type}` : `${ve.property}: ${ve.type}`));
+            const detail = ve.value && ve.value.length > 0 ? ve.value : ve.type;
+            setGeneralError((prev) =>
+              prev ? `${prev}\n${ve.property}: ${detail}` : `${ve.property}: ${detail}`,
+            );
           }
         }
       }

src/components/forms/OtpAuthField.tsx

@@ -8,11 +8,12 @@ import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as OTPAuth from 'otpauth';
 import QRCode from 'qrcode';
-import { Loader2, ShieldCheck, ShieldOff } from 'lucide-react';
+import { Check, Copy, Loader2, ShieldCheck, ShieldOff } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { toast } from '@/hooks/use-toast';
 import { SECRET_MASK } from '@/lib/jmapUtils';
 
 interface OtpAuthValue {
@@ -56,6 +57,27 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
   const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
   const [setupCode, setSetupCode] = useState('');
   const [setupError, setSetupError] = useState<string | null>(null);
+  const [secretCopied, setSecretCopied] = useState(false);
+
+  const setupSecret = useMemo(() => {
+    if (!setupTotp) return null;
+    return setupTotp.secret.base32.replace(/(.{4})/g, '$1 ').trim();
+  }, [setupTotp]);
+
+  const copySecret = async () => {
+    if (!setupTotp) return;
+    try {
+      await navigator.clipboard.writeText(setupTotp.secret.base32);
+      setSecretCopied(true);
+      setTimeout(() => setSecretCopied(false), 1500);
+    } catch {
+      toast({
+        title: t('otp.copyFailed', 'Copy failed'),
+        description: t('otp.clipboardBlocked', 'Your browser blocked clipboard access.'),
+        variant: 'destructive',
+      });
+    }
+  };
 
   useEffect(() => {
     if (!setupUrl) return;
@@ -96,6 +118,7 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
     setSetupTotp(null);
     setSetupUrl(null);
     setSetupCode('');
+    setSecretCopied(false);
   };
 
   const cancelSetup = () => {
@@ -103,6 +126,7 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
     setSetupUrl(null);
     setSetupCode('');
     setSetupError(null);
+    setSecretCopied(false);
   };
 
   const otpCodeValue = useMemo(
@@ -155,6 +179,29 @@ export function OtpAuthField({ value, onChange, readOnly }: OtpAuthFieldProps) {
             </div>
           )}
         </div>
+        {setupSecret && (
+          <div className="space-y-1.5">
+            <Label className="text-sm font-medium">{t('otp.manualEntryLabel', 'Or enter this code manually')}</Label>
+            <p className="text-xs text-muted-foreground">
+              {t(
+                'otp.manualEntryDescription',
+                'If you cannot scan the QR code, enter this secret into your authenticator app instead.',
+              )}
+            </p>
+            <div className="flex gap-2">
+              <code className="flex-1 rounded bg-muted p-2 text-sm font-mono break-all select-all">{setupSecret}</code>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={copySecret}
+                aria-label={t('otp.copySecret', 'Copy secret')}
+              >
+                {secretCopied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+          </div>
+        )}
         <div className="space-y-1.5">
           <Label className="text-sm font-medium">{t('otp.confirmationCodeLabel', 'Confirmation code')}</Label>
           <Input

src/i18n/en.json

@@ -305,12 +305,17 @@
     "tokenExchangeFailed": "Token exchange failed: {{status}} {{statusText}}"
   },
   "otp": {
+    "clipboardBlocked": "Your browser blocked clipboard access.",
     "codeIncorrect": "That code is incorrect. Make sure your authenticator clock is in sync.",
     "confirmationCodeLabel": "Confirmation code",
+    "copyFailed": "Copy failed",
+    "copySecret": "Copy secret",
     "currentCodeLabel": "Current code",
     "currentCodePrompt": "Enter your current 6-digit code to authorise any change to this account (including disabling two-factor authentication).",
     "disable": "Disable",
     "enterCodePrompt": "Enter the code shown in your authenticator.",
+    "manualEntryDescription": "If you cannot scan the QR code, enter this secret into your authenticator app instead.",
+    "manualEntryLabel": "Or enter this code manually",
     "qrCodeAlt": "TOTP QR code",
     "scanDescription": "Scan the QR code below with Google Authenticator, 1Password, Authy, or any other TOTP app, then enter the 6-digit code it shows to confirm setup.",
     "scanPrompt": "Scan with your authenticator app",

src/lib/jmapErrors.ts

@@ -4,9 +4,27 @@
  * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
  */
 
-import type { JmapSetError } from '@/types/jmap';
+import type { JmapSetError, ValidationError } from '@/types/jmap';
 import i18n from '@/i18n';
 
+export function validationErrorMessage(ve: ValidationError): string {
+  switch (ve.type) {
+    case 'Required':
+      return i18n.t('form.required', 'This field is required.');
+    case 'MaxLength':
+      return i18n.t('form.maxLengthIs', 'Maximum length is {{max}}.', { max: ve.required });
+    case 'MinLength':
+      return i18n.t('form.minLengthIs', 'Minimum length is {{min}}.', { min: ve.required });
+    case 'MaxValue':
+      return i18n.t('form.maxValueIs', 'Maximum value is {{max}}.', { max: ve.required });
+    case 'MinValue':
+      return i18n.t('form.minValueIs', 'Minimum value is {{min}}.', { min: ve.required });
+    default:
+      if (ve.value && ve.value.length > 0) return ve.value;
+      return i18n.t('form.invalidValue', 'Invalid value.');
+  }
+}
+
 export function friendlySetError(err: JmapSetError): string {
   if (err.description) return err.description;
   switch (err.type) {

src/services/auth/oauth.ts

@@ -163,12 +163,14 @@ export async function startAuthFlow(username: string, returnUrl?: string | null)
     prompt: 'login',
   });
 
-  const scope =
+  let scope: string;
-    SCOPES && SCOPES.length > 0
+  if (SCOPES && SCOPES.length > 0) {
-      ? SCOPES
+    scope = SCOPES;
-      : scopes_supported?.includes('openid')
+  } else if (scopes_supported?.includes('openid')) {
-        ? 'openid'
+    scope = ['openid', 'email', 'profile'].filter((s) => scopes_supported.includes(s)).join(' ');
-        : '';
+  } else {
+    scope = '';
+  }
   if (scope) {
     params.set('scope', scope);
   }

src/types/jmap.ts

@@ -60,6 +60,6 @@ export interface JmapSetError {
 export interface ValidationError {
   type: 'Invalid' | 'Required' | 'MaxLength' | 'MinLength' | 'MaxValue' | 'MinValue';
   property: string;
-  value?: unknown;
+  value?: string;
   required?: number;
 }