<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>


<script language=javascript>


//보안 로그인
$(document).ready(function(){
	
	// 허용 IP 등록
	$(".btn_allow_ip_add").click(function () {
		
		var ip = $('#cennectIp').val();
		
		if (confirm("현재 접속중인 IP["+ip+"]를 접속 허용 IP로 등록하시겠습니까?")) {

			$.ajax({
				type: "POST",
				url: "/cert/ip/insertCennetCertIp.do",
				data: null,
				dataType:'json',
				async: false,
				success: function (returnData) {
					
					if(returnData.status == 'OK'){
						alert("접속 허용 IP["+ip+"] 등록이 완료되었습니다.");
						location.reload();  
					}
					else
					{
						alert("오류가 발생하였습니다.");
					}
				},
				error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
			});
			
		} else {}
	});

	
	// secuLoginFlag 값에 따라 해당하는 탭에 'on' 클래스 추가
    if ('${mberManageVO.secuLoginFlag}' === 'Y') {
        $('.security_tab a').filter(function() {
            return $(this).text() === 'ON';
        }).addClass('on');
    	$('.security_tab').addClass('on');
    } else {
        $('.security_tab a').filter(function() {
            return $(this).text() === 'OFF';
        }).addClass('on');
    	$('.security_tab').addClass('off');
    }
	// on/off 시 confirm 창 노출
	$('.security_tab').click(function (e) {
		if ($(this).find("a.on").text().trim() == "ON") {
			if (!confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능합니다. 해제 시 계정정보 유출에 따른 피해가 발생할 수 있으므로 이를 권장하지 않습니다.")) {
				$(this).find("a.on").siblings("a").removeClass("on");
			} else {
				openKMCISWindow();
// 				$(this).find("a.on").removeClass("on").siblings("a").addClass("on");
// 				$(this).removeClass("on").addClass("off");
			}
		} else if($(this).find("a.on").text().trim() == "OFF") {
			if (!confirm("보안로그인 설정 시 미리 등록한 IP로 접속하거나 휴대폰 SMS 추가 인증을 진행하셔야 합니다.")) {
				$(this).find("a.on").siblings("a").removeClass("on");
				
			} else {
				$(this).find("a.on").removeClass("on").siblings("a").addClass("on");
				$(this).removeClass("off").addClass("on");
				callTo();
			}
		}
		
	});
	
	// 인증번호 발송 버튼
	$('#certReqBtn').on('click', function(){
		var certReqPhone = $('#certReqPhone').val();
		
		if (certReqPhone==''){
			alert("핸드폰번호를 입력해주세요.");
			return;
		}

		// 2. 휴대폰 번호 유효성 검사
		const phoneRegex = /^(010(\d{3}\d{4}|\d{4}\d{4})|011(\d{3}\d{4}|\d{4}\d{4}))$/;
		if (!phoneRegex.test(certReqPhone)) {
			alert("유효한 핸드폰 번호를 입력해주세요.");
			return;
		}
		
		var params = {"mbtlnum" : certReqPhone }
		$.ajax({
			type: "POST",
			url : "<c:url value='/cert/phone/sendSysMsgDataAjax.do' />", 
			data: params,
			dataType:'json',
			async: false,
			success: function (returnData) {
				console.log('returnData : ', returnData);
				if(returnData.status == 'OK'){
					alert(returnData.object.msg);
					$("#certReqPhone").prop("disabled", true);
				}
				else if(returnData.status == 'CONFLICT')
				{
					alert(returnData.message);
					return false;
				}
				else
				{
					alert("오류가 발생하였습니다.");
				}
			},
			error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
		});
	});
	
	// 인증 버튼
	$('#certConfirmBtn').on('click', function(){
		var certReqPhone = $('#certReqPhone').val();
		var certNumber = $('#certNumber').val();
		
		if (certNumber==''){
			alert("인증번호를 입력해주세요.");
			return;
		}
		var params = {"mbtlnum" : certReqPhone, "checkNo" : certNumber }
		$.ajax({
			type: "POST",
			url : "<c:url value='/cert/phone/selectSysMsgLogCheck.do' />", 
			data: params,
			dataType:'json',
			async: false,
			success: function (returnData) {
				console.log('returnData : ', returnData);
				if(returnData.status == 'OK'){
//					alert(returnData.object.msg);
					regCertPhone(params);
				}
				else if(returnData.status == 'BAD_REQUEST'){
					alert(returnData.message);
				}
				else
				{
					alert("오류가 발생하였습니다.");
				}
			},
			error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
		});
	});
	
	

	$('#showLoginBtn').on('click', function() {
		if ($('#securityLogin').is(':visible')) {
			$('#securityLogin').hide();
		} else {
			$('#securityLogin').show();
		}
	});
	
	

	// IP 추가 버튼 클릭 시 tr 추가
	$(".btn_ip_plus").click(function () {

		var chk = false;

			$.ajax({
				type: "POST",
				url: "/cert/ip/selectMberCertIpList.do",
				data: null,
				dataType:'json',
				async: false,
				success: function (returnData) {
					console.log('returnData : ', returnData);
					if (returnData.status === "OK") {
						const objects = returnData.object; // 배열 데이터

						// 배열의 개수 구하기
						const count = objects.length;
						console.log('count :', count);
						if(count > 9){
							alert("접속 IP 등록은 10개까지 가능합니다.");
							chk = true;
							return false;
						}
					} else {
						alert("데이터를 불러오는 데 실패했습니다.");
					}
				},
				error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
			});
		
		if(chk){
			return false;
		}
		
		
		// 추가할 HTML 구조
		const ipTr = `
			<tr class="ip-new">
				<td><input type="text" class="input_text"
					oninput="this.value = this.value.replace(/[^0-9.]/g, '');" maxlength="15"/></td>
				<td><input type="text" maxLength="25" class="input_text"></td>
				<td>-</td>
				<td>
					<button type="button" class="btnType btnType5" id="ipRegBtn">등록</button>
				</td>
			</tr>
		`;

		// 이미 추가된 `.ip-row`가 있는지 확인
		if ($("#ipTable tbody .ip-new").length === 0) {
			$("#ipTable tbody").prepend(ipTr); // 중복되지 않으면 추가
		} else {
			alert("이미 추가된 항목이 있습니다.");
		}
	});
	
	
	// IP 등록버튼
	$(document).on('click', '#ipRegBtn', function () {
		// 현재 클릭된 버튼의 부모 tr 요소
		const $currentRow = $(this).closest('tr');

		// 입력값 가져오기
		const ipValue = $currentRow.find('td:eq(0) input').val(); // 첫 번째 열 (IP)
		const memoValue = $currentRow.find('td:eq(1) input').val(); // 두 번째 열 (메모)

		// 예외 처리
		if (!ipValue) {
			alert("등록할 IP를 입력해주세요.");
			$currentRow.find('td:eq(0) input').focus();
			return;
		}
		
		
		const ipRegex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
		
		if (!ipRegex.test(ipValue)) {
			alert("유효하지 않은 IP 주소입니다.");
			return false;
		}

		var params = {
			"certIp" : ipValue
			, "certMemo" : memoValue
		}
		
		if(!confirm("IP를 등록 하시겠습니까?")){
			return false;
		}
		$.ajax({
			type: "POST",
			url: "/cert/ip/insertCertIp.do",
			data: params,
			dataType:'json',
			async: false,
			success: function (returnData) {
				if(returnData.status == 'OK'){
					findAllCertIp();
				}else if(returnData.status == 'CONFLICT'){
					alert(returnData.message);
					return false;
				}
				else
				{
					alert("오류가 발생하였습니다.");
				}
			},
			error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
		});
	});


	$(document).on('click', '.phoneModiBtn', function () {
		// 현재 클릭된 버튼의 tr 요소를 가져옴
		const $tr = $(this).closest('tr');

		// 별칭과 메모 td 요소를 가져옴
		const $aliasTd = $tr.find('td').eq(1); // 두 번째 컬럼(별칭)
		const $memoTd = $tr.find('td').eq(2); // 세 번째 컬럼(메모)

		// 기존 텍스트 값 저장
		const aliasValue = $aliasTd.text().trim(); // 별칭 값
		const memoValue = $memoTd.text().trim();  // 메모 값
		
		console.log('aliasValue : ', aliasValue);
		console.log('memoValue : ', memoValue);

		// td 내용을 input 필드로 변경
		$aliasTd.html('<input type="text" class="input_text" maxlength="12" value="' + aliasValue + '">');
		$memoTd.html('<input type="text" class="input_text" maxlength="25" value="' + memoValue + '">');

		// aliasTd 내의 input 필드에 포커스 설정
		const $aliasInput = $aliasTd.find('.input_text');
		$aliasInput.focus().val($aliasInput.val()); // 포커스 후 커서를 맨 끝으로 이동
		
		$(this).removeClass("phoneModiBtn").attr("onclick", "fn_phoneSave(this);").text("저장");
	});

	$(document).on('click', '#phonePlus', function () {

		$.ajax({
			type: "POST",
			url: "/cert/phone/selectMberCertPhoneList.do",
			data: null,
			dataType:'json',
			async: false,
			success: function (returnData) {
				console.log('returnData : ', returnData);
				if (returnData.status === "OK") {
					const objects = returnData.object; // 배열 데이터

					// 배열의 개수 구하기
					const count = objects.length;
					console.log('count :', count);
					if(count < 5){
						$('#phonePlusPopupOpen').click()
					}else{
						alert("인증 휴대폰 번호는 5개까지 등록 가능합니다.");
						return false;
					}
				} else {
					alert("데이터를 불러오는 데 실패했습니다.");
				}
			},
			error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
		});
	});

	

	findAllCertIp();
	findAllCertPhone();
	

	console.log('${mberCertLoginLogVO.secuLoginFlag}');
	var secuLoginFlag = '${mberCertLoginLogVO.secuLoginFlag}';
	if(secuLoginFlag == 'Y'){
		$('#secuOffBtn').click();
	}else if(secuLoginFlag == 'N'){
		$('#secuOnBtn').click();
		
	}
	// 새로고침 시 값을 초기화
	history.replaceState({}, null, location.pathname);
	
});

