From efe7ac65cdfd4a5a7b073f0360c4492c730c1649 Mon Sep 17 00:00:00 2001
From: jotaen4tinypilot <83721279+jotaen4tinypilot@users.noreply.github.com>
Date: Tue, 16 Jul 2024 15:22:43 +0200
Subject: [PATCH] WiFi dialog: add dialog to the UI (#1813)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Related https://github.com/tiny-pilot/tinypilot/issues/131, part (d).
Stacked on https://github.com/tiny-pilot/tinypilot/pull/1812.

This PR adds a new dialog “Wi-Fi” to the “System→Network” menu, which
makes the Wi-Fi feature available to end-users.

Summary of the discussion below:

- We made the wording so that it’s clear that we only store the WiFi
credentials, but we don’t verify whether they are actually accepted by
the WiFi router, or whether the WiFi is reachable at all. For further
clarification, we also added a success state to the dialog.
- In a subsequent PR, we’ll turn the “country code” free text field into
a dropdown, to make it easier for users to enter their correct and
applicable value.

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1813"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <jan@jotaen.net>
---
 app/static/css/style.css                      |   3 +-
 app/static/js/app.js                          |   7 +
 app/static/js/controllers.js                  |  69 ++++
 app/templates/custom-elements/menu-bar.html   |   5 +
 .../custom-elements/wifi-dialog.html          | 349 ++++++++++++++++++
 app/templates/index.html                      |   3 +
 6 files changed, 435 insertions(+), 1 deletion(-)
 create mode 100644 app/templates/custom-elements/wifi-dialog.html

diff --git a/app/static/css/style.css b/app/static/css/style.css
index d7b2af8c3..edf308ba9 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -112,7 +112,8 @@ input[type="password"] {
   box-shadow: inset 0 0 0.2rem 0 rgba(0, 0, 0, 0.15);
 }
 
-input[type="text"].monospace {
+input[type="text"].monospace,
+input[type="password"].monospace {
   font-family: "Overpass Mono", monospace;
   /* Since the monospace font has different characteristics than the regular
      font, we need to set the height here explicitly. In the end, the input
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 86f944322..84667befc 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -320,6 +320,13 @@ menuBar.addEventListener("change-hostname-dialog-requested", () => {
   document.getElementById("change-hostname-overlay").show();
   document.getElementById("change-hostname-dialog").initialize();
 });
+menuBar.addEventListener("wifi-dialog-requested", () => {
+  // Note: we have to call `initialize()` after `show()`, to ensure that the
+  // dialog is able to focus the main input element.
+  // See https://github.com/tiny-pilot/tinypilot/issues/1770
+  document.getElementById("wifi-overlay").show();
+  document.getElementById("wifi-dialog").initialize();
+});
 menuBar.addEventListener("fullscreen-requested", () => {
   document.getElementById("remote-screen").fullscreen = true;
 });
diff --git a/app/static/js/controllers.js b/app/static/js/controllers.js
index f49a33b7f..a67c552ad 100644
--- a/app/static/js/controllers.js
+++ b/app/static/js/controllers.js
@@ -194,6 +194,75 @@ export async function changeHostname(newHostname) {
     .then(() => newHostname);
 }
 
+export async function getNetworkStatus() {
+  return fetch("/api/network/status", {
+    method: "GET",
+    mode: "same-origin",
+    cache: "no-cache",
+    redirect: "error",
+  })
+    .then(processJsonResponse)
+    .then((response) => {
+      ["ethernet", "wifi"].forEach((field) => {
+        // eslint-disable-next-line no-prototype-builtins
+        if (!response.hasOwnProperty(field)) {
+          throw new ControllerError(`Missing expected ${field} field`);
+        }
+      });
+      return response;
+    });
+}
+
+export async function getWifiSettings() {
+  return fetch("/api/network/settings/wifi", {
+    method: "GET",
+    mode: "same-origin",
+    cache: "no-cache",
+    redirect: "error",
+  })
+    .then(processJsonResponse)
+    .then((response) => {
+      ["countryCode", "ssid"].forEach((field) => {
+        // eslint-disable-next-line no-prototype-builtins
+        if (!response.hasOwnProperty(field)) {
+          throw new ControllerError(`Missing expected ${field} field`);
+        }
+      });
+      return response;
+    });
+}
+
+export async function enableWifi(countryCode, ssid, psk) {
+  return fetch("/api/network/settings/wifi", {
+    method: "PUT",
+    mode: "same-origin",
+    cache: "no-cache",
+    redirect: "error",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRFToken": getCsrfToken(),
+    },
+    body: JSON.stringify({ countryCode, ssid, psk }),
+  })
+    .then(processJsonResponse)
+    .then(() => true);
+}
+
+export async function disableWifi() {
+  return fetch("/api/network/settings/wifi", {
+    method: "DELETE",
+    mode: "same-origin",
+    cache: "no-cache",
+    redirect: "error",
+    headers: {
+      "Content-Type": "application/json",
+      "X-CSRFToken": getCsrfToken(),
+    },
+  })
+    .then(processJsonResponse)
+    .then(() => true);
+}
+
 export async function checkStatus(baseURL = "") {
   return fetch(baseURL + "/api/status", {
     method: "GET",
diff --git a/app/templates/custom-elements/menu-bar.html b/app/templates/custom-elements/menu-bar.html
index a72aefa2d..85d350089 100644
--- a/app/templates/custom-elements/menu-bar.html
+++ b/app/templates/custom-elements/menu-bar.html
@@ -229,6 +229,11 @@
                 >Hostname</a
               >
             </li>
+            <li class="item" role="presentation">
+              <a data-onclick-event="wifi-dialog-requested" role="menuitem"
+                >Wi-Fi</a
+              >
+            </li>
             <li class="item pro-badge" role="presentation">
               <a data-onclick-event="static-ip-dialog-requested" role="menuitem"
                 >Static IP</a
diff --git a/app/templates/custom-elements/wifi-dialog.html b/app/templates/custom-elements/wifi-dialog.html
new file mode 100644
index 000000000..bbedfa1a0
--- /dev/null
+++ b/app/templates/custom-elements/wifi-dialog.html
@@ -0,0 +1,349 @@
+<!-- Remark about the terminology: in the UI, we decided to say `Wi-Fi` instead
+     of `WiFi`, as this is the official spelling. We are not super strict about
+     this for code symbols, however, mainly for simplicity. -->
+<template id="wifi-template">
+  <style>
+    @import "css/style.css";
+    @import "css/button.css";
+
+    #initializing,
+    #prompt,
+    #changing,
+    #success-enabled,
+    #success-disabled {
+      display: none;
+    }
+
+    :host([state="initializing"]) #initializing,
+    :host([state="prompt"]) #prompt,
+    :host([state="changing"]) #changing,
+    :host([state="success-enabled"]) #success-enabled,
+    :host([state="success-disabled"]) #success-disabled {
+      display: block;
+    }
+
+    #input-error {
+      margin-top: 1rem;
+    }
+
+    label {
+      width: 8.5em;
+      text-align: right;
+    }
+
+    .input-container {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      gap: 1em;
+      margin-top: 1.5em;
+      padding-left: 6em;
+    }
+
+    .input-row {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 0.5em;
+    }
+
+    .button-container {
+      margin-top: 1em;
+    }
+  </style>
+
+  <div id="initializing">
+    <h3>Retrieving Current Wi-Fi Settings</h3>
+    <div>
+      <progress-spinner></progress-spinner>
+    </div>
+  </div>
+
+  <div id="prompt">
+    <h3>Wi-Fi Credentials</h3>
+    <p>
+      Connect your TinyPilot device to a wireless network by entering your Wi-Fi
+      credentials.
+    </p>
+    <inline-message variant="warning" id="no-ethernet-warning">
+      <strong>Warning:</strong>: You are currently connected to your TinyPilot
+      device using Wi-Fi. If you change your settings, you might get
+      disconnected. Consider connecting an Ethernet cable before proceeding.
+    </inline-message>
+    <div class="input-container">
+      <div class="input-row">
+        <label for="ssid-input">Network Name:</label>
+        <input
+          type="text"
+          id="ssid-input"
+          size="30"
+          class="monospace"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          placeholder="Wi-Fi SSID"
+        />
+      </div>
+      <div class="input-row">
+        <label for="psk-input">Password:</label>
+        <input
+          type="password"
+          id="psk-input"
+          size="30"
+          class="monospace"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          placeholder="(hidden)"
+        />
+      </div>
+      <div class="input-row">
+        <label for="country-code-input">Country Code:</label>
+        <input
+          type="text"
+          id="country-code-input"
+          size="4"
+          maxlength="2"
+          class="monospace"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          placeholder="US"
+        />
+      </div>
+    </div>
+    <inline-message variant="error" id="input-error">
+      <strong>Invalid Wi-Fi Settings:</strong>
+      <span id="input-error-reason"><!-- Filled programmatically --></span>
+    </inline-message>
+    <div class="button-container">
+      <button id="disable-button" class="btn-danger" type="button">
+        Remove
+      </button>
+      <button id="enable-button" class="btn-success" type="button">Save</button>
+      <button class="close-button" type="button">Close</button>
+    </div>
+  </div>
+
+  <div id="changing">
+    <h3>Applying Changes</h3>
+    <progress-spinner></progress-spinner>
+  </div>
+
+  <div id="success-enabled">
+    <h3>Wi-Fi Credentials Saved</h3>
+    <p>
+      Your Wi-Fi credentials have been saved. When your TinyPilot device is in
+      range of the wireless network, it will automatically try to connect to it.
+    </p>
+    <button class="close-button" type="button">Close</button>
+  </div>
+
+  <div id="success-disabled">
+    <h3>Wi-Fi Credentials Removed</h3>
+    <p>
+      Your Wi-Fi credentials have been removed. Your TinyPilot device will no
+      longer try to connect to the wireless network.
+    </p>
+    <button class="close-button" type="button">Close</button>
+  </div>
+</template>
+
+<script type="module">
+  import {
+    DialogClosedEvent,
+    DialogFailedEvent,
+    DialogCloseStateChangedEvent,
+  } from "/js/events.js";
+  import {
+    getNetworkStatus,
+    getWifiSettings,
+    enableWifi,
+    disableWifi,
+  } from "/js/controllers.js";
+
+  (function () {
+    const template = document.querySelector("#wifi-template");
+
+    customElements.define(
+      "wifi-dialog",
+      class extends HTMLElement {
+        _states = {
+          INITIALIZING: "initializing",
+          PROMPT: "prompt",
+          CHANGING: "changing",
+          SUCCESS_ENABLED: "success-enabled",
+          SUCCESS_DISABLED: "success-disabled",
+        };
+        _statesWithoutDialogClose = new Set([
+          this._states.INITIALIZING,
+          this._states.CHANGING,
+        ]);
+
+        connectedCallback() {
+          this.attachShadow({ mode: "open" }).appendChild(
+            template.content.cloneNode(true)
+          );
+          this._elements = {
+            noEthernetWarning: this.shadowRoot.querySelector(
+              "#no-ethernet-warning"
+            ),
+            inputError: this.shadowRoot.querySelector("#input-error"),
+            inputErrorReason: this.shadowRoot.querySelector(
+              "#input-error-reason"
+            ),
+            ssidInput: this.shadowRoot.querySelector("#ssid-input"),
+            pskInput: this.shadowRoot.querySelector("#psk-input"),
+            countryCodeInput: this.shadowRoot.querySelector(
+              "#country-code-input"
+            ),
+            enableButton: this.shadowRoot.querySelector("#enable-button"),
+            disableButton: this.shadowRoot.querySelector("#disable-button"),
+          };
+
+          [
+            this._elements.ssidInput,
+            this._elements.pskInput,
+            this._elements.countryCodeInput,
+          ].forEach((el) =>
+            el.addEventListener("input", () => {
+              this._refreshButtons();
+            })
+          );
+          this._elements.enableButton.addEventListener("click", () => {
+            this._enable();
+          });
+          this._elements.disableButton.addEventListener("click", () => {
+            this._disable();
+          });
+          this.shadowRoot.querySelectorAll(".close-button").forEach((el) =>
+            el.addEventListener("click", () => {
+              this.dispatchEvent(new DialogClosedEvent());
+            })
+          );
+        }
+
+        get _state() {
+          return this.getAttribute("state");
+        }
+
+        set _state(newValue) {
+          this.setAttribute("state", newValue);
+          this.dispatchEvent(
+            new DialogCloseStateChangedEvent(
+              !this._statesWithoutDialogClose.has(newValue)
+            )
+          );
+        }
+
+        async initialize() {
+          this._state = this._states.INITIALIZING;
+          let wifiSettings, networkStatus;
+          try {
+            [wifiSettings, networkStatus] = await Promise.all([
+              getWifiSettings(),
+              getNetworkStatus(),
+            ]);
+          } catch (error) {
+            this.dispatchEvent(
+              new DialogFailedEvent({
+                title: "Failed to Retrieve Wi-Fi Settings",
+                details: error,
+              })
+            );
+            return;
+          }
+
+          this._elements.ssidInput.value = wifiSettings.ssid;
+          this._elements.countryCodeInput.value = wifiSettings.countryCode;
+          this._elements.pskInput.value = "";
+          this._initialWiFiSettings = { psk: "", ...wifiSettings };
+
+          this._elements.noEthernetWarning.hide();
+          this._elements.inputError.hide();
+          if (!networkStatus.ethernet) {
+            this._elements.noEthernetWarning.show();
+          }
+
+          this._refreshButtons();
+          this._state = this._states.PROMPT;
+        }
+
+        _refreshButtons() {
+          const hasInputChanged = [
+            [this._elements.ssidInput, this._initialWiFiSettings.ssid],
+            [this._elements.pskInput, this._initialWiFiSettings.psk],
+            [
+              this._elements.countryCodeInput,
+              this._initialWiFiSettings.countryCode,
+            ],
+          ].some(([el, initialValue]) => el.value !== initialValue);
+
+          const isMandatoryInputMissing = [
+            this._elements.ssidInput,
+            this._elements.countryCodeInput,
+          ].some((el) => el.value === "");
+
+          // The “Enable” button is unavailable if the user hasn’t made any
+          // changes or if mandatory fields are still missing.
+          this._elements.enableButton.disabled =
+            !hasInputChanged || isMandatoryInputMissing;
+
+          // The “Disable” button is only available if there currently is a
+          // WiFi configuration (i.e., if there is an initial SSID value).
+          this._elements.disableButton.disabled =
+            !this._initialWiFiSettings.ssid;
+        }
+
+        async _enable() {
+          this._state = this._states.CHANGING;
+          try {
+            await enableWifi(
+              this._elements.countryCodeInput.value,
+              this._elements.ssidInput.value,
+              // The backend expects a value of `null` to indicate an open
+              // WiFi, not an empty string.
+              this._elements.pskInput.value || null
+            );
+          } catch (error) {
+            if (error.code === "INVALID_WIFI_SETTINGS") {
+              // Display validation errors inline in order to make it more
+              // convenient for the user to correct them.
+              this._elements.inputErrorReason.textContent = error.message;
+              this._elements.inputError.show();
+              this._state = this._states.PROMPT;
+              return;
+            }
+            this.dispatchEvent(
+              new DialogFailedEvent({
+                title: "Failed to Enable Wi-Fi",
+                details: error,
+              })
+            );
+            return;
+          }
+          this._state = this._states.SUCCESS_ENABLED;
+        }
+
+        async _disable() {
+          this._state = this._states.CHANGING;
+          try {
+            await disableWifi();
+          } catch (error) {
+            this.dispatchEvent(
+              new DialogFailedEvent({
+                title: "Failed to Disable Wi-Fi",
+                details: error,
+              })
+            );
+            return;
+          }
+          this._state = this._states.SUCCESS_DISABLED;
+        }
+      }
+    );
+  })();
+</script>
diff --git a/app/templates/index.html b/app/templates/index.html
index 37880fa1e..fb655b7cf 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -76,6 +76,9 @@
       <overlay-panel id="paste-overlay">
         <paste-dialog id="paste-dialog"></paste-dialog>
       </overlay-panel>
+      <overlay-panel id="wifi-overlay">
+        <wifi-dialog id="wifi-dialog"></wifi-dialog>
+      </overlay-panel>
     </div>
     <script src="/third-party/socket.io/4.7.1/socket.io.min.js"></script>
     <script type="module" src="/js/app.js"></script>