From 0e8de29d09299394eddb92166f7f8e8c858400d8 Mon Sep 17 00:00:00 2001
From: BlueFox <bluefox@privacynerd.de>
Date: Tue, 26 Mar 2024 13:33:47 +0100
Subject: [PATCH]  simpledemo.html: Implemented the IP address entering process
 when visiting the website first.

---
 simpledemo.html | 72 +++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 64 insertions(+), 8 deletions(-)
diff --git a/simpledemo.html b/simpledemo.html
index 799b90d..9f0bc37 100644
--- a/simpledemo.html
+++ b/simpledemo.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset='utf-8'>
     <meta name='viewport' content='width=device-width,initial-scale=1'>
-    <title>API Demo (on [IP here])</title>
+    <title>NetSpeaker Demo (on [IP here])</title>
     <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' rel='stylesheet'
           integrity='sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN' crossorigin='anonymous'>
     <style>#playbackMuteButton:hover { background-color: #00000000; }</style>
@@ -13,6 +13,7 @@
 
     <p>Welcome to</p>
     <h1 id='title_frname'>[FRIENDLY NAME HERE]</h1>
+    <p id="title_onIP"></p>
     <p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem'>[VERSION STRING HERE]</p>
 
     <hr style='margin: 3em 0em;'>
@@ -520,11 +521,17 @@
                 </div>
                 <div class="text-start modal-body">
                     <p>Please give the IP adress of you NetSpeaker here, so that this site can access its API.</p>
-                    
+                    <div class="mb-3">
+                      <div class="input-group">
+                        <span class="input-group-text">http://</span>
+                        <input type="text" class="form-control" id="ipAdressInput">
+                      </div>
+                    </div>
+                    <div id="configWorkingAlertPlaceholder"></div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-primary">Apply & Test</button>
-                    <button type="button" class="btn btn-success">Ok</button>
+                    <button type="button" class="btn btn-primary" id="ipAdressModalApplyBtn">Apply & Test</button>
+                    <button type="button" class="btn btn-success" id="ipAdressModalOkBtn">Ok</button>
                 </div>
             </div>
         </div>
@@ -533,15 +540,64 @@
 <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js'
         integrity='sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL' crossorigin='anonymous'></script>
 <script type="text/javascript">
-    function validateIPAddress(ipaddress) {
+    function isValidIP(ipaddress) {
         if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress)) {
             return true;
         }
         return false;
     }
-    if (document.cookie == "" || !validateIPAddress(document.cookie)) {
-        var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {})
-        selectIPModal.show()
+    function appendAlert(alertPlaceholder, message, type) {
+      const wrapper = document.createElement('div')
+      wrapper.innerHTML = [
+        `<div class="alert alert-${type} alert-dismissible" role="alert">`,
+        `   <div>${message}</div>`,
+        '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
+        '</div>'
+      ].join('')
+
+      alertPlaceholder.append(wrapper)
+    }
+    
+    if (document.cookie == "" || !isValidIP(document.cookie)) {
+        var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {});
+        selectIPModal.show();
+
+        const alertPlaceholder = document.getElementById('configWorkingAlertPlaceholder');
+
+        function configButtonEventListener(hideModalOnSuccess) {
+            var ipAddressEntered = document.getElementById('ipAdressInput').value;
+            if(isValidIP(ipAddressEntered)) {
+                var request = new XMLHttpRequest();
+                request.onreadystatechange = function() {
+                    if (this.readyState == 4 && this.status == 200) {
+                        appendAlert(alertPlaceholder, 'Working Configuration!', 'success');
+                        document.cookie = ipAddressEntered;
+                        document.title = "NetSpeaker Demo (on " + ipAddressEntered + ")";
+                        document.getElementById("title_onIP").innerHTML = "on " + document.cookie;
+                        setTimeout(function(){
+                            if(hideModalOnSuccess) selectIPModal.hide();
+                        }, 500);
+                    } else if (this.readyState != 4) {
+                        // just do nothing, wait!
+                    } else {
+                        appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
+                    }
+                };
+                request.open("GET", "http://" + ipAddressEntered + "/api/v1/system/version", true);
+                request.send()
+            } else {
+                appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
+            }
+        }
+
+        const ipAdressModalApplyBtn = document.getElementById('ipAdressModalApplyBtn');
+        ipAdressModalApplyBtn.addEventListener('click', () => { configButtonEventListener(false); });
+
+        const ipAdressModalOkBtn = document.getElementById('ipAdressModalOkBtn');
+        ipAdressModalOkBtn.addEventListener('click', () => { configButtonEventListener(true); });
+    } else if (isValidIP(document.cookie)) {
+        document.title = "NetSpeaker Demo (on " + document.cookie + ")";
+        document.getElementById("title_onIP").innerHTML = "on " + document.cookie;
     }
 </script>
 </body>
