remove flash of stalwart logo

change favicon
Include required JMAP capabilities in using
2026-07-19 07:47:12 -04:00 · 2026-07-18 18:55:42 -04:00 · 2026-06-21 15:33:51 +02:00 · 2026-05-25 13:58:38 +02:00 · 2026-05-11 16:35:11 +02:00 · 2026-05-07 15:08:54 +02:00
23 changed files with 246 additions and 149 deletions
@@ -1,4 +1,4 @@
-VITE_API_BASE_URL=http://localhost:8080
+VITE_API_BASE_URL=http://mx.astralmail.org:8080
 VITE_OAUTH_CLIENT_ID=stalwart-webui
 #VITE_ACCESS_TOKEN=OPEN_SESAME
 VITE_OAUTH_SCOPES=
@@ -2,6 +2,49 @@
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
 ## [1.0.5] - 2026-06-21
 ### Added
 ### Changed
 ### Fixed
 - Redirect to `/login` when there is no refresh token.
 - Include required JMAP capabilities in `using`.
 - Default scopes omit `offline_access`.
 ## [1.0.4] - 2026-05-11
 ### Added
 ### Changed
 ### Fixed
 - Align `base32` alphabet with the server.
 ## [1.0.3] - 2026-05-05
 ### Added
 ### Changed
 ### Fixed
 - Broken "Delivery History" link on OSS/Community editions.
 - Resolve object ids in map keys.
 ## [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
@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <base href="/" />
-  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+  <link rel="icon" type="image/svg+xml" href="favicon.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Portal</title>
 </head>
@@ -14,4 +14,4 @@
  <script type="module" src="/src/main.tsx"></script>
 </body>
