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
This commit is contained in:
miniduikboot committed 2024-01-10 19:35:08 +01:00
1 parent b75f0eb6a3
commit 5682273c74
2 files changed
+20 -26

No files matched your search

+11 -15
View File
@@ -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>
+9 -11
View File
@@ -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();