<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>New Password | Book Your Shelf</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Little Closet template">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon  -->
    <link rel="icon" th:href="@{/static/images/logo/book_your_shelf_tab.png}">
    <link rel="stylesheet" type="text/css" th:href="@{styles/bootstrap-4.1.2/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/OwlCarousel2-2.2.1/owl.carousel.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/OwlCarousel2-2.2.1/owl.theme.default.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/plugins/OwlCarousel2-2.2.1/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/login.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/core-style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/util.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/styles/iziToast.min.css}">
</head>

<body>
<!-- Header -->
<header class="header_area" th:insert="fragments/header.html"></header>

<div class="super_container">
    <div class="super_container_inner">
        <div class="super_overlay"></div>

        <div class="login">
            <div class="container">
                <div class="row">
                    <div class="col-md-2 align-self-left"></div>
                    <div class="col-md-8 align-self-center">
                        <div class="billing">

                            <div class="login_title">New Password</div>
                            <div class="login_form_container">

                                <form action="#" class="login_form" id="login_form"
                                      method="post">
                                    <div>
                                        <!-- Password -->
                                        <div class="login-text p-b-10" style="color: black;">Password</div>
                                        <div class="input-group">
                                            <input type="password" id="new_password"
                                                   class="login_input form-control pwd" pattern = "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,16}$"
                                                   required="required" maxlength="255">
                                            <div class="input-group-append">
                                                <span class="input-group-text show_password_bg">
                                                    <button class="btn btn-default reveal" type="button"><i
                                                            class="fa fa-eye" id="eye"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <!-- Password Again -->
                                        <div class="login-text p-b-10" style="color: black;">Confirm Password</div>
                                        <div class="input-group">
                                            <input  type="password" id="new_password_again"
                                                   class="login_input form-control pwd1" pattern = "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,16}$"
                                                    required="required" maxlength="255">
                                            <div class="input-group-append">
                                                <span class="input-group-text show_password_bg">
                                                    <button class="btn btn-default reveal1" type="button"><i
                                                            class="fa fa-eye" id="eye1"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                        <div>
                                            <span>*Your password must be 8-16 characters, and include at least one lowercase letter, one uppercase letter, and a number.</span>
                                        </div>
                                    </div>
                                    <div><!--ERROR--></div>
                                    <input id="login_button" type="submit" value="CHANGE PASSWORD" class="login_button trans_200" >

                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 align-self-right"></div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="footer" th:insert="fragments/footer.html"></footer>
    </div>
</div>

<script th:src="@{/static/js/jquery-3.2.1.min.js}"></script>
<script th:src="@{/static/styles/bootstrap-4.1.2/popper.js}"></script>
<script th:src="@{/static/styles/bootstrap-4.1.2/bootstrap.min.js}"></script>
<script th:src="@{/static/js/plugins.js}"></script>
<script th:src="@{/static/plugins/greensock/TweenMax.min.js}"></script>
<script th:src="@{/static/plugins/greensock/TimelineMax.min.js}"></script>
<script th:src="@{/static/plugins/scrollmagic/ScrollMagic.min.js}"></script>
<script th:src="@{/static/plugins/greensock/animation.gsap.min.js}"></script>
<script th:src="@{/static/plugins/greensock/ScrollToPlugin.min.js}"></script>
<script th:src="@{/static/plugins/OwlCarousel2-2.2.1/owl.carousel.js}"></script>
<script th:src="@{/static/plugins/easing/easing.js}"></script>
<script th:src="@{/static/plugins/progressbar/progressbar.min.js}"></script>
<script th:src="@{/static/plugins/parallax-js-master/parallax.min.js}"></script>
<script th:src="@{/static/js/classy-nav.min.js}"></script>
<script th:src="@{/static/js/custom.js}"></script>
<script th:src="@{/static/js/active.js}"></script>
<script th:src="@{static/js/login.js}"></script>
<script th:src="@{static/js/iziToast.min.js}"></script>

<script>
    $('#login_button').click(function (event) {

        var newPassword = $('#new_password').val();
        var confirmPassword = $('#new_password_again').val();
        var ret = {
            newPassword : newPassword ,
            confirmPassword : confirmPassword
        };

        if(validation_check(["new_password", "new_password_again"])) {
            event.preventDefault();
            $.post("/new-password", ret, function (data) {
                iziToast.show({

                });
                window.location.href = "/login";
            }).fail(function (data) {
                iziToast.show({
                    title: 'Fail',
                    message: data.responseText,
                    position: 'topRight',
                    color: 'red'
                });
            })
        }
    });
</script>

<script>
    function validation_check(arr){
        for (var i = 0; i < arr.length; i++) {
            if (!document.getElementById(arr[i]).checkValidity()) {
                return false;
            }
        }
        return true;
    }
</script>

</body>

</html>