gawells/Stalwart-webui
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

v1.0.6

Browse Source
This commit is contained in:
Maurus Decimus
2026-07-28 10:57:30 +02:00
parent e080a6e061
commit 5eea77346a
17 changed files with 1149 additions and 1519 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+2 -1
View File
@@ -2,9 +2,10 @@
All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
## [1.0.6] - 2026-06-XX
## [1.0.6] - 2026-06-28
### Added
- WebUI version is now displayed when hovering over the logo.
### Changed
index.html
+1 -1
View File
@@ -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/x-icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portal</title>
</head>
package-lock.json
Generated
+975 -1380
View File
File diff suppressed because it is too large Load Diff
package.json
+40 -40
View File
@@ -16,55 +16,55 @@
"format:check": "prettier --check src/"
},
"dependencies": {
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-switch": "^1.2.6",
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-tooltip": "^1.2.8",
"@radix-ui/react-alert-dialog": "^1.1.23",
"@radix-ui/react-checkbox": "^1.3.11",
"@radix-ui/react-collapsible": "^1.1.20",
"@radix-ui/react-dialog": "^1.1.23",
"@radix-ui/react-dropdown-menu": "^2.1.24",
"@radix-ui/react-label": "^2.1.15",
"@radix-ui/react-popover": "^1.1.23",
"@radix-ui/react-scroll-area": "^1.2.18",
"@radix-ui/react-select": "^2.3.7",
"@radix-ui/react-separator": "^1.1.15",
"@radix-ui/react-slot": "^1.3.3",
"@radix-ui/react-switch": "^1.3.7",
"@radix-ui/react-tabs": "^1.1.21",
"@radix-ui/react-tooltip": "^1.2.16",
"@types/qrcode": "^1.5.6",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"i18next": "^26.0.4",
"lucide-react": "^1.8.0",
"otpauth": "^9.5.0",
"i18next": "^26.3.6",
"lucide-react": "^1.27.0",
"otpauth": "^9.5.1",
"qrcode": "^1.5.4",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-i18next": "^17.0.2",
"react": "^19.2.8",
"react-dom": "^19.2.8",
"react-i18next": "^17.0.11",
"react-markdown": "^10.1.0",
"react-router-dom": "^7.14.0",
"recharts": "^3.8.1",
"tailwind-merge": "^3.5.0",
"zustand": "^5.0.12"
"react-router-dom": "^7.18.1",
"recharts": "^3.10.1",
"tailwind-merge": "^3.6.0",
"zustand": "^5.0.14"
},
"devDependencies": {
"@eslint/js": "^9.39.4",
"@tailwindcss/vite": "^4.2.2",
"@types/node": "^24.12.2",
"@types/react": "^19.2.14",
"@eslint/js": "^10.0.1",
"@tailwindcss/vite": "^4.3.3",
"@types/node": "^26.1.2",
"@types/react": "^19.2.17",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
"eslint": "^9.39.4",
"@vitejs/plugin-react": "^6.0.4",
"eslint": "^10.8.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.4.0",
"happy-dom": "^20.9.0",
"prettier": "^3.8.2",
"tailwindcss": "^4.2.2",
"typescript": "~6.0.2",
"typescript-eslint": "^8.58.0",
"vite": "^8.0.4",
"vitest": "^4.1.4"
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.3",
"globals": "^17.8.0",
"happy-dom": "^20.11.1",
"prettier": "^3.9.6",
"tailwindcss": "^4.3.3",
"typescript": "~6.0.3",
"typescript-eslint": "^8.65.0",
"vite": "^8.1.5",
"vitest": "^4.1.10"
}
}
public/favicon.svg → public/favicon.ico
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

