rewrite the ui using web components

this doesn't do much for functionality, but it makes extending things easier. hopefully.
author: pennae <github@quasiparticle.net> 2022-07-23 21:22:45 +0200
committer: pennae <github@quasiparticle.net> 2022-07-23 23:54:19 +0200
commit: dbfb5500fc22c3e773221ca398547bc5b3dd35d0 (patch)
tree: 36c0d489e2372d6dc078ceb32a6bb6eec2d51fdb
parent: 3b262297057a148d03d2a177908039f068a4b110 (diff)
download: minor-skulk-dbfb5500fc22c3e773221ca398547bc5b3dd35d0.tar.gz
minor-skulk-dbfb5500fc22c3e773221ca398547bc5b3dd35d0.tar.xz
minor-skulk-dbfb5500fc22c3e773221ca398547bc5b3dd35d0.zip
2 files changed, 782 insertions, 680 deletions
diff --git a/web/index.html b/web/index.html
index f36654f..dd60e7d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<script src="/js/main" type="module"></script>
-		<style>
+		<style id="styles">
 			@keyframes fade-blink {
 				0% { opacity: 100%; }
 				100% { opacity: 0%; }
@@ -25,15 +25,6 @@
 				animation: fade-blink 1s ease-in-out infinite alternate;
 			}
 
-			#settings-avatar-img {
-				max-width: 200px;
-				max-height: 200px;
-			}
-
-			[hidden] {
-				display: none !important;
-			}
-
 			input[type=email]:invalid {
 				background: #ff8080;
 			}
@@ -109,284 +100,302 @@
 				font-style: italic;
 			}
 		</style>
+
         <template id="tpl-fenix-style">
             <style>
                 body { font-size: 300%; }
                 input { font-size: 100%; }
             </style>
         </template>
-	</head>
-	<body>
-		<noscript>this thing requires javascript!</noscript>
 
-		<dialog id="message-modal">
-			<div id="message-modal-content">
-				<p id="message"></p>
-				<a href="#" id="message-modal-close" hidden>close</a>
+		<template id="tpl-desktop-signedin">
+			<div class="container dialog">
+				successfully signed in!
 			</div>
-		</dialog>
+		</template>
 
-		<div id="desktop-signedin" class="container dialog" hidden>
-			successfully signed in!
-		</div>
-
-		<div id="desktop-deleted" class="container dialog" hidden>
-			account has been deleted.
-		</div>
+		<template id="tpl-desktop-deleted">
+			<div class="container dialog">
+				account has been deleted.
+			</div>
+		</template>
 
-		<div id="desktop-signup" class="container dialog" hidden>
-			<form id="frm-signup">
-				<label for="frm-signup-email">email</label>
-				<input id="frm-signup-email" type="email" name="email" maxlength="256" value="">
-				<label for="frm-signup-password">password</label>
-				<input id="frm-signup-password" type="password" name="password">
-				<input type="submit" name="submit" value="sign up">
+		<template id="btpl-credentials">
+			<form>
+				<label for="email">email</label>
+				<input id="email" type="email" name="email" maxlength="256">
+				<label for="password">password</label>
+				<input id="password" type="password" name="password" minlength="8" maxlength="256">
+				<input type="submit" name="submit">
 			</form>
-		</div>
+		</template>
 
-		<div id="desktop-signup-unverified" class="container dialog" hidden>
-			<p>signup completed! please verify your account by clicking the
-				link in the email you've just received.</p>
-			<p>if you haven't received anything, go to Settings/Sync and resend
-				the verification code.</p>
-		</div>
+		<template id="tpl-desktop-signup">
+			<div class="container dialog">
+				<credentials-form submit-text="sign up"></credentials-form>
+			</div>
+		</template>
+
+		<template id="tpl-desktop-signup-unverified">
+			<div class="container dialog">
+				<p>signup completed! please verify your account by clicking the
+					link in the email you've just received.</p>
+				<p>if you haven't received anything, go to Settings/Sync and resend
+					the verification code.</p>
+			</div>
+		</template>
 
-		<div id="desktop-signin" class="container dialog" hidden>
-			<form id="frm-signin">
-				<label for="frm-signin-email">email</label>
-				<input id="frm-signin-email" type="email" name="email" maxlength="256" value="">
-				<label for="frm-signin-password">password</label>
-				<input id="frm-signin-password" type="password" name="password">
-				<input type="submit" name="submit" value="sign in">
-				<hr>
+		<template id="tpl-desktop-signin">
+			<div class="container dialog">
+				<credentials-form submit-text="sign in"></credentials-form>
 				<div>
