mirror of
https://github.com/Tautulli/Tautulli.git
synced 2025-07-07 05:31:15 -07:00
Accordion for login methods on login page
This commit is contained in:
JonnyWong16
parent
5c7a3a12e9
commit
b65e6a39a0
3 changed files with 79 additions and 43 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<%
|
||||
import plexpy
|
||||
plex_login = plexpy.CONFIG.HTTP_PLEX_ADMIN or plexpy.CONFIG.ALLOW_GUEST_ACCESS
|
||||
%>
|
||||
<!doctype html>
|
||||
|
||||
|
|
@ -50,6 +51,32 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-sm-offset-3">
|
||||
<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>
|
||||
<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> 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">
|
||||
|
|
@ -63,28 +90,19 @@
|
|||
</label>
|
||||
<input type="password" id="password" name="password" class="form-control">
|
||||
</div>
|
||||
<div class="form-footer">
|
||||
<div class="remember-group">
|
||||
<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>
|
||||
</div>
|
||||
</span>
|
||||
<button id="sign-in" type="submit" class="btn btn-bright login-button"><i class="fa fa-sign-in"></i> 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> Sign In with Plex</button>
|
||||
</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> Sign In with Plex');
|
||||
$('#sign-in-plex').html('<i class="fa fa-refresh fa-spin"></i> Sign In');
|
||||
} else {
|
||||
$('#sign-in').html('<i class="fa fa-refresh fa-spin"></i> 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> Sign In with Plex');
|
||||
$('#sign-in-plex').html('<i class="fa fa-sign-in"></i> Sign In');
|
||||
} else {
|
||||
$('#sign-in').html('<i class="fa fa-sign-in"></i> Sign In');
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue