<!doctype html>
<html lang="en">
  <head>
    <!-- load JS -->
	<script src="js/angular.min.js"></script>
    <!-- end load JS -->

    <!-- added recaptcha at 2021-04-22 -->
    <!--Google reCaptcha's API-->
    <script>
        var reCaptChaSubmitVer = false;
        var CaptchaCallback = function() {
            var reCaptChaElements = document.querySelectorAll(".g-recaptcha");
            Object.keys(reCaptChaElements).forEach(function(key){
                grecaptcha.render(reCaptChaElements[key], {
                    'sitekey' : '6Lca1zMbAAAAABd_eS8lSMjjpdGnI4JEQUM8-5h1',
                    'callback': reCaptchaVerify.bind(null,key)
                    }
                );
            })
        };

        function reCaptchaVerify(key,response){
            var captchas = document.querySelectorAll('.g-recaptcha-response');
            var currForm = captchas[key];
            while(currForm = currForm.parentNode){
                if(currForm.nodeName == 'FORM') break;
            }
            if(response === captchas[key].value){
                reCaptChaSubmitVer = true;
                currForm.querySelector('input[name="submit"]').removeAttribute('disabled');
            }
        }

    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

    <!--Google reCaptcha's DIV styling-->
     <style>
    /*#rc-imageselect, .g-recaptcha {
               transform:scale(0.69);
               -webkit-transform:scale(0.69);
               transform-origin:0 0;
               -webkit-transform-origin:0 0;
            }*/
    </style>


    <!-- end added recaptcha at 2021-04-22 -->


  </head>

  <body>
    <div role="tabpanel" class="tab-pane active" id="products">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 sign-in-container">
            <div class="sign-in-box">
                <h2>
                    <strong>
                        登入D.PROMISE
                    </strong>
                </h2>

                <?php
if (@$_SESSION["fail"] == 1) {
	echo '<p class="bg-danger">Fail.Please check your enter.</p>';
	$_SESSION["fail"] = 0;
}
?>

                <form id="signinform" ng-app="signinform"  ng-controller="Ctrl2" name="signinform" method="post" action="includes/login.php" novalidate >

                    <div class="controls input-group">
                        <input style="text-align:left" class="form-control" placeholder="用戶名或登記郵箱" type="text" name="username" ng-model="name" ng-minlength="4" required>

                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signinform.username.$dirty && signinform.username.$valid">
                                正確
                            </span>

                            <span style="color:red" ng-show="signinform.username.$dirty && signinform.username.$error.minlength">
                                太短
                            </span>
                        </div>
                    </div>

                    <div class="controls input-group">
                        <input class="form-control" placeholder="密碼" type="password" name="password" ng-model="password" ng-minlength="4" ng-maxlength="32" required>

                        <div class="input-group-addon">
                            <span style="color:green"ng-show="signinform.password.$dirty && signinform.password.$valid">
                                正確
                            </span>

                            <span style="color:red" ng-show="signupform.password.$dirty && signupform.password.$error.maxlength">
                                不可多於32字
                            </span>

                            <span style="color:red" ng-show="signinform.password.$dirty && signinform.password.$error.minlength">
                                太短
                            </span>
                        </div>
                    </div>

                    <div class="controls input-group">
                        <textarea class="form-control" style="display:none;" ng-model="reCaptchaCheck" required></textarea>
                    </div>

                    <!-- <div class="controls input-group">
                        <div class="g-recaptcha" data-sitekey="6Lca1zMbAAAAABd_eS8lSMjjpdGnI4JEQUM8-5h1"></div>
                    </div>
 -->

 <div class="controls input-group">
                        <div class="g-recaptcha" data-sitekey="6Lca1zMbAAAAABd_eS8lSMjjpdGnI4JEQUM8-5h1"></div>
                    </div>
                    <div class="controls">
                        <!-- <input class="btn btn-sign-in" type="submit" name="submit" value="馬上登入!" ng-disabled="signinform.$invalid"> -->
                        <input class="btn btn-sign-in" type="submit" name="submit" value="馬上登入!" >
                    </div>
                </form>

                <div class="links-container">
                    <a href="#sign-up" role="tab" data-toggle="tab">註冊新賬戶</a><br>
                    <a href="#forgot-password" role="tab" data-toggle="tab">忘記密碼</a><br>
                </div>
            </div>
        </div>
    </div>

	<script>
    var app = angular.module('signinform', []);
    app.controller('Ctrl2', function($scope) {
    });
    </script>
  </body>
</html>