Merge pull request #27 from cglatot/proper-authentication-method1.5.0

Implement proper Plex login method

3 files changed, 127 insertions, 107 deletions

diff --git a/css/main.css b/css/main.css
index aeffe1c..582e92c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -70,6 +70,14 @@ label, p {
     display: none;
 }
 
+#new-pin-container {
+    display: none;
+}
+
+#waitOnPinAuth {
+    display: none;
+}
+
 /*==========================
         MODALS
 ==========================*/
diff --git a/index.html b/index.html
index 2c3c2f5..7af4bf6 100644
--- a/index.html
+++ b/index.html
@@ -196,7 +196,7 @@
                                         <div id="pinOrAuthBtns" class="btn-group btn-group-toggle" data-toggle="buttons">
                                             <label class="btn btn-secondary active">
                                                 <input type="radio" name="pinOrAuth" value="showPinControls" id="showPinControls" autocomplete="off"
-                                                    checked> PIN Authentication
+                                                    checked> Plex Login
                                             </label>
                                             <label class="btn btn-secondary">
                                                 <input type="radio" name="pinOrAuth" value="showUrlControls" id="showUrlControls" autocomplete="off">
@@ -216,19 +216,16 @@
                                     </button>
                                 </div>
                                 <!-- / WARNING BOX -->
-                                <!-- PIN AUTHENTICATION -->
-                                <div id="pin-auth-over-container" class="mt-4">
-                                    <div id="new-pin-container">
-                                        <p>Please go to <a href="https://www.plex.tv/pin" target="_blank">https://www.plex.tv/pin</a> and enter the following PIN:</p>
-                                        <div class="d-inline-flex flex-row align-items-center">
-                                            <h1 id="pin-code-holder"></h1>
-                                            <div class="spinner-border spinner-border-sm text-warning ml-2" role="status" aria-hidden="true"></div>
-                                        </div>
+                                <!-- PLEX AUTHENTICATION -->
+                                <div id="pin-auth-over-container" class="row mt-4">
+                                    <div id="new-pin-container" class="col pl-5 pr-5">
+                                        <button id="loginWithPlexBtn" type="button" class="btn btn-secondary btn-lg btn-block" onclick="authenticateWithPlex()">Login with Plex</button>
+                                        <div id="waitOnPinAuth" class="spinner-border spinner-border-lg text-warning" role="status" aria-hidden="true"></div>
                                     </div>
                                     <div id="authed-pin-container">
-                                        <p>You are authenticated via PIN. 
+                                        <p>You are logged in as: <strong id="loggedInAs"></strong> 
                                             <small id="forgetPinDetails">
-                                                <a href="javascript:void(0)" onclick="forgetPinDetails()">Click here to logout.</a>
+                                                <a href="javascript:void(0)" class="ml-2" onclick="forgetPinDetails()">Click here to logout.</a>
                                                 <i id="confirmForgetPin" class="fas fa-check" style="color: #28a745; font-size: 1.5em"></i>
                                             </small>
                                         </p>
@@ -244,7 +241,7 @@
                                     </div>
                                     
                                 </div>
-                                <!-- / PIN AUTHENTICATION -->
+                                <!-- / PLEX AUTHENTICATION -->
                                 <!-- URL / TOKEN AUTHENTICATION -->
                                 <div id="url-auth-over-container" class="mt-4">
                                     <div class="form-group">
@@ -320,7 +317,6 @@
                         <div class="row mt-4">
                             <div class="col">
                                 <h3>Plex Libraries</h3>
-                                <small>Choose <strong>only</strong> episodic content (TV Shows, Anime, etc). This does not work for Movies.</small>
                                 <div class="table-responsive">
                                     <table id="libraryTable" class="table table-hover mt-3">
                                         <thead>
@@ -489,7 +485,7 @@
                         <!-- MOVIE NAME -->
                         <div id="movieNamePlaceholder" class="row mt-4">
                             <div class="col">
-                                <h2>Baby Driver</h2>
+                                <h2></h2>
                             </div>
                         </div>
                         <!-- / MOVIE NAME -->
diff --git a/js/main.js b/js/main.js
index 7d15050..2e741ea 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,7 +1,7 @@
 // Variables for the Authorised Devices card
 var clientIdentifier; // UID for the device being used
 var plexProduct = "PASTA"; // X-Plex-Product - Application name
