change-hostname-dialog.html

<template id="change-hostname-template">
  <style>
    @import "css/style.css";

    #initializing,
    #prompt,
    #success {
      display: none;
    }

    :host([state="initializing"]) #initializing {
      display: block;
    }

    :host([state="prompt"]) #prompt {
      display: block;
    }

    :host([state="success"]) #success {
      display: block;
    }

    #hostname-input {
      margin-left: 0.5rem;
    }

    .input-container {
      margin: 1.5rem 0;
    }

    #input-error {
      margin-top: 1rem;
    }
  </style>

  <div id="initializing">
    <h3>Retrieving Current Hostname</h3>
    <div>
      <progress-spinner></progress-spinner>
    </div>
  </div>

  <div id="prompt">
    <h3>Change Hostname</h3>
    <p>Enter a new hostname for TinyPilot.</p>
    <div class="input-container">
      <label for="hostname-input">Hostname:</label>
      <input
        type="text"
        id="hostname-input"
        size="30"
        class="monospace"
        autocomplete="off"
        autocorrect="off"
        autocapitalize="off"
        spellcheck="false"
      />
      <inline-message variant="error" id="input-error">
        <strong>Invalid hostname:</strong> it can only contain the letters a-z,
        digits and dashes (it cannot start with a dash, though). It must contain
        1-63 characters and cannot be "localhost". You don't need to include
        ".local"
      </inline-message>
    </div>
    <button id="change-and-restart" class="btn-success" type="button">
      Change and Restart
    </button>
    <button id="cancel-hostname-change" type="button">Close</button>
  </div>

  <div id="success">
    <h3>Hostname Changed</h3>
    <div>
      <p>
        TinyPilot is restarting. After it’s restarted, open TinyPilot at its new
        URL:
      </p>
      <p>
        <a href="" id="future-location" target="_blank"
          ><!-- Filled programmatically --></a
        >
      </p>
      <p>
        <inline-message show="" variant="info">
          <strong>Note:</strong> This process usually takes about 30 seconds. If
          the link does not work yet, wait a few seconds and try again.
        </inline-message>
      </p>
      <!-- We don’t show a “Close” button here, because the user is supposed to
           navigate to the new location, as TinyPilot isn’t reachable anymore
           under the now outdated hostname of the current browser tab. -->
    </div>
  </div>
</template>

<script type="module">
  import {
    DialogClosedEvent,
    DialogFailedEvent,
    DialogCloseStateChangedEvent,
    DialogVariantChangedEvent,
  } from "/js/events.js";
  import {
    changeHostname,
    determineHostname,
    shutdown,
  } from "/js/controllers.js";
  import { determineFutureOrigin } from "/js/hostname.js";

  (function () {
    const template = document.querySelector("#change-hostname-template");

    customElements.define(
      "change-hostname-dialog",
      class extends HTMLElement {
        _states = {
          INITIALIZING: "initializing",
          PROMPT: "prompt",
          SUCCESS: "success",
        };
        _statesWithoutDialogClose = new Set([
          this._states.SUCCESS,
          this._states.INITIALIZING,
        ]);

        connectedCallback() {
          this.attachShadow({ mode: "open" }).appendChild(
            template.content.cloneNode(true),
          );
          this._elements = {
            inputError: this.shadowRoot.getElementById("input-error"),
            hostnameInput: this.shadowRoot.getElementById("hostname-input"),
            changeAndRestart:
              this.shadowRoot.getElementById("change-and-restart"),
            cancelHostnameChange: this.shadowRoot.getElementById(
              "cancel-hostname-change",
            ),
            futureLocation: this.shadowRoot.getElementById("future-location"),
          };

          this.addEventListener("overlay-shown", () => this._initialize());
          this._elements.hostnameInput.addEventListener("input", () => {
            this._onInputChanged();
          });
          this._elements.changeAndRestart.addEventListener("click", () => {
            this._doChangeHostname();
          });
          this._elements.hostnameInput.addEventListener("keydown", (evt) => {
            if (evt.code === "Enter") {
              this._elements.changeAndRestart.click();
            }
          });
          this._elements.cancelHostnameChange.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),
            ),
          );
        }

        get initialHostname() {
          return this.getAttribute("initial-hostname");
        }

        set initialHostname(initialHostname) {
          this.setAttribute("initial-hostname", initialHostname);
        }

        _initialize() {
          this._elements.changeAndRestart.disabled = false;
          this.dispatchEvent(new DialogVariantChangedEvent("default"));
          this._elements.inputError.hide();
          this._state = this._states.INITIALIZING;
          determineHostname()
            .then((hostname) => {
              this.initialHostname = hostname;
              this._elements.hostnameInput.value = hostname;
              this._onInputChanged(hostname);
              this._state = this._states.PROMPT;
              this._elements.hostnameInput.focus();
            })
            .catch((error) => {
              this.dispatchEvent(
                new DialogFailedEvent({
                  title: "Failed to Determine Hostname",
                  details: error,
                }),
              );
            });
        }

        _onInputChanged() {
          const isEqualToInitialValue =
            this._elements.hostnameInput.value === this.initialHostname;
          const isEmpty = this._elements.hostnameInput.value === "";
          this._elements.changeAndRestart.disabled =
            isEmpty || isEqualToInitialValue;
        }

        _doChangeHostname() {
          this._elements.changeAndRestart.disabled = true;
          changeHostname(this._elements.hostnameInput.value)
            .then((newHostname) => {
              return shutdown(/*restart=*/ true).then(() => newHostname);
            })
            .then((newHostname) => {
              return determineFutureOrigin(
                new URL(window.location),
                this.initialHostname,
                newHostname,
              );
            })
            .then((redirectURL) => {
              this._elements.futureLocation.innerText = redirectURL;
              this._elements.futureLocation.href = redirectURL;
              this.dispatchEvent(new DialogVariantChangedEvent("success"));
              this._state = this._states.SUCCESS;
              this._elements.changeAndRestart.disabled = false;
            })
            .catch((error) => {
              this._elements.changeAndRestart.disabled = false;
              if (error.code === "INVALID_HOSTNAME") {
                // Display validation errors inline in order to make it more
                // convenient for the user to correct them.
                this._elements.inputError.show();
                this._state = this._states.PROMPT;
                return;
              }
              this.dispatchEvent(
                new DialogFailedEvent({
                  title: "Failed to Change Hostname",
                  details: error,
                }),
              );
            });
        }
      },
    );
  })();
</script>