<!--
 ~ 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="change-password-modal">
	<div class="modal-dialog modal-md">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">[[#{change_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="changePasswordForm" onsubmit="return false;">
					<div class="form-group row">
						<label for="changeOldPassword" class="col-sm-4 col-form-label">
							[[#{old_password}]]
						</label>
						<div class="col-sm-8">
							<label class="col-form-label text-danger d-none" id="changeOldPasswordErrorLabel" for="changeOldPassword">
								<i class="far fa-times-circle"></i> <span id="changeOldPasswordError"></span>
							</label>
							<div class="input-group mb-3">
								<input type="password" name="oldPassword" onkeydown="ezyadmin.onKeyDownToChangePassword()"
									   id="changeOldPassword" class="form-control" th:placeholder="#{old_password}">
								<div class="input-group-append">
									<button type="button" class="btn btn-secondary" id="showChangeOldPasswordButton" tabindex="-1"
											onclick="ezyadmin.togglePasswordVisible('changeOldPassword', 'showChangeOldPasswordButton', 'hideChangeOldPasswordButton')">
										<i class="fas fa-eye"></i>
									</button>
									<button type="button" class="btn btn-secondary d-none" id="hideChangeOldPasswordButton" tabindex="-1"
											onclick="ezyadmin.togglePasswordVisible('changeOldPassword', 'showChangeOldPasswordButton', 'hideChangeOldPasswordButton')">
										<i class="fas fa-eye-slash"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group row mb-0">
						<label for="changeNewPassword" class="col-sm-4 col-form-label">
							[[#{new_password}]]
						</label>
						<div class="col-sm-8">
							<label class="col-form-label text-danger d-none" id="changeNewPasswordErrorLabel" for="changeNewPassword">
								<i class="far fa-times-circle"></i> <span id="changeNewPasswordError"></span>
							</label>
							<div class="input-group mb-3">
								<input type="password" name="newPassword" onkeydown="ezyadmin.onKeyDownToChangePassword()"
									   id="changeNewPassword" class="form-control" th:placeholder="#{new_password}">
								<div class="input-group-append">
									<button type="button" class="btn btn-secondary" id="showChangeNewPasswordButton" tabindex="-1"
											onclick="ezyadmin.togglePasswordVisible('changeNewPassword', 'showChangeNewPasswordButton', 'hideChangeNewPasswordButton')">
										<i class="fas fa-eye"></i>
									</button>
									<button type="button" class="btn btn-secondary d-none" id="hideChangeNewPasswordButton" tabindex="-1"
											onclick="ezyadmin.togglePasswordVisible('changeNewPassword', 'showChangeNewPasswordButton', 'hideChangeNewPasswordButton')">
										<i class="fas fa-eye-slash"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-4 col-form-label">
						</label>
						<div class="col-sm-8">
							<div class="d-flex align-items-center">
								<button type="button" id="randomPasswordButton" class="btn btn-outline-primary pt-1 pb-1"
										onclick="ezyadmin.onRandomPasswordClick();">
									[[#{random}]]
								</button>
								<span class="ml-2" id="generatedPassword"></span>
							</div>
						</div>
					</div>
					<div class="row">
						<label for="changeRetypePassword" class="col-sm-4 col-form-label">
							[[#{retype_password}]]
						</label>
						<div class="col-sm-8">
							<label class="col-form-label text-danger d-none" id="changeRetypePasswordErrorLabel" for="changeRetypePassword">
								<i class="far fa-times-circle"></i> <span id="changeRetypePasswordError"></span>
							</label>
							<div class="input-group">
								<input type="password" name="retypeNewPassword" onkeydown="ezyadmin.onKeyDownToChangePassword()"
									   id="changeRetypePassword" class="form-control" th:placeholder="#{retype_password}">
								<div class="input-group-append">
									<button type="button" class="btn btn-secondary" id="showChangeRetypePasswordButton" tabindex="-1"
											onclick="ezyadmin.togglePasswordVisible('changeRetypePassword', 'showChangeRetypePasswordButton', 'hideChangeRetypePasswordButton')">
										<i class="fas fa-eye"></i>
									</button>
									<button type="button" class="btn btn-secondary d-none" id="hideChangeRetypePasswordButton" tabindex="-1"
											onclick="ezyadmin.togglePasswordVisible('changeRetypePassword', 'showChangeRetypePasswordButton', 'hideChangeRetypePasswordButton')">
										<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">[[#{cancel}]]</button>
				<div class="d-flex gap-2">
					<button th:if="${(editUser != null && adminRoles.isAccessible('/api/v1/users/{username}/generate-forgot-password-uri', 'POST')) || (editAdmin != null && editAdmin.id != adminId && adminRoles.isAccessible('/api/v1/admins/{username}/generate-reset-password-uri', 'POST'))}" type="button" class="btn btn-warning copy-reset-password-link"
							onclick="ezyadmin.onCopyResetPasswordLinkClick();">
						[[#{copy_the_password_reset_link}]]
					</button>
					<button type="button" class="btn btn-primary" onclick="ezyadmin.onChangePasswordClick();">[[#{change}]]</button>
				</div>
			</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}]]*/;
/*]]>*/

// ==================== change password script ========
ezyadmin.showChangePasswordModal = function() {
	$('#generatedPassword').text('');
	$('#changeOldPassword').val('');
	$('#changeNewPassword').val('');
	$('#changeRetypePassword').val('');
	$('#changeOldPasswordErrorLabel').addClass('d-none');
	$('#changeNewPasswordErrorLabel').addClass('d-none');
	$('#changeRetypePasswordErrorLabel').addClass('d-none');
	$('#change-password-modal').modal('show');
}

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

ezyadmin.onRandomPasswordClick = function() {
	var password = ezyadmin.randomPassword();
	$('#generatedPassword').text(password);
	$('#changeNewPassword').val(password);
	$('#changeRetypePassword').val(password);
}

ezyadmin.onKeyDownToChangePassword = function() {
    if(event.key === 'Enter') {
    	ezyadmin.onChangePasswordClick();
    }
}

ezyadmin.onChangePasswordClick = function() {
	if ($('#changeRetypePassword').val() != $('#changeNewPassword').val()) {
		$('#changeRetypePasswordError').text(
			ezyadmin.messages.password_not_match
		);
    	$('#changeRetypePasswordErrorLabel').removeClass('d-none');
		return;
	} else {
		$('#changeRetypePasswordErrorLabel').addClass('d-none');
	}
	var api = ezyadmin.changePasswordApi;
	var formData = ezyadmin.formDataToObject('changePasswordForm');
	var formView = {
		changeOldPassword: true,
		changeNewPassword: true,
		changeRetypePassword: true
	};
    $.ajax({
        type: "PUT",
        url: api.url,
        data: JSON.stringify(formData),
        contentType: 'application/json',
        success: function (data) {
        	$('#change-password-modal').modal('hide');
        	ezyadmin.resetFormData(formView);
            if (api.onSuccess) {
            	api.onSuccess();
            }
            if (api.showToast != false) {
            	ezyadmin.shortToast(
            		'bg-success',
            		ezyadmin.messages.update_password_successfully
            	);
            }
        },
        error: function (e) {
        	var errors = e.responseJSON || {};
        	errors.changeOldPassword = errors.password;
			errors.changeNewPassword = errors.newPassword;
        	ezyadmin.processUpdateApiErrors(formView, e);
			if (api.onFailure) {
            	api.onFailure(e);
            }
        }
    });
}
</script>
</body>
</html>