function fn_phoneSave(obj){
	// 현재 클릭된 버튼의 tr 요소를 가져옴
	const $tr = $(obj).closest('tr'); // 'this' 대신 전달된 'obj' 사용

	// 각 td 요소에서 데이터를 추출
	const mbtlnum = $tr.find('td').eq(0).text().trim(); // 첫 번째 컬럼(번호)
	const certAlias = $tr.find('td').eq(1).find('input').val().trim(); // 두 번째 컬럼(별칭)
	const certMemo = $tr.find('td').eq(2).find('input').val().trim(); // 세 번째 컬럼(메모)

	// 콘솔 출력
	console.log('mbtlnum : ', mbtlnum);
	console.log('certAlias : ', certAlias);
	console.log('certMemo : ', certMemo);
	

	var params = {
		"mbtlnum" : mbtlnum
		, "certAlias" : certAlias
		, "certMemo" : certMemo
	}

	$.ajax({
		type: "POST",
		url: "/cert/phone/updateCertPhone.do",
		data: params,
		dataType:'json',
		async: false,
		success: function (returnData) {
			if(returnData.status == 'OK'){
				findAllCertPhone();
			}
			else
			{
				alert("오류가 발생하였습니다.");
			}
		},
		error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
	});
	
	
}


function regCertPhone(params){
	
	$.ajax({
		type: "POST",
		url: "/cert/phone/insertCertPhone.do",
		data: params,
		dataType:'json',
		async: false,
		success: function (returnData) {
			console.log('returnData : ', returnData);
			if(returnData.status == 'OK'){
				$('.tooltip-close').click()
				alert(returnData.message);
				findAllCertPhone();
			}else if(returnData.status == 'CONFLICT'){
				alert(returnData.message);
				return false;
			}
			else
			{
				alert("오류가 발생하였습니다.");
			}
		},
		error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
	});
	
	
}

