From e7072edbd1c9229c2d7da4c5c2f3ea514d39ac8c Mon Sep 17 00:00:00 2001 From: JonnyWong16 Date: Mon, 2 Jul 2018 12:04:12 -0700 Subject: [PATCH] Add OAuth to setup wizard --- data/interfaces/default/css/tautulli.css | 3 + data/interfaces/default/welcome.html | 224 ++++++++++++++--------- 2 files changed, 136 insertions(+), 91 deletions(-) diff --git a/data/interfaces/default/css/tautulli.css b/data/interfaces/default/css/tautulli.css index 419070d8..bde8a7ac 100644 --- a/data/interfaces/default/css/tautulli.css +++ b/data/interfaces/default/css/tautulli.css @@ -101,6 +101,9 @@ select.form-control { overflow: hidden; text-overflow: ellipsis; } +.wizard-input-section p.welcome-message { + margin: 20px 0; +} .wizard-input-section .selectize-control.form-control.selectize-pms-ip .selectize-input > div { max-width: 360px; overflow: hidden; diff --git a/data/interfaces/default/welcome.html b/data/interfaces/default/welcome.html index e83ee700..67b753d3 100644 --- a/data/interfaces/default/welcome.html +++ b/data/interfaces/default/welcome.html @@ -55,42 +55,36 @@ PlexPy

Welcome!

-
-
- Thanks for taking the time to try out Tautulli. Hope you find it useful. -

- Tautulli requires a permanent internet connection to ensure a reliable experience. -

- This wizard will help you get set up, to continue press Next. +
+

+ Thanks for taking the time to try out Tautulli. Hope you find it useful. +

+

+ Tautulli requires a permanent internet connection to ensure a reliable experience. +

+

+ This wizard will help you get set up, to continue press Next. +

Plex Authentication

-

Enter your Plex.tv username and password. Tautulli does not store your username or password.

- -
-
- -
-
+

+ Tautulli requires a Plex.tv account. Click the button below to sign in on Plex.tv. You may need to allow popups in your browser. +

-
- -
-
- -
-
-
- - Authenticate + + Sign In with Plex +

Plex Media Server

-

- Select your Plex Media Server from the dropdown menu or enter an IP address or hostname. -

+
+

+ Select your Plex Media Server from the dropdown menu or enter an IP address or hostname. +

+
@@ -128,13 +122,17 @@ - Verify + Verify +

Activity Logging

-

Tautulli will keep a history of all streaming activity on your Plex server.

- +
+

+ Tautulli will keep a history of all streaming activity on your Plex server. +

+
@@ -145,29 +143,38 @@

The interval (in seconds) an item must be in a playing state before logging it. 0 to disable.

- -

- Additional options to disable history logging for certain libraries or users can be found by editing them - on the Libraries or Users pages. -

+
+

+ Additional options to disable history logging for certain libraries or users can be found by editing them + on the Libraries or Users pages. +

+

Notifications

-

Tautulli can send a wide variety of notifications to alert you of activity on your Plex server.

-

- To set up a notification agent, navigate to the Settings page - and to the Notification Agents tab after you have completed this setup wizard. -

+
+

+ Tautulli can send a wide variety of notifications to alert you of activity on your Plex server. +

+

+ To set up a notification agent, navigate to the Settings page + and to the Notification Agents tab after you have completed this setup wizard. +

+

Database Import

-

If you have an existing PlexWatch/Plexivity database, you can import the data into Tautulli.

-

- To import a database, navigate to the Settings page - and to the Import & Backups tab after you have completed this setup wizard. -

+
+

+ If you have an existing PlexWatch/Plexivity database, you can import the data into Tautulli. +

+

+ To import a database, navigate to the Settings page + and to the Import & Backups tab after you have completed this setup wizard. +

+
@@ -356,7 +363,7 @@ $(document).ready(function() { var is_cloud = $(pms_ip_selected).data('is_cloud'); $("#pms_valid").val(identifier !== 'undefined' ? 'valid' : ''); - $("#pms-verify-status").html(identifier !== 'undefined' ? ' Server found!' : '').fadeIn('fast'); + $("#pms-verify-status").html(identifier !== 'undefined' ? '  Server found!' : '').fadeIn('fast'); $("#pms_identifier").val(identifier !== 'undefined' ? identifier : ''); $('#pms_port').val(port !== 'undefined' ? port : 32400); @@ -414,7 +421,7 @@ $(document).ready(function() { var pms_ssl = $("#pms_ssl").val(); var pms_is_remote = $("#pms_is_remote").val(); if ((pms_ip !== '') || (pms_port !== '')) { - $("#pms-verify-status").html(' Validating server...'); + $("#pms-verify-status").html('  Validating server...'); $('#pms-verify-status').fadeIn('fast'); $.ajax({ url: 'get_server_id', @@ -429,7 +436,7 @@ $(document).ready(function() { async: true, timeout: 5000, error: function (jqXHR, textStatus, errorThrown) { - $("#pms-verify-status").html(' This is not a Plex Server!'); + $("#pms-verify-status").html('  This is not a Plex Server!'); $('#pms-verify-status').fadeIn('fast'); }, success: function(xhr, status) { @@ -437,18 +444,18 @@ $(document).ready(function() { var identifier = result.identifier; if (identifier) { $("#pms_identifier").val(identifier); - $("#pms-verify-status").html(' Server found!'); + $("#pms-verify-status").html('  Server found!'); $('#pms-verify-status').fadeIn('fast'); pms_verified = true; $("#pms_valid").val("valid"); } else { - $("#pms-verify-status").html(' This is not a Plex Server!'); + $("#pms-verify-status").html('  This is not a Plex Server!'); $('#pms-verify-status').fadeIn('fast'); } } }); } else { - $("#pms-verify-status").html(' Please enter both fields.'); + $("#pms-verify-status").html('  Please enter both fields.'); $('#pms-verify-status').fadeIn('fast'); } } @@ -460,47 +467,82 @@ $(document).ready(function() { $("#pms-verify-status").html(""); }); - $( ".pms-auth" ).change(function() { - authenticated = false; - $("#pms_token").val(""); - $("#pms-token-status").html(""); - }); + const x_plex_headers = { + 'Accept': 'application/json', + 'X-Plex-Product': '${plexpy.common.PRODUCT}', + 'X-Plex-Version': '${plexpy.common.RELEASE}', + 'X-Plex-Client-Identifier': '${plexpy.CONFIG.PMS_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}' + }; - // Plex.tv auth token fetch - $("#pms-authenticate").click(function() { - $("#pms-token-status").html(' Fetching token...'); - $('#pms-token-status').fadeIn('fast'); - var pms_username = $("#pms_username").val().trim(); - var pms_password = $("#pms_password").val().trim(); - if ((pms_username !== '') && (pms_password !== '')) { - $.ajax({ - type: 'GET', - url: 'get_plexpy_pms_token', - data: { - username: pms_username, - password: pms_password - }, - 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(' ' + msg); - $('#pms-token-status').fadeIn('fast'); - $("#pms_token").val(authToken); - authenticated = true; - getServerOptions(authToken) - } else { - $("#pms-token-status").html(' ' + msg); - } - } - }); - } else { - $("#pms-token-status").html(' Username and password required.'); - $('#pms-token-status').fadeIn('fast'); - } + 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() { + $("#pms_token").val(''); + $("#pms-token-status").html('  Waiting for authentication...').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-token-status").html('  Authentication successful.').fadeIn('fast'); + authenticated = true; + getServerOptions(authToken) + } + }, + error: function () { + keep_polling = false; + $("#pms-token-status").html('  Error communicating with Plex.tv.').fadeIn('fast'); + }, + complete: function () { + if (keep_polling){ + poll(); + } else { + clearTimeout(polling); + } + }, + timeout: 1000 + }); + }, 1000); + })(); + }, function () { + $("#pms-token-status").html('  Error communicating with Plex.tv.').fadeIn('fast'); + }); }); });