redesigned login page

email-send-options-from-account
Moe 2021-09-02 21:45:35 -07:00
parent 0de00184c8
commit 02270b4ca4
9 changed files with 284 additions and 268 deletions

View File

@ -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",

View File

@ -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)

View File

@ -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

View File

@ -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;
}

View File

@ -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+ */
}

54
web/assets/css/login.css Normal file
View File

@ -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);
}

View File

@ -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)
})

View File

@ -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;}

View File

@ -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();