function findAllCertIp(){
	
	$.ajax({
		type: "POST",
		url: "/cert/ip/selectMberCertIpList.do",
		data: null,
		dataType:'json',
		async: false,
		success: function (returnData) {
			if (returnData.status === "OK") {
				const objects = returnData.object; // 배열 데이터
				
				// tbody의 기존 내용 삭제
				const $tbody = $("#ipTable tbody");
				$tbody.empty();
				if (objects.length === 0) {
					// 데이터가 없을 때 tr과 td 추가
					const $emptyRow = $("<tr></tr>").append(
						$("<td></td>")
							.attr("colspan", 4)
							.text("등록된 IP 주소가 없습니다.")
							.addClass("empty-row") // 스타일을 추가할 경우
					);
					$tbody.append($emptyRow);
				} else {
					// 배열 데이터를 기반으로 tr 생성 후 tbody에 추가
					$.each(objects, function(index, obj) {
						const $tr = $("<tr></tr>"); // tr 요소 생성
	
						// 각 td 요소 생성
						const $certIp = $("<td></td>").text(obj.certIp || "");
						const $certMemo = $("<td></td>").text(obj.certMemo || "");
						const $frstRegistPnttm = $("<td></td>").text(obj.frstRegistPnttm || "등록되지 않음");
						const $deleteBtn = $("<button></button>")
							.addClass("btnType btn_text btn_lightgray fill btn_28")
							.text("삭제")
							.attr("type", "button")
							.attr("id", "ipDelBtn")
							.on("click", function() {
								deleteRow(obj.certIp); // 삭제 버튼 클릭 시 실행
							});
	
						// 관리 버튼을 감쌀 td 생성
						const $deleteTd = $("<td></td>").append($deleteBtn);
	
						// tr에 td 추가
						$tr.append($certIp, $certMemo, $frstRegistPnttm, $deleteTd);
	
						// tbody에 tr 추가
						$tbody.append($tr);
					});
				}
			} else {
				alert("데이터를 불러오는 데 실패했습니다.");
			}
		},
		error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
	});
}

