change javascript into typescript for webaccount and webadmin interface

all ui frontend code is now in typescript. we no longer need jshint, and we
build the frontend code during "make build".

this also changes tlsrpt types for a Report, not encoding field names with
dashes, but to keep them valid identifiers in javascript. this makes it more
conveniently to work with in the frontend, and works around a sherpats
limitation.

Makefile

@@ -1,16 +1,22 @@
 default: build
 
-build:
+build: build0 frontend build1
+
+build0:
 	# build early to catch syntax errors
 	CGO_ENABLED=0 go build
 	CGO_ENABLED=0 go vet ./...
 	CGO_ENABLED=0 go vet -tags integration
 	./gendoc.sh
-	(cd webadmin && CGO_ENABLED=0 go run ../vendor/github.com/mjl-/sherpadoc/cmd/sherpadoc/*.go -adjust-function-names none Admin) >webadmin/adminapi.json
-	(cd webaccount && CGO_ENABLED=0 go run ../vendor/github.com/mjl-/sherpadoc/cmd/sherpadoc/*.go -adjust-function-names none Account) >webaccount/accountapi.json
+	(cd webadmin && CGO_ENABLED=0 go run ../vendor/github.com/mjl-/sherpadoc/cmd/sherpadoc/*.go -adjust-function-names none Admin) >webadmin/api.json
+	(cd webaccount && CGO_ENABLED=0 go run ../vendor/github.com/mjl-/sherpadoc/cmd/sherpadoc/*.go -adjust-function-names none Account) >webaccount/api.json
 	(cd webmail && CGO_ENABLED=0 go run ../vendor/github.com/mjl-/sherpadoc/cmd/sherpadoc/*.go -adjust-function-names none Webmail) >webmail/api.json
-	go run vendor/github.com/mjl-/sherpats/cmd/sherpats/main.go -bytes-to-string -slices-nullable -maps-nullable -nullable-optional -namespace api api <webmail/api.json >webmail/api.ts
-	# build again, api json files above are embedded
+	./gents.sh webadmin/api.json webadmin/api.ts
+	./gents.sh webaccount/api.json webaccount/api.ts
+	./gents.sh webmail/api.json webmail/api.ts
+
+build1:
+	# build again, api json files above are embedded and new frontend code generated
 	CGO_ENABLED=0 go build
 
 test:
@@ -75,7 +81,7 @@ fmt:
 	gofmt -w -s *.go */*.go
 
 jswatch:
-	bash -c 'while true; do inotifywait -q -e close_write webadmin/*.html webaccount/*.html webmail/*.ts; make frontend; done'
+	bash -c 'while true; do inotifywait -q -e close_write *.ts webadmin/*.ts webaccount/*.ts webmail/*.ts; make frontend; done'
 
 jsinstall:
 	-mkdir -p node_modules/.bin
@@ -83,24 +89,24 @@ jsinstall:
 
 jsinstall0:
 	-mkdir -p node_modules/.bin
-	npm install --save-dev --save-exact jshint@2.13.6 typescript@5.1.6
+	npm install --save-dev --save-exact typescript@5.1.6
 
-webmail/webmail.js: webmail/api.ts webmail/lib.ts webmail/webmail.ts
+webmail/webmail.js: lib.ts webmail/api.ts webmail/lib.ts webmail/webmail.ts
 	./tsc.sh $@ $^
 
-webmail/msg.js: webmail/api.ts webmail/lib.ts webmail/msg.ts
+webmail/msg.js: lib.ts webmail/api.ts webmail/lib.ts webmail/msg.ts
 	./tsc.sh $@ $^
 
-webmail/text.js: webmail/api.ts webmail/lib.ts webmail/text.ts
+webmail/text.js: lib.ts webmail/api.ts webmail/lib.ts webmail/text.ts
 	./tsc.sh $@ $^
 
-webadmin/admin.htmlx:
-	./node_modules/.bin/jshint --extract always webadmin/admin.html | ./fixjshintlines.sh
+webadmin/admin.js: lib.ts webadmin/api.ts webadmin/admin.ts
+	./tsc.sh $@ $^
 
-webaccount/account.htmlx:
-	./node_modules/.bin/jshint --extract always webaccount/account.html | ./fixjshintlines.sh
+webaccount/account.js: lib.ts webaccount/api.ts webaccount/account.ts
+	./tsc.sh $@ $^
 
-frontend: webadmin/admin.htmlx webaccount/account.htmlx webmail/webmail.js webmail/msg.js webmail/text.js
+frontend: webadmin/admin.js webaccount/account.js webmail/webmail.js webmail/msg.js webmail/text.js
 
 genapidiff:
 	# needs file next.txt containing next version number, and golang.org/x/exp/cmd/apidiff@v0.0.0-20231206192017-f3f8817b8deb installed

apidiff/v0.0.9.txt

@@ -71,8 +71,10 @@ Below are the incompatible changes between v0.0.8 and v0.0.9, per package.
 - Verify: changed from func(*github.com/mjl-/mox/mlog.Log, io.ReaderAt, []byte, time.Duration) error to func(*golang.org/x/exp/slog.Logger, io.ReaderAt, []byte, time.Duration) error
 
 # tlsrpt
+- (*TLSRPTDateRange).UnmarshalJSON: removed
 - Lookup: changed from func(context.Context, github.com/mjl-/mox/dns.Resolver, github.com/mjl-/mox/dns.Domain) (*Record, string, error) to func(context.Context, *golang.org/x/exp/slog.Logger, github.com/mjl-/mox/dns.Resolver, github.com/mjl-/mox/dns.Domain) (*Record, string, error)
-- ParseMessage: changed from func(*github.com/mjl-/mox/mlog.Log, io.ReaderAt) (*Report, error) to func(*golang.org/x/exp/slog.Logger, io.ReaderAt) (*Report, error)
+- Parse: changed from func(io.Reader) (*Report, error) to func(io.Reader) (*ReportJSON, error)
+- ParseMessage: changed from func(*github.com/mjl-/mox/mlog.Log, io.ReaderAt) (*Report, error) to func(*golang.org/x/exp/slog.Logger, io.ReaderAt) (*ReportJSON, error)
 
 # updates
 - Check: changed from func(context.Context, github.com/mjl-/mox/dns.Resolver, github.com/mjl-/mox/dns.Domain, Version, string, []byte) (Version, *Record, *Changelog, error) to func(context.Context, *golang.org/x/exp/slog.Logger, github.com/mjl-/mox/dns.Resolver, github.com/mjl-/mox/dns.Domain, Version, string, []byte) (Version, *Record, *Changelog, error)

config/config.go

@@ -112,7 +112,7 @@ type Dynamic struct {
 	WebHandlers        []WebHandler       `sconf:"optional" sconf-doc:"Handle webserver requests by serving static files, redirecting or reverse-proxying HTTP(s). The first matching WebHandler will handle the request. Built-in handlers, e.g. for account, admin, autoconfig and mta-sts always run first. If no handler matches, the response status code is file not found (404). If functionality you need is missng, simply forward the requests to an application that can provide the needed functionality."`
 	Routes             []Route            `sconf:"optional" sconf-doc:"Routes for delivering outgoing messages through the queue. Each delivery attempt evaluates account routes, domain routes and finally these global routes. The transport of the first matching route is used in the delivery attempt. If no routes match, which is the default with no configured routes, messages are delivered directly from the queue."`
 
-	WebDNSDomainRedirects map[dns.Domain]dns.Domain `sconf:"-"`
+	WebDNSDomainRedirects map[dns.Domain]dns.Domain `sconf:"-" json:"-"`
 }
 
 type ACME struct {

develop.txt

@@ -28,6 +28,32 @@ with bad API. Third party users aren't affected too seriously due to Go's
 minimal version selection. The reusable packages are in apidiff/packages.txt.
 We generate the incompatible changes with each release.
 
+# Web interfaces/frontend
+
+The web interface frontends (for webmail/, webadmin/ and webaccount/) are
+written in strict TypeScript. The web API is a simple self-documenting
+HTTP/JSON RPC API mechanism called sherpa,
+https://www.ueber.net/who/mjl/sherpa/. The web API exposes types and functions
+as implemented in Go, using https://github.com/mjl-/sherpa. API definitions in
+JSON form are generated with https://github.com/mjl-/sherpadoc. Those API
+definitions are used to generate TypeScript clients with by
+https://github.com/mjl-/sherpats/.
+
+The JavaScript that is generated from the TypeScript is included in the
+repository. This makes it available for inclusion in the binary, which is
+practical for users, and desirable given Go's reproducible builds. When
+developing, run "make" to also build the frontend code. Run "make jsinstall"
+once to install the TypeScript compiler into ./node_modules/.
+
+There are no other external (runtime or devtime) frontend dependencies. A
+light-weight abstraction over the DOM is provided by ./lib.ts. A bit more
+manual UI state management must be done compared to "frameworks", but it is
+little code, and this allows JavaScript/TypeScript developer to quickly get
+started. UI state is often encapsulated in a JavaScript object with a
+TypeScript interface exposing a "root" HTMLElement that is added to the DOM,
+and functions for accessing/changing the internal state, keeping the UI
+managable.
+
 # TLS certificates
 
 https://github.com/cloudflare/cfssl is useful for testing with TLS

gentestdata.go

@@ -214,9 +214,10 @@ Accounts:
 	// Populate tlsrpt.db.
 	err = tlsrptdb.Init()
 	xcheckf(err, "tlsrptdb init")
-	tlsr, err := tlsrpt.Parse(strings.NewReader(tlsReport))
+	tlsreportJSON, err := tlsrpt.Parse(strings.NewReader(tlsReport))
 	xcheckf(err, "parsing tls report")
-	err = tlsrptdb.AddReport(ctxbg, c.log, dns.Domain{ASCII: "mox.example"}, "tlsrpt@mox.example", false, tlsr)
+	tlsr := tlsreportJSON.Convert()
+	err = tlsrptdb.AddReport(ctxbg, c.log, dns.Domain{ASCII: "mox.example"}, "tlsrpt@mox.example", false, &tlsr)
 	xcheckf(err, "adding tls report")
 
 	// Populate queue, with a message.

lib.ts

@@ -0,0 +1,218 @@
+// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
+
+type ElemArg = string | String | Element | Function | {_class: string[]} | {_attrs: {[k: string]: string}} | {_styles: {[k: string]: string | number}} | {_props: {[k: string]: any}} | {root: HTMLElement} | ElemArg[]
+
+const [dom, style, attr, prop] = (function() {
+
+// Start of unicode block (rough approximation of script), from https://www.unicode.org/Public/UNIDATA/Blocks.txt
+const scriptblocks = [0x0000, 0x0080, 0x0100, 0x0180, 0x0250, 0x02B0, 0x0300, 0x0370, 0x0400, 0x0500, 0x0530, 0x0590, 0x0600, 0x0700, 0x0750, 0x0780, 0x07C0, 0x0800, 0x0840, 0x0860, 0x0870, 0x08A0, 0x0900, 0x0980, 0x0A00, 0x0A80, 0x0B00, 0x0B80, 0x0C00, 0x0C80, 0x0D00, 0x0D80, 0x0E00, 0x0E80, 0x0F00, 0x1000, 0x10A0, 0x1100, 0x1200, 0x1380, 0x13A0, 0x1400, 0x1680, 0x16A0, 0x1700, 0x1720, 0x1740, 0x1760, 0x1780, 0x1800, 0x18B0, 0x1900, 0x1950, 0x1980, 0x19E0, 0x1A00, 0x1A20, 0x1AB0, 0x1B00, 0x1B80, 0x1BC0, 0x1C00, 0x1C50, 0x1C80, 0x1C90, 0x1CC0, 0x1CD0, 0x1D00, 0x1D80, 0x1DC0, 0x1E00, 0x1F00, 0x2000, 0x2070, 0x20A0, 0x20D0, 0x2100, 0x2150, 0x2190, 0x2200, 0x2300, 0x2400, 0x2440, 0x2460, 0x2500, 0x2580, 0x25A0, 0x2600, 0x2700, 0x27C0, 0x27F0, 0x2800, 0x2900, 0x2980, 0x2A00, 0x2B00, 0x2C00, 0x2C60, 0x2C80, 0x2D00, 0x2D30, 0x2D80, 0x2DE0, 0x2E00, 0x2E80, 0x2F00, 0x2FF0, 0x3000, 0x3040, 0x30A0, 0x3100, 0x3130, 0x3190, 0x31A0, 0x31C0, 0x31F0, 0x3200, 0x3300, 0x3400, 0x4DC0, 0x4E00, 0xA000, 0xA490, 0xA4D0, 0xA500, 0xA640, 0xA6A0, 0xA700, 0xA720, 0xA800, 0xA830, 0xA840, 0xA880, 0xA8E0, 0xA900, 0xA930, 0xA960, 0xA980, 0xA9E0, 0xAA00, 0xAA60, 0xAA80, 0xAAE0, 0xAB00, 0xAB30, 0xAB70, 0xABC0, 0xAC00, 0xD7B0, 0xD800, 0xDB80, 0xDC00, 0xE000, 0xF900, 0xFB00, 0xFB50, 0xFE00, 0xFE10, 0xFE20, 0xFE30, 0xFE50, 0xFE70, 0xFF00, 0xFFF0, 0x10000, 0x10080, 0x10100, 0x10140, 0x10190, 0x101D0, 0x10280, 0x102A0, 0x102E0, 0x10300, 0x10330, 0x10350, 0x10380, 0x103A0, 0x10400, 0x10450, 0x10480, 0x104B0, 0x10500, 0x10530, 0x10570, 0x10600, 0x10780, 0x10800, 0x10840, 0x10860, 0x10880, 0x108E0, 0x10900, 0x10920, 0x10980, 0x109A0, 0x10A00, 0x10A60, 0x10A80, 0x10AC0, 0x10B00, 0x10B40, 0x10B60, 0x10B80, 0x10C00, 0x10C80, 0x10D00, 0x10E60, 0x10E80, 0x10EC0, 0x10F00, 0x10F30, 0x10F70, 0x10FB0, 0x10FE0, 0x11000, 0x11080, 0x110D0, 0x11100, 0x11150, 0x11180, 0x111E0, 0x11200, 0x11280, 0x112B0, 0x11300, 0x11400, 0x11480, 0x11580, 0x11600, 0x11660, 0x11680, 0x11700, 0x11800, 0x118A0, 0x11900, 0x119A0, 0x11A00, 0x11A50, 0x11AB0, 0x11AC0, 0x11B00, 0x11C00, 0x11C70, 0x11D00, 0x11D60, 0x11EE0, 0x11F00, 0x11FB0, 0x11FC0, 0x12000, 0x12400, 0x12480, 0x12F90, 0x13000, 0x13430, 0x14400, 0x16800, 0x16A40, 0x16A70, 0x16AD0, 0x16B00, 0x16E40, 0x16F00, 0x16FE0, 0x17000, 0x18800, 0x18B00, 0x18D00, 0x1AFF0, 0x1B000, 0x1B100, 0x1B130, 0x1B170, 0x1BC00, 0x1BCA0, 0x1CF00, 0x1D000, 0x1D100, 0x1D200, 0x1D2C0, 0x1D2E0, 0x1D300, 0x1D360, 0x1D400, 0x1D800, 0x1DF00, 0x1E000, 0x1E030, 0x1E100, 0x1E290, 0x1E2C0, 0x1E4D0, 0x1E7E0, 0x1E800, 0x1E900, 0x1EC70, 0x1ED00, 0x1EE00, 0x1F000, 0x1F030, 0x1F0A0, 0x1F100, 0x1F200, 0x1F300, 0x1F600, 0x1F650, 0x1F680, 0x1F700, 0x1F780, 0x1F800, 0x1F900, 0x1FA00, 0x1FA70, 0x1FB00, 0x20000, 0x2A700, 0x2B740, 0x2B820, 0x2CEB0, 0x2F800, 0x30000, 0x31350, 0xE0000, 0xE0100, 0xF0000, 0x100000]
+
+// Find block code belongs in.
+const findBlock = (code: number): number => {
+	let s = 0
+	let e = scriptblocks.length
+	while (s < e-1) {
+		let i = Math.floor((s+e)/2)
+		if (code < scriptblocks[i]) {
+			e = i
+		} else {
+			s = i
+		}
+	}
+	return s
+}
+
+// formatText adds s to element e, in a way that makes switching unicode scripts
+// clear, with alternating DOM TextNode and span elements with a "switchscript"
+// class. Useful for highlighting look alikes, e.g. a (ascii 0x61) and а (cyrillic
+// 0x430).
+//
+// This is only called one string at a time, so the UI can still display strings
+// without highlighting switching scripts, by calling formatText on the parts.
+const formatText = (e: HTMLElement, s: string): void => {
+	// Handle some common cases quickly.
+	if (!s) {
+		return
+	}
+	let ascii = true
+	for (const c of s) {
+		const cp = c.codePointAt(0) // For typescript, to check for undefined.
+		if (cp !== undefined && cp >= 0x0080) {
+			ascii = false
+			break
+		}
+	}
+	if (ascii) {
+		e.appendChild(document.createTextNode(s))
+		return
+	}
+
+	// todo: handle grapheme clusters? wait for Intl.Segmenter?
+
+	let n = 0 // Number of text/span parts added.
+	let str = '' // Collected so far.
+	let block = -1 // Previous block/script.
+	let mod = 1
+	const put = (nextblock: number) => {
+		if (n === 0 && nextblock === 0) {
+			// Start was non-ascii, second block is ascii, we'll start marked as switched.
+			mod = 0
+		}
+		if (n % 2 === mod) {
+			const x = document.createElement('span')
+			x.classList.add('scriptswitch')
+			x.appendChild(document.createTextNode(str))
+			e.appendChild(x)
+		} else {
+			e.appendChild(document.createTextNode(str))
+		}
+		n++
+		str = ''
+	}
+	for (const c of s) {
+		// Basic whitespace does not switch blocks. Will probably need to extend with more
+		// punctuation in the future. Possibly for digits too. But perhaps not in all
+		// scripts.
+		if (c === ' ' || c === '\t' || c === '\r' || c === '\n') {
+			str += c
+			continue
+		}
+		const code: number = c.codePointAt(0) as number
+		if (block < 0 || !(code >= scriptblocks[block] && (code < scriptblocks[block+1] || block === scriptblocks.length-1))) {
+			const nextblock = code < 0x0080 ? 0 : findBlock(code)
+			if (block >= 0) {
+				put(nextblock)
+			}
+			block = nextblock
+		}
+		str += c
+	}
+	put(-1)
+}
+
+const _domKids = <T extends HTMLElement>(e: T, l: ElemArg[]): T => {
+	l.forEach((c) => {
+		const xc = c as {[k: string]: any}
+		if (typeof c === 'string') {
+			formatText(e, c)
+		} else if (c instanceof String) {
+			// String is an escape-hatch for text that should not be formatted with
+			// unicode-block-change-highlighting, e.g. for textarea values.
+			e.appendChild(document.createTextNode(''+c))
+		} else if (c instanceof Element) {
+			e.appendChild(c)
+		} else if (c instanceof Function) {
+			if (!c.name) {
+				throw new Error('function without name')
+			}
+			e.addEventListener(c.name as string, c as EventListener)
+		} else if (Array.isArray(xc)) {
+			_domKids(e, c as ElemArg[])
+		} else if (xc._class) {
+			for (const s of xc._class) {
+				e.classList.toggle(s, true)
+			}
+		} else if (xc._attrs) {
+			for (const k in xc._attrs) {
+				e.setAttribute(k, xc._attrs[k])
+			}
+		} else if (xc._styles) {
+			for (const k in xc._styles) {
+				const estyle: {[k: string]: any} = e.style
+				estyle[k as string] = xc._styles[k]
+			}
+		} else if (xc._props) {
+			for (const k in xc._props) {
+				const eprops: {[k: string]: any} = e
+				eprops[k] = xc._props[k]
+			}
+		} else if (xc.root) {
+			e.appendChild(xc.root)
+		} else {
+			console.log('bad kid', c)
+			throw new Error('bad kid')
+		}
+	})
+	return e
+}
+const dom = {
+	_kids: function(e: HTMLElement, ...kl: ElemArg[]) {
+		while(e.firstChild) {
+			e.removeChild(e.firstChild)
+		}
+		_domKids(e, kl)
+	},
+	_attrs: (x: {[k: string]: string}) => { return {_attrs: x}},
+	_class: (...x: string[]) => { return {_class: x}},
+	// The createElement calls are spelled out so typescript can derive function
+	// signatures with a specific HTML*Element return type.
+	div: (...l: ElemArg[]) => _domKids(document.createElement('div'), l),
+	span: (...l: ElemArg[]) => _domKids(document.createElement('span'), l),
+	a: (...l: ElemArg[]) => _domKids(document.createElement('a'), l),
+	input: (...l: ElemArg[]) => _domKids(document.createElement('input'), l),
+	textarea: (...l: ElemArg[]) => _domKids(document.createElement('textarea'), l),
+	select: (...l: ElemArg[]) => _domKids(document.createElement('select'), l),
+	option: (...l: ElemArg[]) => _domKids(document.createElement('option'), l),
+	clickbutton: (...l: ElemArg[]) => _domKids(document.createElement('button'), [attr.type('button'), ...l]),
+	submitbutton: (...l: ElemArg[]) => _domKids(document.createElement('button'), [attr.type('submit'), ...l]),
+	form: (...l: ElemArg[]) => _domKids(document.createElement('form'), l),
+	fieldset: (...l: ElemArg[]) => _domKids(document.createElement('fieldset'), l),
+	table: (...l: ElemArg[]) => _domKids(document.createElement('table'), l),
+	thead: (...l: ElemArg[]) => _domKids(document.createElement('thead'), l),
+	tbody: (...l: ElemArg[]) => _domKids(document.createElement('tbody'), l),
+	tfoot: (...l: ElemArg[]) => _domKids(document.createElement('tfoot'), l),
+	tr: (...l: ElemArg[]) => _domKids(document.createElement('tr'), l),
+	td: (...l: ElemArg[]) => _domKids(document.createElement('td'), l),
+	th: (...l: ElemArg[]) => _domKids(document.createElement('th'), l),
+	datalist: (...l: ElemArg[]) => _domKids(document.createElement('datalist'), l),
+	h1: (...l: ElemArg[]) => _domKids(document.createElement('h1'), l),
+	h2: (...l: ElemArg[]) => _domKids(document.createElement('h2'), l),
+	h3: (...l: ElemArg[]) => _domKids(document.createElement('h3'), l),
+	br: (...l: ElemArg[]) => _domKids(document.createElement('br'), l),
+	hr: (...l: ElemArg[]) => _domKids(document.createElement('hr'), l),
+	pre: (...l: ElemArg[]) => _domKids(document.createElement('pre'), l),
+	label: (...l: ElemArg[]) => _domKids(document.createElement('label'), l),
+	ul: (...l: ElemArg[]) => _domKids(document.createElement('ul'), l),
+	li: (...l: ElemArg[]) => _domKids(document.createElement('li'), l),
+	iframe: (...l: ElemArg[]) => _domKids(document.createElement('iframe'), l),
+	b: (...l: ElemArg[]) => _domKids(document.createElement('b'), l),
+	img: (...l: ElemArg[]) => _domKids(document.createElement('img'), l),
+	style: (...l: ElemArg[]) => _domKids(document.createElement('style'), l),
+	search: (...l: ElemArg[]) => _domKids(document.createElement('search'), l),
+	p: (...l: ElemArg[]) => _domKids(document.createElement('p'), l),
+}
+const _attr = (k: string, v: string) => { const o: {[key: string]: string} = {}; o[k] = v; return {_attrs: o} }
+const attr = {
+	title: (s: string) => _attr('title', s),
+	value: (s: string) => _attr('value', s),
+	type: (s: string) => _attr('type', s),
+	tabindex: (s: string) => _attr('tabindex', s),
+	src: (s: string) => _attr('src', s),
+	placeholder: (s: string) => _attr('placeholder', s),
+	href: (s: string) => _attr('href', s),
+	checked: (s: string) => _attr('checked', s),
+	selected: (s: string) => _attr('selected', s),
+	id: (s: string) => _attr('id', s),
+	datalist: (s: string) => _attr('datalist', s),
+	rows: (s: string) => _attr('rows', s),
+	target: (s: string) => _attr('target', s),
+	rel: (s: string) => _attr('rel', s),
+	required: (s: string) => _attr('required', s),
+	multiple: (s: string) => _attr('multiple', s),
+	download: (s: string) => _attr('download', s),
+	disabled: (s: string) => _attr('disabled', s),
+	draggable: (s: string) => _attr('draggable', s),
+	rowspan: (s: string) => _attr('rowspan', s),
+	colspan: (s: string) => _attr('colspan', s),
+	for: (s: string) => _attr('for', s),
+	role: (s: string) => _attr('role', s),
+	arialabel: (s: string) => _attr('aria-label', s),
+	arialive: (s: string) => _attr('aria-live', s),
+	name: (s: string) => _attr('name', s),
+	min: (s: string) => _attr('min', s),
+	max: (s: string) => _attr('max', s),
+}
+const style = (x: {[k: string]: string | number}) => { return {_styles: x}}
+const prop = (x: {[k: string]: any}) => { return {_props: x}}
+return [dom, style, attr, prop]
+})()

main.go

@@ -2599,12 +2599,12 @@ The report is printed in formatted JSON.
 	for _, arg := range args {
 		f, err := os.Open(arg)
 		xcheckf(err, "open %q", arg)
-		report, err := tlsrpt.ParseMessage(c.log.Logger, f)
+		reportJSON, err := tlsrpt.ParseMessage(c.log.Logger, f)
 		xcheckf(err, "parse report in %q", arg)
 		// todo future: only print the highlights?
 		enc := json.NewEncoder(os.Stdout)
 		enc.SetIndent("", "\t")
-		err = enc.Encode(report)
+		err = enc.Encode(reportJSON)
 		xcheckf(err, "write report")
 	}
 }
@@ -2754,11 +2754,12 @@ func cmdTLSRPTDBAddReport(c *cmd) {
 	from := part.Envelope.From[0]
 	domain := xparseDomain(from.Host, "domain")
 
-	report, err := tlsrpt.ParseMessage(c.log.Logger, bytes.NewReader(buf))
+	reportJSON, err := tlsrpt.ParseMessage(c.log.Logger, bytes.NewReader(buf))
 	xcheckf(err, "parsing tls report in message")
 
 	mailfrom := from.User + "@" + from.Host // todo future: should escape and such
-	err = tlsrptdb.AddReport(context.Background(), c.log, domain, mailfrom, hostReport, report)
+	report := reportJSON.Convert()
+	err = tlsrptdb.AddReport(context.Background(), c.log, domain, mailfrom, hostReport, &report)
 	xcheckf(err, "add tls report to database")
 }
 

mox-/webappfile.go

@@ -0,0 +1,208 @@
+package mox
+
+import (
+	"bytes"
+	"compress/gzip"
+	"context"
+	"errors"
+	"fmt"
+	"io"
+	"net/http"
+	"os"
+	"strings"
+	"sync"
+	"time"
+
+	"golang.org/x/exp/slog"
+
+	"github.com/mjl-/mox/mlog"
+	"github.com/mjl-/mox/moxvar"
+)
+
+// WebappFile serves a merged HTML and JS webapp as a single compressed, cacheable
+// file. It merges the JS into the HTML at first load, caches a gzipped version
+// that is generated on first need, and responds with a Last-Modified header.
+type WebappFile struct {
+	HTML, JS         []byte // Embedded html/js data.
+	HTMLPath, JSPath string // Paths to load html/js from during development.
+
+	sync.Mutex
+	combined     []byte
+	combinedGzip []byte
+	mtime        time.Time // For Last-Modified and conditional request.
+}
+
+// FallbackMtime returns a time to use for the Last-Modified header in case we
+// cannot find a file, e.g. when used in production.
+func FallbackMtime(log mlog.Log) time.Time {
+	p, err := os.Executable()
+	log.Check(err, "finding executable for mtime")
+	if err == nil {
+		st, err := os.Stat(p)
+		log.Check(err, "stat on executable for mtime")
+		if err == nil {
+			return st.ModTime()
+		}
+	}
+	log.Info("cannot find executable for webappfile mtime, using current time")
+	return time.Now()
+}
+
+func (a *WebappFile) serverError(log mlog.Log, w http.ResponseWriter, err error, action string) {
+	log.Errorx("serve webappfile", err, slog.String("msg", action))
+	http.Error(w, "500 - internal server error", http.StatusInternalServerError)
+}
+
+// Serve serves a combined file, with headers for caching and possibly gzipped.
+func (a *WebappFile) Serve(ctx context.Context, log mlog.Log, w http.ResponseWriter, r *http.Request) {
+	// We typically return the embedded file, but during development it's handy
+	// to load from disk.
+	fhtml, _ := os.Open(a.HTMLPath)
+	if fhtml != nil {
+		defer fhtml.Close()
+	}
+	fjs, _ := os.Open(a.JSPath)
+	if fjs != nil {
+		defer fjs.Close()
+	}
+
+	html := a.HTML
+	js := a.JS
+
+	var diskmtime time.Time
+	var refreshdisk bool
+	if fhtml != nil && fjs != nil {
+		sth, err := fhtml.Stat()
+		if err != nil {
+			a.serverError(log, w, err, "stat html")
+			return
+		}
+		stj, err := fjs.Stat()
+		if err != nil {
+			a.serverError(log, w, err, "stat js")
+			return
+		}
+
+		maxmtime := sth.ModTime()
+		if stj.ModTime().After(maxmtime) {
+			maxmtime = stj.ModTime()
+		}
+
+		a.Lock()
+		refreshdisk = maxmtime.After(a.mtime) || a.combined == nil
+		a.Unlock()
+
+		if refreshdisk {
+			html, err = io.ReadAll(fhtml)
+			if err != nil {
+				a.serverError(log, w, err, "reading html")
+				return
+			}
+			js, err = io.ReadAll(fjs)
+			if err != nil {
+				a.serverError(log, w, err, "reading js")
+				return
+			}
+			diskmtime = maxmtime
+		}
+	}
+
+	gz := AcceptsGzip(r)
+	var out []byte
+	var mtime time.Time
+	var origSize int64
+
+	func() {
+		a.Lock()
+		defer a.Unlock()
+
+		if refreshdisk || a.combined == nil {
+			script := []byte(`<script>/* placeholder */</script>`)
+			index := bytes.Index(html, script)
+			if index < 0 {
+				a.serverError(log, w, errors.New("script not found"), "generating combined html")
+				return
+			}
+			var b bytes.Buffer
+			b.Write(html[:index])
+			fmt.Fprintf(&b, "<script>\n// Javascript is generated from typescript, don't modify the javascript because changes will be lost.\nconst moxversion = \"%s\";\n", moxvar.Version)
+			b.Write(js)
+			b.WriteString("\t\t</script>")
+			b.Write(html[index+len(script):])
+			out = b.Bytes()
+			a.combined = out
+			if refreshdisk {
+				a.mtime = diskmtime
+			} else {
+				a.mtime = FallbackMtime(log)
+			}
+			a.combinedGzip = nil
+		} else {
+			out = a.combined
+		}
+		if gz {
+			if a.combinedGzip == nil {
+				var b bytes.Buffer
+				gzw, err := gzip.NewWriterLevel(&b, gzip.BestCompression)
+				if err == nil {
+					_, err = gzw.Write(out)
+				}
+				if err == nil {
+					err = gzw.Close()
+				}
+				if err != nil {
+					a.serverError(log, w, err, "gzipping combined html")
+					return
+				}
+				a.combinedGzip = b.Bytes()
+			}
+			origSize = int64(len(out))
+			out = a.combinedGzip
+		}
+		mtime = a.mtime
+	}()
+
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	http.ServeContent(gzipInjector{w, gz, origSize}, r, "", mtime, bytes.NewReader(out))
+}
+
+// gzipInjector is a http.ResponseWriter that optionally injects a
+// Content-Encoding: gzip header, only in case of status 200 OK. Used with
+// http.ServeContent to serve gzipped content if the client supports it. We cannot
+// just unconditionally add the content-encoding header, because we don't know
+// enough if we will be sending data: http.ServeContent may be sending a "not
+// modified" response, and possibly others.
+type gzipInjector struct {
+	http.ResponseWriter // Keep most methods.
+	gz                  bool
+	origSize            int64
+}
+
+// WriteHeader adds a Content-Encoding: gzip header before actually writing the
+// headers and status.
+func (w gzipInjector) WriteHeader(statusCode int) {
+	if w.gz && statusCode == http.StatusOK {
+		w.ResponseWriter.Header().Set("Content-Encoding", "gzip")
+		if lw, ok := w.ResponseWriter.(interface{ SetUncompressedSize(int64) }); ok {
+			lw.SetUncompressedSize(w.origSize)
+		}
+	}
+	w.ResponseWriter.WriteHeader(statusCode)
+}
+
+// AcceptsGzip returns whether the client accepts gzipped responses.
+func AcceptsGzip(r *http.Request) bool {
+	s := r.Header.Get("Accept-Encoding")
+	t := strings.Split(s, ",")
+	for _, e := range t {
+		e = strings.TrimSpace(e)
+		tt := strings.Split(e, ";")
+		if len(tt) > 1 && t[1] == "q=0" {
+			continue
+		}
+		if tt[0] == "gzip" {
+			return true
+		}
+	}
+	return false
+}

package-lock.json

@@ -5,294 +5,9 @@
   "packages": {
     "": {
       "devDependencies": {
-        "jshint": "2.13.6",
         "typescript": "5.1.6"
       }
     },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/cli": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cli/-/cli-1.0.1.tgz",
-      "integrity": "sha512-41U72MB56TfUMGndAKK8vJ78eooOD4Z5NOL4xEfjc0c23s+6EYKXlXsmACBVclLP1yOfWCgEganVzddVrSNoTg==",
-      "dev": true,
-      "dependencies": {
-        "exit": "0.1.2",
-        "glob": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=0.2.5"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
-    },
-    "node_modules/console-browserify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.1.0.tgz",
-      "integrity": "sha512-duS7VP5pvfsNLDvL1O4VOEbw37AI3A4ZUQYemvDlnpGrNu9tprR7BYWpDYwC0Xia0Zxz5ZupdiIrUp0GH1aXfg==",
-      "dev": true,
-      "dependencies": {
-        "date-now": "^0.1.4"
-      }
-    },
-    "node_modules/core-util-is": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
-      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
-      "dev": true
-    },
-    "node_modules/date-now": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
-      "integrity": "sha512-AsElvov3LoNB7tf5k37H2jYSB+ZZPMT5sG2QjJCcdlV5chIv6htBUBUui2IKRjgtKAKtCBN7Zbwa+MtwLjSeNw==",
-      "dev": true
-    },
-    "node_modules/dom-serializer": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "entities": "^2.0.0"
-      }
-    },
-    "node_modules/dom-serializer/node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/dom-serializer/node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-      "dev": true
-    },
-    "node_modules/domhandler": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz",
-      "integrity": "sha512-q9bUwjfp7Eif8jWxxxPSykdRZAb6GkguBGSgvvCrhI9wB71W2K/Kvv4E61CF/mcCfnVJDeDWx/Vb/uAqbDj6UQ==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-      "integrity": "sha512-gSu5Oi/I+3wDENBsOWBiRK1eoGxcywYSqg3rR960/+EfY0CF4EX1VPkgHOZ3WiS/Jg2DtliF6BhWcHlfpYUcGw==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "0",
-        "domelementtype": "1"
-      }
-    },
-    "node_modules/entities": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.0.0.tgz",
-      "integrity": "sha512-LbLqfXgJMmy81t+7c14mnulFHJ170cM6E+0vMXR9k/ZiZwgX8i5pNgjTCX3SO4VeUsFLV+8InixoretwU+MjBQ==",
-      "dev": true
-    },
-    "node_modules/exit": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
-    },
-    "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/htmlparser2": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.8.3.tgz",
-      "integrity": "sha512-hBxEg3CYXe+rPIua8ETe7tmG3XDn9B0edOE/e9wH2nLczxzgdu0m0aNHY+5wFZiviLWLdANPJTssa92dMcXQ5Q==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "1",
-        "domhandler": "2.3",
-        "domutils": "1.5",
-        "entities": "1.0",
-        "readable-stream": "1.1"
-      }
-    },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
-    },
-    "node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
-      "dev": true
-    },
-    "node_modules/jshint": {
-      "version": "2.13.6",
-      "resolved": "https://registry.npmjs.org/jshint/-/jshint-2.13.6.tgz",
-      "integrity": "sha512-IVdB4G0NTTeQZrBoM8C5JFVLjV2KtZ9APgybDA1MK73xb09qFs0jCXyQLnCOp1cSZZZbvhq/6mfXHUTaDkffuQ==",
-      "dev": true,
-      "dependencies": {
-        "cli": "~1.0.0",
-        "console-browserify": "1.1.x",
-        "exit": "0.1.x",
-        "htmlparser2": "3.8.x",
-        "lodash": "~4.17.21",
-        "minimatch": "~3.0.2",
-        "strip-json-comments": "1.0.x"
-      },
-      "bin": {
-        "jshint": "bin/jshint"
-      }
-    },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
-    "node_modules/minimatch": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
-      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/readable-stream": {
-      "version": "1.1.14",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
-      "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.1",
-        "isarray": "0.0.1",
-        "string_decoder": "~0.10.x"
-      }
-    },
-    "node_modules/string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
-      "dev": true
-    },
-    "node_modules/strip-json-comments": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
-      "integrity": "sha512-AOPG8EBc5wAikaG1/7uFCNFJwnKOuQwFTpYBdTW6OvWHeZBQBrAA/amefHGrEiOnCPcLFZK6FUPtWVKpQVIRgg==",
-      "dev": true,
-      "bin": {
-        "strip-json-comments": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/typescript": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
@@ -305,12 +20,6 @@
       "engines": {
         "node": ">=14.17"
       }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
     }
   }
 }

