<!--
 ~ 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">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="icon" type="image/x-icon" ezy:vhref="/favicon.ico">

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="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">
        [[#{setup_administrator}]]
    </div>

    <div class="card">
        <div class="card-body register-card-body">
            <p class="login-box-msg">[[#{setup_the_super_admin}]]</p>

            <form action="/setup-admin" method="post" id="registerForm">
                <div class="form-group">
                    <label class="col-form-label text-danger d-none" for="username">
                        <i class="far fa-times-circle"></i> [[#{invalid_username}]]
                    </label>
                    <div class="input-group mb-3">
                        <input type="text" name="username" id="username"
                               class="form-control" th:placeholder="#{username}">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-user"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-form-label text-danger d-none" for="email">
                        <i class="far fa-times-circle"></i> [[#{invalid_email}]]
                    </label>
                    <div class="input-group mb-3">
                        <input type="email" name="email" id="email"
                               class="form-control" th:placeholder="#{email}">
                        <div class="input-group-append">
                            <div class="input-group-text">
                                <span class="fas fa-envelope"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <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="#{password}">
                        <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_password}"
                               onkeydown="onKeydownToSetup();">
                        <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="form-group">
                    <label class="col-form-label text-danger d-none" for="agreeWithTerms">
                        <i class="far fa-times-circle"></i> [[#{you_need_to_agree_to_continue}]]
                    </label>
                    <div class="input-group mb-3">
                        <input type="checkbox" id="agreeWithTerms" name="agreeWithTerms"
                               class="form-check" onclick="onAgreeWithTermsChanged(this);" checked>
                        <div class="input-group-append ml-2">
                            <span>[[#{i_agree_with}]]</span> &nbsp;
                            <a href="https://ezyplatform.com/terms-of-service" target="_blank">
                                [[${#strings.toLowerCase(#messages.msg('the_terms_and_conditions'))}]]
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button type="button" class="btn btn-primary btn-block"
                                id="submitSetupButton" onclick="onSubmitClick();">
                            [[#{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 type="text/javascript">
var usernameRegex = /^[a-zA-Z0-9_.-]{3,64}$/;
var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

var onKeydownToSetup = function() {
    if(event.key === 'Enter' && !$('#submitSetupButton').prop('disabled')) {
        onSubmitClick();
    }
}

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

    if (username.val().match(usernameRegex)) {
        $('label[for="username"]').addClass('d-none');
    } else {
        $('label[for="username"]').removeClass('d-none');
        readyToSubmit = false;
    }

    if (email.val().match(emailRegex)) {
        $('label[for="email"]').addClass('d-none');
    } else {
        $('label[for="email"]').removeClass('d-none');
        readyToSubmit = false;
    }

    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) {
        $('#registerForm').submit();
    }
};

var onAgreeWithTermsChanged = function(e) {
    $('#submitSetupButton').prop('disabled', !$(e).prop('checked'));
}
</script>
</body>
</html>