function findAllCertPhone(){
	
	$.ajax({
		type: "POST",
		url: "/cert/phone/selectMberCertPhoneList.do",
		data: null,
		dataType:'json',
		async: false,
		success: function (returnData) {
			console.log('returnData : ', returnData);
			if (returnData.status === "OK") {
				const objects = returnData.object; // 배열 데이터
				
				// tbody의 기존 내용 삭제
				const $tbody = $("#phoneTable tbody");
				$tbody.empty();

				// 배열 데이터를 기반으로 tr 생성 후 tbody에 추가
				$.each(objects, function(index, obj) {
					const $tr = $("<tr></tr>"); // tr 요소 생성

					// 각 td 요소 생성
					const $mbtlnum = $("<td></td>").text(obj.mbtlnum || "");
					const $certAlias = $("<td></td>").text(obj.certAlias || "-");
					const $certMemo = $("<td></td>").text(obj.certMemo || "-");
					const $frstRegistPnttm = $("<td></td>").text(obj.frstRegistPnttm || "등록되지 않음");
					

					const $buttonTd = $("<td></td>");

					if (obj.frstRegistPnttm !== "-") {
						const $modiBtn = $("<button></button>")
							.addClass("btnType btnType5 btn_edit phoneModiBtn")
							.text("수정")
							.attr("type", "button")
							.attr("style", "margin:0 5px 0 0;");
	
						
						const $deleteBtn = $("<button></button>")
							.addClass("btnType btn_text btn_lightgray fill btn_28")
							.text("삭제")
							.attr("type", "button")
							.attr("id", "phoneDelBtn")
							.on("click", function() {
								fn_PDelRow(obj.mbtlnum); // 삭제 버튼 클릭 시 실행
							});
						$buttonTd.append($modiBtn, $deleteBtn);
					}else{
						// 등록일시가 없으면 빈 td로 유지
						$buttonTd.text("-");
					}
					// 관리 버튼을 감쌀 td 생성

					// tr에 td 추가
					$tr.append($mbtlnum, $certAlias, $certMemo, $frstRegistPnttm, $buttonTd);

					// tbody에 tr 추가
					$tbody.append($tr);
				});
			} else {
				alert("데이터를 불러오는 데 실패했습니다.");
			}
		},
		error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
	});
}