package.json

@@ -1,6 +1,5 @@
 {
   "devDependencies": {
-    "jshint": "2.13.6",
     "typescript": "5.1.6"
   }
 }

smtpserver/analyze.go

@@ -257,12 +257,12 @@ func analyze(ctx context.Context, log mlog.Log, resolver dns.Resolver, d deliver
 		if !ok {
 			log.Info("received mail to tlsrpt without acceptable DKIM signature, not processing as tls report")
 			headers += "X-Mox-TLSReport-Error: no acceptable DKIM signature\r\n"
-		} else if report, err := tlsrpt.ParseMessage(log.Logger, store.FileMsgReader(d.m.MsgPrefix, d.dataFile)); err != nil {
+		} else if reportJSON, err := tlsrpt.ParseMessage(log.Logger, store.FileMsgReader(d.m.MsgPrefix, d.dataFile)); err != nil {
 			log.Infox("parsing tls report", err)
 			headers += "X-Mox-TLSReport-Error: could not parse TLS report\r\n"
 		} else {
 			var known bool
-			for _, p := range report.Policies {
+			for _, p := range reportJSON.Policies {
 				log.Info("tlsrpt policy domain", slog.String("domain", p.Policy.Domain))
 				if d, err := dns.ParseDomain(p.Policy.Domain); err != nil {
 					log.Infox("parsing domain in tls report", err)
@@ -275,7 +275,8 @@ func analyze(ctx context.Context, log mlog.Log, resolver dns.Resolver, d deliver
 				log.Info("tls report without one of configured domains, ignoring")
 				headers += "X-Mox-TLSReport-Error: report for unknown domain\r\n"
 			} else {
-				tlsReport = report
+				report := reportJSON.Convert()
+				tlsReport = &report
 			}
 		}
 	}

tlsrpt/examples_test.go

@@ -59,10 +59,10 @@ hg9Oqa4bc7N46W67vwF2Eq+hDAYAAA==
 	msg = strings.ReplaceAll(msg, "\n", "\r\n")
 
 	// Parse the email message, and the TLSRPT report within.
-	report, err := tlsrpt.ParseMessage(slog.Default(), strings.NewReader(msg))
+	reportJSON, err := tlsrpt.ParseMessage(slog.Default(), strings.NewReader(msg))
 	if err != nil {
 		log.Fatalf("parsing tlsrpt report in message: %v", err)
 	}
 
-	log.Printf("report: %#v", report)
+	log.Printf("report: %#v", reportJSON)
 }

tlsrpt/report.go

@@ -31,13 +31,41 @@ var ErrNoReport = errors.New("no tlsrpt report found")
 
 // ../rfc/8460:628
 
-// Report is a TLSRPT report, transmitted in JSON format.
+// Report is a TLSRPT report.
 type Report struct {
+	OrganizationName string
+	DateRange        TLSRPTDateRange
+	ContactInfo      string
+	ReportID         string
+	Policies         []Result
+}
+
+// ReportJSON is a TLS report with field names as used in the specification. These field names are inconvenient to use in JavaScript, so after parsing a ReportJSON is turned into a Report.
+type ReportJSON struct {
 	OrganizationName string              `json:"organization-name"`
-	DateRange        TLSRPTDateRange `json:"date-range"`
+	DateRange        TLSRPTDateRangeJSON `json:"date-range"`
 	ContactInfo      string              `json:"contact-info"` // Email address.
 	ReportID         string              `json:"report-id"`
-	Policies         []Result        `json:"policies"`
+	Policies         []ResultJSON        `json:"policies"`
+}
+
+func convertSlice[T interface{ Convert() S }, S any](l []T) []S {
+	if l == nil {
+		return nil
+	}
+	r := make([]S, len(l))
+	for i, e := range l {
+		r[i] = e.Convert()
+	}
+	return r
+}
+
+func (v Report) Convert() ReportJSON {
+	return ReportJSON{v.OrganizationName, v.DateRange.Convert(), v.ContactInfo, v.ReportID, convertSlice[Result, ResultJSON](v.Policies)}
+}
+
+func (v ReportJSON) Convert() Report {
+	return Report{v.OrganizationName, v.DateRange.Convert(), v.ContactInfo, v.ReportID, convertSlice[ResultJSON, Result](v.Policies)}
 }
 
 // Merge combines the counts and failure details of results into the report.
@@ -124,14 +152,27 @@ func MakeResult(policyType PolicyType, domain dns.Domain, fds ...FailureDetails)
 
 // note: with TLSRPT prefix to prevent clash in sherpadoc types.
 type TLSRPTDateRange struct {
+	Start time.Time
+	End   time.Time
+}
+
+func (v TLSRPTDateRange) Convert() TLSRPTDateRangeJSON {
+	return TLSRPTDateRangeJSON(v)
+}
+
+type TLSRPTDateRangeJSON struct {
 	Start time.Time `json:"start-datetime"`
 	End   time.Time `json:"end-datetime"`
 }
 
+func (v TLSRPTDateRangeJSON) Convert() TLSRPTDateRange {
+	return TLSRPTDateRange(v)
+}
+
 // UnmarshalJSON is defined on the date range, not the individual time.Time fields
 // because it is easier to keep the unmodified time.Time fields stored in the
 // database.
-func (dr *TLSRPTDateRange) UnmarshalJSON(buf []byte) error {
+func (dr *TLSRPTDateRangeJSON) UnmarshalJSON(buf []byte) error {
 	var v struct {
 		Start xtime `json:"start-datetime"`
 		End   xtime `json:"end-datetime"`
@@ -170,14 +211,35 @@ func (x *xtime) UnmarshalJSON(buf []byte) error {
 }
 
 type Result struct {
-	Policy         ResultPolicy     `json:"policy"`
-	Summary        Summary          `json:"summary"`
-	FailureDetails []FailureDetails `json:"failure-details"`
+	Policy         ResultPolicy
+	Summary        Summary
+	FailureDetails []FailureDetails
+}
+
+func (r Result) Convert() ResultJSON {
+	return ResultJSON{ResultPolicyJSON(r.Policy), SummaryJSON(r.Summary), convertSlice[FailureDetails, FailureDetailsJSON](r.FailureDetails)}
+}
+
+type ResultJSON struct {
+	Policy         ResultPolicyJSON     `json:"policy"`
+	Summary        SummaryJSON          `json:"summary"`
+	FailureDetails []FailureDetailsJSON `json:"failure-details"`
+}
+
+func (r ResultJSON) Convert() Result {
+	return Result{ResultPolicy(r.Policy), Summary(r.Summary), convertSlice[FailureDetailsJSON, FailureDetails](r.FailureDetails)}
 }
 
 // todo spec: ../rfc/8460:437 says policy is a string, with rules for turning dane records into a single string. perhaps a remnant of an earlier version (for mtasts a single string would have made more sense). i doubt the intention is to always have a single element in policy-string (though the field name is singular).
 
 type ResultPolicy struct {
+	Type   PolicyType
+	String []string
+	Domain string
+	MXHost []string
+}
+
+type ResultPolicyJSON struct {
 	Type   PolicyType `json:"policy-type"`
 	String []string   `json:"policy-string"`
 	Domain string     `json:"policy-domain"`
@@ -205,6 +267,11 @@ func (rp ResultPolicy) equal(orp ResultPolicy) bool {
 }
 
 type Summary struct {
+	TotalSuccessfulSessionCount int64
+	TotalFailureSessionCount    int64
+}
+
+type SummaryJSON struct {
 	TotalSuccessfulSessionCount int64 `json:"total-successful-session-count"`
 	TotalFailureSessionCount    int64 `json:"total-failure-session-count"`
 }
@@ -232,6 +299,19 @@ const (
 // todo spec: ../rfc/8460:719 more of these fields should be optional. some sts failure details, like failed policy fetches, won't have an ip or mx, the failure happens earlier in the delivery process.
 
 type FailureDetails struct {
+	ResultType            ResultType
+	SendingMTAIP          string
+	ReceivingMXHostname   string
+	ReceivingMXHelo       string
+	ReceivingIP           string
+	FailedSessionCount    int64
+	AdditionalInformation string
+	FailureReasonCode     string
+}
+
+func (v FailureDetails) Convert() FailureDetailsJSON { return FailureDetailsJSON(v) }
+
+type FailureDetailsJSON struct {
 	ResultType            ResultType `json:"result-type"`
 	SendingMTAIP          string     `json:"sending-mta-ip"`
 	ReceivingMXHostname   string     `json:"receiving-mx-hostname"`
@@ -242,6 +322,8 @@ type FailureDetails struct {
 	FailureReasonCode     string     `json:"failure-reason-code"`
 }
 
+func (v FailureDetailsJSON) Convert() FailureDetails { return FailureDetails(v) }
+
 // equalKey returns whether FailureDetails have the same values, expect for
 // FailedSessionCount. Useful for aggregating FailureDetails.
 func (fd FailureDetails) equalKey(ofd FailureDetails) bool {
@@ -356,9 +438,9 @@ func TLSFailureDetails(err error) (ResultType, string) {
 
 // Parse parses a Report.
 // The maximum size is 20MB.
-func Parse(r io.Reader) (*Report, error) {
+func Parse(r io.Reader) (*ReportJSON, error) {
 	r = &moxio.LimitReader{R: r, Limit: 20 * 1024 * 1024}
-	var report Report
+	var report ReportJSON
 	if err := json.NewDecoder(r).Decode(&report); err != nil {
 		return nil, err
 	}
@@ -369,7 +451,7 @@ func Parse(r io.Reader) (*Report, error) {
 // ParseMessage parses a Report from a mail message.
 // The maximum size of the message is 15MB, the maximum size of the
 // decompressed report is 20MB.
-func ParseMessage(elog *slog.Logger, r io.ReaderAt) (*Report, error) {
+func ParseMessage(elog *slog.Logger, r io.ReaderAt) (*ReportJSON, error) {
 	log := mlog.New("tlsrpt", elog)
 
 	// ../rfc/8460:905
@@ -384,7 +466,7 @@ func ParseMessage(elog *slog.Logger, r io.ReaderAt) (*Report, error) {
 	return parseMessageReport(log, p, allow)
 }
 
-func parseMessageReport(log mlog.Log, p message.Part, allow bool) (*Report, error) {
+func parseMessageReport(log mlog.Log, p message.Part, allow bool) (*ReportJSON, error) {
 	if p.MediaType != "MULTIPART" {
 		if !allow {
 			return nil, ErrNoReport
@@ -412,7 +494,7 @@ func parseMessageReport(log mlog.Log, p message.Part, allow bool) (*Report, erro
 	}
 }
 
-func parseReport(p message.Part) (*Report, error) {
+func parseReport(p message.Part) (*ReportJSON, error) {
 	mt := strings.ToLower(p.MediaType + "/" + p.MediaSubType)
 	switch mt {
 	case "application/tlsrpt+json":

tlsrpt/report_test.go

@@ -115,7 +115,7 @@ Content-Disposition: attachment;
 func TestReport(t *testing.T) {
 	// ../rfc/8460:1756
 
-	var report Report
+	var report ReportJSON
 	dec := json.NewDecoder(strings.NewReader(reportJSON))
 	dec.DisallowUnknownFields()
 	if err := dec.Decode(&report); err != nil {

tlsrptdb/report_test.go

@@ -91,20 +91,23 @@ func TestReport(t *testing.T) {
 		if err != nil {
 			t.Fatalf("open %q: %s", file, err)
 		}
-		report, err := tlsrpt.ParseMessage(pkglog.Logger, f)
+		reportJSON, err := tlsrpt.ParseMessage(pkglog.Logger, f)
 		f.Close()
 		if err != nil {
 			t.Fatalf("parsing TLSRPT from message %q: %s", file.Name(), err)
 		}
-		if err := AddReport(ctxbg, pkglog, dns.Domain{ASCII: "mox.example"}, "tlsrpt@mox.example", false, report); err != nil {
+		report := reportJSON.Convert()
+		if err := AddReport(ctxbg, pkglog, dns.Domain{ASCII: "mox.example"}, "tlsrpt@mox.example", false, &report); err != nil {
 			t.Fatalf("adding report to database: %s", err)
 		}
 	}
 
-	report, err := tlsrpt.Parse(strings.NewReader(reportJSON))
+	reportJSON, err := tlsrpt.Parse(strings.NewReader(reportJSON))
 	if err != nil {
 		t.Fatalf("parsing report: %v", err)
-	} else if err := AddReport(ctxbg, pkglog, dns.Domain{ASCII: "company-y.example"}, "tlsrpt@company-y.example", false, report); err != nil {
+	}
+	report := reportJSON.Convert()
+	if err := AddReport(ctxbg, pkglog, dns.Domain{ASCII: "company-y.example"}, "tlsrpt@company-y.example", false, &report); err != nil {
 		t.Fatalf("adding report to database: %s", err)
 	}
 
@@ -116,7 +119,7 @@ func TestReport(t *testing.T) {
 		if r.FromDomain != "company-y.example" {
 			continue
 		}
-		if !reflect.DeepEqual(&r.Report, report) {
+		if !reflect.DeepEqual(r.Report, report) {
 			t.Fatalf("report, got %#v, expected %#v", r.Report, report)
 		}
 		if _, err := RecordID(ctxbg, r.ID); err != nil {

tlsrptsend/send.go

@@ -486,7 +486,7 @@ func sendReportDomain(ctx context.Context, log mlog.Log, resolver dns.Resolver,
 	enc := json.NewEncoder(gzw)
 	enc.SetIndent("", "\t")
 	if err == nil {
-		err = enc.Encode(report)
+		err = enc.Encode(report.Convert())
 	}
 	if err == nil {
 		err = gzw.Close()

tlsrptsend/send_test.go

@@ -425,11 +425,11 @@ func TestSendReports(t *testing.T) {
 			err = os.WriteFile(p, append(append([]byte{}, qm.MsgPrefix...), buf...), 0600)
 			tcheckf(t, err, "write report message")
 
-			report, err := tlsrpt.ParseMessage(log.Logger, msgFile)
+			reportJSON, err := tlsrpt.ParseMessage(log.Logger, msgFile)
 			tcheckf(t, err, "parsing generated report message")
 
 			addr := qm.Recipient().String()
-			haveReports[addr] = append(haveReports[addr], *report)
+			haveReports[addr] = append(haveReports[addr], reportJSON.Convert())
 
 			return nil
 		}

tsc.sh

@@ -1,4 +1,5 @@
-#!/bin/sh
+#!/bin/bash
+set -euo pipefail
 
 # - todo: get tsc to not emit semicolons except for the handful cases where it is needed.
 # - todo: get tsc to directly print unix line numbers without --pretty (which seems unaware of termcap).
@@ -6,6 +7,6 @@
 
 out=$1
 shift
-./node_modules/.bin/tsc --pretty false --newLine lf --strict --allowUnreachableCode false --allowUnusedLabels false --noFallthroughCasesInSwitch true --noImplicitReturns true --noUnusedLocals true --noImplicitThis true --noUnusedParameters true --target es2021 --module none --outFile $out.spaces "$@" | sed -E 's/^([^\(]+)\(([0-9]+),([0-9]+)\):/\1:\2:\3: /'
+./node_modules/.bin/tsc --noEmitOnError true --pretty false --newLine lf --strict --allowUnreachableCode false --allowUnusedLabels false --noFallthroughCasesInSwitch true --noImplicitReturns true --noUnusedLocals true --noImplicitThis true --noUnusedParameters true --target es2022 --module none --outFile $out.spaces "$@" | sed -E 's/^([^\(]+)\(([0-9]+),([0-9]+)\):/\1:\2:\3: /'
 unexpand -t4 <$out.spaces >$out
 rm $out.spaces

webaccount/account.go

@@ -15,6 +15,7 @@ import (
 	"net"
 	"net/http"
 	"os"
+	"path/filepath"
 	"strings"
 	"time"
 
@@ -41,12 +42,22 @@ func init() {
 
 var pkglog = mlog.New("webaccount", nil)
 
-//go:embed accountapi.json
+//go:embed api.json
 var accountapiJSON []byte
 
 //go:embed account.html
 var accountHTML []byte
 
+//go:embed account.js
+var accountJS []byte
+
+var webaccountFile = &mox.WebappFile{
+	HTML:     accountHTML,
+	JS:       accountJS,
+	HTMLPath: filepath.FromSlash("webaccount/account.html"),
+	JSPath:   filepath.FromSlash("webaccount/account.js"),
+}
+
 var accountDoc = mustParseAPI("account", accountapiJSON)
 
 var accountSherpaHandler http.Handler
@@ -225,21 +236,15 @@ func Handle(w http.ResponseWriter, r *http.Request) {
 
 	switch r.URL.Path {
 	case "/":
-		if r.Method != "GET" {
-			http.Error(w, "405 - method not allowed - get required", http.StatusMethodNotAllowed)
+		switch r.Method {
+		default:
+			http.Error(w, "405 - method not allowed - use get", http.StatusMethodNotAllowed)
 			return
+		case "GET", "HEAD":
 		}
-		w.Header().Set("Content-Type", "text/html; charset=utf-8")
-		w.Header().Set("Cache-Control", "no-cache; max-age=0")
-		// We typically return the embedded admin.html, but during development it's handy
-		// to load from disk.
-		f, err := os.Open("webaccount/account.html")
-		if err == nil {
-			defer f.Close()
-			_, _ = io.Copy(w, f)
-		} else {
-			_, _ = w.Write(accountHTML)
-		}
+
+		webaccountFile.Serve(ctx, log, w, r)
+		return
 
 	case "/mail-export-maildir.tgz", "/mail-export-maildir.zip", "/mail-export-mbox.tgz", "/mail-export-mbox.zip":
 		maildir := strings.Contains(r.URL.Path, "maildir")
@@ -322,7 +327,7 @@ func Handle(w http.ResponseWriter, r *http.Request) {
 		tmpf = nil // importStart is now responsible for cleanup.
 
 		w.Header().Set("Content-Type", "application/json")
-		_ = json.NewEncoder(w).Encode(map[string]string{"ImportToken": token})
+		_ = json.NewEncoder(w).Encode(ImportProgress{Token: token})
 
 	default:
 		if strings.HasPrefix(r.URL.Path, "/api/") {
@@ -334,6 +339,12 @@ func Handle(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+// ImportProgress is returned after uploading a file to import.
+type ImportProgress struct {
+	// For fetching progress, or cancelling an import.
+	Token string
+}
+
 type ctxKey string
 
 var authCtxKey ctxKey = "account"
@@ -414,3 +425,8 @@ func (Account) ImportAbort(ctx context.Context, importToken string) error {
 	importers.Abort <- req
 	return <-req.Response
 }
+
+// Types exposes types not used in API method signatures, such as the import form upload.
+func (Account) Types() (importProgress ImportProgress) {
+	return
+}

webaccount/account.html

@@ -20,718 +20,15 @@ table > tbody > tr:nth-child(odd) { background-color: #f8f8f8; }
 p { margin-bottom: 1em; max-width: 50em; }
 [title] { text-decoration: underline; text-decoration-style: dotted; }
 fieldset { border: 0; }
+.scriptswitch { text-decoration: underline #dca053 2px; }
 #page { opacity: 1; animation: fadein 0.15s ease-in; }
 #page.loading { opacity: 0.1; animation: fadeout 1s ease-out; }
 @keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } }
 @keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0.1 } }
 		</style>
-		<script src="api/sherpa.js"></script>
-		<script>api._sherpa.baseurl = 'api/'</script>
 	</head>
 	<body>
-		<div id="page">Loading...</div>
-
-		<script>
-const [dom, style, attr, prop] = (function() {
-function _domKids(e, ...kl) {
-	kl.forEach(k => {
-		if (typeof k === 'string' || k instanceof String) {
-			e.appendChild(document.createTextNode(k))
-		} else if (k instanceof Node) {
-			e.appendChild(k)
-		} else if (Array.isArray(k)) {
-			_domKids(e, ...k)
-		} else if (typeof k === 'function') {
-			if (!k.name) {
-				throw new Error('function without name', k)
-			}
-			e.addEventListener(k.name, k)
-		} else if (typeof k === 'object' && k !== null) {
-			if (k.root) {
-				e.appendChild(k.root)
-				return
-			}
-			for (const key in k) {
-				const value = k[key]
-				if (key === '_prop') {
-					for (const prop in value) {
-						e[prop] = value[prop]
-					}
-				} else if (key === '_attr') {
-					for (const prop in value) {
-						e.setAttribute(prop, value[prop])
-					}
-				} else if (key === '_listen') {
-					e.addEventListener(...value)
-				} else {
-					e.style[key] = value
-				}
-			}
-		} else {
-			console.log('bad kid', k)
-			throw new Error('bad kid')
-		}
-	})
-}
-const _dom = (kind, ...kl) => {
-	const t = kind.split('.')
-	const e = document.createElement(t[0])
-	for (let i = 1; i < t.length; i++) {
-		e.classList.add(t[i])
-	}
-	_domKids(e, kl)
-	return e
-}
-_dom._kids = function(e, ...kl) {
-	while(e.firstChild) {
-		e.removeChild(e.firstChild)
-	}
-	_domKids(e, kl)
-}
-const dom = new Proxy(_dom, {
-	get: function(dom, prop) {
-		if (prop in dom) {
-			return dom[prop]
-		}
-		const fn = (...kl) => _dom(prop, kl)
-		dom[prop] = fn
-		return fn
-	},
-	apply: function(target, that, args) {
-		if (args.length === 1 && typeof args[0] === 'object' && !Array.isArray(args[0])) {
-			return {_attr: args[0]}
-		}
-		return _dom(...args)
-	},
-})
-const style = x => x
-const attr = x => { return {_attr: x} }
-const prop = x => { return {_prop: x} }
-return [dom, style, attr, prop]
-})()
-
-const link = (href, anchorOpt) => dom.a(attr({href: href, rel: 'noopener noreferrer'}), anchorOpt || href)
-
-const crumblink = (text, link) => dom.a(text, attr({href: link}))
-const crumbs = (...l) => [dom.h1(l.map((e, index) => index === 0 ? e : [' / ', e])), dom.br()]
-
-const footer = dom.div(
-	style({marginTop: '6ex', opacity: 0.75}),
-	link('https://github.com/mjl-/mox', 'mox'),
-	' ',
-	api._sherpa.version,
-)
-
-const domainName = d => {
-	return d.Unicode || d.ASCII
-}
-
-const domainString = d => {
-	if (d.Unicode) {
-		return d.Unicode+" ("+d.ASCII+")"
-	}
-	return d.ASCII
-}
-
-const box = (color, ...l) => [
-	dom.div(
-		style({
-			display: 'inline-block',
-			padding: '.25em .5em',
-			backgroundColor: color,
-			borderRadius: '3px',
-			margin: '.5ex 0',
-		}),
-		l,
-	),
-	dom.br(),
-]
-
-const green = '#1dea20'
-const yellow = '#ffe400'
-const red = '#ff7443'
-const blue = '#8bc8ff'
-
-const index = async () => {
-	const [accountFullName, domain, destinations] = await api.Account()
-
-	let fullNameForm, fullNameFieldset, fullName
-	let passwordForm, passwordFieldset, password1, password2, passwordHint
-
-	let importForm, importFieldset, mailboxFile, mailboxFileHint, mailboxPrefix, mailboxPrefixHint, importProgress, importAbortBox, importAbort
-
-	const importTrack = async (token) => {
-		const importConnection = dom.div('Waiting for updates...')
-		importProgress.appendChild(importConnection)
-
-		let countsTbody
-		let counts = {} // mailbox -> elem
-
-		let problems // element
-
-		await new Promise((resolve, reject) => {
-			const eventSource = new window.EventSource('importprogress?token=' + encodeURIComponent(token))
-			eventSource.addEventListener('open', function(e) {
-				console.log('eventsource open', {e})
-				dom._kids(importConnection, dom.div('Waiting for updates, connected...'))
-
-				dom._kids(importAbortBox,
-					importAbort=dom.button('Abort import', attr({title: 'If the import is not yet finished, it can be aborted and no messages will have been imported.'}), async function click(e) {
-						try {
-							await api.ImportAbort(token)
-						} catch (err) {
-							console.log({err})
-							window.alert('Error: ' + err.message)
-						}
-						// On success, the event source will get an aborted notification and shutdown the connection.
-					})
-				)
-			})
-			eventSource.addEventListener('error', function(e) {
-				console.log('eventsource error', {e})
-				dom._kids(importConnection, box(red, 'Connection error'))
-				reject({message: 'Connection error'})
-			})
-			eventSource.addEventListener('count', (e) => {
-				const data = JSON.parse(e.data) // {Mailbox: ..., Count: ...}
-				console.log('import count event', {e, data})
-				if (!countsTbody) {
-					importProgress.appendChild(
-						dom.div(
-							dom.br(),
-							dom.h3('Importing mailboxes and messages...'),
-							dom.table(
-								dom.thead(
-									dom.tr(dom.th('Mailbox'), dom.th('Messages')),
-								),
-								countsTbody=dom.tbody(),
-							),
-						)
-					)
-				}
-				let elem = counts[data.Mailbox]
-				if (!elem) {
-					countsTbody.appendChild(
-						dom.tr(
-							dom.td(data.Mailbox),
-							elem=dom.td(style({textAlign: 'right'}), ''+data.Count),
-						),
-					)
-					counts[data.Mailbox] = elem
-				}
-				dom._kids(elem, ''+data.Count)
-			})
-			eventSource.addEventListener('problem', (e) => {
-				const data = JSON.parse(e.data) // {Message: ...}
-				console.log('import problem event', {e, data})
-				if (!problems) {
-					importProgress.appendChild(
-						dom.div(
-							dom.br(),
-							dom.h3('Problems during import'),
-							problems=dom.div(),
-						),
-					)
-				}
-				problems.appendChild(dom.div(box(yellow, data.Message)))
-			})
-			eventSource.addEventListener('step', (e) => {
-				const data = JSON.parse(e.data) // {Title: ...}
-				console.log('import step event', {e, data})
-				importProgress.appendChild(dom.div(dom.br(), box(blue, 'Step: '+data.Title)))
-			})
-			eventSource.addEventListener('done', (e) => {
-				console.log('import done event', {e})
-				importProgress.appendChild(dom.div(dom.br(), box(blue, 'Import finished')))
-
-				eventSource.close()
-				dom._kids(importConnection)
-				dom._kids(importAbortBox)
-				window.sessionStorage.removeItem('ImportToken')
-
-				resolve()
-			})
-			eventSource.addEventListener('aborted', function(e) {
-				console.log('import aborted event', {e})
-
-				importProgress.appendChild(dom.div(dom.br(), box(red, 'Import aborted, no message imported')))
-
-				eventSource.close()
-				dom._kids(importConnection)
-				dom._kids(importAbortBox)
-				window.sessionStorage.removeItem('ImportToken')
-
-				reject({message: 'Import aborted'})
-			})
-		})
-	}
-
-	const page = document.getElementById('page')
-	dom._kids(page,
-		crumbs('Mox Account'),
-		dom.p('NOTE: Not all account settings can be configured through these pages yet. See the configuration file for more options.'),
-		dom.div(
-			'Default domain: ',
-			domain.ASCII ? domainString(domain) : '(none)',
-		),
-		dom.br(),
-
-		fullNameForm=dom.form(
-			fullNameFieldset=dom.fieldset(
-				dom.label(
-					style({display: 'inline-block'}),
-					'Full name',
-					dom.br(),
-					fullName=dom.input(attr({value: accountFullName, title: 'Name to use in From header when composing messages. Can be overridden per configured address.'})),
-
-				),
-				' ',
-				dom.button('Save'),
-			),
-			async function submit(e) {
-				e.preventDefault()
-				fullNameFieldset.disabled = true
-				try {
-					await api.AccountSaveFullName(fullName.value)
-					fullName.setAttribute('value', fullName.value)
-					fullNameForm.reset()
-					window.alert('Full name has been changed.')
-				} catch (err) {
-					console.log({err})
-					window.alert('Error: ' + err.message)
-				} finally {
-					fullNameFieldset.disabled = false
-				}
-			},
-		),
-		dom.br(),
-
-		dom.h2('Addresses'),
-		dom.ul(
-			Object.entries(destinations).sort().map(t =>
-				dom.li(
-					dom.a(t[0], attr({href: '#destinations/'+t[0]})),
-					t[0].startsWith('@') ? ' (catchall)' : [],
-				),
-			),
-		),
-		dom.br(),
-		dom.h2('Change password'),
-		passwordForm=dom.form(
-			passwordFieldset=dom.fieldset(
-				dom.label(
-					style({display: 'inline-block'}),
-					'New password',
-					dom.br(),
-					password1=dom.input(attr({type: 'password', required: ''}), function focus() {
-						passwordHint.style.display = ''
-					}),
-				),
-				' ',
-				dom.label(
-					style({display: 'inline-block'}),
-					'New password repeat',
-					dom.br(),
-					password2=dom.input(attr({type: 'password', required: ''})),
-				),
-				' ',
-				dom.button('Change password'),
-			),
-			passwordHint=dom.div(
-				style({display: 'none', marginTop: '.5ex'}),
-				dom.button('Generate random password', attr({type: 'button'}), function click(e) {
-					e.preventDefault()
-					let b = new Uint8Array(1)
-					let s = ''
-					const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*-_;:,<.>/'
-					while (s.length < 12) {
-						self.crypto.getRandomValues(b)
-						if (Math.ceil(b[0]/chars.length)*chars.length > 255) {
-							continue // Prevent bias.
-						}
-						s += chars[b[0]%chars.length]
-					}
-					password1.type = 'text'
-					password2.type = 'text'
-					password1.value = s
-					password2.value = s
-				}),
-				dom('div.text',
-					box(yellow, 'Important: Bots will try to bruteforce your password. Connections with failed authentication attempts will be rate limited but attackers WILL find weak passwords. If your account is compromised, spammers are likely to abuse your system, spamming your address and the wider internet in your name. So please pick a random, unguessable password, preferrably at least 12 characters.'),
-				),
-			),
-			async function submit(e) {
-				e.stopPropagation()
-				e.preventDefault()
-				if (!password1.value || password1.value !== password2.value) {
-					window.alert('Passwords do not match.')
-					return
-				}
-				passwordFieldset.disabled = true
-				try {
-					await api.SetPassword(password1.value)
-					window.alert('Password has been changed.')
-					passwordForm.reset()
-				} catch (err) {
-					console.log({err})
-					window.alert('Error: ' + err.message)
-				} finally {
-					passwordFieldset.disabled = false
-				}
-			},
-		),
-		dom.br(),
-		dom.h2('Export'),
-		dom.p('Export all messages in all mailboxes. In maildir or mbox format, as .zip or .tgz file.'),
-		dom.ul(
-			dom.li(dom.a('mail-export-maildir.tgz', attr({href: 'mail-export-maildir.tgz'}))),
-			dom.li(dom.a('mail-export-maildir.zip', attr({href: 'mail-export-maildir.zip'}))),
-			dom.li(dom.a('mail-export-mbox.tgz', attr({href: 'mail-export-mbox.tgz'}))),
-			dom.li(dom.a('mail-export-mbox.zip', attr({href: 'mail-export-mbox.zip'}))),
-		),
-		dom.br(),
-		dom.h2('Import'),
-		dom.p('Import messages from a .zip or .tgz file with maildirs and/or mbox files.'),
-		importForm=dom.form(
-			async function submit(e) {
-				e.preventDefault()
-				e.stopPropagation()
-
-				const request = () => {
-					return new Promise((resolve, reject) => {
-						// Browsers can do everything. Except show a progress bar while uploading...
-						let progressBox, progressPercentage, progressBar
-						dom._kids(importProgress,
-							progressBox=dom.div(
-								dom.div('Uploading... ', progressPercentage=dom.span()),
-							),
-						)
-						importProgress.style.display = ''
-
-						const xhr = new window.XMLHttpRequest()
-						xhr.open('POST', 'import', true)
-						xhr.upload.addEventListener('progress', (e) => {
-							if (!e.lengthComputable) {
-								return
-							}
-							const pct = Math.floor(100*e.loaded/e.total)
-							dom._kids(progressPercentage, pct+'%')
-						})
-						xhr.addEventListener('load', () => {
-							console.log('upload done', {xhr: xhr, status: xhr.status})
-							if (xhr.status !== 200) {
-								reject({message: 'status '+xhr.status})
-								return
-							}
-							let resp
-							try {
-								resp = JSON.parse(xhr.responseText)
-							} catch (err) {
-								reject({message: 'parsing resonse json: '+err.message})
-								return
-							}
-							resolve(resp)
-						})
-						xhr.addEventListener('error', (e) => reject({message: 'upload error', event: e}))
-						xhr.addEventListener('abort', (e) => reject({message: 'upload aborted', event: e}))
-						xhr.send(new window.FormData(importForm))
-					})
-				}
-				try {
-					const p = request()
-					importFieldset.disabled = true
-					const result = await p
-
-					try {
-						window.sessionStorage.setItem('ImportToken', result.ImportToken)
-					} catch (err) {
-						console.log('storing import token in session storage', {err})
-						// Ignore error, could be some browser security thing like private browsing.
-					}
-
-					await importTrack(result.ImportToken)
-				} catch (err) {
-					console.log({err})
-					window.alert('Error: '+err.message)
-				} finally {
-					importFieldset.disabled = false
-				}
-			},
-			importFieldset=dom.fieldset(
-				dom.div(
-					style({marginBottom: '1ex'}),
-					dom.label(
-						dom.div(style({marginBottom: '.5ex'}), 'File'),
-						mailboxFile=dom.input(attr({type: 'file', required: '', name: 'file'}), function focus() {
-							mailboxFileHint.style.display = ''
-						}),
-					),
-					mailboxFileHint=dom.p(style({display: 'none', fontStyle: 'italic', marginTop: '.5ex'}), 'This file must either be a zip file or a gzipped tar file with mbox and/or maildir mailboxes. For maildirs, an optional file "dovecot-keywords" is read additional keywords, like Forwarded/Junk/NotJunk. If an imported mailbox already exists by name, messages are added to the existing mailbox. If a mailbox does not yet exist it will be created.'),
-				),
-				dom.div(
-					style({marginBottom: '1ex'}),
-					dom.label(
-						dom.div(style({marginBottom: '.5ex'}), 'Skip mailbox prefix (optional)'),
-						mailboxPrefix=dom.input(attr({name: 'skipMailboxPrefix'}), function focus() {
-							mailboxPrefixHint.style.display = ''
-						}),
-					),
-					mailboxPrefixHint=dom.p(style({display: 'none', fontStyle: 'italic', marginTop: '.5ex'}), 'If set, any mbox/maildir path with this prefix will have it stripped before importing. For example, if all mailboxes are in a directory "Takeout", specify that path in the field above so mailboxes like "Takeout/Inbox.mbox" are imported into a mailbox called "Inbox" instead of "Takeout/Inbox".'),
-				),
-				dom.div(
-					dom.button('Upload and import'),
-					dom.p(style({fontStyle: 'italic', marginTop: '.5ex'}), 'The file is uploaded first, then its messages are imported, finally messages are matched for threading. Importing is done in a transaction, you can abort the entire import before it is finished.'),
-				),
-			),
-		),
-		importAbortBox=dom.div(), // Outside fieldset because it gets disabled, above progress because may be scrolling it down quickly with problems.
-		importProgress=dom.div(
-			style({display: 'none'}),
-		),
-		footer,
-	)
-
-	// Try to show the progress of an earlier import session. The user may have just
-	// refreshed the browser.
-	let importToken
-	try {
-		importToken = window.sessionStorage.getItem('ImportToken')
-	} catch (err) {
-		console.log('looking up ImportToken in session storage', {err})
-		return
-	}
-	if (!importToken) {
-		return
-	}
-	importFieldset.disabled = true
-	dom._kids(importProgress,
-		dom.div(
-			dom.div('Reconnecting to import...'),
-		),
-	)
-	importProgress.style.display = ''
-	importTrack(importToken)
-	.catch((err) => {
-		if (window.confirm('Error reconnecting to import. Remove this import session?')) {
-			window.sessionStorage.removeItem('ImportToken')
-			dom._kids(importProgress)
-			importProgress.style.display = 'none'
-		}
-	})
-	.finally(() => {
-		importFieldset.disabled = false
-	})
-}
-
-const destination = async (name) => {
-	const [_, domain, destinations] = await api.Account()
-	let dest = destinations[name]
-	if (!dest) {
-		throw new Error('destination not found')
-	}
-
-	let rulesetsTbody = dom.tbody()
-	let rulesetsRows = []
-
-	const addRulesetsRow = (rs) => {
-		let headersCell = dom.td()
-		let headers = [] // Holds objects: {key, value, root}
-		const addHeader = (k, v) => {
-			let h = {}
-			h.root = dom.div(
-				h.key=dom.input(attr({value: k})),
-				' ',
-				h.value=dom.input(attr({value: v})),
-				' ',
-				dom.button('-', style({width: '1.5em'}), function click(e) {
-					h.root.remove()
-					headers = headers.filter(x => x !== h)
-					if (headers.length === 0) {
-						const b = dom.button('+', style({width: '1.5em'}), function click(e) {
-							e.target.remove()
-							addHeader('', '')
-						})
-						headersCell.appendChild(dom.div(style({textAlign: 'right'}), b))
-					}
-				}),
-				' ',
-				dom.button('+', style({width: '1.5em'}), function click(e) {
-					addHeader('', '')
-				}),
-			)
-			headers.push(h)
-			headersCell.appendChild(h.root)
-		}
-		Object.entries(rs.HeadersRegexp || {}).sort().forEach(t =>
-			addHeader(t[0], t[1])
-		)
-		if (Object.entries(rs.HeadersRegexp || {}).length === 0) {
-			const b = dom.button('+', style({width: '1.5em'}), function click(e) {
-				e.target.remove()
-				addHeader('', '')
-			})
-			headersCell.appendChild(dom.div(style({textAlign: 'right'}), b))
-		}
-
-		let row = {headers}
-		row.root=dom.tr(
-			dom.td(row.SMTPMailFromRegexp=dom.input(attr({value: rs.SMTPMailFromRegexp || ''}))),
-			dom.td(row.VerifiedDomain=dom.input(attr({value: rs.VerifiedDomain || ''}))),
-			headersCell,
-			dom.td(dom.label(row.IsForward=dom.input(attr({type: 'checkbox'}), rs.IsForward ? attr({checked: ''}) : [] ))),
-			dom.td(row.ListAllowDomain=dom.input(attr({value: rs.ListAllowDomain || ''}))),
-			dom.td(row.AcceptRejectsToMailbox=dom.input(attr({value: rs.AcceptRejectsToMailbox || ''}))),
-			dom.td(row.Mailbox=dom.input(attr({value: rs.Mailbox || ''}))),
-			dom.td(
-				dom.button('Remove ruleset', function click(e) {
-					row.root.remove()
-					rulesetsRows = rulesetsRows.filter(e => e !== row)
-				}),
-			),
-		)
-		rulesetsRows.push(row)
-		rulesetsTbody.appendChild(row.root)
-	}
-
-	(dest.Rulesets || []).forEach(rs => {
-		addRulesetsRow(rs)
-	})
-
-	let defaultMailbox
-	let fullName
-	let saveButton
-
-	const addresses = [name, ...Object.keys(destinations).filter(a => !a.startsWith('@') && a !== name)]
-
-	const page = document.getElementById('page')
-	dom._kids(page,
-		crumbs(
-			crumblink('Mox Account', '#'),
-			'Destination ' + name,
-		),
-		dom.div(
-			dom.span('Default mailbox', attr({title: 'Default mailbox where email for this recipient is delivered to if it does not match any ruleset. Default is Inbox.'})),
-			dom.br(),
-			defaultMailbox=dom.input(attr({value: dest.Mailbox, placeholder: 'Inbox'})),
-		),
-		dom.br(),
-		dom.div(
-			dom.span('Full name', attr({title: 'Name to use in From header when composing messages. If not set, the account default full name is used.'})),
-			dom.br(),
-			fullName=dom.input(attr({value: dest.FullName})),
-		),
-		dom.br(),
-		dom.h2('Rulesets'),
-		dom.p('Incoming messages are checked against the rulesets. If a ruleset matches, the message is delivered to the mailbox configured for the ruleset instead of to the default mailbox.'),
-		dom.p('"Is Forward" does not affect matching, but changes prevents the sending mail server from being included in future junk classifications by clearing fields related to the forwarding email server (IP address, EHLO domain, MAIL FROM domain and a matching DKIM domain), and prevents DMARC rejects for forwarded messages.'),
-		dom.p('"List allow domain" does not affect matching, but skips the regular spam checks if one of the verified domains is a (sub)domain of the domain mentioned here.'),
-		dom.p('"Accept rejects to mailbox" does not affect matching, but causes messages classified as junk to be accepted and delivered to this mailbox, instead of being rejected during the SMTP transaction. Useful for incoming forwarded messages where rejecting incoming messages may cause the forwarding server to stop forwarding.'),
-		dom.table(
-			dom.thead(
-				dom.tr(
-					dom.th('SMTP "MAIL FROM" regexp', attr({title: 'Matches if this regular expression matches (a substring of) the SMTP MAIL FROM address (not the message From-header). E.g. user@example.org.'})),
-					dom.th('Verified domain', attr({title: 'Matches if this domain matches an SPF- and/or DKIM-verified (sub)domain.'})),
-					dom.th('Headers regexp', attr({title: 'Matches if these header field/value regular expressions all match (substrings of) the message headers. Header fields and valuees are converted to lower case before matching. Whitespace is trimmed from the value before matching. A header field can occur multiple times in a message, only one instance has to match. For mailing lists, you could match on ^list-id$ with the value typically the mailing list address in angled brackets with @ replaced with a dot, e.g. <name\\.lists\\.example\\.org>.'})),
-					dom.th('Is Forward', attr({title: "Influences spam filtering only, this option does not change whether a message matches this ruleset. Can only be used together with SMTPMailFromRegexp and VerifiedDomain. SMTPMailFromRegexp must be set to the address used to deliver the forwarded message, e.g. '^user(|\\+.*)@forward\\.example$'. Changes to junk analysis: 1. Messages are not rejects for failing a DMARC policy, because a legitimate forwarded message without valid/intact/aligned DKIM signature would be rejected because any verified SPF domain will be 'unaligned', of the forwarding mail server. 2. The sending mail server IP address, and sending EHLO and MAIL FROM domains and matching DKIM domain aren't used in future reputation-based spam classifications (but other verified DKIM domains are) because the forwarding server is not a useful spam signal for future messages."})),
-					dom.th('List allow domain', attr({title: "Influences spam filtering only, this option does not change whether a message matches this ruleset. If this domain matches an SPF- and/or DKIM-verified (sub)domain, the message is accepted without further spam checks, such as a junk filter or DMARC reject evaluation. DMARC rejects should not apply for mailing lists that are not configured to rewrite the From-header of messages that don't have a passing DKIM signature of the From-domain. Otherwise, by rejecting messages, you may be automatically unsubscribed from the mailing list. The assumption is that mailing lists do their own spam filtering/moderation."})),
-					dom.th('Allow rejects to mailbox', attr({title: "Influences spam filtering only, this option does not change whether a message matches this ruleset. If a message is classified as spam, it isn't rejected during the SMTP transaction (the normal behaviour), but accepted during the SMTP transaction and delivered to the specified mailbox. The specified mailbox is not automatically cleaned up like the account global Rejects mailbox, unless set to that Rejects mailbox."})),
-					dom.th('Mailbox', attr({title: 'Mailbox to deliver to if this ruleset matches.'})),
-					dom.th('Action'),
-				)
-			),
-			rulesetsTbody,
-			dom.tfoot(
-				dom.tr(
-					dom.td(attr({colspan: '5'})),
-					dom.td(
-						dom.button('Add ruleset', function click(e) {
-							addRulesetsRow({})
-						}),
-					),
-				),
-			),
-		),
-		dom.br(),
-		saveButton=dom.button('Save', async function click(e) {
-			saveButton.disabled = true
-			try {
-				const newDest = {
-					Mailbox: defaultMailbox.value,
-					FullName: fullName.value,
-					Rulesets: rulesetsRows.map(row => {
-						return {
-							SMTPMailFromRegexp: row.SMTPMailFromRegexp.value,
-							VerifiedDomain: row.VerifiedDomain.value,
-							HeadersRegexp: Object.fromEntries(row.headers.map(h => [h.key.value, h.value.value])),
-							IsForward: row.IsForward.checked,
-							ListAllowDomain: row.ListAllowDomain.value,
-							AcceptRejectsToMailbox: row.AcceptRejectsToMailbox.value,
-							Mailbox: row.Mailbox.value,
-						}
-					}),
-				}
-				page.classList.add('loading')
-				await api.DestinationSave(name, dest, newDest)
-				window.location.reload() // todo: only refresh part of ui
-			} catch (err) {
-				console.log({err})
-				window.alert('Error: '+err.message)
-				page.classList.remove('loading')
-				return
-			} finally {
-				saveButton.disabled = false
-			}
-		}),
-		dom.br(),
-		dom.br(),
-		dom.br(),
-		dom.p("Apple's mail applications don't do account autoconfiguration, and when adding an account it can choose defaults that don't work with modern email servers. Adding an account through a \"mobileconfig\" profile file can be more convenient: It contains the IMAP/SMTP settings such as host name, port, TLS, authentication mechanism and user name. This profile does not contain a login password. Opening the profile adds it under Profiles in System Preferences (macOS) or Settings (iOS), where you can install it. These profiles are not signed, so users will have to ignore the warnings about them being unsigned. ",
-			dom.br(),
-			dom.a(attr({href: 'https://autoconfig.'+domainName(domain)+'/profile.mobileconfig?addresses='+encodeURIComponent(addresses.join(','))+'&name='+encodeURIComponent(dest.FullName), download: ''}), 'Download .mobileconfig email account profile'),
-			dom.br(),
-			dom.a(attr({href: 'https://autoconfig.'+domainName(domain)+'/profile.mobileconfig.qrcode.png?addresses='+encodeURIComponent(addresses.join(','))+'&name='+encodeURIComponent(dest.FullName), download: ''}), 'Open QR-code with link to .mobileconfig profile'),
-		),
-	)
-}
-
-const init = async () => {
-	let curhash
-
-	const page = document.getElementById('page')
-
-	const hashChange = async () => {
-		if (curhash === window.location.hash) {
-			return
-		}
-		let h = decodeURIComponent(window.location.hash)
-		if (h !== '' && h.substring(0, 1) == '#') {
-			h = h.substring(1)
-		}
-		const t = h.split('/')
-		page.classList.add('loading')
-		try {
-			if (h === '') {
-				await index()
-			} else if (t[0] === 'destinations' && t.length === 2) {
-				await destination(t[1])
-			} else {
-				dom._kids(page, 'page not found')
-			}
-		} catch (err) {
-			console.log({err})
-			window.alert('Error: ' + err.message)
-			window.location.hash = curhash
-			curhash = window.location.hash
-			return
-		}
-		curhash = window.location.hash
-		page.classList.remove('loading')
-	}
-	window.addEventListener('hashchange', hashChange)
-	hashChange()
-}
-
-window.addEventListener('load', init)
-		</script>
+		<div id="page"><div style="padding: 1em">Loading...</div></div>
+		<script>/* placeholder */</script>
 	</body>
 </html>

webaccount/account.ts

@@ -0,0 +1,699 @@
+// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
+
+// From HTML.
+declare let page: HTMLElement
+declare let moxversion: string
+
+const client = new api.Client()
+
+const link = (href: string, anchorOpt: string) => dom.a(attr.href(href), attr.rel('noopener noreferrer'), anchorOpt || href)
+
+const crumblink = (text: string, link: string) => dom.a(text, attr.href(link))
+const crumbs = (...l: ElemArg[]) => [dom.h1(l.map((e, index) => index === 0 ? e : [' / ', e])), dom.br()]
+
+const errmsg = (err: unknown) => ''+((err as any).message || '(no error message)')
+
+const footer = dom.div(
+	style({marginTop: '6ex', opacity: 0.75}),
+	link('https://github.com/mjl-/mox', 'mox'),
+	' ',
+	moxversion,
+)
+
+const domainName = (d: api.Domain) => {
+	return d.Unicode || d.ASCII
+}
+
+const domainString = (d: api.Domain) => {
+	if (d.Unicode) {
+		return d.Unicode+" ("+d.ASCII+")"
+	}
+	return d.ASCII
+}
+
+const box = (color: string, ...l: ElemArg[]) => [
+	dom.div(
+		style({
+			display: 'inline-block',
+			padding: '.25em .5em',
+			backgroundColor: color,
+			borderRadius: '3px',
+			margin: '.5ex 0',
+		}),
+		l,
+	),
+	dom.br(),
+]
+
+const green = '#1dea20'
+const yellow = '#ffe400'
+const red = '#ff7443'
+const blue = '#8bc8ff'
+
+const index = async () => {
+	const [accountFullName, domain, destinations] = await client.Account()
+
+	let fullNameForm: HTMLFormElement
+	let fullNameFieldset: HTMLFieldSetElement
+	let fullName: HTMLInputElement
+	let passwordForm: HTMLFormElement
+	let passwordFieldset: HTMLFieldSetElement
+	let password1: HTMLInputElement
+	let password2: HTMLInputElement
+	let passwordHint: HTMLElement
+
+	let importForm: HTMLFormElement
+	let importFieldset: HTMLFieldSetElement
+	let mailboxFileHint: HTMLElement
+	let mailboxPrefixHint: HTMLElement
+	let importProgress: HTMLElement
+	let importAbortBox: HTMLElement
+
+	const importTrack = async (token: string) => {
+		const importConnection = dom.div('Waiting for updates...')
+		importProgress.appendChild(importConnection)
+
+		let countsTbody: HTMLElement
+		let counts = new Map<string, HTMLElement>() // mailbox -> elem
+
+		let problems: HTMLElement // element
+
+		await new Promise((resolve, reject) => {
+			const eventSource = new window.EventSource('importprogress?token=' + encodeURIComponent(token))
+			eventSource.addEventListener('open', function(e) {
+				console.log('eventsource open', {e})
+				dom._kids(importConnection, dom.div('Waiting for updates, connected...'))
+
+				dom._kids(importAbortBox,
+					dom.clickbutton('Abort import', attr.title('If the import is not yet finished, it can be aborted and no messages will have been imported.'), async function click() {
+						try {
+							await client.ImportAbort(token)
+						} catch (err) {
+							console.log({err})
+							window.alert('Error: ' + errmsg(err))
+						}
+						// On success, the event source will get an aborted notification and shutdown the connection.
+					})
+				)
+			})
+			eventSource.addEventListener('error', function(e) {
+				console.log('eventsource error', {e})
+				dom._kids(importConnection, box(red, 'Connection error'))
+				reject({message: 'Connection error'})
+			})
+			eventSource.addEventListener('count', (e) => {
+				const data = JSON.parse(e.data) // {Mailbox: ..., Count: ...}
+				console.log('import count event', {e, data})
+				if (!countsTbody) {
+					importProgress.appendChild(
+						dom.div(
+							dom.br(),
+							dom.h3('Importing mailboxes and messages...'),
+							dom.table(
+								dom.thead(
+									dom.tr(dom.th('Mailbox'), dom.th('Messages')),
+								),
+								countsTbody=dom.tbody(),
+							),
+						)
+					)
+				}
+				let elem = counts.get(data.Mailbox)
+				if (!elem) {
+					countsTbody.appendChild(
+						dom.tr(
+							dom.td(data.Mailbox),
+							elem=dom.td(style({textAlign: 'right'}), ''+data.Count),
+						),
+					)
+					counts.set(data.Mailbox, elem)
+				}
+				dom._kids(elem, ''+data.Count)
+			})
+			eventSource.addEventListener('problem', (e) => {
+				const data = JSON.parse(e.data) // {Message: ...}
+				console.log('import problem event', {e, data})
+				if (!problems) {
+					importProgress.appendChild(
+						dom.div(
+							dom.br(),
+							dom.h3('Problems during import'),
+							problems=dom.div(),
+						),
+					)
+				}
+				problems.appendChild(dom.div(box(yellow, data.Message)))
+			})
+			eventSource.addEventListener('step', (e) => {
+				const data = JSON.parse(e.data) // {Title: ...}
+				console.log('import step event', {e, data})
+				importProgress.appendChild(dom.div(dom.br(), box(blue, 'Step: '+data.Title)))
+			})
+			eventSource.addEventListener('done', (e) => {
+				console.log('import done event', {e})
+				importProgress.appendChild(dom.div(dom.br(), box(blue, 'Import finished')))
+
+				eventSource.close()
+				dom._kids(importConnection)
+				dom._kids(importAbortBox)
+				window.sessionStorage.removeItem('ImportToken')
+
+				resolve(null)
+			})
+			eventSource.addEventListener('aborted', function(e) {
+				console.log('import aborted event', {e})
+
+				importProgress.appendChild(dom.div(dom.br(), box(red, 'Import aborted, no message imported')))
+
+				eventSource.close()
+				dom._kids(importConnection)
+				dom._kids(importAbortBox)
+				window.sessionStorage.removeItem('ImportToken')
+
+				reject({message: 'Import aborted'})
+			})
+		})
+	}
+
+	dom._kids(page,
+		crumbs('Mox Account'),
+		dom.p('NOTE: Not all account settings can be configured through these pages yet. See the configuration file for more options.'),
+		dom.div(
+			'Default domain: ',
+			domain.ASCII ? domainString(domain) : '(none)',
+		),
+		dom.br(),
+
+		fullNameForm=dom.form(
+			fullNameFieldset=dom.fieldset(
+				dom.label(
+					style({display: 'inline-block'}),
+					'Full name',
+					dom.br(),
+					fullName=dom.input(attr.value(accountFullName), attr.title('Name to use in From header when composing messages. Can be overridden per configured address.')),
+
+				),
+				' ',
+				dom.submitbutton('Save'),
+			),
+			async function submit(e: SubmitEvent) {
+				e.preventDefault()
+				fullNameFieldset.disabled = true
+				try {
+					await client.AccountSaveFullName(fullName.value)
+					fullName.setAttribute('value', fullName.value)
+					fullNameForm.reset()
+					window.alert('Full name has been changed.')
+				} catch (err) {
+					console.log({err})
+					window.alert('Error: ' + errmsg(err))
+				} finally {
+					fullNameFieldset.disabled = false
+				}
+			},
+		),
+		dom.br(),
+
+		dom.h2('Addresses'),
+		dom.ul(
+			Object.entries(destinations).sort().map(t =>
+				dom.li(
+					dom.a(t[0], attr.href('#destinations/'+t[0])),
+					t[0].startsWith('@') ? ' (catchall)' : [],
+				),
+			),
+		),
+		dom.br(),
+		dom.h2('Change password'),
+		passwordForm=dom.form(
+			passwordFieldset=dom.fieldset(
+				dom.label(
+					style({display: 'inline-block'}),
+					'New password',
+					dom.br(),
+					password1=dom.input(attr.type('password'), attr.required(''), function focus() {
+						passwordHint.style.display = ''
+					}),
+				),
+				' ',
+				dom.label(
+					style({display: 'inline-block'}),
+					'New password repeat',
+					dom.br(),
+					password2=dom.input(attr.type('password'), attr.required('')),
+				),
+				' ',
+				dom.submitbutton('Change password'),
+			),
+			passwordHint=dom.div(
+				style({display: 'none', marginTop: '.5ex'}),
+				dom.clickbutton('Generate random password', function click(e: MouseEvent) {
+					e.preventDefault()
+					let b = new Uint8Array(1)
+					let s = ''
+					const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*-_;:,<.>/'
+					while (s.length < 12) {
+						self.crypto.getRandomValues(b)
+						if (Math.ceil(b[0]/chars.length)*chars.length > 255) {
+							continue // Prevent bias.
+						}
+						s += chars[b[0]%chars.length]
+					}
+					password1.type = 'text'
+					password2.type = 'text'
+					password1.value = s
+					password2.value = s
+				}),
+				dom.div(dom._class('text'),
+					box(yellow, 'Important: Bots will try to bruteforce your password. Connections with failed authentication attempts will be rate limited but attackers WILL find weak passwords. If your account is compromised, spammers are likely to abuse your system, spamming your address and the wider internet in your name. So please pick a random, unguessable password, preferrably at least 12 characters.'),
+				),
+			),
+			async function submit(e: SubmitEvent) {
+				e.stopPropagation()
+				e.preventDefault()
+				if (!password1.value || password1.value !== password2.value) {
+					window.alert('Passwords do not match.')
+					return
+				}
+				passwordFieldset.disabled = true
+				try {
+					await client.SetPassword(password1.value)
+					window.alert('Password has been changed.')
+					passwordForm.reset()
+				} catch (err) {
+					console.log({err})
+					window.alert('Error: ' + errmsg(err))
+				} finally {
+					passwordFieldset.disabled = false
+				}
+			},
+		),
+		dom.br(),
+		dom.h2('Export'),
+		dom.p('Export all messages in all mailboxes. In maildir or mbox format, as .zip or .tgz file.'),
+		dom.ul(
+			dom.li(dom.a('mail-export-maildir.tgz', attr.href('mail-export-maildir.tgz'))),
+			dom.li(dom.a('mail-export-maildir.zip', attr.href('mail-export-maildir.zip'))),
+			dom.li(dom.a('mail-export-mbox.tgz', attr.href('mail-export-mbox.tgz'))),
+			dom.li(dom.a('mail-export-mbox.zip', attr.href('mail-export-mbox.zip'))),
+		),
+		dom.br(),
+		dom.h2('Import'),
+		dom.p('Import messages from a .zip or .tgz file with maildirs and/or mbox files.'),
+		importForm=dom.form(
+			async function submit(e: SubmitEvent) {
+				e.preventDefault()
+				e.stopPropagation()
+
+				const request = async (): Promise<api.ImportProgress> => {
+					return new Promise((resolve, reject) => {
+						// Browsers can do everything. Except show a progress bar while uploading...
+						let progressPercentage: HTMLElement
+						dom._kids(importProgress,
+							dom.div(
+								dom.div('Uploading... ', progressPercentage=dom.span()),
+							),
+						)
+						importProgress.style.display = ''
+
+						const xhr = new window.XMLHttpRequest()
+						xhr.open('POST', 'import', true)
+						xhr.upload.addEventListener('progress', (e) => {
+							if (!e.lengthComputable) {
+								return
+							}
+							const pct = Math.floor(100*e.loaded/e.total)
+							dom._kids(progressPercentage, pct+'%')
+						})
+						xhr.addEventListener('load', () => {
+							console.log('upload done', {xhr: xhr, status: xhr.status})
+							if (xhr.status !== 200) {
+								reject({message: 'status '+xhr.status})
+								return
+							}
+							let resp: api.ImportProgress
+							try {
+								resp = api.parser.ImportProgress(JSON.parse(xhr.responseText))
+							} catch (err) {
+								reject({message: 'parsing response json: '+errmsg(err)})
+								return
+							}
+							resolve(resp)
+						})
+						xhr.addEventListener('error', (e) => reject({message: 'upload error', event: e}))
+						xhr.addEventListener('abort', (e) => reject({message: 'upload aborted', event: e}))
+						xhr.send(new window.FormData(importForm))
+					})
+				}
+				try {
+					const p = request()
+					importFieldset.disabled = true
+					const result = await p
+
+					try {
+						window.sessionStorage.setItem('ImportToken', result.Token)
+					} catch (err) {
+						console.log('storing import token in session storage', {err})
+						// Ignore error, could be some browser security thing like private browsing.
+					}
+
+					await importTrack(result.Token)
+				} catch (err) {
+					console.log({err})
+					window.alert('Error: ' + errmsg(err))
+				} finally {
+					importFieldset.disabled = false
+				}
+			},
+			importFieldset=dom.fieldset(
+				dom.div(
+					style({marginBottom: '1ex'}),
+					dom.label(
+						dom.div(style({marginBottom: '.5ex'}), 'File'),
+						dom.input(attr.type('file'), attr.required(''), attr.name('file'), function focus() {
+							mailboxFileHint.style.display = ''
+						}),
+					),
+					mailboxFileHint=dom.p(style({display: 'none', fontStyle: 'italic', marginTop: '.5ex'}), 'This file must either be a zip file or a gzipped tar file with mbox and/or maildir mailboxes. For maildirs, an optional file "dovecot-keywords" is read additional keywords, like Forwarded/Junk/NotJunk. If an imported mailbox already exists by name, messages are added to the existing mailbox. If a mailbox does not yet exist it will be created.'),
+				),
+				dom.div(
+					style({marginBottom: '1ex'}),
+					dom.label(
+						dom.div(style({marginBottom: '.5ex'}), 'Skip mailbox prefix (optional)'),
+						dom.input(attr.name('skipMailboxPrefix'), function focus() {
+							mailboxPrefixHint.style.display = ''
+						}),
+					),
+					mailboxPrefixHint=dom.p(style({display: 'none', fontStyle: 'italic', marginTop: '.5ex'}), 'If set, any mbox/maildir path with this prefix will have it stripped before importing. For example, if all mailboxes are in a directory "Takeout", specify that path in the field above so mailboxes like "Takeout/Inbox.mbox" are imported into a mailbox called "Inbox" instead of "Takeout/Inbox".'),
+				),
+				dom.div(
+					dom.submitbutton('Upload and import'),
+					dom.p(style({fontStyle: 'italic', marginTop: '.5ex'}), 'The file is uploaded first, then its messages are imported, finally messages are matched for threading. Importing is done in a transaction, you can abort the entire import before it is finished.'),
+				),
+			),
+		),
+		importAbortBox=dom.div(), // Outside fieldset because it gets disabled, above progress because may be scrolling it down quickly with problems.
+		importProgress=dom.div(
+			style({display: 'none'}),
+		),
+		footer,
+	)
+
+	// Try to show the progress of an earlier import session. The user may have just
+	// refreshed the browser.
+	let importToken: string
+	try {
+		importToken = window.sessionStorage.getItem('ImportToken') || ''
+	} catch (err) {
+		console.log('looking up ImportToken in session storage', {err})
+		return
+	}
+	if (!importToken) {
+		return
+	}
+	importFieldset.disabled = true
+	dom._kids(importProgress,
+		dom.div(
+			dom.div('Reconnecting to import...'),
+		),
+	)
+	importProgress.style.display = ''
+	importTrack(importToken)
+	.catch(() => {
+		if (window.confirm('Error reconnecting to import. Remove this import session?')) {
+			window.sessionStorage.removeItem('ImportToken')
+			dom._kids(importProgress)
+			importProgress.style.display = 'none'
+		}
+	})
+	.finally(() => {
+		importFieldset.disabled = false
+	})
+}
+
+const destination = async (name: string) => {
+	const [_, domain, destinations] = await client.Account()
+	let dest = destinations[name]
+	if (!dest) {
+		throw new Error('destination not found')
+	}
+
+	type Header = {
+		root: HTMLElement
+
+		key: HTMLInputElement
+		value: HTMLInputElement
+	}
+
+	type Row = {
+		root: HTMLElement
+
+		smtpMailFromRegexp: HTMLInputElement
+		verifiedDomain: HTMLInputElement
+		headers: Header[]
+		isForward: HTMLInputElement // Checkbox
+		listAllowDomain: HTMLInputElement
+		acceptRejectsToMailbox: HTMLInputElement
+		mailbox: HTMLInputElement
+	}
+
+	let rulesetsTbody = dom.tbody()
+	let rulesetsRows: Row[] = []
+
+	const addRulesetsRow = (rs: api.Ruleset) => {
+		let row: Row
+		let headersCell = dom.td()
+
+		const addHeader = (k: string, v: string) => {
+			let h: Header
+			let key: HTMLInputElement
+			let value: HTMLInputElement
+
+			const root = dom.div(
+				key=dom.input(attr.value(k)),
+				' ',
+				value=dom.input(attr.value(v)),
+				' ',
+				dom.clickbutton('-', style({width: '1.5em'}), function click() {
+					h.root.remove()
+					row.headers = row.headers.filter(x => x !== h)
+					if (row.headers.length === 0) {
+						const b = dom.clickbutton('+', style({width: '1.5em'}), function click() {
+							b.remove()
+							addHeader('', '')
+						})
+						headersCell.appendChild(dom.div(style({textAlign: 'right'}), b))
+					}
+				}),
+				' ',
+				dom.clickbutton('+', style({width: '1.5em'}), function click() {
+					addHeader('', '')
+				}),
+			)
+			h = {root: root, key: key, value: value}
+			row.headers.push(h)
+			headersCell.appendChild(root)
+		}
+
+		let smtpMailFromRegexp: HTMLInputElement
+		let verifiedDomain: HTMLInputElement
+		let isForward: HTMLInputElement // Checkbox
+		let listAllowDomain: HTMLInputElement
+		let acceptRejectsToMailbox: HTMLInputElement
+		let mailbox: HTMLInputElement
+
+		const root = dom.tr(
+			dom.td(smtpMailFromRegexp=dom.input(attr.value(rs.SMTPMailFromRegexp || ''))),
+			dom.td(verifiedDomain=dom.input(attr.value(rs.VerifiedDomain || ''))),
+			headersCell,
+			dom.td(dom.label(isForward=dom.input(attr.type('checkbox'), rs.IsForward ? attr.checked('') : [] ))),
+			dom.td(listAllowDomain=dom.input(attr.value(rs.ListAllowDomain || ''))),
+			dom.td(acceptRejectsToMailbox=dom.input(attr.value(rs.AcceptRejectsToMailbox || ''))),
+			dom.td(mailbox=dom.input(attr.value(rs.Mailbox || ''))),
+			dom.td(
+				dom.clickbutton('Remove ruleset', function click() {
+					row.root.remove()
+					rulesetsRows = rulesetsRows.filter(e => e !== row)
+				}),
+			),
+		)
+		row = {
+			root: root,
+			smtpMailFromRegexp: smtpMailFromRegexp,
+			verifiedDomain: verifiedDomain,
+			headers: [],
+			isForward: isForward,
+			listAllowDomain: listAllowDomain,
+			acceptRejectsToMailbox: acceptRejectsToMailbox,
+			mailbox: mailbox,
+		}
+		rulesetsRows.push(row)
+
+		Object.entries(rs.HeadersRegexp || {}).sort().forEach(t =>
+			addHeader(t[0], t[1])
+		)
+		if (Object.entries(rs.HeadersRegexp || {}).length === 0) {
+			const b = dom.clickbutton('+', style({width: '1.5em'}), function click() {
+				b.remove()
+				addHeader('', '')
+			})
+			headersCell.appendChild(dom.div(style({textAlign: 'right'}), b))
+		}
+
+		rulesetsTbody.appendChild(row.root)
+	}
+
+	(dest.Rulesets || []).forEach(rs => {
+		addRulesetsRow(rs)
+	})
+
+	let defaultMailbox: HTMLInputElement
+	let fullName: HTMLInputElement
+	let saveButton: HTMLButtonElement
+
+	const addresses = [name, ...Object.keys(destinations).filter(a => !a.startsWith('@') && a !== name)]
+
+	dom._kids(page,
+		crumbs(
+			crumblink('Mox Account', '#'),
+			'Destination ' + name,
+		),
+		dom.div(
+			dom.span('Default mailbox', attr.title('Default mailbox where email for this recipient is delivered to if it does not match any ruleset. Default is Inbox.')),
+			dom.br(),
+			defaultMailbox=dom.input(attr.value(dest.Mailbox), attr.placeholder('Inbox')),
+		),
+		dom.br(),
+		dom.div(
+			dom.span('Full name', attr.title('Name to use in From header when composing messages. If not set, the account default full name is used.')),
+			dom.br(),
+			fullName=dom.input(attr.value(dest.FullName)),
+		),
+		dom.br(),
+		dom.h2('Rulesets'),
+		dom.p('Incoming messages are checked against the rulesets. If a ruleset matches, the message is delivered to the mailbox configured for the ruleset instead of to the default mailbox.'),
+		dom.p('"Is Forward" does not affect matching, but changes prevents the sending mail server from being included in future junk classifications by clearing fields related to the forwarding email server (IP address, EHLO domain, MAIL FROM domain and a matching DKIM domain), and prevents DMARC rejects for forwarded messages.'),
+		dom.p('"List allow domain" does not affect matching, but skips the regular spam checks if one of the verified domains is a (sub)domain of the domain mentioned here.'),
+		dom.p('"Accept rejects to mailbox" does not affect matching, but causes messages classified as junk to be accepted and delivered to this mailbox, instead of being rejected during the SMTP transaction. Useful for incoming forwarded messages where rejecting incoming messages may cause the forwarding server to stop forwarding.'),
+		dom.table(
+			dom.thead(
+				dom.tr(
+					dom.th('SMTP "MAIL FROM" regexp', attr.title('Matches if this regular expression matches (a substring of) the SMTP MAIL FROM address (not the message From-header). E.g. user@example.org.')),
+					dom.th('Verified domain', attr.title('Matches if this domain matches an SPF- and/or DKIM-verified (sub)domain.')),
+					dom.th('Headers regexp', attr.title('Matches if these header field/value regular expressions all match (substrings of) the message headers. Header fields and valuees are converted to lower case before matching. Whitespace is trimmed from the value before matching. A header field can occur multiple times in a message, only one instance has to match. For mailing lists, you could match on ^list-id$ with the value typically the mailing list address in angled brackets with @ replaced with a dot, e.g. <name\\.lists\\.example\\.org>.')),
+					dom.th('Is Forward', attr.title("Influences spam filtering only, this option does not change whether a message matches this ruleset. Can only be used together with SMTPMailFromRegexp and VerifiedDomain. SMTPMailFromRegexp must be set to the address used to deliver the forwarded message, e.g. '^user(|\\+.*)@forward\\.example$'. Changes to junk analysis: 1. Messages are not rejects for failing a DMARC policy, because a legitimate forwarded message without valid/intact/aligned DKIM signature would be rejected because any verified SPF domain will be 'unaligned', of the forwarding mail server. 2. The sending mail server IP address, and sending EHLO and MAIL FROM domains and matching DKIM domain aren't used in future reputation-based spam classifications (but other verified DKIM domains are) because the forwarding server is not a useful spam signal for future messages.")),
+					dom.th('List allow domain', attr.title("Influences spam filtering only, this option does not change whether a message matches this ruleset. If this domain matches an SPF- and/or DKIM-verified (sub)domain, the message is accepted without further spam checks, such as a junk filter or DMARC reject evaluation. DMARC rejects should not apply for mailing lists that are not configured to rewrite the From-header of messages that don't have a passing DKIM signature of the From-domain. Otherwise, by rejecting messages, you may be automatically unsubscribed from the mailing list. The assumption is that mailing lists do their own spam filtering/moderation.")),
+					dom.th('Allow rejects to mailbox', attr.title("Influences spam filtering only, this option does not change whether a message matches this ruleset. If a message is classified as spam, it isn't rejected during the SMTP transaction (the normal behaviour), but accepted during the SMTP transaction and delivered to the specified mailbox. The specified mailbox is not automatically cleaned up like the account global Rejects mailbox, unless set to that Rejects mailbox.")),
+					dom.th('Mailbox', attr.title('Mailbox to deliver to if this ruleset matches.')),
+					dom.th('Action'),
+				)
+			),
+			rulesetsTbody,
+			dom.tfoot(
+				dom.tr(
+					dom.td(attr.colspan('7')),
+					dom.td(
+						dom.clickbutton('Add ruleset', function click() {
+							addRulesetsRow({
+								SMTPMailFromRegexp: '',
+								VerifiedDomain: '',
+								HeadersRegexp: {},
+								IsForward: false,
+								ListAllowDomain: '',
+								AcceptRejectsToMailbox: '',
+								Mailbox: '',
+								VerifiedDNSDomain: {ASCII: '', Unicode: ''},
+								ListAllowDNSDomain: {ASCII: '', Unicode: ''},
+							})
+						}),
+					),
+				),
+			),
+		),
+		dom.br(),
+		saveButton=dom.clickbutton('Save', async function click() {
+			saveButton.disabled = true
+			try {
+				const newDest = {
+					Mailbox: defaultMailbox.value,
+					FullName: fullName.value,
+					Rulesets: rulesetsRows.map(row => {
+						return {
+							SMTPMailFromRegexp: row.smtpMailFromRegexp.value,
+							VerifiedDomain: row.verifiedDomain.value,
+							HeadersRegexp: Object.fromEntries(row.headers.map(h => [h.key.value, h.value.value])),
+							IsForward: row.isForward.checked,
+							ListAllowDomain: row.listAllowDomain.value,
+							AcceptRejectsToMailbox: row.acceptRejectsToMailbox.value,
+							Mailbox: row.mailbox.value,
+							VerifiedDNSDomain: {ASCII: '', Unicode: ''},
+							ListAllowDNSDomain: {ASCII: '', Unicode: ''},
+						}
+					}),
+				}
+				page.classList.add('loading')
+				await client.DestinationSave(name, dest, newDest)
+				window.location.reload() // todo: only refresh part of ui
+			} catch (err) {
+				console.log({err})
+				window.alert('Error: ' + errmsg(err))
+				page.classList.remove('loading')
+				return
+			} finally {
+				saveButton.disabled = false
+			}
+		}),
+		dom.br(),
+		dom.br(),
+		dom.br(),
+		dom.p("Apple's mail applications don't do account autoconfiguration, and when adding an account it can choose defaults that don't work with modern email servers. Adding an account through a \"mobileconfig\" profile file can be more convenient: It contains the IMAP/SMTP settings such as host name, port, TLS, authentication mechanism and user name. This profile does not contain a login password. Opening the profile adds it under Profiles in System Preferences (macOS) or Settings (iOS), where you can install it. These profiles are not signed, so users will have to ignore the warnings about them being unsigned. ",
+			dom.br(),
+			dom.a(attr.href('https://autoconfig.'+domainName(domain)+'/profile.mobileconfig?addresses='+encodeURIComponent(addresses.join(','))+'&name='+encodeURIComponent(dest.FullName)), attr.download(''), 'Download .mobileconfig email account profile'),
+			dom.br(),
+			dom.a(attr.href('https://autoconfig.'+domainName(domain)+'/profile.mobileconfig.qrcode.png?addresses='+encodeURIComponent(addresses.join(','))+'&name='+encodeURIComponent(dest.FullName)), attr.download(''), 'Open QR-code with link to .mobileconfig profile'),
+		),
+	)
+}
+
+const init = async () => {
+	let curhash: string | undefined
+
+	const hashChange = async () => {
+		if (curhash === window.location.hash) {
+			return
+		}
+		let h = decodeURIComponent(window.location.hash)
+		if (h !== '' && h.substring(0, 1) == '#') {
+			h = h.substring(1)
+		}
+		const t = h.split('/')
+		page.classList.add('loading')
+		try {
+			if (h === '') {
+				await index()
+			} else if (t[0] === 'destinations' && t.length === 2) {
+				await destination(t[1])
+			} else {
+				dom._kids(page, 'page not found')
+			}
+		} catch (err) {
+			console.log({err})
+			window.alert('Error: ' + errmsg(err))
+			window.location.hash = curhash || ''
+			curhash = window.location.hash
+			return
+		}
+		curhash = window.location.hash
+		page.classList.remove('loading')
+	}
+	window.addEventListener('hashchange', hashChange)
+	hashChange()
+}
+
+window.addEventListener('load', async () => {
+	try {
+		await init()
+	} catch (err) {
+		window.alert('Error: ' + errmsg(err))
+	}
+})

webaccount/account_test.go

@@ -104,13 +104,12 @@ func TestAccount(t *testing.T) {
 		if w.Code != http.StatusOK {
 			t.Fatalf("import, got status code %d, expected 200: %s", w.Code, w.Body.Bytes())
 		}
-		m := map[string]string{}
+		var m ImportProgress
 		if err := json.Unmarshal(w.Body.Bytes(), &m); err != nil {
 			t.Fatalf("parsing import response: %v", err)
 		}
-		token := m["ImportToken"]
 
-		l := importListener{token, make(chan importEvent, 100), make(chan bool)}
+		l := importListener{m.Token, make(chan importEvent, 100), make(chan bool)}
 		importers.Register <- &l
 		if !<-l.Register {
 			t.Fatalf("register failed")

webaccount/api.json

@@ -91,6 +91,19 @@
 				}
 			],
 			"Returns": []
+		},
+		{
+			"Name": "Types",
+			"Docs": "Types exposes types not used in API method signatures, such as the import form upload.",
+			"Params": [],
+			"Returns": [
+				{
+					"Name": "importProgress",
+					"Typewords": [
+						"ImportProgress"
+					]
+				}
+			]
 		}
 	],
 	"Sections": [],
@@ -212,6 +225,19 @@
 					]
 				}
 			]
+		},
+		{
+			"Name": "ImportProgress",
+			"Docs": "ImportProgress is returned after uploading a file to import.",
+			"Fields": [
+				{
+					"Name": "Token",
+					"Docs": "For fetching progress, or cancelling an import.",
+					"Typewords": [
+						"string"
+					]
+				}
+			]
 		}
 	],
 	"Ints": [],

webaccount/api.ts

@@ -0,0 +1,525 @@
+// NOTE: GENERATED by github.com/mjl-/sherpats, DO NOT MODIFY
+
+namespace api {
+
+// Domain is a domain name, with one or more labels, with at least an ASCII
+// representation, and for IDNA non-ASCII domains a unicode representation.
+// The ASCII string must be used for DNS lookups. The strings do not have a
+// trailing dot. When using with StrictResolver, add the trailing dot.
+export interface Domain {
+	ASCII: string  // A non-unicode domain, e.g. with A-labels (xn--...) or NR-LDH (non-reserved letters/digits/hyphens) labels. Always in lower case. No trailing dot.
+	Unicode: string  // Name as U-labels. Empty if this is an ASCII-only domain. No trailing dot.
+}
+
+export interface Destination {
+	Mailbox: string
+	Rulesets?: Ruleset[] | null
+	FullName: string
+}
+
+export interface Ruleset {
+	SMTPMailFromRegexp: string
+	VerifiedDomain: string
+	HeadersRegexp?: { [key: string]: string }
+	IsForward: boolean  // todo: once we implement ARC, we can use dkim domains that we cannot verify but that the arc-verified forwarding mail server was able to verify.
+	ListAllowDomain: string
+	AcceptRejectsToMailbox: string
+	Mailbox: string
+	VerifiedDNSDomain: Domain
+	ListAllowDNSDomain: Domain
+}
+
+// ImportProgress is returned after uploading a file to import.
+export interface ImportProgress {
+	Token: string  // For fetching progress, or cancelling an import.
+}
+
+export const structTypes: {[typename: string]: boolean} = {"Destination":true,"Domain":true,"ImportProgress":true,"Ruleset":true}
+export const stringsTypes: {[typename: string]: boolean} = {}
+export const intsTypes: {[typename: string]: boolean} = {}
+export const types: TypenameMap = {
+	"Domain": {"Name":"Domain","Docs":"","Fields":[{"Name":"ASCII","Docs":"","Typewords":["string"]},{"Name":"Unicode","Docs":"","Typewords":["string"]}]},
+	"Destination": {"Name":"Destination","Docs":"","Fields":[{"Name":"Mailbox","Docs":"","Typewords":["string"]},{"Name":"Rulesets","Docs":"","Typewords":["[]","Ruleset"]},{"Name":"FullName","Docs":"","Typewords":["string"]}]},
+	"Ruleset": {"Name":"Ruleset","Docs":"","Fields":[{"Name":"SMTPMailFromRegexp","Docs":"","Typewords":["string"]},{"Name":"VerifiedDomain","Docs":"","Typewords":["string"]},{"Name":"HeadersRegexp","Docs":"","Typewords":["{}","string"]},{"Name":"IsForward","Docs":"","Typewords":["bool"]},{"Name":"ListAllowDomain","Docs":"","Typewords":["string"]},{"Name":"AcceptRejectsToMailbox","Docs":"","Typewords":["string"]},{"Name":"Mailbox","Docs":"","Typewords":["string"]},{"Name":"VerifiedDNSDomain","Docs":"","Typewords":["Domain"]},{"Name":"ListAllowDNSDomain","Docs":"","Typewords":["Domain"]}]},
+	"ImportProgress": {"Name":"ImportProgress","Docs":"","Fields":[{"Name":"Token","Docs":"","Typewords":["string"]}]},
+}
+
+export const parser = {
+	Domain: (v: any) => parse("Domain", v) as Domain,
+	Destination: (v: any) => parse("Destination", v) as Destination,
+	Ruleset: (v: any) => parse("Ruleset", v) as Ruleset,
+	ImportProgress: (v: any) => parse("ImportProgress", v) as ImportProgress,
+}
+
+// Account exports web API functions for the account web interface. All its
+// methods are exported under api/. Function calls require valid HTTP
+// Authentication credentials of a user.
+let defaultOptions: ClientOptions = {slicesNullable: true, mapsNullable: true, nullableOptional: true}
+
+export class Client {
+	constructor(private baseURL=defaultBaseURL, public options?: ClientOptions) {
+		if (!options) {
+			this.options = defaultOptions
+		}
+	}
+
+	withOptions(options: ClientOptions): Client {
+		return new Client(this.baseURL, { ...this.options, ...options })
+	}
+
+	// SetPassword saves a new password for the account, invalidating the previous password.
+	// Sessions are not interrupted, and will keep working. New login attempts must use the new password.
+	// Password must be at least 8 characters.
+	async SetPassword(password: string): Promise<void> {
+		const fn: string = "SetPassword"
+		const paramTypes: string[][] = [["string"]]
+		const returnTypes: string[][] = []
+		const params: any[] = [password]
+		return await _sherpaCall(this.baseURL, { ...this.options }, paramTypes, returnTypes, fn, params) as void
+	}
+
+	// Account returns information about the account: full name, the default domain,
+	// and the destinations (keys are email addresses, or localparts to the default
+	// domain). todo: replace with a function that returns the whole account, when
+	// sherpadoc understands unnamed struct fields.
+	async Account(): Promise<[string, Domain, { [key: string]: Destination }]> {
+		const fn: string = "Account"
+		const paramTypes: string[][] = []
+		const returnTypes: string[][] = [["string"],["Domain"],["{}","Destination"]]
+		const params: any[] = []
+		return await _sherpaCall(this.baseURL, { ...this.options }, paramTypes, returnTypes, fn, params) as [string, Domain, { [key: string]: Destination }]
+	}
+
+	async AccountSaveFullName(fullName: string): Promise<void> {
+		const fn: string = "AccountSaveFullName"
+		const paramTypes: string[][] = [["string"]]
+		const returnTypes: string[][] = []
+		const params: any[] = [fullName]
+		return await _sherpaCall(this.baseURL, { ...this.options }, paramTypes, returnTypes, fn, params) as void
+	}
+
+	// DestinationSave updates a destination.
+	// OldDest is compared against the current destination. If it does not match, an
+	// error is returned. Otherwise newDest is saved and the configuration reloaded.
+	async DestinationSave(destName: string, oldDest: Destination, newDest: Destination): Promise<void> {
+		const fn: string = "DestinationSave"
+		const paramTypes: string[][] = [["string"],["Destination"],["Destination"]]
+		const returnTypes: string[][] = []
+		const params: any[] = [destName, oldDest, newDest]
+		return await _sherpaCall(this.baseURL, { ...this.options }, paramTypes, returnTypes, fn, params) as void
+	}
+
+	// ImportAbort aborts an import that is in progress. If the import exists and isn't
+	// finished, no changes will have been made by the import.
+	async ImportAbort(importToken: string): Promise<void> {
+		const fn: string = "ImportAbort"
+		const paramTypes: string[][] = [["string"]]
+		const returnTypes: string[][] = []
+		const params: any[] = [importToken]
+		return await _sherpaCall(this.baseURL, { ...this.options }, paramTypes, returnTypes, fn, params) as void
+	}
+
+	// Types exposes types not used in API method signatures, such as the import form upload.
+	async Types(): Promise<ImportProgress> {
+		const fn: string = "Types"
+		const paramTypes: string[][] = []
+		const returnTypes: string[][] = [["ImportProgress"]]
+		const params: any[] = []
+		return await _sherpaCall(this.baseURL, { ...this.options }, paramTypes, returnTypes, fn, params) as ImportProgress
+	}
+}
+
+export const defaultBaseURL = (function() {
+	let p = location.pathname
+	if (p && p[p.length - 1] !== '/') {
+		let l = location.pathname.split('/')
+		l = l.slice(0, l.length - 1)
+		p = '/' + l.join('/') + '/'
+	}
+	return location.protocol + '//' + location.host + p + 'api/'
+})()
+
+// NOTE: code below is shared between github.com/mjl-/sherpaweb and github.com/mjl-/sherpats.
+// KEEP IN SYNC.
+
+export const supportedSherpaVersion = 1
+
+export interface Section {
+	Name: string
+	Docs: string
+	Functions: Function[]
+	Sections: Section[]
+	Structs: Struct[]
+	Ints: Ints[]
+	Strings: Strings[]
+	Version: string // only for top-level section
+	SherpaVersion: number // only for top-level section
+	SherpadocVersion: number // only for top-level section
+}
+
+export interface Function {
+	Name: string
+	Docs: string
+	Params: Arg[]
+	Returns: Arg[]
+}
+
+export interface Arg {
+	Name: string
+	Typewords: string[]
+}
+
+export interface Struct {
+	Name: string
+	Docs: string
+	Fields: Field[]
+}
+
+export interface Field {
+	Name: string
+	Docs: string
+	Typewords: string[]
+}
+
+export interface Ints {
+	Name: string
+	Docs: string
+	Values: {
+		Name: string
+		Value: number
+		Docs: string
+	}[] | null
+}
+
+export interface Strings {
+	Name: string
+	Docs: string
+	Values: {
+		Name: string
+		Value: string
+		Docs: string
+	}[] | null
+}
+
+export type NamedType = Struct | Strings | Ints
+export type TypenameMap = { [k: string]: NamedType }
+
+// verifyArg typechecks "v" against "typewords", returning a new (possibly modified) value for JSON-encoding.
+// toJS indicate if the data is coming into JS. If so, timestamps are turned into JS Dates. Otherwise, JS Dates are turned into strings.
+// allowUnknownKeys configures whether unknown keys in structs are allowed.
+// types are the named types of the API.
+export const verifyArg = (path: string, v: any, typewords: string[], toJS: boolean, allowUnknownKeys: boolean, types: TypenameMap, opts: ClientOptions): any => {
+	return new verifier(types, toJS, allowUnknownKeys, opts).verify(path, v, typewords)
+}
+
+export const parse = (name: string, v: any): any => verifyArg(name, v, [name], true, false, types, defaultOptions)
+
+class verifier {
+	constructor(private types: TypenameMap, private toJS: boolean, private allowUnknownKeys: boolean, private opts: ClientOptions) {
+	}
+
+	verify(path: string, v: any, typewords: string[]): any {
+		typewords = typewords.slice(0)
+		const ww = typewords.shift()
+
+		const error = (msg: string) => {
+			if (path != '') {
+				msg = path + ': ' + msg
+			}
+			throw new Error(msg)
+		}
+
+		if (typeof ww !== 'string') {
+			error('bad typewords')
+			return // should not be necessary, typescript doesn't see error always throws an exception?
+		}
+		const w: string = ww
+
+		const ensure = (ok: boolean, expect: string): any => {
+			if (!ok) {
+				error('got ' + JSON.stringify(v) +  ', expected ' + expect)
+			}
+			return v
+		}
+
+		switch (w) {
+		case 'nullable':
+			if (v === null || v === undefined && this.opts.nullableOptional) {
+				return v
+			}
+			return this.verify(path, v, typewords)
+		case '[]':
+			if (v === null && this.opts.slicesNullable || v === undefined && this.opts.slicesNullable && this.opts.nullableOptional) {
+				return v
+			}
+			ensure(Array.isArray(v), "array")
+			return v.map((e: any, i: number) => this.verify(path + '[' + i + ']', e, typewords))
+		case '{}':
+			if (v === null && this.opts.mapsNullable || v === undefined && this.opts.mapsNullable && this.opts.nullableOptional) {
+				return v
+			}
+			ensure(v !== null || typeof v === 'object', "object")
+			const r: any = {}
+			for (const k in v) {
+				r[k] = this.verify(path + '.' + k, v[k], typewords)
+			}
+			return r
+		}
+
+		ensure(typewords.length == 0, "empty typewords")
+		const t = typeof v
+		switch (w) {
+		case 'any':
+			return v
+		case 'bool':
+			ensure(t === 'boolean', 'bool')
+			return v
+		case 'int8':
+		case 'uint8':
+		case 'int16':
+		case 'uint16':
+		case 'int32':
+		case 'uint32':
+		case 'int64':
+		case 'uint64':
+			ensure(t === 'number' && Number.isInteger(v), 'integer')
+			return v
+		case 'float32':
+		case 'float64':
+			ensure(t === 'number', 'float')
+			return v
+		case 'int64s':
+		case 'uint64s':
+			ensure(t === 'number' && Number.isInteger(v) || t === 'string', 'integer fitting in float without precision loss, or string')
+			return '' + v
+		case 'string':
+			ensure(t === 'string', 'string')
+			return v
+		case 'timestamp':
+			if (this.toJS) {
+				ensure(t === 'string', 'string, with timestamp')
+				const d = new Date(v)
+				if (d instanceof Date && !isNaN(d.getTime())) {
+					return d
+				}
+				error('invalid date ' + v)
+			} else {
+				ensure(t === 'object' && v !== null, 'non-null object')
+				ensure(v.__proto__ === Date.prototype, 'Date')
+				return v.toISOString()
+			}
+		}
+
+		// We're left with named types.
+		const nt = this.types[w]
+		if (!nt) {
+			error('unknown type ' + w)
+		}
+		if (v === null) {
+			error('bad value ' + v + ' for named type ' + w)
+		}
+
+		if (structTypes[nt.Name]) {
+			const t = nt as Struct
+			if (typeof v !== 'object') {
+				error('bad value ' + v + ' for struct ' + w)
+			}
+
+			const r: any = {}
+			for (const f of t.Fields) {
+				r[f.Name] = this.verify(path + '.' + f.Name, v[f.Name], f.Typewords)
+			}
+			// If going to JSON also verify no unknown fields are present.
+			if (!this.allowUnknownKeys) {
+				const known: { [key: string]: boolean } = {}
+				for (const f of t.Fields) {
+					known[f.Name] = true
+				}
+				Object.keys(v).forEach((k) => {
+					if (!known[k]) {
+						error('unknown key ' + k + ' for struct ' + w)
+					}
+				})
+			}
+			return r
+		} else if (stringsTypes[nt.Name]) {
+			const t = nt as Strings
+			if (typeof v !== 'string') {
+				error('mistyped value ' + v + ' for named strings ' + t.Name)
+			}
+			if (!t.Values || t.Values.length === 0) {
+				return v
+			}
+			for (const sv of t.Values) {
+				if (sv.Value === v) {
+					return v
+				}
+			}
+			error('unknkown value ' + v + ' for named strings ' + t.Name)
+		} else if (intsTypes[nt.Name]) {
+			const t = nt as Ints
+			if (typeof v !== 'number' || !Number.isInteger(v)) {
+				error('mistyped value ' + v + ' for named ints ' + t.Name)
+			}
+			if (!t.Values || t.Values.length === 0) {
+				return v
+			}
+			for (const sv of t.Values) {
+				if (sv.Value === v) {
+					return v
+				}
+			}
+			error('unknkown value ' + v + ' for named ints ' + t.Name)
+		} else {
+			throw new Error('unexpected named type ' + nt)
+		}
+	}
+}
+
+
+export interface ClientOptions {
+	aborter?: {abort?: () => void}
+	timeoutMsec?: number
+	skipParamCheck?: boolean
+	skipReturnCheck?: boolean
+	slicesNullable?: boolean
+	mapsNullable?: boolean
+	nullableOptional?: boolean
+}
+
+const _sherpaCall = async (baseURL: string, options: ClientOptions, paramTypes: string[][], returnTypes: string[][], name: string, params: any[]): Promise<any> => {
+	if (!options.skipParamCheck) {
+		if (params.length !== paramTypes.length) {
+			return Promise.reject({ message: 'wrong number of parameters in sherpa call, saw ' + params.length + ' != expected ' + paramTypes.length })
+		}
+		params = params.map((v: any, index: number) => verifyArg('params[' + index + ']', v, paramTypes[index], false, false, types, options))
+	}
+	const simulate = async (json: string) => {
+		const config = JSON.parse(json || 'null') || {}
+		const waitMinMsec = config.waitMinMsec || 0
+		const waitMaxMsec = config.waitMaxMsec || 0
+		const wait = Math.random() * (waitMaxMsec - waitMinMsec)
+		const failRate = config.failRate || 0
+		return new Promise<void>((resolve, reject) => {
+			if (options.aborter) {
+				options.aborter.abort = () => {
+					reject({ message: 'call to ' + name + ' aborted by user', code: 'sherpa:aborted' })
+					reject = resolve = () => { }
+				}
+			}
+			setTimeout(() => {
+				const r = Math.random()
+				if (r < failRate) {
+					reject({ message: 'injected failure on ' + name, code: 'server:injected' })
+				} else {
+					resolve()
+				}
+				reject = resolve = () => { }
+			}, waitMinMsec + wait)
+		})
+	}
+	// Only simulate when there is a debug string. Otherwise it would always interfere
+	// with setting options.aborter.
+	let json: string = ''
+	try {
+		json = window.localStorage.getItem('sherpats-debug') || ''
+	} catch (err) {}
+	if (json) {
+		await simulate(json)
+	}
+
+	// Immediately create promise, so options.aborter is changed before returning.
+	const promise = new Promise((resolve, reject) => {
+		let resolve1 = (v: { code: string, message: string }) => {
+			resolve(v)
+			resolve1 = () => { }
+			reject1 = () => { }
+		}
+		let reject1 = (v: { code: string, message: string }) => {
+			reject(v)
+			resolve1 = () => { }
+			reject1 = () => { }
+		}
+
+		const url = baseURL + name
+		const req = new window.XMLHttpRequest()
+		if (options.aborter) {
+			options.aborter.abort = () => {
+				req.abort()
+				reject1({ code: 'sherpa:aborted', message: 'request aborted' })
+			}
+		}
+		req.open('POST', url, true)
+		if (options.timeoutMsec) {
+			req.timeout = options.timeoutMsec
+		}
+		req.onload = () => {
+			if (req.status !== 200) {
+				if (req.status === 404) {
+					reject1({ code: 'sherpa:badFunction', message: 'function does not exist' })
+				} else {
+					reject1({ code: 'sherpa:http', message: 'error calling function, HTTP status: ' + req.status })
+				}
+				return
+			}
+
+			let resp: any
+			try {
+				resp = JSON.parse(req.responseText)
+			} catch (err) {
+				reject1({ code: 'sherpa:badResponse', message: 'bad JSON from server' })
+				return
+			}
+			if (resp && resp.error) {
+				const err = resp.error
+				reject1({ code: err.code, message: err.message })
+				return
+			} else if (!resp || !resp.hasOwnProperty('result')) {
+				reject1({ code: 'sherpa:badResponse', message: "invalid sherpa response object, missing 'result'" })
+				return
+			}
+
+			if (options.skipReturnCheck) {
+				resolve1(resp.result)
+				return
+			}
+			let result = resp.result
+			try {
+				if (returnTypes.length === 0) {
+					if (result) {
+						throw new Error('function ' + name + ' returned a value while prototype says it returns "void"')
+					}
+				} else if (returnTypes.length === 1) {
+					result = verifyArg('result', result, returnTypes[0], true, true, types, options)
+				} else {
+					if (result.length != returnTypes.length) {
+						throw new Error('wrong number of values returned by ' + name + ', saw ' + result.length + ' != expected ' + returnTypes.length)
+					}
+					result = result.map((v: any, index: number) => verifyArg('result[' + index + ']', v, returnTypes[index], true, true, types, options))
+				}
+			} catch (err) {
+				let errmsg = 'bad types'
+				if (err instanceof Error) {
+					errmsg = err.message
+				}
+				reject1({ code: 'sherpa:badTypes', message: errmsg })
+			}
+			resolve1(result)
+		}
+		req.onerror = () => {
+			reject1({ code: 'sherpa:connection', message: 'connection failed' })
+		}
+		req.ontimeout = () => {
+			reject1({ code: 'sherpa:timeout', message: 'request timeout' })
+		}
+		req.setRequestHeader('Content-Type', 'application/json')
+		try {
+			req.send(JSON.stringify({ params: params }))
+		} catch (err) {
+			reject1({ code: 'sherpa:badData', message: 'cannot marshal to JSON' })
+		}
+	})
+	return await promise
+}
+
+}

webadmin/admin.go

@@ -18,11 +18,11 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
-	"io"
 	"net"
 	"net/http"
 	"net/url"
 	"os"
+	"path/filepath"
 	"reflect"
 	"runtime/debug"
 	"sort"
@@ -67,12 +67,22 @@ import (
 
 var pkglog = mlog.New("webadmin", nil)
 
-//go:embed adminapi.json
+//go:embed api.json
 var adminapiJSON []byte
 
 //go:embed admin.html
 var adminHTML []byte
 
+//go:embed admin.js
+var adminJS []byte
+
+var webadminFile = &mox.WebappFile{
+	HTML:     adminHTML,
+	JS:       adminJS,
+	HTMLPath: filepath.FromSlash("webadmin/admin.html"),
+	JSPath:   filepath.FromSlash("webadmin/admin.js"),
+}
+
 var adminDoc = mustParseAPI("admin", adminapiJSON)
 
 var adminSherpaHandler http.Handler
@@ -206,18 +216,15 @@ func Handle(w http.ResponseWriter, r *http.Request) {
 		lw.AddAttr(slog.Bool("authadmin", true))
 	}
 
-	if r.Method == "GET" && r.URL.Path == "/" {
-		w.Header().Set("Content-Type", "text/html; charset=utf-8")
-		w.Header().Set("Cache-Control", "no-cache; max-age=0")
-		// We typically return the embedded admin.html, but during development it's handy
-		// to load from disk.
-		f, err := os.Open("webadmin/admin.html")
-		if err == nil {
-			defer f.Close()
-			_, _ = io.Copy(w, f)
-		} else {
-			_, _ = w.Write(adminHTML)
+	if r.URL.Path == "/" {
+		switch r.Method {
+		default:
+			http.Error(w, "405 - method not allowed - use get", http.StatusMethodNotAllowed)
+			return
+		case "GET", "HEAD":
 		}
+
+		webadminFile.Serve(ctx, pkglog.WithContext(ctx), w, r)
 		return
 	}
 	adminSherpaHandler.ServeHTTP(w, r.WithContext(ctx))
@@ -338,7 +345,7 @@ type MTASTSCheckResult struct {
 }
 
 type SRVConfCheckResult struct {
-	SRVs map[string][]*net.SRV // Service (e.g. "_imaps") to records.
+	SRVs map[string][]net.SRV // Service (e.g. "_imaps") to records.
 	Result
 }
 
@@ -416,6 +423,17 @@ func (Admin) CheckDomain(ctx context.Context, domainName string) (r CheckResult)
 	return checkDomain(nctx, resolver, dialer, domainName)
 }
 
+func unptr[T any](l []*T) []T {
+	if l == nil {
+		return nil
+	}
+	r := make([]T, len(l))
+	for i, e := range l {
+		r[i] = *e
+	}
+	return r
+}
+
 func checkDomain(ctx context.Context, resolver dns.Resolver, dialer *net.Dialer, domainName string) (r CheckResult) {
 	log := pkglog.WithContext(ctx)
 
@@ -1362,11 +1380,11 @@ When enabling MTA-STS, or updating a policy, always update the policy first (thr
 		srvwg.Wait()
 
 		instr := "Ensure DNS records like the following exist:\n\n"
-		r.SRVConf.SRVs = map[string][]*net.SRV{}
+		r.SRVConf.SRVs = map[string][]net.SRV{}
 		for _, req := range reqs {
 			name := req.name + "_.tcp." + domain.ASCII
 			instr += fmt.Sprintf("\t%s._tcp.%-*s SRV 0 1 %d %s\n", req.name, len("_submissions")-len(req.name)+len(domain.ASCII+"."), domain.ASCII+".", req.port, req.host)
-			r.SRVConf.SRVs[req.name] = req.srvs
+			r.SRVConf.SRVs[req.name] = unptr(req.srvs)
 			if err != nil {
 				addf(&r.SRVConf.Errors, "Looking up SRV record %q: %s", name, err)
 			} else if len(req.srvs) == 0 {

webadmin/api.json

@@ -2157,7 +2157,6 @@
 					"Typewords": [
 						"{}",
 						"[]",
-						"nullable",
 						"SRV"
 					]
 				},
@@ -2496,38 +2495,38 @@
 		},
 		{
 			"Name": "Report",
-			"Docs": "Report is a TLSRPT report, transmitted in JSON format.",
+			"Docs": "Report is a TLSRPT report.",
 			"Fields": [
 				{
-					"Name": "organization-name",
+					"Name": "OrganizationName",
 					"Docs": "",
 					"Typewords": [
 						"string"
 					]
 				},
 				{
-					"Name": "date-range",
+					"Name": "DateRange",
 					"Docs": "",
 					"Typewords": [
 						"TLSRPTDateRange"
 					]
 				},
 				{
-					"Name": "contact-info",
-					"Docs": "Email address.",
-					"Typewords": [
-						"string"
-					]
-				},
-				{
-					"Name": "report-id",
+					"Name": "ContactInfo",
 					"Docs": "",
 					"Typewords": [
 						"string"
 					]
 				},
 				{
-					"Name": "policies",
+					"Name": "ReportID",
+					"Docs": "",
+					"Typewords": [
+						"string"
+					]
+				},
+				{
+					"Name": "Policies",
 					"Docs": "",
 					"Typewords": [
 						"[]",
@@ -2541,14 +2540,14 @@
 			"Docs": "note: with TLSRPT prefix to prevent clash in sherpadoc types.",
 			"Fields": [
 				{
-					"Name": "start-datetime",
+					"Name": "Start",
 					"Docs": "",
 					"Typewords": [
 						"timestamp"
 					]
 				},
 				{
-					"Name": "end-datetime",
+					"Name": "End",
 					"Docs": "",
 					"Typewords": [
 						"timestamp"
@@ -2561,21 +2560,21 @@
 			"Docs": "",
 			"Fields": [
 				{
-					"Name": "policy",
+					"Name": "Policy",
 					"Docs": "",
 					"Typewords": [
 						"ResultPolicy"
 					]
 				},
 				{
-					"Name": "summary",
+					"Name": "Summary",
 					"Docs": "",
 					"Typewords": [
 						"Summary"
 					]
 				},
 				{
-					"Name": "failure-details",
+					"Name": "FailureDetails",
 					"Docs": "",
 					"Typewords": [
 						"[]",
@@ -2589,14 +2588,14 @@
 			"Docs": "",
 			"Fields": [
 				{
-					"Name": "policy-type",
+					"Name": "Type",
 					"Docs": "",
 					"Typewords": [
 						"PolicyType"
 					]
 				},
 				{
-					"Name": "policy-string",
+					"Name": "String",
 					"Docs": "",
 					"Typewords": [
 						"[]",
@@ -2604,15 +2603,15 @@
 					]
 				},
 				{
-					"Name": "policy-domain",
+					"Name": "Domain",
 					"Docs": "",
 					"Typewords": [
 						"string"
 					]
 				},
 				{
-					"Name": "mx-host",
-					"Docs": "Example in RFC has errata, it originally was a single string. ../rfc/8460-eid6241 ../rfc/8460:1779",
+					"Name": "MXHost",
+					"Docs": "",
 					"Typewords": [
 						"[]",
 						"string"
@@ -2625,14 +2624,14 @@
 			"Docs": "",
 			"Fields": [
 				{
-					"Name": "total-successful-session-count",
+					"Name": "TotalSuccessfulSessionCount",
 					"Docs": "",
 					"Typewords": [
 						"int64"
 					]
 				},
 				{
-					"Name": "total-failure-session-count",
+					"Name": "TotalFailureSessionCount",
 					"Docs": "",
 					"Typewords": [
 						"int64"
@@ -2645,57 +2644,56 @@
 			"Docs": "",
 			"Fields": [
 				{
-					"Name": "result-type",
+					"Name": "ResultType",
 					"Docs": "",
 					"Typewords": [
 						"ResultType"
 					]
 				},
 				{
-					"Name": "sending-mta-ip",
+					"Name": "SendingMTAIP",
 					"Docs": "",
 					"Typewords": [
 						"string"
 					]
 				},
 				{
-					"Name": "receiving-mx-hostname",
+					"Name": "ReceivingMXHostname",
 					"Docs": "",
 					"Typewords": [
 						"string"
 					]
 				},
 				{
-					"Name": "receiving-mx-helo",
-					"Docs": "",
-					"Typewords": [
-						"nullable",
-						"string"
-					]
-				},
-				{
-					"Name": "receiving-ip",
+					"Name": "ReceivingMXHelo",
 					"Docs": "",
 					"Typewords": [
 						"string"
 					]
 				},
 				{
-					"Name": "failed-session-count",
+					"Name": "ReceivingIP",
+					"Docs": "",
+					"Typewords": [
+						"string"
+					]
+				},
+				{
+					"Name": "FailedSessionCount",
 					"Docs": "",
 					"Typewords": [
 						"int64"
 					]
 				},
 				{
-					"Name": "additional-information",
+					"Name": "AdditionalInformation",
 					"Docs": "",
 					"Typewords": [
 						"string"
 					]
 				},
 				{
-					"Name": "failure-reason-code",
+					"Name": "FailureReasonCode",
 					"Docs": "",
 					"Typewords": [
 						"string"

webmail/lib.ts

@@ -1,217 +1,5 @@
 // Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
 
-type ElemArg = string | String | Element | Function | {_class: string[]} | {_attrs: {[k: string]: string}} | {_styles: {[k: string]: string | number}} | {_props: {[k: string]: any}} | {root: HTMLElement} | ElemArg[]
-
-const [dom, style, attr, prop] = (function() {
-
-// Start of unicode block (rough approximation of script), from https://www.unicode.org/Public/UNIDATA/Blocks.txt
-const scriptblocks = [0x0000, 0x0080, 0x0100, 0x0180, 0x0250, 0x02B0, 0x0300, 0x0370, 0x0400, 0x0500, 0x0530, 0x0590, 0x0600, 0x0700, 0x0750, 0x0780, 0x07C0, 0x0800, 0x0840, 0x0860, 0x0870, 0x08A0, 0x0900, 0x0980, 0x0A00, 0x0A80, 0x0B00, 0x0B80, 0x0C00, 0x0C80, 0x0D00, 0x0D80, 0x0E00, 0x0E80, 0x0F00, 0x1000, 0x10A0, 0x1100, 0x1200, 0x1380, 0x13A0, 0x1400, 0x1680, 0x16A0, 0x1700, 0x1720, 0x1740, 0x1760, 0x1780, 0x1800, 0x18B0, 0x1900, 0x1950, 0x1980, 0x19E0, 0x1A00, 0x1A20, 0x1AB0, 0x1B00, 0x1B80, 0x1BC0, 0x1C00, 0x1C50, 0x1C80, 0x1C90, 0x1CC0, 0x1CD0, 0x1D00, 0x1D80, 0x1DC0, 0x1E00, 0x1F00, 0x2000, 0x2070, 0x20A0, 0x20D0, 0x2100, 0x2150, 0x2190, 0x2200, 0x2300, 0x2400, 0x2440, 0x2460, 0x2500, 0x2580, 0x25A0, 0x2600, 0x2700, 0x27C0, 0x27F0, 0x2800, 0x2900, 0x2980, 0x2A00, 0x2B00, 0x2C00, 0x2C60, 0x2C80, 0x2D00, 0x2D30, 0x2D80, 0x2DE0, 0x2E00, 0x2E80, 0x2F00, 0x2FF0, 0x3000, 0x3040, 0x30A0, 0x3100, 0x3130, 0x3190, 0x31A0, 0x31C0, 0x31F0, 0x3200, 0x3300, 0x3400, 0x4DC0, 0x4E00, 0xA000, 0xA490, 0xA4D0, 0xA500, 0xA640, 0xA6A0, 0xA700, 0xA720, 0xA800, 0xA830, 0xA840, 0xA880, 0xA8E0, 0xA900, 0xA930, 0xA960, 0xA980, 0xA9E0, 0xAA00, 0xAA60, 0xAA80, 0xAAE0, 0xAB00, 0xAB30, 0xAB70, 0xABC0, 0xAC00, 0xD7B0, 0xD800, 0xDB80, 0xDC00, 0xE000, 0xF900, 0xFB00, 0xFB50, 0xFE00, 0xFE10, 0xFE20, 0xFE30, 0xFE50, 0xFE70, 0xFF00, 0xFFF0, 0x10000, 0x10080, 0x10100, 0x10140, 0x10190, 0x101D0, 0x10280, 0x102A0, 0x102E0, 0x10300, 0x10330, 0x10350, 0x10380, 0x103A0, 0x10400, 0x10450, 0x10480, 0x104B0, 0x10500, 0x10530, 0x10570, 0x10600, 0x10780, 0x10800, 0x10840, 0x10860, 0x10880, 0x108E0, 0x10900, 0x10920, 0x10980, 0x109A0, 0x10A00, 0x10A60, 0x10A80, 0x10AC0, 0x10B00, 0x10B40, 0x10B60, 0x10B80, 0x10C00, 0x10C80, 0x10D00, 0x10E60, 0x10E80, 0x10EC0, 0x10F00, 0x10F30, 0x10F70, 0x10FB0, 0x10FE0, 0x11000, 0x11080, 0x110D0, 0x11100, 0x11150, 0x11180, 0x111E0, 0x11200, 0x11280, 0x112B0, 0x11300, 0x11400, 0x11480, 0x11580, 0x11600, 0x11660, 0x11680, 0x11700, 0x11800, 0x118A0, 0x11900, 0x119A0, 0x11A00, 0x11A50, 0x11AB0, 0x11AC0, 0x11B00, 0x11C00, 0x11C70, 0x11D00, 0x11D60, 0x11EE0, 0x11F00, 0x11FB0, 0x11FC0, 0x12000, 0x12400, 0x12480, 0x12F90, 0x13000, 0x13430, 0x14400, 0x16800, 0x16A40, 0x16A70, 0x16AD0, 0x16B00, 0x16E40, 0x16F00, 0x16FE0, 0x17000, 0x18800, 0x18B00, 0x18D00, 0x1AFF0, 0x1B000, 0x1B100, 0x1B130, 0x1B170, 0x1BC00, 0x1BCA0, 0x1CF00, 0x1D000, 0x1D100, 0x1D200, 0x1D2C0, 0x1D2E0, 0x1D300, 0x1D360, 0x1D400, 0x1D800, 0x1DF00, 0x1E000, 0x1E030, 0x1E100, 0x1E290, 0x1E2C0, 0x1E4D0, 0x1E7E0, 0x1E800, 0x1E900, 0x1EC70, 0x1ED00, 0x1EE00, 0x1F000, 0x1F030, 0x1F0A0, 0x1F100, 0x1F200, 0x1F300, 0x1F600, 0x1F650, 0x1F680, 0x1F700, 0x1F780, 0x1F800, 0x1F900, 0x1FA00, 0x1FA70, 0x1FB00, 0x20000, 0x2A700, 0x2B740, 0x2B820, 0x2CEB0, 0x2F800, 0x30000, 0x31350, 0xE0000, 0xE0100, 0xF0000, 0x100000]
-
-// Find block code belongs in.
-const findBlock = (code: number): number => {
-	let s = 0
-	let e = scriptblocks.length
-	while (s < e-1) {
-		let i = Math.floor((s+e)/2)
-		if (code < scriptblocks[i]) {
-			e = i
-		} else {
-			s = i
-		}
-	}
-	return s
-}
-
-// formatText adds s to element e, in a way that makes switching unicode scripts
-// clear, with alternating DOM TextNode and span elements with a "switchscript"
-// class. Useful for highlighting look alikes, e.g. a (ascii 0x61) and а (cyrillic
-// 0x430).
-//
-// This is only called one string at a time, so the UI can still display strings
-// without highlighting switching scripts, by calling formatText on the parts.
-const formatText = (e: HTMLElement, s: string): void => {
-	// Handle some common cases quickly.
-	if (!s) {
-		return
-	}
-	let ascii = true
-	for (const c of s) {
-		const cp = c.codePointAt(0) // For typescript, to check for undefined.
-		if (cp !== undefined && cp >= 0x0080) {
-			ascii = false
-			break
-		}
-	}
-	if (ascii) {
-		e.appendChild(document.createTextNode(s))
-		return
-	}
-
-	// todo: handle grapheme clusters? wait for Intl.Segmenter?
-
-	let n = 0 // Number of text/span parts added.
-	let str = '' // Collected so far.
-	let block = -1 // Previous block/script.
-	let mod = 1
-	const put = (nextblock: number) => {
-		if (n === 0 && nextblock === 0) {
-			// Start was non-ascii, second block is ascii, we'll start marked as switched.
-			mod = 0
-		}
-		if (n % 2 === mod) {
-			const x = document.createElement('span')
-			x.classList.add('scriptswitch')
-			x.appendChild(document.createTextNode(str))
-			e.appendChild(x)
-		} else {
-			e.appendChild(document.createTextNode(str))
-		}
-		n++
-		str = ''
-	}
-	for (const c of s) {
-		// Basic whitespace does not switch blocks. Will probably need to extend with more
-		// punctuation in the future. Possibly for digits too. But perhaps not in all
-		// scripts.
-		if (c === ' ' || c === '\t' || c === '\r' || c === '\n') {
-			str += c
-			continue
-		}
-		const code: number = c.codePointAt(0) as number
-		if (block < 0 || !(code >= scriptblocks[block] && (code < scriptblocks[block+1] || block === scriptblocks.length-1))) {
-			const nextblock = code < 0x0080 ? 0 : findBlock(code)
-			if (block >= 0) {
-				put(nextblock)
-			}
-			block = nextblock
-		}
-		str += c
-	}
-	put(-1)
-}
-
-const _domKids = <T extends HTMLElement>(e: T, l: ElemArg[]): T => {
-	l.forEach((c) => {
-		const xc = c as {[k: string]: any}
-		if (typeof c === 'string') {
-			formatText(e, c)
-		} else if (c instanceof String) {
-			// String is an escape-hatch for text that should not be formatted with
-			// unicode-block-change-highlighting, e.g. for textarea values.
-			e.appendChild(document.createTextNode(''+c))
-		} else if (c instanceof Element) {
-			e.appendChild(c)
-		} else if (c instanceof Function) {
-			if (!c.name) {
-				throw new Error('function without name')
-			}
-			e.addEventListener(c.name as string, c as EventListener)
-		} else if (Array.isArray(xc)) {
-			_domKids(e, c as ElemArg[])
-		} else if (xc._class) {
-			for (const s of xc._class) {
-				e.classList.toggle(s, true)
-			}
-		} else if (xc._attrs) {
-			for (const k in xc._attrs) {
-				e.setAttribute(k, xc._attrs[k])
-			}
-		} else if (xc._styles) {
-			for (const k in xc._styles) {
-				const estyle: {[k: string]: any} = e.style
-				estyle[k as string] = xc._styles[k]
-			}
-		} else if (xc._props) {
-			for (const k in xc._props) {
-				const eprops: {[k: string]: any} = e
-				eprops[k] = xc._props[k]
-			}
-		} else if (xc.root) {
-			e.appendChild(xc.root)
-		} else {
-			console.log('bad kid', c)
-			throw new Error('bad kid')
-		}
-	})
-	return e
-}
-const dom = {
-	_kids: function(e: HTMLElement, ...kl: ElemArg[]) {
-		while(e.firstChild) {
-			e.removeChild(e.firstChild)
-		}
-		_domKids(e, kl)
-	},
-	_attrs: (x: {[k: string]: string}) => { return {_attrs: x}},
-	_class: (...x: string[]) => { return {_class: x}},
-	// The createElement calls are spelled out so typescript can derive function
-	// signatures with a specific HTML*Element return type.
-	div: (...l: ElemArg[]) => _domKids(document.createElement('div'), l),
-	span: (...l: ElemArg[]) => _domKids(document.createElement('span'), l),
-	a: (...l: ElemArg[]) => _domKids(document.createElement('a'), l),
-	input: (...l: ElemArg[]) => _domKids(document.createElement('input'), l),
-	textarea: (...l: ElemArg[]) => _domKids(document.createElement('textarea'), l),
-	select: (...l: ElemArg[]) => _domKids(document.createElement('select'), l),
-	option: (...l: ElemArg[]) => _domKids(document.createElement('option'), l),
-	clickbutton: (...l: ElemArg[]) => _domKids(document.createElement('button'), [attr.type('button'), ...l]),
-	submitbutton: (...l: ElemArg[]) => _domKids(document.createElement('button'), [attr.type('submit'), ...l]),
-	form: (...l: ElemArg[]) => _domKids(document.createElement('form'), l),
-	fieldset: (...l: ElemArg[]) => _domKids(document.createElement('fieldset'), l),
-	table: (...l: ElemArg[]) => _domKids(document.createElement('table'), l),
-	thead: (...l: ElemArg[]) => _domKids(document.createElement('thead'), l),
-	tbody: (...l: ElemArg[]) => _domKids(document.createElement('tbody'), l),
-	tr: (...l: ElemArg[]) => _domKids(document.createElement('tr'), l),
-	td: (...l: ElemArg[]) => _domKids(document.createElement('td'), l),
-	th: (...l: ElemArg[]) => _domKids(document.createElement('th'), l),
-	datalist: (...l: ElemArg[]) => _domKids(document.createElement('datalist'), l),
-	h1: (...l: ElemArg[]) => _domKids(document.createElement('h1'), l),
-	h2: (...l: ElemArg[]) => _domKids(document.createElement('h2'), l),
-	br: (...l: ElemArg[]) => _domKids(document.createElement('br'), l),
-	hr: (...l: ElemArg[]) => _domKids(document.createElement('hr'), l),
-	pre: (...l: ElemArg[]) => _domKids(document.createElement('pre'), l),
-	label: (...l: ElemArg[]) => _domKids(document.createElement('label'), l),
-	ul: (...l: ElemArg[]) => _domKids(document.createElement('ul'), l),
-	li: (...l: ElemArg[]) => _domKids(document.createElement('li'), l),
-	iframe: (...l: ElemArg[]) => _domKids(document.createElement('iframe'), l),
-	b: (...l: ElemArg[]) => _domKids(document.createElement('b'), l),
-	img: (...l: ElemArg[]) => _domKids(document.createElement('img'), l),
-	style: (...l: ElemArg[]) => _domKids(document.createElement('style'), l),
-	search: (...l: ElemArg[]) => _domKids(document.createElement('search'), l),
-}
-const _attr = (k: string, v: string) => { const o: {[key: string]: string} = {}; o[k] = v; return {_attrs: o} }
-const attr = {
-	title: (s: string) => _attr('title', s),
-	value: (s: string) => _attr('value', s),
-	type: (s: string) => _attr('type', s),
-	tabindex: (s: string) => _attr('tabindex', s),
-	src: (s: string) => _attr('src', s),
-	placeholder: (s: string) => _attr('placeholder', s),
-	href: (s: string) => _attr('href', s),
-	checked: (s: string) => _attr('checked', s),
-	selected: (s: string) => _attr('selected', s),
-	id: (s: string) => _attr('id', s),
-	datalist: (s: string) => _attr('datalist', s),
-	rows: (s: string) => _attr('rows', s),
-	target: (s: string) => _attr('target', s),
-	rel: (s: string) => _attr('rel', s),
-	required: (s: string) => _attr('required', s),
-	multiple: (s: string) => _attr('multiple', s),
-	download: (s: string) => _attr('download', s),
-	disabled: (s: string) => _attr('disabled', s),
-	draggable: (s: string) => _attr('draggable', s),
-	rowspan: (s: string) => _attr('rowspan', s),
-	colspan: (s: string) => _attr('colspan', s),
-	for: (s: string) => _attr('for', s),
-	role: (s: string) => _attr('role', s),
-	arialabel: (s: string) => _attr('aria-label', s),
-	arialive: (s: string) => _attr('aria-live', s),
-	name: (s: string) => _attr('name', s)
-}
-const style = (x: {[k: string]: string | number}) => { return {_styles: x}}
-const prop = (x: {[k: string]: any}) => { return {_props: x}}
-return [dom, style, attr, prop]
-})()
-
 // For authentication/security results.
 const underlineGreen = '#50c40f'
 const underlineRed = '#e15d1c'

webmail/msg.js

@@ -1,4 +1,225 @@
 "use strict";
+// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
+const [dom, style, attr, prop] = (function () {
+	// Start of unicode block (rough approximation of script), from https://www.unicode.org/Public/UNIDATA/Blocks.txt
+	const scriptblocks = [0x0000, 0x0080, 0x0100, 0x0180, 0x0250, 0x02B0, 0x0300, 0x0370, 0x0400, 0x0500, 0x0530, 0x0590, 0x0600, 0x0700, 0x0750, 0x0780, 0x07C0, 0x0800, 0x0840, 0x0860, 0x0870, 0x08A0, 0x0900, 0x0980, 0x0A00, 0x0A80, 0x0B00, 0x0B80, 0x0C00, 0x0C80, 0x0D00, 0x0D80, 0x0E00, 0x0E80, 0x0F00, 0x1000, 0x10A0, 0x1100, 0x1200, 0x1380, 0x13A0, 0x1400, 0x1680, 0x16A0, 0x1700, 0x1720, 0x1740, 0x1760, 0x1780, 0x1800, 0x18B0, 0x1900, 0x1950, 0x1980, 0x19E0, 0x1A00, 0x1A20, 0x1AB0, 0x1B00, 0x1B80, 0x1BC0, 0x1C00, 0x1C50, 0x1C80, 0x1C90, 0x1CC0, 0x1CD0, 0x1D00, 0x1D80, 0x1DC0, 0x1E00, 0x1F00, 0x2000, 0x2070, 0x20A0, 0x20D0, 0x2100, 0x2150, 0x2190, 0x2200, 0x2300, 0x2400, 0x2440, 0x2460, 0x2500, 0x2580, 0x25A0, 0x2600, 0x2700, 0x27C0, 0x27F0, 0x2800, 0x2900, 0x2980, 0x2A00, 0x2B00, 0x2C00, 0x2C60, 0x2C80, 0x2D00, 0x2D30, 0x2D80, 0x2DE0, 0x2E00, 0x2E80, 0x2F00, 0x2FF0, 0x3000, 0x3040, 0x30A0, 0x3100, 0x3130, 0x3190, 0x31A0, 0x31C0, 0x31F0, 0x3200, 0x3300, 0x3400, 0x4DC0, 0x4E00, 0xA000, 0xA490, 0xA4D0, 0xA500, 0xA640, 0xA6A0, 0xA700, 0xA720, 0xA800, 0xA830, 0xA840, 0xA880, 0xA8E0, 0xA900, 0xA930, 0xA960, 0xA980, 0xA9E0, 0xAA00, 0xAA60, 0xAA80, 0xAAE0, 0xAB00, 0xAB30, 0xAB70, 0xABC0, 0xAC00, 0xD7B0, 0xD800, 0xDB80, 0xDC00, 0xE000, 0xF900, 0xFB00, 0xFB50, 0xFE00, 0xFE10, 0xFE20, 0xFE30, 0xFE50, 0xFE70, 0xFF00, 0xFFF0, 0x10000, 0x10080, 0x10100, 0x10140, 0x10190, 0x101D0, 0x10280, 0x102A0, 0x102E0, 0x10300, 0x10330, 0x10350, 0x10380, 0x103A0, 0x10400, 0x10450, 0x10480, 0x104B0, 0x10500, 0x10530, 0x10570, 0x10600, 0x10780, 0x10800, 0x10840, 0x10860, 0x10880, 0x108E0, 0x10900, 0x10920, 0x10980, 0x109A0, 0x10A00, 0x10A60, 0x10A80, 0x10AC0, 0x10B00, 0x10B40, 0x10B60, 0x10B80, 0x10C00, 0x10C80, 0x10D00, 0x10E60, 0x10E80, 0x10EC0, 0x10F00, 0x10F30, 0x10F70, 0x10FB0, 0x10FE0, 0x11000, 0x11080, 0x110D0, 0x11100, 0x11150, 0x11180, 0x111E0, 0x11200, 0x11280, 0x112B0, 0x11300, 0x11400, 0x11480, 0x11580, 0x11600, 0x11660, 0x11680, 0x11700, 0x11800, 0x118A0, 0x11900, 0x119A0, 0x11A00, 0x11A50, 0x11AB0, 0x11AC0, 0x11B00, 0x11C00, 0x11C70, 0x11D00, 0x11D60, 0x11EE0, 0x11F00, 0x11FB0, 0x11FC0, 0x12000, 0x12400, 0x12480, 0x12F90, 0x13000, 0x13430, 0x14400, 0x16800, 0x16A40, 0x16A70, 0x16AD0, 0x16B00, 0x16E40, 0x16F00, 0x16FE0, 0x17000, 0x18800, 0x18B00, 0x18D00, 0x1AFF0, 0x1B000, 0x1B100, 0x1B130, 0x1B170, 0x1BC00, 0x1BCA0, 0x1CF00, 0x1D000, 0x1D100, 0x1D200, 0x1D2C0, 0x1D2E0, 0x1D300, 0x1D360, 0x1D400, 0x1D800, 0x1DF00, 0x1E000, 0x1E030, 0x1E100, 0x1E290, 0x1E2C0, 0x1E4D0, 0x1E7E0, 0x1E800, 0x1E900, 0x1EC70, 0x1ED00, 0x1EE00, 0x1F000, 0x1F030, 0x1F0A0, 0x1F100, 0x1F200, 0x1F300, 0x1F600, 0x1F650, 0x1F680, 0x1F700, 0x1F780, 0x1F800, 0x1F900, 0x1FA00, 0x1FA70, 0x1FB00, 0x20000, 0x2A700, 0x2B740, 0x2B820, 0x2CEB0, 0x2F800, 0x30000, 0x31350, 0xE0000, 0xE0100, 0xF0000, 0x100000];
+	// Find block code belongs in.
+	const findBlock = (code) => {
+		let s = 0;
+		let e = scriptblocks.length;
+		while (s < e - 1) {
+			let i = Math.floor((s + e) / 2);
+			if (code < scriptblocks[i]) {
+				e = i;
+			}
+			else {
+				s = i;
+			}
+		}
+		return s;
+	};
+	// formatText adds s to element e, in a way that makes switching unicode scripts
+	// clear, with alternating DOM TextNode and span elements with a "switchscript"
+	// class. Useful for highlighting look alikes, e.g. a (ascii 0x61) and а (cyrillic
+	// 0x430).
+	//
+	// This is only called one string at a time, so the UI can still display strings
+	// without highlighting switching scripts, by calling formatText on the parts.
+	const formatText = (e, s) => {
+		// Handle some common cases quickly.
+		if (!s) {
+			return;
+		}
+		let ascii = true;
+		for (const c of s) {
+			const cp = c.codePointAt(0); // For typescript, to check for undefined.
+			if (cp !== undefined && cp >= 0x0080) {
+				ascii = false;
+				break;
+			}
+		}
+		if (ascii) {
+			e.appendChild(document.createTextNode(s));
+			return;
+		}
+		// todo: handle grapheme clusters? wait for Intl.Segmenter?
+		let n = 0; // Number of text/span parts added.
+		let str = ''; // Collected so far.
+		let block = -1; // Previous block/script.
+		let mod = 1;
+		const put = (nextblock) => {
+			if (n === 0 && nextblock === 0) {
+				// Start was non-ascii, second block is ascii, we'll start marked as switched.
+				mod = 0;
+			}
+			if (n % 2 === mod) {
+				const x = document.createElement('span');
+				x.classList.add('scriptswitch');
+				x.appendChild(document.createTextNode(str));
+				e.appendChild(x);
+			}
+			else {
+				e.appendChild(document.createTextNode(str));
+			}
+			n++;
+			str = '';
+		};
+		for (const c of s) {
+			// Basic whitespace does not switch blocks. Will probably need to extend with more
+			// punctuation in the future. Possibly for digits too. But perhaps not in all
+			// scripts.
+			if (c === ' ' || c === '\t' || c === '\r' || c === '\n') {
+				str += c;
+				continue;
+			}
+			const code = c.codePointAt(0);
+			if (block < 0 || !(code >= scriptblocks[block] && (code < scriptblocks[block + 1] || block === scriptblocks.length - 1))) {
+				const nextblock = code < 0x0080 ? 0 : findBlock(code);
+				if (block >= 0) {
+					put(nextblock);
+				}
+				block = nextblock;
+			}
+			str += c;
+		}
+		put(-1);
+	};
+	const _domKids = (e, l) => {
+		l.forEach((c) => {
+			const xc = c;
+			if (typeof c === 'string') {
+				formatText(e, c);
+			}
+			else if (c instanceof String) {
+				// String is an escape-hatch for text that should not be formatted with
+				// unicode-block-change-highlighting, e.g. for textarea values.
+				e.appendChild(document.createTextNode('' + c));
+			}
+			else if (c instanceof Element) {
+				e.appendChild(c);
+			}
+			else if (c instanceof Function) {
+				if (!c.name) {
+					throw new Error('function without name');
+				}
+				e.addEventListener(c.name, c);
+			}
+			else if (Array.isArray(xc)) {
+				_domKids(e, c);
+			}
+			else if (xc._class) {
+				for (const s of xc._class) {
+					e.classList.toggle(s, true);
+				}
+			}
+			else if (xc._attrs) {
+				for (const k in xc._attrs) {
+					e.setAttribute(k, xc._attrs[k]);
+				}
+			}
+			else if (xc._styles) {
+				for (const k in xc._styles) {
+					const estyle = e.style;
+					estyle[k] = xc._styles[k];
+				}
+			}
+			else if (xc._props) {
+				for (const k in xc._props) {
+					const eprops = e;
+					eprops[k] = xc._props[k];
+				}
+			}
+			else if (xc.root) {
+				e.appendChild(xc.root);
+			}
+			else {
+				console.log('bad kid', c);
+				throw new Error('bad kid');
+			}
+		});
+		return e;
+	};
+	const dom = {
+		_kids: function (e, ...kl) {
+			while (e.firstChild) {
+				e.removeChild(e.firstChild);
+			}
+			_domKids(e, kl);
+		},
+		_attrs: (x) => { return { _attrs: x }; },
+		_class: (...x) => { return { _class: x }; },
+		// The createElement calls are spelled out so typescript can derive function
+		// signatures with a specific HTML*Element return type.
+		div: (...l) => _domKids(document.createElement('div'), l),
+		span: (...l) => _domKids(document.createElement('span'), l),
+		a: (...l) => _domKids(document.createElement('a'), l),
+		input: (...l) => _domKids(document.createElement('input'), l),
+		textarea: (...l) => _domKids(document.createElement('textarea'), l),
+		select: (...l) => _domKids(document.createElement('select'), l),
+		option: (...l) => _domKids(document.createElement('option'), l),
+		clickbutton: (...l) => _domKids(document.createElement('button'), [attr.type('button'), ...l]),
+		submitbutton: (...l) => _domKids(document.createElement('button'), [attr.type('submit'), ...l]),
+		form: (...l) => _domKids(document.createElement('form'), l),
+		fieldset: (...l) => _domKids(document.createElement('fieldset'), l),
+		table: (...l) => _domKids(document.createElement('table'), l),
+		thead: (...l) => _domKids(document.createElement('thead'), l),
+		tbody: (...l) => _domKids(document.createElement('tbody'), l),
+		tfoot: (...l) => _domKids(document.createElement('tfoot'), l),
+		tr: (...l) => _domKids(document.createElement('tr'), l),
+		td: (...l) => _domKids(document.createElement('td'), l),
+		th: (...l) => _domKids(document.createElement('th'), l),
+		datalist: (...l) => _domKids(document.createElement('datalist'), l),
+		h1: (...l) => _domKids(document.createElement('h1'), l),
+		h2: (...l) => _domKids(document.createElement('h2'), l),
+		h3: (...l) => _domKids(document.createElement('h3'), l),
+		br: (...l) => _domKids(document.createElement('br'), l),
+		hr: (...l) => _domKids(document.createElement('hr'), l),
+		pre: (...l) => _domKids(document.createElement('pre'), l),
+		label: (...l) => _domKids(document.createElement('label'), l),
+		ul: (...l) => _domKids(document.createElement('ul'), l),
+		li: (...l) => _domKids(document.createElement('li'), l),
+		iframe: (...l) => _domKids(document.createElement('iframe'), l),
+		b: (...l) => _domKids(document.createElement('b'), l),
+		img: (...l) => _domKids(document.createElement('img'), l),
+		style: (...l) => _domKids(document.createElement('style'), l),
+		search: (...l) => _domKids(document.createElement('search'), l),
+		p: (...l) => _domKids(document.createElement('p'), l),
+	};
+	const _attr = (k, v) => { const o = {}; o[k] = v; return { _attrs: o }; };
+	const attr = {
+		title: (s) => _attr('title', s),
+		value: (s) => _attr('value', s),
+		type: (s) => _attr('type', s),
+		tabindex: (s) => _attr('tabindex', s),
+		src: (s) => _attr('src', s),
+		placeholder: (s) => _attr('placeholder', s),
+		href: (s) => _attr('href', s),
+		checked: (s) => _attr('checked', s),
+		selected: (s) => _attr('selected', s),
+		id: (s) => _attr('id', s),
+		datalist: (s) => _attr('datalist', s),
+		rows: (s) => _attr('rows', s),
+		target: (s) => _attr('target', s),
+		rel: (s) => _attr('rel', s),
+		required: (s) => _attr('required', s),
+		multiple: (s) => _attr('multiple', s),
+		download: (s) => _attr('download', s),
+		disabled: (s) => _attr('disabled', s),
+		draggable: (s) => _attr('draggable', s),
+		rowspan: (s) => _attr('rowspan', s),
+		colspan: (s) => _attr('colspan', s),
+		for: (s) => _attr('for', s),
+		role: (s) => _attr('role', s),
+		arialabel: (s) => _attr('aria-label', s),
+		arialive: (s) => _attr('aria-live', s),
+		name: (s) => _attr('name', s),
+		min: (s) => _attr('min', s),
+		max: (s) => _attr('max', s),
+	};
+	const style = (x) => { return { _styles: x }; };
+	const prop = (x) => { return { _props: x }; };
+	return [dom, style, attr, prop];
+})();
 // NOTE: GENERATED by github.com/mjl-/sherpats, DO NOT MODIFY
 var api;
 (function (api) {
@@ -645,221 +866,6 @@ var api;
 	};
 })(api || (api = {}));
 // Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
-const [dom, style, attr, prop] = (function () {
-	// Start of unicode block (rough approximation of script), from https://www.unicode.org/Public/UNIDATA/Blocks.txt
-	const scriptblocks = [0x0000, 0x0080, 0x0100, 0x0180, 0x0250, 0x02B0, 0x0300, 0x0370, 0x0400, 0x0500, 0x0530, 0x0590, 0x0600, 0x0700, 0x0750, 0x0780, 0x07C0, 0x0800, 0x0840, 0x0860, 0x0870, 0x08A0, 0x0900, 0x0980, 0x0A00, 0x0A80, 0x0B00, 0x0B80, 0x0C00, 0x0C80, 0x0D00, 0x0D80, 0x0E00, 0x0E80, 0x0F00, 0x1000, 0x10A0, 0x1100, 0x1200, 0x1380, 0x13A0, 0x1400, 0x1680, 0x16A0, 0x1700, 0x1720, 0x1740, 0x1760, 0x1780, 0x1800, 0x18B0, 0x1900, 0x1950, 0x1980, 0x19E0, 0x1A00, 0x1A20, 0x1AB0, 0x1B00, 0x1B80, 0x1BC0, 0x1C00, 0x1C50, 0x1C80, 0x1C90, 0x1CC0, 0x1CD0, 0x1D00, 0x1D80, 0x1DC0, 0x1E00, 0x1F00, 0x2000, 0x2070, 0x20A0, 0x20D0, 0x2100, 0x2150, 0x2190, 0x2200, 0x2300, 0x2400, 0x2440, 0x2460, 0x2500, 0x2580, 0x25A0, 0x2600, 0x2700, 0x27C0, 0x27F0, 0x2800, 0x2900, 0x2980, 0x2A00, 0x2B00, 0x2C00, 0x2C60, 0x2C80, 0x2D00, 0x2D30, 0x2D80, 0x2DE0, 0x2E00, 0x2E80, 0x2F00, 0x2FF0, 0x3000, 0x3040, 0x30A0, 0x3100, 0x3130, 0x3190, 0x31A0, 0x31C0, 0x31F0, 0x3200, 0x3300, 0x3400, 0x4DC0, 0x4E00, 0xA000, 0xA490, 0xA4D0, 0xA500, 0xA640, 0xA6A0, 0xA700, 0xA720, 0xA800, 0xA830, 0xA840, 0xA880, 0xA8E0, 0xA900, 0xA930, 0xA960, 0xA980, 0xA9E0, 0xAA00, 0xAA60, 0xAA80, 0xAAE0, 0xAB00, 0xAB30, 0xAB70, 0xABC0, 0xAC00, 0xD7B0, 0xD800, 0xDB80, 0xDC00, 0xE000, 0xF900, 0xFB00, 0xFB50, 0xFE00, 0xFE10, 0xFE20, 0xFE30, 0xFE50, 0xFE70, 0xFF00, 0xFFF0, 0x10000, 0x10080, 0x10100, 0x10140, 0x10190, 0x101D0, 0x10280, 0x102A0, 0x102E0, 0x10300, 0x10330, 0x10350, 0x10380, 0x103A0, 0x10400, 0x10450, 0x10480, 0x104B0, 0x10500, 0x10530, 0x10570, 0x10600, 0x10780, 0x10800, 0x10840, 0x10860, 0x10880, 0x108E0, 0x10900, 0x10920, 0x10980, 0x109A0, 0x10A00, 0x10A60, 0x10A80, 0x10AC0, 0x10B00, 0x10B40, 0x10B60, 0x10B80, 0x10C00, 0x10C80, 0x10D00, 0x10E60, 0x10E80, 0x10EC0, 0x10F00, 0x10F30, 0x10F70, 0x10FB0, 0x10FE0, 0x11000, 0x11080, 0x110D0, 0x11100, 0x11150, 0x11180, 0x111E0, 0x11200, 0x11280, 0x112B0, 0x11300, 0x11400, 0x11480, 0x11580, 0x11600, 0x11660, 0x11680, 0x11700, 0x11800, 0x118A0, 0x11900, 0x119A0, 0x11A00, 0x11A50, 0x11AB0, 0x11AC0, 0x11B00, 0x11C00, 0x11C70, 0x11D00, 0x11D60, 0x11EE0, 0x11F00, 0x11FB0, 0x11FC0, 0x12000, 0x12400, 0x12480, 0x12F90, 0x13000, 0x13430, 0x14400, 0x16800, 0x16A40, 0x16A70, 0x16AD0, 0x16B00, 0x16E40, 0x16F00, 0x16FE0, 0x17000, 0x18800, 0x18B00, 0x18D00, 0x1AFF0, 0x1B000, 0x1B100, 0x1B130, 0x1B170, 0x1BC00, 0x1BCA0, 0x1CF00, 0x1D000, 0x1D100, 0x1D200, 0x1D2C0, 0x1D2E0, 0x1D300, 0x1D360, 0x1D400, 0x1D800, 0x1DF00, 0x1E000, 0x1E030, 0x1E100, 0x1E290, 0x1E2C0, 0x1E4D0, 0x1E7E0, 0x1E800, 0x1E900, 0x1EC70, 0x1ED00, 0x1EE00, 0x1F000, 0x1F030, 0x1F0A0, 0x1F100, 0x1F200, 0x1F300, 0x1F600, 0x1F650, 0x1F680, 0x1F700, 0x1F780, 0x1F800, 0x1F900, 0x1FA00, 0x1FA70, 0x1FB00, 0x20000, 0x2A700, 0x2B740, 0x2B820, 0x2CEB0, 0x2F800, 0x30000, 0x31350, 0xE0000, 0xE0100, 0xF0000, 0x100000];
-	// Find block code belongs in.
-	const findBlock = (code) => {
-		let s = 0;
-		let e = scriptblocks.length;
-		while (s < e - 1) {
-			let i = Math.floor((s + e) / 2);
-			if (code < scriptblocks[i]) {
-				e = i;
-			}
-			else {
-				s = i;
-			}
-		}
-		return s;
-	};
-	// formatText adds s to element e, in a way that makes switching unicode scripts
-	// clear, with alternating DOM TextNode and span elements with a "switchscript"
-	// class. Useful for highlighting look alikes, e.g. a (ascii 0x61) and а (cyrillic
-	// 0x430).
-	//
-	// This is only called one string at a time, so the UI can still display strings
-	// without highlighting switching scripts, by calling formatText on the parts.
-	const formatText = (e, s) => {
-		// Handle some common cases quickly.
-		if (!s) {
-			return;
-		}
-		let ascii = true;
-		for (const c of s) {
-			const cp = c.codePointAt(0); // For typescript, to check for undefined.
-			if (cp !== undefined && cp >= 0x0080) {
-				ascii = false;
-				break;
-			}
-		}
-		if (ascii) {
-			e.appendChild(document.createTextNode(s));
-			return;
-		}
-		// todo: handle grapheme clusters? wait for Intl.Segmenter?
-		let n = 0; // Number of text/span parts added.
-		let str = ''; // Collected so far.
-		let block = -1; // Previous block/script.
-		let mod = 1;
-		const put = (nextblock) => {
-			if (n === 0 && nextblock === 0) {
-				// Start was non-ascii, second block is ascii, we'll start marked as switched.
-				mod = 0;
-			}
-			if (n % 2 === mod) {
-				const x = document.createElement('span');
-				x.classList.add('scriptswitch');
-				x.appendChild(document.createTextNode(str));
-				e.appendChild(x);
-			}
-			else {
-				e.appendChild(document.createTextNode(str));
-			}
-			n++;
-			str = '';
-		};
-		for (const c of s) {
-			// Basic whitespace does not switch blocks. Will probably need to extend with more
-			// punctuation in the future. Possibly for digits too. But perhaps not in all
-			// scripts.
-			if (c === ' ' || c === '\t' || c === '\r' || c === '\n') {
-				str += c;
-				continue;
-			}
-			const code = c.codePointAt(0);
-			if (block < 0 || !(code >= scriptblocks[block] && (code < scriptblocks[block + 1] || block === scriptblocks.length - 1))) {
-				const nextblock = code < 0x0080 ? 0 : findBlock(code);
-				if (block >= 0) {
-					put(nextblock);
-				}
-				block = nextblock;
-			}
-			str += c;
-		}
-		put(-1);
-	};
-	const _domKids = (e, l) => {
-		l.forEach((c) => {
-			const xc = c;
-			if (typeof c === 'string') {
-				formatText(e, c);
-			}
-			else if (c instanceof String) {
-				// String is an escape-hatch for text that should not be formatted with
-				// unicode-block-change-highlighting, e.g. for textarea values.
-				e.appendChild(document.createTextNode('' + c));
-			}
-			else if (c instanceof Element) {
-				e.appendChild(c);
-			}
-			else if (c instanceof Function) {
-				if (!c.name) {
-					throw new Error('function without name');
-				}
-				e.addEventListener(c.name, c);
-			}
-			else if (Array.isArray(xc)) {
-				_domKids(e, c);
-			}
-			else if (xc._class) {
-				for (const s of xc._class) {
-					e.classList.toggle(s, true);
-				}
-			}
-			else if (xc._attrs) {
-				for (const k in xc._attrs) {
-					e.setAttribute(k, xc._attrs[k]);
-				}
-			}
-			else if (xc._styles) {
-				for (const k in xc._styles) {
-					const estyle = e.style;
-					estyle[k] = xc._styles[k];
-				}
-			}
-			else if (xc._props) {
-				for (const k in xc._props) {
-					const eprops = e;
-					eprops[k] = xc._props[k];
-				}
-			}
-			else if (xc.root) {
-				e.appendChild(xc.root);
-			}
-			else {
-				console.log('bad kid', c);
-				throw new Error('bad kid');
-			}
-		});
-		return e;
-	};
-	const dom = {
-		_kids: function (e, ...kl) {
-			while (e.firstChild) {
-				e.removeChild(e.firstChild);
-			}
-			_domKids(e, kl);
-		},
-		_attrs: (x) => { return { _attrs: x }; },
-		_class: (...x) => { return { _class: x }; },
-		// The createElement calls are spelled out so typescript can derive function
-		// signatures with a specific HTML*Element return type.
-		div: (...l) => _domKids(document.createElement('div'), l),
-		span: (...l) => _domKids(document.createElement('span'), l),
-		a: (...l) => _domKids(document.createElement('a'), l),
-		input: (...l) => _domKids(document.createElement('input'), l),
-		textarea: (...l) => _domKids(document.createElement('textarea'), l),
-		select: (...l) => _domKids(document.createElement('select'), l),
-		option: (...l) => _domKids(document.createElement('option'), l),
-		clickbutton: (...l) => _domKids(document.createElement('button'), [attr.type('button'), ...l]),
-		submitbutton: (...l) => _domKids(document.createElement('button'), [attr.type('submit'), ...l]),
-		form: (...l) => _domKids(document.createElement('form'), l),
-		fieldset: (...l) => _domKids(document.createElement('fieldset'), l),
-		table: (...l) => _domKids(document.createElement('table'), l),
-		thead: (...l) => _domKids(document.createElement('thead'), l),
-		tbody: (...l) => _domKids(document.createElement('tbody'), l),
-		tr: (...l) => _domKids(document.createElement('tr'), l),
-		td: (...l) => _domKids(document.createElement('td'), l),
-		th: (...l) => _domKids(document.createElement('th'), l),
-		datalist: (...l) => _domKids(document.createElement('datalist'), l),
-		h1: (...l) => _domKids(document.createElement('h1'), l),
-		h2: (...l) => _domKids(document.createElement('h2'), l),
-		br: (...l) => _domKids(document.createElement('br'), l),
-		hr: (...l) => _domKids(document.createElement('hr'), l),
-		pre: (...l) => _domKids(document.createElement('pre'), l),
-		label: (...l) => _domKids(document.createElement('label'), l),
-		ul: (...l) => _domKids(document.createElement('ul'), l),
-		li: (...l) => _domKids(document.createElement('li'), l),
-		iframe: (...l) => _domKids(document.createElement('iframe'), l),
-		b: (...l) => _domKids(document.createElement('b'), l),
-		img: (...l) => _domKids(document.createElement('img'), l),
-		style: (...l) => _domKids(document.createElement('style'), l),
-		search: (...l) => _domKids(document.createElement('search'), l),
-	};
-	const _attr = (k, v) => { const o = {}; o[k] = v; return { _attrs: o }; };
-	const attr = {
-		title: (s) => _attr('title', s),
-		value: (s) => _attr('value', s),
-		type: (s) => _attr('type', s),
-		tabindex: (s) => _attr('tabindex', s),
-		src: (s) => _attr('src', s),
-		placeholder: (s) => _attr('placeholder', s),
-		href: (s) => _attr('href', s),
-		checked: (s) => _attr('checked', s),
-		selected: (s) => _attr('selected', s),
-		id: (s) => _attr('id', s),
-		datalist: (s) => _attr('datalist', s),
-		rows: (s) => _attr('rows', s),
-		target: (s) => _attr('target', s),
-		rel: (s) => _attr('rel', s),
-		required: (s) => _attr('required', s),
-		multiple: (s) => _attr('multiple', s),
-		download: (s) => _attr('download', s),
-		disabled: (s) => _attr('disabled', s),
-		draggable: (s) => _attr('draggable', s),
-		rowspan: (s) => _attr('rowspan', s),
-		colspan: (s) => _attr('colspan', s),
-		for: (s) => _attr('for', s),
-		role: (s) => _attr('role', s),
-		arialabel: (s) => _attr('aria-label', s),
-		arialive: (s) => _attr('aria-live', s),
-		name: (s) => _attr('name', s)
-	};
-	const style = (x) => { return { _styles: x }; };
-	const prop = (x) => { return { _props: x }; };
-	return [dom, style, attr, prop];
-})();
 // For authentication/security results.
 const underlineGreen = '#50c40f';
 const underlineRed = '#e15d1c';

webmail/text.js

@@ -1,4 +1,225 @@
 "use strict";
+// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
+const [dom, style, attr, prop] = (function () {
+	// Start of unicode block (rough approximation of script), from https://www.unicode.org/Public/UNIDATA/Blocks.txt
+	const scriptblocks = [0x0000, 0x0080, 0x0100, 0x0180, 0x0250, 0x02B0, 0x0300, 0x0370, 0x0400, 0x0500, 0x0530, 0x0590, 0x0600, 0x0700, 0x0750, 0x0780, 0x07C0, 0x0800, 0x0840, 0x0860, 0x0870, 0x08A0, 0x0900, 0x0980, 0x0A00, 0x0A80, 0x0B00, 0x0B80, 0x0C00, 0x0C80, 0x0D00, 0x0D80, 0x0E00, 0x0E80, 0x0F00, 0x1000, 0x10A0, 0x1100, 0x1200, 0x1380, 0x13A0, 0x1400, 0x1680, 0x16A0, 0x1700, 0x1720, 0x1740, 0x1760, 0x1780, 0x1800, 0x18B0, 0x1900, 0x1950, 0x1980, 0x19E0, 0x1A00, 0x1A20, 0x1AB0, 0x1B00, 0x1B80, 0x1BC0, 0x1C00, 0x1C50, 0x1C80, 0x1C90, 0x1CC0, 0x1CD0, 0x1D00, 0x1D80, 0x1DC0, 0x1E00, 0x1F00, 0x2000, 0x2070, 0x20A0, 0x20D0, 0x2100, 0x2150, 0x2190, 0x2200, 0x2300, 0x2400, 0x2440, 0x2460, 0x2500, 0x2580, 0x25A0, 0x2600, 0x2700, 0x27C0, 0x27F0, 0x2800, 0x2900, 0x2980, 0x2A00, 0x2B00, 0x2C00, 0x2C60, 0x2C80, 0x2D00, 0x2D30, 0x2D80, 0x2DE0, 0x2E00, 0x2E80, 0x2F00, 0x2FF0, 0x3000, 0x3040, 0x30A0, 0x3100, 0x3130, 0x3190, 0x31A0, 0x31C0, 0x31F0, 0x3200, 0x3300, 0x3400, 0x4DC0, 0x4E00, 0xA000, 0xA490, 0xA4D0, 0xA500, 0xA640, 0xA6A0, 0xA700, 0xA720, 0xA800, 0xA830, 0xA840, 0xA880, 0xA8E0, 0xA900, 0xA930, 0xA960, 0xA980, 0xA9E0, 0xAA00, 0xAA60, 0xAA80, 0xAAE0, 0xAB00, 0xAB30, 0xAB70, 0xABC0, 0xAC00, 0xD7B0, 0xD800, 0xDB80, 0xDC00, 0xE000, 0xF900, 0xFB00, 0xFB50, 0xFE00, 0xFE10, 0xFE20, 0xFE30, 0xFE50, 0xFE70, 0xFF00, 0xFFF0, 0x10000, 0x10080, 0x10100, 0x10140, 0x10190, 0x101D0, 0x10280, 0x102A0, 0x102E0, 0x10300, 0x10330, 0x10350, 0x10380, 0x103A0, 0x10400, 0x10450, 0x10480, 0x104B0, 0x10500, 0x10530, 0x10570, 0x10600, 0x10780, 0x10800, 0x10840, 0x10860, 0x10880, 0x108E0, 0x10900, 0x10920, 0x10980, 0x109A0, 0x10A00, 0x10A60, 0x10A80, 0x10AC0, 0x10B00, 0x10B40, 0x10B60, 0x10B80, 0x10C00, 0x10C80, 0x10D00, 0x10E60, 0x10E80, 0x10EC0, 0x10F00, 0x10F30, 0x10F70, 0x10FB0, 0x10FE0, 0x11000, 0x11080, 0x110D0, 0x11100, 0x11150, 0x11180, 0x111E0, 0x11200, 0x11280, 0x112B0, 0x11300, 0x11400, 0x11480, 0x11580, 0x11600, 0x11660, 0x11680, 0x11700, 0x11800, 0x118A0, 0x11900, 0x119A0, 0x11A00, 0x11A50, 0x11AB0, 0x11AC0, 0x11B00, 0x11C00, 0x11C70, 0x11D00, 0x11D60, 0x11EE0, 0x11F00, 0x11FB0, 0x11FC0, 0x12000, 0x12400, 0x12480, 0x12F90, 0x13000, 0x13430, 0x14400, 0x16800, 0x16A40, 0x16A70, 0x16AD0, 0x16B00, 0x16E40, 0x16F00, 0x16FE0, 0x17000, 0x18800, 0x18B00, 0x18D00, 0x1AFF0, 0x1B000, 0x1B100, 0x1B130, 0x1B170, 0x1BC00, 0x1BCA0, 0x1CF00, 0x1D000, 0x1D100, 0x1D200, 0x1D2C0, 0x1D2E0, 0x1D300, 0x1D360, 0x1D400, 0x1D800, 0x1DF00, 0x1E000, 0x1E030, 0x1E100, 0x1E290, 0x1E2C0, 0x1E4D0, 0x1E7E0, 0x1E800, 0x1E900, 0x1EC70, 0x1ED00, 0x1EE00, 0x1F000, 0x1F030, 0x1F0A0, 0x1F100, 0x1F200, 0x1F300, 0x1F600, 0x1F650, 0x1F680, 0x1F700, 0x1F780, 0x1F800, 0x1F900, 0x1FA00, 0x1FA70, 0x1FB00, 0x20000, 0x2A700, 0x2B740, 0x2B820, 0x2CEB0, 0x2F800, 0x30000, 0x31350, 0xE0000, 0xE0100, 0xF0000, 0x100000];
+	// Find block code belongs in.
+	const findBlock = (code) => {
+		let s = 0;
+		let e = scriptblocks.length;
+		while (s < e - 1) {
+			let i = Math.floor((s + e) / 2);
+			if (code < scriptblocks[i]) {
+				e = i;
+			}
+			else {
+				s = i;
+			}
+		}
+		return s;
+	};
+	// formatText adds s to element e, in a way that makes switching unicode scripts
+	// clear, with alternating DOM TextNode and span elements with a "switchscript"
+	// class. Useful for highlighting look alikes, e.g. a (ascii 0x61) and а (cyrillic
+	// 0x430).
+	//
+	// This is only called one string at a time, so the UI can still display strings
+	// without highlighting switching scripts, by calling formatText on the parts.
+	const formatText = (e, s) => {
+		// Handle some common cases quickly.
+		if (!s) {
+			return;
+		}
+		let ascii = true;
+		for (const c of s) {
+			const cp = c.codePointAt(0); // For typescript, to check for undefined.
+			if (cp !== undefined && cp >= 0x0080) {
+				ascii = false;
+				break;
+			}
+		}
+		if (ascii) {
+			e.appendChild(document.createTextNode(s));
+			return;
+		}
+		// todo: handle grapheme clusters? wait for Intl.Segmenter?
+		let n = 0; // Number of text/span parts added.
+		let str = ''; // Collected so far.
+		let block = -1; // Previous block/script.
+		let mod = 1;
+		const put = (nextblock) => {
+			if (n === 0 && nextblock === 0) {
+				// Start was non-ascii, second block is ascii, we'll start marked as switched.
+				mod = 0;
+			}
+			if (n % 2 === mod) {
+				const x = document.createElement('span');
+				x.classList.add('scriptswitch');
+				x.appendChild(document.createTextNode(str));
+				e.appendChild(x);
+			}
+			else {
+				e.appendChild(document.createTextNode(str));
+			}
+			n++;
+			str = '';
+		};
+		for (const c of s) {
+			// Basic whitespace does not switch blocks. Will probably need to extend with more
+			// punctuation in the future. Possibly for digits too. But perhaps not in all
+			// scripts.
+			if (c === ' ' || c === '\t' || c === '\r' || c === '\n') {
+				str += c;
+				continue;
+			}
+			const code = c.codePointAt(0);
+			if (block < 0 || !(code >= scriptblocks[block] && (code < scriptblocks[block + 1] || block === scriptblocks.length - 1))) {
+				const nextblock = code < 0x0080 ? 0 : findBlock(code);
+				if (block >= 0) {
+					put(nextblock);
+				}
+				block = nextblock;
+			}
+			str += c;
+		}
+		put(-1);
+	};
+	const _domKids = (e, l) => {
+		l.forEach((c) => {
+			const xc = c;
+			if (typeof c === 'string') {
+				formatText(e, c);
+			}
+			else if (c instanceof String) {
+				// String is an escape-hatch for text that should not be formatted with
+				// unicode-block-change-highlighting, e.g. for textarea values.
+				e.appendChild(document.createTextNode('' + c));
+			}
+			else if (c instanceof Element) {
+				e.appendChild(c);
+			}
+			else if (c instanceof Function) {
+				if (!c.name) {
+					throw new Error('function without name');
+				}
+				e.addEventListener(c.name, c);
+			}
+			else if (Array.isArray(xc)) {
+				_domKids(e, c);
+			}
+			else if (xc._class) {
+				for (const s of xc._class) {
+					e.classList.toggle(s, true);
+				}
+			}
+			else if (xc._attrs) {
+				for (const k in xc._attrs) {
+					e.setAttribute(k, xc._attrs[k]);
+				}
+			}
+			else if (xc._styles) {
+				for (const k in xc._styles) {
+					const estyle = e.style;
+					estyle[k] = xc._styles[k];
+				}
+			}
+			else if (xc._props) {
+				for (const k in xc._props) {
+					const eprops = e;
+					eprops[k] = xc._props[k];
+				}
+			}
+			else if (xc.root) {
+				e.appendChild(xc.root);
+			}
+			else {
+				console.log('bad kid', c);
+				throw new Error('bad kid');
+			}
+		});
+		return e;
+	};
+	const dom = {
+		_kids: function (e, ...kl) {
+			while (e.firstChild) {
+				e.removeChild(e.firstChild);
+			}
+			_domKids(e, kl);
+		},
+		_attrs: (x) => { return { _attrs: x }; },
+		_class: (...x) => { return { _class: x }; },
+		// The createElement calls are spelled out so typescript can derive function
+		// signatures with a specific HTML*Element return type.
+		div: (...l) => _domKids(document.createElement('div'), l),
+		span: (...l) => _domKids(document.createElement('span'), l),
+		a: (...l) => _domKids(document.createElement('a'), l),
+		input: (...l) => _domKids(document.createElement('input'), l),
+		textarea: (...l) => _domKids(document.createElement('textarea'), l),
+		select: (...l) => _domKids(document.createElement('select'), l),
+		option: (...l) => _domKids(document.createElement('option'), l),
+		clickbutton: (...l) => _domKids(document.createElement('button'), [attr.type('button'), ...l]),
+		submitbutton: (...l) => _domKids(document.createElement('button'), [attr.type('submit'), ...l]),
+		form: (...l) => _domKids(document.createElement('form'), l),
+		fieldset: (...l) => _domKids(document.createElement('fieldset'), l),
+		table: (...l) => _domKids(document.createElement('table'), l),
+		thead: (...l) => _domKids(document.createElement('thead'), l),
+		tbody: (...l) => _domKids(document.createElement('tbody'), l),
+		tfoot: (...l) => _domKids(document.createElement('tfoot'), l),
+		tr: (...l) => _domKids(document.createElement('tr'), l),
+		td: (...l) => _domKids(document.createElement('td'), l),
+		th: (...l) => _domKids(document.createElement('th'), l),
+		datalist: (...l) => _domKids(document.createElement('datalist'), l),
+		h1: (...l) => _domKids(document.createElement('h1'), l),
+		h2: (...l) => _domKids(document.createElement('h2'), l),
+		h3: (...l) => _domKids(document.createElement('h3'), l),
+		br: (...l) => _domKids(document.createElement('br'), l),
+		hr: (...l) => _domKids(document.createElement('hr'), l),
+		pre: (...l) => _domKids(document.createElement('pre'), l),
+		label: (...l) => _domKids(document.createElement('label'), l),
+		ul: (...l) => _domKids(document.createElement('ul'), l),
+		li: (...l) => _domKids(document.createElement('li'), l),
+		iframe: (...l) => _domKids(document.createElement('iframe'), l),
+		b: (...l) => _domKids(document.createElement('b'), l),
+		img: (...l) => _domKids(document.createElement('img'), l),
+		style: (...l) => _domKids(document.createElement('style'), l),
+		search: (...l) => _domKids(document.createElement('search'), l),
+		p: (...l) => _domKids(document.createElement('p'), l),
+	};
+	const _attr = (k, v) => { const o = {}; o[k] = v; return { _attrs: o }; };
+	const attr = {
+		title: (s) => _attr('title', s),
+		value: (s) => _attr('value', s),
+		type: (s) => _attr('type', s),
+		tabindex: (s) => _attr('tabindex', s),
+		src: (s) => _attr('src', s),
+		placeholder: (s) => _attr('placeholder', s),
+		href: (s) => _attr('href', s),
+		checked: (s) => _attr('checked', s),
+		selected: (s) => _attr('selected', s),
+		id: (s) => _attr('id', s),
+		datalist: (s) => _attr('datalist', s),
+		rows: (s) => _attr('rows', s),
+		target: (s) => _attr('target', s),
+		rel: (s) => _attr('rel', s),
+		required: (s) => _attr('required', s),
+		multiple: (s) => _attr('multiple', s),
+		download: (s) => _attr('download', s),
+		disabled: (s) => _attr('disabled', s),
+		draggable: (s) => _attr('draggable', s),
+		rowspan: (s) => _attr('rowspan', s),
+		colspan: (s) => _attr('colspan', s),
+		for: (s) => _attr('for', s),
+		role: (s) => _attr('role', s),
+		arialabel: (s) => _attr('aria-label', s),
+		arialive: (s) => _attr('aria-live', s),
+		name: (s) => _attr('name', s),
+		min: (s) => _attr('min', s),
+		max: (s) => _attr('max', s),
+	};
+	const style = (x) => { return { _styles: x }; };
+	const prop = (x) => { return { _props: x }; };
+	return [dom, style, attr, prop];
+})();
 // NOTE: GENERATED by github.com/mjl-/sherpats, DO NOT MODIFY
 var api;
 (function (api) {
@@ -645,221 +866,6 @@ var api;
 	};
 })(api || (api = {}));
 // Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
-const [dom, style, attr, prop] = (function () {
-	// Start of unicode block (rough approximation of script), from https://www.unicode.org/Public/UNIDATA/Blocks.txt
-	const scriptblocks = [0x0000, 0x0080, 0x0100, 0x0180, 0x0250, 0x02B0, 0x0300, 0x0370, 0x0400, 0x0500, 0x0530, 0x0590, 0x0600, 0x0700, 0x0750, 0x0780, 0x07C0, 0x0800, 0x0840, 0x0860, 0x0870, 0x08A0, 0x0900, 0x0980, 0x0A00, 0x0A80, 0x0B00, 0x0B80, 0x0C00, 0x0C80, 0x0D00, 0x0D80, 0x0E00, 0x0E80, 0x0F00, 0x1000, 0x10A0, 0x1100, 0x1200, 0x1380, 0x13A0, 0x1400, 0x1680, 0x16A0, 0x1700, 0x1720, 0x1740, 0x1760, 0x1780, 0x1800, 0x18B0, 0x1900, 0x1950, 0x1980, 0x19E0, 0x1A00, 0x1A20, 0x1AB0, 0x1B00, 0x1B80, 0x1BC0, 0x1C00, 0x1C50, 0x1C80, 0x1C90, 0x1CC0, 0x1CD0, 0x1D00, 0x1D80, 0x1DC0, 0x1E00, 0x1F00, 0x2000, 0x2070, 0x20A0, 0x20D0, 0x2100, 0x2150, 0x2190, 0x2200, 0x2300, 0x2400, 0x2440, 0x2460, 0x2500, 0x2580, 0x25A0, 0x2600, 0x2700, 0x27C0, 0x27F0, 0x2800, 0x2900, 0x2980, 0x2A00, 0x2B00, 0x2C00, 0x2C60, 0x2C80, 0x2D00, 0x2D30, 0x2D80, 0x2DE0, 0x2E00, 0x2E80, 0x2F00, 0x2FF0, 0x3000, 0x3040, 0x30A0, 0x3100, 0x3130, 0x3190, 0x31A0, 0x31C0, 0x31F0, 0x3200, 0x3300, 0x3400, 0x4DC0, 0x4E00, 0xA000, 0xA490, 0xA4D0, 0xA500, 0xA640, 0xA6A0, 0xA700, 0xA720, 0xA800, 0xA830, 0xA840, 0xA880, 0xA8E0, 0xA900, 0xA930, 0xA960, 0xA980, 0xA9E0, 0xAA00, 0xAA60, 0xAA80, 0xAAE0, 0xAB00, 0xAB30, 0xAB70, 0xABC0, 0xAC00, 0xD7B0, 0xD800, 0xDB80, 0xDC00, 0xE000, 0xF900, 0xFB00, 0xFB50, 0xFE00, 0xFE10, 0xFE20, 0xFE30, 0xFE50, 0xFE70, 0xFF00, 0xFFF0, 0x10000, 0x10080, 0x10100, 0x10140, 0x10190, 0x101D0, 0x10280, 0x102A0, 0x102E0, 0x10300, 0x10330, 0x10350, 0x10380, 0x103A0, 0x10400, 0x10450, 0x10480, 0x104B0, 0x10500, 0x10530, 0x10570, 0x10600, 0x10780, 0x10800, 0x10840, 0x10860, 0x10880, 0x108E0, 0x10900, 0x10920, 0x10980, 0x109A0, 0x10A00, 0x10A60, 0x10A80, 0x10AC0, 0x10B00, 0x10B40, 0x10B60, 0x10B80, 0x10C00, 0x10C80, 0x10D00, 0x10E60, 0x10E80, 0x10EC0, 0x10F00, 0x10F30, 0x10F70, 0x10FB0, 0x10FE0, 0x11000, 0x11080, 0x110D0, 0x11100, 0x11150, 0x11180, 0x111E0, 0x11200, 0x11280, 0x112B0, 0x11300, 0x11400, 0x11480, 0x11580, 0x11600, 0x11660, 0x11680, 0x11700, 0x11800, 0x118A0, 0x11900, 0x119A0, 0x11A00, 0x11A50, 0x11AB0, 0x11AC0, 0x11B00, 0x11C00, 0x11C70, 0x11D00, 0x11D60, 0x11EE0, 0x11F00, 0x11FB0, 0x11FC0, 0x12000, 0x12400, 0x12480, 0x12F90, 0x13000, 0x13430, 0x14400, 0x16800, 0x16A40, 0x16A70, 0x16AD0, 0x16B00, 0x16E40, 0x16F00, 0x16FE0, 0x17000, 0x18800, 0x18B00, 0x18D00, 0x1AFF0, 0x1B000, 0x1B100, 0x1B130, 0x1B170, 0x1BC00, 0x1BCA0, 0x1CF00, 0x1D000, 0x1D100, 0x1D200, 0x1D2C0, 0x1D2E0, 0x1D300, 0x1D360, 0x1D400, 0x1D800, 0x1DF00, 0x1E000, 0x1E030, 0x1E100, 0x1E290, 0x1E2C0, 0x1E4D0, 0x1E7E0, 0x1E800, 0x1E900, 0x1EC70, 0x1ED00, 0x1EE00, 0x1F000, 0x1F030, 0x1F0A0, 0x1F100, 0x1F200, 0x1F300, 0x1F600, 0x1F650, 0x1F680, 0x1F700, 0x1F780, 0x1F800, 0x1F900, 0x1FA00, 0x1FA70, 0x1FB00, 0x20000, 0x2A700, 0x2B740, 0x2B820, 0x2CEB0, 0x2F800, 0x30000, 0x31350, 0xE0000, 0xE0100, 0xF0000, 0x100000];
-	// Find block code belongs in.
-	const findBlock = (code) => {
-		let s = 0;
-		let e = scriptblocks.length;
-		while (s < e - 1) {
-			let i = Math.floor((s + e) / 2);
-			if (code < scriptblocks[i]) {
-				e = i;
-			}
-			else {
-				s = i;
-			}
-		}
-		return s;
-	};
-	// formatText adds s to element e, in a way that makes switching unicode scripts
-	// clear, with alternating DOM TextNode and span elements with a "switchscript"
-	// class. Useful for highlighting look alikes, e.g. a (ascii 0x61) and а (cyrillic
-	// 0x430).
-	//
-	// This is only called one string at a time, so the UI can still display strings
-	// without highlighting switching scripts, by calling formatText on the parts.
-	const formatText = (e, s) => {
-		// Handle some common cases quickly.
-		if (!s) {
-			return;
-		}
-		let ascii = true;
-		for (const c of s) {
-			const cp = c.codePointAt(0); // For typescript, to check for undefined.
-			if (cp !== undefined && cp >= 0x0080) {
-				ascii = false;
-				break;
-			}
-		}
-		if (ascii) {
-			e.appendChild(document.createTextNode(s));
-			return;
-		}
-		// todo: handle grapheme clusters? wait for Intl.Segmenter?
-		let n = 0; // Number of text/span parts added.
-		let str = ''; // Collected so far.
-		let block = -1; // Previous block/script.
-		let mod = 1;
-		const put = (nextblock) => {
-			if (n === 0 && nextblock === 0) {
-				// Start was non-ascii, second block is ascii, we'll start marked as switched.
-				mod = 0;
-			}
-			if (n % 2 === mod) {
-				const x = document.createElement('span');
-				x.classList.add('scriptswitch');
-				x.appendChild(document.createTextNode(str));
-				e.appendChild(x);
-			}
-			else {
-				e.appendChild(document.createTextNode(str));
-			}
-			n++;
-			str = '';
-		};
-		for (const c of s) {
-			// Basic whitespace does not switch blocks. Will probably need to extend with more
-			// punctuation in the future. Possibly for digits too. But perhaps not in all
-			// scripts.
-			if (c === ' ' || c === '\t' || c === '\r' || c === '\n') {
-				str += c;
-				continue;
-			}
-			const code = c.codePointAt(0);
-			if (block < 0 || !(code >= scriptblocks[block] && (code < scriptblocks[block + 1] || block === scriptblocks.length - 1))) {
-				const nextblock = code < 0x0080 ? 0 : findBlock(code);
-				if (block >= 0) {
-					put(nextblock);
-				}
-				block = nextblock;
-			}
-			str += c;
-		}
-		put(-1);
-	};
-	const _domKids = (e, l) => {
-		l.forEach((c) => {
-			const xc = c;
-			if (typeof c === 'string') {
-				formatText(e, c);
-			}
-			else if (c instanceof String) {
-				// String is an escape-hatch for text that should not be formatted with
-				// unicode-block-change-highlighting, e.g. for textarea values.
-				e.appendChild(document.createTextNode('' + c));
-			}
-			else if (c instanceof Element) {
-				e.appendChild(c);
-			}
-			else if (c instanceof Function) {
-				if (!c.name) {
-					throw new Error('function without name');
-				}
-				e.addEventListener(c.name, c);
-			}
-			else if (Array.isArray(xc)) {
-				_domKids(e, c);
-			}
-			else if (xc._class) {
-				for (const s of xc._class) {
-					e.classList.toggle(s, true);
-				}
-			}
-			else if (xc._attrs) {
-				for (const k in xc._attrs) {
-					e.setAttribute(k, xc._attrs[k]);
-				}
-			}
-			else if (xc._styles) {
-				for (const k in xc._styles) {
-					const estyle = e.style;
-					estyle[k] = xc._styles[k];
-				}
-			}
-			else if (xc._props) {
-				for (const k in xc._props) {
-					const eprops = e;
-					eprops[k] = xc._props[k];
-				}
-			}
-			else if (xc.root) {
-				e.appendChild(xc.root);
-			}
-			else {
-				console.log('bad kid', c);
-				throw new Error('bad kid');
-			}
-		});
-		return e;
-	};
-	const dom = {
-		_kids: function (e, ...kl) {
-			while (e.firstChild) {
-				e.removeChild(e.firstChild);
-			}
-			_domKids(e, kl);
-		},
-		_attrs: (x) => { return { _attrs: x }; },
-		_class: (...x) => { return { _class: x }; },
-		// The createElement calls are spelled out so typescript can derive function
-		// signatures with a specific HTML*Element return type.
-		div: (...l) => _domKids(document.createElement('div'), l),
-		span: (...l) => _domKids(document.createElement('span'), l),
-		a: (...l) => _domKids(document.createElement('a'), l),
-		input: (...l) => _domKids(document.createElement('input'), l),
-		textarea: (...l) => _domKids(document.createElement('textarea'), l),
-		select: (...l) => _domKids(document.createElement('select'), l),
-		option: (...l) => _domKids(document.createElement('option'), l),
-		clickbutton: (...l) => _domKids(document.createElement('button'), [attr.type('button'), ...l]),
-		submitbutton: (...l) => _domKids(document.createElement('button'), [attr.type('submit'), ...l]),
-		form: (...l) => _domKids(document.createElement('form'), l),
-		fieldset: (...l) => _domKids(document.createElement('fieldset'), l),
-		table: (...l) => _domKids(document.createElement('table'), l),
-		thead: (...l) => _domKids(document.createElement('thead'), l),
-		tbody: (...l) => _domKids(document.createElement('tbody'), l),
-		tr: (...l) => _domKids(document.createElement('tr'), l),
-		td: (...l) => _domKids(document.createElement('td'), l),
-		th: (...l) => _domKids(document.createElement('th'), l),
-		datalist: (...l) => _domKids(document.createElement('datalist'), l),
-		h1: (...l) => _domKids(document.createElement('h1'), l),
-		h2: (...l) => _domKids(document.createElement('h2'), l),
-		br: (...l) => _domKids(document.createElement('br'), l),
-		hr: (...l) => _domKids(document.createElement('hr'), l),
-		pre: (...l) => _domKids(document.createElement('pre'), l),
-		label: (...l) => _domKids(document.createElement('label'), l),
-		ul: (...l) => _domKids(document.createElement('ul'), l),
-		li: (...l) => _domKids(document.createElement('li'), l),
-		iframe: (...l) => _domKids(document.createElement('iframe'), l),
-		b: (...l) => _domKids(document.createElement('b'), l),
-		img: (...l) => _domKids(document.createElement('img'), l),
-		style: (...l) => _domKids(document.createElement('style'), l),
-		search: (...l) => _domKids(document.createElement('search'), l),
-	};
-	const _attr = (k, v) => { const o = {}; o[k] = v; return { _attrs: o }; };
-	const attr = {
-		title: (s) => _attr('title', s),
-		value: (s) => _attr('value', s),
-		type: (s) => _attr('type', s),
-		tabindex: (s) => _attr('tabindex', s),
-		src: (s) => _attr('src', s),
-		placeholder: (s) => _attr('placeholder', s),
-		href: (s) => _attr('href', s),
-		checked: (s) => _attr('checked', s),
-		selected: (s) => _attr('selected', s),
-		id: (s) => _attr('id', s),
-		datalist: (s) => _attr('datalist', s),
-		rows: (s) => _attr('rows', s),
-		target: (s) => _attr('target', s),
-		rel: (s) => _attr('rel', s),
-		required: (s) => _attr('required', s),
-		multiple: (s) => _attr('multiple', s),
-		download: (s) => _attr('download', s),
-		disabled: (s) => _attr('disabled', s),
-		draggable: (s) => _attr('draggable', s),
-		rowspan: (s) => _attr('rowspan', s),
-		colspan: (s) => _attr('colspan', s),
-		for: (s) => _attr('for', s),
-		role: (s) => _attr('role', s),
-		arialabel: (s) => _attr('aria-label', s),
-		arialive: (s) => _attr('aria-live', s),
-		name: (s) => _attr('name', s)
-	};
-	const style = (x) => { return { _styles: x }; };
-	const prop = (x) => { return { _props: x }; };
-	return [dom, style, attr, prop];
-})();
 // For authentication/security results.
 const underlineGreen = '#50c40f';
 const underlineRed = '#e15d1c';

webmail/view.go

@@ -584,7 +584,7 @@ func serveEvents(ctx context.Context, log mlog.Log, w http.ResponseWriter, r *ht
 	// We'll be sending quite a bit of message data (text) in JSON (plenty duplicate
 	// keys), so should be quite compressible.
 	var out writeFlusher
-	gz := acceptsGzip(r)
+	gz := mox.AcceptsGzip(r)
 	if gz {
 		h.Set("Content-Encoding", "gzip")
 		out, _ = gzip.NewWriterLevel(w, gzip.BestSpeed)

webmail/webmail.go

@@ -6,7 +6,6 @@ package webmail
 import (
 	"archive/zip"
 	"bytes"
-	"compress/gzip"
 	"context"
 	"encoding/base64"
 	"encoding/json"
@@ -21,8 +20,6 @@ import (
 	"runtime/debug"
 	"strconv"
 	"strings"
-	"sync"
-	"time"
 
 	_ "embed"
 
@@ -40,7 +37,6 @@ import (
 	"github.com/mjl-/mox/mlog"
 	"github.com/mjl-/mox/mox-"
 	"github.com/mjl-/mox/moxio"
-	"github.com/mjl-/mox/moxvar"
 	"github.com/mjl-/mox/store"
 	"github.com/mjl-/mox/webaccount"
 )
@@ -150,159 +146,11 @@ func xdbread(ctx context.Context, acc *store.Account, fn func(tx *bstore.Tx)) {
 	xcheckf(ctx, err, "transaction")
 }
 
-// We merge the js into the html at first load, cache a gzipped version that is
-// generated on first need, and respond with a Last-Modified header. For quickly
-// serving a single, compressed, cacheable file.
-type merged struct {
-	sync.Mutex
-	combined                 []byte
-	combinedGzip             []byte
-	mtime                    time.Time // For Last-Modified and conditional request.
-	fallbackHTML, fallbackJS []byte    // The embedded html/js files.
-	htmlPath, jsPath         string    // Paths used during development.
-}
-
-var webmail = &merged{
-	fallbackHTML: webmailHTML,
-	fallbackJS:   webmailJS,
-	htmlPath:     filepath.FromSlash("webmail/webmail.html"),
-	jsPath:       filepath.FromSlash("webmail/webmail.js"),
-}
-
-// fallbackMtime returns a time to use for the Last-Modified header in case we
-// cannot find a file, e.g. when used in production.
-func fallbackMtime(log mlog.Log) time.Time {
-	p, err := os.Executable()
-	log.Check(err, "finding executable for mtime")
-	if err == nil {
-		st, err := os.Stat(p)
-		log.Check(err, "stat on executable for mtime")
-		if err == nil {
-			return st.ModTime()
-		}
-	}
-	log.Info("cannot find executable for webmail mtime, using current time")
-	return time.Now()
-}
-
-func (m *merged) serve(ctx context.Context, log mlog.Log, w http.ResponseWriter, r *http.Request) {
-	// We typically return the embedded file, but during development it's handy
-	// to load from disk.
-	fhtml, _ := os.Open(m.htmlPath)
-	if fhtml != nil {
-		defer fhtml.Close()
-	}
-	fjs, _ := os.Open(m.jsPath)
-	if fjs != nil {
-		defer fjs.Close()
-	}
-
-	html := m.fallbackHTML
-	js := m.fallbackJS
-
-	var diskmtime time.Time
-	var refreshdisk bool
-	if fhtml != nil && fjs != nil {
-		sth, err := fhtml.Stat()
-		xcheckf(ctx, err, "stat html")
-		stj, err := fjs.Stat()
-		xcheckf(ctx, err, "stat js")
-
-		maxmtime := sth.ModTime()
-		if stj.ModTime().After(maxmtime) {
-			maxmtime = stj.ModTime()
-		}
-
-		m.Lock()
-		refreshdisk = maxmtime.After(m.mtime) || m.combined == nil
-		m.Unlock()
-
-		if refreshdisk {
-			html, err = io.ReadAll(fhtml)
-			xcheckf(ctx, err, "reading html")
-			js, err = io.ReadAll(fjs)
-			xcheckf(ctx, err, "reading js")
-			diskmtime = maxmtime
-		}
-	}
-
-	gz := acceptsGzip(r)
-	var out []byte
-	var mtime time.Time
-	var origSize int64
-
-	func() {
-		m.Lock()
-		defer m.Unlock()
-
-		if refreshdisk || m.combined == nil {
-			script := []byte(`<script>/* placeholder */</script>`)
-			index := bytes.Index(html, script)
-			if index < 0 {
-				xcheckf(ctx, errors.New("script not found"), "generating combined html")
-			}
-			var b bytes.Buffer
-			b.Write(html[:index])
-			fmt.Fprintf(&b, "<script>\n// Javascript is generated from typescript, don't modify the javascript because changes will be lost.\nconst moxversion = \"%s\";\n", moxvar.Version)
-			b.Write(js)
-			b.WriteString("\t\t</script>")
-			b.Write(html[index+len(script):])
-			out = b.Bytes()
-			m.combined = out
-			if refreshdisk {
-				m.mtime = diskmtime
-			} else {
-				m.mtime = fallbackMtime(log)
-			}
-			m.combinedGzip = nil
-		} else {
-			out = m.combined
-		}
-		if gz {
-			if m.combinedGzip == nil {
-				var b bytes.Buffer
-				gzw, err := gzip.NewWriterLevel(&b, gzip.BestCompression)
-				if err == nil {
-					_, err = gzw.Write(out)
-				}
-				if err == nil {
-					err = gzw.Close()
-				}
-				xcheckf(ctx, err, "gzipping combined html")
-				m.combinedGzip = b.Bytes()
-			}
-			origSize = int64(len(out))
-			out = m.combinedGzip
-		}
-		mtime = m.mtime
-	}()
-
-	w.Header().Set("Content-Type", "text/html; charset=utf-8")
-	http.ServeContent(gzipInjector{w, gz, origSize}, r, "", mtime, bytes.NewReader(out))
-}
-
-// gzipInjector is a http.ResponseWriter that optionally injects a
-// Content-Encoding: gzip header, only in case of status 200 OK. Used with
-// http.ServeContent to serve gzipped content if the client supports it. We cannot
-// just unconditionally add the content-encoding header, because we don't know
-// enough if we will be sending data: http.ServeContent may be sending a "not
-// modified" response, and possibly others.
-type gzipInjector struct {
-	http.ResponseWriter // Keep most methods.
-	gz                  bool
-	origSize            int64
-}
-
-// WriteHeader adds a Content-Encoding: gzip header before actually writing the
-// headers and status.
-func (w gzipInjector) WriteHeader(statusCode int) {
-	if w.gz && statusCode == http.StatusOK {
-		w.ResponseWriter.Header().Set("Content-Encoding", "gzip")
-		if lw, ok := w.ResponseWriter.(interface{ SetUncompressedSize(int64) }); ok {
-			lw.SetUncompressedSize(w.origSize)
-		}
-	}
-	w.ResponseWriter.WriteHeader(statusCode)
+var webmailFile = &mox.WebappFile{
+	HTML:     webmailHTML,
+	JS:       webmailJS,
+	HTMLPath: filepath.FromSlash("webmail/webmail.html"),
+	JSPath:   filepath.FromSlash("webmail/webmail.js"),
 }
 
 // Serve content, either from a file, or return the fallback data. Caller
@@ -319,7 +167,7 @@ func serveContentFallback(log mlog.Log, w http.ResponseWriter, r *http.Request,
 			return
 		}
 	}
-	http.ServeContent(w, r, "", fallbackMtime(log), bytes.NewReader(fallback))
+	http.ServeContent(w, r, "", mox.FallbackMtime(log), bytes.NewReader(fallback))
 }
 
 // Handler returns a handler for the webmail endpoints, customized for the max
@@ -388,7 +236,7 @@ func handle(apiHandler http.Handler, w http.ResponseWriter, r *http.Request) {
 		case "GET", "HEAD":
 		}
 
-		webmail.serve(ctx, log, w, r)
+		webmailFile.Serve(ctx, log, w, r)
 		return
 
 	case "/msg.js", "/text.js":
@@ -904,22 +752,6 @@ func handle(apiHandler http.Handler, w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-func acceptsGzip(r *http.Request) bool {
-	s := r.Header.Get("Accept-Encoding")
-	t := strings.Split(s, ",")
-	for _, e := range t {
-		e = strings.TrimSpace(e)
-		tt := strings.Split(e, ";")
-		if len(tt) > 1 && t[1] == "q=0" {
-			continue
-		}
-		if tt[0] == "gzip" {
-			return true
-		}
-	}
-	return false
-}
-
 // inlineSanitizeHTML writes the part as HTML, with "cid:" URIs for html "src"
 // attributes inlined and with potentially dangerous tags removed (javascript). The
 // sanitizing is just a first layer of defense, CSP headers block execution of

webmail/webmail.js

@@ -1,4 +1,225 @@
 "use strict";
+// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
+const [dom, style, attr, prop] = (function () {
+	// Start of unicode block (rough approximation of script), from https://www.unicode.org/Public/UNIDATA/Blocks.txt
+	const scriptblocks = [0x0000, 0x0080, 0x0100, 0x0180, 0x0250, 0x02B0, 0x0300, 0x0370, 0x0400, 0x0500, 0x0530, 0x0590, 0x0600, 0x0700, 0x0750, 0x0780, 0x07C0, 0x0800, 0x0840, 0x0860, 0x0870, 0x08A0, 0x0900, 0x0980, 0x0A00, 0x0A80, 0x0B00, 0x0B80, 0x0C00, 0x0C80, 0x0D00, 0x0D80, 0x0E00, 0x0E80, 0x0F00, 0x1000, 0x10A0, 0x1100, 0x1200, 0x1380, 0x13A0, 0x1400, 0x1680, 0x16A0, 0x1700, 0x1720, 0x1740, 0x1760, 0x1780, 0x1800, 0x18B0, 0x1900, 0x1950, 0x1980, 0x19E0, 0x1A00, 0x1A20, 0x1AB0, 0x1B00, 0x1B80, 0x1BC0, 0x1C00, 0x1C50, 0x1C80, 0x1C90, 0x1CC0, 0x1CD0, 0x1D00, 0x1D80, 0x1DC0, 0x1E00, 0x1F00, 0x2000, 0x2070, 0x20A0, 0x20D0, 0x2100, 0x2150, 0x2190, 0x2200, 0x2300, 0x2400, 0x2440, 0x2460, 0x2500, 0x2580, 0x25A0, 0x2600, 0x2700, 0x27C0, 0x27F0, 0x2800, 0x2900, 0x2980, 0x2A00, 0x2B00, 0x2C00, 0x2C60, 0x2C80, 0x2D00, 0x2D30, 0x2D80, 0x2DE0, 0x2E00, 0x2E80, 0x2F00, 0x2FF0, 0x3000, 0x3040, 0x30A0, 0x3100, 0x3130, 0x3190, 0x31A0, 0x31C0, 0x31F0, 0x3200, 0x3300, 0x3400, 0x4DC0, 0x4E00, 0xA000, 0xA490, 0xA4D0, 0xA500, 0xA640, 0xA6A0, 0xA700, 0xA720, 0xA800, 0xA830, 0xA840, 0xA880, 0xA8E0, 0xA900, 0xA930, 0xA960, 0xA980, 0xA9E0, 0xAA00, 0xAA60, 0xAA80, 0xAAE0, 0xAB00, 0xAB30, 0xAB70, 0xABC0, 0xAC00, 0xD7B0, 0xD800, 0xDB80, 0xDC00, 0xE000, 0xF900, 0xFB00, 0xFB50, 0xFE00, 0xFE10, 0xFE20, 0xFE30, 0xFE50, 0xFE70, 0xFF00, 0xFFF0, 0x10000, 0x10080, 0x10100, 0x10140, 0x10190, 0x101D0, 0x10280, 0x102A0, 0x102E0, 0x10300, 0x10330, 0x10350, 0x10380, 0x103A0, 0x10400, 0x10450, 0x10480, 0x104B0, 0x10500, 0x10530, 0x10570, 0x10600, 0x10780, 0x10800, 0x10840, 0x10860, 0x10880, 0x108E0, 0x10900, 0x10920, 0x10980, 0x109A0, 0x10A00, 0x10A60, 0x10A80, 0x10AC0, 0x10B00, 0x10B40, 0x10B60, 0x10B80, 0x10C00, 0x10C80, 0x10D00, 0x10E60, 0x10E80, 0x10EC0, 0x10F00, 0x10F30, 0x10F70, 0x10FB0, 0x10FE0, 0x11000, 0x11080, 0x110D0, 0x11100, 0x11150, 0x11180, 0x111E0, 0x11200, 0x11280, 0x112B0, 0x11300, 0x11400, 0x11480, 0x11580, 0x11600, 0x11660, 0x11680, 0x11700, 0x11800, 0x118A0, 0x11900, 0x119A0, 0x11A00, 0x11A50, 0x11AB0, 0x11AC0, 0x11B00, 0x11C00, 0x11C70, 0x11D00, 0x11D60, 0x11EE0, 0x11F00, 0x11FB0, 0x11FC0, 0x12000, 0x12400, 0x12480, 0x12F90, 0x13000, 0x13430, 0x14400, 0x16800, 0x16A40, 0x16A70, 0x16AD0, 0x16B00, 0x16E40, 0x16F00, 0x16FE0, 0x17000, 0x18800, 0x18B00, 0x18D00, 0x1AFF0, 0x1B000, 0x1B100, 0x1B130, 0x1B170, 0x1BC00, 0x1BCA0, 0x1CF00, 0x1D000, 0x1D100, 0x1D200, 0x1D2C0, 0x1D2E0, 0x1D300, 0x1D360, 0x1D400, 0x1D800, 0x1DF00, 0x1E000, 0x1E030, 0x1E100, 0x1E290, 0x1E2C0, 0x1E4D0, 0x1E7E0, 0x1E800, 0x1E900, 0x1EC70, 0x1ED00, 0x1EE00, 0x1F000, 0x1F030, 0x1F0A0, 0x1F100, 0x1F200, 0x1F300, 0x1F600, 0x1F650, 0x1F680, 0x1F700, 0x1F780, 0x1F800, 0x1F900, 0x1FA00, 0x1FA70, 0x1FB00, 0x20000, 0x2A700, 0x2B740, 0x2B820, 0x2CEB0, 0x2F800, 0x30000, 0x31350, 0xE0000, 0xE0100, 0xF0000, 0x100000];
+	// Find block code belongs in.
+	const findBlock = (code) => {
+		let s = 0;
+		let e = scriptblocks.length;
+		while (s < e - 1) {
+			let i = Math.floor((s + e) / 2);
+			if (code < scriptblocks[i]) {
+				e = i;
+			}
+			else {
+				s = i;
+			}
+		}
+		return s;
+	};
+	// formatText adds s to element e, in a way that makes switching unicode scripts
+	// clear, with alternating DOM TextNode and span elements with a "switchscript"
+	// class. Useful for highlighting look alikes, e.g. a (ascii 0x61) and а (cyrillic
+	// 0x430).
+	//
+	// This is only called one string at a time, so the UI can still display strings
+	// without highlighting switching scripts, by calling formatText on the parts.
+	const formatText = (e, s) => {
+		// Handle some common cases quickly.
+		if (!s) {
+			return;
+		}
+		let ascii = true;
+		for (const c of s) {
+			const cp = c.codePointAt(0); // For typescript, to check for undefined.
+			if (cp !== undefined && cp >= 0x0080) {
+				ascii = false;
+				break;
+			}
+		}
+		if (ascii) {
+			e.appendChild(document.createTextNode(s));
+			return;
+		}
+		// todo: handle grapheme clusters? wait for Intl.Segmenter?
+		let n = 0; // Number of text/span parts added.
+		let str = ''; // Collected so far.
+		let block = -1; // Previous block/script.
+		let mod = 1;
+		const put = (nextblock) => {
+			if (n === 0 && nextblock === 0) {
+				// Start was non-ascii, second block is ascii, we'll start marked as switched.
+				mod = 0;
+			}
+			if (n % 2 === mod) {
+				const x = document.createElement('span');
+				x.classList.add('scriptswitch');
+				x.appendChild(document.createTextNode(str));
+				e.appendChild(x);
+			}
+			else {
+				e.appendChild(document.createTextNode(str));
+			}
+			n++;
+			str = '';
+		};
+		for (const c of s) {
+			// Basic whitespace does not switch blocks. Will probably need to extend with more
+			// punctuation in the future. Possibly for digits too. But perhaps not in all
+			// scripts.
+			if (c === ' ' || c === '\t' || c === '\r' || c === '\n') {
+				str += c;
+				continue;
+			}
+			const code = c.codePointAt(0);
+			if (block < 0 || !(code >= scriptblocks[block] && (code < scriptblocks[block + 1] || block === scriptblocks.length - 1))) {
+				const nextblock = code < 0x0080 ? 0 : findBlock(code);
+				if (block >= 0) {
+					put(nextblock);
+				}
+				block = nextblock;
+			}
+			str += c;
+		}
+		put(-1);
+	};
+	const _domKids = (e, l) => {
+		l.forEach((c) => {
+			const xc = c;
+			if (typeof c === 'string') {
+				formatText(e, c);
+			}
+			else if (c instanceof String) {
+				// String is an escape-hatch for text that should not be formatted with
+				// unicode-block-change-highlighting, e.g. for textarea values.
+				e.appendChild(document.createTextNode('' + c));
+			}
+			else if (c instanceof Element) {
+				e.appendChild(c);
+			}
+			else if (c instanceof Function) {
+				if (!c.name) {
+					throw new Error('function without name');
+				}
+				e.addEventListener(c.name, c);
+			}
+			else if (Array.isArray(xc)) {
+				_domKids(e, c);
+			}
+			else if (xc._class) {
+				for (const s of xc._class) {
+					e.classList.toggle(s, true);
+				}
+			}
+			else if (xc._attrs) {
+				for (const k in xc._attrs) {
+					e.setAttribute(k, xc._attrs[k]);
+				}
+			}
+			else if (xc._styles) {
+				for (const k in xc._styles) {
+					const estyle = e.style;
+					estyle[k] = xc._styles[k];
+				}
+			}
+			else if (xc._props) {
+				for (const k in xc._props) {
+					const eprops = e;
+					eprops[k] = xc._props[k];
+				}
+			}
+			else if (xc.root) {
+				e.appendChild(xc.root);
+			}
+			else {
+				console.log('bad kid', c);
+				throw new Error('bad kid');
+			}
+		});
+		return e;
+	};
+	const dom = {
+		_kids: function (e, ...kl) {
+			while (e.firstChild) {
+				e.removeChild(e.firstChild);
+			}
+			_domKids(e, kl);
+		},
+		_attrs: (x) => { return { _attrs: x }; },
+		_class: (...x) => { return { _class: x }; },
+		// The createElement calls are spelled out so typescript can derive function
+		// signatures with a specific HTML*Element return type.
+		div: (...l) => _domKids(document.createElement('div'), l),
+		span: (...l) => _domKids(document.createElement('span'), l),
+		a: (...l) => _domKids(document.createElement('a'), l),
+		input: (...l) => _domKids(document.createElement('input'), l),
+		textarea: (...l) => _domKids(document.createElement('textarea'), l),
+		select: (...l) => _domKids(document.createElement('select'), l),
+		option: (...l) => _domKids(document.createElement('option'), l),
+		clickbutton: (...l) => _domKids(document.createElement('button'), [attr.type('button'), ...l]),
+		submitbutton: (...l) => _domKids(document.createElement('button'), [attr.type('submit'), ...l]),
+		form: (...l) => _domKids(document.createElement('form'), l),
+		fieldset: (...l) => _domKids(document.createElement('fieldset'), l),
+		table: (...l) => _domKids(document.createElement('table'), l),
+		thead: (...l) => _domKids(document.createElement('thead'), l),
+		tbody: (...l) => _domKids(document.createElement('tbody'), l),
+		tfoot: (...l) => _domKids(document.createElement('tfoot'), l),
+		tr: (...l) => _domKids(document.createElement('tr'), l),
+		td: (...l) => _domKids(document.createElement('td'), l),
+		th: (...l) => _domKids(document.createElement('th'), l),
+		datalist: (...l) => _domKids(document.createElement('datalist'), l),
+		h1: (...l) => _domKids(document.createElement('h1'), l),
+		h2: (...l) => _domKids(document.createElement('h2'), l),
+		h3: (...l) => _domKids(document.createElement('h3'), l),
+		br: (...l) => _domKids(document.createElement('br'), l),
+		hr: (...l) => _domKids(document.createElement('hr'), l),
+		pre: (...l) => _domKids(document.createElement('pre'), l),
+		label: (...l) => _domKids(document.createElement('label'), l),
+		ul: (...l) => _domKids(document.createElement('ul'), l),
+		li: (...l) => _domKids(document.createElement('li'), l),
+		iframe: (...l) => _domKids(document.createElement('iframe'), l),
+		b: (...l) => _domKids(document.createElement('b'), l),
+		img: (...l) => _domKids(document.createElement('img'), l),
+		style: (...l) => _domKids(document.createElement('style'), l),
+		search: (...l) => _domKids(document.createElement('search'), l),
+		p: (...l) => _domKids(document.createElement('p'), l),
+	};
+	const _attr = (k, v) => { const o = {}; o[k] = v; return { _attrs: o }; };
+	const attr = {
+		title: (s) => _attr('title', s),
+		value: (s) => _attr('value', s),
+		type: (s) => _attr('type', s),
+		tabindex: (s) => _attr('tabindex', s),
+		src: (s) => _attr('src', s),
+		placeholder: (s) => _attr('placeholder', s),
+		href: (s) => _attr('href', s),
+		checked: (s) => _attr('checked', s),
+		selected: (s) => _attr('selected', s),
+		id: (s) => _attr('id', s),
+		datalist: (s) => _attr('datalist', s),
+		rows: (s) => _attr('rows', s),
+		target: (s) => _attr('target', s),
+		rel: (s) => _attr('rel', s),
+		required: (s) => _attr('required', s),
+		multiple: (s) => _attr('multiple', s),
+		download: (s) => _attr('download', s),
+		disabled: (s) => _attr('disabled', s),
+		draggable: (s) => _attr('draggable', s),
+		rowspan: (s) => _attr('rowspan', s),
+		colspan: (s) => _attr('colspan', s),
+		for: (s) => _attr('for', s),
+		role: (s) => _attr('role', s),
+		arialabel: (s) => _attr('aria-label', s),
+		arialive: (s) => _attr('aria-live', s),
+		name: (s) => _attr('name', s),
+		min: (s) => _attr('min', s),
+		max: (s) => _attr('max', s),
+	};
+	const style = (x) => { return { _styles: x }; };
+	const prop = (x) => { return { _props: x }; };
+	return [dom, style, attr, prop];
+})();
 // NOTE: GENERATED by github.com/mjl-/sherpats, DO NOT MODIFY
 var api;
 (function (api) {
@@ -645,221 +866,6 @@ var api;
 	};
 })(api || (api = {}));
 // Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
-const [dom, style, attr, prop] = (function () {
-	// Start of unicode block (rough approximation of script), from https://www.unicode.org/Public/UNIDATA/Blocks.txt
-	const scriptblocks = [0x0000, 0x0080, 0x0100, 0x0180, 0x0250, 0x02B0, 0x0300, 0x0370, 0x0400, 0x0500, 0x0530, 0x0590, 0x0600, 0x0700, 0x0750, 0x0780, 0x07C0, 0x0800, 0x0840, 0x0860, 0x0870, 0x08A0, 0x0900, 0x0980, 0x0A00, 0x0A80, 0x0B00, 0x0B80, 0x0C00, 0x0C80, 0x0D00, 0x0D80, 0x0E00, 0x0E80, 0x0F00, 0x1000, 0x10A0, 0x1100, 0x1200, 0x1380, 0x13A0, 0x1400, 0x1680, 0x16A0, 0x1700, 0x1720, 0x1740, 0x1760, 0x1780, 0x1800, 0x18B0, 0x1900, 0x1950, 0x1980, 0x19E0, 0x1A00, 0x1A20, 0x1AB0, 0x1B00, 0x1B80, 0x1BC0, 0x1C00, 0x1C50, 0x1C80, 0x1C90, 0x1CC0, 0x1CD0, 0x1D00, 0x1D80, 0x1DC0, 0x1E00, 0x1F00, 0x2000, 0x2070, 0x20A0, 0x20D0, 0x2100, 0x2150, 0x2190, 0x2200, 0x2300, 0x2400, 0x2440, 0x2460, 0x2500, 0x2580, 0x25A0, 0x2600, 0x2700, 0x27C0, 0x27F0, 0x2800, 0x2900, 0x2980, 0x2A00, 0x2B00, 0x2C00, 0x2C60, 0x2C80, 0x2D00, 0x2D30, 0x2D80, 0x2DE0, 0x2E00, 0x2E80, 0x2F00, 0x2FF0, 0x3000, 0x3040, 0x30A0, 0x3100, 0x3130, 0x3190, 0x31A0, 0x31C0, 0x31F0, 0x3200, 0x3300, 0x3400, 0x4DC0, 0x4E00, 0xA000, 0xA490, 0xA4D0, 0xA500, 0xA640, 0xA6A0, 0xA700, 0xA720, 0xA800, 0xA830, 0xA840, 0xA880, 0xA8E0, 0xA900, 0xA930, 0xA960, 0xA980, 0xA9E0, 0xAA00, 0xAA60, 0xAA80, 0xAAE0, 0xAB00, 0xAB30, 0xAB70, 0xABC0, 0xAC00, 0xD7B0, 0xD800, 0xDB80, 0xDC00, 0xE000, 0xF900, 0xFB00, 0xFB50, 0xFE00, 0xFE10, 0xFE20, 0xFE30, 0xFE50, 0xFE70, 0xFF00, 0xFFF0, 0x10000, 0x10080, 0x10100, 0x10140, 0x10190, 0x101D0, 0x10280, 0x102A0, 0x102E0, 0x10300, 0x10330, 0x10350, 0x10380, 0x103A0, 0x10400, 0x10450, 0x10480, 0x104B0, 0x10500, 0x10530, 0x10570, 0x10600, 0x10780, 0x10800, 0x10840, 0x10860, 0x10880, 0x108E0, 0x10900, 0x10920, 0x10980, 0x109A0, 0x10A00, 0x10A60, 0x10A80, 0x10AC0, 0x10B00, 0x10B40, 0x10B60, 0x10B80, 0x10C00, 0x10C80, 0x10D00, 0x10E60, 0x10E80, 0x10EC0, 0x10F00, 0x10F30, 0x10F70, 0x10FB0, 0x10FE0, 0x11000, 0x11080, 0x110D0, 0x11100, 0x11150, 0x11180, 0x111E0, 0x11200, 0x11280, 0x112B0, 0x11300, 0x11400, 0x11480, 0x11580, 0x11600, 0x11660, 0x11680, 0x11700, 0x11800, 0x118A0, 0x11900, 0x119A0, 0x11A00, 0x11A50, 0x11AB0, 0x11AC0, 0x11B00, 0x11C00, 0x11C70, 0x11D00, 0x11D60, 0x11EE0, 0x11F00, 0x11FB0, 0x11FC0, 0x12000, 0x12400, 0x12480, 0x12F90, 0x13000, 0x13430, 0x14400, 0x16800, 0x16A40, 0x16A70, 0x16AD0, 0x16B00, 0x16E40, 0x16F00, 0x16FE0, 0x17000, 0x18800, 0x18B00, 0x18D00, 0x1AFF0, 0x1B000, 0x1B100, 0x1B130, 0x1B170, 0x1BC00, 0x1BCA0, 0x1CF00, 0x1D000, 0x1D100, 0x1D200, 0x1D2C0, 0x1D2E0, 0x1D300, 0x1D360, 0x1D400, 0x1D800, 0x1DF00, 0x1E000, 0x1E030, 0x1E100, 0x1E290, 0x1E2C0, 0x1E4D0, 0x1E7E0, 0x1E800, 0x1E900, 0x1EC70, 0x1ED00, 0x1EE00, 0x1F000, 0x1F030, 0x1F0A0, 0x1F100, 0x1F200, 0x1F300, 0x1F600, 0x1F650, 0x1F680, 0x1F700, 0x1F780, 0x1F800, 0x1F900, 0x1FA00, 0x1FA70, 0x1FB00, 0x20000, 0x2A700, 0x2B740, 0x2B820, 0x2CEB0, 0x2F800, 0x30000, 0x31350, 0xE0000, 0xE0100, 0xF0000, 0x100000];
-	// Find block code belongs in.
-	const findBlock = (code) => {
-		let s = 0;
-		let e = scriptblocks.length;
-		while (s < e - 1) {
-			let i = Math.floor((s + e) / 2);
-			if (code < scriptblocks[i]) {
-				e = i;
-			}
-			else {
-				s = i;
-			}
-		}
-		return s;
-	};
-	// formatText adds s to element e, in a way that makes switching unicode scripts
-	// clear, with alternating DOM TextNode and span elements with a "switchscript"
-	// class. Useful for highlighting look alikes, e.g. a (ascii 0x61) and а (cyrillic
-	// 0x430).
-	//
-	// This is only called one string at a time, so the UI can still display strings
-	// without highlighting switching scripts, by calling formatText on the parts.
-	const formatText = (e, s) => {
-		// Handle some common cases quickly.
-		if (!s) {
-			return;
-		}
-		let ascii = true;
-		for (const c of s) {
-			const cp = c.codePointAt(0); // For typescript, to check for undefined.
-			if (cp !== undefined && cp >= 0x0080) {
-				ascii = false;
-				break;
-			}
-		}
-		if (ascii) {
-			e.appendChild(document.createTextNode(s));
-			return;
-		}
-		// todo: handle grapheme clusters? wait for Intl.Segmenter?
-		let n = 0; // Number of text/span parts added.
-		let str = ''; // Collected so far.
-		let block = -1; // Previous block/script.
-		let mod = 1;
-		const put = (nextblock) => {
-			if (n === 0 && nextblock === 0) {
-				// Start was non-ascii, second block is ascii, we'll start marked as switched.
-				mod = 0;
-			}
-			if (n % 2 === mod) {
-				const x = document.createElement('span');
-				x.classList.add('scriptswitch');
-				x.appendChild(document.createTextNode(str));
-				e.appendChild(x);
-			}
-			else {
-				e.appendChild(document.createTextNode(str));
-			}
-			n++;
-			str = '';
-		};
-		for (const c of s) {
-			// Basic whitespace does not switch blocks. Will probably need to extend with more
-			// punctuation in the future. Possibly for digits too. But perhaps not in all
-			// scripts.
-			if (c === ' ' || c === '\t' || c === '\r' || c === '\n') {
-				str += c;
-				continue;
-			}
-			const code = c.codePointAt(0);
-			if (block < 0 || !(code >= scriptblocks[block] && (code < scriptblocks[block + 1] || block === scriptblocks.length - 1))) {
-				const nextblock = code < 0x0080 ? 0 : findBlock(code);
-				if (block >= 0) {
-					put(nextblock);
-				}
-				block = nextblock;
-			}
-			str += c;
-		}
-		put(-1);
-	};
-	const _domKids = (e, l) => {
-		l.forEach((c) => {
-			const xc = c;
-			if (typeof c === 'string') {
-				formatText(e, c);
-			}
-			else if (c instanceof String) {
-				// String is an escape-hatch for text that should not be formatted with
-				// unicode-block-change-highlighting, e.g. for textarea values.
-				e.appendChild(document.createTextNode('' + c));
-			}
-			else if (c instanceof Element) {
-				e.appendChild(c);
-			}
-			else if (c instanceof Function) {
-				if (!c.name) {
-					throw new Error('function without name');
-				}
-				e.addEventListener(c.name, c);
-			}
-			else if (Array.isArray(xc)) {
-				_domKids(e, c);
-			}
-			else if (xc._class) {
-				for (const s of xc._class) {
-					e.classList.toggle(s, true);
-				}
-			}
-			else if (xc._attrs) {
-				for (const k in xc._attrs) {
-					e.setAttribute(k, xc._attrs[k]);
-				}
-			}
-			else if (xc._styles) {
-				for (const k in xc._styles) {
-					const estyle = e.style;
-					estyle[k] = xc._styles[k];
-				}
-			}
-			else if (xc._props) {
-				for (const k in xc._props) {
-					const eprops = e;
-					eprops[k] = xc._props[k];
-				}
-			}
-			else if (xc.root) {
-				e.appendChild(xc.root);
-			}
-			else {
-				console.log('bad kid', c);
-				throw new Error('bad kid');
-			}
-		});
-		return e;
-	};
-	const dom = {
-		_kids: function (e, ...kl) {
-			while (e.firstChild) {
-				e.removeChild(e.firstChild);
-			}
-			_domKids(e, kl);
-		},
-		_attrs: (x) => { return { _attrs: x }; },
-		_class: (...x) => { return { _class: x }; },
-		// The createElement calls are spelled out so typescript can derive function
-		// signatures with a specific HTML*Element return type.
-		div: (...l) => _domKids(document.createElement('div'), l),
-		span: (...l) => _domKids(document.createElement('span'), l),
-		a: (...l) => _domKids(document.createElement('a'), l),
-		input: (...l) => _domKids(document.createElement('input'), l),
-		textarea: (...l) => _domKids(document.createElement('textarea'), l),
-		select: (...l) => _domKids(document.createElement('select'), l),
-		option: (...l) => _domKids(document.createElement('option'), l),
-		clickbutton: (...l) => _domKids(document.createElement('button'), [attr.type('button'), ...l]),
-		submitbutton: (...l) => _domKids(document.createElement('button'), [attr.type('submit'), ...l]),
-		form: (...l) => _domKids(document.createElement('form'), l),
-		fieldset: (...l) => _domKids(document.createElement('fieldset'), l),
-		table: (...l) => _domKids(document.createElement('table'), l),
-		thead: (...l) => _domKids(document.createElement('thead'), l),
-		tbody: (...l) => _domKids(document.createElement('tbody'), l),
-		tr: (...l) => _domKids(document.createElement('tr'), l),
-		td: (...l) => _domKids(document.createElement('td'), l),
-		th: (...l) => _domKids(document.createElement('th'), l),
-		datalist: (...l) => _domKids(document.createElement('datalist'), l),
-		h1: (...l) => _domKids(document.createElement('h1'), l),
-		h2: (...l) => _domKids(document.createElement('h2'), l),
-		br: (...l) => _domKids(document.createElement('br'), l),
-		hr: (...l) => _domKids(document.createElement('hr'), l),
-		pre: (...l) => _domKids(document.createElement('pre'), l),
-		label: (...l) => _domKids(document.createElement('label'), l),
-		ul: (...l) => _domKids(document.createElement('ul'), l),
-		li: (...l) => _domKids(document.createElement('li'), l),
-		iframe: (...l) => _domKids(document.createElement('iframe'), l),
-		b: (...l) => _domKids(document.createElement('b'), l),
-		img: (...l) => _domKids(document.createElement('img'), l),
-		style: (...l) => _domKids(document.createElement('style'), l),
-		search: (...l) => _domKids(document.createElement('search'), l),
-	};
-	const _attr = (k, v) => { const o = {}; o[k] = v; return { _attrs: o }; };
-	const attr = {
-		title: (s) => _attr('title', s),
-		value: (s) => _attr('value', s),
-		type: (s) => _attr('type', s),
-		tabindex: (s) => _attr('tabindex', s),
-		src: (s) => _attr('src', s),
-		placeholder: (s) => _attr('placeholder', s),
-		href: (s) => _attr('href', s),
-		checked: (s) => _attr('checked', s),
-		selected: (s) => _attr('selected', s),
-		id: (s) => _attr('id', s),
-		datalist: (s) => _attr('datalist', s),
-		rows: (s) => _attr('rows', s),
-		target: (s) => _attr('target', s),
-		rel: (s) => _attr('rel', s),
-		required: (s) => _attr('required', s),
-		multiple: (s) => _attr('multiple', s),
-		download: (s) => _attr('download', s),
-		disabled: (s) => _attr('disabled', s),
-		draggable: (s) => _attr('draggable', s),
-		rowspan: (s) => _attr('rowspan', s),
-		colspan: (s) => _attr('colspan', s),
-		for: (s) => _attr('for', s),
-		role: (s) => _attr('role', s),
-		arialabel: (s) => _attr('aria-label', s),
-		arialive: (s) => _attr('aria-live', s),
-		name: (s) => _attr('name', s)
-	};
-	const style = (x) => { return { _styles: x }; };
-	const prop = (x) => { return { _props: x }; };
-	return [dom, style, attr, prop];
-})();
 // For authentication/security results.
 const underlineGreen = '#50c40f';
 const underlineRed = '#e15d1c';