github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-07 05:31: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; margin: 0 auto 50px auto;
text-align: center; text-align: center;
} }
.login-container .login-method-header {
text-align: center;
font-weight: 600;
text-transform: uppercase;
}
.login-container .form-group { .login-container .form-group {
margin-bottom: 20px; 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); text-shadow: 0 -1px 1px rgba(0,0,0,.4),0 0 15px rgba(0,0,0,.2);
} }
.login-container .remember-group { .login-container .remember-group {
float: left;
color: #999; color: #999;
display: inline-block;
margin-top: 7.5px;
} }
.login-container .remember-group .control-label { .login-container .remember-group .control-label {
display: inline; display: inline;
@ -3534,6 +3540,9 @@ a.no-highlight:hover {
.login-button-plex { .login-button-plex {
text-align: center; text-align: center;
} }
.login-button-plex .remember-group {
margin-top: 20px;
}
.login-button-plex button#sign-in-plex { .login-button-plex button#sign-in-plex {
float: none; float: none;
} }

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

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

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

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