<!--
 ~ 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:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{ezyadmin}">

<body>
<div layout:fragment="content" class="row">
    <div class="col-md-10 col-sm-12">
        <form id="changeEncryptionKeyForm">
            <div class="form-group row">
                <label for="currentEncryptionKey" class="col-md-3 col-form-label">
                    [[#{current_encryption_key}]]
                </label>
                <div class="col-lg-7 col-md-6 d-flex">
                    <input type="text" name="currentEncryptionKey" id="currentEncryptionKey" class="form-control"
                           value="************" disabled>
                    <button type="button" class="btn btn-info ml-1 white-space-nowrap"
                            id="showEncryptionKeyButton"
                            onclick="ezyadmin.showEncryptionKey();">
                        [[#{show}]]
                    </button>
                    <button type="button" class="btn btn-secondary ml-1 white-space-nowrap d-none"
                            id="hideEncryptionKeyButton"
                            onclick="ezyadmin.hideEncryptionKey();">
                        [[#{hide}]]
                    </button>
                    <button type="button" class="btn btn-primary ml-1 white-space-nowrap"
                            id="changeEncryptionKeyButton"
                            onclick="ezyadmin.showChangeEncryptionKeyComponents();">
                        [[#{change}]]
                    </button>
                </div>
            </div>
            <div class="d-none" id="changeEncryptionKeyComponents">
                <div class="form-group row">
                    <label for="newEncryptionKey" class="col-sm-3 col-form-label">
                        [[#{new_encryption_key}]] (<span class="text-danger">*</span>)
                    </label>
                    <div class="col-lg-7 col-md-6">
                        <input type="text" name="newEncryptionKey" id="newEncryptionKey"
                               class="form-control" th:placeholder="#{new_encryption_key}">
                    </div>
                    <label id="newEncryptionKeyErrorLabel" class="col-lg-2 col-md-3 col-form-label text-danger d-none" for="newEncryptionKey">
                        <i class="far fa-times-circle"></i> <span id="newEncryptionKeyError">[[#{invalid}]]</span>
                    </label>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">
                    </label>
                    <div class="col-sm-9">
                        <div class="d-flex align-items-center">
                            <button type="button" id="randomEncryptionKeyButton" class="btn btn-outline-primary pt-1 pb-1"
                                    onclick="ezyadmin.onRandomEncryptionKeyClick();">
                                [[#{random}]]
                            </button>
                            <span class="ml-2" id="randomEncryptionKey"></span>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-3"></div>
                    <div class="col-9 d-flex align-items-center">
                        <input type="checkbox" name="reEncryptAllPasswords" id="reEncryptAllPasswords"
                               class="form-check wh-1rem" checked>
                        <span class="ml-1">[[#{re_encrypt_all_passwords}]]</span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-9">
                        <button type="button" class="btn btn-primary pl-4 pr-4" onclick="ezyadmin.changeEncryptionKey();">
                            [[#{submit}]]
                        </button>
                        <button type="button" class="btn btn-secondary pl-4 pr-4" onclick="ezyadmin.cancelChangeEncryptionKey();">
                            [[#{cancel}]]
                        </button>
                    </div>
                    <!-- /.col -->
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-2 col-sm-0"></div>
    <div class="col-12">
        <hr class="mb-4" />
    </div>
    <div class="col-12">
        <h3>[[#{encryption}]]</h3>
    </div>
    <div class="col-md-10 col-sm-12">
        <form class="form-horizontal" id="settingsEncryptionForm">
            <div class="form-group row">
                <label for="encryptionClearText" class="col-md-3 col-form-label">
                    [[#{clear_text}]] (<span class="text-danger">*</span>):
                </label>
                <div class="col-md-9">
                    <label class="col-form-label text-danger d-none" id="encryptionClearTextErrorLabel" for="encryptionClearText">
                        <i class="far fa-times-circle"></i> <span id="encryptionClearTextError"></span>
                    </label>
                    <textarea name="encryptionClearText" id="encryptionClearText"
                              class="form-control" th:placeholder="#{clear_text}"></textarea>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-3">
                    <label>[[#{encrypted_text}]]</label>:
                </div>
                <div class="col-md-9">
                    <span class="line-break-anywhere" id="encryptedText"></span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-3"></div>
                <div class="col-md-9 d-flex">
                    <button type="button" class="btn btn-primary pl-4 pr-4" onclick="ezyadmin.settingsEncryptText();">
                        [[#{encrypt}]]
                    </button>
                    <button type="button" class="btn btn-secondary ml-1 pl-4 pr-4" onclick="ezyadmin.settingsClearEncryptText();">
                        [[#{clear}]]
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-2 col-sm-0"></div>
    <div class="col-12">
        <hr class="mb-4" />
    </div>
    <div class="col-12">
        <h3>[[#{decryption}]]</h3>
    </div>
    <div class="col-md-10 col-sm-12">
        <form class="form-horizontal" id="settingsDecryptionForm">
            <div class="form-group row">
                <label for="decryptionEncryptedText" class="col-md-3 col-form-label">
                    [[#{encrypted_text}]] (<span class="text-danger">*</span>):
                </label>
                <div class="col-md-9">
                    <label class="col-form-label text-danger d-none" id="decryptionEncryptedTextErrorLabel" for="decryptionEncryptedText">
                        <i class="far fa-times-circle"></i> <span id="decryptionEncryptedTextError"></span>
                    </label>
                    <textarea name="decryptionEncryptedText" id="decryptionEncryptedText"
                              class="form-control" th:placeholder="#{encrypted_text}"></textarea>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-3">
                    <label>[[#{decrypted_text}]]</label>:
                </div>
                <div class="col-md-9">
                    <span class="line-break-anywhere" id="decryptedText"></span>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-3"></div>
                <div class="col-md-9 d-flex">
                    <button type="button" class="btn btn-primary pl-4 pr-4" onclick="ezyadmin.settingsDecryptText();">
                        [[#{decrypt}]]
                    </button>
                    <button type="button" class="btn btn-secondary ml-1 pl-4 pr-4" onclick="ezyadmin.settingsClearDecryptText();">
                        [[#{clear}]]
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-2 col-sm-0"></div>
    <div class="col-12 mb-3"></div>
</div>
<th:block layout:fragment="modals">
<th:block th:replace="~{modals/add-new-role :: content}" />
</th:block>
<script layout:fragment="scripts">
// ========== random key =============
ezyadmin.showChangeEncryptionKeyComponents = function() {
    $('#changeEncryptionKeyButton').addClass('d-none');
    $('#changeEncryptionKeyComponents').removeClass('d-none');
}

ezyadmin.onRandomEncryptionKeyClick = function() {
	var encryptionKey = ezyadmin.randomString(32);
	$('#newEncryptionKey').val(encryptionKey);
}

ezyadmin.cancelChangeEncryptionKey = function() {
    $('#changeEncryptionKeyButton').removeClass('d-none');
    $('#changeEncryptionKeyComponents').addClass('d-none');
}

// ========== show/hide encryption key ===============
ezyadmin.showEncryptionKey = function() {
    $.ajax({
        url: '/api/v1/settings/encryption-key',
        type: 'GET',
        dataType: 'json',
    })
    .done(function(data) {
		$('#currentEncryptionKey').val(data.encryptionKey);
		$('#showEncryptionKeyButton').addClass('d-none');
		$('#hideEncryptionKeyButton').removeClass('d-none');
    })
    .fail(function(e) {
    	ezyadmin.processGetApiErrors(e);
    });
}

ezyadmin.hideEncryptionKey = function() {
    $('#currentEncryptionKey').val('************');
    $('#showEncryptionKeyButton').removeClass('d-none');
    $('#hideEncryptionKeyButton').addClass('d-none');
}

// ========== change encryption key =============
ezyadmin.changeEncryptionKey = function() {
    var formData = {
        newEncryptionKey: $('#newEncryptionKey').val(),
        reEncryptAllPasswords: $('#reEncryptAllPasswords').prop('checked')
    };
    $.ajax({
        type: 'PUT',
        url: '/api/v1/settings/change-encryption-key',
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function () {
            location.reload();
        },
        error: function (data, e) {
            ezyadmin.processUpdateApiErrors(formData, data);
        }
    });
}
// ========== settings encryption =============
ezyadmin.settingsEncryptText = function() {
    $('#encryptionClearTextErrorLabel').addClass('d-none');
    var formData = ezyadmin.formDataToObject('settingsEncryptionForm');
    $.ajax({
        type: 'POST',
        url: '/api/v1/settings/encrypt',
        data: formData,
        success: function (data) {
            $('#encryptedText').text(data.encryptedText);
        },
        error: function (data, e) {
        	ezyadmin.processUpdateApiErrors(formData, data);
        }
    });
}

ezyadmin.settingsClearEncryptText = function() {
    $('#encryptedText').text('');
    $('#encryptionClearText').val('');
}
// ========== settings decryption =============
ezyadmin.settingsDecryptText = function() {
    $('#decryptionEncryptedTextErrorLabel').addClass('d-none');
    var formData = ezyadmin.formDataToObject('settingsDecryptionForm');
    $.ajax({
        type: 'POST',
        url: '/api/v1/settings/decrypt',
        data: formData,
        success: function (data) {
            $('#decryptedText').text(data.decryptedText);
        },
        error: function (data, e) {
        	ezyadmin.processUpdateApiErrors(formData, data);
        }
    });
}

ezyadmin.settingsClearDecryptText = function() {
    $('#decryptedText').text('');
    $('#decryptionEncryptedText').val('');
}
</script>
</body>
</html>