-					<a href="#" class="_signup">sign up</a> |
-					<a href="#" class="_reset">reset password</a>
+					<a href="#/signup" class="_signup">sign up</a> |
+					<a href="#/reset-password" class="_reset">reset password</a>
 				</div>
-			</form>
-		</div>
+			</div>
+		</template>
+
+		<template id="tpl-desktop-signin-confirm">
+			<div class="container dialog">
+				<p>signin completed! please verify your session by copying the code
+					you've just received as an email into this box.</p>
+				<form>
+					<label for="code">code</label>
+					<input id="code" type="text" name="code" minlength="6" maxlength="6">
+					<input type="submit" name="submit" value="confirm signin">
+					<hr>
+					<a href="#" class="_resend">no email appeared? resend code</a>
+				</form>
+			</div>
+		</template>
+
+		<template id="tpl-desktop-resetpw">
+			<div class="container dialog">
+				<form>
+					<label for="email">email</label>
+					<input id="email" type="email" name="email" maxlength="256">
+					<input type="submit" name="submit" value="send reset code">
+				</form>
+			</div>
+		</template>
 
-		<div id="desktop-signin-confirm" class="container dialog" hidden>
-			<p>signin completed! please verify your session by copying the code
-				you've just received as an email into this box.</p>
-			<form id="frm-signin-confirm">
-				<label for="frm-signin-confirm-code">code</label>
-				<input id="frm-signin-confirm-code" type="text" name="code" maxlength="6">
-				<input type="submit" name="submit" value="confirm signin">
-				<hr>
-				<a href="#" class="_resend">no email appeared? resend code</a>
+		<template id="tpl-desktop-resetpw-newpw">
+			<div class="container dialog">
+				<form>
+					<table>
+						<tr>
+							<td><label for="new">new password</label></td>
+							<td><input id="new" type="password" name="new" minlength="8" maxlength="256"></td>
+						</tr>
+						<tr>
+							<td><label for="confirm">new password (confirm)</label></td>
+							<td><input id="confirm" type="password" name="new-confirm"
+									   minlength="8" maxlength="256"></td>
+						</tr>
+					</table>
+					<div>
+						<input type="submit" name="submit">
+					</div>
+				</form>
+			</div>
+		</template>
+
+		<template id="tpl-desktop-cwts">
+			<div class="container dialog">
+				<form id="frm">
+					<p>choose what to sync:</p>
+					<div class="cwts-container">
+						<div>
+							<input type="checkbox" id="addons" name="addons">
+							<label for="addons">add-ons</label>
+						</div>
+						<div>
+							<input type="checkbox" id="addresses" name="addresses">
+							<label for="addresses">addresses</label>
+						</div>
+						<div>
+							<input type="checkbox" id="bookmarks" name="bookmarks">
+							<label for="bookmarks">bookmarks</label>
+						</div>
+						<div>
+							<input type="checkbox" id="creditcards" name="creditcards">
+							<label for="creditcards">credit cards</label>
+						</div>
+						<div>
+							<input type="checkbox" id="history" name="history">
+							<label for="history">history</label>
+						</div>
+						<div>
+							<input type="checkbox" id="passwords" name="passwords">
+							<label for="passwords">passwords</label>
+						</div>
+						<!-- NOTE the spec says this key is named `preferences` -->
+						<div>
+							<input type="checkbox" id="prefs" name="prefs">
+							<label for="prefs">preferences</label>
+						</div>
+						<div>
+							<input type="checkbox" id="tabs" name="tabs">
+							<label for="tabs">open tabs</label>
+						</div>
+					</div>
+					<input type="submit" name="submit" value="start syncing">
+				</form>
+			</div>
+		</template>
+
+		<template id="tpl-desktop-settings">
+			<div class="container">
+				<nav>
+					<a href="#/settings">settings</a> |
+					<a href="#/settings/change-password">change password</a> |
+					<a href="#/settings/destroy">delete account</a>
+				</nav>
+				<div class="settings-container tab"></div>
+			</div>
+		</template>
+
+		<template id="tpl-desktop-settings-main">
+			<style>
+				#avatar-img {
+					max-width: 200px;
+					max-height: 200px;
+				}
+			</style>
+			<form id="frm-avatar">
+				<img id="avatar-img">
+				<input type="file" accept="image/*" name="avatar">
+				<input type="submit" value="save">
 			</form>
