cordova-plugin-mas-core
Version:
Cordova MAS Foundation Plugin
786 lines (670 loc) • 23.6 kB
HTML
<html lang="en-IN">
<head>
<meta charset="utf-8">
<title>Login</title>
<!--<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel='stylesheet'>-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Ropa Sans', sans-serif;
color: #666
}
.add1 {
margin: 0 auto;
width: 720px
}
li,
ul,
body {
margin: 0;
padding: 0;
list-style: none
}
#login-form {
width: 350px;
background: #FFF;
margin: 50px auto;
background: #f1f1f1
}
.user-image {
padding: 20px 0;
text-align: center
}
.user {
height: 100px;
width: 100px;
border-radius: 50%;
border: solid 8px #e1e1e1;
line-height: 100px;
color: #e1e1e1;
font-size: 50px
}
.form {
padding: 0 30px;
padding-bottom: 10px
}
.login li {
height: 35px;
line-height: 35px;
margin-bottom: 15px
}
.input {
border: solid 1px #e8e8e8;
outline: none;
background: #f8f8f8;
margin: 0 auto;
font-family: 'Ropa Sans', sans-serif;
font-size: 15px;
display: block;
height: 35px;
width: 268px;
padding: 0 10px;
border-radius: 3px;
transition: all .3s
}
.input:focus:invalid {
border-color: red
}
.input:focus:valid {
border-color: green
}
#check {
top: 2px;
position: relative
}
.inline:after {
display: table;
content: ''
}
.remember {
width: 45%;
float: left;
position: relative;
font-size: 14px
}
.remember a {
text-decoration: none;
color: #666
}
.remember:nth-child(2) {
text-align: right
}
.btn {
border: none;
outline: none;
background: #009966;
border-bottom: solid 4px #006666;
font-family: 'Ropa Sans', sans-serif;
margin: 0 auto;
display: block;
height: 40px;
width: 290px;
padding: 0 10px;
border-radius: 3px;
font-size: 16px;
color: #FFF
}
.social-login {
padding: 10px 30px;
background: #e8e8e8;
text-align: center
}
.social-login a {
display: inline-block;
height: 35px;
line-height: 35px;
width: 35px;
margin: 0 3px;
text-decoration: none;
color: #FFFFFF
}
.form a i.fa {
line-height: 35px
}
.fb {
background: #305891
}
.tw {
background: #2ca8d2
}
.gp {
background: #ce4d39
}
.in {
background: #006699
}
.form-footer {
height: 40px;
line-height: 40px;
padding: 3px 35px;
text-align: right;
font-size: 14px
}
.form-footer a {
padding: 6px;
background: #006699;
border-radius: 3px;
margin-left: 4px;
color: #FFFFFF;
text-decoration: none
}
#powered {
padding: 10px;
font-size: 14px;
background: #eee;
text-align: center;
color: #999
}
#powered a {
text-decoration: none;
color: #666
}
body {
background: #2C303C;
font-family: 'Source Sans Pro', sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #999;
background: rgba(0, 0, 0, 0.36);
margin: 0;
padding: 5px;
}
h2 {
text-align: center;
color: #999;
margin: 0;
padding: 5px;
font-size: 1.8em;
margin-bottom: 30px;
}
.wrapper,
.copyright {
padding: 20px;
text-align: center;
}
hr {
margin: 30px 20px;
border-top: 2px solid #1C1E26;
border-bottom: 2px solid #38404D;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
}
.medicon {
display: block;
max-width: 100px;
max-height: 100px;
width: auto;
height: auto;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
#login-form {
width: 350px;
background: #FFF;
margin: 0px auto;
background: #f1f1f1
}
.form-header {
display: table;
clear: both
}
.form-header li {
display: inline-block;
line-height: 40px;
width: 255px;
margin: 0 2px;
text-align: center;
background: #e8e8e8
}
.form-header li:nth-child(odd) {
padding-left: 40px;
}
.form-header li:nth-child(even) {
width: 50px;
margin: 0 0;
}
.user-image {
padding: 20px 0;
text-align: center
}
.user {
height: 100px;
width: 100px;
border-radius: 50%;
border: solid 8px #e1e1e1;
line-height: 100px;
color: #e1e1e1;
font-size: 50px
}
.form {
padding: 0 30px;
padding-bottom: 10px
}
.login li {
height: 35px;
line-height: 35px;
margin-bottom: 15px
}
.input {
border: solid 1px #e8e8e8;
outline: none;
background: #f8f8f8;
margin: 0 auto;
font-family: 'Ropa Sans', sans-serif;
font-size: 15px;
display: block;
height: 35px;
width: 268px;
padding: 0 10px;
border-radius: 3px;
transition: all .3s
}
.input:focus:invalid {
border-color: red
}
.input:focus:valid {
border-color: green
}
.close_button {
width: 25%;
}
.form-footer {
height: 40px;
line-height: 40px;
padding: 3px 35px;
text-align: right;
font-size: 14px
}
.form-footer a {
padding: 6px;
background: #006699;
border-radius: 3px;
margin-left: 4px;
color: #FFFFFF;
text-decoration: none
}
#powered {
padding: 10px;
font-size: 14px;
background: #eee;
text-align: center;
color: #999
}
#powered a {
text-decoration: none;
color: #666
}
/*---- Genral classes end -------*/
/*Change icons size here*/
.social-icons .fa {
font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa {
border-radius: 50%;
}
.social-icons.icon-rounded .fa {
border-radius: 5px;
}
.social-icons.icon-flat .fa {
border-radius: 0;
}
.social-icons .fa:hover,
.social-icons .fa:active {
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover,
.social-icons.icon-zoom .fa:active {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.social-icons.icon-rotate .fa:hover,
.social-icons.icon-rotate .fa:active {
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
}
.social-icons .fa-adn {
background-color: #504e54;
}
.social-icons .fa-apple {
background-color: #aeb5c5;
}
.social-icons .fa-android {
background-color: #A5C63B;
}
.social-icons .fa-bitbucket,
.social-icons .fa-bitbucket-square {
background-color: #003366;
}
.social-icons .fa-bitcoin,
.social-icons .fa-btc {
background-color: #F7931A;
}
.social-icons .fa-css3 {
background-color: #1572B7;
}
.social-icons .fa-dribbble {
background-color: #F46899;
}
.social-icons .fa-dropbox {
background-color: #018BD3;
}
.social-icons .fa-facebook,
.social-icons .fa-facebook-square {
background-color: #3C599F;
}
.social-icons .fa-flickr {
background-color: #FF0084;
}
.social-icons .fa-foursquare {
background-color: #0086BE;
}
.social-icons .fa-github,
.social-icons .fa-github-alt,
.social-icons .fa-github-square {
background-color: #070709;
}
.social-icons .fa-google-plus,
.social-icons .fa-google-plus-square {
background-color: #CF3D2E;
}
.social-icons .fa-html5 {
background-color: #E54D26;
}
.social-icons .fa-instagram {
background-color: #A1755C;
}
.social-icons .fa-linkedin,
.social-icons .fa-linkedin-square {
background-color: #0085AE;
}
.social-icons .fa-linux {
background-color: #FBC002;
color: #333;
}
.social-icons .fa-maxcdn {
background-color: #F6AE1C;
}
.social-icons .fa-pagelines {
background-color: #241E20;
color: #3984EA;
}
.social-icons .fa-pinterest,
.social-icons .fa-pinterest-square {
background-color: #CC2127;
}
.social-icons .fa-renren {
background-color: #025DAC;
}
.social-icons .fa-skype {
background-color: #01AEF2;
}
.social-icons .fa-stack-exchange {
background-color: #245590;
}
.social-icons .fa-stack-overflow {
background-color: #FF7300;
}
.social-icons .fa-trello {
background-color: #265A7F;
}
.social-icons .fa-tumblr,
.social-icons .fa-tumblr-square {
background-color: #314E6C;
}
.social-icons .fa-twitter,
.social-icons .fa-twitter-square {
background-color: #32CCFE;
}
.social-icons .fa-vimeo-square {
background-color: #229ACC;
}
.social-icons .fa-vk {
background-color: #375474;
}
.social-icons .fa-weibo {
background-color: #D72B2B;
}
.social-icons .fa-windows {
background-color: #12B6F3;
}
.social-icons .fa-xing,
.social-icons .fa-xing-square {
background-color: #00555C;
}
.social-icons .fa-youtube,
.social-icons .fa-youtube-play,
.social-icons .fa-youtube-square {
background-color: #C52F30;
}
.disabled {
pointer-events:none;
opacity:0.6;
}
.enabled {
pointer-events:all;
opacity:1.0;
}
</style>
<script>
(function(){
var errorFn = function(e){
const callback = e.detail;
const error = callback.error;
const requestType = callback.requestType;
const errorMessage = (!MASPluginUtils.isEmpty(error) && !MASPluginUtils.isEmpty(error.errorMessage))?error.errorMessage:"Internal Server Error";
if(requestType === 'qrCodeAuthorizationComplete' || requestType === 'removeQRCode'){
document.getElementById('qr-code').style.display = 'none';
}
document.getElementById("errorMesg").innerHTML = "QR Code disabled: Reason -- "+errorMessage;
document.body.removeEventListener("errorEvent",errorFn);
};
document.body.addEventListener("errorEvent",errorFn);
var removeQRCodeFn = function (){
document.getElementById('qr-code').style.display = 'none';
document.body.removeEventListener("removeQRCode",removeQRCodeFn);
};
document.body.addEventListener("removeQRCode",removeQRCodeFn);
const payload = window.localStorage.getItem("masCallbackResult");
if(!MASPluginUtils.isEmpty(payload)){
const result = JSON.parse(payload);
document.getElementById('qr-code').src = "data:image/jpeg;base64, " + result.qrCodeImageBase64;
const providers = result.providers;
const idp = result.idp;
if(!MASPluginUtils.isEmpty(providers) && providers.length > 0) {
for(let i=0; i < providers.length; i++) {
let p = providers[i];
if(idp !== 'all' && idp !== p){
continue;
}
if(document.getElementById('i'+p)) {
document.getElementById('i'+p).src = "masui/img/"+p+"_enabled.png";
document.getElementById('l'+p).className = "enabled";
if(p === 'salesforce'){
document.getElementById('i'+p).style.backgroundColor = "#1798c1";
}
}
}
}
}
})();
</script>
</head>
<body>
<br>
<div id="login-form">
<div>
<ul id="" class="form-header">
<li>Sign In</li>
<li id="close"><img src="masui/img/close.png" class="close_button" id="close_button"/>
</li>
</ul>
</div>
<div class="user-image"><img src="masui/img/ca-logo.png"/></div>
<div id="errorMesg" style="color:red" align="center"></div>
<form class="form">
<ul class="login">
<li class="inline"><input id="CA-Username" type="text" class="input" required
placeholder="User Name"></li>
<li class="inline"><input id="CA-Password" type="password" class="input" required
placeholder="User Password"></li>
<li><input id="signin_button" class="btn" type="submit" value="SIGN IN"></li>
</ul>
</form>
<div class="wrapper">
<ul class="social-icons icon-circle list-unstyled list-inline">
<li id="lfacebook" class='disabled'>
<a href="#"><img id='ifacebook' src="masui/img/facebook_disabled.png"
onclick="socialLogin('facebook')"></a>
</li>
<li id='lgoogle' class='disabled'>
<a href="#"><img id='igoogle' src="masui/img/google_disabled.png"
onclick="socialLogin('google')"></a>
</li>
<li id="llinkedin" class="disabled">
<a href="#"><img id='ilinkedin' src="masui/img/linkedin_disabled.png"
onclick="socialLogin('linkedin')"></a>
</li>
<li id="lsalesforce" class="disabled">
<a href="#"><img id='isalesforce'
style="display:block; font-style:italic; font-size:21px; font-weight:bold; color:white; background-color:#4d4d4d; text-align:center; line-height: 100px;"
src="masui/img/salesforce_disabled.png" alt="salesforce"
onclick="socialLogin('salesforce')"></a>
</li>
<li id="lenterprise" class="disabled">
<a href="#"><img id='ienterprise' src="masui/img/enterprise_disabled.png"
onclick="socialLogin('enterprise')"></a>
</li>
</ul>
</div>
<div class="qrcode">
<a href="" class="qr"><img class="medicon" id='qr-code' src=""/></a>
</div>
</div>
</body>
<script>
document.getElementById("signin_button").addEventListener("click", function (event) {
event.preventDefault();
login();
});
document.getElementById("close_button").addEventListener("click", function (event) {
event.preventDefault();
close();
});
function login() {
var username = document.getElementById("CA-Username").value;
var password = document.getElementById("CA-Password").value;
if (username && password) {
var MAS = new MASPlugin.MAS();
MAS.completeAuthentication(function () {
MASPluginUtils.closePopup();
}, function (error) {
if (!MASPluginUtils.isEmpty(error) && !MASPluginUtils.isEmpty(error.errorCode) && !isNaN(error.errorCode)) {
let returnedError = null;
let errorMsgToDisplay = "";
let errorCodeLastDigits = error.errorCode % 1000;
try {
if (typeof error.errorMessage !== 'undefined' && !MASPluginUtils.isEmpty(error.errorMessage)) {
returnedError = JSON.stringify(error.errorMessage);
}
} catch (e) {
}
if (errorCodeLastDigits === 103) {
errorMsgToDisplay = "invalid request: Missing or duplicate parameters";
document.getElementById("errorMesg").innerHTML = errorMsgToDisplay;
} else if (errorCodeLastDigits === 202) {
errorMsgToDisplay = "Username or Password invalid";
document.getElementById("errorMesg").innerHTML = errorMsgToDisplay;
} else if (errorCodeLastDigits === 105) {
errorMsgToDisplay = "Device registration error. The device has already been registered.";
document.getElementById("errorMesg").innerHTML = errorMsgToDisplay;
} else if (errorCodeLastDigits === 107) {
errorMsgToDisplay = "The given mag-identifier is either invalid or points to an unknown device.";
document.getElementById("errorMesg").innerHTML = errorMsgToDisplay;
} else {
document.getElementById("errorMesg").innerHTML = (returnedError !=null ? returnedError: "Internal Server Error");
}
} else {
document.getElementById("errorMesg").innerHTML = "Internal Server Error";
}
}, username, password);
} else
document.getElementById("errorMesg").innerHTML = "invalid request: Missing or duplicate parameters";
}
function socialLogin(provider) {
var MAS = new MASPlugin.MAS();
MAS.doSocialLogin(
function () {
MASPluginUtils.closePopup();
},
function (error) {
if (!MASPluginUtils.isEmpty(error)) {
let returnedError = null;
try {
if (!MASPluginUtils.isEmpty(error.errorMessage)) {
returnedError = JSON.stringify(error.errorMessage);
}
} catch (e) {
}
document.getElementById("errorMesg").innerHTML = (returnedError !=null ? returnedError: "Internal Server Error");
}else{
document.getElementById("errorMesg").innerHTML = "Internal Server Error";
}
}, provider);
}
function close() {
var MAS = new MASPlugin.MAS();
MAS.cancelAuthentication(function () { }, function (error) {
if (!MASPluginUtils.isEmpty(error)) {
let returnedError = null;
try {
if (!MASPluginUtils.isEmpty(error.errorMessage)) {
returnedError = JSON.stringify(error.errorMessage);
}
} catch (e) {
}
document.getElementById("errorMesg").innerHTML = (returnedError !=null ? returnedError: "Internal Server Error");
}else{
document.getElementById("errorMesg").innerHTML = "Internal Server Error";
}
});
}
</script>
</html>