<%--
  Class Name : EgovLoginUsr.jsp
  Description : 로그인화면
  Modification Information
 
      수정일         수정자                   수정내용
    -------    --------    ---------------------------
     2009.03.10    박지욱             최초 생성
     2011.08.31   JJY       경량환경 버전 생성
 
    author   : 공통서비스 개발팀  박지욱
    since    : 2009.03.10
--%>
<%@ 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 uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<!DOCTYPE html>
<html lang="ko">
<head>
<title>공예DB등록</title>

<script type="text/javascript">
// 아이디 중복확인
function fn_id_check(){
	if(document.userManageVO.emplyrId.value == "") { alert("아이디를 입력해주세요."); return; }
	
	$.ajax({
		type:"POST",
		url:"<c:url value='/web/user/join/usrIdDplctCnfirmAjax.do' />",
		data:{ "checkId": document.userManageVO.emplyrId.value },
		dataType:'json',
		timeout:(1000*30),
		success:function(returnData, status){
			if(status == "success") {
				if(returnData.usedCnt > 0 ){
					alert("이미 사용중인 아이디입니다");
					document.userManageVO.userIdSearch.value = "N";
					document.userManageVO.userIdSearchVal.value = "";
				}else{
					alert("사용할 수 있는 아이디입니다");
					document.userManageVO.userIdSearch.value = "Y";
					document.userManageVO.userIdSearchVal.value = returnData.checkId;
				}
			}else{ alert("중복확인이 실패되었습니다.");return;} 
		},
		error:function(request , status, error){
			alert("중복확인이 실패되었습니다.");
			//alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
		}
	});
}

function fnInsert(mode){
	if (document.userManageVO.division.value == "") {
	   	alert("회원종류를 선택해주세요."); return;
	}
	
	if (document.userManageVO.userIdSearch.value != "Y" || 
		document.userManageVO.emplyrId.value != document.userManageVO.userIdSearchVal.value) {
		alert("아이디 중복확인을 해주세요."); return;
	}
	
    if (document.userManageVO.password.value =="" || document.userManageVO.password2.value =="") {
        alert("비밀번호를 입력해주세요."); return false;
    } else if (document.userManageVO.password.value != document.userManageVO.password2.value) {
    	alert("비밀번호가 일치하지 않습니다. 확인해주세요."); return false;
    } else if (!validatePassword(document.userManageVO.password.value)) {
    	alert("비밀번호를 재 작성해주세요."); return false;
    }
	
	/* var phone = $("#MBTLNUM1").val() + "-" + $("#MBTLNUM2").val() + "-" + $("#MBTLNUM3").val();
	$('#moblphonNo').val(phone);
	if($('#MBTLNUM1').val() == '' || $('#MBTLNUM2').val() == '' || $('#MBTLNUM3').val() == ''){
	   	alert("휴대폰 번호를 입력해주세요."); return;
	} */
	
	if ($("#isAuthYn").val() != "Y" || $("#moblphonNo").val() == "") {
		alert("휴대폰 본인인증을 해주세요."); return;
	}
	
	/* var regExp = /^\d{2,}-\d{3,4}-\d{4}/g;
	if(!regExp.test(phone)){
		alert("올바르지 않은 휴대폰 번호 형식입니다."); return;
	} */
	
	var email = $("#email1").val() + "@" +  $("#email2").val();
	$('#emailAdres').val(email);
	if($('#email1').val() == '' || $('#email2').val() == ''){
	   	alert("이메일 주소를 입력해주세요."); return;
	}
	
	regExp = /^(\w*)(@{1})([a-z]{1,}(\.{1})[a-z]{2,3})$/gi
	if(!regExp.test(email)){
		alert("올바르지 않은 이메일 형식입니다."); return;
	}
	
	document.userManageVO.action = "/web/user/join/usrJoinInsert.do";  
	document.userManageVO.submit();  
}

function validatePassword(character) {
    return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/.test(character);
}

/* 본인인증 휴대폰 */
function openPCCWindow() {
	var PCC_window = window.open(
					'${SITE_URL}/web/cop/selfauth/selfauth.do?cnd=regist',
					'PCCV3Window',
					'width=430, height=560, resizable=1, scrollbars=no, status=0, titlebar=0, toolbar=0, left=300, top=200'
	);

	if (PCC_window == null) {
		alert(" ※ 윈도우 XP SP2 또는 인터넷 익스플로러 7 사용자일 경우에는 \n    화면 상단에 있는 팝업 차단 알림줄을 클릭하여 팝업을 허용해 주시기 바랍니다. \n\n※ MSN,야후,구글 팝업 차단 툴바가 설치된 경우 팝업허용을 해주시기 바랍니다.");
	}
}


$( document ).ready(function(){

	$("#email3").change(function(){
		var txt = $(this).val();
		if(txt != "0"){
			$("#email2").val(txt);
			$("#email2").attr("readonly","readonly");
		}else{
			$("#email2").val("");
			$("#email2").removeAttr("readonly");
		}
	});
	
});
</script>

</head>

