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

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

$( function(){
    $( "#locationList option[value='98']" ).remove();
    if( setLocale != 'ko' ) {
        $( ".center-type-ul li label" ).css( "font-size", "16px" );
    }
    // $( "#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( '<spring:message code="login.required.location" />' );
            } else if( element.attr( "name" ) == "centerCode" ) {
                $( "#errMsg" ).text( '<spring:message code="login.required.center" />' );
            } else if( element.attr( "name" ) == "id"  ||  element.attr( "name" ) == "pw" ) {
                if( $( "#id" ).val().length == 0 ) { 

                    var centerType = $("input[name='centerType']:checked").val();

                    if( centerType == 'C' ) {
                      $( "#errMsg" ).text( '<spring:message code="login.required.id" />' );
                    } else if( centerType == 'S' ){
                      $( "#errMsg" ).text( '<spring:message code="login.required.residence" />' );
                    }
                    // $( "#id" ).focus();
                    return;
                } else if( $( "#pw" ).val().length == 0 ){
                    $( "#errMsg" ).text( '<spring:message code="login.required.jumin" />' );
                    $( "#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?lang='+setLocale;
                        }
                    }
                    
                } else {
                    $("#errMsg").text( resultMsg ).stop().animate({
                        marginLeft: "5px"
                    }, 50, function(){
                        $(this).animate({
                            marginLeft: "0px"
                        }, 50);
                    });

                    // $( "#startLoading" ).hide();
                };
            }, null, null );
        }
    });
    
    if (localStorage.getItem( "id" ) != null) {
        autoLogin();
    } else {
      // $( "#startLoading" ).fadeOut( 500 );
    }


    $( "#locationList" ).on( "change", function(){
        setCenterType( $("input[name='centerType']:checked").val() );
        
        var type = $("input[name='centerType']:checked").val(); 

        if($('#locationList > option:selected').val() != "0") {
//             $('#centerDiv').css("display", "block");
            $( "#centerList option:not([value='0'])" ).appendTo( "#hideList" );
            
            if ($( "#hideList option[data-center-type='" + type +"'][accessKey='"+$('#locationList').val()+"']" ).length == 0) {
                $("#centerLabel").text('<spring:message code="login.required.noCenter" />');
//               var option = "<option value='99' selected>등록된 생활치료센터가 없습니다.</option>";
//               $('#centerList').append(option);
            } else {
                $("#centerLabel").text('<spring:message code="login.required.selectCenter" />');
                $( "#hideList option[data-center-type='" + type +"'][accessKey='"+$('#locationList').val()+"']" ).appendTo( "#centerList" );
                $("#centerList").val("0").prop("selected", true);
            }
        } else {
            $( "#centerList option:not([value='0'])" ).appendTo( "#hideList" );
            $( "#hideList option[data-center-type='" + type +"']" ).appendTo( "#centerList" );
            $("#centerLabel").text('<spring:message code="login.required.selectCenter" />');
        }
    });


    $("#localeSelectBox").change(function(){
        var locale =  $(this).val();
        location.href="?lang=" + locale;
    })

    // 생치     : C  
    // 재택치료 : S
    var centerType = $("input[name='centerType']:checked").val();

    setCenterType( centerType );
    $( "#locationList" ).val("0").prop("selected", true);


    $( "input[name='centerType']" ).on( "change", function() {
      $("#locationList").val("0").prop("selected", true);
      $("#locationList").siblings("label").text( $("#locationList option:checked").text() );
      $("#centerList").val("0").prop("selected", true);
      $("#centerLabel").text($("#centerList option:checked").text());

      setCenterType(  $("input[name='centerType']:checked").val() );
    });
});

function setCenterType( type ){
  $("ul.center-type-ul li").css("border-bottom", "none");
  $("input[name='centerType']:checked").parent("li").css("border-bottom", "1px solid #426ddb");
  $("ul.center-type-ul li").height($("ul.center-type-ul").height() - 1);

  $( "#centerList option:not([value='0'])" ).appendTo( "#hideList2" );
  console.log( " type :::: " + type );
  $( "#hideList option[data-center-type='"+type+"']").appendTo("#centerList");
  $( "#hideList2 option[data-center-type='"+type+"']" ).appendTo( "#centerList" );
  $("#centerList").val("0").prop("selected", true);

  if( type == 'C' ) {
    $( "#id" ).attr( "placeholder", '<spring:message code="login.placeholder.id" />' );
  } else if( type == 'S' ) {
    $( "#id" ).attr( "placeholder", '<spring:message code="login.placeholder.residence" />' );
  }
  if( $( "#errMsg" ).text() != "" ) {
    $( "#loginForm" ).valid();
  }
}

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?lang='+setLocale;
            }
        }
    });
}

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>
<style>
  .locale-box {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index:20;
}


