rewrite the ui using web components

this doesn't do much for functionality, but it makes extending things
easier. hopefully.

1 files changed, 521 insertions, 428 deletions

diff --git a/web/js/main.js b/web/js/main.js
index 23610b6..cefb003 100644
--- a/web/js/main.js
+++ b/web/js/main.js
@@ -206,18 +206,8 @@ function wrapHandler(fn) {
 	};
 }
 
-function switchTo(id, tabID) {
-	for (const screen of document.getElementsByClassName("container")) {
-		screen.hidden = true;
-	}
-	$(id).hidden = false;
-
-	if (tabID) {
-		for (const tab of $(id).getElementsByClassName("tab")) {
-			tab.hidden = true;
-		}
-		$(tabID).hidden = false;
-	}
+function switchTo(v) {
+	$("content").replaceChildren(v);
 }
 
 function dateDiffText(when) {
@@ -243,520 +233,623 @@ function dateDiffText(when) {
 }
 
 //////////////////////////////////////////
-// initialization
+// credentials form
 //////////////////////////////////////////
 
-let client_config;
-var channel = new Channel();
-const isAndroid = /Android/.test(navigator.userAgent);
-
-document.body.onload = () => {
-	showMessage("Loading ...", "animate");
-
-	if (isAndroid) {
-		document.head.appendChild($("tpl-fenix-style").content);
-	}
-
- 	fetch("/.well-known/fxa-client-configuration")
-		.then(resp => {
-			if (!resp.ok) throw new Error(resp.statusText);
-			return resp.json();
-		})
-		.then(data => {
-			client_config = data;
-			hideMessage();
-			return initUI();
-		})
-		.catch(e => {
-			showError("initialization failed: ", e);
-		});
-};
-
-async function initUI() {
-	return isAndroid
-		? await initUIAndroid()
-		: await initUIDesktop();
-}
-
-async function initUIDesktop() {
-	let present = wrapHandler(async () => {
-		if (window.location.hash.startsWith("#/verify/")) {
-			verify_init(JSON.parse(urlatob(window.location.hash.substr(9))));
-		} else if (window.location.hash.startsWith("#/register/")) {
-			signup_init(window.location.hash.substr(11));
-		} else {
-			let data = await channel.getStatus();
-			if (!data.signedInUser) {
-				signin_init();
-			} else if (window.location.hash == "#/settings") {
-				settings_init(data);
-			} else if (window.location.hash == "#/settings/change-password") {
-				settings_chpw_init(data);
-			} else if (window.location.hash == "#/settings/destroy") {
-				settings_destroy_init(data);
-			} else if (window.location.hash == "#/force_auth") {
-				signin_init();
-			} else if (window.location.hash == "#/generate-invite") {
-				generate_invite_init(data);
-			} else {
-				switchTo("desktop-signedin");
-			}
-		}
-		hideMessage();
-	});
-
-	window.onpopstate = () => window.setTimeout(present, 0);
-
-	for (let a of $("desktop-settings").querySelectorAll("nav a")) {
-		a.onclick = async ev => {
+class CredentialsForm extends HTMLElement {
+	constructor() {
+		super();
+		this.replaceChildren($("btpl-credentials").content.cloneNode(true));
+		let frm = this.querySelector("form");
+		frm['submit'].value = this.getAttribute('submit-text');
+		frm.onsubmit = wrapHandler(async ev => {
 			ev.preventDefault();
-			window.location = ev.target.href;
-			await present();
-		};
+			this.dispatchEvent(new CustomEvent('confirm', {
+				detail: {
+					email: ev.target['email'].value,
+					password: ev.target['password'].value,
+				},
+			}));
+		});
 	}
-	await present();
-}
-
-async function initUIAndroid() {
-	fenix_signin_init();
-}
+};
+customElements.define('credentials-form', CredentialsForm);
 
 //////////////////////////////////////////
 // signin form
 //////////////////////////////////////////
 
-function signin_init() {
-	switchTo("desktop-signin");
-	let frm = $("frm-signin");
-	frm.onsubmit = wrapHandler(signin_run);
-	frm.getElementsByClassName("_signup")[0].onclick = wrapHandler(signin_signup_instead);
-	frm.getElementsByClassName("_reset")[0].onclick = wrapHandler(ev => {
-		ev.preventDefault();
-		password_reset_init();
-	});
-}
-
-function signin_signup_instead(ev) {
-	ev.preventDefault();
-	signup_init();
-}
-
-// NOTE it looks like firefox discards its session token before asking for reauth
-// (eg if oauth verification of a sync token fails). we can't use the reauth
-// endpoint for that, so we'll just always log in.
-async function signin_run(ev) {
-	ev.preventDefault();
-	let frm = ev.target;
-
-	if (frm[0].value == "" || !frm[0].validity.valid) {
-		return showRecoverableError("email is not valid");
-	}
-	if (frm[1].value == "" || !frm[1].validity.valid) {
-		return showRecoverableError("password is not valid");
-	}
-
-	let c = new AuthClient(client_config.auth_server_base_url);
-	try {
-		let session = await c.signIn(frm["email"].value, frm["password"].value, {
-			keys: true,
+class Signin extends HTMLElement {
+	constructor() {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.append(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-signin").content.cloneNode(true));
+		let frm = shadow.querySelector("credentials-form");
+		frm.addEventListener('confirm', wrapHandler(async ev => {
+			await this._signin(ev.detail.email, ev.detail.password);
+		}));
+		shadow.querySelector("a._signup").onclick = wrapHandler(async ev => {
+			ev.preventDefault();
+			window.location = ev.target.href;
+		});
+		shadow.querySelector("a._reset").onclick = wrapHandler(async ev => {
+			ev.preventDefault();
+			window.location = ev.target.href;
 		});
+	}
 
-		signin_confirm_init(frm["email"].value, session);
-	} catch (e) {
-		if (e.errno == 104) {
-			showRecoverableError(`
-              account is not verified. please verify or wait a few minutes and register again.
-            `.trim());
-		} else {
-			throw e;
+	// NOTE it looks like firefox discards its session token before asking for reauth
+	// (eg if oauth verification of a sync token fails). we can't use the reauth
+	// endpoint for that, so we'll just always log in.
+	async _signin(email, password) {
+		let c = new AuthClient(client_config.auth_server_base_url);
+		try {
+			let session = await c.signIn(email, password, { keys: true });
+			switchTo(new SigninConfirm(email, session));
+		} catch (e) {
+			if (e.errno == 104) {
+				showRecoverableError(`
+					account is not verified. please verify or wait a few minutes and register again.
+				`.trim());
+			} else {
+				throw e;
+			}
 		}
 	}
-}
+};
+customElements.define('do-signin', Signin);
 
 //////////////////////////////////////////
 // sign-in confirmation
 //////////////////////////////////////////
 
-function signin_confirm_init(email, session) {
-	let frm = $("frm-signin-confirm");
-	frm.getElementsByClassName("_resend")[0].onclick = wrapHandler(async ev => {
-		ev.preventDefault();
-
-		let c = new AuthClient(client_config.auth_server_base_url);
-		await c.sessionResendVerifyCode(session.sessionToken);
-		alert("code resent!");
-	});
-	frm.onsubmit = wrapHandler(async ev => {
-		ev.preventDefault();
-
-		let c = new AuthClient(client_config.auth_server_base_url);
-		c.sessionVerifyCode(session.sessionToken, frm["code"].value)
-			.then(resp => {
+class SigninConfirm extends HTMLElement {
+	constructor(email, session) {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.append(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-signin-confirm").content.cloneNode(true));
+		let frm = shadow.querySelector("form");
+		frm.querySelector("a._resend").onclick = wrapHandler(async ev => {
+			ev.preventDefault();
+			let c = new AuthClient(client_config.auth_server_base_url);
+			await c.sessionResendVerifyCode(session.sessionToken);
+			alert("code resent!");
+		});
+		frm.onsubmit = wrapHandler(async ev => {
+			ev.preventDefault();
+			let c = new AuthClient(client_config.auth_server_base_url);
+			try {
+				await c.sessionVerifyCode(session.sessionToken, frm["code"].value);
 				channel.loadCredentials(email, session, { offered: [], declined: [] });
-				switchTo("desktop-signedin");
-			})
-			.catch(e => {
+				switchTo(new SignedIn());
+			} catch (e) {
 				showError("verification failed: ", e);
-			});
-	});
-	switchTo("desktop-signin-confirm");
-}
+			}
+		});
+	}
+};
+customElements.define('do-signin-confirm', SigninConfirm);
 
 //////////////////////////////////////////
 // password reset
 //////////////////////////////////////////
 
-function password_reset_init() {
-	let frm = $("frm-resetpw");
-	frm.onsubmit = wrapHandler(async ev => {
-		ev.preventDefault();
-
-		let c = new AuthClient(client_config.auth_server_base_url);
-		let token = await c.passwordForgotSendCode(frm["email"].value);
-		let code = prompt(`
-			please enter your password reset code from the email you've just received
-		`.trim());
-		if (code === null) {
-			return showRecoverableError("password reset aborted");
-		}
-
-		let reset_token = await c.passwordForgotVerifyCode(code, token.passwordForgotToken);
-		password_reset_newpw(frm['email'].value, reset_token.accountResetToken);
-	});
-	switchTo("desktop-resetpw");
-}
-
-function password_reset_newpw(email, reset_token) {
-	let frm = $("frm-resetpw-newpw");
-	frm.onsubmit = wrapHandler(async ev => {
-		ev.preventDefault();
+class ResetPassword extends HTMLElement {
+	constructor() {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.append(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-resetpw").content.cloneNode(true));
+		let frm = shadow.querySelector("form");
+		frm.onsubmit = wrapHandler(async ev => {
+			ev.preventDefault();
 
-		let c = new AuthClient(client_config.auth_server_base_url);
-		if (frm['new'].value != frm['new-confirm'].value) {
-			return showRecoverableError("passwords don't match!");
-		}
+			let c = new AuthClient(client_config.auth_server_base_url);
+			let token = await c.passwordForgotSendCode(frm["email"].value);
+			let code = prompt("please enter your password reset code from the email you've just received");
+			if (code === null) {
+				return showRecoverableError("password reset aborted");
+			}
 
-		await c.accountReset(email, frm['new'].value, reset_token);
-		switchTo("desktop-signin");
-	});
-	switchTo("desktop-resetpw-newpw");
-}
+			let reset_token = await c.passwordForgotVerifyCode(code, token.passwordForgotToken);
+			switchTo(new ResetPasswordCreate(frm['email'].value, reset_token.accountResetToken));
+		});
+	}
+};
+customElements.define('do-resetpw', ResetPassword);
+
+class ResetPasswordCreate extends HTMLElement {
+	constructor(email, reset_token) {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.append(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-resetpw-newpw").content.cloneNode(true));
+		let frm = shadow.querySelector("form");
+		frm.onsubmit = async ev => {
+			ev.preventDefault();
+			if (frm['new'].value != frm['new-confirm'].value) {
+				return showRecoverableError("passwords don't match!");
+			}
+			let c = new AuthClient(client_config.auth_server_base_url);
+			await c.accountReset(email, frm['new'].value, reset_token);
+			switchTo(new Signin());
+		};
+	}
+};
+customElements.define('do-resetpw-create', ResetPasswordCreate);
 
 //////////////////////////////////////////
 // signup form
 //////////////////////////////////////////
 
-function signup_init(code) {
-	let frm = $("frm-signup");
-	switchTo("desktop-signup");
-	frm.onsubmit = wrapHandler(async ev => signup_run(ev, code));
-}
-
-async function signup_run(ev, code) {
-	ev.preventDefault();
-	let frm = ev.target;
-
-	if (frm[0].value == "" || !frm[0].validity.valid) {
-		return showRecoverableError("email is not valid");
-	}
-	if (frm[1].value == "" || !frm[1].validity.valid) {
-		return showRecoverableError("password is not valid");
+class Signup extends HTMLElement {
+	constructor(code) {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.replaceChildren(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-signup").content.cloneNode(true));
+		let frm = shadow.querySelector("credentials-form");
+		frm.addEventListener('confirm', async ev => {
+			await this._signup(ev.detail.email, ev.detail.password, code);
+		})
 	}
 
-	let c = new AuthClient(client_config.auth_server_base_url);
-	let session = await c.signUp(frm["email"].value, frm["password"].value, {
-		keys: true,
-		style: code,
-	});
-
-	cwts_continue(frm["email"].value, session);
-}
+	async _signup(email, password, code) {
+		let c = new AuthClient(client_config.auth_server_base_url);
+		let session = await c.signUp(email, password, {
+			keys: true,
+			style: code,
+		});
 
-//////////////////////////////////////////
-// choose-what-to-sync form
-//////////////////////////////////////////
+		switchTo(new CWTS(email, session));
+	}
+};
+customElements.define('do-signup', Signup);
+
+class CWTS extends HTMLElement {
+	constructor(email, session) {
+		super();
+		// TODO we don't query browser capabilities, but we probably should
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.replaceChildren(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-cwts").content.cloneNode(true));
+		let frm = shadow.querySelector("form");
+		frm.onsubmit = wrapHandler((ev) => {
+			ev.preventDefault();
 
-function cwts_continue(email, session) {
-	// TODO we don't query browser capabilities, but we probably should
-	let frm = $("frm-cwts");
-	frm.onsubmit = wrapHandler((ev) => {
-		ev.preventDefault();
+			let offered = [], declined = [];
+			for (const engine of frm.querySelectorAll("input[type=checkbox]")) {
+				if (!engine.checked) declined.push(engine.name);
+				else offered.push(engine.name);
+			}
+			channel.loadCredentials(email, session, { offered, declined });
 
-		let offered = [], declined = [];
-		for (const engine of frm.querySelectorAll("input[type=checkbox]")) {
-			if (!engine.checked) declined.push(engine.name);
-			else offered.push(engine.name);
-		}
-		channel.loadCredentials(email, session, { offered, declined });
+			switchTo(new SignupUnverified());
+		});
+	}
+};
+customElements.define('do-cwts', CWTS);
 
-		switchTo("desktop-signup-unverified");
-	});
-	switchTo("desktop-cwts");
+class SignupUnverified extends HTMLElement {
+	constructor() {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.replaceChildren(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-signup-unverified").content.cloneNode(true));
+	}
 }
+customElements.define('do-signup-unverified', SignupUnverified);
 
 //////////////////////////////////////////
 // verification
 //////////////////////////////////////////
 
-function verify_init(context) {
+class SignedIn extends HTMLElement {
+	constructor() {
+		super();
+		this.replaceChildren($("tpl-desktop-signedin").content.cloneNode(true));
+	}
+};
+customElements.define('signed-in', SignedIn);
+
+async function verify(context) {
 	let c = new AuthClient(client_config.auth_server_base_url);
-	c.verifyCode(context.uid, context.code)
-		.then(resp => {
-			switchTo("desktop-signedin");
-		})
-		.catch(e => {
-			showError("verification failed: ", e);
-		});
+	try {
+		await c.verifyCode(context.uid, context.code)
+		switchTo(new SignedIn());
+	} catch(e) {
+		showError("verification failed: ", e);
+	}
 }
 
 //////////////////////////////////////////
-// settings root
+// settings
 //////////////////////////////////////////
 
-function settings_init(session) {
-	switchTo("desktop-settings", "desktop-settings-main");
+class Settings extends HTMLElement {
+	constructor(session) {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		this.session = session;
+		shadow.replaceChildren(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-settings").content.cloneNode(true));
+
+		for (let a of shadow.querySelectorAll("nav a")) {
+			a.onclick = wrapHandler(async ev => {
+				ev.preventDefault();
+				window.location = ev.target.href;
+				await this._display();
+			});
+		}
+
+		this._display();
+	}
+
+	async _display() {
+		let tab = SettingsMain;
+		if (window.location.hash == "#/settings/change-password") {
+			tab = SettingsChangePassword;
+		} else if (window.location.hash == "#/settings/destroy") {
+			tab = SettingsDestroy;
+		}
+
+		try {
+			this.shadowRoot.querySelector(".tab").replaceChildren(new tab(this.session));
+		} catch(e) {
+			showError("initialization failed: ", e);
+		}
+	}
+};
+customElements.define('do-settings', Settings);
+
+class SettingsMain extends HTMLElement {
+	constructor(session) {
+		super();
+		this.session = session;
+		this.replaceChildren($("tpl-desktop-settings-main").content.cloneNode(true));
+		this._display();
+	}
 
-	let inner = async () => {
+	async _display() {
 		showMessage("Loading ...", "animate");
 
 		let ac = new AuthClient(client_config.auth_server_base_url)
-		let pc = new ProfileClient(ac, session);
+		let pc = new ProfileClient(ac, this.session);
 
 		let initProfile = async () => {
 			let profile = await pc.getProfile();
-			$("settings-name").value = profile.displayName || "";
-			$("frm-settings-name").onsubmit = wrapHandler(async ev => {
-				showMessage("Applying ...")
+			this.querySelector("#name").value = profile.displayName || "";
+			this.querySelector("#frm-name").onsubmit = wrapHandler(async ev => {
 				ev.preventDefault();
-				await pc.setDisplayName($("settings-name").value);
+				showMessage("Applying ...")
+				await pc.setDisplayName(ev.target['name'].value);
 				hideMessage();
 			});
-			$("settings-avatar-img").src = profile.avatar;
-			$("frm-settings-avatar").onsubmit = wrapHandler(async ev => {
-				showMessage("Saving ...")
+			this.querySelector("#avatar-img").src = profile.avatar;
+			this.querySelector("#frm-avatar").onsubmit = wrapHandler(async ev => {
 				ev.preventDefault();
-				await pc.setAvatar($("settings-avatar").files[0]);
-				settings_init(session);
+				showMessage("Saving ...")
+				await pc.setAvatar(ev.target['avatar'].files[0]);
+				await this._display();
 			});
 		};
 
 		await Promise.all([
 			initProfile(),
-			settings_populateClients(ac, session),
+			this._populateClients(ac),
 		]);
 
 		hideMessage();
-	};
-
-	inner().catch(e => {
-		showError("initialization failed: ", e);
-	});
-}
+	}
 
-async function settings_populateClients(authClient, session) {
-	let clients = await authClient.attachedClients(session.signedInUser.sessionToken);
-
-	let body = $("settings-clients").getElementsByTagName("tbody")[0];
-	body.innerHTML = "";
-	for (const c of clients) {
-		let row = document.createElement("tr");
-		let add = (val, tip) => {
-			let cell = document.createElement("td");
-			cell.innerText = val || "";
-			if (tip) cell.title = tip;
-			row.appendChild(cell);
-		};
-		let addDateDiff = val => {
-			let text = dateDiffText(new Date(val));
-			add(text, new Date(val));
-		};
-		add(c.name);
-		add(c.deviceType);
-		addDateDiff(c.createdTime * 1000);
-		addDateDiff(c.lastAccessTime * 1000);
-		add(c.scope ? "yes" : "", (c.scope ? c.scope : "").replace(/ +/g, "\n"));
-		if (c.isCurrentSession) {
-			let cell = document.createElement("td");
-			cell.innerHTML = `<span class="disabled">current session</span>`;
-			row.appendChild(cell);
-		} else if (c.deviceId || c.sessionTokenId || c.refreshTokenId) {
-			let remove = document.createElement("button");
-			remove.innerText = 'remove';
-			remove.onclick = wrapHandler(async ev => {
-				ev.preventDefault();
-				let info = { clientId: c.clientId };
-				if (c.deviceId)
-					info.deviceId = c.deviceId;
-				else if (c.sessionTokenId)
-					info.sessionTokenId = c.sessionTokenId;
-				else if (c.refreshTokenId)
-					info.refreshTokenId = c.refreshTokenId;
-				showMessage("Processing ...", "animate");
-				await authClient.attachedClientDestroy(session.signedInUser.sessionToken, info);
-				await settings_populateClients(authClient, session);
-				hideMessage();
-			});
-			row.appendChild(remove);
+	async _populateClients(authClient) {
+		let clients = await authClient.attachedClients(this.session.signedInUser.sessionToken);
+
+		let body = this.querySelector("#clients tbody");
+		body.innerHTML = "";
+		for (const c of clients) {
+			let row = document.createElement("tr");
+			let add = (val, tip) => {
+				let cell = document.createElement("td");
+				cell.innerText = val || "";
+				if (tip) cell.title = tip;
+				row.appendChild(cell);
+			};
+			let addDateDiff = val => {
+				let text = dateDiffText(new Date(val));
+				add(text, new Date(val));
+			};
+			add(c.name);
+			add(c.deviceType);
+			addDateDiff(c.createdTime * 1000);
+			addDateDiff(c.lastAccessTime * 1000);
+			add(c.scope ? "yes" : "", (c.scope ? c.scope : "").replace(/ +/g, "\n"));
+			if (c.isCurrentSession) {
+				let cell = document.createElement("td");
+				cell.innerHTML = `<span class="disabled">current session</span>`;
+				row.appendChild(cell);
+			} else if (c.deviceId || c.sessionTokenId || c.refreshTokenId) {
+				let remove = document.createElement("button");
+				remove.innerText = 'remove';
+				remove.onclick = wrapHandler(async ev => {
+					ev.preventDefault();
+					let info = { clientId: c.clientId };
+					if (c.deviceId)
+						info.deviceId = c.deviceId;
+					else if (c.sessionTokenId)
+						info.sessionTokenId = c.sessionTokenId;
+					else if (c.refreshTokenId)
+						info.refreshTokenId = c.refreshTokenId;
+					showMessage("Processing ...", "animate");
+					await authClient.attachedClientDestroy(this.session.signedInUser.sessionToken, info);
+					await this._populateClients(authClient, this.session);
+					hideMessage();
+				});
+				row.appendChild(remove);
+			}
+			body.appendChild(row);
 		}
-		body.appendChild(row);
 	}
-}
+};
+customElements.define('do-settings-main', SettingsMain);
 
-//////////////////////////////////////////
-// settings change password
-//////////////////////////////////////////
+class SettingsChangePassword extends HTMLElement {
+	constructor(session) {
+		super();
+		this.replaceChildren($("tpl-desktop-settings-chpw").content.cloneNode(true));
 
-function settings_chpw_init(session) {
-	switchTo("desktop-settings", "desktop-settings-chpw");
-	let frm = $("frm-settings-chpw");
-	frm.onsubmit = wrapHandler(async ev => {
-		ev.preventDefault();
-		let frm = ev.target;
+		let frm = this.querySelector("form");
+		frm.onsubmit = wrapHandler(async ev => {
+			ev.preventDefault();
+			if (frm['new'].value != frm['new-confirm'].value) {
+				return showRecoverableError("passwords don't match!");
+			}
 
-		if (frm["new"].value != frm["new-confirm"].value) {
-			showRecoverableError("passwords don't match");
-			return;
-		}
+			let c = new AuthClient(client_config.auth_server_base_url);
+			await c.passwordChange(session.signedInUser.email, frm['old'].value, frm['new'].value, {});
 
-		let c = new AuthClient(client_config.auth_server_base_url);
-		let resp = await c.passwordChange(session.signedInUser.email, frm['old'].value, frm['new'].value, {});
+			channel.passwordChanged(session.signedInUser.email, session.signedInUser.uid);
+			alert("password changed");
+		});
+	}
+};
+customElements.define('do-settings-chpw', SettingsChangePassword);
 
-		channel.passwordChanged(session.signedInUser.email, session.signedInUser.uid);
-		alert("password changed");
-	});
-}
+class SettingsDestroy extends HTMLElement {
+	constructor(session) {
+		super();
+		this.replaceChildren($("tpl-desktop-settings-destroy").content.cloneNode(true));
 
-//////////////////////////////////////////
-// settings destroy
-//////////////////////////////////////////
+		this.querySelector("credentials-form").addEventListener('confirm', wrapHandler(async ev => {
+			let c = new AuthClient(client_config.auth_server_base_url);
+			await c.accountDestroy(ev.detail.email, ev.detail.password);
 
-function settings_destroy_init(session) {
-	switchTo("desktop-settings", "desktop-settings-destroy");
-	let frm = $("frm-settings-destroy");
-	frm.onsubmit = wrapHandler(async ev => {
-		ev.preventDefault();
-		let frm = ev.target;
+			channel.accountDestroyed(ev.detail.email, session.signedInUser.uid);
+			switchTo(new AccountDestroyed());
+		}));
+	}
+};
+customElements.define('do-settings-destroy', SettingsDestroy);
 
-		if (frm[0].value == "" || !frm[0].validity.valid) {
-			return showRecoverableError("email is not valid");
-		}
-		if (frm[1].value == "" || !frm[1].validity.valid) {
-			return showRecoverableError("password is not valid");
-		}
+class AccountDestroyed extends HTMLElement {
+	constructor() {
+		super();
+		this.replaceChildren(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-deleted").content.cloneNode(true));
+	}
+};
+customElements.define('account-destroyed', AccountDestroyed);
 
-		let c = new AuthClient(client_config.auth_server_base_url);
-		await c.accountDestroy(frm["email"].value, frm["password"].value);
+//////////////////////////////////////////
+// generate invite
+//////////////////////////////////////////
 
-		channel.accountDestroyed(frm["email"], session.signedInUser.uid);
-		switchTo("desktop-deleted");
-	});
-}
+class GenerateInvite extends HTMLElement {
+	constructor(session) {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.replaceChildren(
+			$("styles").cloneNode(true),
+			$("tpl-desktop-generate-invite").content.cloneNode(true));
+
+		let frm = shadow.querySelector("form");
+		shadow.querySelector("#result").hidden = true;
+		frm.onsubmit = wrapHandler(async ev => {
+			ev.preventDefault();
+
+			let server_url = new URL(client_config.auth_server_base_url);
+			server_url.pathname = server_url.pathname.split("/").slice(0, -1).join("/") + "/_invite";
+			let c = new AuthClient(server_url.toString());
+			let resp = await c.sessionPost(
+				"/generate",
+				session.signedInUser.sessionToken,
+				{ 'ttl_hours': parseInt(frm["ttl"].value) });
+
+			shadow.querySelector("#link").href = resp.url;
+			shadow.querySelector("#link").innerText = resp.url;
+			shadow.querySelector("#result").hidden = false;
+		});
+	}
+};
+customElements.define('do-generate-invite', GenerateInvite);
 
 //////////////////////////////////////////
-// generate invite
+// fenix signin
 //////////////////////////////////////////
 
-function generate_invite_init(session) {
-	let frm = $("frm-generate-invite");
-	$("desktop-generate-invite-result").hidden = true;
-	frm.onsubmit = wrapHandler(async ev => {
-		ev.preventDefault();
+class FenixSignin extends HTMLElement {
+	constructor(session) {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.replaceChildren(
+			$("styles").cloneNode(true),
+			$("tpl-fenix-signin-warning").content.cloneNode(true));
+		shadow.querySelector("#signin").onclick = wrapHandler(async ev => {
+			ev.preventDefault();
+			switchTo(new FenixSigninEnter());
+		});
+	}
+}
+customElements.define('do-fenix-signin', FenixSignin);
+
+class FenixSigninEnter extends HTMLElement {
+	constructor(session) {
+		super();
+		const shadow = this.attachShadow({mode: 'open'});
+		shadow.replaceChildren(
+			$("styles").cloneNode(true),
+			$("tpl-fenix-signin").content.cloneNode(true));
+		shadow.querySelector("credentials-form").addEventListener('confirm', wrapHandler(async ev => {
+			ev.preventDefault();
+			await this._step2(ev.detail.email, ev.detail.password);
+		}));
+	}
 
-		let server_url = new URL(client_config.auth_server_base_url);
-		server_url.pathname = server_url.pathname.split("/").slice(0, -1).join("/") + "/_invite";
-		let c = new AuthClient(server_url.toString());
-		let resp = await c.sessionPost(
-			"/generate",
-			session.signedInUser.sessionToken,
-			{ 'ttl_hours': parseInt(frm["ttl"].value) });
+	async _step2(email, password) {
+		let url = new URL(window.location);
+		let params = new URLSearchParams(url.search);
+		let param = (p) => {
+			let val = params.get(p);
+			if (val === undefined) throw `missing parameter ${p}`;
+			return val;
+		};
 
-		$("desktop-generate-invite-result-link").href = resp.url;
-		$("desktop-generate-invite-result-link").innerText = resp.url;
-		$("desktop-generate-invite-result").hidden = false;
+		let c = new AuthClient(client_config.auth_server_base_url);
+		let session = await c.signIn(email, password, { keys: true });
+		let verifyCode = prompt("enter verify code");
+		await c.sessionVerifyCode(session.sessionToken, verifyCode);
+		try {
+			let keys = await c.accountKeys(session.keyFetchToken, session.unwrapBKey);
+			let scoped_keys = await c.getOAuthScopedKeyData(
+				session.sessionToken,
+				param("client_id"),
+				param("scope"));
+			for (var scope in scoped_keys) {
+				scoped_keys[scope] = await deriveScopedKey(
+					keys.kB,
+					session.uid,
+					scope,
+					scoped_keys[scope].keyRotationSecret,
+					scoped_keys[scope].keyRotationTimestamp);
+			}
 
-	});
-	switchTo("desktop-generate-invite");
+			let keys_jwe = await encryptScopedKeys(scoped_keys, param("keys_jwk"));
+
+			let code = await c.createOAuthCode(
+				session.sessionToken,
+				param("client_id"),
+				param("state"),
+				{
+					access_type: param("access_type"),
+					keys_jwe,
+					response_type: param("response_type"),
+					scope: param("scope"),
+					code_challenge_method: param("code_challenge_method"),
+					code_challenge: param("code_challenge"),
+				});
+
+			console.log(`browser.tabs.executeScript({code: \`
+				port = browser.runtime.connectNative("mozacWebchannel");
+				port.postMessage({
+					id: "account_updates",
+					message: {
+						command: "fxaccounts:oauth_login",
+						data: {
+							"code": "${code.code}",
+							"state": "${code.state}",
+							"redirect": "urn:ietf:wg:oauth:2.0:oob:oauth-redirect-webchannel",
+							"action": "signin"
+						},
+					messageId: 1,
+				}});
+			\`});`);
+
+			switchTo(new FenixSignin());
+		} finally {
+			c.sessionDestroy(session.sessionToken);
+		}
+	}
 }
+customElements.define('do-fenix-signin-enter', FenixSigninEnter);
 
 //////////////////////////////////////////
-// fenix signin
+// initialization
 //////////////////////////////////////////
 
-function fenix_signin_init() {
-	switchTo("fenix-signin-warning");
-	$("fenix-signin-dialog-show").onclick = wrapHandler(async ev => {
-		ev.preventDefault();
-		switchTo("fenix-signin");
-		$("frm-fenix-signin").onsubmit = wrapHandler(fenix_signin_step2);
-	});
-}
+let client_config;
+var channel = new Channel();
+const isAndroid = /Android/.test(navigator.userAgent);
+
+document.body.onload = async () => {
+	showMessage("Loading ...", "animate");
 
-async function fenix_signin_step2(ev) {
-	ev.preventDefault();
+	if (isAndroid) {
+		document.head.appendChild($("tpl-fenix-style").content);
+	}
 
-	let url = new URL(window.location);
-	let params = new URLSearchParams(url.search);
-	let param = (p) => {
-		let val = params.get(p);
-		if (val === undefined) throw `missing parameter ${p}`;
-		return val;
-	};
+ 	try {
+		let resp = await fetch("/.well-known/fxa-client-configuration");
+		if (!resp.ok) throw new Error(resp.statusText);
+		client_config = await resp.json();
+		hideMessage();
+		initUI();
+	} catch(e) {
+		showError("initialization failed: ", e);
+	}
+};
 
-	let frm = ev.target;
-	let c = new AuthClient(client_config.auth_server_base_url);
-	let session = await c.signIn(frm["email"].value, frm["password"].value, {
-		keys: true,
-	});
-	let verifyCode = prompt("enter verify code");
-	await c.sessionVerifyCode(session.sessionToken, verifyCode);
-	try {
-		let keys = await c.accountKeys(session.keyFetchToken, session.unwrapBKey);
-		let scoped_keys = await c.getOAuthScopedKeyData(
-			session.sessionToken,
-			param("client_id"),
-			param("scope"));
-		for (var scope in scoped_keys) {
-			scoped_keys[scope] = await deriveScopedKey(
-				keys.kB,
-				session.uid,
-				scope,
-				scoped_keys[scope].keyRotationSecret,
-				scoped_keys[scope].keyRotationTimestamp);
+async function initUI() {
+	if (isAndroid) {
+		await initUIAndroid();
+	} else {
+		await initUIDesktop();
+	}
+}
+
+async function initUIDesktop() {
+	let present = wrapHandler(async () => {
+		if (window.location.hash.startsWith("#/verify/")) {
+			await verify(JSON.parse(urlatob(window.location.hash.substr(9))));
+		} else if (window.location.hash.startsWith("#/register/")) {
+			switchTo(new Signup(window.location.hash.substr(11)));
+		} else {
+			let data = await channel.getStatus();
+			if (window.location.hash == "#/signup") {
+				switchTo(new Signup());
+			} else if (window.location.hash == "#/reset-password") {
+				switchTo(new ResetPassword());
+			} else if (!data.signedInUser
+				|| window.location.hash == "#/force_auth") {
+				switchTo(new Signin());
+			} else if (window.location.hash == "#/settings"
+					   || window.location.hash == "#/settings/change-password"
+					   || window.location.hash == "#/settings/destroy") {
+				switchTo(new Settings(data));
+			} else if (window.location.hash == "#/generate-invite") {
+				switchTo(new GenerateInvite(data));
+			} else {
+				switchTo(new SignedIn());
+			}
 		}
+		hideMessage();
+	});
 
-		let keys_jwe = await encryptScopedKeys(scoped_keys, param("keys_jwk"));
-
-		let code = await c.createOAuthCode(
-			session.sessionToken,
-			param("client_id"),
-			param("state"),
-			{
-				access_type: param("access_type"),
-				keys_jwe,
-				response_type: param("response_type"),
-				scope: param("scope"),
-				code_challenge_method: param("code_challenge_method"),
-				code_challenge: param("code_challenge"),
-			});
+	window.onpopstate = () => window.setTimeout(present, 0);
+	window.onhashchange = () => window.setTimeout(present, 0);
+	await present();
+}
 
-		console.log(`browser.tabs.executeScript({code: \`
-            port = browser.runtime.connectNative("mozacWebchannel");
-            port.postMessage({
-                id: "account_updates",
-	     		message: {
-                    command: "fxaccounts:oauth_login",
-                    data: {
-                        "code": "${code.code}",
-                        "state": "${code.state}",
-                        "redirect": "urn:ietf:wg:oauth:2.0:oob:oauth-redirect-webchannel",
-                        "action": "signin"
-                    },
-                messageId: 1,
-            }});
-        \`});`);
-
-		switchTo("fenix-signin-warning");
-	} finally {
-		c.sessionDestroy(session.sessionToken);
-	}
+async function initUIAndroid() {
+	switchTo(new FenixSignin());
 }