redesigned login page
parent
0de00184c8
commit
02270b4ca4
|
|
@ -19,6 +19,7 @@
|
|||
"Turn Speed": "Turn Speed",
|
||||
"Session Key": "Session Key",
|
||||
"Login": "Login",
|
||||
"Welcome": "Welcome!",
|
||||
"API Key Action Failed": "API Key Action Failed",
|
||||
"Authenticate": "Authenticate",
|
||||
"Dashboard": "Dashboard",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
module.exports = function(s,config,lang,app,io){
|
||||
if(config.showPoweredByShinobi === undefined){config.showPoweredByShinobi=true}
|
||||
if(config.poweredByShinobi === undefined){config.poweredByShinobi='Powered by Shinobi.Systems'}
|
||||
if(config.poweredByShinobiClass === undefined){config.poweredByShinobiClass='margin:15px 0 0 0;text-align:center;color:#777;font-family: sans-serif;text-transform: uppercase;letter-spacing: 3;font-size: 8pt;'}
|
||||
if(config.webPageTitle === undefined){config.webPageTitle='Shinobi'}
|
||||
if(config.showLoginCardHeader === undefined){config.showLoginCardHeader=true}
|
||||
if(config.webFavicon === undefined){config.webFavicon='libs/img/icon/favicon.ico'}
|
||||
|
|
@ -9,6 +8,30 @@ module.exports = function(s,config,lang,app,io){
|
|||
if(config.logoLocation76x76Link === undefined){config.logoLocation76x76Link='https://shinobi.video'}
|
||||
if(config.logoLocation76x76Style === undefined){config.logoLocation76x76Style='border-radius:50%'}
|
||||
if(config.showLoginSelector === undefined){config.showLoginSelector=true}
|
||||
if(config.socialLinks === undefined){
|
||||
config.socialLinks = [
|
||||
{
|
||||
icon: 'home',
|
||||
href: 'https://shinobi.video',
|
||||
title: 'Homepage'
|
||||
},
|
||||
{
|
||||
icon: 'facebook',
|
||||
href: 'https://www.facebook.com/ShinobiCCTV',
|
||||
title: 'Facebook'
|
||||
},
|
||||
{
|
||||
icon: 'twitter',
|
||||
href: 'https://twitter.com/ShinobiCCTV',
|
||||
title: 'Twitter'
|
||||
},
|
||||
{
|
||||
icon: 'youtube',
|
||||
href: 'https://www.youtube.com/channel/UCbgbBLTK-koTyjOmOxA9msQ',
|
||||
title: 'YouTube'
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
s.getConfigWithBranding = function(domain){
|
||||
var configCopy = Object.assign({},config)
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ module.exports = function(s){
|
|||
if(config.orphanedVideoCheckMax === undefined){config.orphanedVideoCheckMax = 2}
|
||||
if(config.detectorMergePamRegionTriggers === undefined){config.detectorMergePamRegionTriggers = false}
|
||||
if(config.probeMonitorOnStart === undefined){config.probeMonitorOnStart = true}
|
||||
if(config.showLoginTypeSelector === undefined){config.showLoginTypeSelector = true}
|
||||
//Child Nodes
|
||||
if(config.childNodes === undefined)config.childNodes = {};
|
||||
//enabled
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
.dark .form-select
|
||||
{
|
||||
background-color: #2b3c4b;
|
||||
border: 1px solid #444;
|
||||
border: 1px solid #2b3c4b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +30,8 @@
|
|||
.dark .form-select:focus
|
||||
{
|
||||
color: #ddd;
|
||||
background-color: #333;
|
||||
background-color: #2b3c4b;
|
||||
border: 1px solid #222;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
/* Gradients from https://uigradients.com/ */
|
||||
.bg-gradient-dark {
|
||||
background: #000428; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(to right, #004e92, #000428); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(to right, #004e92, #000428); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
.bg-gradient-blue {
|
||||
background: #0575E6; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(to right, #021B79, #0575E6); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(to right, #021B79, #0575E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
.bg-gradient-red {
|
||||
background: #ED213A; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(to right, #93291E, #ED213A); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
.bg-gradient-red {
|
||||
background: #ED213A; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(to right, #93291E, #ED213A); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(to right, #93291E, #ED213A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
.bg-gradient-orange {
|
||||
background: #f12711; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(to right, #f5af19, #f12711); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(to right, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
.bg-gradient-yellow {
|
||||
background: #CAC531; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(to right, #F3F9A7, #CAC531); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(to right, #F3F9A7, #CAC531); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
.bg-gradient-green {
|
||||
background: #134E5E; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(to right, #71B280, #134E5E); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(to right, #71B280, #134E5E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
.bg-gradient-pinkgreen {
|
||||
background: #aa4b6b; /* fallback for old browsers */
|
||||
background: -webkit-linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b); /* Chrome 10-25, Safari 5.1-6 */
|
||||
background: linear-gradient(to right, #3b8d99, #6b6b83, #aa4b6b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
body {
|
||||
font-family: "Roboto"
|
||||
}
|
||||
.shinobi-bg-shade{
|
||||
position:absolute;
|
||||
height:100%;
|
||||
width:100%;
|
||||
}
|
||||
.bg-none {
|
||||
background: transparent;
|
||||
}
|
||||
.monospace{
|
||||
font-family: monospace;
|
||||
}
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
.vertical-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.text-color {
|
||||
color: #28b391!important;
|
||||
}
|
||||
.text-white {
|
||||
color: #fff!important;
|
||||
}
|
||||
hr.divider {
|
||||
border-top: 1px solid #595959;
|
||||
background-color: initial;
|
||||
}
|
||||
#page-contents {
|
||||
background: #334a6d;
|
||||
}
|
||||
.social-link.btn {
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
font-size: 1.2rem;
|
||||
border: 0;
|
||||
}
|
||||
.card label {
|
||||
color: #fff;
|
||||
}
|
||||
#login-submit {
|
||||
background: #2596fb;
|
||||
}
|
||||
#remember_me {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
transform: translate(0px, 3px);
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
var loginForm = $('#login-form')
|
||||
var cachedLoginInfo = localStorage.getItem('ShinobiLogin_'+location.host)
|
||||
var cachedMachineId = localStorage.getItem('ShinobiAuth_'+location.host)
|
||||
function generateId(x){
|
||||
if(!x){x=10};var t = "";var p = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
for( var i=0; i < x; i++ )
|
||||
t += p.charAt(Math.floor(Math.random() * p.length));
|
||||
return t;
|
||||
}
|
||||
function onSelectorChange(_this,parent){
|
||||
var el = $(_this)
|
||||
var theParam = el.attr('selector')
|
||||
var theValue = el.val()
|
||||
var theSelected = el.find('option:selected').text()
|
||||
parent.find(`.${theParam}_input`).hide()
|
||||
parent.find(`.${theParam}_${theValue}`).show()
|
||||
parent.find(`.${theParam}_text`).text(theSelected)
|
||||
}
|
||||
if(!cachedMachineId){
|
||||
cachedMachineId = generateId(20)
|
||||
localStorage.setItem('ShinobiAuth_'+location.host,cachedMachineId)
|
||||
}
|
||||
$(document).ready(function(){
|
||||
$('#machineID').val(cachedMachineId)
|
||||
$('[selector]').change(onSelectorChange).change();
|
||||
})
|
||||
loginForm.submit(function(e){
|
||||
$('#login-message').remove()
|
||||
var formValues = loginForm.serializeObject()
|
||||
if(formValues.remember){
|
||||
localStorage.setItem('ShinobiLogin_'+location.host,JSON.stringify({
|
||||
mail: formValues.mail,
|
||||
pass: formValues.pass,
|
||||
function: formValues.function
|
||||
}))
|
||||
}else{
|
||||
localStorage.removeItem('ShinobiLogin_'+location.host)
|
||||
}
|
||||
if(googleSignIn)googleSignOut();
|
||||
})
|
||||
if(cachedLoginInfo){
|
||||
cachedLoginInfo = JSON.parse(cachedLoginInfo)
|
||||
$.each(cachedLoginInfo,function(n,v){
|
||||
var el = loginForm.find('[name="'+n+'"]')
|
||||
if(el.attr('type') === 'checkbox'){
|
||||
el.prop('checked',true)
|
||||
}else{
|
||||
el.val(v)
|
||||
}
|
||||
})
|
||||
loginForm.find('[name="remember"]').prop('checked',true)
|
||||
loginForm.submit()
|
||||
}
|
||||
$('[name="function"]').change(function(){
|
||||
var removeClass='btn-danger btn-primary btn-success btn-warning'
|
||||
var addClass='btn-success'
|
||||
switch($(this).val()){
|
||||
case'streamer':
|
||||
addClass='btn-warning'
|
||||
break;
|
||||
case'admin':
|
||||
addClass='btn-primary'
|
||||
break;
|
||||
case'super':
|
||||
addClass='btn-danger'
|
||||
break;
|
||||
}
|
||||
$('#login-submit').removeClass(removeClass).addClass(addClass)
|
||||
})
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
#register-msg:empty{display:none}
|
||||
.shinobi-bg{background:url(/libs/img/bg.jpg);background-size:cover;background-position:center;position:relative}
|
||||
.shinobi-bg{background:#333}
|
||||
.shinobi-bg-shade{position:absolute;height:100%;width:100%;background:rgba(0,0,0,0.5)}
|
||||
.panel-login {
|
||||
background:#343434;
|
||||
color:#ddd;
|
||||
margin-top:90px;
|
||||
border-color: #444;
|
||||
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
|
||||
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
|
||||
}
|
||||
.panel-login>.panel-heading {
|
||||
color: #00415d;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-color: #444;
|
||||
text-align:center;
|
||||
}
|
||||
.panel-login>.panel-heading a{
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
-webkit-transition: all 0.1s linear;
|
||||
-moz-transition: all 0.1s linear;
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
.panel-login>.panel-heading a.active{
|
||||
color: #3b75b4;
|
||||
}
|
||||
.panel-login>.panel-heading hr{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
clear: both;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
|
||||
background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
|
||||
background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
|
||||
background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
|
||||
}
|
||||
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
|
||||
height: 45px;
|
||||
border: 1px solid #ddd;
|
||||
font-size: 16px;
|
||||
-webkit-transition: all 0.1s linear;
|
||||
-moz-transition: all 0.1s linear;
|
||||
transition: all 0.1s linear;
|
||||
}
|
||||
.panel-login input:hover,
|
||||
.panel-login input:focus {
|
||||
outline:none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-login {
|
||||
background-color: #59B2E0;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
font-weight: normal;
|
||||
padding: 14px 0;
|
||||
text-transform: uppercase;
|
||||
border-color: #59B2E6;
|
||||
}
|
||||
.btn-login:hover,
|
||||
.btn-login:focus {
|
||||
color: #fff;
|
||||
background-color: #53A3CD;
|
||||
border-color: #53A3CD;
|
||||
}
|
||||
.forgot-password {
|
||||
text-decoration: underline;
|
||||
color: #888;
|
||||
}
|
||||
.forgot-password:hover,
|
||||
.forgot-password:focus {
|
||||
text-decoration: underline;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn-register {
|
||||
background-color: #1CB94E;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
height: auto;
|
||||
font-weight: normal;
|
||||
padding: 14px 0;
|
||||
text-transform: uppercase;
|
||||
border-color: #1CB94A;
|
||||
}
|
||||
.btn-register:hover,
|
||||
.btn-register:focus {
|
||||
color: #fff;
|
||||
background-color: #1CA347;
|
||||
border-color: #1CA347;
|
||||
}
|
||||
|
||||
.monospace{font-family: monospace;}
|
||||
|
|
@ -5,11 +5,12 @@
|
|||
<% include blocks/header-meta.ejs %>
|
||||
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>assets/vendor/bootstrap5/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>assets/css/bootstrap5-theme.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/login.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/material.min.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/material.style.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>assets/css/login.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>assets/css/gradients.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>assets/css/bs5.darktheme.css">
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/css/roboto.css" type="text/css" />
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
|
|
@ -17,77 +18,46 @@
|
|||
<script src="<%-window.libURL%>libs/js/jquery.min.js"></script>
|
||||
<script src="<%-window.libURL%>libs/js/jquery-ui.min.js"></script>
|
||||
<script src="<%-window.libURL%>libs/js/jquery.serialize.js"></script>
|
||||
<link rel="stylesheet" href="<%-window.libURL%>libs/themes/Ice/style.css">
|
||||
<meta name="google-signin-client_id" content="<%- config.appIdGoogleSignIn %>">
|
||||
<style>
|
||||
.wide-text{
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3;
|
||||
font-size: 8pt!important;
|
||||
font-family: sans-serif;
|
||||
color: #555;
|
||||
}
|
||||
.text-green {
|
||||
color: #28b391!important;
|
||||
}
|
||||
.panel {
|
||||
border-color: #28b391!important;
|
||||
background: #044032!important;
|
||||
}
|
||||
.panel-heading {
|
||||
background: #124438!important;
|
||||
border-color: #163537!important;
|
||||
}
|
||||
.mdl-switch.is-checked .mdl-switch__thumb {
|
||||
background: #28b391!important;
|
||||
}
|
||||
.mdl-switch.is-checked .mdl-switch__track {
|
||||
background: rgba(63, 181, 99, 0.5)!important;
|
||||
}
|
||||
.shinobi-bg {
|
||||
background: #33686d;
|
||||
}
|
||||
.form-control {
|
||||
background: #163537;
|
||||
border-color: #1d4c40!important;
|
||||
color: #979797;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<% cleanLang = function(string){
|
||||
if(!string){string=''}
|
||||
return string.replace(/'/g,"\\'")
|
||||
}%>
|
||||
<% if(screen){screen=screen.toLowerCase()} %>
|
||||
<div class="shinobi-bg display-table" style="height:100%">
|
||||
<div class="shinobi-bg-shade">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<div class="panel panel-login">
|
||||
<% if(config.showLoginCardHeader === true){
|
||||
var logoImageLink
|
||||
if(config.logoLocation76x76.indexOf('//') === -1){
|
||||
logoImageLink = window.libURL + config.logoLocation76x76
|
||||
}else{
|
||||
logoImageLink = config.logoLocation76x76
|
||||
}
|
||||
%>
|
||||
<div class="panel-heading">
|
||||
<div class="panel-heading-shade">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<a href="<%- config.logoLocation76x76Link %>" target="_blank">
|
||||
<img src="<%- logoImageLink %>" style="<%- config.logoLocation76x76Style %>">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="page-contents" class="display-table full-height">
|
||||
<div class="shinobi-bg-shade bg-gradient-blue">
|
||||
<div class="d-flex flex-row full-height">
|
||||
<div class="col-0 col-lg-8">
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-lg-4 vertical-center" style="background:rgba(0,0,0,0.8)">
|
||||
<div style="flex:1" class="p-4">
|
||||
<!-- Logo/Header -->
|
||||
<div>
|
||||
<% if(config.showLoginCardHeader === true){
|
||||
var logoImageLink
|
||||
if(config.logoLocation76x76.indexOf('//') === -1){
|
||||
logoImageLink = window.libURL + config.logoLocation76x76
|
||||
}else{
|
||||
logoImageLink = config.logoLocation76x76
|
||||
}
|
||||
%>
|
||||
<div class="text-center p-2">
|
||||
<a href="<%- config.logoLocation76x76Link %>" target="_blank">
|
||||
<img src="<%- logoImageLink %>" style="<%- config.logoLocation76x76Style %>">
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
<!-- Logo/Header END -->
|
||||
<!-- Card -->
|
||||
<div class="text-white">
|
||||
<div class="text-center">
|
||||
<h4 class="mt-3 mb-2 text-white" style="font-weight:normal"><%- lang.Welcome %></h4>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card-body">
|
||||
<div class="row dark">
|
||||
<form id="login-form" method="post" style="display: block;margin:0">
|
||||
<input type="hidden" name="machineID" id="machineID" value="">
|
||||
<% var message,timeLeft;if(message){ %>
|
||||
|
|
@ -96,18 +66,22 @@
|
|||
</div>
|
||||
<% } %>
|
||||
<div class="form-group">
|
||||
<label><%- lang['Email'] %></label>
|
||||
<input type="text" name="mail" id="email" tabindex="1" autofocus class="form-control wide-text" placeholder="<%- lang.Email %>" value="">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><%- lang['Password'] %></label>
|
||||
<input type="password" name="pass" id="pass" tabindex="2" class="form-control wide-text" placeholder="<%- lang.Password %>">
|
||||
</div>
|
||||
<div class="form-group f_i_input f_i_ldap" style="display:none">
|
||||
<input name="key" id="key" tabindex="2" class="monospace form-control wide-text" placeholder="Group Key">
|
||||
<label><%- lang['Group Key'] %></label>
|
||||
<input name="key" id="key" tabindex="2" class="form-control wide-text" placeholder="Group Key">
|
||||
</div>
|
||||
<% if(config.showLoginSelector === true){ %>
|
||||
<div class="form-group f_i_input f_i_">
|
||||
<label><%- lang['Landing Page'] %></label>
|
||||
<div class="row">
|
||||
<div class="col-md-12 monospace">
|
||||
<div class="col-md-12">
|
||||
<select class="form-control wide-text" name="function">
|
||||
<% switch(screen){
|
||||
case'super': %>
|
||||
|
|
@ -141,125 +115,82 @@
|
|||
} %>
|
||||
</select>
|
||||
<% } %>
|
||||
<div class="form-group">
|
||||
<div class="form-group" <% config.showLoginTypeSelector === true ? '' : 'style="display:none"' %>>
|
||||
<label><%- lang['Authenticate'] %></label>
|
||||
<select class="form-control wide-text" name="alternateLogin" selector="f_i">
|
||||
<option value="" selected><%- lang.Default %></option>
|
||||
<option value="google">Google</option>
|
||||
<% if(config.allowGoogleSignOn){ %>
|
||||
<option value="google">Google</option>
|
||||
<% } %>
|
||||
<option value="ldap"><%- lang.LDAP %></option>
|
||||
</select>
|
||||
<input style="display:none" name="alternateLoginToken" class="monospace form-control wide-text" placeholder="Group Key">
|
||||
<input style="display:none" name="alternateLoginToken" class="form-control wide-text" placeholder="Group Key">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" name="login-submit" id="login-submit" tabindex="4" class="btn btn-success btn-block wide-text" style="color:#FFF"><i class="fa fa-key"></i> <%- lang.Login %></button>
|
||||
<div class="form-group">
|
||||
<label class="mb-0">
|
||||
<input class="mt-1 mr-1" type="checkbox" id="remember_me" value="1" name="remember">
|
||||
<span class="text-white"><%- lang['Remember Me'] %></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group mt-4">
|
||||
<button type="submit" name="login-submit" id="login-submit" tabindex="4" class="btn btn-success btn-block wide-text" style="color:#FFF"><%- lang.Login %></button>
|
||||
</div>
|
||||
<% if(config.allowGoogleSignOn){ %>
|
||||
<div class="form-group text-center">
|
||||
<div class="g-signin2" data-onsuccess="onGoogleSignIn" style="display: inline-block;"></div>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="form-group text-center" style="margin:0">
|
||||
<span style="<%- config.poweredByShinobiClass %>;margin-right: 10px" class="epic-text text-green"><i class="fa fa-sign-in"></i> <%- lang['Remember Me'] %></span>
|
||||
<div class="text-right" title="<%- lang['Remember Me'] %>" style="display:inline-block">
|
||||
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="remember_me">
|
||||
<input type="checkbox" id="remember_me" value="1" name="remember" class="mdl-switch__input">
|
||||
<span class="monospace mdl-switch__label"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<% if(config.showPoweredByShinobi){ %>
|
||||
<p class="text-green" style="<%- config.poweredByShinobiClass %>"><small><%- config.poweredByShinobi %></small></p>
|
||||
<% }else{ %>
|
||||
<!-- <%- config.poweredByShinobi %> -->
|
||||
<% } %>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card END -->
|
||||
<div class="my-5"></div>
|
||||
<div class="form-group mb-0 text-center">
|
||||
<% config.socialLinks.forEach((item) => { %>
|
||||
<a class="mr-2 social-link btn btn-primary <%- item.color || 'bg-none text-white' %>" target="_blank" href="<%- item.href %>">
|
||||
<div class="d-flex flex-row full-height">
|
||||
<div class="vertical-center full-height" style="flex: 1">
|
||||
<i class="fa fa-<%- item.icon %>"></i>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<% }) %>
|
||||
</div>
|
||||
<!-- Powered By Shinobi -->
|
||||
<div class="mt-4"></div>
|
||||
<div class="text-center text-white monospace mt-2">
|
||||
<small>
|
||||
<% if(config.showPoweredByShinobi){ %>
|
||||
<p><%- config.poweredByShinobi %></p>
|
||||
<% }else{ %>
|
||||
<!-- <%- config.poweredByShinobi %> -->
|
||||
<% } %>
|
||||
</small>
|
||||
</div>
|
||||
<!-- Powered By Shinobi END -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="<%-window.libURL%>libs/js/material.min.js"></script>
|
||||
<script>
|
||||
var googleSignIn = false;
|
||||
<% var failedLogin;if(failedLogin===true){ %>
|
||||
localStorage.removeItem('ShinobiLogin_'+location.host)
|
||||
<% } %>
|
||||
$.ccio={f:$('#login-form'),ls:localStorage.getItem('ShinobiLogin_'+location.host),auth:localStorage.getItem('ShinobiAuth_'+location.host)}
|
||||
$.ccio.gid=function(x){
|
||||
if(!x){x=10};var t = "";var p = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
for( var i=0; i < x; i++ )
|
||||
t += p.charAt(Math.floor(Math.random() * p.length));
|
||||
return t;
|
||||
};
|
||||
if(!$.ccio.auth||$.ccio.auth===''){
|
||||
$.ccio.auth=$.ccio.gid(20)
|
||||
localStorage.setItem('ShinobiAuth_'+location.host,$.ccio.auth)
|
||||
}
|
||||
$(document).ready(function(){
|
||||
$('#machineID').val($.ccio.auth)
|
||||
})
|
||||
$.ccio.f.submit(function(e){
|
||||
$('#login-message').remove()
|
||||
$('input').css('border-color','')
|
||||
e.e=$(this),e.s=e.e.serializeObject(),e.inputs=e.e.find('input,button');
|
||||
if(e.s.remember){
|
||||
localStorage.setItem('ShinobiLogin_'+location.host,JSON.stringify({mail:e.s.mail,pass:e.s.pass,function:e.s.function}))
|
||||
}else{localStorage.removeItem('ShinobiLogin_'+location.host)}
|
||||
if(googleSignIn)googleSignOut()
|
||||
})
|
||||
if($.ccio.ls){
|
||||
$.ccio.ls=JSON.parse($.ccio.ls);
|
||||
$.each($.ccio.ls,function(n,v){
|
||||
n=$.ccio.f.find('[name="'+n+'"]')
|
||||
if(n.attr('type')==='checkbox'){
|
||||
n.prop('checked',true)
|
||||
}else{
|
||||
n.val(v)
|
||||
}
|
||||
});
|
||||
$.ccio.f.find('[name="remember"]').prop('checked',true);
|
||||
$.ccio.f.submit()
|
||||
}
|
||||
$('[name="function"]').change(function(){
|
||||
e={};
|
||||
e.removeClass='btn-danger btn-primary btn-success btn-warning'
|
||||
switch($(this).val()){
|
||||
case'streamer':
|
||||
e.addClass='btn-warning'
|
||||
break;
|
||||
case'admin':
|
||||
e.addClass='btn-primary'
|
||||
break;
|
||||
case'super':
|
||||
e.addClass='btn-danger'
|
||||
break;
|
||||
default:
|
||||
e.addClass='btn-success'
|
||||
break;
|
||||
}
|
||||
$('#login-submit').removeClass(e.removeClass).addClass(e.addClass)
|
||||
})
|
||||
$('[selector]').change(function(e){
|
||||
e.v=$(this).val();e.a=$(this).attr('selector')
|
||||
$('.'+e.a+'_input').hide()
|
||||
$('.'+e.a+'_'+e.v).show();
|
||||
$('.'+e.a+'_text').text($(this).find('option:selected').text())
|
||||
}).change();
|
||||
</script>
|
||||
<script src="<%-window.libURL%>assets/js/bs5.login.js"></script>
|
||||
<% if(config.allowGoogleSignOn){ %>
|
||||
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||||
<script>
|
||||
function onGoogleSignIn(googleUser) {
|
||||
var id_token = googleUser.getAuthResponse().id_token;
|
||||
$.ccio.f.find('[name="mail"],[name="pass"],[name="alternateLogin"],.g-signin2').hide()
|
||||
$.ccio.f.find('[name="alternateLogin"]').val('google')
|
||||
$.ccio.f.find('[name="alternateLoginToken"]').val(id_token)
|
||||
$.ccio.f.find('[name="login-submit"]').html(`<i class="fa fa-google"></i> <%- lang.Login %>`)
|
||||
loginForm.find('[name="mail"],[name="pass"],[name="alternateLogin"],.g-signin2').hide()
|
||||
loginForm.find('[name="alternateLogin"]').val('google')
|
||||
loginForm.find('[name="alternateLoginToken"]').val(id_token)
|
||||
googleSignIn = true
|
||||
$.ccio.f.submit()
|
||||
loginForm.submit()
|
||||
}
|
||||
function googleSignOut() {
|
||||
var auth2 = gapi.auth2.getAuthInstance();
|
||||
|
|
|
|||
Loading…
Reference in New Issue