JAVA 팀플) 20240213 로그인 화면 변경 / CSS 전면 외부파일화

 

로그인 화면은 전면 개조했다.

회원가입 화면으로 버튼을 클릭하면 애니메이션과 함께

화면이 전환된다. 로그인 화면으로도 마찬가지

<div id="contentBody">

 

 

<div class="container" id="container">

 

<!-- 회원가입 컨테이너 -->

<div class="form-container sign-up-container">

<form action="<%=request.getContextPath()%>/RegisterTerms">

<h1>회원가입</h1>

<div class="social-container">

<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>

<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>

<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>

</div>

<span>외부 사이트 이용하실껀가요?</span>

<input type="text" id="userName" name="userName" required placeholder="성함" />

<input type="text" class="ssn" id="ssn1" name="ssn1" maxlength="6" required placeholder="주민번호 앞자리"/>

<input type="password" class="ssn" id="ssn2" name="ssn2" maxlength="7" required placeholder="주민번호 뒷자리"/>

<button>회원가입으로</button>

</form>

</div>

 

<!-- 로그인 컨테이너 -->

<div class="form-container sign-in-container">

<form id="loginForm" action="<%=request.getContextPath()%>/Mypage" method="post">

<h1>로그인</h1>

<div class="social-container">

<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>

<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>

<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>

</div>

<span>외부 사이트를 이용하실껀가요?</span>

<input type="text" id="userId" name="userId" class="loginSet" pattern="[a-zA-Z0-9]{4,}" autofocus autocomplete="off" placeholder="아이디" />

<input type="password" id="userPw" name="userPw" class="loginSet" autocomplete="off" placeholder="패스워드"/>

<button type="button" id="showPasswd" class="loginButtons">비밀번호 보이기</button>

<button class="loginButtons">로그인</button>

 

<div class="row" id="rowBar">

<div class="col-2"><input type="checkbox" id="userIdSave" name="userIdSave" class="loginSet"></div>

<div class="col-4 save-label">아이디 저장</div>

<div class="col-2"><input type="checkbox" id="autoLogin" name="autoLogin"></div>

<div class="col-4 auto-login-label">자동 로그인</div>

</div>

<div class="row">

<div class="col-6"><a href="<%=request.getContextPath()%>/FindID">아이디 찾기</a></div>

<div class="col-6"><a href="<%=request.getContextPath()%>/FindPW">비밀번호 찾기</a></div>

</div>

</form>

</div>

 

<!-- 안내 문구 컨테이너 -->

<div class="overlay-container">

<div class="overlay">

<div class="overlay-panel overlay-left">

<h1>환영합니다!</h1>

<p>회원가입을 위해<br>고객님의 정보를 입력해주세요!</p>

<button class="ghost" id="signIn">로그인 화면으로</button>

</div>

<div class="overlay-panel overlay-right">

<h1>문화인의 밤에<br>어서오세요!</h1>

<p>사이트 이용을 위해<br>아이디와 비밀번호를 입력해주세요!</p>

<button class="ghost" id="signUp">회원가입 화면으로</button>

</div>

</div>

</div>

</div>

</div>

 

 

<script type="text/javascript">

$(function(){

 

//로그인과 회원가입 탭 전환*******************************************

$('#signUp').on('click', function () {

$('#container').addClass("right-panel-active");

$('#userId').val('');

$('#userPw').val('');

$('#userName').focus();

});

 

$('#signIn').on('click', function () {

$('#container').removeClass("right-panel-active");

$('#userName').val('');

$('#ssn1').val('');

$('#ssn2').val('');

$('#userId').focus();

});

 

 

css 전면 외부파일화

registerAgreeTerms 등 모든 jsp 파일의 css를 외부파일로 돌렸다.

 

 

회원가입 과정 개조

기존은 로그인메인 화면 -> 약관 동의 페이지 -> 기존 유저 확인 페이지 -> 회원 가입 페이지
지금은 로그인메인 화면 // 기존 유저 확인 페이지 -> 약관 동의 페이지 -> 회원 가입 페이지
로 전환했다.