2024-02-16 22:49:06 +01:00
|
|
|
<!DOCTYPE html>
|
2024-05-22 22:48:23 +02:00
|
|
|
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
|
2024-02-16 22:49:06 +01:00
|
|
|
<head>
|
|
|
|
|
<th:block th:insert="~{fragments/common :: head(title=#{changeCreds.title}, header=#{changeCreds.header})}"></th:block>
|
|
|
|
|
</head>
|
2023-09-03 17:40:40 +02:00
|
|
|
|
2024-02-16 22:49:06 +01:00
|
|
|
<body>
|
2023-09-03 17:40:40 +02:00
|
|
|
<th:block th:insert="~{fragments/common :: game}"></th:block>
|
|
|
|
|
<div id="page-container">
|
2024-02-16 22:49:06 +01:00
|
|
|
<div id="content-wrap">
|
|
|
|
|
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
|
2024-03-21 21:58:01 +01:00
|
|
|
<br><br>
|
2024-02-16 22:49:06 +01:00
|
|
|
<div class="container">
|
|
|
|
|
<div class="row justify-content-center">
|
2024-05-19 12:44:54 +02:00
|
|
|
<div class="col-md-9 bg-card">
|
2024-02-16 22:49:06 +01:00
|
|
|
|
|
|
|
|
<!-- User Settings Title -->
|
|
|
|
|
<h2 class="text-center" th:text="#{changeCreds.header}">User Settings</h2>
|
2024-03-21 21:58:01 +01:00
|
|
|
<hr>
|
2024-05-18 23:47:05 +02:00
|
|
|
<th:block th:if="${messageType}">
|
|
|
|
|
<div class="alert alert-danger">
|
|
|
|
|
<span th:text="#{${messageType}}">Default message if not found</span>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
|
|
|
|
</th:block>
|
|
|
|
|
<!-- At the top of the user settings -->
|
|
|
|
|
<h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>
|
|
|
|
|
|
|
|
|
|
<!-- Change Username Form -->
|
2024-03-07 21:12:07 +01:00
|
|
|
<h4 th:text="#{changeCreds.changePassword}">Change password</h4>
|
2024-06-08 23:36:23 +02:00
|
|
|
<form action="api/v1/user/change-password-on-login" method="post" id="formsavechangecreds">
|
2024-02-16 22:49:06 +01:00
|
|
|
<div class="mb-3">
|
2024-03-07 21:12:07 +01:00
|
|
|
<label for="currentPassword" th:text="#{changeCreds.oldPassword}">Old Password</label>
|
|
|
|
|
<input type="password" class="form-control" name="currentPassword" id="currentPassword" th:placeholder="#{changeCreds.oldPassword}">
|
2023-09-03 17:40:40 +02:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="newPassword" th:text="#{changeCreds.newPassword}">New Password</label>
|
|
|
|
|
<input type="password" class="form-control" name="newPassword" id="newPassword" th:placeholder="#{changeCreds.newPassword}">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="confirmNewPassword" th:text="#{account.confirmNewPassword}">Confirm New Password</label>
|
|
|
|
|
<input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPassword" th:placeholder="#{account.confirmNewPassword}">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
2024-06-08 23:36:23 +02:00
|
|
|
<span id="confirmPasswordError" style="display: none;" th:text="#{confirmPasswordErrorMessage}">New Password and Confirm New Password must match.</span>
|
2024-02-16 22:49:06 +01:00
|
|
|
<button type="submit" class="btn btn-primary" th:text="#{changeCreds.submit}">Change credentials!</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
2024-06-08 23:36:23 +02:00
|
|
|
<script th:inline="javascript">
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
$.validator.addMethod("passwordMatch", function(value, element) {
|
|
|
|
|
return $('#newPassword').val() === $('#confirmNewPassword').val();
|
|
|
|
|
}, /*[[#{confirmPasswordErrorMessage}]]*/ "New Password and Confirm New Password must match.");
|
|
|
|
|
$('#formsavechangecreds').validate({
|
|
|
|
|
rules: {
|
|
|
|
|
currentPassword: {
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
newPassword: {
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
confirmNewPassword: {
|
|
|
|
|
required: true,
|
|
|
|
|
passwordMatch: true
|
|
|
|
|
},
|
|
|
|
|
errorPlacement: function(error, element) {
|
|
|
|
|
if ($(element).attr("name") === "newPassword" || $(element).attr("name") === "confirmNewPassword") {
|
|
|
|
|
$("#confirmPasswordError").text(error.text()).show();
|
|
|
|
|
} else {
|
|
|
|
|
error.insertAfter(element);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
success: function(label, element) {
|
|
|
|
|
if ($(element).attr("name") === "newPassword" || $(element).attr("name") === "confirmNewPassword") {
|
|
|
|
|
$("#confirmPasswordError").hide();
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-02-16 22:49:06 +01:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2023-09-03 17:40:40 +02:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2023-09-03 17:40:40 +02:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
|
|
|
|
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
|
2023-09-03 17:40:40 +02:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</body>
|
2024-03-21 21:58:01 +01:00
|
|
|
</html>
|