-		</div>
-
-		<div id="desktop-resetpw" class="container dialog" hidden>
-			<form id="frm-resetpw">
-				<label for="frm-resetpw-email">email</label>
-				<input id="frm-resetpw-email" type="email" name="email" maxlength="256" value="">
-				<input type="submit" name="submit" value="send reset code">
+			<form id="frm-name">
+				<label for="name">user name:</label>
+				<input type="text" id="name" name="name" maxlength="256">
+				<input type="submit" value="save">
 			</form>
-		</div>
-
-		<div id="desktop-resetpw-newpw" class="container dialog" hidden>
-			<form id="frm-resetpw-newpw">
+			<table id="clients">
+				<thead>
+					<tr>
+						<td>name</td>
+						<td>deviceType</td>
+						<td>createdTime</td>
+						<td>lastAccessTime</td>
+						<td>oauth?</td>
+					</tr>
+				</thead>
+				<tbody>
+				</tbody>
+			</table>
+		</template>
+
+		<template id="tpl-desktop-settings-destroy">
+			<p>deleting your account requires confirmation.</p>
+			<credentials-form submit-text="really delete accout"></credentials-form>
+		</template>
+
+		<template id="tpl-desktop-settings-chpw">
+			<form>
 				<table>
 					<tr>
-						<td><label for="frm-resetpw-newpw-old">old password</label></td>
-						<td><input id="frm-resetpw-newpw-old" type="password" name="old"></td>
+						<td><label for="old">old password</label></td>
+						<td><input id="old" type="password" name="old" minlength="8" maxlength="256"></td>
 					</tr>
 					<tr>
-						<td><label for="frm-resetpw-newpw-new">new password</label></td>
-						<td><input id="frm-resetpw-newpw-new" type="password" name="new"></td>
+						<td><label for="new">new password</label></td>
+						<td><input id="new" type="password" name="new" minlength="8" maxlength="256"></td>
 					</tr>
 					<tr>
-						<td><label for="frm-resetpw-newpw-new-confirm">new password (confirm)</label></td>
-						<td>
-							<input id="frm-resetpw-newpw-new-confirm" type="password" name="new-confirm">
-						</td>
+						<td><label for="confirm">new password (confirm)</label></td>
+						<td><input id="confirm" type="password" name="new-confirm"
+								   minlength="8" maxlength="256"></td>
 					</tr>
 				</table>
 				<div>
-					<input type="submit" name="submit" value="change password">
-				</div>
-			</form>
-		</div>
-
-		<div id="desktop-cwts" class="container dialog" hidden>
-			<form id="frm-cwts">
-				<p>choose what to sync:</p>
-				<div class="cwts-container">
-					<div>
-						<input type="checkbox" id="frm-cwts-addons" name="addons">
-						<label for="frm-cwts-addons">add-ons</label>
-					</div>
-					<div>
-						<input type="checkbox" id="frm-cwts-addresses" name="addresses">
-						<label for="frm-cwts-addresses">addresses</label>
-					</div>
-					<div>
-						<input type="checkbox" id="frm-cwts-bookmarks" name="bookmarks">
-						<label for="frm-cwts-bookmarks">bookmarks</label>
-					</div>
-					<div>
-						<input type="checkbox" id="frm-cwts-creditcards" name="creditcards">
-						<label for="frm-cwts-creditcards">credit cards</label>
-					</div>
-					<div>
-						<input type="checkbox" id="frm-cwts-history" name="history">
-						<label for="frm-cwts-history">history</label>
-					</div>
-					<div>
-						<input type="checkbox" id="frm-cwts-passwords" name="passwords">
-						<label for="frm-cwts-passwords">passwords</label>
-					</div>
-					<!-- NOTE the spec says this key is named `preferences` -->
-					<div>
-						<input type="checkbox" id="frm-cwts-prefs" name="prefs">
-						<label for="frm-cwts-prefs">preferences</label>
-					</div>
-					<div>
-						<input type="checkbox" id="frm-cwts-tabs" name="tabs">
-						<label for="frm-cwts-tabs">open tabs</label>
-					</div>
+					<input type="submit" name="submit">
 				</div>
-				<input type="submit" name="submit" value="start syncing">
 			</form>
