From 651d0f24c76a7c61b63155acf8a24119a59ad9cd Mon Sep 17 00:00:00 2001
From: pennae <github@quasiparticle.net>
Date: Sun, 7 Aug 2022 01:47:07 +0200
Subject: fenix login is actually a lot simpler

but it *must* be done over https with trusted certificates
---
 web/index.html | 56 +-------------------------------------------------------
 web/js/main.js | 48 ++++++++++++------------------------------------
 2 files changed, 13 insertions(+), 91 deletions(-)

(limited to 'web')

diff --git a/web/index.html b/web/index.html
index d3291f0..f7e8fe1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -108,13 +108,6 @@
 			}
 		</style>
 
-        <template id="tpl-fenix-style">
-            <style>
-                body { font-size: 300%; }
-                input { font-size: 100%; }
-            </style>
-        </template>
-
 		<template id="tpl-desktop-signedin">
 			<div class="container dialog">
 				successfully signed in!
@@ -355,56 +348,9 @@
 			</div>
 		</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>
-		</template>
-
 		<template id="tpl-fenix-signin">
 			<div class="container dialog">
-				<credentials-form submit-text="do the fenix dance"></credentials-form>
+				<credentials-form submit-text="log in"></credentials-form>
 			</div>
 		</template>
 	</head>
diff --git a/web/js/main.js b/web/js/main.js
index 3c1f23a..27d3a1a 100644
--- a/web/js/main.js
+++ b/web/js/main.js
@@ -13,7 +13,7 @@ class Channel {
 		window.addEventListener(
 			'WebChannelMessageToContent',
 			ev => {
-				if (ev.detail.message.error) {
+				if (ev.detail && ev.detail.message.error) {
 					for (const wait in this.waiting) {
 						this.waiting[wait].reject(new Error(ev.detail.message.error));
 					}
@@ -80,6 +80,15 @@ class Channel {
 		});
 	}
 
+	loadOauthCredentials(code, state) {
+		this._send('account_updates', 'fxaccounts:oauth_login', {
+			code,
+			state,
+			redirect: "urn:ietf:wg:oauth:2.0:oob:oauth-redirect-webchannel",
+			action: "signin"
+		});
+	}
+
 	passwordChanged(email, uid) {
 		this._send('account_updates', 'fxaccounts:change_password', {
 			email,
@@ -717,21 +726,6 @@ customElements.define('do-generate-invite', GenerateInvite);
 //////////////////////////////////////////
 
 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'});
@@ -787,21 +781,7 @@ class FenixSigninEnter extends HTMLElement {
 					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,
-				}});
-			\`});`);
+			channel.loadOauthCredentials(code.code, code.state);
 
 			switchTo(new FenixSignin());
 		} finally {
@@ -809,7 +789,7 @@ class FenixSigninEnter extends HTMLElement {
 		}
 	}
 }
-customElements.define('do-fenix-signin-enter', FenixSigninEnter);
+customElements.define('do-fenix-signin', FenixSignin);
 
 //////////////////////////////////////////
 // initialization
@@ -822,10 +802,6 @@ const isAndroid = /Android/.test(navigator.userAgent);
 document.body.onload = async () => {
 	showMessage("Loading ...", "animate");
 
-	if (isAndroid) {
-		document.head.appendChild($("tpl-fenix-style").content);
-	}
-
  	try {
 		let resp = await fetch("/.well-known/fxa-client-configuration");
 		if (!resp.ok) throw new Error(resp.statusText);
-- 
cgit v1.2.3