-</html>
+</html>
@@ -1,12 +1,12 @@
 {
  "name": "stalwart-webui",
-  "version": "1.0.0",
+  "version": "1.0.5",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "stalwart-webui",
-      "version": "1.0.0",
+      "version": "1.0.5",
      "dependencies": {
        "@radix-ui/react-alert-dialog": "^1.1.15",
        "@radix-ui/react-checkbox": "^1.3.3",
@@ -1,7 +1,7 @@
 {
  "name": "stalwart-webui",
  "private": true,
-  "version": "1.0.1",
+  "version": "1.0.5",
  "description": "Stalwart WebUI",
  "type": "module",
  "scripts": {
@@ -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);
        }
      }
@@ -4,78 +4,21 @@
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
 */
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getApiBaseUrl } from '@/services/api';
 export function DefaultLogo() {
-  const { t } = useTranslation();
+  const { t } = useTranslation()
  return (
-    <svg
+    <img
-      xmlns="http://www.w3.org/2000/svg"
+      src={`${getApiBaseUrl()}/logo`}
-      viewBox="95 84 500 90"
+      alt={t('logo.alt', 'Logo')}
-      aria-label={t('logo.stalwartAlt', 'Stalwart Logo')}
+      className='h-7 w-auto max-w=[220px] object-contain'
-      className="h-7 w-auto max-w-[320px]"
+    />
-    >
+  )
      <path
        className="fill-current"
        d="M227.8 143.6c.3 4.2 2.1 7.6 5.1 10.1 3.1 2.5 7.1 3.8 12.1 3.8 4.3 0 7.9-.9 10.5-2.8 2.7-1.9 4-4.5 4-7.8 0-2.4-.7-4.3-2.2-5.7-1.5-1.4-3.4-2.5-6-3.2-2.5-.7-6-1.5-10.6-2.3-4.6-.8-8.6-1.9-11.9-3.2-3.3-1.3-6-3.3-8.1-6.1-2.1-2.7-3.1-6.3-3.1-10.7 0-4.1 1.1-7.7 3.2-10.9s5.1-5.7 9-7.4c3.8-1.8 8.2-2.6 13.2-2.6 5.1 0 9.6 1 13.7 2.9 4 1.9 7.2 4.5 9.5 7.8s3.6 7.1 3.8 11.4h-11.5c-.4-3.7-2-6.6-4.8-8.9-2.8-2.2-6.3-3.4-10.6-3.4-4.1 0-7.5.9-9.9 2.7-2.5 1.8-3.7 4.3-3.7 7.6 0 2.3.7 4.1 2.2 5.5 1.5 1.4 3.4 2.4 5.9 3.1 2.4.7 5.9 1.4 10.5 2.2 4.6.8 8.6 1.9 11.9 3.3 3.3 1.4 6 3.4 8.2 6 2.1 2.6 3.2 6.1 3.2 10.5 0 4.2-1.1 8-3.4 11.3-2.2 3.3-5.4 5.9-9.4 7.8-4 1.9-8.6 2.8-13.7 2.8-5.6 0-10.6-1-14.9-3.1-4.3-2-7.6-4.9-10-8.5-2.4-3.6-3.7-7.8-3.7-12.5l11.5.3zM278.5 102.1l11-2.1v14.6h12.6v9.7h-12.6v27.2c0 2 .4 3.5 1.2 4.3.8.9 2.2 1.3 4.2 1.3h8.4v9.7h-10.6c-5 0-8.6-1.2-10.8-3.5-2.2-2.3-3.4-5.9-3.4-10.7v-50.5zM356.8 114.6v52.2h-9.7l-1.2-7.9c-1.8 2.6-4.2 4.7-7 6.2-2.9 1.6-6.2 2.3-10 2.3-4.8 0-9-1.1-12.7-3.2-3.7-2.1-6.7-5.2-8.8-9.3-2.1-4-3.2-8.8-3.2-14.2 0-5.3 1.1-10 3.2-14s5.1-7.2 8.8-9.4c3.7-2.2 7.9-3.3 12.6-3.3 3.9 0 7.2.7 10.1 2.2 2.9 1.5 5.2 3.5 6.9 6.1l1.3-7.6h9.7zm-15.1 38.7c2.8-3.2 4.2-7.3 4.2-12.4 0-5.2-1.4-9.4-4.2-12.6-2.8-3.3-6.5-4.9-11-4.9-4.6 0-8.2 1.6-11 4.8-2.8 3.2-4.2 7.4-4.2 12.5 0 5.2 1.4 9.4 4.2 12.6 2.8 3.2 6.5 4.8 11 4.8s8.2-1.6 11-4.8zM365.5 97.5l11-2.1v71.3h-11V97.5zM380.3 114.6h11.6l11.9 39.9 11.9-39.9h10.1l11.4 39.9 12.3-39.9h11.2l-17.3 52.2h-11.8l-11-35.5-11.4 35.5-11.9.1-17-52.3zM513.7 114.6v52.2H504l-1.2-7.9c-1.8 2.6-4.2 4.7-7 6.2-2.9 1.6-6.2 2.3-10 2.3-4.8 0-9-1.1-12.7-3.2-3.7-2.1-6.7-5.2-8.8-9.3-2.1-4-3.2-8.8-3.2-14.2 0-5.3 1.1-10 3.2-14s5.1-7.2 8.8-9.4c3.7-2.2 7.9-3.3 12.6-3.3 3.9 0 7.2.7 10.1 2.2 2.9 1.5 5.2 3.5 6.9 6.1l1.3-7.6h9.7zm-15.1 38.7c2.8-3.2 4.2-7.3 4.2-12.4 0-5.2-1.4-9.4-4.2-12.6-2.8-3.3-6.5-4.9-11-4.9-4.6 0-8.2 1.6-11 4.8-2.8 3.2-4.2 7.4-4.2 12.5 0 5.2 1.4 9.4 4.2 12.6 2.8 3.2 6.5 4.8 11 4.8 4.6 0 8.2-1.6 11-4.8zM551.3 114.6v10.3h-4.9c-4.6 0-7.8 1.5-9.9 4.4-2 3-3.1 6.7-3.1 11.3v26.2h-11v-52.2h9.8l1.2 7.8c1.5-2.4 3.4-4.4 5.8-5.8 2.4-1.4 5.6-2.1 9.6-2.1h2.5zM556.3 102.1l11-2.1v14.6h12.6v9.7h-12.6v27.2c0 2 .4 3.5 1.2 4.3.8.9 2.2 1.3 4.2 1.3h8.4v9.7h-10.6c-5 0-8.6-1.2-10.8-3.5s-3.4-5.9-3.4-10.7v-50.5z"
      />
      <path
        fill="#db2d54"
        d="M149.1 84.7h-4.8l-44.8 25.9v8.3l44.8 25.9h4.8l44.8-25.9v-8.3l-44.8-25.9zm32.9 30h-35.3V94.4l35.3 20.3zm-35.3 20.4-35.3-20.4 27-15.6v20.2l6.3 3.6h22.9l-20.9 12.2zM99.5 129.9v11l44.8 25.9h4.8l44.8-25.9v-11l-47.2 27.3zM187.3 166.8l6.6-3.8v-11l-25.7 14.8zM99.5 163l6.6 3.8h19.1L99.5 152z"
      />
    </svg>
  );
 }
 export default function Logo() {
-  const { t } = useTranslation();
+  return <DefaultLogo />
  const [logoUrl, setLogoUrl] = useState<string | null>(null);
  const [failed, setFailed] = useState(false);
  useEffect(() => {
    const controller = new AbortController();
    async function fetchLogo() {
      try {
        const response = await fetch(`${getApiBaseUrl()}/logo`, {
          signal: controller.signal,
        });
        const contentType = response.headers.get('content-type') ?? '';
        if (response.ok && contentType.startsWith('image/')) {
          const blob = await response.blob();
          if (!controller.signal.aborted) {
            const url = URL.createObjectURL(blob);
            setLogoUrl(url);
          }
        } else {
          if (!controller.signal.aborted) setFailed(true);
        }
      } catch {
        if (!controller.signal.aborted) setFailed(true);
      }
    }
    fetchLogo();
    return () => {
      controller.abort();
    };
  }, []);
  useEffect(() => {
    return () => {
      if (logoUrl) {
        URL.revokeObjectURL(logoUrl);
      }
    };
  }, [logoUrl]);
  if (logoUrl && !failed) {
    return <img src={logoUrl} alt={t('logo.alt', 'Logo')} className="h-7 w-auto max-w-[220px] object-contain" />;
  }
  return <DefaultLogo />;
 }
