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

Accordion for login methods on login page

Browse source
This commit is contained in:
JonnyWong16 2018-07-02 15:56:24 -07:00
parent 5c7a3a12e9
commit b65e6a39a0
3 changed files with 79 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3489,6 +3489,11 @@ a.no-highlight:hover {
margin: 0 auto 50px auto;
text-align: center;
}
.login-container .login-method-header {
text-align: center;
font-weight: 600;
text-transform: uppercase;
}
.login-container .form-group {
margin-bottom: 20px;
}
@ -3509,8 +3514,9 @@ a.no-highlight:hover {
text-shadow: 0 -1px 1px rgba(0,0,0,.4),0 0 15px rgba(0,0,0,.2);
}
.login-container .remember-group {
float: left;
color: #999;
display: inline-block;
margin-top: 7.5px;
}
.login-container .remember-group .control-label {
display: inline;
@ -3534,6 +3540,9 @@ a.no-highlight:hover {
.login-button-plex {
text-align: center;
}
.login-button-plex .remember-group {
margin-top: 20px;
}
.login-button-plex button#sign-in-plex {
float: none;
}

9
data/interfaces/default/js/script.js
View file

@ -351,21 +351,26 @@ function getCookie(cname) {
}
return "";
}
var Accordion = function (el, multiple) {
var Accordion = function (el, multiple, close) {
this.el = el || {};
this.multiple = multiple || false;
this.close = (close === undefined) ? true : close;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {
el: this.el,
multiple: this.multiple
multiple: this.multiple,
close: this.close
}, this.dropdown);
};
Accordion.prototype.dropdown = function (e) {
var $el = e.data.el;
$this = $(this);
$next = $this.next();
if (!e.data.close && $this.parent().hasClass('open')) {
return
}
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {

102
data/interfaces/default/login.html
View file

@ -1,5 +1,6 @@
<%
import plexpy
plex_login = plexpy.CONFIG.HTTP_PLEX_ADMIN or plexpy.CONFIG.ALLOW_GUEST_ACCESS
%>
<!doctype html>
@ -50,41 +51,58 @@
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form id="login-form">
<div class="form-group">
<label for="username" class="control-label">
Username
</label>
<input type="text" id="username" name="username" class="form-control" autocorrect="off" autocapitalize="off" autofocus>
</div>
<div class="form-group">
<label for="password" class="control-label">
Password
</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="form-footer">
<div class="remember-group">
<label class="control-label">
<input type="checkbox" id="remember_me" name="remember_me" title="for 30 days" value="1" checked="checked" /> Remember me
</label>
<ul id="login-methods" class="accordion list-unstyled">
% if plex_login:
<li class="open">
<div class="link login-method-header">
Sign In with Plex
</div>
<button id="sign-in" type="submit" class="btn btn-bright login-button"><i class="fa fa-sign-in"></i>&nbsp; Sign In</button>
</div>
</form>
</div>
</div>
<div class="row">
<div class="login-divider"><span>or</span></div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div id="sign-in-plex-alert" class="alert alert-danger login-alert"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 login-button-plex">
<button id="sign-in-plex" class="btn btn-bright login-button"><i class="fa fa-sign-in"></i>&nbsp; Sign In with Plex</button>
<ul class="submenu login-button-plex" style="display: block;">
<li>
<div>
<button id="sign-in-plex" class="btn btn-bright login-button"><i class="fa fa-sign-in"></i>&nbsp; Sign In</button>
</div>
<div class="remember-group">
<label class="control-label">
<input type="checkbox" id="remember_me_plex" name="remember_me_plex" title="for 30 days" value="1" checked="checked" /> Remember me
</label>
</div>
</li>
</ul>
</li>
% endif
<li class="${'open' if not plex_login else ''}">
<div class="link login-method-header">
Sign In with Tautulli
</div>
<ul class="submenu" style="${'display: block;' if not plex_login else ''}">
<li>
<form id="login-form">
<div class="form-group">
<label for="username" class="control-label">
Username
</label>
<input type="text" id="username" name="username" class="form-control" autocorrect="off" autocapitalize="off" autofocus>
</div>
<div class="form-group">
<label for="password" class="control-label">
Password
</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<div class="form-group">
<span class="remember-group">
<label class="control-label">
<input type="checkbox" id="remember_me" name="remember_me" title="for 30 days" value="1" checked="checked" /> Remember me
</label>
</span>
<button id="sign-in" type="submit" class="btn btn-bright login-button"><i class="fa fa-sign-in"></i>&nbsp; Sign In</button>
</div>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
@ -94,7 +112,10 @@
<script src="${http_root}js/jquery-2.1.4.min.js"></script>
<script src="${http_root}js/platform.min.js"></script>
<script src="${http_root}js/script.js${cache_param}"></script>
<script>
var login_accordion = new Accordion($('#login-methods'), false, false);
if (!localStorage.getItem('Tautulli_ClientId')) {
localStorage.setItem('Tautulli_ClientId', uuidv4());
}
@ -158,7 +179,7 @@
},
error: function () {
keep_polling = false;
$('#sign-in-plex-alert').text('Error communicating with Plex.tv.').show();
$('#sign-in-alert').text('Error communicating with Plex.tv.').show();
},
complete: function () {
if (keep_polling){
@ -172,7 +193,7 @@
}, 1000);
})();
}, function () {
$('#sign-in-plex-alert').text('Error communicating with Plex.tv.').show();
$('#sign-in-alert').text('Error communicating with Plex.tv.').show();
});
});
@ -184,14 +205,15 @@
function signIn(plex, token) {
$('.login-container button').prop('disabled', true);
if (plex) {
$('#sign-in-plex').html('<i class="fa fa-refresh fa-spin"></i>&nbsp; Sign In with Plex');
$('#sign-in-plex').html('<i class="fa fa-refresh fa-spin"></i>&nbsp; Sign In');
} else {
$('#sign-in').html('<i class="fa fa-refresh fa-spin"></i>&nbsp; Sign In');
}
const username = plex ? null : $('#username').val();
const password = plex ? null : $('#password').val();
const remember_me = $('#remember_me').is(':checked') ? '1' : '0';
const remember_me = plex ? ($('#remember_me_plex').is(':checked') ? '1' : '0')
: ($('#remember_me').is(':checked') ? '1' : '0');
var data = {
username: username,
@ -212,7 +234,7 @@
},
401: function() {
if (plex) {
$('#sign-in-plex-alert').text('Invalid Plex Login.').show();
$('#sign-in-alert').text('Invalid Plex Login.').show();
} else {
$('#sign-in-alert').text('Incorrect username or password.').show();
$('#username').focus();
@ -222,7 +244,7 @@
complete: function() {
$('.login-container button').prop('disabled', false);
if (plex) {
$('#sign-in-plex').html('<i class="fa fa-sign-in"></i>&nbsp; Sign In with Plex');
$('#sign-in-plex').html('<i class="fa fa-sign-in"></i>&nbsp; Sign In');
} else {
$('#sign-in').html('<i class="fa fa-sign-in"></i>&nbsp; Sign In');
}