Skip to content
Snippets Groups Projects
index.html 12.1 KiB
Newer Older
David Mondou's avatar
David Mondou committed
<!DOCTYPE html>
<html>
<head>
    <title>IoT Gateway Setup</title>
    <link rel="stylesheet" type="text/css" href="main.css" media="screen"/>
    <script type="text/javascript">
        var MANUAL_SETUP_TEXT = "Not listed? Switch to manual setup";
        var SKIP_SETUP_TEXT = "Not applicable. Skip WiFi setup.";
        var SCANNING_TEXT = "Scanning...";
        var LIST_SEPARATOR = "-------------------------";
        var COOKIE = {};

        function selectProtocolForSsid(ssid) {
            var networks = JSON.parse(document.getElementById("_networks").value);
            var protocol = networks[ssid];
            var protocolSelector = document.getElementById("protocol");
            for (var i = 0; i < protocolSelector.length; i++) {
                if (protocolSelector[i].value === protocol) {
                    protocolSelector.selectedIndex = i;
                    displayWiFiInputs(protocol);
                    break;
                }
            }
        }

        function switchToManualSetup() {
            document.getElementById("newwifis").style.display = "none";
            resetSsidRelatedFields();
            document.getElementById("newwifi").style.display = "inline";
            document.getElementById("protocollabel").style.display = "inline";
            document.getElementById("protocol").style.display = "inline";
        }

        function switchToAutomaticSetup() {
            document.getElementById("newwifi").style.display = "none";
            resetSsidRelatedFields();
            document.getElementById("newwifis").style.display = "inline";
            document.getElementById("protocollabel").style.display = "none";
            document.getElementById("protocol").style.display = "none";
            document.getElementById("backToAutomatic").style.visibility = "hidden";
        }

        function resetSsidRelatedFields() {
            if (COOKIE.newwifi) {
                document.getElementById("newwifi").value = COOKIE.newwifi;
                if (COOKIE.newwifi !== COOKIE.ssidsValue) {
                    document.getElementById("newwifis").value = COOKIE.ssidsValue;
                    document.getElementById("protocol").value = COOKIE.protocol;
                    displayWiFiInputs(COOKIE.protocol);
                } else {
                    document.getElementById("newwifis").value = COOKIE.newwifi;
                    selectProtocolForSsid(COOKIE.newwifi);
                }
            } else {
                if (COOKIE.ssidsValue) {
                    document.getElementById("newwifis").value = COOKIE.ssidsValue;
                } else {
                    document.getElementById("newwifis").selectedIndex = 0;
                }
                document.getElementById("newwifi").value = document.getElementById("newwifis").value;
                selectProtocolForSsid(document.getElementById("newwifi").value)
            }
        }

        function setSsidsRelatedFields() {
            var ssidSelector = document.getElementById("newwifis");
            var selectedValue = ssidSelector[ssidSelector.selectedIndex].value;
            // These text strings come from default values set in functions below. Search to find out where.
            if (selectedValue !== SCANNING_TEXT && selectedValue !== MANUAL_SETUP_TEXT &&
                    selectedValue != SKIP_SETUP_TEXT) {
                document.getElementById("newwifi").value = selectedValue;
                selectProtocolForSsid(selectedValue);
            } else if (selectedValue === MANUAL_SETUP_TEXT) {
                document.getElementById("backToAutomatic").style.visibility = "visible";
                switchToManualSetup();
            } else { // skip wifi setup
                document.getElementById("newwifi").value = "";
                document.getElementById("netpasslabel").style.display="none";
                document.getElementById("netpass").style.display="none";
                document.getElementById("netuserlabel").style.display="none";
                document.getElementById("netuser").style.display="none";
                document.getElementById("protocol").style.display="none";
            }
        }

        function displayWiFiInputs(protocol) {
            if (protocol === 'WEP' || protocol === 'WPA-PSK') {
                document.getElementById("netpasslabel").style.display="inline";
                document.getElementById("netpass").style.display="inline";

                document.getElementById("netuserlabel").style.display="none";
                document.getElementById("netuser").style.display="none";
            } else if (protocol === 'WPA-EAP') {
                document.getElementById("netpasslabel").style.display="inline";
                document.getElementById("netpass").style.display="inline";

                document.getElementById("netuserlabel").style.display="inline";
                document.getElementById("netuser").style.display="inline";
            } else {
                document.getElementById("netpasslabel").style.display="none";
                document.getElementById("netpass").style.display="none";

                document.getElementById("netuserlabel").style.display="none";
                document.getElementById("netuser").style.display="none";
            }
        }

        function saveFields() {
            document.cookie =
                    '{' +
                    '"name": "' + document.getElementById("name").value + '",' +
                    '"newwifi": "' + document.getElementById("newwifi").value + '",' +
                    '"protocol": "' + document.getElementById("protocol").value + '",' +
                    '"netuser": "' + document.getElementById("netuser").value + '",' +
                    '"ssidsValue": "' + document.getElementById("newwifis").value + '"' +
                    '}';
        }

        function initWiFiNetworkFields() {
            var networks = JSON.parse(document.getElementById("_networks").value);
            console.log("WiFi networks:");
            console.log(networks);
            var ssidSelector = document.getElementById("newwifis");
            ssidSelector.remove(0);
            for (var ssid in networks) {
                if (networks.hasOwnProperty(ssid)) {
                    var opt = document.createElement("option");
                    opt.value = ssid;
                    opt.textContent = ssid;
                    ssidSelector.add(opt);
                }
            }

            if (ssidSelector.length === 0) {
                console.log("No WiFi networks found. Switching to manual setup.");
                switchToManualSetup();
            } else {
                // add the switch to manual setup option
                var opt = document.createElement("option");
                opt.value = LIST_SEPARATOR;
                opt.textContent = opt.value;
                opt.disabled = "disabled";
                ssidSelector.add(opt);

                opt = document.createElement("option");
                opt.value = MANUAL_SETUP_TEXT;
                opt.textContent = opt.value;
                ssidSelector.add(opt);

                opt = document.createElement("option");
                opt.value = SKIP_SETUP_TEXT;
                opt.textContent = opt.value;
                ssidSelector.add(opt);

                resetSsidRelatedFields();
            }
        }

        function getWiFiNetworks() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            } else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                    document.getElementById("_networks").value = xmlhttp.responseText;
                    initWiFiNetworkFields();
                } else if (xmlhttp.readyState === 4 && xmlhttp.status === 404) {
                    if (getWiFiNetworks.called) {
                        getWiFiNetworks.called++;
                    } else {
                        getWiFiNetworks.called = 1;
                    }
                    if (getWiFiNetworks.called < 5) {
                        console.log("Retrying getWiFiNetworks: " + getWiFiNetworks.called);
                        setTimeout(getWiFiNetworks, 2000);
                    } else { // switch to manual entry
                        console.log("Giving up on getWiFiNetworks. Switching to manual WiFi Setup.");
                        switchToManualSetup();
                    }
                }
            };
            xmlhttp.open("GET", "wifiNetworks", true);
            xmlhttp.send();
        }

        window.onload = function () {
            if (document.cookie)
                COOKIE = JSON.parse(document.cookie);

            getWiFiNetworks();

            // restore subset of saved fields
            // wifi related fields will be restored in getWiFiNetworks()
            if (COOKIE.name)
                document.getElementById("name").value = COOKIE.name;
            if (COOKIE.netuser)
                document.getElementById("netuser").value = COOKIE.netuser;
        };
    </script>
    <noscript>
        Please enable Javascript. It is needed for this page to work correctly. Thank you.
    </noscript>