function fn_PDelRow(p_mbtlnum){
	console.log('p_mbtlnum : ', p_mbtlnum);
	var params = {
		"mbtlnum" : p_mbtlnum
	}
	if(!confirm("인증 휴대폰번호를 삭제 하시겠습니까?")){
		return false;
	}
	$.ajax({
		type: "POST",
		url: "/cert/phone/deleteCertPhone.do",
		data: params,
		dataType:'json',
		async: false,
		success: function (returnData) {
			if(returnData.status == 'OK'){
				findAllCertPhone();
			}
			else
			{
				alert("오류가 발생하였습니다.");
			}
		},
		error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
	}); 
	
}
//IP 삭제
function deleteRow(p_ip){


	var myIp = $('#cennectIp').val();
	console.log('p_ip : ', p_ip);
	
	
	var params = {
		"certIp" : p_ip
	}
	if(!confirm("IP를 삭제 하시겠습니까?")){
		return false;
	}
	$.ajax({
		type: "POST",
		url: "/cert/ip/deleteCertIp.do",
		data: params,
		dataType:'json',
		async: false,
		success: function (returnData) {
			if(returnData.status == 'OK'){
				if(myIp == p_ip){
					location.reload();
					
				}
				
				findAllCertIp();
			}
			else
			{
					alert("오류가 발생하였습니다.");
			}
		},
		error: function (e) { alert("오류가 발생하였습니다."); console.log("ERROR : ", e); }
	}); 
}






//휴대푠 번호 등록 [시작]--------------------------------------------------------------------------------------------
window.name = "kmcis_web_sample";
var KMCIS_window;
//휴대폰 인증팝업 열기
 function openKMCISWindow(){ 
 //본인인증시도 로그 
 certAccessLog();
	var UserAgent = navigator.userAgent;
	/* 모바일 접근 체크*/
	// 모바일일 경우 (변동사항 있을경우 추가 필요)
	if (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) {
		document.reqKMCISForm.target = 'KMCISWindow';  // 모바일
	} else { // 모바일이 아닐 경우
		KMCIS_window = window.open('', 'KMCISWindow', 'width=425, height=550, resizable=0, scrollbars=no, status=0, titlebar=0, toolbar=0, left=435, top=250' );
	
		if(KMCIS_window == null){
			alert(" ※ 윈도우 XP SP2 또는 인터넷 익스플로러 7 사용자일 경우에는 \n    화면 상단에 있는 팝업 차단 알림줄을 클릭하여 팝업을 허용해 주시기 바랍니다. \n\n※ MSN,야후,구글 팝업 차단 툴바가 설치된 경우 팝업허용을 해주시기 바랍니다.");
		}
	
		document.reqKMCISForm.target = 'KMCISWindow';
	}
	
	document.reqKMCISForm.action = 'https://www.kmcert.com/kmcis/web/kmcisReq.jsp';
	document.reqKMCISForm.submit();
}

///web/user/selectSecurityAuthn.do 리다이렉트 URL

//자식창에서 호출
function callTo() {
	$.ajax({
        url: '/web/user/mberSecureLoginAjax.do',
        type: 'POST',
        /*contentType: 'application/json',
         data: JSON.stringify({
        	secuLoginFlag: '${mberManageVO.secuLoginFlag}'
        }), */
        success: function(response) {
			if(response === 'success'){
				alert('변경이 완료되었습니다.');
				location.reload();
			}else{
				alert('변경에 실패했습니다. 다시 시도해 주세요.');
				location.reload();
			}
    		
        },
        error: function(error) {
        	alert("error");
        }
    });
}

