<!--
 ~ Copyright 2022 youngmonkeys.org
 ~ 
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~ 
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~ 
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>
<html
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:ezy="http://www.ezyplatform.com/thymeleaf/layout"
        dir="ltr">

<head>
    <title>Admin | Easy Going Platform</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" ezy:vhref="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" ezy:vhref="/css/all.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" ezy:vhref="/css/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" ezy:vhref="/css/adminlte.min.css">

    <script>
        const ezyadmin = {};
    </script>
</head>
<body class="hold-transition register-page">
<div class="register-box">
    <div class="register-logo">
        [[#{reset_password}]]
    </div>

    <div class="card">
        <div class="card-body register-card-body">
            <form th:action="'/admins/' + ${resetPasswordAdminUsername} + '/reset-password' +
                             ${ezyLang != null ? '?lang=' + ezyLang : ''}"
                  method="post" id="adminResetPasswordForm">
                <div class="form-group">
                    [[#{username}]]: <strong>[[${resetPasswordAdminUsername}]]</strong>
                </div>
                <div class="form-group">
                    <input type="hidden" name="token" th:value="${resetPasswordToken}">
                    <input type="hidden" name="tokenExpiredAt" th:value="${resetPasswordTokenExpiredAt}">
                    <label class="col-form-label text-danger d-none" for="password">
                        <i class="far fa-times-circle"></i> [[${#messages.msg('must_have_at_least_p_characters', 6)}]]
                    </label>
                    <div class="input-group mb-3">
                        <input type="password" name="password" id="password"
                               class="form-control" th:placeholder="#{new_password}"
                               onkeydown="onKeydownToResetPassword();">
                        <div class="input-group-append">
                            <div class="input-group-text cursor-pointer" id="passwordShow"
                                 onclick="ezyadmin.togglePasswordVisible('password', 'passwordShow', 'passwordHide');">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div class="input-group-text cursor-pointer d-none" id="passwordHide"
                                 onclick="ezyadmin.togglePasswordVisible('password', 'passwordShow', 'passwordHide');">
                                <i class="fas fa-eye-slash"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-form-label text-danger d-none" for="retypePassword">
                        <i class="far fa-times-circle"></i> [[#{password_not_match}]]
                    </label>
                    <div class="input-group mb-3">
                        <input type="password" id="retypePassword" name="retypePassword"
                               class="form-control" th:placeholder="#{retype_new_password}"
                               onkeydown="onKeydownToResetPassword();">
                        <div class="input-group-append">
                            <div class="input-group-text cursor-pointer" id="retypePasswordShow"
                                 onclick="ezyadmin.togglePasswordVisible('retypePassword', 'retypePasswordShow', 'retypePasswordHide');">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div class="input-group-text cursor-pointer d-none" id="retypePasswordHide"
                                 onclick="ezyadmin.togglePasswordVisible('retypePassword', 'retypePasswordShow', 'retypePasswordHide');">
                                <i class="fas fa-eye-slash"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button type="button" class="btn btn-primary btn-block"
                                onclick="onResetPasswordFormSubmit();">
                            [[#{submit}]]
                        </button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
        </div>
        <!-- /.form-box -->
    </div><!-- /.card -->
</div>
<!-- /.register-box -->

<!-- jQuery -->
<script ezy:vsrc="/js/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script ezy:vsrc="/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script ezy:vsrc="/js/adminlte.min.js"></script>

<script ezy:vsrc="/js/public.js"></script>

<script th:inline="javascript">
/*<![CDATA[*/
var resetPasswordAdminUsername = /*[[${resetPasswordAdminUsername}]]*/ '';
/*]]>*/

var onKeydownToResetPassword = function() {
    if(event.key === 'Enter') {
        onResetPasswordFormSubmit();
    }
}

var onResetPasswordFormSubmit = function() {
    var readyToSubmit = true;
    var password = $('input[name="password"]');
    var retypePassword = $('input[name="retypePassword"]');

    if (password.val().length >= 6) {
        password.removeClass('is-invalid');
        $('label[for="password"]').addClass('d-none');
    } else {
        password.addClass('is-invalid');
        $('label[for="password"]').removeClass('d-none');
        readyToSubmit = false;
    }

    if (password.val() === retypePassword.val()) {
        password.removeClass('is-invalid');
        retypePassword.removeClass('is-invalid');
        $('label[for="retypePassword"]').addClass('d-none');
    } else {
        password.addClass('is-invalid');
        retypePassword.addClass('is-invalid');
        $('label[for="retypePassword"]').removeClass('d-none');
        readyToSubmit = false;
    }
    if (readyToSubmit) {
        localStorage.setItem('adminLoginUsername', resetPasswordAdminUsername);
        $('#adminResetPasswordForm').submit();
    }
};
</script>
</body>
</html>
