Improve options page

RemiRigal · Sep 8, 2022 · 34bf9d8 · 34bf9d8
1 parent 1be3d4c
commit 34bf9d8
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 18 deletions.
diff --git a/js/pyload-api.js b/js/pyload-api.js
@@ -1,5 +1,7 @@
+let xhr = null;
+
 function getServerStatus(callback) {
-    let xhr = new XMLHttpRequest();
+    xhr = new XMLHttpRequest();
     xhr.open('POST', `${origin}/api/statusServer`, true);
     xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     xhr.onreadystatechange = function() {

diff --git a/js/storage.js b/js/storage.js
@@ -1,12 +1,16 @@
-let serverPort, serverIp, serverProtocol, origin;
+let serverPort, serverIp, serverProtocol, serverPath, origin;
 
 
 function pullStoredData(callback) {
     chrome.storage.sync.get(['serverIp', 'serverPort', 'serverProtocol'], function(data) {
         serverIp = data.serverIp || '172.0.0.1';
         serverPort = data.serverPort || 8001;
+        serverPath = data.serverPath || '/';
         serverProtocol = data.serverProtocol || 'http';
-        origin = `${serverProtocol}://${serverIp}:${serverPort}`;
+        origin = `${serverProtocol}://${serverIp}:${serverPort}${serverPath}`;
+        if (origin.endsWith('/')) {
+            origin = origin.slice(0, origin.length - 1);
+        }
         if (callback) callback(data);
     });
 }
@@ -20,15 +24,20 @@ function isLoggedIn(callback) {
     });
 }
 
-function setOrigin(ip, port, protocol, callback) {
+function setOrigin(ip, port, protocol, path, callback) {
     serverIp = ip;
     serverPort = port;
     serverProtocol = protocol;
-    origin = `${serverProtocol}://${serverIp}:${serverPort}`;
+    serverPath = path;
+    origin = `${serverProtocol}://${serverIp}:${serverPort}${serverPath}`;
+    if (origin.endsWith('/')) {
+        origin = origin.slice(0, origin.length - 1);
+    }
     chrome.storage.sync.set({
         serverIp: serverIp,
         serverPort: serverPort,
-        serverProtocol: serverProtocol
+        serverProtocol: serverProtocol,
+        serverPath: serverPath
     }, function () {
         if (callback) callback();
     });

diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Yape",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Extension for PyLoad to easily monitor and add downloads",
   "permissions": ["activeTab", "storage", "contextMenus", "scripting"],
   "host_permissions": ["http://*/", "https://*/"],

diff --git a/options.html b/options.html
@@ -25,15 +25,31 @@
         <label for="serverPort">PyLoad server's port</label>
         <input type="number" class="form-control" id="serverPort">
       </div>
-      <div class="form-check">
+      <div class="form-group">
+        <div class="flex m-0 row">
+          <label for="serverPath">PyLoad server's path</label>
+          <i class="fa text-primary fa-info-circle ml-2" data-toggle="tooltip" data-placement="right" data-original-title="The path of the PyLoad server"></i>
+        </div>
+        <input type="text" class="form-control" id="serverPath">
+        <div id="serverPathFeedback" class="invalid-feedback">
+          Please provide a valid path
+        </div>
+      </div>
+      <div class="form-check flex items-center">
         <input type="checkbox" class="form-check-input" id="useHTTPS">
-        <label class="form-check-label" for="useHTTPS">Use HTTPS</label>
+        <label class="form-check-label ml-3 mt-1" for="useHTTPS">Use HTTPS</label>
+      </div>
+      <div class="form-group flex items-center justify-content-center mt-4">
+        <label class="h5">Your PyLoad URL:</label>
+        <div class="flex text-center mt-2">
+          <label class="h6" id="currentURL"></label>
+        </div>
       </div>
       <div class="d-flex justify-content-center">
-        <div id="loginStatusOK" class="alert alert-success mt-4" hidden>
+        <div id="loginStatusOK" class="alert alert-success mt-2" hidden>
           <i class="fa fa-check small mr-3"></i>You are logged in
         </div>
-        <div id="loginStatusKO" class="alert alert-danger mt-4" hidden>
+        <div id="loginStatusKO" class="alert alert-danger mt-2" hidden>
           <i class="fa fa-times small mr-3"></i>You are not logged in
         </div>
       </div>

diff --git a/options.js b/options.js
@@ -2,10 +2,12 @@ let usernameInput = document.getElementById('username');
 let passwordInput = document.getElementById('password');
 let serverIpInput = document.getElementById('serverIp');
 let serverPortInput = document.getElementById('serverPort');
+let serverPathInput = document.getElementById('serverPath');
 let useHTTPSInput = document.getElementById('useHTTPS');
 let spinnerDiv = document.getElementById('spinnerDiv');
 let loginStatusOKDiv = document.getElementById('loginStatusOK');
 let loginStatusKODiv = document.getElementById('loginStatusKO');
+let currentURL = document.getElementById('currentURL');
 
 let saveButton = document.getElementById('saveButton');
 let loginButton = document.getElementById('loginButton');
@@ -82,33 +84,62 @@ function requestPermission(callback) {
     });
 }
 
