-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.php
More file actions
134 lines (119 loc) · 4.59 KB
/
index.php
File metadata and controls
134 lines (119 loc) · 4.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<style >
.view {
height: 100%;
}
.view { background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%)}
.btn-grad:hover { background-position: right center;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #141f1f;
}
input {
text-align: center;
}
</style>
</head>
<script type="text/javascript" src="jquery-2.2.0.min.js"></script>
<script type="text/javascript">
function sendOTP() {
$("#sendOtp").attr("disabled", true);
var data = {
/* "countryCode": $('#country_code').val(),*/
"mobileNumber": $('#number').val()
};
$.ajax({
url: 'http://localhost/sendOTPSample-PHP/sendotp.php?action=submitOTP',
type: 'POST',
data: data,
success: function (response) {
if (response == 'OTP SENT SUCCESSFULLY') {
$('#hiddenCode').val($('#country_code').val());
$('#hiddenNumber').val($('#number').val());
$('#verifyOtpForm').show();
$('#sendOtpForm').hide();
$('#alertMessage').html(response+ " PLEASE VERIFY.");
$("#sendOtp").attr("disabled", false);
}
},
error: function (jqXHR, textStatus, ex) {
console.log(textStatus + "," + ex + "," + jqXHR.responseText);
}
});
}
function verifyBySendOtp() {
$("#sendOtp").attr("disabled", true);
var data = {
/* countryCode: $('#hiddenCode').val(),*/
mobileNumber: $('#hiddenNumber').val(),
oneTimePassword: $('#oneTimePassword').val()
};
$.ajax({
url: 'http://localhost/sendOTPSample-PHP/sendotp.php?action=verifyBySendOtp',
type: 'POST',
data: data,
success: function (response) {
if (response == 'NUMBER VERIFIED SUCCESSFULLY') {
$('#verifyOtpForm').hide();
$('#sendOtpForm').show();
$('#alertMessage').html(response+ " TRY AGAIN.");
$("#sendOtp").attr("disabled", true);
}else{
$('#alertMessage').html(response+ " TRY AGAIN.");
}
},
error: function (jqXHR, textStatus, ex) {
console.log(textStatus + "," + ex + "," + jqXHR.responseText);
}
});
}
</script>
</head>
<body class="view">
<pre>
<!-- Start your project here-->
<div >
<div class="flex-center flex-column flex-row z-depth-5 white" style="margin: auto; max-width: 850px; height: auto; " >
<br />
<h1 class="animated fadeIn mb-4 z-depth-2 h1-responsive blue-text" style="padding: 5px 15px; ">TEST SendOTP Service</h1>
<hr />
<h6 class="animated h6-responsive fadeIn mb-1 ">Thank you for using our product. We're glad you're with us.</h6>
<div id="alertMessage" class="-text" ></div>
<form id="sendOtpForm" role="form" >
<input type="text" name="number" placeholder="Enter Mobile number" id="number" ><br />
<center><input type="button" class="btn btn-info waves-effect -text" name="sendOtp" id="sendOtp" value="Request OTP" onclick="sendOTP()"> </center>
</form>
<form id="verifyOtpForm" role="form" style="display:none">
<input type="hidden" name="hiddenCode" id="hiddenCode">
<input type="hidden" name="hiddenNumber" id="hiddenNumber">
<input type="text" name="oneTimePassword" placeholder="Enter OTP" id="oneTimePassword" class="-text"><br />
<center><input type="button" class="btn btn-info waves-effect -text" name="verifyOtp" id="verifyOtp" value="Verify OTP" onclick="verifyBySendOtp()"></center>
</form>
<br />
<p class="animated fadeIn white-text">Msg91 Team</p> <br /><br />
</div>
</div>
<!-- /Start your project here-->
</pre>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
</body>
</html>