Improve options page

RemiRigal · Sep 10, 2022 · 37d4b3c · 37d4b3c
1 parent 34bf9d8
commit 37d4b3c
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 17 deletions.
diff --git a/js/pyload-api.js b/js/pyload-api.js
@@ -7,20 +7,28 @@ function getServerStatus(callback) {
     xhr.onreadystatechange = function() {
         if (xhr.readyState === 4) {
             try {
+                if (xhr.status === 404) {
+                    if (callback) callback(false, false, 'Server not found');
+                    return;
+                }
                 const response = JSON.parse(xhr.responseText);
-                if (response.hasOwnProperty('error')) {
-                    if (callback) callback(false, response.error);
-                } else {
-                    if (callback) callback(true, null, response);
+                if (xhr.status === 200) {
+                    if (callback) callback(true, false, null, response);
+                } else if (xhr.status === 403) {
+                    if (callback) callback(false, true, 'Unauthorized', response);
+                } else if (response.hasOwnProperty('error')) {
+                    if (callback) callback(false, false, response.error);
+                } else {  
+                    if (callback) callback(false, false, null, response);
                 }
             } catch {
-                if (callback) callback(false, 'Server unreachable');
+                if (callback) callback(false, false, 'Server unreachable');
             }
         }
     }
     xhr.timeout = 5000;
     xhr.ontimeout = function() {
-        if (callback) callback(false, 'Server unreachable');
+        if (callback) callback(false, false, 'Server unreachable');
     }
     xhr.send();
 }

diff --git a/js/storage.js b/js/storage.js
@@ -16,10 +16,9 @@ function pullStoredData(callback) {
 }
 
 function isLoggedIn(callback) {
-    getServerStatus(function(success) {
+    getServerStatus(function(success, unauthorized, error, response) {
         if (callback) {
-            if (success) callback(true);
-            else callback(false);
+            callback(success, unauthorized, error, response);
         }
     });
 }

diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Yape",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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
@@ -23,21 +23,23 @@
       </div>
       <div class="form-group">
         <label for="serverPort">PyLoad server's port</label>
+        <i class="fa text-primary fa-info-circle ml-2" data-toggle="tooltip" data-placement="right" data-original-title="Default ports are 80 for HTTP and 443 HTTPS"></i>
         <input type="number" class="form-control" id="serverPort">
+        <div id="serverPortFeedback" class="invalid-feedback">
+          Please provide a valid port
+        </div>
       </div>
       <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>
+        <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>
         <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 ml-3 mt-1" for="useHTTPS">Use HTTPS</label>
+        <label class="form-check-label ml-3" 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>

diff --git a/options.js b/options.js
@@ -53,11 +53,17 @@ function updateLoggedInStatus(callback) {
     loginStatusKODiv.hidden = true;
     loginButton.hidden = true;
     enableSpinner();
-    isLoggedIn(function(loggedIn) {
+    isLoggedIn(function(loggedIn, unauthorized, error) {
         disableSpinner();
         loginStatusOKDiv.hidden = !loggedIn;
         loginStatusKODiv.hidden = loggedIn;
-        loginButton.hidden = loggedIn;
+        loginStatusKODiv.innerHTML = `<i class="fa fa-times small mr-3"></i>`
+        if (!loggedIn && unauthorized) {
+            loginStatusKODiv.innerHTML += `Please log in`;
+        } else {
+            loginStatusKODiv.innerHTML += error ? error : `You are not logged in`;
+        }
+        loginButton.hidden = !unauthorized;
         saveButton.disabled = false;
         if (callback) callback();
     });
@@ -101,6 +107,14 @@ function validateForm() {
         serverIpInput.classList.add('is-invalid');
         saveButton.disabled = true;
     }
+    // Port
+    const isValidPort = /\d+/.test(serverPortInput.value);
+    if (isValidPort) {
+        serverPortInput.classList.remove('is-invalid');
+    } else {
+        serverPortInput.classList.add('is-invalid');
+        saveButton.disabled = true;
+    }
     // Path
     const isValidPath = /^((\/[.\w-]+)*\/{0,1}|\/)$/.test(serverPathInput.value);
     if (isValidPath) {