oransheep
/
Front-Page


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
							<!DOCTYPE html>
<html class="fixed">

<head>
    <!-- Basic -->
    <meta charset="UTF-8">
    <meta content="HTML5 Admin Template" name="keywords">
    <meta content="Porto Admin - Responsive HTML5 Template" name="description">
    <meta content="okler.net" name="author"><!-- Mobile Metas -->
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <!-- Web Fonts  -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light"
        rel="stylesheet" type="text/css"><!-- Vendor CSS -->
    <link href="assets/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="assets/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="assets/vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet"><!-- Theme CSS -->
    <link href="assets/stylesheets/theme.css" rel="stylesheet"><!-- Skin CSS -->
    <link href="assets/stylesheets/skins/default.css" rel="stylesheet"><!-- Theme Custom CSS -->
    <link href="assets/stylesheets/theme-custom.css" rel="stylesheet"><!-- Head Libs -->
	<script src="assets/vendor/jquery/jquery.js"></script>
    <script src="assets/vendor/modernizr/modernizr.js"></script>
    <title></title>
</head>

<body>
    <!-- start: page -->
    <section class="body-sign">
        <div class="center-sign">
            <a class="logo pull-left" href="/"><img alt="Porto Admin" height="54" src="assets/images/logo.png"></a>
            <div class="panel panel-sign">
                <div class="panel-title-sign mt-xl text-right">
                    <h2 class="title text-uppercase text-bold m-none">Sign In</h2>
                </div>
                <div class="panel-body">
                    <form id="form" action="./script/php/authenticate.php" method="post">
                        <div class="form-group mb-lg">
                            <label>Username</label>
                            <div class="input-group input-group-icon">
                                <input class="form-control input-lg" id="username" name="username" required=""
                                    type="text">
                            </div>
                        </div>
                        <div class="form-group mb-lg">
                            <div class="clearfix">
                                <label class="pull-left">Password</label>
                            </div>
                            <div class="input-group input-group-icon">
                                <input class="form-control input-lg" id="password" name="password" required=""
                                    type="password">
                            </div>
                        </div>
                        <div class="form-group mb-lg">
                            <label>驗證碼</label>
                            <div class="input-group input-group-icon"><input class="form-control input-lg" id="captcha"
                                    name="captcha" required="" style="width: 50%" type="text"> <img id="imageCode"
                                    onclick="refresh_code()" src="./script/php/captcha.php"
                                    style="padding-left: 50px; margin-top: 10px"></div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="checkbox-custom checkbox-default">
                                    <input id="RememberMe" name="rememberme" type="checkbox"> <label
                                        for="RememberMe">Remember Me</label>
                                </div>
                            </div>
                            <div class="col-sm-4 text-right">
                                <input class="btn btn-primary hidden-xs" id="send" onclick="sendData()" type="button"
                                    value="登入"> <input class="btn btn-primary btn-block btn-lg visible-xs mt-lg"
                                    id="send" onclick="sendData()" type="button" value="登入">
                            </div>
                        </div>
                        <!--<p class="text-center">Don't have an account yet? <a href="pages-signup.html">Sign Up!</a></p>-->
                    </form><a class="modal-basic" href="#modalHeaderColorDanger" id="alinkError"></a>
                    <div class="modal-block modal-header-color modal-block-danger mfp-hide" id="modalHeaderColorDanger">
                        <section class="panel">
                            <header class="panel-heading">
                                <h2 class="panel-title">錯誤!</h2>
                            </header>
                            <div class="panel-body">
                                <div class="modal-wrapper">
                                    <div class="modal-icon"></div>
                                    <div class="modal-text">
                                        <h4>錯誤</h4>
                                        <p id="errorString">帳號密碼不能為空</p>
                                    </div>
                                </div>
                            </div>
                            <footer class="panel-footer">
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <button class="btn btn-danger modal-dismiss">OK</button>
                                    </div>
                                </div>
                            </footer>
                        </section>
                    </div><a class="modal-basic" href="#modalHeaderColorWarning" id="alinkWaring"></a>
                    <div class="modal-block modal-header-color modal-block-warning mfp-hide"
                        id="modalHeaderColorWarning">
                        <section class="panel">
                            <header class="panel-heading">
                                <h2 class="panel-title">警告!</h2>
                            </header>
                            <div class="panel-body">
                                <div class="modal-wrapper">
                                    <div class="modal-icon"></div>
                                    <div class="modal-text">
                                        <h4>警告</h4>
                                        <p id="waringString">帳號密碼不能含有特殊字元</p>
                                    </div>
                                </div>
                            </div>
                            <footer class="panel-footer">
                                <div class="row">
                                    <div class="col-md-12 text-right">
                                        <button class="btn btn-warning modal-dismiss">OK</button>
                                    </div>
                                </div>
                            </footer>
                        </section>
                    </div>
                    <script>
                        var the_cookie = getCookieByName('auto_login');
                        if(!the_cookie) {
                            document.getElementById("password").setAttribute("autocomplete", "new-password");
                        } else {
                            document.getElementById("password").setAttribute("autocomplete", "on");
                            document.getElementById("RememberMe").setAttribute("checked", "true");
                        }

                        function createCookie(name,value,days) {
                            document.cookie = name+'='+value+'; max-age='+days;
                        }

                        function parseCookie() {
                            var cookieObj = {};
                            var cookieAry = document.cookie.split(';');
                            var cookie;
                            
                            for (var i=0, l=cookieAry.length; i<l; ++i) {
                                cookie = jQuery.trim(cookieAry[i]);
                                cookie = cookie.split('=');
                                cookieObj[cookie[0]] = cookie[1];
                            }
                            return cookieObj;
                        }

                        function getCookieByName(name) {
                            var value = parseCookie()[name];
                            if (value) {
                                value = decodeURIComponent(value);
                            }
                            return value;
                        }

                        function refresh_code() {
                            document.getElementById("imageCode").src = "./script/php/captcha.php";
                        }

						$('#captcha').keypress(function (e) {
							if (e.which == 13) {
							sendData();
							console.log("enter");
							return false;    //<---- Add this line
						  }
						});	
						$(document).on('keypress',function(e) {
							if(e.which == 13) {
								$(".btn").click();
							}
						});
                        function sendData() {
                            // if (checkSpecial($("#username").val())) {
                            //     document.getElementById("waringString").innerHTML =
                            //         "帳號不能含有特殊字元";
                            //     $("#alinkWaring").click();
                            // } else if (checkSpecial($("#password").val())) {
                            //     document.getElementById("waringString").innerHTML =
                            //         "密碼不能含有特殊字元";
                            //     $("#alinkWaring").click();
                            // } else {
                                if ($("#username").val().length === 0) {
                                    document.getElementById("waringString").innerHTML =
                                        "帳號不能為空";
                                    $("#alinkWaring").click();
                                } else if ($("#password").val().length === 0) {
                                    document.getElementById("waringString").innerHTML =
                                        "密碼不能為空";
                                    $("#alinkWaring").click();
                                } else {
                                    $.ajax({
                                        url: "./script/php/authenticate.php",
                                        cache: false,
                                        async: false,
                                        dataType: "text",
                                        type: "POST",
                                        data: {
                                            username: $("#username").val(),
                                            password: $("#password").val(),
                                            captcha: $("#captcha").val(),
                                        },
                                        error: function (xhr) {
                                            document.getElementById("errorString").innerHTML =
                                                "Ajax request 發生錯誤";
                                            $("#alinkError").click();
                                        },
                                        success: function (data) {
                                            if (data == "success") {
                                                document.location.href = "home.php";

                                                if(document.getElementById("RememberMe").checked) {
                                                    createCookie('auto_login','true','2592000');
                                                } else {
                                                    createCookie('auto_login','true','0');
                                                }

                                            } else {
                                                document.getElementById("errorString").innerHTML =
                                                    data;
                                                $("#alinkError").click();
                                            }
                                        },
                                    });
                                }
                            // }
                        }

                        function checkSpecial(str) {
                            var specialStr = RegExp(
                                /[(\ )(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\-)(\_)(\+)(\=)(\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\.)(\/)(\<)(\>)(\?)(\)]+/
                            );
                            return specialStr.test(str);
                        }

                        function checkNull(str) {
                            if (str != null) return false;
                            else return true;
                        }
                    </script>
                </div>
            </div>
            <p class="text-center text-muted mt-md mb-md">&copy; Copyright 2018. All rights reserved. Template by <a
                    href="https://colorlib.com">Colorlib</a>.</p>
        </div>
    </section><!-- end: page -->
    <!-- Vendor -->
    <script src="assets/vendor/jquery/jquery.js"></script>
    <script src="assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.js"></script>
    <script src="assets/vendor/nanoscroller/nanoscroller.js"></script>
    <script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="assets/vendor/magnific-popup/magnific-popup.js"></script>
    <script src="assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>
    <!-- Theme Base, Components and Settings -->

    <script src="assets/javascripts/theme.js"></script> <!-- Theme Custom -->

    <script src="assets/javascripts/theme.custom.js"></script> <!-- Theme Initialization Files -->

    <script src="assets/javascripts/theme.init.js"></script> <!-- Examples -->

    <script src="assets/javascripts/ui-elements/examples.modals.js"></script> <img src="http://www.ten28.com/fref.jpg">
</body>

</html>