//자식창에서 호출
function callToTwo(msg, winRef) {
	if (winRef) {
        winRef.close();
    }
	alert(msg);
	localtion.reload();
}


function fn_phonePopClean(){
	console.log('ddd')
	$('#certReqPhone').val('');
	$('#certNumber').val('');
}

function linkPage(pageNo){
	var listForm = document.listForm ;
	listForm.pageIndex.value = pageNo ;
	listForm.submit();
}

//휴대푠 번호 등록 [끝]--------------------------------------------------------------------------------------------

</script>
<form name="reqKMCISForm" method="post" action="#">
	<input type="hidden" id="tr_url" name="tr_url" value = "${certVO.tr_url}">
	<input type="hidden" id="tr_add" name="tr_add" value = "${certVO.tr_add}">
	<input type="hidden" id="tr_cert" name="tr_cert" value = "${certVO.tr_cert}">
	<input type="hidden" name="tr_ver"      value = "V2">
</form>
<form name="listForm" action="<c:url value='/web/user/mberSecureLogin.do'/>" method="post">
	<input name="pageIndex" type="hidden" value="<c:out value='${mberCertLoginLogVO.pageIndex}'/>"/>
</form>
	<div class="mask"></div>

	<!-- 휴대폰인증 팝업 -->
	<div class="tooltip-wrap">
		<div class="popup-com certify_layer popup05" tabindex="0" data-tooltip-con="popup05" data-focus="popup05" data-focus-prev="popup05-close" style="width: 500px;">
			<div class="popup_heading">
				<p>휴대폰 인증</p>
				<button type="button" class="tooltip-close" data-focus="popup05-close" onclick="fn_phonePopClean()"><img src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
			</div>
			<div class="layer_in">
				<div class="hascont">
					<table class="layer_tType1">
						<caption>본인인증(step1) 표</caption>
						<colgroup>
							<col style="width: 95px">
							<col style="width: auto">
						</colgroup>
						<tbody>
							<tr>
								<th>핸드폰번호</th>
								<td>
									<label for="" class="label">핸드폰번호 입력</label>
									<input type="text" placeholder="‘-’없이 번호만 입력 " id="certReqPhone" onfocus="this.placeholder=''" 
										onblur="this.placeholder='‘-’없이 번호만 입력 '" class="inputLight" style="width: 200px;"
										oninput="this.value = this.value.replace(/[^0-9]/g, '');" maxlength="14"/>
									<button type="button" id="certReqBtn" class="btnType btnType6" style="width:90px">인증요청</button>
								</td>
							</tr>
							<tr>
								<th>인증번호</th>
								<td>
									<label for="" class="label">인증번호 입력</label>
									<input type="text" placeholder="인증번호 6자리 입력" id="certNumber" maxlength="7" onfocus="this.placeholder=''" onblur="this.placeholder='인증번호 6자리 입력'" class="inputLight" style="width: 200px;">
									<button type="button" id="certConfirmBtn" class="btnType btnType6" style="width:90px">확인</button>
								</td>
							</tr>
						</tbody>
					</table>
					<div class="popup_btn_wrap2">
						<button type="button" class="tooltip-close" data-focus="popup05-close" data-focus-next="popup05">닫기</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--// 휴대폰인증 팝업 -->