-var pastaVersion = "1.4.1"; // X-Plex-Version - Application version
+var pastaVersion = "1.5.0"; // X-Plex-Version - Application version
 var pastaPlatform; // X-Plex-Platform - Web Browser
 var pastaPlatformVersion; // X-Plex-Platform-Version - Web Browser version
 var deviceInfo; // X-Plex-Device - Operation system?
@@ -28,31 +28,25 @@ $(document).ready(() => {
 
     // Enable Tooltips
     $('.helpButtons, #titleLogo').tooltip();
-
     // Enable history tracking for tabs
     $('a[data-toggle="tab"]').historyTabs();
 
     // Check if the page was loaded locally or over http and warn them about the value of https
     if ((location.protocol == "http:") || (location.protocol == "file:")) {
-        if (localStorage.showHttpAlert == 'false') {
-
-        }
+        if (localStorage.showHttpAlert == 'false') {}
         else {
             $("#insecureWarning").show();
         }
     }
 
     // Check if they have permanently dismissed the Login Info alert
-    if (localStorage.showLoginInfoAlert == 'false') {
-        console.log("infoalert is false");
-    }
+    if (localStorage.showLoginInfoAlert == 'false') {}
     else {
         $("#loginInfoAlert").show();
     }
 
     // Override the close mechanism to not show the loginInfoAlert
     $("#loginInfoAlertClose").on("click", () => {
-        console.log('Entered the click for close');
         hideLoginInfoAlertForever();
     });
 
@@ -60,7 +54,7 @@ $(document).ready(() => {
     try {
         let browserInfo = getBrowser();
         // Set the clientID, this might get overridden if one is saved to localstorage
-        clientIdentifier = `PASTA-cglatot-${Date.now()}-${Math.round(Math.random() * 1000)}`;
+        clientIdentifier = localStorage.clientIdentifier || `PASTA-cglatot-${Date.now()}-${Math.round(Math.random() * 1000)}`;
         // Set the OS
         deviceInfo = browserInfo.os || "";
         // Set the web browser and version
@@ -72,7 +66,7 @@ $(document).ready(() => {
         console.log(e);
         // Fallback values
         // Set the clientID, this might get overridden if one is saved to localstorage
-        clientIdentifier = `PASTA-cglatot-${Date.now()}-${Math.round(Math.random() * 1000)}`;
+        clientIdentifier = localStorage.clientIdentifier || `PASTA-cglatot-${Date.now()}-${Math.round(Math.random() * 1000)}`;
         // Set the OS
         deviceInfo = "";
         // Set the web browser and version
@@ -86,7 +80,6 @@ $(document).ready(() => {
     $('#plexUrl').on("input", () => {
         validateEnableConnectBtn('plexUrl');
     });
-
     // Validation listeners on the Plex Token Input
     $('#plexToken').on("input", () => {
         validateEnableConnectBtn('plexToken');
@@ -97,47 +90,117 @@ $(document).ready(() => {
         toggleAuthPages(this.value);
     });
 
+    // Check whether they want to connect using a local IP or not
     if (localStorage.useLocalAddress == "true") {
         $('#connectViaLocalAddress').prop('checked', true);
     } else {
         $('#connectViaLocalAddress').prop('checked', false);
     }
 
-    if (!localStorage.isPinAuth) {
-        // Not using PIN auth, so must be using url / token
-        if (localStorage.plexUrl && localStorage.plexUrl !== "") {
-            plexUrl = localStorage.plexUrl;
-            $('#plexUrl').val(localStorage.plexUrl);
-            validateEnableConnectBtn('plexUrl');
-            $('#forgetDivider, #forgetDetailsSection').show();
+    // Check if there is a stored Auth Token
+    if (localStorage.pinAuthToken) {
+        checkIfAuthTokenIsValid();
+    } else {
+        $('#new-pin-container').show();
+    }
+});
+
+// Checks if the generated token is valid
+function checkIfAuthTokenIsValid() {
+    $.ajax({
+        "url": `https://plex.tv/api/v2/user`,
+        "headers": {
+            "accept": "application/json",
+            "X-Plex-Client-Identifier": clientIdentifier,
+            "X-Plex-Token": localStorage.pinAuthToken,
+            "X-Plex-Product": plexProduct,
+            "X-Plex-Version": pastaVersion,
+            "X-Plex-Platform": pastaPlatform,
+            "X-Plex-Platform-Version": pastaPlatformVersion,
+            "X-Plex-Device": deviceInfo,
+            "X-Plex-Device-Name": deviceName
+        },
+        "method": "GET",
+        "success": (data) => {
+            console.log(data);
+            plexToken = localStorage.pinAuthToken;
+            $('#new-pin-container').hide();
+            $('#authed-pin-container').show();
+            $('#loggedInAs').text(data.username);
+            getServers();
+        },
+        "error": (data, statusText, xhr) => {
+            console.log("ERROR L121");
+            console.log(data.status);
+            if (data.status == 401) {
+                // Auth Token has expired
+                localStorage.removeItem('isPinAuth');
+                localStorage.removeItem('pinAuthToken');
+                localStorage.removeItem('useLocalAddress');
+                $('#new-pin-container').show();
+            }
         }
-        if (localStorage.plexToken && localStorage.plexToken !== "") {
-            plexToken = localStorage.plexToken;
-            $('#plexToken').val(localStorage.plexToken);
-            validateEnableConnectBtn('plexToken');
-            $('#forgetDivider, #forgetDetailsSection').show();
+    });
+}
+
+function authenticateWithPlex() {
+    // Generate a PIN code to get the URL
+    $.ajax({
+        "url": `https://plex.tv/api/v2/pins`,
+        "headers": {
+            "accept": "application/json",
+            "strong": "true",
+            "X-Plex-Client-Identifier": clientIdentifier,
+            "X-Plex-Product": plexProduct,
+            "X-Plex-Version": pastaVersion,
+            "X-Plex-Platform": pastaPlatform,
+            "X-Plex-Platform-Version": pastaPlatformVersion,
+            "X-Plex-Device": deviceInfo,
+            "X-Plex-Device-Name": deviceName
+        },
+        "method": "POST",
+        "success": (data) => {
+            // For some reason auth doesn't work unless you choose Plex Web as the product id
+            let plexProductTemp = encodeURIComponent("Plex Web");
+            let authAppUrl = `https://app.plex.tv/auth#?clientID=${clientIdentifier}&code=${data.code}&context%5Bdevice%5D%5Bproduct%5D=${plexProductTemp}`;
+
+            $('#waitOnPinAuth').show();
+            $('#loginWithPlexBtn').hide();
+            window.open(authAppUrl, 'PlexSignIn', 'width=800,height=730');
+            backOffTimer = Date.now();
+            listenForValidPincode(data.id, clientIdentifier, data.code);
+        },
+        "error": (data) => {
+            console.log("ERROR L121");
+            console.log(data);
         }
+    });
+}
 
-        // Display a PIN code for that authentication as well
+function listenForValidPincode(pinId, clientId, pinCode) {
+    let currentTime = Date.now();
+    if ((currentTime - backOffTimer)/1000 < 10) {
         $.ajax({
-            "url": `https://plex.tv/pins.xml`,
+            "url": `https://plex.tv/api/v2/pins/${pinId}`,
             "headers": {
-                "X-Plex-Client-Identifier": clientIdentifier,
-                "X-Plex-Product": plexProduct,
-                "X-Plex-Version": pastaVersion,
-                "X-Plex-Platform": pastaPlatform,
-                "X-Plex-Platform-Version": pastaPlatformVersion,
-                "X-Plex-Device": deviceInfo,
-                "X-Plex-Device-Name": deviceName
+                "accept": "application/json",
+                "code": pinCode,
+                "X-Plex-Client-Identifier": clientId,
             },
-            "method": "POST",
+            "method": "GET",
             "success": (data) => {
-                let pinId = $(data).find('id')[0].innerHTML;
-                let pinCode = $(data).find('code')[0].innerHTML;
-    
-                $('#pin-code-holder').html(pinCode);
-                backOffTimer = Date.now();
-                listenForValidPincode(pinId);
+                if (data.authToken != null) {
+                    $('#waitOnPinAuth').hide();
+                    localStorage.clientIdentifier = clientIdentifier;
+                    localStorage.isPinAuth = true;
+                    localStorage.pinAuthToken = data.authToken;
+                    plexToken = data.authToken;
+                    checkIfAuthTokenIsValid();
+                } else {
+                    setTimeout(() => {
+                        listenForValidPincode(pinId, clientId, pinCode);
+                    }, 3000); // Check every 3 seconds
+                }
             },
             "error": (data) => {
                 console.log("ERROR L121");
@@ -145,15 +208,12 @@ $(document).ready(() => {
             }
         });
     } else {
-        $('#new-pin-container').hide();
-        $('#authed-pin-container').show();
-        // We are using Pin Auth
-        clientIdentifier = localStorage.clientIdentifier;
-        plexToken = localStorage.pinAuthToken;
-        getServers();
+        $('#new-pin-container').html(' <p><i class="far fa-times-circle mr-2" style="color: #e5a00d; font-size: 1.5em; vertical-align: middle;"></i>Login timed out. \
+        Please <a href="javascript:void(0)" onclick="window.location.reload()">refresh the page</a> and ensure your popup blocker is disabled.</p>');
     }
-});
+}
 
+// Toggle between the authentication methods
 function toggleAuthPages(value) {
     if (value == 'showPinControls') {
         $('#pin-auth-over-container').show();
@@ -164,7 +224,7 @@ function toggleAuthPages(value) {
 
         if (localStorage.isPinAuth) {
             $("#authWarningText").html(`<div class="alert alert-warning alert-dismissible fade show mt-3" role="alert">
-                        <strong>Warning:</strong> You are currently signed in via PIN. Please <a href="javascript:void(0)" onclick="forgetPinDetails()">sign out of PIN</a> before proceeding to connect using a URL / IP address.
+                        <strong>Warning:</strong> You are currently signed in via Plex. Please <a href="javascript:void(0)" onclick="forgetPinDetails()">sign out of Plex</a> before proceeding to connect using a URL / IP address.
                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                             <span aria-hidden="true">&times;</span>
                         </button>
@@ -173,56 +233,13 @@ function toggleAuthPages(value) {
     }
 }
 
-function listenForValidPincode (pinId) {
-    let currentTime = Date.now();
-    if ((currentTime - backOffTimer)/1000 < 180) {
-        $.ajax({
-            "url": `https://plex.tv/pins/${pinId}`,
-            "headers": {
-                "X-Plex-Client-Identifier": clientIdentifier,
-                "X-Plex-Product": plexProduct,
-                "X-Plex-Version": pastaVersion,
-                "X-Plex-Platform": pastaPlatform,
-                "X-Plex-Platform-Version": pastaPlatformVersion,
-                "X-Plex-Device": deviceInfo,
-                "X-Plex-Device-Name": deviceName
-            },
-            "method": "GET",
-            "success": (data) => {
-                if (data.pin.auth_token != null) {
-                    plexToken = data.pin.auth_token;
-                    // Save to local storage
-                    localStorage.isPinAuth = true;
-                    localStorage.pinAuthToken = plexToken;
-                    localStorage.clientIdentifier = clientIdentifier;
-                    $('#new-pin-container').hide();
-                    $('#authed-pin-container').show();
-                    getServers();
-                } else {
-                    setTimeout(() => {
-                        listenForValidPincode(pinId);
-                    }, 5000);
-                }
-            },
-            "error": (data) => {
-                console.log("ERROR L186");
-                console.log(data);
-                return;
-            }
-        });
-    } else {
-        $('#new-pin-container').html(' <p><i class="far fa-times-circle mr-2" style="color: #e5a00d; font-size: 1.5em; vertical-align: middle;"></i>PIN entry timed out. \
-        Please <a href="javascript:void(0)" onclick="window.location.reload()">refresh the page</a> to get a new PIN.</p>');
-    }
-}
-
 // Called when the "connect using local IP" checkbox is toggled
 // Refreshes the page and updates the variable for whether it should use the local address or not
 function useLocalAddress (checkbox) {
     if (checkbox.checked) {
         localStorage.useLocalAddress = "true";
     } else {
-        localStorage.useLocalAddress = "false";
+        localStorage.removeItem('useLocalAddress');
     }
     window.location.reload();
 }
@@ -358,7 +375,6 @@ function forgetDetails() {
 function forgetPinDetails() {
     localStorage.removeItem('isPinAuth');
     localStorage.removeItem('pinAuthToken');
-    localStorage.removeItem('clientIdentifier');
     localStorage.removeItem('useLocalAddress');
     window.location.reload();
 }