Files
izyim-api/public/verify-phone-number.html
T
2018-06-06 16:03:05 +08:00

118 lines
4.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>AzureUI - Term</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/global.style.css" />
</head>
<body>
<div class="wrapper">
<div class="wrapper-inline">
<div class="form-divider"></div>
<div class="form-row txt-center aztitle">
Verify your phone number
</div>
<div class="form-row txt-center">
IZYIM will send an SMS message to verify your phone number. Enter your country code and phone number:
</div>
<div class="form-divider"></div>
<!-- Here Lies Main Start Here -->
<main>
<section class="container">
<form>
@csrf
<div class="form-row-group with-icons">
<div class="form-row no-padding">
<div style="position:absolute; top:10px">
<a class="fa fa-flag"></a>
</div>
<select class="form-element">
<option value="">Select your country</option>
<option value="1" selected>Malaysia +6</option>
<option value="2">China +86</option>
</select>
</div>
<div class="form-row no-padding">
<div style="position:absolute; top:10px">
<a class="fa fa-phone"></a>
</div>
<input id="mobile" type="tel" class="form-element" placeholder="Enter your phone number" required />
</div>
</div>
<div class="form-divider"></div>
<!--Error Alert-->
<div class="alert alert-danger" role="alert" style="display: none"></div>
<!-- AzFooter Start Here-->
<div class="azfooter">
<div class="azfmain-button">
<div class="form-row txt-center">
<a href="#" id="send-verification" class="button block green">NEXT</a>
</div>
</div>
<div class="azfmain-txt">
<div class="form-row txt-center">
Carrier SMS charges may apply
</div>
</div>
</div> <!-- AzFooter Ended Here -->
</form>
</section>
</main>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script type="text/javascript">
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}
$(document).ready(function() {
$('#send-verification').click(function() {
var mobile = $('#mobile').val();
$.ajax({
type: "POST",
url: "api/send-verification",
data: {
phone: $('#mobile').val()},
success: function(data) {
document.location.href="verify-code-number.html";
},
Cookies:createCookie('phone', mobile, 60),
error: function(data) {
$('.alert').html(data.responseJSON.message);
$('.alert').show();
}
});
})
})
</script>
</body>
</html>