cordova-plugin-mas-core
Version:
Cordova MAS Foundation Plugin
385 lines (336 loc) • 10.3 kB
HTML
<html lang="en-IN">
<head>
<meta charset="utf-8">
<title>OTP Channel Selection</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: 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
}
#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
}
.close_button {
width: 25%;
}
.form a i.fa {
line-height: 35px
}
.slicon {
display: block;
max-width: 35px;
max-height: 35px;
width: auto;
height: auto;
}
.fb {
background: #e8e8e8
}
.tw {
background: #e8e8e8
}
.gp {
background: #e8e8e8
}
.in {
background: #e8e8e8
}
.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
}
select {
height: 30px;
line-height: 30px;
background: #f2f2f2;
font-size: 17px;
font-weight: bold;
}
.multiselect {
margin-bottom: 25px;
width: 290px;
}
.selectBox {
position: relative;
height: 25px;
line-height: 25px;
background: #f4f4f4;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
#checkboxes label {
display: block;
margin-top: 5px;
}
#checkboxes label:hover {
background-color: #9999ff;
}
</style>
<script>
(function(){
const payload = window.localStorage.getItem("masCallbackResult");
if(!MASPluginUtils.isEmpty(payload)){
const result = JSON.parse(payload);
const otpChannels = result.channels;
if (otpChannels.length > 1){
for (i = 0; i < otpChannels.length; i++){
if (document.getElementById(otpChannels[i])){
document.getElementById(otpChannels[i]).style.display = 'block';
}
}
}
}
})();
</script>
</head>
<body>
<div id="errorMesg" style="color:red"> </div>
<br>
<div id="login-form">
<div>
<ul id="" class="form-header">
<li>OTP Channels</li>
<li id="close"><img src="masui/img/close.png" class="close_button" id="close_button"></img>
</li>
</ul>
</div>
<div class="user-image"><img src="masui/img/ca-logo.png"></img>
</div>
<form class="form">
<ul class="login">
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select disabled>
<option style="text-align:center">Select an OTP channel</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label id="EMAIL" style="display:none">
<input class="otp" type="checkbox" value="EMAIL" />EMAIL</label>
<label id="SMS" style="display:none">
<input class="otp" type="checkbox" value="SMS" />SMS</label>
<label id="PUSH" style="display:none">
<input class="otp" type="checkbox" value="PUSH" />PUSH</label>
</div>
</div>
<li>
<input id="send_button" class="btn" type="submit" value="SEND">
</li>
</ul>
</form>
</div>
</body>
<script>
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
document.getElementById("send_button").addEventListener("click", function(event) {
event.preventDefault();
send();
});
document.getElementById("close_button").addEventListener("click", function (event) {
event.preventDefault();
var MAS = new MASPlugin.MAS();
MAS.cancelGenerateAndSendOTP(function(){},function(error){
let errorMsgToDisplay = "Internal Server Error.";
if (!MASPluginUtils.isEmpty(error) && !MASPluginUtils.isEmpty(error.errorMessage)) {
errorMsgToDisplay = error.errorMessage;
}
document.getElementById("errorMesg").innerHTML = errorMsgToDisplay;
});
});
function send() {
var checkArray = [];
$('input.otp').each(function() {
if ($(this).is(':checked')) {
checkArray.push($(this).val());
}
});
if (checkArray.length) {
var MAS = new MASPlugin.MAS();
MAS.generateAndSendOTP(function() {}, function(error) {
let errorMsgToDisplay = "Internal Server Error.";
if (!MASPluginUtils.isEmpty(error) && !MASPluginUtils.isEmpty(error.errorMessage)) {
errorMsgToDisplay = error.errorMessage;
}
document.getElementById("errorMesg").innerHTML = errorMsgToDisplay;
}, checkArray);
} else{
alert("You have to select atleast one OTP channel");
}
}
</script>
</html>