LifeCenter/src/main/webapp/WEB-INF/jsp/mobile/login/login.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
<script type="text/javascript">
var patientIdx;
var redirectUrl;

$( function(){
    $( "#ex_select" ).siblings('label').text( $( "#ex_select" ).children('option:selected').text() );
    
    $.validator.addMethod('selectcheck', function (value) {
        console.log( value );
        return (value != "0" );
    }, "" );
    
    $( "#loginForm" ).validate({
        rules : {
            id : {
                required: true
            },
            pw : {
                required: true
            },
            centerCode : {
                selectcheck : true
            }
        },
        errorPlacement: function( error, element ){
            if (element.attr("name") == "locationCode") {
                $( "#errMsg" ).text( "지역을 선택해주세요" );
            } else if( element.attr( "name" ) == "centerCode" ) {
                $( "#errMsg" ).text( "생활센터를 선택해주세요" );
            } else if( element.attr( "name" ) == "id"  ||  element.attr( "name" ) == "pw" ) {
                if( $( "#id" ).val().length == 0 ) { 
                    $( "#errMsg" ).text( "동호실번호 입력해주세요(동+호실)" );
                    $( "#id" ).focus();
                } else if( $( "#pw" ).val().length == 0 ){
                    $( "#errMsg" ).text( "생년월일 8자리를 입력해주세요." );
                    $( "#pw" ).focus();
                }
            }
        },
        submitHandler: function(form) {
            getAjax( "./check", $("#loginForm").serialize(), function( data ){
                console.log("data -- > " + JSON.stringify(data));
                var resultCode = data.code;
                var resultMsg  = data.message;
                
                redirectUrl = data.redirectUrl;
                patientIdx  = data.patientIdx;
                
                if( data.code == "00" ) {
                    localStorage.removeItem( "id" );
                    localStorage.removeItem( "pw" );
                    localStorage.removeItem( "cc" );
                    
                    localStorage.id = data.id;
                    localStorage.pw = $( "#pw" ).val();
                    localStorage.cc = data.cc;
                    
                    if( isMobile() ){
                        token( "getToken" );
                    } else {
                        if (redirectUrl != "") {
                            location.href = '/mobile/menu?redirectUrl=' + redirectUrl;
                        } else {
                            location.href = '/mobile/menu';
                        }
                    }
                    
                } else {
                    $("#errMsg").text( resultMsg ).stop().animate({
                        marginLeft: "5px"
                    }, 50, function(){
                        $(this).animate({
                            marginLeft: "0px"
                        }, 50);
                    });
                };
            }, null, null );
        }
    });
    
    if (localStorage.getItem( "id" ) != null) {
        autoLogin();
    }

    $( "#locationList" ).on( "change", function(){
        if($('#locationList > option:selected').val() != "0") {
            console.log($('#locationList').val());
//             $('#centerDiv').css("display", "block");

            $( "#centerList option:not([value='0'])" ).appendTo( "#hideList" );
            
            if ($( "#hideList option[accessKey='"+$('#locationList').val()+"']" ).length == 0) {
                $("#centerLabel").text("등록된 생활치료센터가 없습니다.");
//               var option = "<option value='99' selected>등록된 생활치료센터가 없습니다.</option>";
//               $('#centerList').append(option);
            } else {
                $("#centerLabel").text("치료센터 선택");
                $( "#hideList option[accessKey='"+$('#locationList').val()+"']" ).appendTo( "#centerList" );
                $("#centerList").val("0").prop("selected", true);
            }
        } else {
            $( "#centerList option:not([value='0'])" ).appendTo( "#hideList" );
            $( "#hideList option" ).appendTo( "#centerList" );
            $("#centerLabel").text("치료센터 선택");
        }
    });
});

function getToken(token, deviceType, macAddress) {
    var jsonMsg = {
        patientIdx : patientIdx,
        deviceType : deviceType,
        deviceToken : token,
        macAddress : macAddress
    };
    
    $.ajax({
        url      : "/mobile/insertDeviceInfo",
        data     : JSON.stringify(jsonMsg),
        method   : "POST",
        contentType: 'application/json',
        success  : function(){
            if (redirectUrl != "") {
                location.href = '/mobile/menu?redirectUrl=' + redirectUrl;
            } else {
                location.href = '/mobile/menu';
            }
        }
    });
}

function token(callback) {
    var jsonMsg = {
        "type":"command",
        "functionType":"token",
        "value" : {
            "callbackFn" : callback
        }
    }
    toNative(jsonMsg);
}

function autoLogin(){
    if( localStorage.getItem( "id" ) != null && 
        localStorage.getItem( "pw" ) != null && 
        localStorage.getItem( "cc" ) != null ) {
        $( "#centerList" ).val( localStorage.getItem( "cc" ) );
        $( "#id" ).val( localStorage.getItem( "id" ) );
        $( "#pw" ).val( localStorage.getItem( "pw" ) );
        
        $( "#submitBtn" ).trigger( "click" );
    }
}

</script>
</head>
<body>
    <div id="login">
        <div class="container">
            <div class="title">생활치료센터<br/>비대면진료 서비스<br/><span style="font-size:10px !important;">hcms</span></div>
            <form id="loginForm" action="./check" method="post">
                <input type="hidden" name="redirectUrl" value="${redirectUrl}">
                <div class="login_box">
                    <div class="visual">
                        <img src="/resources/images/mobile/login_visual.png" />
                    </div>
                    <div class="form">
                        <div class="part">
                            <div class="selectbox">
                                <label for="locationList">전체</label>
                                <select id="locationList" name="locationCode">
                                    <option value="0" selected>전체</option>
                                    <c:forEach var="i" items="${locationList}">
                                        <option value="${i.locationCode}"> · <c:out value="${i.locationName}" /></option> 
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="part" id="centerDiv">
                            <div class="selectbox">
                                <label for="centerList" id="centerLabel">치료센터 선택</label>
                                <select id="centerList" name="centerCode">
                                    <option value="0" selected>치료센터 선택</option>
                                    <c:forEach var="i" items="${centerList}">
                                        <option value="${i.centerCode}" accessKey="${i.locationCode}"> · <c:out value="${i.centerName}" /></option> 
                                    </c:forEach>
                                </select>
                                
                                <select id="hideList" style="display:none;"></select>
                            </div>
                        </div>
                        <div class="part">
                            <div class="input">
                                <input type="text" id="id" name="id" class="login-id" placeholder="동호실번호" tabindex="1" maxlength="20" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="part">
                            <div class="input">
                                <input type="password" id="pw" name="pw" class="login-pw" placeholder="생년월일 8자리 (YYYYMMDD)" autocomplete="off" tabindex="2" autocomplete="off" maxlength="15" required>
                            </div>
                        </div>
                        <div class="part">
                            <div class="alert" id="errMsg"></div>
                        </div>
                        
                        <div class="part">
                            <div class="button">
                                <!-- <button id="submitBtn">로그인</button> -->
                                <button id="submitBtn" type="submit" class="btn btn-lg btn-primary">로그인</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>