-		</div>
-
-		<div id="desktop-settings" class="container" hidden>
-			<nav>
-				<a href="#/settings">settings</a> |
-				<a href="#/settings/change-password">change password</a> |
-				<a href="#/settings/destroy">delete account</a>
-			</nav>
-			<div class="settings-container tab" id="desktop-settings-main" hidden>
-				<form id="frm-settings-avatar">
-					<img id="settings-avatar-img">
-					<input type="file" accept="image/*" id="settings-avatar">
-					<input type="submit" id="settings-avatar-save" value="save">
-				</form>
-				<form id="frm-settings-name">
-					<label for="settings-name">user name:</label>
-					<input type="text" id="settings-name" maxlength="256">
-					<input type="submit" id="settings-name-save" value="save">
+		</template>
+
+		<template id="tpl-desktop-generate-invite">
+			<div class="container dialog">
+				<form>
+					<label for="ttl">invite valid for</label>
+					<select id="ttl" name="ttl" maxlength="256">
+						<option value="1">one hour</option>
+						<option value="24">one day</option>
+						<option value="168">one week</option>
+					</select>
+					<input type="submit" name="submit" value="generate invite">
 				</form>
-				<table id="settings-clients">
-					<thead>
-						<tr>
-							<td>name</td>
-							<td>deviceType</td>
-							<td>createdTime</td>
-							<td>lastAccessTime</td>
-							<td>oauth?</td>
-						</tr>
-					</thead>
-					<tbody>
-					</tbody>
-				</table>
+				<div id="result" hidden>
+					invite link is <a id="link"></a>
+				</div>
 			</div>
-			<div class="settings-container tab" id="desktop-settings-destroy" hidden>
-				<p>deleting your account requires confirmation.</p>
-				<form id="frm-settings-destroy">
-					<label for="frm-settings-destroy-email">email</label>
-					<input id="frm-settings-destroy-email" type="email"
-						   name="email" maxlength="256" value="">
-					<label for="frm-settings-destroy-password">password</label>
-					<input id="frm-settings-destroy-password" type="password" name="password">
-					<input type="submit" name="submit" value="really delete account">
-				</form>
+		</template>
+
+		<template id="tpl-fenix-signin-warning">
+			<div class="container">
+				<p>it looks like you're trying to sign in to sync from an android firefox instance.
+				we're very sorry, but this is going to hurt a bit.</p>
+				<p>to sign in you'll need to follow these steps:</p>
+				<ol>
+					<li>
+						enable USB debugging in the android:
+						<ol>
+							<li>go to setting → about phone</li>
+							<li>scroll to the build number</li>
+							<li>tap it until a "your are new a developer" message appears</li>
+							<li>go to settings → system → developer options</li>
+							<li>scroll down to "USB debugging", enable it</li>
+						</ol>
+					</li>
+					<li>enable USB debugging in the android firefox settings</li>
+					<li>connect your android device to a PC for USB debugging</li>
+					<li>on this PC, open firefox and go to <pre>about:debugging</pre></li>
+					<li>enable USB devices</li>
+					<li>connect to your android device</li>
+					<li>open this page in a normal tab, not through the sign-in interface.
+						this is very important, if there's no normal tab with this URL open
+						<em>signin will not work</em></li>
+					<li>open the login page through the sign-in interface as well</li>
+					<li>in the PC debugger, inspect the new tab that has just appeared</li>
+					<li><a href="#" id="signin">actually sign in</a>.
+						clicking this link will lead away from this page, finishing sign-in
+						will bring you back.</li>
+					<li>go to the javascript debug console of the tab we inspected previously,
+						copy the long block of code</li>
+					<li>locate the <pre>Firefox Accounts WebChannel</pre> extension in the
+						debugger and inspect it. this may fail, if it does go to the setup
+						tab of the debugger and disable USB devices, enable then, reconnect
+						to your devices, and repeat this step
+						<p><b>WARNING:</b> this is known to not work on firefox 102. if you get
+							a blank tab instead of a tab with debug tools as seen earlier you
+							may have to downgrade your android firefox to 101 to log in.
+							unfortunately this seems to require uninstalling and reinstalling
+							firefox, which wipes your data!</p>
+					</li>
+					<li>go to the javascript debug console, paste the block of code, and run it</li>
+					<li>enjoy sync!</li>
+				</ol>
 			</div>
-			<div class="settings-container tab" id="desktop-settings-chpw" hidden>
-				<form id="frm-settings-chpw">
-					<table>
-						<tr>
-							<td><label for="frm-settings-chpw-old">old password</label></td>
-							<td><input id="frm-settings-chpw-old" type="password" name="old"></td>
-						</tr>
-						<tr>
-							<td><label for="frm-settings-chpw-new">new password</label></td>
-							<td><input id="frm-settings-chpw-new" type="password" name="new"></td>
-						</tr>
-						<tr>
-							<td><label for="frm-settings-chpw-new-confirm">new password (confirm)</label></td>
-							<td>
-								<input id="frm-settings-chpw-new-confirm" type="password" name="new-confirm">
-							</td>
-						</tr>
-					</table>
-					<div>
-						<input type="submit" name="submit" value="change password">
-					</div>
-				</form>
-			</div>
-		</div>
+		</template>
 
