Sievepad integration

This commit is contained in:
Maurus Decimus
2026-09-15 09:27:02 +02:00
parent b0b8e4e090
commit dc462b137f
9 changed files with 271 additions and 12 deletions
+9
View File
@@ -2,6 +2,15 @@
All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).
## [1.0.11] - 2026-09-15
### Added
- Sievepad integration.
### Changed
### Fixed
## [1.0.10] - 2026-09-04
### Added
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "stalwart-webui",
"private": true,
"version": "1.0.10",
"version": "1.0.11",
"description": "Stalwart WebUI",
"type": "module",
"scripts": {
+11 -3
View File
@@ -26,12 +26,20 @@ export function EnterpriseUpsell({ open, onClose }: EnterpriseUpsellProps) {
return (
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
<DialogContent>
<DialogHeader>
<DialogContent className="gap-6">
<DialogHeader className="space-y-4">
<DialogTitle>{t('enterprise.trialTitle')}</DialogTitle>
<DialogDescription>{t('enterprise.trialDescription')}</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogFooter className="gap-2 sm:items-center">
<a
href="https://stalw.art/compare#why-isnt-feature-x-open-source"
target="_blank"
rel="noopener noreferrer"
className="text-center text-xs text-muted-foreground underline-offset-4 hover:underline sm:mr-auto sm:text-left"
>
{t('enterprise.whyNotFree')}
</a>
<Button variant="outline" onClick={onClose}>
{t('common.close')}
</Button>
+5
View File
@@ -53,6 +53,7 @@ import { SECRET_MASK } from '@/lib/jmapUtils';
import { toast } from '@/hooks/use-toast';
import { logFormChange } from '@/lib/debug';
import { FieldWidget } from '@/components/forms/FieldWidget';
import { isSieveScriptField } from '@/lib/sievepad';
import type { Field, Fields, Form, FormField, Schema } from '@/types/schema';
import type { JmapSetResponse, JmapSetError, JmapMethodCall } from '@/types/jmap';
@@ -740,6 +741,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
})();
const sectionsToRender = buildSections(combinedForm, currentFields, isCreate, edition);
const scriptName = typeof formData.name === 'string' ? formData.name : '';
return (
<div className="mx-auto max-w-4xl space-y-6">
@@ -810,6 +812,9 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
readOnly={fieldReadOnly}
error={fieldError}
schema={schema}
sieveScriptName={
isSieveScriptField(resolved.obj.objectName, formField.name) ? scriptName : undefined
}
/>
);
+10 -3
View File
@@ -24,6 +24,7 @@ import { Plus, X, Eye, EyeOff, Loader2, Search, Check, ChevronRight, Calendar as
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { ExpressionEditor } from '@/components/expression/ExpressionEditor';
import { OtpAuthField } from '@/components/forms/OtpAuthField';
import { SievepadButton } from '@/components/forms/SievepadButton';
import {
bytesToHuman,
humanToBytes,
@@ -59,6 +60,7 @@ export interface FieldWidgetProps {
readOnly: boolean;
error?: string;
schema: Schema;
sieveScriptName?: string;
}
function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optional' | null {
@@ -79,7 +81,7 @@ function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optio
export function FieldWidget(props: FieldWidgetProps) {
const { t } = useTranslation();
const { field, formField, value, onChange, readOnly, error, schema } = props;
const { field, formField, value, onChange, readOnly, error, schema, sieveScriptName } = props;
const ft = field.type;
const edition = useEffectiveEdition();
@@ -132,7 +134,7 @@ export function FieldWidget(props: FieldWidgetProps) {
/>
);
case 'blobId':
return <BlobField value={value} onChange={onChange} readOnly={readOnly} />;
return <BlobField value={value} onChange={onChange} readOnly={readOnly} sieveScriptName={sieveScriptName} />;
case 'objectId':
return (
<ObjectIdField
@@ -236,6 +238,9 @@ export function FieldWidget(props: FieldWidgetProps) {
</div>
)}
{widget}
{sieveScriptName !== undefined && ft.type === 'string' && (
<SievepadButton scriptName={sieveScriptName} source={typeof value === 'string' ? value : ''} />
)}
{error && <p className="text-xs text-destructive">{error}</p>}
</div>
);
@@ -986,9 +991,10 @@ interface BlobFieldProps {
value: unknown;
onChange: (value: unknown) => void;
readOnly: boolean;
sieveScriptName?: string;
}
function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
function BlobField({ value, onChange, readOnly, sieveScriptName }: BlobFieldProps) {
const { t } = useTranslation();
const blobId = typeof value === 'string' ? value : null;
const [content, setContent] = useState<string>('');
@@ -1054,6 +1060,7 @@ function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
rows={8}
className="font-mono text-xs"
/>
{sieveScriptName !== undefined && <SievepadButton scriptName={sieveScriptName} source={content} />}
{modified && (
<p className="text-xs text-muted-foreground">
{t('field.contentModified', 'Content modified (will be saved as a new blob)')}
+97
View File
@@ -0,0 +1,97 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Bug } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { toast } from '@/hooks/use-toast';
import { dismissSievepadWarning, isSievepadWarningDismissed, openInSievepad } from '@/lib/sievepad';
interface SievepadButtonProps {
scriptName: string;
source: string;
}
export function SievepadButton({ scriptName, source }: SievepadButtonProps) {
const { t } = useTranslation();
const [warningOpen, setWarningOpen] = useState(false);
const [dontShowAgain, setDontShowAgain] = useState(false);
const open = () => {
openInSievepad(scriptName || t('sievepad.defaultName', 'Sieve script'), source).catch(() => {
toast({ title: t('sievepad.failed', 'Failed to open Sievepad.'), variant: 'destructive' });
});
};
const handleClick = () => {
if (isSievepadWarningDismissed()) {
open();
} else {
setDontShowAgain(false);
setWarningOpen(true);
}
};
const handleContinue = () => {
if (dontShowAgain) dismissSievepadWarning();
setWarningOpen(false);
open();
};
return (
<>
<div className="flex justify-end">
<Button type="button" variant="outline" size="sm" onClick={handleClick} disabled={!source.trim()}>
<Bug className="h-4 w-4" />
{t('sievepad.debug', 'Debug')}
</Button>
</div>
<Dialog open={warningOpen} onOpenChange={setWarningOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>{t('sievepad.warningTitle', 'Debug in Sievepad')}</DialogTitle>
<DialogDescription>
{t(
'sievepad.warningDescription',
'A new tab will open sievepad.com with a copy of this script. Sievepad compiles and runs the script entirely in your browser: nothing is uploaded to or stored on any server.',
)}
</DialogDescription>
</DialogHeader>
<div className="flex items-center gap-2">
<Checkbox
id="sievepad-dont-show-again"
checked={dontShowAgain}
onCheckedChange={(checked) => setDontShowAgain(checked === true)}
/>
<Label htmlFor="sievepad-dont-show-again" className="text-sm font-normal">
{t('sievepad.dontShowAgain', "Don't show this again")}
</Label>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => setWarningOpen(false)}>
{t('common.cancel')}
</Button>
<Button type="button" onClick={handleContinue}>
{t('common.continue')}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
);
}
+10 -1
View File
@@ -136,7 +136,8 @@
"trialDescription": "Get access to advanced features including multi-tenancy, AI-powered spam filtering, alerts, and more.",
"trialButton": "Start 30-Day Free Trial",
"requestTrial": "Request a free trial to unlock this feature.",
"ossHidden": "This feature is not available in the open-source edition."
"ossHidden": "This feature is not available in the open-source edition.",
"whyNotFree": "Why is this not free?"
},
"errorBoundary": {
"title": "Something went wrong",
@@ -340,6 +341,14 @@
"periodValue": "Period value"
},
"sections": "Sections",
"sievepad": {
"debug": "Debug",
"defaultName": "Sieve script",
"dontShowAgain": "Don't show this again",
"failed": "Failed to open Sievepad.",
"warningDescription": "A new tab will open sievepad.com with a copy of this script. Sievepad compiles and runs the script entirely in your browser: nothing is uploaded to or stored on any server.",
"warningTitle": "Debug in Sievepad"
},
"toggleTheme": "Toggle theme",
"tracing": {
"addFilter": "Add filter",
+47
View File
@@ -0,0 +1,47 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
import { inflateRawSync } from 'node:zlib';
import { describe, expect, it } from 'vitest';
import { SIEVEPAD_URL, isSieveScriptField, sievepadLink } from './sievepad';
function decode(link: string): unknown {
const token = new URLSearchParams(new URL(link).hash.slice(1)).get('w') ?? '';
return JSON.parse(inflateRawSync(Buffer.from(token, 'base64url')).toString('utf8'));
}
describe('sievepadLink', () => {
it('encodes the script as a single main entry', async () => {
const source = 'require "imap4flags";\r\naddflag "\\\\Seen";\r\n';
const link = await sievepadLink('Filters é', source);
expect(link.startsWith(`${SIEVEPAD_URL}#w=`)).toBe(true);
expect(link.slice(`${SIEVEPAD_URL}#w=`.length)).toMatch(/^[A-Za-z0-9_-]+$/);
expect(decode(link)).toEqual({
v: 1,
name: 'Filters é',
scripts: [{ name: 'main', source: 'require "imap4flags";\naddflag "\\\\Seen";\n' }],
messages: [],
settings: {},
});
});
it('truncates long workspace names', async () => {
const link = await sievepadLink('x'.repeat(200), 'keep;');
expect((decode(link) as { name: string }).name).toHaveLength(80);
});
});
describe('isSieveScriptField', () => {
it('matches only the known script fields', () => {
expect(isSieveScriptField('x:SieveUserScript', 'contents')).toBe(true);
expect(isSieveScriptField('x:SieveSystemScript', 'contents')).toBe(true);
expect(isSieveScriptField('SieveScript', 'blobId')).toBe(true);
expect(isSieveScriptField('SieveScript', 'name')).toBe(false);
expect(isSieveScriptField('x:Domain', 'contents')).toBe(false);
});
});
+77
View File
@@ -0,0 +1,77 @@
/*
* SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <[email protected]>
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
*/
export const SIEVEPAD_URL = 'https://sievepad.com/';
const SIEVEPAD_FORMAT_VERSION = 1;
const SIEVEPAD_MAX_NAME_LENGTH = 80;
const SIEVEPAD_MAIN_SCRIPT = 'main';
const BASE64_CHUNK_SIZE = 0x8000;
const WARNING_DISMISSED_KEY = 'stalwart-sievepad-warning-dismissed';
const SIEVE_SCRIPT_FIELDS: Record<string, string> = {
'x:SieveSystemScript': 'contents',
'x:SieveUserScript': 'contents',
SieveScript: 'blobId',
};
export function isSieveScriptField(objectName: string, fieldName: string): boolean {
return SIEVE_SCRIPT_FIELDS[objectName] === fieldName;
}
function toBase64Url(bytes: Uint8Array): string {
let binary = '';
for (let i = 0; i < bytes.length; i += BASE64_CHUNK_SIZE) {
binary += String.fromCharCode(...bytes.subarray(i, i + BASE64_CHUNK_SIZE));
}
return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}
export async function sievepadLink(name: string, source: string, base = SIEVEPAD_URL): Promise<string> {
const json = JSON.stringify({
v: SIEVEPAD_FORMAT_VERSION,
name: name.slice(0, SIEVEPAD_MAX_NAME_LENGTH),
scripts: [{ name: SIEVEPAD_MAIN_SCRIPT, source: source.replace(/\r\n/g, '\n') }],
messages: [],
settings: {},
});
const stream = new Blob([new TextEncoder().encode(json)]).stream().pipeThrough(new CompressionStream('deflate-raw'));
const packed = new Uint8Array(await new Response(stream).arrayBuffer());
return `${base}#w=${toBase64Url(packed)}`;
}
export async function openInSievepad(name: string, source: string): Promise<void> {
const tab = window.open('about:blank', '_blank');
if (tab) tab.opener = null;
let link: string;
try {
link = await sievepadLink(name, source);
} catch (err) {
tab?.close();
throw err;
}
if (tab) {
tab.location.replace(link);
} else {
window.open(link, '_blank', 'noopener,noreferrer');
}
}
export function isSievepadWarningDismissed(): boolean {
try {
return localStorage.getItem(WARNING_DISMISSED_KEY) === 'true';
} catch {
return false;
}
}
export function dismissSievepadWarning(): void {
try {
localStorage.setItem(WARNING_DISMISSED_KEY, 'true');
} catch {
return;
}
}