File: /www/wwwroot/vietktv.vn/active.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta https-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
}
.container {
height: 100%;
color: #FFFFFF;
background-image: url('https://vietktv.vn/background.png');
background-size: cover;
}
.login-wrapper {
background-color: #009944;
width: 585px;
height: auto;
border-radius: 10px;
padding: 95px 53px 69px 53px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
box-shadow: 0px 6px 12px rgba(0,0,0,.16);
}
.header {
font-size: 48px;
font-weight: bold;
text-align: center;
margin-bottom: 90px;
}
.input-item {
width: 100%;
margin-bottom: 20px;
border: 0;
padding: 13px;
border-bottom: 1px solid rgb(255, 255, 255, .5);
outline: none;
background-color: #009944;
margin-bottom: 24px;
font-size: 18px;
color: #FFFFFF;
}
.input-item:placeholder {
text-transform: uppercase;
}
.btn {
text-align: center;
padding: 10px;
width: 100%;
margin-top: 54px;
background-color: #FFFFFF;
color: #009944;
border-radius: 6px;
font-size: 24px;
box-shadow: 0px 3px 6px rgba(0,0,0,.16);
cursor: pointer;
}
.btn-active {
background-color: rgba(255, 255, 255, .16);
color: #FFFFFF;
}
.logo {
text-align: center;
}
.logo img {
width: 165px;
height: 33px;
}
a {
text-decoration-line: none;
color: #abc1ee;
}
.btn-right {
display: inline-block;
width: 196px;
text-align: center;
border: none;
background-color: #25C8D4;
color: #FFFFFF;
line-height: 44px;
border-radius: 6px;
font-size: 17px;
box-shadow: 0px 3px 6px rgba(0,0,0,.16);
cursor: pointer;
}
.btn-right-active {
background-color: rgba(37, 200, 212, .3);
color: rgba(255, 255, 255, .3);
}
.form-item-flex {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.form-item-title {
color: rgba(255, 255, 255, .5);
font-size: 21px;
display: inline-block;
text-align: left;
}
.footer-tip {
color: rgba(255, 255, 255, .6);
text-align: center;
height: 54px;
width: 100%;
margin: 18px 0;
}
.footer-tip-err {
color: #FFD500;
}
.check-tip {
color: #FFD500;
display: inline-block;
text-align: right;
}
@media (max-width: 480px) {
.login-wrapper {
width: 330px;
padding: 30px 15px 40px 15px;
font-size: 14px;
}
.header {
font-size: 24px;
margin-bottom: 50px;
}
.form-item-title {
font-size: 14px;
}
.btn-right {
width: 120px;
line-height: 30px;
font-size: 12px;
}
.input-item {
padding: 4px;
font-size: 14px;
}
.btn {
margin-top: 16px;
padding: 4px;
font-size: 18px;
}
.footer-tip {
font-size: 12px;
}
.check-tip {
font-size: 11px;
}
.logo img {
width: 110px;
height: 22px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="login-wrapper">
<div class="header">Login</div>
<div class="form-wrapper">
<div>
<div class="form-item-flex">
<div class="form-item-title">Phone</div>
<div class="check-tip" id="checkPhoneEmailMsg"></div>
</div>
<div class="form-item-flex">
<input type="text" id="phone" name="phone" onfocus="phoneFocus()" class="input-item" style="width: 55%;">
<button class="btn-right" id="getCode" onclick="getCode()">Get Verification Code</button>
<input type="hidden" id="sendCodeCountDown" value="60">
</div>
</div>
<div>
<div class="form-item-title">Verification Code</div>
<input type="text" id="activeCode" onfocus="activeCodeFocus()" name="activeCode" class="input-item">
</div>
<div class="btn" onclick="active()" id="activeBtn">Activation</div>
</div>
<div class="footer-tip" id="footMsg"></div>
<div class="logo">
<img src="https://vietktv.vn/logo.png"/>
</div>
</div>
</div>
<script>
let token = "";
let isActive = false;
let activeCode = "";
let randomCode = ""
// get random
function getRandom() {
var code_fill_str = ["000000", "00000", "0000", "000", "00", "0", ""];
var code = '' + parseInt(Math.random()*1000000);
return code_fill_str[code.length] + code;
}
function phoneFocus() {
document.getElementById("checkPhoneEmailMsg").innerHTML = "";
if(!isActive) {
document.getElementById('footMsg').innerHTML = "";
}
}
function activeCodeFocus() {
if(!isActive) {
document.getElementById('footMsg').innerHTML = "";
}
}
// get code
function getCode() {
document.getElementById("checkPhoneEmailMsg").innerHTML = "";
let phoneObj = document.getElementById("phone");
let phone = phoneObj.value;
if(phone != '' && phone.trim() != '') {
if(!checkPhoneNumber(phone)) {
document.getElementById("checkPhoneEmailMsg").innerHTML = "Format is incorrect!";
} else {
const Http = new XMLHttpRequest();
let ran = getRandom();
randomCode = ran;
const url='https://api.abenla.com/api/SendSms?loginName=ABL3E9G&sign=704a90255b02f7cd567759d4b3145a28&serviceTypeId=30&brandName=Verify3&phoneNumber='+phone+"&message="+ran;
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
if(Http.status == 200 && Http.readyState === 4) {
document.getElementById("getCode").setAttribute('class', 'btn-right btn-right-active');
document.getElementById("sendCodeCountDown").value = 60;
countdown();
let res = Http.responseText;
if(res && res != '') {
let resObj = JSON.parse(res);
if(resObj && resObj.Code == 106) {
activeCode = ran;
}else{
document.getElementById("checkPhoneEmailMsg").innerHTML = "Phone/email verification failed.";
}
}
}
}
}
}
}
function countdown() {
let n = document.getElementById("sendCodeCountDown").value;
if(n == 0) {
let getCodeObj = document.getElementById("getCode");
getCodeObj.disabled = false;
getCodeObj.innerHTML = "Get Verification Code";
getCodeObj.setAttribute('class', 'btn-right');
return ;
} else {
document.getElementById("getCode").disabled = true;
setTimeout("countdown()", 1000);
n--;
document.getElementById("getCode").innerHTML = "Re-Acquire (" + n + "S)";
document.getElementById("sendCodeCountDown").value = n;
}
}
function checkPhoneNumber(phone) {
var flag = false;
phone = phone.replace('(+84)', '0');
phone = phone.replace('+84', '0');
phone = phone.replace('0084', '0');
phone = phone.replace(/ /g, '');
if (phone != '') {
var firstNumber = phone.substring(0, 2);
if ((firstNumber == '09' || firstNumber == '08') && phone.length == 10) {
if (phone.match(/^\d{10}/)) {
flag = true;
}
} else if (firstNumber == '01' && phone.length == 11) {
if (phone.match(/^\d{11}/)) {
flag = true;
}
}
}
return flag;
}
// active
function active() {
if(!isActive) {
let footMsgObj = document.getElementById('footMsg');
footMsgObj.innerHTML = "";
let phoneObj = document.getElementById("phone");
let phone = phoneObj.value;
let activeCodeObj = document.getElementById("activeCode");
let activeCode = activeCodeObj.value;
if(phone != '' && phone.trim() != '' && activeCode != '' && activeCode.trim() != '') {
if(activeCode == randomCode) {
isActive = true;
footMsgObj.innerHTML = "<p>The account has been activated.</p><p>Please use the account to log in to the system!</p>";
footMsgObj.setAttribute('class', 'footer-tip');
document.getElementById("activeBtn").innerHTML = "Activated";
document.getElementById("activeBtn").setAttribute('class', 'btn btn-active');
}else{
isActive = false;
footMsgObj.innerHTML = "<p>Activation failed.</p><p>Please check if the registration information is correct?</p>";
footMsgObj.setAttribute('class', 'footer-tip footer-tip-err');
document.getElementById("activeBtn").innerHTML = "Activation";
document.getElementById("activeBtn").setAttribute('class', 'btn');
}
}
}
}
</script>
</body>
</html>