Skip to content

Commit

Permalink
UX optimization
Browse files Browse the repository at this point in the history
  • Loading branch information
@veniware
veniware committed Jul 19, 2024
1 parent 1171a6c commit 369380b
Show file tree
Hide file tree
Showing 9 changed files with 169 additions and 34 deletions.
2 changes: 1 addition & 1 deletion Protest/Front/backup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ class Backup extends List {
this.ListBackup();
}
catch (ex) {
this.ConfirmBox(ex, true, "mono/error.svg")
setTimeout(()=>this.ConfirmBox(ex, true, "mono/error.svg"), 250);
}
};

Expand Down
23 changes: 21 additions & 2 deletions Protest/Front/certificates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,24 @@ class Certificates extends List {

setTimeout(()=>nameInput.focus(), 200);

okButton.addEventListener("click", async ()=> {
okButton.onclick = async ()=> {
let requiredFieldMissing = false;
let requiredFields = [nameInput, domainInput];

for (let i=0; i<requiredFields.length; i++) {
if (requiredFields[i].value.length === 0) {
if (!requiredFieldMissing) requiredFields[i].focus();
requiredFields[i].required = true;
requiredFieldMissing = true;
requiredFields[i].style.animationDuration = `${(i+1)*.1}s`;
}
else {
requiredFields[i].required = false;
}
}

if (requiredFieldMissing) return;

let body = `name=${nameInput.value}\n`;
body += `domain=${domainInput.value}\n`;
body += `keysize=${rsaKeyInput.value}\n`;
Expand All @@ -163,7 +180,9 @@ class Certificates extends List {
catch (ex) {
this.ConfirmBox(ex, true, "mono/error.svg");
}
});

dialog.Close();
};
}

Delete() {
Expand Down
1 change: 0 additions & 1 deletion Protest/Front/deviceview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2638,7 +2638,6 @@ class DeviceView extends View {

fetchButton.onclick();
}

}
catch {}
finally {
Expand Down
2 changes: 2 additions & 0 deletions Protest/Front/list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,6 +451,8 @@ class List extends Window {
RefreshList() {
this.list.textContent = "";

if (this.link === null || this.link.data === null) { return; }

let filtered = [];
if (this.args.filter.length === 0) {
for (const key in this.link.data) {
Expand Down
6 changes: 0 additions & 6 deletions Protest/Front/mono/other.svg
View file

This file was deleted.

64 changes: 62 additions & 2 deletions Protest/Front/reverseproxy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,14 @@ class ReverseProxy extends List {
this.deleteButton = this.AddToolbarButton("Delete", "mono/delete.svg?light");
this.AddToolbarSeparator();
this.startButton = this.AddToolbarButton("Start", "mono/play.svg?light");
this.pauseButton = this.AddToolbarButton("Pause", "mono/pause.svg?light");
this.stopButton = this.AddToolbarButton("Stop", "mono/stop.svg?light");

this.deleteButton.disabled = true;
this.startButton.disabled = true;
this.pauseButton.disabled = true;
this.stopButton.disabled = true;

this.list.style.right = "unset";
this.list.style.width = "min(40%, 480px)";

Expand Down Expand Up @@ -112,7 +118,7 @@ class ReverseProxy extends List {
innerBox.style.padding = "16px 32px";
innerBox.style.display = "grid";
innerBox.style.gridTemplateColumns = "auto 175px 275px auto";
innerBox.style.gridTemplateRows = "repeat(7, 38px)";
innerBox.style.gridTemplateRows = "repeat(8, 38px)";
innerBox.style.alignItems = "center";

let counter = 0;
Expand All @@ -138,7 +144,7 @@ class ReverseProxy extends List {
return input;
};

const nameInput = AddParameter("Name", "input", "text");
const nameInput = AddParameter("Name", "input", "text");

const protocolInput = AddParameter("Protocol", "select", null);
for (const protocol of ["TCP", "UDP", "HTTP", "HTTPS"]) {
Expand Down Expand Up @@ -170,13 +176,67 @@ class ReverseProxy extends List {
const destinationAddressInput = AddParameter("Destination address", "input", "text", {placeholder: "127.0.0.1"});
const destinationPortInput = AddParameter("Destination port", "input", "number", {"min":1, "max":65535, value:80});

counter++;
const autostartBox = document.createElement("div");
autostartBox.style.gridArea = `${counter} / 2 / ${counter} / 4`;
innerBox.append(autostartBox);

const autostartToggle = this.CreateToggle("Autostart", false, autostartBox);

setTimeout(()=>nameInput.focus(), 200);

protocolInput.onchange = ()=> {
certsInput.disabled = protocolInput.value !== "https";
};

protocolInput.onchange();

okButton.onclick = async ()=> {
let requiredFieldMissing = false;
let requiredFields = [nameInput, listenAddressInput, listenPostInput, destinationAddressInput, destinationPortInput];

for (let i=0; i<requiredFields.length; i++) {
if (requiredFields[i].value.length === 0) {
if (!requiredFieldMissing) requiredFields[i].focus();
requiredFields[i].required = true;
requiredFieldMissing = true;
requiredFields[i].style.animationDuration = `${(i+1)*.1}s`;
}
else {
requiredFields[i].required = false;
}
}

if (requiredFieldMissing) return;

try {
let body = `name=${nameInput.value}\n`;
body += `protocol=${protocolInput.value}\n`;
body += `cert=${certsInput.value}\n`;
body += `listenaddr=${listenAddressInput.value}\n`;
body += `listenport=${listenPostInput.value}\n`;
body += `destaddr=${destinationAddressInput.value}\n`;
body += `destport=${destinationPortInput.value}\n`;
body += `autostart=${autostartToggle.checkbox.checked}`;

const response = await fetch("/todo", {
method: "POST",
body: body
});

if (response.status !== 200) LOADER.HttpErrorHandler(response.status);

const json = await response.json();
if (json.error) throw (json.error);

//TODO:
}
catch (ex) {
setTimeout(()=>this.ConfirmBox(ex, true, "mono/error.svg"), 250);
}

dialog.Close();
};
}

Delete() {
Expand Down
75 changes: 65 additions & 10 deletions Protest/Front/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ class Settings extends Tabs {
this.tabsPanel.appendChild(this.zonesList);

this.zonesNewButton.onclick = ()=>{
this.PreviewZone(null);
this.ZoneDialog(null);
};

this.zonesRemoveButton.onclick = ()=> {
Expand Down Expand Up @@ -382,9 +382,7 @@ class Settings extends Tabs {
}
catch (ex) {
dialog.Close();
setTimeout(()=>{
this.ConfirmBox(ex, true, "mono/error.svg");
},250);
setTimeout(()=>this.ConfirmBox(ex, true, "mono/error.svg"), 250);
}
};

Expand Down Expand Up @@ -554,7 +552,7 @@ class Settings extends Tabs {
};

element.ondblclick = ()=>{
this.PreviewZone(json[i]);
this.ZoneDialog(json[i]);
};
}
}
Expand Down Expand Up @@ -706,7 +704,7 @@ class Settings extends Tabs {
}
}

PreviewZone(object=null) {
ZoneDialog(object=null) {
const dialog = this.DialogBox("240px");
if (dialog === null) return;

Expand Down Expand Up @@ -758,14 +756,31 @@ class Settings extends Tabs {
trustedToggle.checkbox.checked = object.isTrusted;
}

okButton.addEventListener("click", async ()=>{
okButton.onclick = async()=> {
let isNew = object === null;
let index = this.zones.indexOf(object);

if (!isNew) {
if (index === -1) isNew = true;
}

let requiredFieldMissing = false;
let requiredFields = [nameInput, networkInput];

for (let i=0; i<requiredFields.length; i++) {
if (requiredFields[i].value.length === 0) {
if (!requiredFieldMissing) requiredFields[i].focus();
requiredFields[i].required = true;
requiredFieldMissing = true;
requiredFields[i].style.animationDuration = `${(i+1)*.1}s`;
}
else {
requiredFields[i].required = false;
}
}

if (requiredFieldMissing) return;

const newObject = {
name : nameInput.value,
network : networkInput.value,
Expand All @@ -781,8 +796,9 @@ class Settings extends Tabs {
}

await this.SaveZones();
dialog.Close();
this.ShowZones();
});
};

setTimeout(()=>{ nameInput.focus() }, 200);
}
Expand Down Expand Up @@ -861,14 +877,31 @@ class Settings extends Tabs {
sslToggle.checkbox.checked = object.ssl;
}

okButton.addEventListener("click", async ()=> {
okButton.onclick = async ()=>{
let isNew = object === null;
let index = this.smtpProfiles.indexOf(object);

if (!isNew) {
if (index === -1) isNew = true;
}

let requiredFieldMissing = false;
let requiredFields = [serverInput, portInput, senderInput, usernameInput, passwordInput];

for (let i=0; i<requiredFields.length; i++) {
if (requiredFields[i].value.length === 0) {
if (!requiredFieldMissing) requiredFields[i].focus();
requiredFields[i].required = true;
requiredFieldMissing = true;
requiredFields[i].style.animationDuration = `${(i+1)*.1}s`;
}
else {
requiredFields[i].required = false;
}
}

if (requiredFieldMissing) return;

const newObject = {
server : serverInput.value,
port : parseInt(portInput.value),
Expand All @@ -888,8 +921,9 @@ class Settings extends Tabs {
}

await this.SaveSmtpProfiles();
dialog.Close();
this.ShowSmtp();
});
};

setTimeout(()=>{ serverInput.focus() }, 200);
}
Expand Down Expand Up @@ -1115,6 +1149,27 @@ class Settings extends Tabs {
if (index === -1) isNew = true;
}

let isV3 = versionInput.value == 3;

let requiredFieldMissing = false;
let requiredFields = isV3
? [nameInput, priorityInput, usernameInput, authPasswordInput, privacyPasswordInput]
: [nameInput, priorityInput, communityInput];

for (let i=0; i<requiredFields.length; i++) {
if (requiredFields[i].value.length === 0) {
if (!requiredFieldMissing) requiredFields[i].focus();
requiredFields[i].required = true;
requiredFieldMissing = true;
requiredFields[i].style.animationDuration = `${(i+1)*.1}s`;
}
else {
requiredFields[i].required = false;
}
}

if (requiredFieldMissing) return;

const newObject = {
name : nameInput.value,
priority : parseInt(priorityInput.value),
Expand Down
6 changes: 6 additions & 0 deletions Protest/Front/textbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ input[type="date"]:required {
background-image: url(mono/required.svg);
background-size: 24px 24px;
background-repeat: no-repeat;
animation: required .4s ease-in;
}

input[type=number]:not(:focus) {
Expand All @@ -76,4 +77,9 @@ input[type=number]:not(:focus) {
select > option {
font-size: var(--global-font-size);
font-family: var(--global-font-family);
}

@keyframes required {
0% { background-position: calc(100% + 40px); }
100% { background-position: calc(100%); }
}
24 changes: 12 additions & 12 deletions Protest/Front/watchdog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,38 +492,38 @@ class Watchdog extends Window {
okButton.onclick = async ()=> {
if (!isNew && this.selected === null) return;

let requiredFilledMissing = false;
let requiredFieldMissing = false;

if (targetInput.value.length === 0) {
if (!requiredFilledMissing) targetInput.focus();
if (!requiredFieldMissing) targetInput.focus();
targetInput.required = true;
requiredFilledMissing = true;
requiredFieldMissing = true;
}

if (typeInput.value === "TCP" && portInput.value.length === 0) {
if (!requiredFilledMissing) portInput.focus();
if (!requiredFieldMissing) portInput.focus();
portInput.required = true;
requiredFilledMissing = true;
requiredFieldMissing = true;
}

if (typeInput.value === "DNS" && portInput.value.length === 0) {
if (!requiredFilledMissing) portInput.focus();
if (!requiredFieldMissing) portInput.focus();
portInput.required = true;
requiredFilledMissing = true;
requiredFieldMissing = true;
}
if (typeInput.value === "DNS" && queryInput.value.length === 0) {
if (!requiredFilledMissing) queryInput.focus();
if (!requiredFieldMissing) queryInput.focus();
queryInput.required = true;
requiredFilledMissing = true;
requiredFieldMissing = true;
}

if (typeInput.value === "HTTP keyword" && keywordInput.value.length === 0) {
if (!requiredFilledMissing) keywordInput.focus();
if (!requiredFieldMissing) keywordInput.focus();
keywordInput.required = true;
requiredFilledMissing = true;
requiredFieldMissing = true;
}

if (requiredFilledMissing) return;
if (requiredFieldMissing) return;

if (nameInput.value.length === 0) {
nameInput.value = targetInput.value;
Expand Down

0 comments on commit 369380b

Please sign in to comment.