</head>
<body>
<a href="/" style="text-decoration: none"><h1>IoT Gateway Setup</h1></a>
<!-- errors will go here -->
<form id="setup_form" name="setup_form" method="POST" action="submitForm" onsubmit="saveFields()">
    <div id="wifi_section" class="section">
David Mondou's avatar
David Mondou committed
        <div class="header">Connect to a WiFi Network</div>
        <table class="content">
            <tr>
                <td class="left" style="padding-top: 3px" >
                    Connect to a wireless network by entering the required information.
                </td>
                <td class="middle">
                    <table style="padding-top: 0px">
                        <tr><td id="ssidlabel" style="display: inline">
                            Network Name:</td></tr>
                        <tr><td id="protocollabel" style="display: none">
                            Network Protocol:</td></tr>
                        <tr><td id="netuserlabel" style="display: none">
                            Username:</td></tr>
                        <tr><td id="netpasslabel" style="display: none">
                            Password:</td></tr>
                    </table>
                </td>
                <td class="right">
                    <input type="text" id="newwifi" name="newwifi" class="textbox" style="display: none">
                    <select id="newwifis" name="newwifis" class="selector" onchange="setSsidsRelatedFields()"
                            style="display: inline-block">
                        <option selected="selected">Scanning...</option>
                    </select>
                    <select id="protocol" name="protocol" class="selector" style="display: none"
                            onchange="displayWiFiInputs(document.getElementById('protocol').value)">
                        <option value="OPEN">Open</option>
                        <option value="WEP">WEP</option>
                        <option value="WPA-PSK">WPA-Personal or WPA2-Personal</option>
                        <option value="WPA-EAP">WPA-Enterprise or WPA2-Enterprise</option>
                    </select>
                    <input type="password" id="netpass" name="netpass" class="textbox"
                           style="display: none">
                    <input type="text" id="netuser" name="netuser" class="textbox"
                           style="display: none">
                    <input type="hidden" id="_networks" name="_networks" class="textbox" value="{}">
                </td>
            </tr>
        </table>
    </div>
    <div class="submit_section">
        <input class="submit_button" type="submit" value="Submit">
    </div>
     <div class="warning">
        <body>
            This application does not require or manage Passwords and you are responsible for securing your Gateway. 
            <br>
            This application is provided to simplify setting up a WiFi connection in order to speed up development.
        </body>
    </div>
David Mondou's avatar
David Mondou committed
</form>
</body>
</html>