.locale-box select {
  padding: 2px 5px 2px 0;
  border-radius: 3px;
  border: 1px solid #d4d4d4;
  background: #FFFFFF;
}

.center-type-ul{
  font-size:0;
}
.center-type-ul li{
  display:inline-block;width:50%;
  font-size:0;
  text-align: center;
}

.center-type-ul li input[type="radio"] + label {
  font-size:17px;
    /* height: 50px; */
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0 5px;
    vertical-align: top;
    /* line-height: 50px; */
    color:#9e9e9e;
    padding: 20px 0 15px 0;
}

.center-type-ul li input[type="radio"]:checked + label {
color: #426ddb;
}
</style>
</head>
<body>
    <!-- <div id="startLoading" style="position:fixed;top:0;left:0;right:0;bottom:0;background:#FFFFFF;z-index:9999999;"></div> -->

    <div id="login">
        <div class="locale-box">
          <select id="localeSelectBox"> 
              <option value="ko" <c:if test="${data._LOCALE_CODE eq 'ko'}">selected</c:if>>한국어</option>
              <option value="en" <c:if test="${data._LOCALE_CODE eq 'en'}">selected</c:if>>English</option><!-- 영어 -->
              <option value="vi" <c:if test="${data._LOCALE_CODE eq 'vi'}">selected</c:if>>Tiếng Việt</option><!-- 베트남어 -->
              <option value="ru" <c:if test="${data._LOCALE_CODE eq 'ru'}">selected</c:if>>русский</option><!-- 러시아어 -->
              <option value="ar" <c:if test="${data._LOCALE_CODE eq 'ar'}">selected</c:if>>عربي</option><!-- 아랍어 -->
              <option value="fr" <c:if test="${data._LOCALE_CODE eq 'fr'}">selected</c:if>>français</option><!-- 프랑스어어 -->
              <option value="th" <c:if test="${data._LOCALE_CODE eq 'th'}">selected</c:if>>ไทย</option><!-- 태국어 -->
          </select>
        </div>

        <div class="container">
            <div class="title">
                <spring:message code="login.top.title" />
              <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">
                            <ul class="center-type-ul">
                                <li>
                                    <input type="radio" id="centerTypeC" name="centerType" value="C" checked="checked">
                                    <label for="centerTypeC"><span></span><spring:message code="menu.center.title" /></label>
                                </li>
                                <li>
                                    <input type="radio" id="centerTypeS" name="centerType" value="S">
                                    <label for="centerTypeS"><span></span><spring:message code="login.location.list.재택치료" /></label>
                                </li>
                            </ul>
                        </div>
                        <div class="part">
                            <div class="selectbox">
                                <label for="locationList"><spring:message code="login.select.all" /></label>
                                <select id="locationList" name="locationCode">
                                    <option value="0" selected><spring:message code="login.select.all" /></option>
                                    <c:forEach var="i" items="${locationList}">
                                        <c:if test="${i.locationCode ne '99'}">
                                          <option value="${i.locationCode}"> · 
                                            <spring:message code="login.location.list.${i.locationName}" />
                                          
                                          </option> 
                                        </c:if>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="part" id="centerDiv">
                            <div class="selectbox">
                                <label for="centerList" id="centerLabel"><spring:message code="login.select.center" /></label>
                                <select id="centerList" name="centerCode">
                                    <option value="0" selected><spring:message code="login.select.center" /></option>
                                    <c:forEach var="i" items="${centerList}">
                                        <c:if test="${i.centerCode ne '0'}">
                                          <option value="${i.centerCode}" 
                                            accessKey="${i.locationCode}"
                                            data-center-type="<c:out value="${i.centerType}"/>"
                                          > · <c:out value="${i.centerName}" /></option> 
                                        </c:if>
                                    </c:forEach>
                                </select>
                                
                                <select id="hideList" style="display:none;"></select>
                                <select id="hideList2" style="display:none;"></select>
                            </div>
                        </div>
                        
                        <!-- 크롬 autocomplete 방지 -->
                        <input type="text"     name="userId"       style="opacity:0;position:absolute;width:0;height:0;">
                        <input type="password" name="userPassword" style="opacity:0;position:absolute;width:0;height:0;">
                        <!-- --------------------- -->

                        <div class="part">
                            <div class="input">
                              <input type="text" id="id" name="id" class="login-id" placeholder='<spring:message code="login.placeholder.id" />' 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='<spring:message code="login.placeholder.pw" />' autocomplete="off" tabindex="2" autocomplete="new-password" 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"><spring:message code="login.btn.login" /></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>