<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="common/layout/login">
<!--
 *******************************************************************************
 * @source  : signin2.html
 * @desc    : 2Factor인증 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.12.04   gagamel     최초 작성
 *******************************************************************************
 -->
<head>
	<title>2 Factor Signin</title>
</head>

<body>

<th:block layout:fragment="content">
	<form name="certForm" id="certForm" method="post">
		<div class="loginCont">
			<div class="logo"><img src="/image/login_logo.png" alt="logo"/></div>
			<div class="certiFrm">
				<h2><i class="fa fa-envelope-o" aria-hidden="true"></i>보안인증</h2>
				<div class="alertBox alert-danger" th:style="${error == null ? 'display: none;' : ''}" id="certFailAlert">
					<span th:text="${error}">인증번호가 유효하지 않습니다. 다시 확인하시고 입력해 주세요.</span>
					<button type="button" class="alertClose" onclick="uifnAlertClose('certFailAlert')">닫기</button>
				</div>
				<div class="input">
					<input type="hidden" name="certNo"/>
					<input type="text" name="certNo1" maxlength="1" numberOnly="numberOnly"/>
					<input type="text" name="certNo2" maxlength="1" numberOnly="numberOnly"/>
					<input type="text" name="certNo3" maxlength="1" numberOnly="numberOnly"/>
					<input type="text" name="certNo4" maxlength="1" numberOnly="numberOnly"/>
					<input type="text" name="certNo5" maxlength="1" numberOnly="numberOnly"/>
					<input type="text" name="certNo6" maxlength="1" numberOnly="numberOnly"/>
					<span class="countdown"></span>
				</div>
				<div class="info">
					<p class="dot">휴대전화로 전송된 인증번호 6자리를 3분 이내로 입력해 주세요.</p>
					<p class="dot">인증번호가 전송되지 않았거나, 입력시간 초과시 "재전송" 버튼을 눌러주세요.</p>
				</div>
				<div class="button">
					<button type="button" class="btn btn-black btn-lg" id="btnConfirm">확인</button>
					<button type="button" class="btn btn-gray btn-lg" id="btnResend">재전송</button>
				</div>
			</div>
		</div>
	</form>

<script th:inline="javascript">
/*<![CDATA[*/
	$("input[numberOnly]").keyup(function(e) {
		$(this).val($(this).val().replace(/[^0-9]/g,"")); //숫자만
		if (this.value.length == 1) {
			$(this).next('input').select();
			return false;
		};
	}).click(function(){
		$(this).select();
	});

	var expireTimer = false;
	var timeStart = "";
	
	var interval;
	var fnSetTimer = function() {
		timeStart = "3:00";
		$('.countdown').html(timeStart);
		
		interval = setInterval(function() {
			var timer = timeStart.split(':');
			var minutes = parseInt(timer[0], 10);
			var seconds = parseInt(timer[1], 10);
				--seconds;
				minutes = (seconds < 0) ? --minutes : minutes;
				seconds = (seconds < 0) ? 59 : seconds;
				seconds = (seconds < 10) ? '0' + seconds : seconds;
				$('.countdown').html(minutes + ':' + seconds);
				if (minutes == 0 && seconds == 0) { // 0:00인 경우
					clearInterval(interval);
					$("#certFailAlert span").html("입력시간이 초과되었습니다. [재전송] 버튼을 눌러 주세요."); //alertBox 오류메시지 전달
					$("#certFailAlert").removeClass("alert-success off").addClass("alert-danger").css("display","block");//alertBox 활성화
					expireTimer = true;
				};
				timeStart = minutes + ':' + seconds;
		}, 1000);
	}
	
	// 확인
	$('#btnConfirm').on('click', function() {
		if (expireTimer) {
			mcxDialog.alert('입력시간이 초과되었습니다. [재전송] 버튼을 눌러 주세요.');
			return;
		}
		
		var certNo = $('input[name=certNo1]').val() + $('input[name=certNo2]').val() + $('input[name=certNo3]').val()
				+ $('input[name=certNo4]').val() + $('input[name=certNo5]').val() + $('input[name=certNo6]').val();
		
		if (gagajf.isNull(certNo)) {
			mcxDialog.alertC('인증번호를 입력해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("input[name=certNo1]").focus();
				}
			});
			return;
		}
		
		if (certNo.length < 6) {
			mcxDialog.alertC('인증번호 6자리를 정확하게 입력해 주세요.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					$("input[name=certNo1]").select();
					$("input[name=certNo1]").focus();
				}
			});
			return;
		}
		
		$.get('/tfcertify/check/' + certNo
			, function(result) {
				if (!result) {
					mcxDialog.alertC('인증번호가 맞지 않습니다. 다시 입력해 주세요.', {
						sureBtnText: "확인",
						sureBtnClick: function() {
							$('#certForm')[0].reset();
							$("input[name=certNo1]").focus();
						}
					});
					return;
				}
				
				document.location.href = "/";
			});
	});
	
	// 재전송
	$('#btnResend').on('click', function() {
		$.post('/tfcertify/send'
			, function(result) {
				clearInterval(interval);
				expireTimer = false;
				$('.countdown').html(timeStart);
				fnSetTimer();
				$("#certFailAlert span").html("인증번호가 재전송 되었습니다.");
				$("#certFailAlert").removeClass("alert-danger").addClass("alert-success").css("display","block");//alertBox 활성화
				$('#certForm')[0].reset();
				$("input[name=certNo1]").focus();
			});
	})
	
	$(document).ready(function() {
		$("input[name=certNo1]").focus();
		fnSetTimer();
	});
/*]]>*/
</script>

</th:block>

</body>
</html>
