index.html

<style>
    html, body {margin: 0; height: 100%; overflow: hidden; overscroll-behavior: contain;}
    
    #mainDiv {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        background: linear-gradient(360deg, #068, #FFF);
    }

    #backgroundCnvs {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        transform: scale(1.2);
        z-index: 1;
    }

    #dataDiv {
        position: relative;
        border: 1px solid #dfdfdf;
        background: linear-gradient(360deg, #DDD, #FFF);
        width: 330px;
        height: 465px;
        margin: 0 auto;
        z-index: 2;
    }
    
    .titleText {
        display: inline-block;
        margin: 0 auto;
        padding-top: 20px;
        padding-left: 40px;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 11px;
        font-weight: bold;
        color: #555;
    }

    .titleText2 {
        padding-left:0;
        font-size: 18px;
        padding-top: 150px;
    }

    .titleText3 {
        margin-top: 60px;
        font-size: 14px;
        padding-left: 0px;
        padding-bottom: 24px;
    }

    #refreshBtn {
        font-size: 10px;
        font-weight: 700;
        margin-left: 55px;
        padding: 2px;
        font-family: Verdana,Geneva,sans-serif;
        cursor: pointer;
    }

    #refreshBtn:active {
        background-color: #999;
        color: white;
        border-radius: 4px;
    }

    #connectionList {
        height: 300px;
        max-height: 300px;
        background: white;
        border: 1px solid #999;
        width: 250px;
        margin: 0 auto;
        overflow-y: auto;
        cursor: pointer;
    }

    .connectionItem {
        border-bottom: 1px solid #ccc;
        padding: 2px;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
        color: #666;
        user-select: none;
    }

    .selectedConnection {
        background-color: #abe5f9;
    }

    #pwDiv {
        background: white;
        max-height: 270px;
        width: 250px;
        margin: 0 auto;
        border: 1px solid #999;
    }

    .loadingRing {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    .loadingRing:after {
        content: " ";
        display: block;
        width: 64px;
        position: absolute;
        height: 64px;
        top: 40%;
        left: 36%;
        border-radius: 50%;
        border: 6px solid #cef;
        border-color: #cef transparent #cef transparent;
        animation: loading-ring 1.2s linear infinite;
    }

    @keyframes loading-ring {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    #loadingDiv {
        background-color: #7777776b;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
    }

    .overlayDiv {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 8px;
        text-align: center;
        z-index: 100;
    }

    #connectedDiv {
        background-color: white;
    }

    #errorDiv {
        background-color: rgba(105, 105, 105, 0.65);
    }

    #errorModal {
        width: 100%;
        height: 50%;
        top: 25%;
        position: absolute;
        background: rgb(247, 96, 96);
    }

    #buttonsDiv {
        width: 100%;
        padding-top: 10px;
        margin: 0 auto;
        text-align: center;
    }

    #saveDiv {
        display: inline-block;
    }

    #versionDiv {
        font-size: 8px;
        font-family: "Lucida Console", Monaco, monospace;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
    }

    #showHide {
        position: absolute;
        right: 44px;
        padding-top: 3px;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 9px;
        font-weight: bold;
        background: white;
        cursor: pointer;
    }

    input[type=button] {
        background-color: #666;
        border: 1px solid #CCC;
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
        outline: none;
        border-radius: 25px;
    }

    input[type=button]:hover {
        background-color: #777;
    }

    input[type=button]:active {
        background-color: #AAA;
        border-color: #4CAF50;
    }

    input[type=button]:disabled {
        background-color: #CCC;
        border-color: #DDD;
    }

    input[type=password] {
        width: 85%;
        background: transparent;
        border: transparent;
        outline: 0px;
    }

    input[type=text] {
        width: 85%;
        background: transparent;
        border: transparent;
        outline: 0px;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 12px;
    }

</style>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<html>
    <head>
        <title>PeggyConfig</title>
    </head> 
    <body>
        <div id="mainDiv">
            <canvas id='backgroundCnvs'></canvas>
            <div id='dataDiv'>
                <div id='connectedDiv' class="overlayDiv">
                    <span class="titleText titleText2">WiFi connected successfully!<br>Portal shutting down.</span>
                </div>
                <div id='errorDiv'  class="overlayDiv">
                    <div id="errorModal">
                        <span class="titleText titleText3">Invalid credentials.<br> Try again!</span>
                        <div>
                            <input id='connectBtn' value='Close' type='button' onclick="showError(false)"/>
                        </div>
                    </div>
                </div>
                <div id='loadingDiv'>
                    <div class="loadingRing"></div>
                </div>
                <div>
                    <label for="connList" class="titleText">AVAILABLE NETWORKS</label>
                    <span id="refreshBtn" onclick="initPage()">Refresh</span>
                </div>
                <div id='connectionList'></div>
                <label for="loginPw" class="titleText">PASSWORD</label>
                <div id="pwDiv">
                    <input id='loginPw' type='password'/>
                    <span id='showHide' onclick="showHidePw()">SHOW</span>
                </div>
                <div id='buttonsDiv'>
                    <div id='saveDiv'>
                        <input id='connectBtn' value='Connect' type='button' onclick="connect()"/>
                    </div>
                </div>
                <div id='versionDiv'>
                    <span id='versionNumber'>Powered by PeggyConfig</span>
                </div>
            </div>
        </div>
    </body>
