From 5682273c74f46383908131c9299613b7e6cfdcfc Mon Sep 17 00:00:00 2001
From: miniduikboot <mini@duikbo.at>
Date: Wed, 10 Jan 2024 19:35:08 +0100
Subject: [PATCH] Redesign protocol field

We got a few people who put http:// into the server address field. By
putting the dropdown next to the address field this hopefully doesn't
happen anymore
---
 index.html | 26 +++++++++++---------------
 script.js  | 20 +++++++++-----------
 2 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index 82bdd781..6d3a5a38 100644
--- a/index.html
+++ b/index.html
@@ -26,25 +26,21 @@
                 </div>
                 <form id="serverFileForm" class="container p-0" onsubmit="return false;">
                     <div class="row justify-content-center mb-5 mb-md-4">
-                        <div class="row justify-content-center flex-nowrap" style="max-width: 350px">
+                        <div class="form-row">
+                            <div class="col">
+                            <select name="serverProtocol" id="protocol" class="custom-select" style="height: 100%">
+                                <option value="http" selected>http://</option>
+                                <option value="https">https://</option>
+                            </select>
+                            </div>
+                            <div class="col">
                             <input class="form-control form-control-lg bg-transparent text-light text-center mr-2"
                                    type="text" placeholder="Server address" id="address" name="address" required>
+                            </div>
+                            <div class="col">
                             <input class="form-control form-control-lg bg-transparent text-light" style="max-width: 110px"
                                    type="number" placeholder="Port" id="port" name="port" min="1" max="65535" required>
-                        </div>
-                    </div>
-
-                    <div class="row justify-content-center mv-5 mb-md-4">
-                        <div class="form-check form-check-inline" style="display: inline">
-                            <label class="align-middle" style="display: inline" for="serverProtocol">Connection protocol</label>
-                        </div>
-                        <div class="form-check form-check-inline">
-                            <input class="form-check-input" type="radio" name="serverProtocol" id="http" value="http" checked onclick="setPortIfDefault('http')">
-                            <label class="form-check-label" for="http">http</label>
-                        </div>
-                        <div class="form-check form-check-inline">
-                            <input class="form-check-input" type="radio" name="serverProtocol" id="https" value="https" onclick="setPortIfDefault('https')">
-                            <label class="form-check-label" for="https">https</label>
+                            </div>
                         </div>
                     </div>
 
diff --git a/script.js b/script.js
index fa4439b5..a8934586 100644
--- a/script.js
+++ b/script.js
@@ -9,7 +9,7 @@ function parseForm() {
     const address = document.getElementById("address").value.trim();
     const port = parseInt(document.getElementById("port").value) ?? DEFAULT_PORT_HTTP;
     const name = document.getElementById("name").value || "Impostor";
-    const protocol = document.querySelector("input[name=serverProtocol]:checked").value || "http";
+    const protocol = document.querySelector("select[name=serverProtocol]").value || "http";
 
     return { address, port, name, protocol, url: `${protocol}://${address}` };
 }
@@ -58,17 +58,15 @@ function setPlatform(platform) {
     }
 
     // HTTPS is mandatory on ios/android
-    const httpRadio = document.getElementById("http");
-    const httpsRadio = document.getElementById("https");
+    const protocol = document.getElementById("protocol");
     if (platform === "android" || platform === "ios") {
-        httpsSetExplicitly = httpsRadio.checked;
-        httpsRadio.checked = true;
-        httpRadio.disabled = true;
+        protocol.value = "https";
+        protocol.disabled = true;
         setPortIfDefault("https");
     } else {
-        httpRadio.disabled = false;
+        protocol.disabled = false;
         if (!httpsSetExplicitly) {
-            httpRadio.checked = true;
+            protocol.value = "http";
             setPortIfDefault("http");
         }
     }
@@ -150,7 +148,7 @@ function fillFromLocationHash() {
     if (protocol !== "http" && protocol !== "https") {
         protocol = "http";
     }
-    document.getElementById(protocol).checked = true;
+    document.querySelector("select[name=serverProtocol]").value = protocol;
 
     document.getElementById("name").value = serverName;
 }
@@ -160,8 +158,6 @@ function setLocationHash() {
     document.location.hash = [serverInfo.address, serverInfo.port, serverInfo.protocol, serverInfo.name].join(":");
 }
 
-fillFromLocationHash();
-
 if (["iPhone", "iPad", "iPod"].indexOf(window.navigator.platform) !== -1) {
     setPlatform("ios");
 } else if (/Android/.test(window.navigator.userAgent)) {
@@ -169,3 +165,5 @@ if (["iPhone", "iPad", "iPod"].indexOf(window.navigator.platform) !== -1) {
 } else {
     setPlatform("desktop");
 }
+
+fillFromLocationHash();