style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="mob/common/layout/MypageLayoutMob">
<!--
 *******************************************************************************
 * @source  : MypageCustSnsJoinInitPwdFormMob.html
 * @desc    : 마이페이지 > 내 정보 관리 비밀번호 최초설정 Page
 *            소셜 간편가입을 하신 회원님은
 *            최초 비밀번호 설정하는 화면
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.26   jsshin      최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<style>
.hide{display:none}
</style>
<main class="container my">
	<section class="content my_page">
		<div class="inner">
			<div class="pass_confirm">
				<p class="desc">소셜 간편가입을 하신 회원님은 <br>최초 비밀번호 설정하신 후 변경 가능합니다.</p>
				<form id="resetPasswordForm" name="resetPasswordForm" class="form_wrap">
					<input type="hidden" name="custId" th:value="${custId}"/>
					<div class="form_field">
						<label class="input_label sr-only">신규 비밀번호</label>
						<div class="ui_col_12">
							<input type="password" id="passwd" name="passwd" class="form_control" placeholder="비밀번호를 입력해주세요." minlength="8" maxlength="20"/>
							<!-- case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
							<div class="help_block">
								<!-- 사용불가 비밀번호일경우 -->
								<p class="mt10">
									<span id="firstFailed" class="c_gray">
										<i class="ico ico_check gray mr5"></i>영문(대/소문자), 숫자, 특수문자 중 2가지 이상 조합(8~20자)<br/>
									</span>
									<span id="secondFailed" class="c_gray">
										<i class="ico ico_check gray mr5"></i>4개이상 연속되거나 동일한 문자/숫자 제외<br/>
									</span>
									<span id="thirdFailed" class="c_gray">
										<i class="ico ico_check gray mr5"></i>아이디 제외
									</span>
								</p>
								<!-- //사용불가 비밀번호일경우 -->
								<!-- 사용가능한 비밀번호일경우 -->
								<p id="avlPwd" class="mt10 hide">
									<span class="c_black2">
										<i class="ico ico_check black mr5"></i>사용 가능한 비밀번호입니다.
									</span>
								</p>
								<!-- //사용가능한 비밀번호일경우 -->
							</div>
							<!-- //case (사용불가 비밀번호일경우,사용가능한 비밀번호일경우) -->
						</div>
					</div>
					<div class="form_field">
						<label class="input_label sr-only">비밀번호 확인</label>
						<div class="ui_col_12">
							<input type="password" id="confirmPassword" name="confirmPassword" class="form_control" placeholder="비밀번호를 동일하게 입력해주세요." minlength="8" maxlength="20" />
							<!-- case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
							<div class="help_block">
								<!-- 비밀번호확인 틀렸을경우 -->
								<p id="misPwd" class="t_err hide">
									새 비밀번호가 일치하지 않습니다.
								</p>
								<!-- //비밀번호확인 틀렸을경우 -->
								<!-- 비밀번호 일치할경우 -->
								<p id="avlConPwd" class="mt10 hide">
									<span class="c_black2">
										<i class="ico ico_check black mr5"></i>새 비밀번호가 일치합니다.
									</span>
								</p>
								<!-- //비밀번호 일치할경우 -->
							</div>
							<!-- //case (비밀번호확인 틀렸을경우,비밀번호 일치할경우) -->
						</div>
					</div>
					<div class="btn_group_flex">
						<div>
							<button type="button" class="btn btn_default btn_block" onclick="cfnGoToPage(_PAGE_MYPAGE);">
								<span>취소</span>
							</button>
						</div>
						<div>
							<button type="button" id="btnSavePassword" class="btn btn_dark btn_block">
								<span>확인</span>
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</section>
</main>
<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	// 비밀번호 입력
	$('#resetPasswordForm input[name=passwd]').on('focusout keyup keydown', function () {
		fnCheckPassword();
	});

	// 비밀번호 확인 입력
	$('#resetPasswordForm input[name=confirmPassword]').on('focusout keyup keydown', function () {
		fnCheckConfirmPassword();
	});

	// 비밀번호 확인
	var fnCheckPassword = function () {
		const $firstFailed = $('#firstFailed');
		const $secondFailed = $('#secondFailed');
		const $thirdFailed = $('#thirdFailed');
		const $avlPwd = $('#avlPwd');
		const red = 'c_red2';
		const gray = 'c_gray';
		const icoRed = 'red';
		const icoGray = 'gray';

		let custId = $('#resetPasswordForm input[name=custId]').val();
		let password = $('#resetPasswordForm input[name=passwd]').val();
		let confirmPassword = $('#resetPasswordForm input[name=confirmPassword]').val();
		let pwdCheck = true;

		// 영문, 숫자, 특수문자 2종 이상 혼용 || 길이
		if (fnValidtaionPwdMixedWord(password) || fnValidationPwdLength(password)) {
			pwdCheck = false;
			$firstFailed.removeClass(gray);
			$firstFailed.find('.ico').removeClass(icoGray);
			$firstFailed.addClass(red);
			$firstFailed.find('.ico').addClass(icoRed);
		} else {
			$firstFailed.removeClass(red);
			$firstFailed.find('.ico').removeClass(icoRed);
			$firstFailed.addClass(gray);
			$firstFailed.find('.ico').addClass(icoGray);
		}

		// 동일한 문자/숫자 4자이상 || 연속된 문자가 4자이상
		if (fnValidationPwdSameWord(password) || fnValidtaionPwdCntnsWord(password)) {
			pwdCheck = false;
			$secondFailed.removeClass(gray);
			$secondFailed.find('.ico').removeClass(icoGray);
			$secondFailed.addClass(red);
			$secondFailed.find('.ico').addClass(icoRed);
		} else {
			$secondFailed.removeClass(red);
			$secondFailed.find('.ico').removeClass(icoRed);
			$secondFailed.addClass(gray);
			$secondFailed.find('.ico').addClass(icoGray);
		}

		// 아이디 포함
		if (fnValidationPwdSameId(password, custId)) {
			pwdCheck = false;
			$thirdFailed.removeClass(gray);
			$thirdFailed.find('.ico').removeClass(icoGray);
			$thirdFailed.addClass(red);
			$thirdFailed.find('.ico').addClass(icoRed);
		} else {
			$thirdFailed.removeClass(red);
			$thirdFailed.find('.ico').removeClass(icoRed);
			$thirdFailed.addClass(gray);
			$thirdFailed.find('.ico').addClass(icoGray);
		}

		if (pwdCheck) {
			$firstFailed.hide();
			$secondFailed.hide();
			$thirdFailed.hide();
			$avlPwd.show();
		} else {
			$firstFailed.show();
			$secondFailed.show();
			$thirdFailed.show();
			$avlPwd.hide();
		}

		if (!gagajf.isNull(confirmPassword)) {
			fnCheckConfirmPassword();
		}

	};

	// 비밀번호체크
	var fnCheckConfirmPassword = function () {
		const $misPwd = $('#misPwd');
		const $avlConPwd = $('#avlConPwd');
		const $btnSavePassword = $('#btnSavePassword');
		let password = $('#resetPasswordForm input[name=passwd]').val();
		let confirmPassword = $('#resetPasswordForm input[name=confirmPassword]').val();
		let sameConfirmPwd = fnValidationPwdSameConfirmPwd(password, confirmPassword);
		if (sameConfirmPwd) {
			$misPwd.hide();
			$avlConPwd.show();
			//$btnSavePassword.attr('disabled', false);
		} else {
			$avlConPwd.hide();
			$misPwd.show();
			//$btnSavePassword.attr('disabled', true);
		}
	};

	// 패스워드 저장
	$('#btnSavePassword').on('click', function () {
		let resetPasswordForm = $('#resetPasswordForm').serializeObject();

		if (gagajf.isNull(resetPasswordForm.passwd)) {
			mcxDialog.alert('신규 비밀번호를 입력하신 후 다시 시도해주세요.');
			return;
		}

		if (gagajf.isNull(resetPasswordForm.confirmPassword)) {
			mcxDialog.alert('비밀번호 확인을 입력하신 후 다시 시도해주세요.');
			return;
		}

		if (resetPasswordForm.passwd != resetPasswordForm.confirmPassword) {
			mcxDialog.alert('비밀번호가 일치하지 않습니다. 다시 확인해주세요.');
			return;
		}

		fnCheckPassword();
		fnCheckConfirmPassword();
		let jsonData = JSON.stringify(resetPasswordForm);
		gagajf.ajaxJsonSubmit('/customer/password/reset', jsonData, fnSavePasswordCallback);
	});

	var fnSavePasswordCallback = function (result) {
		if (result.isSuccess) {
			mcxDialog.alertC('비밀번호 변경이 완료 되었습니다.', {
				sureBtnText: "확인",
				sureBtnClick: function() {
					cfnGoToPage(_PAGE_MYPAGE_CUSTOMER);
				}
			});
		} else {
			mcxDialog.alert('비밀번호 변경이 실패 되었습니다.')
		}
	};

	$(document).ready(function() {
		$('#htopTitle').text('내 정보 관리');
	});

	/*]]>*/
</script>
</th:block>
</body>
</html>