github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-08 06:00:51 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add OAuth to setup wizard

Browse source
This commit is contained in:
JonnyWong16 2018-07-02 12:04:12 -07:00
parent 2711597ffb
commit e7072edbd1
2 changed files with 136 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

3
data/interfaces/default/css/tautulli.css
View file

@ -101,6 +101,9 @@ select.form-control {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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 { .wizard-input-section .selectize-control.form-control.selectize-pms-ip .selectize-input > div {
max-width: 360px; max-width: 360px;
overflow: hidden; overflow: hidden;

224
data/interfaces/default/welcome.html
View file

@ -55,42 +55,36 @@
<img src="${http_root}images/logo-tautulli-45.png" height="45" alt="PlexPy"> <img src="${http_root}images/logo-tautulli-45.png" height="45" alt="PlexPy">
</div> </div>
<h3 style="line-height: 50px;">Welcome!</h3> <h3 style="line-height: 50px;">Welcome!</h3>
<br /> <div class="wizard-input-section">
<div> <p class="welcome-message">
Thanks for taking the time to try out Tautulli. Hope you find it useful. Thanks for taking the time to try out Tautulli. Hope you find it useful.
<br /><br /> </p>
Tautulli requires a permanent internet connection to ensure a reliable experience. <p class="welcome-message">
<br /><br /> Tautulli requires a permanent internet connection to ensure a reliable experience.
This wizard will help you get set up, to continue press Next. </p>
<p class="welcome-message">
This wizard will help you get set up, to continue press Next.
</p>
</div> </div>
</div> </div>
<div class="wizard-card" data-cardname="card2"> <div class="wizard-card" data-cardname="card2">
<h3>Plex Authentication</h3> <h3>Plex Authentication</h3>
<p class="help-block">Enter your Plex.tv username and password. Tautulli does not store your username or password.</p>
<div class="wizard-input-section"> <div class="wizard-input-section">
<label for="pms_username">Plex.tv Username</label> <p class="help-block">
<div class="row"> 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.
<div class="col-xs-8"> </p>
<input type="text" class="form-control pms-auth" id="pms_username" placeholder="" required>
</div>
</div>
</div> </div>
<div class="wizard-input-section"> <input type="hidden" class="form-control" name="pms_token" id="pms_token" value="" data-validate="validatePMStoken">
<label for="pms_password">Plex.tv Password</label> <a class="btn btn-dark" id="sign-in-plex" href="#" role="button">Sign In with Plex</a>
<div class="row"> <span style="margin-left: 10px; display: none;" id="pms-token-status"></span>
<div class="col-xs-8">
<input type="password" class="form-control pms-auth" id="pms_password" placeholder="" required>
</div>
</div>
</div>
<input type="hidden" class="form-control pms-auth" name="pms_token" id="pms_token" value="" data-validate="validatePMStoken">
<a class="btn btn-dark" id="pms-authenticate" href="#" role="button">Authenticate</a><span style="margin-left: 10px; display: none;" id="pms-token-status"></span>
</div> </div>
<div class="wizard-card" data-cardname="card3"> <div class="wizard-card" data-cardname="card3">
<h3>Plex Media Server</h3> <h3>Plex Media Server</h3>
<p class="help-block"> <div class="wizard-input-section">
Select your Plex Media Server from the dropdown menu or enter an IP address or hostname. <p class="help-block">
</p> Select your Plex Media Server from the dropdown menu or enter an IP address or hostname.
</p>
</div>
<div class="wizard-input-section"> <div class="wizard-input-section">
<label for="pms_ip">Plex IP or Hostname</label> <label for="pms_ip">Plex IP or Hostname</label>
<div class="row"> <div class="row">
@ -128,13 +122,17 @@
<input type="hidden" id="pms_valid" data-validate="validatePMSip" value=""> <input type="hidden" id="pms_valid" data-validate="validatePMSip" value="">
<input type="hidden" id="pms_is_cloud" name="pms_is_cloud" value="${config['pms_is_cloud']}"> <input type="hidden" id="pms_is_cloud" name="pms_is_cloud" value="${config['pms_is_cloud']}">
<input type="hidden" id="pms_identifier" name="pms_identifier" value="${config['pms_identifier']}"> <input type="hidden" id="pms_identifier" name="pms_identifier" value="${config['pms_identifier']}">
<a class="btn btn-dark" id="verify-plex-server" href="#" role="button">Verify</a><span style="margin-left: 10px; display: none;" id="pms-verify-status"></span> <a class="btn btn-dark" id="verify-plex-server" href="#" role="button">Verify</a>
<span style="margin-left: 10px; display: none;" id="pms-verify-status"></span>
</div> </div>
<div class="wizard-card" data-cardname="card4"> <div class="wizard-card" data-cardname="card4">
<h3>Activity Logging</h3> <h3>Activity Logging</h3>
<p class="help-block">Tautulli will keep a history of all streaming activity on your Plex server.</p> <div class="wizard-input-section">
<p class="help-block">
Tautulli will keep a history of all streaming activity on your Plex server.
</p>
</div>
<div class="wizard-input-section"> <div class="wizard-input-section">
<label for="logging_ignore_interval">Ignore Interval</label> <label for="logging_ignore_interval">Ignore Interval</label>
<div class="row"> <div class="row">
@ -145,29 +143,38 @@
</div> </div>
<p class="help-block">The interval (in seconds) an item must be in a playing state before logging it. 0 to disable.</p> <p class="help-block">The interval (in seconds) an item must be in a playing state before logging it. 0 to disable.</p>
</div> </div>
<div class="wizard-input-section">
<p class="help-block"> <p class="help-block">
Additional options to disable history logging for certain libraries or users can be found by editing them Additional options to disable history logging for certain libraries or users can be found by editing them
on the <strong>Libraries</strong> or <strong>Users</strong> pages. on the <strong>Libraries</strong> or <strong>Users</strong> pages.
</p> </p>
</div>
</div> </div>
<div class="wizard-card" data-cardname="card4"> <div class="wizard-card" data-cardname="card4">
<h3>Notifications</h3> <h3>Notifications</h3>
<p class="help-block">Tautulli can send a wide variety of notifications to alert you of activity on your Plex server.</p> <div class="wizard-input-section">
<p class="help-block"> <p class="help-block">
To set up a notification agent, navigate to the <strong>Settings</strong> page Tautulli can send a wide variety of notifications to alert you of activity on your Plex server.
and to the <strong>Notification Agents</strong> tab after you have completed this setup wizard. </p>
</p> <p class="help-block">
To set up a notification agent, navigate to the <strong>Settings</strong> page
and to the <strong>Notification Agents</strong> tab after you have completed this setup wizard.
</p>
</div>
</div> </div>
<div class="wizard-card" data-cardname="card5"> <div class="wizard-card" data-cardname="card5">
<h3>Database Import</h3> <h3>Database Import</h3>
<p class="help-block">If you have an existing PlexWatch/Plexivity database, you can import the data into Tautulli.</p> <div class="wizard-input-section">
<p class="help-block"> <p class="help-block">
To import a database, navigate to the <strong>Settings</strong> page If you have an existing PlexWatch/Plexivity database, you can import the data into Tautulli.
and to the <strong>Import & Backups</strong> tab after you have completed this setup wizard. </p>
</p> <p class="help-block">
To import a database, navigate to the <strong>Settings</strong> page
and to the <strong>Import & Backups</strong> tab after you have completed this setup wizard.
</p>
</div>
<!-- Required fields but hidden --> <!-- Required fields but hidden -->
<div style="display: none;"> <div style="display: none;">
@ -356,7 +363,7 @@ $(document).ready(function() {
var is_cloud = $(pms_ip_selected).data('is_cloud'); var is_cloud = $(pms_ip_selected).data('is_cloud');
$("#pms_valid").val(identifier !== 'undefined' ? 'valid' : ''); $("#pms_valid").val(identifier !== 'undefined' ? 'valid' : '');
$("#pms-verify-status").html(identifier !== 'undefined' ? '<i class="fa fa-check"></i> Server found!' : '').fadeIn('fast'); $("#pms-verify-status").html(identifier !== 'undefined' ? '<i class="fa fa-check"></i>&nbsp; Server found!' : '').fadeIn('fast');
$("#pms_identifier").val(identifier !== 'undefined' ? identifier : ''); $("#pms_identifier").val(identifier !== 'undefined' ? identifier : '');
$('#pms_port').val(port !== 'undefined' ? port : 32400); $('#pms_port').val(port !== 'undefined' ? port : 32400);
@ -414,7 +421,7 @@ $(document).ready(function() {
var pms_ssl = $("#pms_ssl").val(); var pms_ssl = $("#pms_ssl").val();
var pms_is_remote = $("#pms_is_remote").val(); var pms_is_remote = $("#pms_is_remote").val();
if ((pms_ip !== '') || (pms_port !== '')) { if ((pms_ip !== '') || (pms_port !== '')) {
$("#pms-verify-status").html('<i class="fa fa-refresh fa-spin"></i> Validating server...'); $("#pms-verify-status").html('<i class="fa fa-refresh fa-spin"></i>&nbsp; Validating server...');
$('#pms-verify-status').fadeIn('fast'); $('#pms-verify-status').fadeIn('fast');
$.ajax({ $.ajax({
url: 'get_server_id', url: 'get_server_id',
@ -429,7 +436,7 @@ $(document).ready(function() {
async: true, async: true,
timeout: 5000, timeout: 5000,
error: function (jqXHR, textStatus, errorThrown) { error: function (jqXHR, textStatus, errorThrown) {
$("#pms-verify-status").html('<i class="fa fa-exclamation-circle"></i> This is not a Plex Server!'); $("#pms-verify-status").html('<i class="fa fa-exclamation-circle"></i>&nbsp; This is not a Plex Server!');
$('#pms-verify-status').fadeIn('fast'); $('#pms-verify-status').fadeIn('fast');
}, },
success: function(xhr, status) { success: function(xhr, status) {
@ -437,18 +444,18 @@ $(document).ready(function() {
var identifier = result.identifier; var identifier = result.identifier;
if (identifier) { if (identifier) {
$("#pms_identifier").val(identifier); $("#pms_identifier").val(identifier);
$("#pms-verify-status").html('<i class="fa fa-check"></i> Server found!'); $("#pms-verify-status").html('<i class="fa fa-check"></i>&nbsp; Server found!');
$('#pms-verify-status').fadeIn('fast'); $('#pms-verify-status').fadeIn('fast');
pms_verified = true; pms_verified = true;
$("#pms_valid").val("valid"); $("#pms_valid").val("valid");
} else { } else {
$("#pms-verify-status").html('<i class="fa fa-exclamation-circle"></i> This is not a Plex Server!'); $("#pms-verify-status").html('<i class="fa fa-exclamation-circle"></i>&nbsp; This is not a Plex Server!');
$('#pms-verify-status').fadeIn('fast'); $('#pms-verify-status').fadeIn('fast');
} }
} }
}); });
} else { } else {
$("#pms-verify-status").html('<i class="fa fa-exclamation-circle"></i> Please enter both fields.'); $("#pms-verify-status").html('<i class="fa fa-exclamation-circle"></i>&nbsp; Please enter both fields.');
$('#pms-verify-status').fadeIn('fast'); $('#pms-verify-status').fadeIn('fast');
} }
} }
@ -460,47 +467,82 @@ $(document).ready(function() {
$("#pms-verify-status").html(""); $("#pms-verify-status").html("");
}); });
$( ".pms-auth" ).change(function() { const x_plex_headers = {
authenticated = false; 'Accept': 'application/json',
$("#pms_token").val(""); 'X-Plex-Product': '${plexpy.common.PRODUCT}',
$("#pms-token-status").html(""); '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 getPlexOAuthPin = function () {
$("#pms-authenticate").click(function() { var deferred = $.Deferred();
$("#pms-token-status").html('<i class="fa fa-refresh fa-spin"></i> Fetching token...');
$('#pms-token-status').fadeIn('fast'); $.ajax({
var pms_username = $("#pms_username").val().trim(); url: 'https://plex.tv/api/v2/pins?strong=true',
var pms_password = $("#pms_password").val().trim(); type: 'POST',
if ((pms_username !== '') && (pms_password !== '')) { headers: x_plex_headers,
$.ajax({ success: function(data) {
type: 'GET', deferred.resolve({pin: data.id, code: data.code});
url: 'get_plexpy_pms_token', },
data: { error: function() {
username: pms_username, deferred.reject();
password: pms_password }
}, });
cache: false, return deferred;
async: true, };
complete: function (xhr, status) {
var result = $.parseJSON(xhr.responseText); var polling = null;
var msg = result.message; $('#sign-in-plex').click(function() {
if (result.result == 'success') { $("#pms_token").val('');
var authToken = result.token; $("#pms-token-status").html('<i class="fa fa-refresh fa-spin"></i>&nbsp; Waiting for authentication...').fadeIn('fast');
$("#pms-token-status").html('<i class="fa fa-check"></i> ' + msg);
$('#pms-token-status').fadeIn('fast'); clearTimeout(polling);
$("#pms_token").val(authToken);
authenticated = true; getPlexOAuthPin().then(function (data) {
getServerOptions(authToken) const pin = data.pin;
} else { const code = data.code;
$("#pms-token-status").html('<i class="fa fa-exclamation-circle"></i> ' + msg); var keep_polling = true;
}
} window.open('https://app.plex.tv/auth/#!?clientID=' + x_plex_headers['X-Plex-Client-Identifier'] + '&code=' + code);
});
} else { (function poll() {
$("#pms-token-status").html('<i class="fa fa-exclamation-circle"></i> Username and password required.'); polling = setTimeout(function () {
$('#pms-token-status').fadeIn('fast'); $.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('<i class="fa fa-check"></i>&nbsp; Authentication successful.').fadeIn('fast');
authenticated = true;
getServerOptions(authToken)
}
},
error: function () {
keep_polling = false;
$("#pms-token-status").html('<i class="fa fa-exclamation-circle"></i>&nbsp; Error communicating with Plex.tv.').fadeIn('fast');
},
complete: function () {
if (keep_polling){
poll();
} else {
clearTimeout(polling);
}
},
timeout: 1000
});
}, 1000);
})();
}, function () {
$("#pms-token-status").html('<i class="fa fa-exclamation-circle"></i>&nbsp; Error communicating with Plex.tv.').fadeIn('fast');
});
}); });
}); });
</script> </script>