</html>

<script>
    var _availableWifi = [];
    var _selectedWifi = undefined;
    var _manualSSID = false;
    initPage();
    
    function initPage() {
        showLoading(true);
        try {
            sendGET('AvailableWifi', function(response) {
                if (response != "") {
                    _availableWifi = response.split(";");
                    createWifiList();
                } else {
                    _manualSSID = true;
                }
                showLoading(false);
            });
        } catch {
            console.log("NO RESPONSE FROM MCU.")
            showLoading(false);
        }
    }
    
    function showHidePw() {
        if (document.getElementById('showHide').innerText == 'SHOW') {
            document.getElementById('showHide').innerText = 'HIDE'
            document.getElementById("loginPw").type ='text';
        } else {
            document.getElementById('showHide').innerText = 'SHOW'
            document.getElementById("loginPw").type = 'password';
        }
    }

    function showLoading(x) {
        if(x) {
            document.getElementById('loadingDiv').style.display = 'block';
        } else {
            document.getElementById('loadingDiv').style.display = 'none';
        }
    }  

    function setError(id, val) {
        if(val){
            document.getElementById(id).style.outline = 0;
            document.getElementById(id).style.borderColor = "red";
            document.getElementById("dataDiv").style.boxShadow = '0 0 12px 4px red';
        } else{
            document.getElementById(id).style.outline = "";
            document.getElementById(id).style.borderColor = "";
            document.getElementById("dataDiv").style.boxShadow = '';
        }
    }

    function showConnected() {
        document.getElementById('connectedDiv').style.display = 'block';
        document.getElementById("dataDiv").style.boxShadow = '0 0 12px 4px green';
    }

    function showError(x) {
        if(x) {
            document.getElementById('errorDiv').style.display = 'block';
        } else {
            document.getElementById('errorDiv').style.display = 'none';
        }
    }

    function connect() {
        showLoading(true);
        if (checkForm()) {
            var content = {
                SSID: _availableWifi[_selectedWifi],
                PASSWORD: document.getElementById('loginPw').value
            };
            sendPOST(JSON.stringify(content), function(status){
                if (status == "True") {
                    showError(false);
                    showConnected();
                } else {
                    showError(true);
                }
                showLoading(false)
            });    
        } else {
            showLoading(false);
        }       
    }

    function checkForm() {
        var status = true;
        if (_selectedWifi == undefined) {
            setError("connectionList", true);
            status = false
        } else {
            setError("connectionList", false);
        }
        if (document.getElementById('loginPw').value == "") {
            setError("pwDiv", true);
            status = false
        } else {
            setError("pwDiv", false);
        }
        return status;
    }

    function sendPOST(content, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST",'/dataIn',true)
        xhr.setRequestHeader('Content-Type', 'application/octet-stream');
        xhr.send(content);
        xhr.onload = function() 
            {
                if(typeof callback === 'function'){
                    callback(xhr.statusText);
                }
            };
    }

    function sendGET(content, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open( "GET", '/' + content);
        xhr.send( null );
        xhr.onload = function() 
            {
                if(typeof callback === 'function'){
                    callback(xhr.responseText);
                }
            };
    }

    function createWifiList() {
        var connectionList = "";
        if(_availableWifi == null) {
            return;
        }
        for (var x = 0; x<_availableWifi.length; x ++ ) {
            if (_availableWifi[x] == "") {
                continue;
            }
            var wifiName = _availableWifi[x];
            if(wifiName.length > 20) {
                wifiName = wifiName.substring(0, 17) + "...";
            }
            connectionList += "<div class='connectionItem' id='conn" + x + "' onclick='selectWifiConnection("+ x +")'>";
            connectionList +=   "<div class='connectionName'>" + wifiName + "</div>";
            connectionList += "</div>";
        }
        var content = document.getElementById("connectionList").innerHTML = connectionList;
    }

    function selectWifiConnection(x) {
        if (_selectedWifi != undefined) {
            var connection = document.getElementById("conn" + _selectedWifi);
            connection.classList.remove("selectedConnection");
        }
        _selectedWifi = x;
        var connection = document.getElementById("conn" + _selectedWifi);
        connection.classList.add("selectedConnection");
    }
</script>