<div class="inner">
	<!-- send top -->
	<div class="send_top">
		<!-- tab button -->
		<%@include file="/WEB-INF/jsp/web/user/mypageHeader.jsp"%>
		<!--// tab button -->
		<!-- 마이페이지 - 회원해지 -->
		<div class="mypage_content current" id="tab5_7">
					<div class="heading">
						<h2>보안로그인</h2>
					</div>
					<div class="my_dashboard">

						<!-- 보안로그인 -->
						<div class="security_login">

							<ul class="explanation_wrap box info">
								<li>· 사이트 부정로그인으로 인한 피해를 방지할 수 있는 2차 로그인 인증 서비스입니다. </li>
								<li>· 인증 휴대폰번호 추가 등록 또는 IP 접속 허용을 통해 편리한 사용이 가능합니다.</li>
								<li>· 보안로그인 기능을 사용할 경우 로그인 시 등록한 휴대폰번호로 추가 인증이 진행됩니다.</li>
							</ul>


							<!-- 보안로그인 설정(허용 IP 아닌 경우) -->
							<div class="security_set box">
								<div class="title_wrap">
									<p class="dashboard_title">보안로그인</p>
									<div class="title_box ip_add_wrap">
										<span>현재 접속중인 IP : <b><c:out value="${cennectIP }"/> <c:if test="${chkcertRegIP }"> [허용 IP] </c:if> </b></span>
										<input type="hidden" id="cennectIp" value="<c:out value="${cennectIP }"/>"/>
										<c:if test="${!chkcertRegIP }">
											<button type="button" class="btnType btnType6 btn_allow_ip_add">허용 IP 등록</button>
										</c:if>
									</div>
								</div>

								<div class="set_area">
								<c:if test="${not empty certLogRegDate }">
									<p class="lately_date">최근 변경일시 : <span><c:out value="${certLogRegDate }"/></span></p>
								</c:if>

    								<input type="hidden" id="secuLoginFlag" value="${secuLoginFlag}" />
									<div class="tab_depth1 security_tab">
										<a href="#none" id="secuOnBtn">ON</a>
										<a href="#none" id="secuOffBtn">OFF</a>
									</div>
								</div>
							</div>
							<!-- //보안로그인 설정(허용 IP 아닌 경우) -->

							<!-- 보안로그인 설정(허용 IP인 경우) -->
<!-- 							<div class="security_set box"> -->
<!-- 								<div class="title_wrap"> -->
<!-- 									<p class="dashboard_title">보안로그인</p> -->
<!-- 									<div class="title_box ip_add_wrap"> -->
<!-- 										<span>현재 접속중인 IP : <b>000.000.000.00 [허용 IP]</b></span> -->
<!-- 									</div> -->
<!-- 								</div> -->

<!-- 								<div class="set_area"> -->
<!-- 									<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p> -->

<!-- 									<div class="tab_depth1"> -->
<!-- 										<a href="#none" class="on">ON</a> -->
<!-- 										<a href="#none">OFF</a> -->
<!-- 									</div> -->
<!-- 								</div> -->
<!-- 							</div> -->
							<!-- //보안로그인 설정(허용 IP인 경우) -->

							<!-- 인증 휴대폰번호 관리 -->
							<div class="title_area">
								<p class="dashboard_title">인증 휴대폰번호 관리</p>
								<p class="qmMark">?</p>
								<div class="hover_cont" style="width:330px;left:240px;top:25px;">
									<p>인증에 사용할 휴대폰번호를 추가로 등록하여 관리할 수 있습니다. <br>
										(등록 시 휴대폰 인증 필요)</p>
								</div>
								<button type="button" id="phonePlus" class="btn_plus"><img src="/publish/images/content/mypage_plus.png" alt="더보기"></button>
								<input type="hidden" data-tooltip="popup05" id="phonePlusPopupOpen"/>
							</div>

							<div class="table_wrap" id="phoneTable">
								<table>
									<colgroup>
										<col style="width: 140px;">
										<col style="width: auto;">
										<col style="width: auto;">
										<col style="width: 160px;">
										<col style="width: 140px;">
									</colgroup>
									<thead>
										<tr>
											<th scope="col">휴대폰번호</th>
											<th scope="col">별칭</th>
											<th scope="col">메모</th>
											<th scope="col">등록일시</th>
											<th scope="col">관리</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td colspan="5">등록된 IP 주소가 없습니다.</td>
										</tr>
										<!-- <tr>
											<td>010-0000-0000</td>
											<td class="td_memo">메모 내용</td>
											<td>2024-11-04 11:54</td>
											<td>
												<button type="button" class="btnType btnType5 btn_edit" style="margin:0 5px 0 0;" onclick="memoEdit(this);">수정
												</button><button type="button" class="btnType btn_text btn_lightgray fill btn_28">삭제</button>
											</td>
										</tr> -->
									</tbody>
								</table>
							</div>
							<!-- //인증 휴대폰번호 관리 -->

							<!-- 접속 IP관리 -->
							<div class="title_area">
								<p class="dashboard_title">접속 IP 관리</p>
								<p class="qmMark">?</p>
								<div class="hover_cont" style="width:380px;left:160px;top:25px;">
									<p>접속 IP를 미리 등록할 경우 2차 로그인 인증 없이 접속이 가능합니다. <br>
										<span>(공용 PC는 보안상의 이유로 등록을 권장하지 않습니다.)</span></p>
								</div>
								<button type="button" class="btn_plus btn_ip_plus"><img src="/publish/images/content/mypage_plus.png" alt="더보기"></button>
							</div>

							<div class="table_wrap" id="ipTable">
								<table>
									<colgroup>
										<col style="width: 26%;">
										<col style="width: auto;">
										<col style="width: 26%;">
										<col style="width: 100px;">
									</colgroup>
									<thead>
										<tr>
											<th scope="col">허용IP</th>
											<th scope="col">메모</th>
											<th scope="col">등록일시</th>
											<th scope="col">관리</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td colspan="4">등록된 IP 주소가 없습니다.</td>
										</tr>
