setup.htm

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Setup WiFi</title>
</head>

<body style="width:300px">
  <h1>Setup WiFi</h1>
  <div style="display:grid;grid-template-columns: 10ch auto;grid-gap:1ch;">
    <label>Devicename:</label><span id="d">.</span>
    <label>Network:</label><span><select id="n" style="width:12em">
        <option selected disabled>scanning...</option>
      </select></span>
    <label>Passphrase:</label><input id="pass" type="password" style="width:12em"></input>
    <label>format:</label><span><input id="fmt" type="checkbox"></input></span>
  </div>
  <div style="text-align: right;"><button id="b">Connect</button></div>

  <script>
    var d = document;
    var s = 0;  // state = 0: start, 1: get sysinfo, 2: sysinfo-done,  3: scan, 4: scan-done, 5: connect issued
    var timer;
    var oSel = d.getElementById('n');
    var oBtn = d.getElementById('b');
    var dn;

    async function check() {
      let r, t;
      if (s == 0) {
        // start sysinfo
        s = 1;
        r = await fetch('/api/sysinfo');
        t = await r.text();
        if (t.length > 0) {
          dn = JSON.parse(t).devicename;
          d.getElementById('d').textContent = dn;
          s = 2;
        } // if

      } else if (s == 2) {
        // start scan 
        s = 3;
        r = await fetch('/api/scan');
        t = await r.text();
        if (t.length == 0) {
          s = 2;
        } else {
          scanned(JSON.parse(t));
          s = 4;
        }

      } else if (s == 4) {
        window.clearInterval(timer);
        timer = 0;
      } // if
    } // check()

    function scanned(netList) {
      oSel.innerHTML = '';

      var o = d.createElement('option');
      o.value = 0;
      o.text = 'select...';
      o.disabled = true;
      oSel.options.add(o);

      netList.forEach(function(n) {
        var o = d.createElement('option');
        o.value = o.text = n.id;
        oSel.options.add(o);
      });
    } // scanned()

    // connect using network name and password
    oBtn.addEventListener('click', async () => {
      if (s == 4) {
        let url = `/api/connect?n=${oSel.value}&p=${d.getElementById('pass').value}`;
        if (d.getElementById('fmt').checked) {
          url += 'f=1';
        }
        try { await fetch(url); } catch (e) { }
        s = 5;
        oBtn.textContent = ">>>";

      } else if (s == 5) {
        location.href = `//${dn}/$update.htm`;
      }
    });
    timer = window.setInterval(check, 300);
  </script>
</body>