src/components/bootstrap/BootstrapWizard.tsx
+1 -1
View File
@@ -88,9 +88,9 @@ export function BootstrapWizard() {
const { obj, sch } = resolved;
const ctrl = new AbortController();
setLoading(true);
(async () => {
setLoading(true);
try {
const accountId = getAccountId(obj.objectName);
const responses = await jmapGet(obj.objectName, accountId, ['singleton'], fetchProperties, ctrl.signal);
src/components/expression/ExpressionEditor.tsx
+3 -6
View File
@@ -4,8 +4,9 @@
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import { useState, useEffect } from 'react';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useBufferedValue } from '@/hooks/useBufferedValue';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
@@ -21,11 +22,7 @@ function BufferedExprInput({
React.InputHTMLAttributes<HTMLInputElement>,
'onChange' | 'value'
>) {
const [local, setLocal] = useState(value);
useEffect(() => {
setLocal(value);
}, [value]);
const [local, setLocal] = useBufferedValue(value);
const commit = () => {
if (local !== value) onCommit(local);
src/components/forms/DynamicForm.tsx
+22 -24
View File
@@ -5,6 +5,7 @@
*/
import { useState, useEffect, useCallback, useMemo } from 'react';
import { flushSync } from 'react-dom';
import { useNavigate, useBlocker } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
@@ -166,11 +167,11 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
return Array.from(set);
}, [schema, resolved, viewName]);
useEffect(() => {
if (!schema || !resolved) return;
const { obj, sch } = resolved;
if (isCreate) {
const [prevCreateInitKey, setPrevCreateInitKey] = useState<typeof resolved | undefined>(undefined);
if (isCreate && schema && resolved) {
if (resolved !== prevCreateInitKey) {
setPrevCreateInitKey(resolved);
const { obj, sch } = resolved;
const staticFilters = resolved.list?.filtersStatic;
if (sch.type === 'multiple') {
const variantFromFilter = typeof staticFilters?.['@type'] === 'string' ? staticFilters['@type'] : undefined;
@@ -184,13 +185,19 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
setFormData(defaults);
setOriginalData(defaults);
}
return;
}
} else if (prevCreateInitKey !== undefined) {
setPrevCreateInitKey(undefined);
}
useEffect(() => {
if (!schema || !resolved || isCreate) return;
const { obj, sch } = resolved;
const ctrl = new AbortController();
setLoading(true);
(async () => {
setLoading(true);
try {
const accountId = getAccountId(obj.objectName);
const ids = isSingleton ? ['singleton'] : [objectId];
@@ -251,13 +258,14 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
const blocker = useBlocker(isDirty && !saving);
const [pendingNavAfterCreate, setPendingNavAfterCreate] = useState(false);
useEffect(() => {
if (!pendingNavAfterCreate) return;
setPendingNavAfterCreate(false);
const navigateAfterCreate = useCallback(() => {
flushSync(() => {
setOriginalData({ ...formData });
setServerCreatedProps(null);
});
const section = viewToSection[viewName] ?? '';
navigate(`/${section}/${viewName}`);
}, [pendingNavAfterCreate, viewName, viewToSection, navigate]);
}, [formData, viewToSection, viewName, navigate]);
const handleFieldChange = useCallback((fieldName: string, value: unknown) => {
setFormData((prev) => ({ ...prev, [fieldName]: value }));
@@ -928,9 +936,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
open={serverCreatedProps !== null && createdObjectId !== null}
onOpenChange={(open) => {
if (!open) {
setOriginalData({ ...formData });
setServerCreatedProps(null);
setPendingNavAfterCreate(true);
navigateAfterCreate();
}
}}
>
@@ -963,15 +969,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
})()}
</div>
<DialogFooter>
<Button
onClick={() => {
setOriginalData({ ...formData });
setServerCreatedProps(null);
setPendingNavAfterCreate(true);
}}
>
{t('common.continue', 'Continue')}
</Button>
<Button onClick={navigateAfterCreate}>{t('common.continue', 'Continue')}</Button>
</DialogFooter>
</DialogContent>
</Dialog>
src/components/forms/FieldWidget.tsx
+22 -43
View File
@@ -6,6 +6,7 @@
import { useState, useEffect, type KeyboardEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { useBufferedValue, useResetOnChange } from '@/hooks/useBufferedValue';
import ReactMarkdown from 'react-markdown';
import { Input } from '@/components/ui/input';
@@ -243,11 +244,7 @@ interface BufferedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
}
function BufferedInput({ value, onCommit, onBlur, onKeyDown, ...rest }: BufferedInputProps) {
const [local, setLocal] = useState(value);
useEffect(() => {
setLocal(value);
}, [value]);
const [local, setLocal] = useBufferedValue(value);
const commit = () => {
if (local !== value) onCommit(local);
@@ -278,11 +275,7 @@ interface BufferedTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTe
}
function BufferedTextarea({ value, onCommit, onBlur, ...rest }: BufferedTextareaProps) {
const [local, setLocal] = useState(value);
useEffect(() => {
setLocal(value);
}, [value]);
const [local, setLocal] = useBufferedValue(value);
return (
<Textarea
@@ -463,8 +456,7 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
const [localValue, setLocalValue] = useState(() => (value === SECRET_MASK || value === '' ? '' : value));
const [isMasked, setIsMasked] = useState(() => value === SECRET_MASK);
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
useResetOnChange(value, () => {
if (value === SECRET_MASK || value === '') {
setLocalValue('');
setIsMasked(value === SECRET_MASK);
@@ -472,8 +464,7 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
setLocalValue(value);
setIsMasked(false);
}
}, [value]);
/* eslint-enable react-hooks/set-state-in-effect */
});
const handleLocalChange = (v: string) => {
setLocalValue(v);
@@ -513,6 +504,10 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
minLength={minLength}
maxLength={maxLength}
rows={4}
autoComplete="off"
data-1p-ignore
data-lpignore="true"
data-bwignore
className={visible ? '' : 'tracking-widest'}
style={visible ? undefined : ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)}
/>
@@ -535,6 +530,10 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
placeholder={displayPlaceholder}
minLength={minLength}
maxLength={maxLength}
autoComplete="off"
data-1p-ignore
data-lpignore="true"
data-bwignore
className="flex-1"
/>
{toggleBtn}
@@ -607,13 +606,7 @@ function BufferedNumberInput({
disabled,
onCommit,
}: BufferedNumberInputProps) {
const [local, setLocal] = useState<string>(value != null ? String(value) : '');
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
setLocal(value != null ? String(value) : '');
}, [value]);
/* eslint-enable react-hooks/set-state-in-effect */
const [local, setLocal] = useBufferedValue(value, (v) => (v != null ? String(v) : ''));
const commit = () => {
if (local === '') {
@@ -666,13 +659,11 @@ function SizeInputEditable({ value, onChange, nullable }: Omit<SizeInputProps, '
const [unit, setUnit] = useState(initHuman.unit);
const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
useResetOnChange(value, () => {
const h = bytesToHuman(typeof value === 'number' ? value : 0);
setUnit(h.unit);
setLocalStr(value == null ? '' : String(h.value));
}, [value]);
/* eslint-enable react-hooks/set-state-in-effect */
});
const commit = () => {
if (localStr === '') {
@@ -771,13 +762,11 @@ function DurationInputEditable({ value, onChange, nullable }: Omit<DurationInput
const [unit, setUnit] = useState(initHuman.unit);
const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
useResetOnChange(value, () => {
const h = msToHuman(typeof value === 'number' ? value : 0);
setUnit(h.unit);
setLocalStr(value == null ? '' : String(h.value));
}, [value]);
/* eslint-enable react-hooks/set-state-in-effect */
});
const commit = () => {
if (localStr === '') {
@@ -862,13 +851,7 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
return new Date(local).toISOString();
};
const [local, setLocal] = useState(() => toLocal(strValue));
/* eslint-disable react-hooks/set-state-in-effect */
useEffect(() => {
setLocal(toLocal(strValue));
}, [strValue]);
/* eslint-enable react-hooks/set-state-in-effect */
const [local, setLocal] = useBufferedValue(strValue, toLocal);
const commit = () => {
const iso = toIso(local);
@@ -1005,9 +988,9 @@ function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
if (!blobId || loaded) return;
let cancelled = false;
setLoading(true);
(async () => {
setLoading(true);
try {
const accountId = getAccountId('x:Blob');
const responses = await jmapGet('Blob', accountId, [blobId], ['data:asText']);
@@ -1253,12 +1236,8 @@ function RateField({ value, onChange, readOnly, nullable }: RateFieldProps) {
const [localCount, setLocalCount] = useState(String(count));
const [localPeriod, setLocalPeriod] = useState(String(human.value));
useEffect(() => {
setLocalCount(String(count));
}, [count]);
useEffect(() => {
setLocalPeriod(String(human.value));
}, [human.value]);
useResetOnChange(count, () => setLocalCount(String(count)));
useResetOnChange(human.value, () => setLocalPeriod(String(human.value)));
const commitCount = () => {
const n = parseInt(localCount, 10);
src/components/layout/TopBar.tsx
+13 -3
View File
@@ -21,6 +21,7 @@ import {
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import Logo from '@/components/common/Logo';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
import { findFirstAccessibleLinkInLayout, findFirstVisibleLinkInLayout, visibleLayouts } from '@/lib/layout';
import { useUIStore } from '@/stores/uiStore';
@@ -66,9 +67,18 @@ export function TopBar() {
<Menu className="h-4 w-4" />
</Button>
<Link to="/" className="flex shrink-0 items-center">
<Logo />
</Link>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Link to="/" className="flex shrink-0 items-center">
<Logo />
</Link>
</TooltipTrigger>
<TooltipContent side="bottom">
{t('version.label', 'Stalwart WebUI v{{version}}', { version: __APP_VERSION__ })}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div className="hidden min-w-0 flex-1 items-center justify-center px-4 md:flex">
<GlobalSearch />
src/components/lists/DynamicList.tsx
+31 -19
View File
@@ -52,6 +52,7 @@ import { toast } from '@/hooks/use-toast';
import { friendlySetError } from '@/lib/jmapErrors';
import { coerceLabel } from '@/lib/objectOptions';
import { buildJmapFilter } from '@/lib/listFilter';
import { useResetOnChange } from '@/hooks/useBufferedValue';
import { useSchemaStore } from '@/stores/schemaStore';
import { useAuthStore } from '@/stores/authStore';
@@ -305,6 +306,24 @@ interface SortState {
ascending: boolean;
}
function readUrlFilters(): Record<string, string> {
const params = new URLSearchParams(window.location.search);
const filters: Record<string, string> = {};
params.forEach((value, key) => {
if (key.startsWith('f.')) {
filters[key.slice(2)] = value;
}
});
return filters;
}
function readUrlSort(): SortState | null {
const params = new URLSearchParams(window.location.search);
const sortParam = params.get('sort');
const sortDir = params.get('sortDir');
return sortParam ? { field: sortParam, ascending: sortDir !== 'desc' } : null;
}
interface ConfirmAction {
label: string;
onConfirm: () => void;
@@ -352,15 +371,15 @@ export function DynamicList({ viewName }: DynamicListProps) {
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
const [selectAllMode, setSelectAllMode] = useState(false);
const [filtersOpen, setFiltersOpen] = useState(false);
const [filterValues, setFilterValues] = useState<Record<string, string>>({});
const [appliedFilters, setAppliedFilters] = useState<Record<string, string>>({});
const [filtersOpen, setFiltersOpen] = useState(() => Object.keys(readUrlFilters()).length > 0);
const [filterValues, setFilterValues] = useState<Record<string, string>>(readUrlFilters);
const [appliedFilters, setAppliedFilters] = useState<Record<string, string>>(readUrlFilters);
const [sort, setSort] = useState<SortState | null>(null);
const [sort, setSort] = useState<SortState | null>(readUrlSort);
const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
useEffect(() => {
useResetOnChange(viewName, () => {
setItems([]);
setTotal(null);
setAnchorStack([]);
@@ -369,30 +388,22 @@ export function DynamicList({ viewName }: DynamicListProps) {
setSelectAllMode(false);
setError(null);
const params = new URLSearchParams(window.location.search);
const initialFilters: Record<string, string> = {};
params.forEach((value, key) => {
if (key.startsWith('f.')) {
initialFilters[key.slice(2)] = value;
}
});
const initialFilters = readUrlFilters();
setFilterValues(initialFilters);
setAppliedFilters(initialFilters);
setFiltersOpen(Object.keys(initialFilters).length > 0);
setSort(readUrlSort());
});
const sortParam = params.get('sort');
const sortDir = params.get('sortDir');
setSort(sortParam ? { field: sortParam, ascending: sortDir !== 'desc' } : null);
}, [viewName]);
const objectName = resolved?.obj.objectName;
const buildFilter = useCallback((): Record<string, unknown> => {
return buildJmapFilter({
appliedFilters,
filters: resolved?.list?.filters,
filtersStatic: resolved?.list?.filtersStatic,
isXPrefixed: resolved?.obj.objectName.startsWith('x:') ?? false,
isXPrefixed: objectName?.startsWith('x:') ?? false,
});
}, [appliedFilters, resolved?.list, resolved?.obj.objectName]);
}, [appliedFilters, resolved?.list, objectName]);
const buildSort = useCallback((): Record<string, unknown>[] | undefined => {
if (!sort) return undefined;
@@ -464,6 +475,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
useEffect(() => {
if (!resolved?.list) return;
// eslint-disable-next-line react-hooks/set-state-in-effect
setAnchorStack([]);
setCurrentAnchor(null);
fetchData(null);
src/hooks/useBufferedValue.ts
+28
View File
@@ -0,0 +1,28 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import { useState, type Dispatch, type SetStateAction } from 'react';
export function useBufferedValue<T, S = T>(
value: T,
transform: (v: T) => S = (v) => v as unknown as S,
): [S, Dispatch<SetStateAction<S>>] {
const [prev, setPrev] = useState(value);
const [local, setLocal] = useState<S>(() => transform(value));
if (!Object.is(value, prev)) {
setPrev(value);
setLocal(transform(value));
}
return [local, setLocal];
}
export function useResetOnChange<K>(key: K, reset: () => void): void {
const [prev, setPrev] = useState(key);
if (!Object.is(key, prev)) {
setPrev(key);
reset();
}
}
src/i18n/en.json
+3
View File
@@ -294,6 +294,9 @@
"stalwartAlt": "Stalwart Logo"
},
"logout": "Logout",
"version": {
"label": "Stalwart WebUI v{{version}}"
},
"oauth": {
"backToLogin": "Back to login",
"discoveryFailed": "Discovery failed for \"{{username}}\": {{status}} {{statusText}}",
src/lib/objectOptions.ts
+1 -1
View File
@@ -97,7 +97,7 @@ async function fetchObjectList(viewOrObjectName: string, schema: Schema): Promis
const accountId = getAccountId(objectName);
const displayProp = getDisplayProperty(schema, viewOrObjectName);
let items: Array<Record<string, unknown>> = [];
let items: Array<Record<string, unknown>>;
try {
const result = await jmapQueryAllAndGet(
objectName,
src/vite-env.d.ts
Vendored
+2
View File
@@ -18,3 +18,5 @@ interface ImportMetaEnv {
interface ImportMeta {
readonly env: ImportMetaEnv;
}
declare const __APP_VERSION__: string;
tsconfig.node.json
+1
View File
@@ -10,6 +10,7 @@
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
vite.config.ts
+4
View File
@@ -3,9 +3,13 @@ import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'
import { version } from './package.json'
export default defineConfig({
base: './',
define: {
__APP_VERSION__: JSON.stringify(version),
},
plugins: [react(), tailwindcss()],
resolve: {
alias: {