Add Plex token check and error message to settings page

data/interfaces/default/css/tautulli.css

@@ -3223,7 +3223,7 @@ div.dataTables_info {
 #libraries-to-purge > li {
     color: #e9a049;
 }
-#updatebar {
+#updatebar, #token_error_bar  {
     background-color: #444;
     opacity: 0.95;
     color: #999999;
@@ -3238,32 +3238,35 @@ div.dataTables_info {
     z-index: 9999;
     display: block;
 }
-#updatebar .msg {
+#updatebar .msg, #token_error_bar .msg {
     line-height: normal;
     padding-left: 20px;
 }
-#updatebar .loader {
+#updatebar .loader, #token_error_bar .loader {
     position: relative;
     top: 2px;
 }
-#updatebar.success {
+#updatebar.success, #token_error_bar.success {
     padding: 15px 10px;
     text-align: left;
 }
-#updatebar.error {
+#updatebar.error, #token_error_bar.error {
     padding: 15px 10px;
     text-align: left;
 }
-#updatebar .ui-icon {
+#updatebar .ui-icon, #token_error_bar .ui-icon {
     display: inline-block;
     margin-left: -20px;
     top: 2px;
     position: relative;
     margin-right: 3px;
 }
-#updatebar a:hover {
+#updatebar a:hover, #token_error_bar a:hover {
     color: #e9a049;
 }
+#token_error_bar {
+    background-color: rgba(255,0,0,0.5) !important;
+}
 .body-container {
     position: absolute;
     top: 50px;

data/interfaces/default/js/script.js

@@ -71,8 +71,9 @@ function refreshTab() {
 function showMsg(msg, loader, timeout, ms, error) {
     var feedback = $("#ajaxMsg");
     var update = $("#updatebar");
-    if (update.is(":visible")) {
-        var height = update.height() + 35;
+    var token_error = $("#token_error_bar");
+    if (update.is(":visible") || token_error.is(":visible")) {
+        var height = (update.is(":visible") ? update.height() : 0) + (token_error.is(":visible") ? token_error.height() : 0) + 35;
         feedback.css("bottom", height + "px");
     } else {
         feedback.removeAttr("style");
@@ -131,8 +132,9 @@ function doAjaxCall(url, elem, reload, form, showMsg, callback) {
     // Set Message
     var feedback = (showMsg) ? $("#ajaxMsg") : $();
     var update = $("#updatebar");
-    if (update.is(":visible")) {
-        var height = update.height() + 35;
+    var token_error = $("#token_error_bar");
+    if (update.is(":visible") || token_error.is(":visible")) {
+        var height = (update.is(":visible") ? update.height() : 0) + (token_error.is(":visible") ? token_error.height() : 0) + 35;
         feedback.css("bottom", height + "px");
     } else {
         feedback.removeAttr("style");

data/interfaces/default/settings.html

@@ -1558,6 +1558,10 @@
         </div>
     </div>
 </div>
+<div id="token_error_bar" style="display: none;">
+    <i class="fa fa-exclamation-triangle"></i> Your Plex.tv token is no longer valid.<br>
+    Please <a data-tab-destination="plex_media_server" data-target="pms_token">fetch a new token</a>.
+</div>
 </%def>
 
 <%def name="modalIncludes()">
@@ -2648,12 +2652,28 @@ $(document).ready(function() {
         window.open(pms_web_url, '_blank');
     });
 
+    $.ajax({
+        url: "https://plex.tv/api/resources",
+        type: 'GET',
+        dataType: 'json',
+        beforeSend: function (xhr) {
+            xhr.setRequestHeader('X-Plex-Token', $('#pms_token').val());
+        },
+        statusCode: {
+            401: function (xhr, status) {
+                $("#updatebar").hide();
+                $("#token_error_bar").show();
+            }
+        }
+    });
+
     function OAuthPreFunction() {
         $("#token_verify").html('<i class="fa fa-refresh fa-spin"></i>').fadeIn('fast');
     }
     function OAuthSuccessCallback(authToken) {
         $("#pms_token").val(authToken);
         $("#token_verify").html('<i class="fa fa-check"></i>').fadeIn('fast');
+        $('#token_error_bar').hide();
         getServerOptions(authToken);
     }
     function OAuthErrorCallback() {