<%@ page session="false" %>
<section class="main signin">
    <div class="logo" ng-include src="'/html/header.html'"></div>
    <div class="title">
        <h1>RESET YOUR PASSWORD</h1>
    </div>
    <div class="signinContent">
        <div class="messageBox">
            <div class="messageBox" ng-show="attemptResetPassword && (invalid ||
                    (resetPasswordForm.password.$error.required && resetPasswordForm.password.$dirty) ||
                    (!resetPasswordForm.password.$error.required && (resetPasswordForm.password.$error.minlength || resetPasswordForm.password.$error.maxlength) && resetPasswordForm.password.$dirty) ||
                    (!resetPasswordForm.password.$error.required && !resetPasswordForm.password.$error.minlength && !resetPasswordForm.password.$error.maxlength && resetPasswordForm.password.$error.pattern && resetPasswordForm.password.$dirty) ||
                    (resetPasswordForm.password_c.$error.required && resetPasswordForm.password_c.$dirty) ||
                    (!resetPasswordForm.password_c.$error.required && resetPasswordForm.password_c.$error.noMatch && resetPasswordForm.password.$dirty))" >
                <div class="errorMsg">
                    <span class="fadeInLeft animated" ng-show="attemptResetPassword && invalid">{{message}}</span>
                    <span class="fadeInLeft animated" ng-show="attemptResetPassword && ((resetPasswordForm.password.$error.required && resetPasswordForm.password.$dirty) ||
                        (!resetPasswordForm.password.$error.required && (resetPasswordForm.password.$error.minlength || resetPasswordForm.password.$error.maxlength) && resetPasswordForm.password.$dirty) ||
                        (!resetPasswordForm.password.$error.required && !resetPasswordForm.password.$error.minlength && !resetPasswordForm.password.$error.maxlength && resetPasswordForm.password.$error.pattern && resetPasswordForm.password.$dirty) ||
                        (resetPasswordForm.password_c.$error.required && resetPasswordForm.password_c.$dirty) ||
                        (!resetPasswordForm.password_c.$error.required && resetPasswordForm.password_c.$error.noMatch && resetPasswordForm.password.$dirty))">* Please check the following fields.</span>
                </div>
        </div>
        </div>
        <div>
            <form name="resetPasswordForm" class="transbox">
                <div class="formTextbox">
                    <input type="password" id="password" name="password" ng-keyup="invalid = false" placeholder="Enter new password" ng-model="password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required  />
                    <img src="../../img/alert.png" class="alertIcon" popover="Invalid password" popover-trigger="mouseenter"
                        ng-show="(resetPasswordForm.password.$error.required && resetPasswordForm.password.$dirty) ||
                            (!resetPasswordForm.password.$error.required && (resetPasswordForm.password.$error.minlength || resetPasswordForm.password.$error.maxlength) && resetPasswordForm.password.$dirty) ||
                            (!resetPasswordForm.password.$error.required && !resetPasswordForm.password.$error.minlength && !resetPasswordForm.password.$error.maxlength && resetPasswordForm.password.$error.pattern && resetPasswordForm.password.$dirty)">
                </div>
                <div class="formTextbox">
                    <input type="password" id="password_c" name="password_c" ng-keyup="invalid = false" placeholder="Confirm password" ng-model="password_c" valid-password-c required  />
                    <img src="../../img/alert.png" class="alertIcon" popover="Invalid confirm password" popover-trigger="mouseenter"
                        ng-show="(resetPasswordForm.password_c.$error.required && resetPasswordForm.password_c.$dirty) ||
                            (!resetPasswordForm.password_c.$error.required && resetPasswordForm.password_c.$error.noMatch && resetPasswordForm.password.$dirty)" >
                </div>
                <div class="resetPasswordCaution" style="color:white;">
                    <span>Passwords must be between 8 and 20 characters. Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</span>
                </div>
                <div class="fadeInLeft animated">
                    <input type="submit" class="mindinkButton floatRight" ng-show="!inProgress" ng-disabled="!resetPasswordForm.$valid" ng-click="resetPassword()"  value="SUBMIT">
                    <div class="loadingIcon" ng-show="inProgress"><img src="../img/loading.gif"></div>
                </div>
            </form>
        </div>
    </div>
    <div class="footer" ng-include src="'/html/footer.html'"></div>
</section>