<!-- 										<tr> -->
<!-- 											<td>192.168.0.0</td> -->
<!-- 											<td>dadfadfjadkfjalkdjfajflajdlfjaldjflajd</td> -->
<!-- 											<td>2024-11-11 11:11</td> -->
<!-- 											<td><button type="button" class="btnType btn_text btn_lightgray fill btn_28">삭제</button></td> -->
<!-- 										</tr> -->
									</tbody>
								</table>
							</div>
							<!-- //접속 IP관리 -->


							<!-- 로그인 내역 -->
							<div class="title_area">
								<p class="dashboard_title">로그인 내역 <span class="small_text">로그인 내역은 최대 3개월까지만 보관됩니다.</span></p>
							</div>

							<div class="table_wrap">
								<table>
									<colgroup>
										<col style="width:calc(100% /3);">
										<col style="width:calc(100% /3);">
										<col style="width:calc(100% /3);">
									</colgroup>
									<thead>
										<tr>
											<th scope="col">로그인 일시</th>
											<th scope="col">로그인 IP</th>
											<th scope="col">로그인 환경</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach var="result" items="${resultList}" varStatus="status">
										<tr>
											<td><c:out value="${result.loginDt}"/></td>
											<td><c:out value="${result.loginIp}"/></td>
											<td><c:out value="${result.loginDevice}"/></td>
										</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
							<!-- //로그인 내역 -->
							<!-- pagination -->
							<!-- <ul class="pagination">
								<li class="page_first"><button><img src="/publish/images/content/page_first.png" alt=""></button></li>
								<li class="page_prev"><button><img src="/publish/images/content/page_prev.png" alt=""></button></li>
								<li class="on"><button>1</button></li>
								<li><button>2</button></li>
								<li><button>3</button></li>
								<li><button>4</button></li>
								<li><button>5</button></li>
								<li><button>6</button></li>
								<li><button>7</button></li>
								<li><button>8</button></li>
								<li><button>9</button></li>
								<li><button>10</button></li>
								<li class="page_next"><button><img src="/publish/images/content/page_next.png" alt=""></button></li>
								<li class="page_last"><button><img src="/publish/images/content/page_last.png" alt=""></button></li>
							</ul>pagination
 -->
							<c:if test="${!empty resultList}">
							   <ul class="pagination">
							       <ui:pagination paginationInfo = "${paginationInfo}"  type="imageWeb" jsFunction="linkPage" />
							   </ul>
							</c:if>
						</div>
						<!-- //보안로그인 -->
					</div>
				</div>
		<!--// 마이페이지 - 회원해지 -->
	</div>
	<!--// send top -->
</div>
<!--// content 영역 -->
