- 시스템관리 > 관리자목록조회, 관리자등록, 관리자수정, 관리자삭제, 관리자상세조회

frontend/src/modules/login/views/LoginAuth.vue

@@ -1,263 +1,268 @@
-<template>  
-	<!--	s: 문자인증	-->
-  <div class="wrap bg-wrap">
-    <div  class="login-box text-auth">
-        <div class="logo"></div>
-        <div class="wbox">
-            <h3 class="title">2차 휴대폰 문자 인증</h3>
-            <p class="desc">아이디에 등록된 휴대폰번호를 입력해 주세요.</p>
-            <!-- <form action=""> -->
-                <ul class="pw-form">
-                  <div>
-                    <li><input type="text" 
-                               placeholder="휴대폰번호를 입력하세요 (숫자만 입력하세요.)"  
-                               v-model="mdn"
-                               :maxlength="11"
-                               oninput="javascript: this.value = this.value.replace(/[^0-9]/g, '');"
-                               >
-                    <button class="btn-p2color" v-on:click="authNum">인증번호 받기</button></li>
-                  </div>
-                  <div>
-                    <li class="bg-g">
-                      <input type="text" 
-                             placeholder="인증번호를 입력하세요" 
-                             v-model="confirmNum" 
-                             :maxlength="6"
-                             oninput="javascript: this.value = this.value.replace(/[^0-9]/g, '');"
-                             >
-                    <span class="time"> {{ TimerStr }}</span></li>
-                  </div>
-                    <li>
-                        <button class="btn-default" @click="clickMenu('/login')">취소</button>
-                        <button class="btn-pcolor" v-on:click="ajaxAuth">확인</button>
-                    </li>
-                </ul>
-            <!-- </form> -->
-        </div>
-
-      </div>
-        <login-popup ref="LoginPopup"> </login-popup>
-    </div>		 
-
-</template>
-
-<script>
-  import { mapGetters } from 'vuex';
-  import api from '../service/api';
-  import tokenSvc from '@/common/token-service';
-  import LoginPopup from '@/components/LoginPopup.vue'
-  //import * as utils from '@/common/utils';
-
-  export default {
-    data: function() {
-      return {       
-        errors: [],
-        mdn: '',
-        confirmNum: '',
-        userId: '',
-        isAuthNum: false,        
-        isLogin: true,
-        pwd: '',
-        text: '',
-        number: '',
-        Timer: null,
-        TimeCounter: 180,
-        TimerStr: "03:00"
-      };
-    },
-        components: {
-        LoginPopup : LoginPopup
-    },
-    created() {                  
-      if(!!tokenSvc.getToken()){        
-        this.$store.commit("login/isLogin", true);      
-        this.$store.commit("login/isAuthChk", true);
-        this.$router.push({ path: '/' });
-      }else{        
-        if(!this.getLogin){
-          this.$router.push({ path: '/login' });
-        }
-      }  
-    },
-    mounted() {      
-      if (localStorage.hubwebUserId) {  
-        this.userId = localStorage.hubwebUserId;
-      }
-      this.isLogin = this.getLogin;      
-      this.pwd = this.getPwd;
-    },
-    computed: {
-      ...mapGetters({
-        getLogin: 'login/isLogin',
-        getErrorPage: 'login/isErrorPage',
-        getAuthChk: 'login/isAuthChk',
-        getPwd: 'login/getPwd'
-      }), 
-    },
-    watch: {
-      getLogin(data) {        
-        if (data != null && data != '' && data == true) {
-          this.isLogin = true;        
-        } else {
-          this.isLogin = false;                
-        }      
-      },
-      getPwd(data) {
-        if(data != null && data != ''){
-          this.pwd = data;
-        }
-      }
-    },
-    destroyed() {
-      let cont = document.querySelector(".wrap");
-      cont.classList.remove("bg-wrap");
-    },
-    methods: {
-        // 2차 인증번호 요청
-        authNum(){          
-          var vm = this;
-          if(!this.isLogin){
-            var vm = this;
-            vm.$store.commit("login/isLogin", false);
-            vm.$store.commit("login/isAuthChk", false);
-            vm.$router.push({ path: '/'});
-            return;
-          }
-            if (vm.mdn == null || vm.mdn.trim() == ""){
-              vm.ModalOpen('modal08');
-              return false;
-            } else if (vm.mdn.length < 11 || !vm.mdn) {
-              vm.ModalOpen('modal06');
-            }
-          var params = {                
-                "oprtrId": this.userId,
-                "hpNo": this.mdn,
-                "isLogin" : this.isLogin
-            }
-          api.authNum(params).then(response => {
-            console.log(response);
-            var rsp = response.data;
-            if(rsp.retCode == '0000'){              
-              this.Timer = this.timerStart();
-              vm.ModalOpen('modal07');
-              // console.log('시간 3:00 카운트 하기');
-              this.isAuthNum = true;          
-            }else if (!this.Timer) {
-              this.timerStop(this.Timer);
-              this.Timer = null;            
-              // 실패 -> 실패 코드에 따라 실패 팝업 보여주기 
-              //인증시간 초과 후 “시간초과!” 문구로 변경
-            }
-          }).catch(response =>{
-            
-            console.log(response);
-          });
-        },
-
-        // 2차 인증 확인 
-        ajaxAuth: function(){
-            var vm = this;
-            
-            if (!vm.formCheck()){
-              alert(vm.errors[0]);
-              return false;
-            } 
-            if(vm.TimeCounter==0){
-              alert("시간초과");
-              return false;
-            }
-
-            var params = {                
-                "oprtrId": this.userId,
-                "hpNo": this.mdn,
-                "chrVal": this.confirmNum,
-                "isLogin": this.isLogin,
-                "oprtrPw": this.pwd
-            }
-
-            //인증번호 확인
-            api.confirmNum(params).then(function(response){
-                var rsp = response.data;
-                console.log("RESULT_CODE : "+rsp.retCode);
-                if(rsp.retCode == '0000'){
-                   vm.$store.commit("login/isLogin", true);                   
-                   //var nextUrl = rsp.data.nextUrl;
-                   //vm.$router.push({ path: nextUrl});
-                   vm.$router.push({ path: '/'});
-                }else if(rsp.retCode == '4008') { //휴대폰번호 확인 
-                  vm.ModalOpen('modal06');
-                } else if(rsp.retCode == '404') { //인증번호: 입력
-                  vm.ModalOpen('modal08');
-                } else if(rsp.retCode == '4009') { //인증실패: 시간초과
-                  vm.ModalOpen('modal10');
-                } else if(rsp.retCode == '4010') { //인증실패: 인증번호
-                  vm.ModalOpen('modal09');
-                } else if(rsp.retCode == '4011') { //인증실패: 5회
-                  vm.ModalOpen('modal11');
-                } else{
-                   return;
-                }                
-            });
-        },
-        formCheck: function() {
-            this.errors = [];
-            if(!this.isAuthNum){
-              this.errors.push('인증요청을 먼저 해주세요.');
-            }
-            if(!this.mdn){
-              this.errors.push('휴대폰 번호를 확인해주세요.');
-            } 
-            if(!this.confirmNum){
-              this.errors.push('인증번호를 입력하세요.');
-            } 
-            return this.errors.length == 0;
-        },
-
-                  clickMenu(link){
-       this.$router.push({
-            path: link
-        }); 
-        },
-      
-      ModalOpen: function(target){      
-      this.$refs.LoginPopup.ModalOpen(target);
-    },
-    timerStart: function() { 
-    // 1초에 한번씩 start 호출
-      this.TimeCounter = 180; 
-      var interval = setInterval(() => {
-      this.TimeCounter--; 
-      //1초씩 감소 
-      this.TimerStr = this.prettyTime();
-      if (this.TimeCounter <= 0) 
-      {
-        this.timerStop(interval); 
-      //   this.ModalOpen('modal10');
-      }
-      }, 100);
-      
-      return interval; 
-    }, 
-
-      timerStop: function(Timer) 
-       { 
-        clearInterval(Timer);
-       this.TimeCounter = 0; 
-       }, 
-
-       prettyTime: function() { 
-         // 시간 형식으로 변환 리턴
-          let time = this.TimeCounter / 60; 
-          let minutes = parseInt(time);
-          let secondes = Math.round((time - minutes) * 60);
-
-           return ( 
-             minutes.toString().padStart(2, "0") + 
-             ":" 
-             + secondes.toString().padStart(2, "0") 
-                  );
-         },
-
-    }
-  };
-</script>
+<template>  
+	<!--	s: 문자인증	-->
+  <div class="wrap bg-wrap">
+    <div  class="login-box text-auth">
+        <div class="logo"></div>
+        <div class="wbox">
+            <h3 class="title">2차 휴대폰 문자 인증</h3>
+            <p class="desc">아이디에 등록된 휴대폰번호를 입력해 주세요.</p>
+            <!-- <form action=""> -->
+                <ul class="pw-form">
+                  <div>
+                    <li><input type="text" 
+                               placeholder="휴대폰번호를 입력하세요 (숫자만 입력하세요.)"  
+                               v-model="mdn"
+                               :maxlength="11"
+                               oninput="javascript: this.value = this.value.replace(/[^0-9]/g, '');"
+                               @keyup.enter="authNum">
+                    <button class="btn-p2color" v-on:click="authNum">인증번호 받기</button></li>
+                  </div>
+                  <div>
+                    <li class="bg-g">
+                      <input type="text" 
+                             placeholder="인증번호를 입력하세요" 
+                             v-model="confirmNum" 
+                             :maxlength="6"
+                             oninput="javascript: this.value = this.value.replace(/[^0-9]/g, '');"
+                             @keyup.enter="ajaxAuth">
+                    <span class="time"> {{ timerStr }}</span></li>
+                  </div>
+                    <li>
+                        <button class="btn-default" @click="clickMenu('/login')">취소</button>
+                        <button class="btn-pcolor" v-on:click="ajaxAuth">확인</button>
+                    </li>
+                </ul>
+            <!-- </form> -->
+        </div>
+
+      </div>
+        <login-popup ref="LoginPopup"> </login-popup>
+    </div>		 
+
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import api from '../service/api';
+  import tokenSvc from '@/common/token-service';
+  import LoginPopup from '@/components/LoginPopup.vue'
+  //import * as utils from '@/common/utils';
+
+  export default {
+    data: function() {
+      return {       
+        errors: [],
+        mdn: '01012341234',
+        confirmNum: '',
+        userId: '',
+        isAuthNum: false,        
+        isLogin: true,
+        pwd: '',
+        text: '',
+        number: '',
+        timer: null,
+        timeCounter: 180,
+        timerStr: "03:00"
+      };
+    },
+        components: {
+        LoginPopup : LoginPopup
+    },
+    created() {                  
+      if(!!tokenSvc.getToken()){        
+        this.$store.commit("login/isLogin", true);      
+        this.$store.commit("login/isAuthChk", true);
+        this.$router.push({ path: '/' });
+      }else{        
+        if(!this.getLogin){
+          this.$router.push({ path: '/login' });
+        }
+      }  
+    },
+    mounted() {      
+      if (localStorage.hubwebUserId) {  
+        this.userId = localStorage.hubwebUserId;
+      }
+      this.isLogin = this.getLogin;      
+      this.pwd = this.getPwd;
+    },
+    computed: {
+      ...mapGetters({
+        getLogin: 'login/isLogin',
+        getErrorPage: 'login/isErrorPage',
+        getAuthChk: 'login/isAuthChk',
+        getPwd: 'login/getPwd'
+      }), 
+    },
+    watch: {
+      getLogin(data) {        
+        if (data != null && data != '' && data == true) {
+          this.isLogin = true;        
+        } else {
+          this.isLogin = false;                
+        }      
+      },
+      getPwd(data) {
+        if(data != null && data != ''){
+          this.pwd = data;
+        }
+      }
+    },
+    destroyed() {
+      let cont = document.querySelector(".wrap");
+      cont.classList.remove("bg-wrap");
+    },
+    methods: {
+        // 2차 인증번호 요청
+        authNum(){             
+          var vm = this;       
+          if(!this.isLogin){
+            vm.$store.commit("login/isLogin", false);
+            vm.$store.commit("login/isAuthChk", false);
+            vm.$router.push({ path: '/'});
+            return;
+          }
+            if (vm.mdn == null || vm.mdn.trim() == "" || vm.mdn.length < 11 || !vm.mdn){
+              vm.ModalOpen('modal06');
+              return false;
+            } 
+          var params = {                
+                "oprtrId": this.userId,
+                "hpNo": this.mdn,
+                "isLogin" : this.isLogin
+            }
+          api.authNum(params).then(response => {
+            console.log(response);
+            var rsp = response.data;
+            if(rsp.retCode == '0000'){
+              this.timerStop(this.timer);              
+              this.timer = this.timerStart();
+              vm.ModalOpen('modal07');
+              // console.log('시간 3:00 카운트 하기');
+              this.isAuthNum = true;          
+            }else if (!this.timer) {
+              this.timerStop(this.timer);
+              this.timer = null;    
+              vm.ModalOpen('modal06');        
+              // 실패 -> 실패 코드에 따라 실패 팝업 보여주기 
+              //인증시간 초과 후 “시간초과!” 문구로 변경
+            }
+          }).catch(response =>{
+            
+            console.log(response);
+          });
+        },
+
+        // 2차 인증 확인 
+        ajaxAuth: function(){
+            var vm = this;
+            if (!vm.formCheck()){
+              alert(vm.errors[0]);
+              return false;
+            } 
+            
+            if(this.timeCounter == 0){
+              this.ModalOpen('modal10');
+              return false;
+            }
+
+
+            var params = {                
+                "oprtrId": this.userId,
+                "hpNo": this.mdn,
+                "chrVal": this.confirmNum,
+                "isLogin": this.isLogin,
+                "oprtrPw": this.pwd
+            }
+
+            //인증번호 확인
+            api.confirmNum(params).then(function(response){
+                var rsp = response.data;
+                console.log("RESULT_CODE : "+rsp.retCode);
+                if(rsp.retCode == '0000'){
+                   vm.$store.commit("login/isLogin", true);                   
+                   //var nextUrl = rsp.data.nextUrl;
+                   //vm.$router.push({ path: nextUrl});
+                   vm.$router.push({ path: '/'});
+                }else if(rsp.retCode == '4008') { //휴대폰번호 확인 
+                  vm.ModalOpen('modal06');
+
+                }
+                // else if(rsp.retCode == '4009') { //인증실패: 시간초과
+                //   vm.ModalOpen('modal10');
+                // } 
+                else{
+                  if(rsp.retCode == '4010') { //인증실패: 인증번호
+                    vm.ModalOpen('modal09');
+                  } 
+                  else if(rsp.retCode == '4011') { //인증실패: 5회
+                    vm.ModalOpen('modal11');
+                    // vm.$router.go(-1)
+                  }
+                   return;
+
+                } 
+                //  else{
+                // }                
+            });
+        },
+        formCheck: function() {
+            this.errors = [];
+            if(!this.mdn){
+              this.ModalOpen('modal06');
+            } else if(!this.isAuthNum){
+              this.errors.push('인증요청을 먼저 해주세요.');
+            }else if(!this.confirmNum){
+              this.ModalOpen('modal08');
+            }
+
+            return this.errors.length == 0;
+        },
+
+      clickMenu(link){
+       this.$router.push({
+            path: link
+        }); 
+        },
+      
+      ModalOpen: function(target){      
+      this.$refs.LoginPopup.ModalOpen(target);
+    },
+    timerStart: function() { 
+    // 1초에 한번씩 start 호출
+      this.timeCounter = 180; 
+      var interval = setInterval(() => {
+      this.timeCounter--; 
+      //1초씩 감소 
+      this.timerStr = this.prettyTime();
+      if (this.timeCounter <= 0) 
+      {
+        this.timerStop(interval); 
+      }
+      }, 1000);
+      
+      return interval; 
+    }, 
+
+      timerStop: function(Timer) 
+       { 
+        clearInterval(Timer);
+       this.timeCounter = 0; 
+       }, 
+
+       prettyTime: function() { 
+         // 시간 형식으로 변환 리턴
+          let time = this.timeCounter / 60; 
+          let minutes = parseInt(time);
+          let secondes = Math.round((time - minutes) * 60);
+
+           return ( 
+             minutes.toString().padStart(2, "0") + 
+             ":" 
+             + secondes.toString().padStart(2, "0") 
+                  );
+         },
+
+    }
+  };
+</script>