-		<div id="desktop-generate-invite" class="container dialog" hidden>
-			<form id="frm-generate-invite">
-				<label for="frm-generate-invite-email">invite valid for</label>
-				<select id="frm-generate-invite-email" name="ttl" maxlength="256">
-					<option value="1">one hour</option>
-					<option value="24">one day</option>
-					<option value="168">one week</option>
-				</select>
-				<input type="submit" name="submit" value="generate invite">
-			</form>
-			<div id="desktop-generate-invite-result" hidden>
-				invite link is <a id="desktop-generate-invite-result-link"></a>
+		<template id="tpl-fenix-signin">
+			<div class="container dialog">
+				<credentials-form submit-text="do the fenix dance"></credentials-form>
 			</div>
-		</div>
+		</template>
+	</head>
+	<body>
+		<noscript>this thing requires javascript!</noscript>
 
-		<div id="fenix-signin-warning" class="container" hidden>
-			<p>it looks like you're trying to sign in to sync from an android firefox instance.
-			   we're very sorry, but this is going to hurt a bit.</p>
-			<p>to sign in you'll need to follow these steps:</p>
-			<ol>
-				<li>
-					enable USB debugging in the android:
-					<ol>
-						<li>go to setting → about phone</li>
-						<li>scroll to the build number</li>
-						<li>tap it until a "your are new a developer" message appears</li>
-						<li>go to settings → system → developer options</li>
-						<li>scroll down to "USB debugging", enable it</li>
-					</ol>
-				</li>
-				<li>enable USB debugging in the android firefox settings</li>
-				<li>connect your android device to a PC for USB debugging</li>
-				<li>on this PC, open firefox and go to <pre>about:debugging</pre></li>
-				<li>enable USB devices</li>
-				<li>connect to your android device</li>
-				<li>open this page in a normal tab, not through the sign-in interface.
-					this is very important, if there's no normal tab with this URL open
-					<em>signin will not work</em></li>
-				<li>open the login page through the sign-in interface as well</li>
-				<li>in the PC debugger, inspect the new tab that has just appeared</li>
-				<li><a href="#" id="fenix-signin-dialog-show">actually sign in</a>.
-				    clicking this link will lead away from this page, finishing sign-in
-					will bring you back.</li>
-				<li>go to the javascript debug console of the tab we inspected previously,
-					copy the long block of code</li>
-				<li>locate the <pre>Firefox Accounts WebChannel</pre> extension in the
-					debugger and inspect it. this may fail, if it does go to the setup
-				    tab of the debugger and disable USB devices, enable then, reconnect
-				    to your devices, and repeat this step
-					<p><b>WARNING:</b> this is known to not work on firefox 102. if you get
-						a blank tab instead of a tab with debug tools as seen earlier you
-						may have to downgrade your android firefox to 101 to log in.
-						unfortunately this seems to require uninstalling and reinstalling
-						firefox, which wipes your data!</p>
-				</li>
-				<li>go to the javascript debug console, paste the block of code, and run it</li>
-				<li>enjoy sync!</li>
-			</ol>
-		</div>
+		<dialog id="message-modal">
+			<div id="message-modal-content">
+				<p id="message"></p>
+				<a href="#" id="message-modal-close" hidden>close</a>
+			</div>
+		</dialog>
 
-		<div id="fenix-signin" class="container dialog" hidden>
-			<form id="frm-fenix-signin">
-				<label for="email">email</label>
-				<input type="text" name="email" value="">
-				<label for="password">password</label>
-				<input type="password" name="password">
-				<input type="submit" name="submit" value="do the fenix dance">
-			</form>
+		<div id="content">
 		</div>
 	</body>
 </html>
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());
 }
author	pennae <github@quasiparticle.net>	2022-07-23 21:22:45 +0200
committer	pennae <github@quasiparticle.net>	2022-07-23 23:54:19 +0200
commit	dbfb5500fc22c3e773221ca398547bc5b3dd35d0 (patch)
tree	36c0d489e2372d6dc078ceb32a6bb6eec2d51fdb
parent	3b262297057a148d03d2a177908039f068a4b110 (diff)
download	minor-skulk-dbfb5500fc22c3e773221ca398547bc5b3dd35d0.tar.gz minor-skulk-dbfb5500fc22c3e773221ca398547bc5b3dd35d0.tar.xz minor-skulk-dbfb5500fc22c3e773221ca398547bc5b3dd35d0.zip