Remember and forget details

3 files changed, 55 insertions, 24 deletions

diff --git a/css/main.css b/css/main.css
index 25bab9a..69b6dec 100644
--- a/css/main.css
+++ b/css/main.css
@@ -130,6 +130,11 @@ label {
     color: #222;
 }
 
+#confirmForget {
+    margin-left: 0.25em;
+    display: none;
+}
+
 /*==========================
         NAV TABS
 ==========================*/
diff --git a/index.html b/index.html
index cc35735..30b1792 100644
--- a/index.html
+++ b/index.html
@@ -198,6 +198,11 @@
                                             out how to get your X-Plex-token here.</a>
                                     </small>
                                 </div>
+                                <div class="form-group form-check">
+                                    <input type="checkbox" class="form-check-input" id="rememberDetails">
+                                    <label class="form-check-label" for="rememberDetails">Remember my details | </label>
+                                    <small><a href="javascript:void(0)" onclick="forgetDetails()">Forget my details</a><i id="confirmForget" class="fas fa-check" style="color: #28a745; font-size: 1.5em"></i></small>
+                                </div>
                                 <button id="btnConnectToPlex" class="btn btn-secondary" onclick="connectToPlex()"
                                     disabled>Connect to Plex</button>
                             </div>
diff --git a/js/main.js b/js/main.js
index 6c9991f..382874f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -18,42 +18,58 @@ $(document).ready(() => {
 
     // Validation listeners on the Plex URL Input
     $('#plexUrl').on("input", () => {
+        validateEnableConnectBtn('plexUrl');
+    });
+
+    // Validation listeners on the Plex Token Input
+    $('#plexToken').on("input", () => {
+        validateEnableConnectBtn('plexToken');
+    });
+
+    if (localStorage.plexUrl && localStorage.plexUrl !== "") {
+        $('#plexUrl').val(localStorage.plexUrl);
+        validateEnableConnectBtn('plexUrl');
+    }
+    if (localStorage.plexToken && localStorage.plexToken !== "") {
+        $('#plexToken').val(localStorage.plexToken);
+        validateEnableConnectBtn('plexToken');
+    }
+});
+
+function validateEnableConnectBtn(context) {
+    // Apply validation highlighting to URL field
+    if (context == 'plexUrl') {
         if ($('#plexUrl').val() != "") {
             $('#plexUrl').removeClass("is-invalid").addClass("is-valid");
-            validUrl = true;
         }
         else {
             $('#plexUrl').removeClass("is-valid").addClass("is-invalid");
-            validUrl = false;
-        }
-        // Check if we can enable the Connect to Plex button
-        if (validUrl && validToken) {
-            $("#btnConnectToPlex").prop("disabled", false);
-        }
-        else {
-            $("#btnConnectToPlex").prop("disabled", true);
         }
-    });
-
-    // Validation listeners on the Plex Token Input
-    $('#plexToken').on("input", () => {
+    }
+    else {
+        // Apply validation highlighting to Plex Token field
         if ($('#plexToken').val() != "") {
             $('#plexToken').removeClass("is-invalid").addClass("is-valid");
-            validToken = true;
         }
         else {
             $('#plexToken').removeClass("is-valid").addClass("is-invalid");
-            validToken = false;
-        }
-        // Check if we can enable the Connect to Plex button
-        if (validUrl && validToken) {
-            $("#btnConnectToPlex").prop("disabled", false);
-        }
-        else {
-            $("#btnConnectToPlex").prop("disabled", true);
         }
-    });
-});
+    }
+
+    // Enable or disable the button, depending on field status
+    if (($('#plexUrl').val() != "") && ($('#plexToken').val() != "")) {
+        $("#btnConnectToPlex").prop("disabled", false);
+    }
+    else {
+        $("#btnConnectToPlex").prop("disabled", true);
+    }
+}
+
+function forgetDetails() {
+    localStorage.removeItem('plexUrl');
+    localStorage.removeItem('plexToken');
+    $('#confirmForget').fadeIn(250).delay(750).fadeOut(1250);
+}
 
 function connectToPlex() {
     plexUrl = $("#plexUrl").val().trim();
@@ -63,6 +79,11 @@ function connectToPlex() {
         plexUrl = `http://${plexUrl}`
     }
 
+    if ($('#rememberDetails').prop('checked')) {
+        localStorage.plexUrl = plexUrl;
+        localStorage.plexToken = plexToken;
+    }
+
     $.ajax({
         "url": `${plexUrl}/library/sections/`,
         "method": "GET",