Add initial setup UI

www/css/index.css

@@ -1,3 +1,7 @@
 .navbar-brand {
     font-size: 150%;
+}
+
+.mainbox {
+    margin-top: 1rem;
 }

www/index.html

@@ -8,7 +8,29 @@
 <script src="js/fontawesome.js"></script>
 <script src="js/jquery-3.3.1.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
+<script src="js/index.js"></script>
 
 <nav class="navbar navbar-expand-lg navbar-dark bg-green py-2">
     <span class="navbar-brand py-0 my-0">PC Info</span>
-</nav>
+</nav>
+
+<div class="container mainbox d-none" id="setupmode">
+    <div class="card">
+        <div class="card-body">
+            <h4 class="card-title">Setup</h4>
+            <div class="form-group">
+                <label class="col-form-label" for="serverurl">Server API URL:</label>
+                <input id="serverurl" type="url" class="form-control" placeholder="https://pcinfo.netsyms.com/api" />
+            </div>
+            <div class="form-group">
+                <label class="col-form-label" for="apikey">API Key:</label>
+                <input id="apikey" type="text" class="form-control" placeholder="123abc" />
+            </div>
+            <div class="btn btn-primary" id="setupbtn">Finish Setup</div>
+        </div>
+    </div>
+</div>
+
+<div class="container mainbox d-none" id="usermode">
+    
+</div>

www/js/index.js

@@ -0,0 +1,79 @@
+var inCordova = false;
+var inNwjs = false;
+var setupMode = false;
+var serverUrl = "";
+var apiKey = "";
+
+
+function loadSetupMode() {
+    $("#setupbtn").click(function () {
+        var url = $("#serverurl").val();
+        if (url == "") {
+            url = "https://pcinfo.netsyms.com/api";
+        }
+        var key = $("#apikey").val();
+        if (key == "") {
+            alert("Please enter a valid API key.");
+            return;
+        }
+
+        $.getJSON(url, {
+            key: key,
+            action: 'ping'
+        }, function (resp) {
+            if (typeof resp['status'] != 'undefined') {
+                if (resp['status'] == 'ERROR') {
+                    alert("Error: " + resp['message']);
+                    return;
+                } else if (resp['status'] == 'OK') {
+                    localStorage.setItem('server', url);
+                    localStorage.setItem('apikey', key);
+                    alert("Setup complete.");
+                    document.location.href = "index.html";
+                } else {
+                    alert("Invalid reply from server.");
+                }
+            } else {
+                alert("Invalid reply from server.");
+            }
+        }).fail(function (xhr) {
+            try {
+                var resp = JSON.parse(xhr.responseText);
+                if (typeof resp['status'] != 'undefined' && resp['status'] == 'ERROR') {
+                    alert("Error: " + resp['message']);
+                } else {
+                    alert("Error connecting to server.");
+                }
+            } catch (ex) {
+                alert("Error connecting to server.");
+            }
+        });
+    });
+
+    $("#setupmode").removeClass("d-none");
+}
+
+function loadUserMode() {
+    $("#usermode").removeClass("d-none");
+}
+
+
+document.addEventListener("deviceready", function () {
+    inCordova = true;
+});
+
+$(document).ready(function () {
+    if (typeof nw !== 'undefined') {
+        inNwjs = true;
+    }
+
+    if (localStorage.getItem('server') === null || localStorage.getItem('apikey') === null) {
+        setupMode = true;
+    }
+
+    if (setupMode) {
+        loadSetupMode();
+    } else {
+        loadUserMode();
+    }
+});