first pass - works without PIN

3 files changed, 108 insertions, 3 deletions

diff --git a/css/main.css b/css/main.css
index 007c02a..1594543 100644
--- a/css/main.css
+++ b/css/main.css
@@ -334,6 +334,14 @@ table, td, tr, th {
     background-color: transparent;
 }
 
+#userTableContainer {
+    display: none;
+}
+
+#userTable tbody tr {
+    cursor: pointer;
+}
+
 #serverTable tbody tr {
     cursor: pointer;
 }
diff --git a/index.html b/index.html
index 651a698..2fccbc5 100644
--- a/index.html
+++ b/index.html
@@ -292,7 +292,25 @@
                         </div>
                         <!-- / PLEX LOGIN FORM -->
 
-                        
+                        <!-- USER ACCOUNTS TABLE -->
+                        <div id="userTableContainer" class="row mt-4">
+                            <div class="col">
+                                <h3>Managed Accounts</h3>
+                                <div class="table-responsive">
+                                    <table id="userTable" class="table table-hover mt-3">
+                                        <thead>
+                                            <tr>
+                                                <th scope="col">Name</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- / SERVERS TABLE -->
 
                         <!-- SERVERS TABLE -->
                         <div id="serverTableContainer" class="row mt-4">
diff --git a/js/main.js b/js/main.js
index cb23a7f..7ddf1cf 100644
--- a/js/main.js
+++ b/js/main.js
@@ -191,7 +191,7 @@ function checkIfAuthTokenIsValid() {
             $('#new-pin-container').hide();
             $('#authed-pin-container').show();
             $('#loggedInAs').text(data.username);
-            getServers();
+            getUserAccounts();
         },
         "error": (data) => {
             if (data.status == 401) {
@@ -309,12 +309,92 @@ function useLocalAddress (checkbox) {
     window.location.reload();
 }
 
+function getUserAccounts() {
+    // Get managed accounts
+    $.ajax({
+        "url": `https://plex.tv/api/v2/home/users`,
+        "method": "GET",
+        "headers": {
+            "X-Plex-Client-Identifier": clientIdentifier,
+            "X-Plex-Token": plexToken,
+            "accept": "application/json"
+    },
+        "success": (data) => {
+            if (data.users.length == 0) {
+                getServers();
+            } else {
+                let userAccounts = [];
+                for (let i = 0; i < data.users.length; i++) {
+                    userAccounts.push(data.users[i]);
+                }
+                // Populate and show the users table
+                displayUserAccounts(userAccounts);
+            }
+        },
+        "error": (error) => {
+            console.log(error);
+        }
+    });
+}
+
+function displayUserAccounts(users) {
+    $("#userTable tbody").empty();
+    $("#serverTable tbody").empty();
+    $("#libraryTable tbody").empty();
+    $("#tvShowsTable tbody").empty();
+    $("#seasonsTable tbody").empty();
+    $("#episodesTable tbody").empty();
+    $("#audioTable tbody").empty();
+    $("#subtitleTable tbody").empty();
+
+    for (let i = 0; i < users.length; i++) {
+        let rowHTML = `<tr onclick="switchUser('${users[i].uuid}', this)">
+                        <td>${users[i].title}</td>
+                    </tr>`;
+        $("#userTable tbody").append(rowHTML);
+    }
+
+    $('#userTableContainer').show();
+}
+
+function switchUser(userId, row) {
+    $("#serverTable tbody").empty();
+    $("#libraryTable tbody").empty();
+    $("#tvShowsTable tbody").empty();
+    $("#seasonsTable tbody").empty();
+    $("#episodesTable tbody").empty();
+    $("#audioTable tbody").empty();
+    $("#subtitleTable tbody").empty();
+
+    $(row).siblings().removeClass("table-active");
+    $(row).addClass("table-active");
+
+    $.ajax({
+        "url": `https://plex.tv/api/v2/home/users/${userId}/switch`,
+        "method": "POST",
+        "headers": {
+            "X-Plex-Client-Identifier": clientIdentifier,
+            "X-Plex-Token": plexToken,
+            "accept": "application/json"
+    },
+        "success": (data) => {
+            // Change the plex token to the auth token of the chosen user
+            plexToken = data.authToken;
+            getServers();
+        },
+        "error": (error) => {
+            console.log(error);
+        }
+    });
+}
+
 function getServers () {
     // Choose whether or not to include https connections
     let includeHttps = 1;
     if (location.protocol == 'http:') {
         includeHttps = 0;
     }
+
     // Get the servers for this user
     $.ajax({
         "url": `https://plex.tv/api/v2/resources?includeHttps=${includeHttps}&includeRelay=0`,
@@ -388,7 +468,6 @@ function displayServers(servers) {
                     </tr>`;
         $("#serverTable tbody").append(rowHTML);
     }
-    $("#serverTableContainer").show();
 }
 
 async function chooseServer(number, row) {