remember forget details changes

3 files changed, 20 insertions, 8 deletions

diff --git a/css/main.css b/css/main.css
index b4ab474..61a8915 100644
--- a/css/main.css
+++ b/css/main.css
@@ -135,6 +135,10 @@ label {
     display: none;
 }
 
+#forgetDivider, #forgetDetailsSection {
+    display: none;
+}
+
 /*==========================
         ALERTS
 ==========================*/
diff --git a/index.html b/index.html
index 22cbb16..281914a 100644
--- a/index.html
+++ b/index.html
@@ -200,8 +200,11 @@
                                 </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>
+                                    <label class="form-check-label" for="rememberDetails">Remember my details<span id="forgetDivider"> | </span></label>
+                                    <small id="forgetDetailsSection">
+                                        <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>
diff --git a/js/main.js b/js/main.js
index 382874f..16e0492 100644
--- a/js/main.js
+++ b/js/main.js
@@ -29,10 +29,12 @@ $(document).ready(() => {
     if (localStorage.plexUrl && localStorage.plexUrl !== "") {
         $('#plexUrl').val(localStorage.plexUrl);
         validateEnableConnectBtn('plexUrl');
+        $('#forgetDivider, #forgetDetailsSection').show();
     }
     if (localStorage.plexToken && localStorage.plexToken !== "") {
         $('#plexToken').val(localStorage.plexToken);
         validateEnableConnectBtn('plexToken');
+        $('#forgetDivider, #forgetDetailsSection').show();
     }
 });
 
@@ -68,7 +70,10 @@ function validateEnableConnectBtn(context) {
 function forgetDetails() {
     localStorage.removeItem('plexUrl');
     localStorage.removeItem('plexToken');
-    $('#confirmForget').fadeIn(250).delay(750).fadeOut(1250);
+    $('#plexUrl, #plexToken').val('').removeClass('is-valid is-invalid');
+    $('#confirmForget').fadeIn(250).delay(750).fadeOut(1250, () => {
+        $('#forgetDivider, #forgetDetailsSection').hide();
+    });
 }
 
 function connectToPlex() {
@@ -79,11 +84,6 @@ function connectToPlex() {
         plexUrl = `http://${plexUrl}`
     }
 
-    if ($('#rememberDetails').prop('checked')) {
-        localStorage.plexUrl = plexUrl;
-        localStorage.plexToken = plexToken;
-    }
-
     $.ajax({
         "url": `${plexUrl}/library/sections/`,
         "method": "GET",
@@ -93,6 +93,11 @@ function connectToPlex() {
         },
         "success": (data) => {
             $("#authWarningText").empty();
+            if ($('#rememberDetails').prop('checked')) {
+                localStorage.plexUrl = plexUrl;
+                localStorage.plexToken = plexToken;
+                $('#forgetDivider, #forgetDetailsSection').show();
+            }
             displayLibraries(data)
         },
         "error": (data) => {