-function validateServerIP() {
+function validHost(str) {
+    let pattern = new RegExp('^((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
+        '((\\d{1,3}\\.){3}\\d{1,3}))$'); // OR ip (v4) address
+    return !!pattern.test(str);
+}
+
+function validateForm() {
+    // Host
     const value = serverIpInput.value;
-    const isValidIP = /^(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(value);
-    const isValidName = /^(?!:\/\/)([a-zA-Z0-9]+\.)?[a-zA-Z0-9][a-zA-Z0-9-]+\.[a-zA-Z]{2,6}?$/i.test(value);
     const isLocalhost = (value === 'localhost');
-    if (isValidIP || isValidName || isLocalhost) {
+    const isServerIPValid = validHost(value) || isLocalhost;
+    if (isServerIPValid) {
         serverIpInput.classList.remove('is-invalid');
     } else {
         serverIpInput.classList.add('is-invalid');
         saveButton.disabled = true;
     }
+    // Path
+    const isValidPath = /^((\/[.\w-]+)*\/{0,1}|\/)$/.test(serverPathInput.value);
+    if (isValidPath) {
+        serverPathInput.classList.remove('is-invalid');
+    } else {
+        serverPathInput.classList.add('is-invalid');
+        saveButton.disabled = true;
+    }
 }
 
 function requireSaving() {
-    if (serverIpInput.value === serverIp && parseInt(serverPortInput.value) === parseInt(serverPort) && useHTTPSInput.checked === (serverProtocol === 'https')) {
+    updateCurrentURL();
+    if (xhr !== null) {
+        xhr.abort();
+    }
+    if (serverIpInput.value === serverIp &&
+        parseInt(serverPortInput.value) === parseInt(serverPort) &&
+        useHTTPSInput.checked === (serverProtocol === 'https') &&
+        serverPathInput.value === serverPath) {
         updateLoggedInStatus();
     } else {
         saveButton.disabled = false;
         loginStatusOKDiv.hidden = true;
         loginStatusKODiv.hidden = true;
         loginButton.hidden = true;
     }
-    validateServerIP();
+    validateForm();
+}
+
+function updateCurrentURL() {
+    portString = `:${serverPortInput.value}`;
+    if ((useHTTPSInput.checked && serverPortInput.value === '443') || (!useHTTPSInput.checked && serverPortInput.value === '80')) {
+        portString = '';
+    }
+    currentURL.innerHTML = `${useHTTPSInput.checked ? 'https' : 'http'}://${serverIpInput.value}${portString}${serverPathInput.value}`;
 }
 
 saveButton.onclick = function(ev) {
-    setOrigin(serverIpInput.value, serverPortInput.value, getProtocol(), function() {
+    setOrigin(serverIpInput.value, serverPortInput.value, getProtocol(), serverPathInput.value, function() {
         requestPermission(function(granted) {
             updateLoggedInStatus();
         });
@@ -138,11 +169,15 @@ $(document).ready(function(){
 pullStoredData(function() {
     serverIpInput.value = serverIp;
     serverPortInput.value = serverPort;
+    serverPathInput.value = serverPath;
     useHTTPSInput.checked = serverProtocol === 'https';
 
+    updateCurrentURL();
+
     serverIpInput.oninput = requireSaving;
     serverPortInput.oninput = requireSaving;
     useHTTPSInput.oninput = requireSaving;
+    serverPathInput.oninput = requireSaving;
 
     updateLoggedInStatus();
 });