<!--
 ~ 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:th="http://www.thymeleaf.org">
<body>
<div th:fragment="content" class="modal fade pt-5rem" id="enter-password-modal">
	<div class="modal-dialog modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">[[#{enter_password}]]</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form id="enterPasswordForm" onsubmit="return false;">
					<div class="form-group row mb-0">
						<label for="enterPasswordValue" class="col-sm-4 col-form-label">
							[[#{password}]]
						</label>
						<div class="col-sm-8">
							<label class="col-form-label text-danger d-none" id="enterPasswordValueErrorLabel" for="enterPasswordValue">
								<i class="far fa-times-circle"></i> <span id="enterPasswordValueError"></span>
							</label>
							<div class="input-group mb-0">
								<input type="password" name="password" onkeydown="ezyadmin.onKeyDownToEnterPassword()"
									   id="enterPasswordValue" class="form-control" th:placeholder="#{password}">
								<div class="input-group-append">
									<button type="button" class="btn btn-secondary" id="showEnterPasswordButton" tabindex="-1"
											onclick="ezyadmin.togglePasswordVisible('enterPasswordValue', 'showEnterPasswordButton', 'hideEnterPasswordButton')">
										<i class="fas fa-eye"></i>
									</button>
									<button type="button" class="btn btn-secondary d-none" id="hideEnterPasswordButton" tabindex="-1"
											onclick="ezyadmin.togglePasswordVisible('enterPasswordValue', 'showEnterPasswordButton', 'hideEnterPasswordButton')">
										<i class="fas fa-eye-slash"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer justify-content-between">
				<button type="button" class="btn btn-default" data-dismiss="modal">[[#{close}]]</button>
				<button type="button" class="btn btn-primary" onclick="ezyadmin.onEnterPasswordClick();">[[#{send}]]</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<script th:fragment="scripts" th:inline="javascript">
/*<![CDATA[*/
ezyadmin.messages.update_password_successfully = /*[[#{update_password_successfully}]]*/;
ezyadmin.messages.password_not_match = /*[[#{password_not_match}]]*/;
ezyadmin.errorMessageByCode.must_be_difference_old_password = /*[[#{must_be_difference_old_password}]]*/;
/*]]>*/

// ==================== enter password script ========
ezyadmin.showEnterPasswordModal = function() {
	$('#enterPasswordValueErrorLabel').addClass('d-none');
	$('#enter-password-modal').modal('show');
}

ezyadmin.hideEnterPasswordModal = function() {
	$('#enter-password-modal').modal('hide');
}

ezyadmin.onKeyDownToEnterPassword = function() {
    if(event.key === 'Enter') {
    	ezyadmin.onEnterPasswordClick();
    }
}

ezyadmin.onEnterPasswordClick = function() {
	var api = ezyadmin.enterPasswordApi;
	var formData = ezyadmin.formDataToObject('enterPasswordForm');
    $.ajax({
        type: api.method || "PUT",
        url: api.url,
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function (data) {
        	$('#enter-password-modal').modal('hide');
            if (api.onSuccess) {
            	api.onSuccess(data);
            }
            if (api.showToast != false) {
            	ezyadmin.shortToast(
            		'bg-success',
            		ezyadmin.messages.update_password_successfully
            	);
            }
        },
        error: function (e) {
        	ezyadmin.processUpdateApiErrors(formData, e);
			if (api.onFailure) {
            	api.onFailure(e);
            }
        }
    });
}
</script>
</body>
</html>
