
<div class="container">
    <form class="form-signin" action="index.php" method="POST">
        <h2 class="form-signin-heading">sign in now</h2>
        <div class="login-wrap">
           
            <div class="user-login-info">
                 <?php
            if ($message = $this->getMessage()):
                if ($message["type"] == "error") {
                    $mclass = "alert-danger";
                    $mtitle = "Error!!";
                } else {
                    $mclass = "alert-success";
                    $mtitle = "Success!!";
                }
                ?>
                <div class="alert alert-block <?php echo $mclass ?> error fade in">
                    <button type="button" class="close close-sm" data-dismiss="alert">
                        <i class="fa fa-times"></i>
                    </button>
                    <h4><?php echo $mtitle ?></h4>                    
                    <?php
                    echo $message["message"];
                    unset($_SESSION["message"])
                    ?>
                </div>
                <?php
            endif;
            ?>
                <input type="text" name="username" required="" class="form-control" placeholder="User ID" autofocus>
                <input type="password" name="password" required="" class="form-control" placeholder="Password">
            </div>
            <button class="btn btn-lg btn-login btn-block" type="submit">Sign in</button>
            <div class="forgot-wrapper">
                <span class="pull-right">
                    <a data-toggle="modal" href="#myModal"> Forgot Password?</a>
                </span>
            </div>
        </div>

    </form>
    
    <!-- Modal -->
    
    <form class="form-reset" action="" method="POST">
    	
    	<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Forgot Password ?</h4>
                    </div>
                    <div class="modal-body">
                        <p>Enter your e-mail address below to reset your password.</p>
                        <input type="email" id="resetemail" name="resetemail" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">

                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                        <button class="btn btn-success" disabled id="submitreset" type="submit">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal -->
    </form>
    
</div>
<script>
    
    jQuery("#resetemail").on("keydown",function(){
        allowSubmit();
    });

    jQuery("#resetemail").on("change",function(){
        allowSubmit();
    });
    
    function allowSubmit(){
        var email = jQuery("#resetemail").val();
        if(isValidEmailAddress(email)){
            jQuery("#submitreset").removeAttr('disabled');
        }else{
            jQuery("#submitreset").attr('disabled','disabled');
        }
    }

    
    function isValidEmailAddress(emailAddress) {
    	var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);

    	return pattern.test(emailAddress);
	};

    </script>