@@ -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}`,
            );
          }
        }
      }
@@ -1979,6 +1979,29 @@ function ObjectIdMultiSelectPill({
  );
 }
 function MapEntryKeyLabel({ keyClass, keyValue, schema }: { keyClass: ScalarType; keyValue: string; schema: Schema }) {
  if (keyClass.type === 'enum') {
    const variants = schema.enums[keyClass.enumName] ?? [];
    const variant = variants.find((v) => v.name === keyValue);
    return <>{variant?.label ?? keyValue}</>;
  }
  if (keyClass.type === 'objectId') {
    return <ObjectIdKeyLabel objectName={keyClass.objectName} keyValue={keyValue} schema={schema} />;
  }
  return <>{keyValue}</>;
 }
 function ObjectIdKeyLabel({ objectName, keyValue, schema }: { objectName: string; keyValue: string; schema: Schema }) {
  const list = useObjectList(objectName, schema);
  const fromList = list.options.find((o) => o.id === keyValue)?.label;
  const { label: cheapLabel, loading } = useObjectLabel(objectName, fromList ? null : keyValue, schema);
  const display = fromList ?? cheapLabel;
  if (loading && !display) {
    return <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />;
  }
  return <>{display ?? keyValue}</>;
 }
 interface MapFieldProps {
  keyClass: ScalarType;
  valueClass: MapValueType;
@@ -2038,15 +2061,6 @@ function MapField({ keyClass, valueClass, value, onChange, readOnly, schema, min
    }
  };
  const getKeyLabel = (key: string): string => {
    if (keyClass.type === 'enum') {
      const variants = schema.enums[keyClass.enumName] ?? [];
      const variant = variants.find((v) => v.name === key);
      if (variant) return variant.label;
    }
    return key;
  };
  const existingKeys = new Set(Object.keys(mapValue));
  return (
@@ -2063,7 +2077,7 @@ function MapField({ keyClass, valueClass, value, onChange, readOnly, schema, min
                      className="flex flex-1 items-center gap-2 p-3 text-sm font-medium hover:bg-accent/50 rounded-t-md transition-colors [&[data-state=closed]>svg]:rotate-0 [&[data-state=open]>svg]:rotate-90"
                    >
                      <ChevronRight className="h-4 w-4 shrink-0 transition-transform duration-200" />
-                      {getKeyLabel(key)}
+                      <MapEntryKeyLabel keyClass={keyClass} keyValue={key} schema={schema} />
                    </button>
                  </CollapsibleTrigger>
                  {!readOnly && (
@@ -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
@@ -8,10 +8,10 @@ import { Navigate, useLocation } from 'react-router-dom';
 import { useAuthStore } from '@/stores/authStore';
 export function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const accessToken = useAuthStore((s) => s.accessToken);
+  const authenticated = useAuthStore((s) => s.isAuthenticated());
  const bypassToken = import.meta.env.VITE_ACCESS_TOKEN;
  const location = useLocation();
-  if (!accessToken && !bypassToken) {
+  if (!authenticated && !bypassToken) {
    const originalPath = location.pathname + location.search;
    return <Navigate to="/login" replace state={{ from: originalPath }} />;
  }
@@ -17,6 +17,7 @@ import {
  ArrowUpDown,
  Filter,
  Loader2,
  Lock,
  Search,
  RotateCcw,
 } from 'lucide-react';
@@ -46,6 +47,7 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
 import { ObjectPicker } from '@/components/common/ObjectPicker';
 import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
 import { toast } from '@/hooks/use-toast';
 import { friendlySetError } from '@/lib/jmapErrors';
 import { coerceLabel } from '@/lib/objectOptions';
@@ -319,6 +321,8 @@ export function DynamicList({ viewName }: DynamicListProps) {
  const schema = useSchemaStore((s) => s.schema);
  const viewToSection = useSchemaStore((s) => s.viewToSection);
  const hasObjectPermission = useAccountStore((s) => s.hasObjectPermission);
  const edition = useAccountStore((s) => s.edition);
  const [upsellOpen, setUpsellOpen] = useState(false);
  const resolved = useMemo(() => {
    if (!schema) return null;
@@ -1020,17 +1024,20 @@ export function DynamicList({ viewName }: DynamicListProps) {
  function renderItemActions(item: Record<string, unknown>): React.ReactNode {
    if (!hasItemActions || !list.itemActions) return null;
-    const filteredActions = list.itemActions.filter((action) => {
+    const filteredActions = list.itemActions.flatMap((action): { action: ItemAction; locked: boolean }[] => {
-      if (action.type === 'separator') return true;
+      if (action.type === 'separator') return [{ action, locked: false }];
-      if (action.type === 'delete') return canDelete;
+      if (action.type === 'delete') return canDelete ? [{ action, locked: false }] : [];
-      if (action.type === 'setProperty') return canUpdate;
+      if (action.type === 'setProperty') return canUpdate ? [{ action, locked: false }] : [];
      if (action.type === 'view' || action.type === 'query') {
        const targetObj = resolveObject(schema!, action.objectName);
-        if (targetObj && !hasObjectPermission(targetObj.permissionPrefix, 'Get')) {
+        if (!targetObj) return [];
-          return false;
+        if (targetObj.enterprise) {
          if (edition === 'oss') return [];
          if (edition === 'community') return [{ action, locked: true }];
        }
        if (!hasObjectPermission(targetObj.permissionPrefix, 'Get')) return [];
      }
-      return true;
+      return [{ action, locked: false }];
    });
    if (filteredActions.length === 0) return null;
@@ -1043,7 +1050,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
-          {filteredActions.map((action, idx) => {
+          {filteredActions.map(({ action, locked }, idx) => {
            if (action.type === 'separator') {
              return <DropdownMenuSeparator key={`sep-${idx}`} />;
            }
@@ -1057,7 +1064,9 @@ export function DynamicList({ viewName }: DynamicListProps) {
                className={isDestructive ? 'text-destructive' : undefined}
                onClick={(e) => {
                  e.stopPropagation();
-                  if (needsConfirmation) {
+                  if (locked) {
                    setUpsellOpen(true);
                  } else if (needsConfirmation) {
                    setConfirmAction({
                      label: action.label,
                      onConfirm: () => executeItemAction(action, item),
@@ -1068,6 +1077,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
                }}
              >
                {action.label}
                {locked && <Lock className="ml-auto h-3 w-3 text-muted-foreground" />}
              </DropdownMenuItem>
            );
          })}
@@ -1352,6 +1362,8 @@ export function DynamicList({ viewName }: DynamicListProps) {
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <EnterpriseUpsell open={upsellOpen} onClose={() => setUpsellOpen(false)} />
    </div>
  );
 }
@@ -6,15 +6,16 @@
 import { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { Check, X, HelpCircle, ChevronRight } from 'lucide-react';
+import { Check, X, HelpCircle, ChevronRight, Loader2 } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { jmapMapToArray, SECRET_MASK } from '@/lib/jmapUtils';
 import { Badge } from '@/components/ui/badge';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { resolveSchema, resolveVariantForm, resolveForm } from '@/lib/schemaResolver';
 import { useObjectList, useObjectLabel } from '@/lib/objectOptions';
 import { formatSize, formatDuration } from '@/lib/durationFormat';
-import type { Schema, Field, FieldType, FormField, Form, Fields, EnumVariant } from '@/types/schema';
+import type { Schema, Field, FieldType, FormField, Form, Fields, EnumVariant, ScalarType } from '@/types/schema';
 export interface DynamicViewProps {
  schema: Schema;
@@ -401,7 +402,7 @@ function MapValue({
  schema,
 }: {
  value: unknown;
-  keyClass: { type: string; enumName?: string };
+  keyClass: ScalarType;
  valueClass: { type: string; objectName?: string };
  schema: Schema;
 }) {
@@ -417,12 +418,7 @@ function MapValue({
  return (
    <div className="space-y-2">
      {entries.map(([k, v]) => {
-        let keyLabel = k;
+        const keyLabel = <MapKeyLabel keyClass={keyClass} keyValue={k} schema={schema} />;
        if (keyClass.type === 'enum' && keyClass.enumName) {
          const variants = schema.enums[keyClass.enumName] ?? [];
          const variant = variants.find((e: EnumVariant) => e.name === k);
          if (variant) keyLabel = variant.label;
        }
        if (valueClass.type === 'object' && valueClass.objectName) {
          return (
@@ -446,6 +442,29 @@ function MapValue({
  );
 }
 function MapKeyLabel({ keyClass, keyValue, schema }: { keyClass: ScalarType; keyValue: string; schema: Schema }) {
  if (keyClass.type === 'enum') {
    const variants = schema.enums[keyClass.enumName] ?? [];
    const variant = variants.find((e: EnumVariant) => e.name === keyValue);
    return <>{variant?.label ?? keyValue}</>;
  }
  if (keyClass.type === 'objectId') {
    return <ObjectIdKeyLabel objectName={keyClass.objectName} keyValue={keyValue} schema={schema} />;
  }
  return <>{keyValue}</>;
 }
 function ObjectIdKeyLabel({ objectName, keyValue, schema }: { objectName: string; keyValue: string; schema: Schema }) {
  const list = useObjectList(objectName, schema);
  const fromList = list.options.find((o) => o.id === keyValue)?.label;
  const { label: cheapLabel, loading } = useObjectLabel(objectName, fromList ? null : keyValue, schema);
  const display = fromList ?? cheapLabel;
  if (loading && !display) {
    return <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />;
  }
  return <>{display ?? keyValue}</>;
 }
 function FieldTooltip({ description }: { description: string }) {
  return (
    <TooltipProvider>
@@ -11,7 +11,7 @@ import { CircleDot, CircleX, Clock } from 'lucide-react';
 import { useSchemaStore } from '@/stores/schemaStore';
 import type { TraceEvent, TraceKeyValue, TraceValue } from '../types';
-const BASE32_ALPHABET = 'abcdefghijklmnopqrstuvwxyz234567';
+const BASE32_ALPHABET = 'abcdefghijklmnopqrstuvwxyz792013';
 function intToBase32(input: number | string): string {
  let n: bigint;
@@ -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",
@@ -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) {
@@ -107,11 +107,17 @@ export async function apiFetch(path: string, options?: RequestInit): Promise<Res
  let response = await makeRequest();
-  if (response.status === 401 && useAuthStore.getState().refreshToken) {
+  if (response.status === 401) {
-    try {
+    if (useAuthStore.getState().refreshToken) {
-      await refreshAccessToken();
+      try {
-      response = await makeRequest();
+        await refreshAccessToken();
-    } catch {
+        response = await makeRequest();
      } catch {
        throw new ApiError(401, 'Unauthorized', null);
      }
    } else {
      useAuthStore.getState().logout();
      window.location.href = `${getBasePath()}/login`;
      throw new ApiError(401, 'Unauthorized', null);
    }
  }
@@ -125,8 +125,7 @@ function getRedirectUri(): string {
 }
 export async function startAuthFlow(username: string, returnUrl?: string | null): Promise<void> {
-  const { authorization_endpoint, token_endpoint, end_session_endpoint, scopes_supported } =
+  const { authorization_endpoint, token_endpoint, end_session_endpoint, scopes_supported } = await discover(username);
    await discover(username);
  const codeVerifier = generateCodeVerifier();
  const { challenge: codeChallenge, method: codeChallengeMethod } = await generateCodeChallenge(codeVerifier);
@@ -163,12 +162,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', 'offline_access'].filter((s) => scopes_supported.includes(s)).join(' ');
-        : '';
+  } else {
    scope = '';
  }
  if (scope) {
    params.set('scope', scope);
  }
@@ -10,7 +10,17 @@ import { logJmapExchange } from '@/lib/debug';
 import type { JmapMethodCall, JmapMethodResponse, JmapQueryResponse, JmapResponse } from '@/types/jmap';
 import type { Schema } from '@/types/schema';
-const JMAP_USING = ['urn:ietf:params:jmap:core', 'urn:stalwart:jmap'];
+const JMAP_USING = [
  'urn:ietf:params:jmap:core',
  'urn:stalwart:jmap',
  'urn:ietf:params:jmap:blob',
  'urn:ietf:params:jmap:mail',
  'urn:ietf:params:jmap:calendars',
  'urn:ietf:params:jmap:contacts',
  'urn:ietf:params:jmap:principals',
  'urn:ietf:params:jmap:sieve',
  'urn:ietf:params:jmap:vacationresponse',
 ];
 export function getAccountId(objectType: string): string {
  const { primaryAccountId, activeAccountId } = useAuthStore.getState();
@@ -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;
 }
Author	SHA1	Message	Date
gawells	ef99135cae	remove flash of stalwart logo	2026-07-19 07:47:12 -04:00
gawells	5ce2a5acf7	change favicon	2026-07-18 18:55:42 -04:00
Maurus Decimus	574de03e42	Include required JMAP capabilities in `using`	2026-06-21 15:33:51 +02:00
Maurus Decimus	a7fda8bd6b	Default scopes omit `offline_access` (fixes #10 )	2026-05-25 13:58:38 +02:00
Maurus Decimus	001a1f3a15	v1.0.4	2026-05-11 16:35:11 +02:00
Maurus Decimus	782dde0573	Align `base32` alphabet with the server	2026-05-07 15:08:54 +02:00
Maurus Decimus	cbe77f9e4a	v1.0.3	2026-05-05 11:36:51 +02:00
Maurus Decimus	e9b9efa084	Fix: Resolve object ids in map keys	2026-05-04 19:16:37 +02:00
Maurus Decimus	dee0f7fbe3	Fix broken "Delivery History" link on OSS/Community editions	2026-05-01 09:03:02 +02:00
Maurus Decimus	ba6b4472d2	Display validation errors returned by the server	2026-04-30 18:12:30 +02:00
Maurus Decimus	612fd796f3	Add "Copy Secret" button to TOTP setup flow	2026-04-30 13:29:05 +02:00
Maurus Decimus	a3376b0a7d	Include `email` and `profile` scopes in OIDC authentication requests	2026-04-30 12:11:40 +02:00