<body>
	<!-- contentsW -->
	<div id="contentsW">
		<div id="contents">
			<div class="contentService">
				<h1>회원가입</h1>
			</div>

			<div class="stepTab">
				<ol>
					<li class="i1">
						<div class="set">
						<span class="t">약관동의</span>
						</div>
					</li>
					<li class="i2 active">
						<div class="set">
						<span class="t">정보입력</span><span class="sr-only">현재단계</span>
						</div>
					</li>
					<li class="i3 ">
						<div class="set">
						<span class="t">가입완료</span>
						</div>
					</li>
				</ol>
			</div>

			<form:form id="userManageVO" name="userManageVO" action="" method="post" >
			<input type="hidden" name="userIdSearch"  value="N"/>
			<input type="hidden" name="userIdSearchVal"  value=""/>
			<h3>회원정보 입력</h3>
			<div class="view">
				<dl>
					<dt>회원종류<span class="req"><span>필수입력</span></span></dt>
					<dd>
						<label for="mem1"><input type="radio" name="division" value="1" id="mem1" class="" /><i></i>공예인력</label>
						<label for="mem2"><input type="radio" name="division" value="2" id="mem2" class="" /><i></i>비공예인력</label>
					</dd>
				</dl>
				<dl>
					<dt><label for="userId">아이디<span class="req"><span>필수입력</span></span></label></dt>
					<dd><input type="text" name="emplyrId" class="inp" id="userId" /> <a href="javascript:fn_id_check();" class="b-basic b-gray">중복확인</a></dd>
				</dl>
				<dl>
					<dt><label for="userPw">비밀번호<span class="req"><span>필수입력</span></span></label></dt>
					<dd>
						<input type="password" name="password" class="inp" id="userPw" />
						<p class="fs">8자~12자, 영문, 숫자, 특수문자 사용</p>
					</dd>
				</dl>
				<dl>
					<dt><label for="userPw2">비밀번호 확인<span class="req"><span>필수입력</span></span></label></dt>
					<dd>
						<input type="password" name="password2" class="inp" id="userPw2" />
						<!-- <span class="fs caution">비밀번호가 일치하지 않습니다.</span> -->
					</dd>
				</dl>
				<dl>
					<dt>휴대폰번호<span class="req"><span>필수입력</span></span></dt>
					<dd>
						<!-- <input type="hidden" id="moblphonNo" name="moblphonNo">
						<select name="" id="MBTLNUM1" title="연락처 앞 자리" class="tel">
							<option value="" selected>선택</option>
							<option value="010" >010</option>
							<option value="011" >011</option>
							<option value="016" >016</option>
							<option value="017" >017</option>
							<option value="019" >019</option>
						</select>
						-
						<input type="text" name="" id="MBTLNUM2" class="tel inp" title="연락처 중간 3~4자리" maxlength="4" />
						-
						<input type="text" name="" id="MBTLNUM3" class="tel inp" title="연락처 끝 4자리" maxlength="4" /> -->
						
						<input type="text" id="moblphonNo" name="moblphonNo" class="inp" title="연락처" readonly="readonly"/>
						<input type="hidden" id="isAuthYn" name="isAuthYn" value="N">
						<a href="javascript:openPCCWindow();" class="b-basic b-gray">본인인증</a>
						
						<!-- <div class="mt10">
							<input type="text" class="inp"  title="인증번호" placeholder="인증번호 입력하세요" />
							<a href="" class="b-basic b-lgray">인증번호 재전송</a>
						</div> -->
					</dd>
				</dl>
				<dl>
					<dt>이름</dt>
					<dd id="name"></dd>
				</dl>
				<dl>
					<dt>생년월일</dt>
					<dd id="birYMD"></dd>
				</dl>
				<dl>
					<dt>이메일<span class="req"><span>필수입력</span></span></dt>
					<dd>
						<input name="" id="email1" type="text" title="이메일 아이디" value="" class="emailId inp" />
						@
						<input name="" id="email2" type="text" title="이메일 주소" value="" class="emailAddr emailDomainForm inp" />
						<label for="sr_email_more" class="hidden">이메일 도메인 선택</label>
						<select id="email3" name="" class="input_select select_email_js" title="직접입력 선택시 자동활성화&amp;포커스 이동">
							<option value="0" selected>메일주소입력</option>
							<option  value="naver.com" label="naver.com"></option>
							<option  value="gmail.com" label="gmail.com"></option>
							<option  value="hanmail.net" label="hanmail.net"></option>
							<option  value="daum.net" label="daum.net"></option>
							<option  value="yahoo.co.kr" label="yahoo.co.kr"></option>
						</select>
						<input type="hidden" name="emailAdres" id="emailAdres">
					</dd>
				</dl>
			</div>

			<div class="btnSet tac">
				<a href="javascript:fnInsert('insert');" class="b-base">확인</a>
				<a href="/web/user/login/login.do" class="b-pri">취소</a>
			</div>
			</form:form>
			
		</div>
	</div>
	<!-- //contentsW -->
</body>
</html>

