From 5c7a3a12e9f0913bb4b0f7481680a14bb634251f Mon Sep 17 00:00:00 2001
From: JonnyWong16 <JonnyWong16@users.noreply.github.com>
Date: Mon, 2 Jul 2018 12:28:34 -0700
Subject: [PATCH] Add OAuth to token refresh in settings

---
 data/interfaces/default/settings.html | 158 +++++++++++++-------------
 1 file changed, 79 insertions(+), 79 deletions(-)

diff --git a/data/interfaces/default/settings.html b/data/interfaces/default/settings.html
index f09187f3..25fa25ba 100644
--- a/data/interfaces/default/settings.html
+++ b/data/interfaces/default/settings.html
@@ -842,21 +842,23 @@
                             <h3>Plex.tv Authentication</h3>
                         </div>
 
-                        <div class="form-group">
+                        <div class="form-group has-feedback">
                             <label for="pms_token">Plex.tv Account Token</label>
                             <div class="row">
                                 <div class="col-md-6">
                                     <div class="input-group">
                                         <input type="text" class="form-control" id="pms_token" name="pms_token" value="${config['pms_token']}" data-parsley-trigger="change" data-parsley-errors-container="#pms_token_error" required>
                                         <span class="input-group-btn">
-                                            <button class="btn btn-form" type="button" data-toggle="modal" data-target="#pms-auth-modal">Fetch Token</button>
+                                            <button id="sign-in-plex" class="btn btn-form" type="button">Fetch Token</button>
                                         </span>
                                     </div>
+                                    <span class="form-control-feedback" id="token_verify" aria-hidden="true" style="right: 80px;"></span>
                                 </div>
                                 <div id="pms_token_error" class="alert alert-danger settings-alert" role="alert"></div>
                             </div>
                             <p class="help-block">Token for Plex.tv authentication.</p>
                         </div>
+                        <input type="hidden" id="pms_uuid" name="pms_uuid" value="${config['pms_uuid']}">
 
                         <p><input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully"></p>
 
@@ -1366,49 +1368,6 @@
         </div>
     </div>
 </div>
-<div id="pms-auth-modal" class="modal fade" tabindex="-1" role="dialog"
-     aria-labelledby="ip-info-modal">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
-                <h4 class="modal-title">Fetch Plex.tv Token</h4>
-            </div>
-            <div class="modal-body" id="modal-text">
-                <div>
-                    <p class="help-block">
-                        This will attempt to fetch a new Plex.tv token for you. Tautulli does not store your username and password.
-                        Note: This will not work on Internet Explorer 9 or lower.
-                    </p>
-                    <div class="form-group">
-                        <label for="pms_username">Plex.tv Username</label>
-                        <div class="row">
-                            <div class="col-md-6">
-                                <input type="text" class="form-control" id="pms_username" name="pms_username" size="30">
-                            </div>
-                        </div>
-                        <p class="help-block">Username for Plex.tv authentication.</p>
-                    </div>
-                    <div class="form-group">
-                        <label for="pms_password">Plex.tv Password</label>
-                        <div class="row">
-                            <div class="col-md-6">
-                                <input type="password" class="form-control" id="pms_password" name="pms_password" size="30">
-                            </div>
-                        </div>
-                        <p class="help-block">Password for Plex.tv authentication.</p>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <div style="float: left;">
-                    <strong><span id="pms-token-status"></span></strong>
-                </div>
-                <input type="button" id="get-pms-auth-token" class="btn btn-bright" value="Fetch Token">
-            </div>
-        </div>
-    </div>
-</div>
 <div id="app-import-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="app-import-modal"></div>
 <div id="add-notifier-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add-notifier-modal">
     <div class="modal-dialog" role="document">
@@ -2296,40 +2255,81 @@ $(document).ready(function() {
         window.open(pms_web_url, '_blank');
     });
 
