jbcheong/hubez-admin
1
0
Fork 0
mirror of http://git.mhez-qa.uplus.co.kr/hubez/hubez-admin.git synced 2025-12-07 07:53:03 +09:00
Code Issues Projects Releases Wiki Activity

hubez-admin partner-git master -> hubez-git transfer 202205241800

Browse Source
This commit is contained in:
hyunjin35
2022-05-24 18:12:19 +09:00
parent 013e992bc7
commit ad80b88089
309 changed files with 50355 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
frontend/src/components/LoginPopup.vue Normal file
View File

@@ -0,0 +1,307 @@
<template>
<!-- 버튼 -->
<div class="wrap bg-wrap">
<!-- <div class="popup-btn-wrap">
<button class="trigger" onclick="ModalOpen('modal01');">로그인실패: 확인</button>
<button class="trigger" onclick="ModalOpen('modal02');">로그인실패: 5회</button>
<button class="trigger" onclick="ModalOpen('modal03');">로그인실패: 상태</button>
<button class="trigger" onclick="ModalOpen('modal04');">보안 알림</button>
<button class="trigger" onclick="ModalOpen('modal05');">중복 로그인</button>
<button class="trigger" onclick="ModalOpen('modal06');">휴대폰번호 확인</button>
<button class="trigger" onclick="ModalOpen('modal07');">인증번호: 발송</button>
<button class="trigger" onclick="ModalOpen('modal08');">인증번호: 입력</button>
<button class="trigger" onclick="ModalOpen('modal09');">인증실패: 인증번호</button>
<button class="trigger" onclick="ModalOpen('modal10');">인증실패: 시간초과</button>
<button class="trigger" onclick="ModalOpen('modal11');">인증실패: 5회</button>
<button class="trigger" onclick="ModalOpen('modal12');">비밀번호 초기화 문자 발송</button>
<button class="trigger" onclick="ModalOpen('modal13');">아이디 오류</button>
<button class="trigger" onclick="ModalOpen('modal14');">비밀번호 오류</button>
<button class="trigger" onclick="ModalOpen('modal15');">비밀번호 패턴 오류</button>
<button class="trigger" onclick="ModalOpen('modal16');">비밀번호 정상 변경</button>
</div> -->
<!-- s: 팝업 -->
<div class="dimmed" @click="ModalClose();"></div>
<div class="popup-wrap">
<!-- 로그인실패: 확인 -->
<div class="popup modal01">
<div class="pop-head">
<h3 class="pop-tit">로그인 실패</h3>
</div>
<div class="pop-cont">
<p>아이디,비밀번호를 확인해주세요.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 로그인실패: 5회 -->
<div class="popup modal02">
<div class="pop-head">
<h3 class="pop-tit">로그인 실패</h3>
</div>
<div class="pop-cont">
<p>로그인 5회 실패하였습니다.</p>
<p>비밀번호 초기화 후 비밀번호를 변경해 주세요.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 로그인실패: 상태 -->
<div class="popup modal03">
<div class="pop-head">
<h3 class="pop-tit">로그인 실패</h3>
</div>
<div class="pop-cont">
<p>아이디 상태를 확인해 주세요.</p>
<p>(사용중인 상태만 로그인 가능합니다.)</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 보안 알림 -->
<div class="popup modal04">
<div class="pop-head">
<h3 class="pop-tit">보안 알림</h3>
</div>
<div class="pop-cont">
<p>비밀번호를 변경하지 않은지 90일이</p>
<p>지났습니다. 비밀번호를 변경하여</p>
<p>이용 부탁드립니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">비밀번호 변경하기</button>
</div>
</div>
<!-- 중복 로그인 -->
<div class="popup modal05">
<div class="pop-head">
<h3 class="pop-tit">중복 로그인</h3>
</div>
<div class="pop-cont">
<p>동일한 아이디로 로그인 되어 있습니다.</p>
<p>이전 로그인 세션 종료 후 로그인하시겠습니까?</p>
<p>확인 시 이전 로그인한 상태는 로그아웃됩니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 휴대폰번호 확인 -->
<div class="popup modal06">
<div class="pop-head">
<h3 class="pop-tit">휴대폰번호 확인</h3>
</div>
<div class="pop-cont">
<p>휴대폰번호를 확인해주세요.</p>
<p>아이디에 등록된 휴대폰번호로만 인증이 가능합니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 인증번호: 발송 -->
<div class="popup modal07">
<div class="pop-head">
<h3 class="pop-tit">인증번호 발송</h3>
</div>
<div class="pop-cont">
<p>인증번호를 발송하였습니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 인증번호: 입력 -->
<div class="popup modal08">
<div class="pop-head">
<h3 class="pop-tit">인증번호 입력</h3>
</div>
<div class="pop-cont">
<p>인증번호를 입력하세요.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 인증실패: 인증번호 -->
<div class="popup modal09">
<div class="pop-head">
<h3 class="pop-tit">인증실패</h3>
</div>
<div class="pop-cont">
<p>잘못된 인증번호입니다.</p>
<p>5회 실패 시 로그아웃됩니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 인증실패: 시간초과 -->
<div class="popup modal10">
<div class="pop-head">
<h3 class="pop-tit">인증실패</h3>
</div>
<div class="pop-cont">
<p>인증시간 초과되었습니다.</p>
<p>다시 휴대폰번호를 입력해주세요.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 인증실패: 5회 -->
<div class="popup modal11">
<div class="pop-head">
<h3 class="pop-tit">인증실패</h3>
</div>
<div class="pop-cont">
<p>인증번호 5회 실패하였습니다.</p>
<p>로그아웃되어 다시 로그인해주세요.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 비밀번호 초기화 발송 -->
<div class="popup modal12">
<div class="pop-head">
<h3 class="pop-tit">비밀번호 초기화</h3>
</div>
<div class="pop-cont">
<p>해당 아이디에 저장되어 있는 핸드폰번호로</p>
<p>비밀번호 초기화 문자가 발송되었습니다.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 아이디 오류 -->
<div class="popup modal13">
<div class="pop-head">
<h3 class="pop-tit">아이디 오류</h3>
</div>
<div class="pop-cont">
<p>등록되지 않은 아이디입니다.</p>
<p>아이디를 다시 확인하세요</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 비밀번호 오류 -->
<div class="popup modal14">
<div class="pop-head">
<h3 class="pop-tit">비밀번호 오류</h3>
</div>
<div class="pop-cont">
<p>비밀번호를 확인해주세요.</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 비밀번호 패턴 오류 -->
<div class="popup modal15">
<div class="pop-head">
<h3 class="pop-tit">비밀번호 오류</h3>
</div>
<div class="pop-cont">
<p>비밀번호를 사용할 수 없습니다.</p>
<p>비밀번호는 영문/숫자/특수기호를 혼합하여</p>
<p>8~16자리로 설정해주세요</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
<!-- 비밀번호 정상 변경 -->
<div class="popup modal16">
<div class="pop-head">
<h3 class="pop-tit">비밀번호 오류</h3>
</div>
<div class="pop-cont">
<p>비밀번호가 정상적으로 변경되었습니다.</p>
<p>변경된 비밀번호로 다시 로그인 해주세요</p>
</div>
<div class="pop-btn1">
<button class="btn-pcolor" @click="ModalClose();">확인</button>
</div>
</div>
</div>
<!-- e: 팝업 -->
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods: {
//모달 켜기
ModalOpen(target){
console.log("ModalOpen");
var dimmed = document.getElementsByClassName('dimmed');
var wrap = document.getElementsByClassName('popup-wrap');
var obj = document.getElementsByClassName(target);
dimmed[0].style.display = 'block';
wrap[0].style.display = 'block';
obj[0].style.display = 'block';
},
// 모달 끄기
ModalClose(){
var dimmed = document.getElementsByClassName('dimmed');
var wrap = document.getElementsByClassName('popup-wrap');
var obj = wrap[0].childElementCount
dimmed[0].style.display = 'none';
wrap[0].style.display = 'none';
for(var i = 0; i < obj; i++) {
var target = document.getElementsByClassName('popup');
target[i].style.display = 'none';
}
},
}
}
</script>
<style>
.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
.popup-btn-wrap button:hover {background: #000; color: #fff;}
</style>