diff options
| -rw-r--r-- | css/main.css | 5 | ||||
| -rw-r--r-- | index.html | 5 | ||||
| -rw-r--r-- | js/main.js | 69 |
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 ==========================*/ @@ -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> @@ -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", |