-    // Plex.tv auth token fetch
-    $("#get-pms-auth-token").click(function() {
-        $("#pms-token-status").html('<i class="fa fa-refresh fa-spin"></i> Fetching token...');
-        var pms_username = $.trim($("#pms_username").val());
-        var pms_password = $.trim($("#pms_password").val());
-        if ((pms_username !== '') && (pms_password !== '')) {
-            $.ajax({
-                type: 'GET',
-                url: 'get_plexpy_pms_token',
-                data: {
-                    username: pms_username,
-                    password: pms_password,
-                    force: true
-                },
-                cache: false,
-                async: true,
-                complete: function(xhr, status) {
-                    var result = $.parseJSON(xhr.responseText);
-                    var msg = result.message;
-                    if (result.result == 'success') {
-                        var authToken = result.token;
-                        $("#pms-token-status").html('<i class="fa fa-check"></i> ' + msg);
-                        $("#pms_token").val(authToken);
-                        $('#pms-auth-modal').modal('hide');
-                        getServerOptions(authToken);
-                    } else {
-                        $("#pms-token-status").html('<i class="fa fa-exclamation-circle"></i> ' + msg);
-                    }
-                    loadUpdateDistros();
-                }
-            });
-        } else {
-            $("#pms-token-status").html('<i class="fa fa-exclamation-circle"></i> Username and password required.');
-        }
+    const x_plex_headers = {
+        'Accept': 'application/json',
+        'X-Plex-Product': '${plexpy.common.PRODUCT}',
+        'X-Plex-Version': '${plexpy.common.RELEASE}',
+        'X-Plex-Client-Identifier': '${plexpy.generate_uuid()}',
+        'X-Plex-Platform': '${plexpy.common.PLATFORM}',
+        'X-Plex-Platform-Version': '${plexpy.common.PLATFORM_RELEASE}',
+        'X-Plex-Device': '${plexpy.common.PLATFORM} ${plexpy.common.PLATFORM_RELEASE}',
+        'X-Plex-Device-Name': '${plexpy.common.PLATFORM_DEVICE_NAME}'
+    };
+
+    getPlexOAuthPin = function () {
+        var deferred = $.Deferred();
+
+        $.ajax({
+            url: 'https://plex.tv/api/v2/pins?strong=true',
+            type: 'POST',
+            headers: x_plex_headers,
+            success: function(data) {
+                deferred.resolve({pin: data.id, code: data.code});
+            },
+            error: function() {
+                deferred.reject();
+            }
+        });
+        return deferred;
+    };
+
+    var polling = null;
+    $('#sign-in-plex').click(function() {
+        $("#token_verify").html('<i class="fa fa-refresh fa-spin"></i>').fadeIn('fast');
+
+        clearTimeout(polling);
+
+        getPlexOAuthPin().then(function (data) {
+            const pin = data.pin;
+            const code = data.code;
+            var keep_polling = true;
+
+            window.open('https://app.plex.tv/auth/#!?clientID=' + x_plex_headers['X-Plex-Client-Identifier'] + '&code=' + code);
+
+            (function poll() {
+                polling = setTimeout(function () {
+                    $.ajax({
+                        url: 'https://plex.tv/api/v2/pins/' + pin,
+                        type: 'GET',
+                        headers: x_plex_headers,
+                        success: function (data) {
+                            if (data.authToken){
+                                var authToken = data.authToken;
+                                keep_polling = false;
+                                $("#pms_token").val(authToken);
+                                $("#pms_uuid").val(x_plex_headers['X-Plex-Client-Identifier']);
+                                $("#token_verify").html('<i class="fa fa-check"></i>').fadeIn('fast');
+                                getServerOptions(authToken)
+                            }
+                        },
+                        error: function () {
+                            keep_polling = false;
+                            $("#token_verify").html('<i class="fa fa-close"></i>').fadeIn('fast');
+                        },
+                        complete: function () {
+                            if (keep_polling){
+                                poll();
+                            } else {
+                                clearTimeout(polling);
+                            }
+                        },
+                        timeout: 1000
+                    });
+                }, 1000);
+            })();
+        }, function () {
+            $("#token_verify").html('<i class="fa fa-close"></i>').fadeIn('fast');
+        });
     });
 
     // Load database import modal