add structure to WebUSB proof of concept page

2 files changed, 62 insertions, 15 deletions

diff --git a/static/js/web-install.js b/static/js/web-install.js
index 5899fc9b..aa117b76 100644
--- a/static/js/web-install.js
+++ b/static/js/web-install.js
@@ -1,30 +1,43 @@
 // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt MIT
 
-async function doConnect() {
+async function adbRebootBootloader() {
     const webusb = await Adb.open("WebUSB");
 
-    console.log("connected");
-
-    if (webusb.isAdb()) {
-        console.log("adb");
-        const adb = await webusb.connectAdb("host::");
-        await adb.reboot("bootloader");
+    if (!webusb.isAdb()) {
+        console.log("error: not in adb mode");
         return;
     }
 
-    if (webusb.isFastboot()) {
-        console.log("fastboot");
-        const fastboot = await webusb.connectFastboot();
-        await fastboot.send("flashing unlock");
-        await fastboot.receive();
+    console.log("connecting with adb");
+
+    const adb = await webusb.connectAdb("host::");
+    await adb.reboot("bootloader");
+}
+
+async function unlockBootloader() {
+    const webusb = await Adb.open("WebUSB");
+
+    if (!webusb.isFastboot()) {
+        console.log("error: not in fastboot mode");
     }
+
+    console.log("connecting with fastboot");
+
+    const fastboot = await webusb.connectFastboot();
+    await fastboot.send("flashing unlock");
+    await fastboot.receive();
 }
 
 if ("usb" in navigator) {
     console.log("WebUSB available");
 
-    const connect = document.getElementById("connect");
-    connect.onclick = doConnect;
+    const adbRebootBootloaderButton = document.getElementById("adb-reboot-bootloader");
+    adbRebootBootloaderButton.disabled = false;
+    adbRebootBootloaderButton.onclick = adbRebootBootloader;
+
+    const unlockBootloaderButton = document.getElementById("unlock-bootloader");
+    unlockBootloaderButton.disabled = false;
+    unlockBootloaderButton.onclick = unlockBootloader;
 } else {
     console.log("WebUSB unavailable");
 }
diff --git a/static/web-install.html b/static/web-install.html
index ee240911..1a761448 100644
--- a/static/web-install.html
+++ b/static/web-install.html
@@ -54,7 +54,41 @@
             been implemented and it doesn't do anything useful yet. You should ignore this page
             and use the <a href="/install">official install guide</a>.</p>
 
-            <button id="connect">Connect</button>
+            <section id="enabling-oem-unlocking">
+                <h2><a href="#enabling-oem-unlocking">Enabling OEM unlocking</a></h2>
+
+                <p>OEM unlocking needs to be enabled from within the operating system.</p>
+
+                <p>Enable the developer options menu by going to Settings ➔ About phone and
+                pressing on the build number menu entry until developer mode is enabled.</p>
+
+                <p>Next, go to Settings ➔ System ➔ Advanced ➔ Developer options and toggle on the
+                'Enable OEM unlocking' setting. This requires internet access on devices with Google
+                Play services as part of Factory Reset Protection (FRP) for anti-theft protection.</p>
+            </section>
+
+            <section id="connecting-phone">
+                <h2><a href="#connecting-phone">Connecting the phone</a></h2>
+
+                <p>Connect the phone to the computer. On Linux, you'll need to do this again if
+                you didn't have the udev rules set up when you connected it.</p>
+            </section>
+
+            <section id="unlocking-the-bootloader">
+                <h2><a href="#unlocking-the-bootloader">Unlocking the bootloader</a></h2>
+
+                <p>First, boot into the bootloader interface. You can do this by turning off the
+                device and then turning it on by holding both the Volume Down and Power buttons.
+                Alternatively, use ADB to reboot to the bootloader with the button below:</p>
+
+                <button id="adb-reboot-bootloader" disabled="disabled">Reboot to bootloader with ADB</button>
+
+                <p>Unlock the bootloader to allow flashing the OS and firmware:</p>
+
+                <button id="unlock-bootloader" disabled="disabled">Unlock bootloader</button>
+
+                <p>The command needs to be confirmed on the device and will wipe all data.</p>
+            </section>
         </main>
         <footer>
             <a href="/"><img src="/logo.png" width="512" height="512" alt=""/>GrapheneOS</a>