2024-02-16 22:49:06 +01:00
|
|
|
<!DOCTYPE html>
|
2024-05-22 21:48:23 +01:00
|
|
|
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
|
2024-05-18 23:47:05 +02:00
|
|
|
<head>
|
2024-02-16 22:49:06 +01:00
|
|
|
<th:block th:insert="~{fragments/common :: head(title=#{account.title})}"></th:block>
|
2024-05-18 23:47:05 +02:00
|
|
|
</head>
|
2023-08-13 01:12:29 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
<body>
|
|
|
|
|
<th:block th:insert="~{fragments/common :: game}"></th:block>
|
|
|
|
|
<div id="page-container">
|
|
|
|
|
<div id="content-wrap">
|
|
|
|
|
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
|
|
|
|
|
<br><br>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row justify-content-center">
|
2024-06-07 23:27:16 +02:00
|
|
|
<div class="col-md-9 bg-card">
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
<!-- User Settings Title -->
|
|
|
|
|
<h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>
|
|
|
|
|
<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>
|
2024-05-18 23:47:05 +02:00
|
|
|
</th:block>
|
2024-05-19 12:44:54 +02:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
<!-- At the top of the user settings -->
|
|
|
|
|
<h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>
|
|
|
|
|
<th:block th:if="${error}">
|
2024-02-16 22:49:06 +01:00
|
|
|
<div class="alert alert-danger" role="alert">
|
|
|
|
|
<span th:text="${error}">Error Message</span>
|
|
|
|
|
</div>
|
2024-05-18 23:47:05 +02:00
|
|
|
</th:block>
|
2024-05-19 12:44:54 +02:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
<!-- Change Username Form -->
|
|
|
|
|
<th:block th:if="${!oAuth2Login}">
|
|
|
|
|
<h4 th:text="#{account.changeUsername}">Change Username?</h4>
|
2024-05-19 12:44:54 +02:00
|
|
|
<form id="formsavechangeusername" class="bg-card mt-4 mb-4" action="api/v1/user/change-username" method="post">
|
2024-05-18 23:47:05 +02:00
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="newUsername" th:text="#{account.newUsername}">Change Username</label>
|
|
|
|
|
<input type="text" class="form-control" name="newUsername" id="newUsername" th:placeholder="#{account.newUsername}">
|
2024-05-19 12:44:54 +02:00
|
|
|
<span id="usernameError" style="display: none;" th:text="#{invalidUsernameMessage}">Invalid username!</span>
|
2024-05-18 23:47:05 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="currentPassword" th:text="#{password}">Password</label>
|
|
|
|
|
<input type="password" class="form-control" name="currentPassword" id="currentPassword" th:placeholder="#{password}">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</th:block>
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
<!-- Change Password Form -->
|
|
|
|
|
<th:block th:if="${!oAuth2Login}">
|
|
|
|
|
<h4 th:text="#{account.changePassword}">Change Password?</h4>
|
2024-05-19 12:44:54 +02:00
|
|
|
<form id="formsavechangepassword" class="bg-card mt-4 mb-4" action="api/v1/user/change-password" method="post">
|
2024-05-18 23:47:05 +02:00
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
|
2024-05-19 12:44:54 +02:00
|
|
|
<input type="password" class="form-control" name="currentPassword" id="currentPassword" th:placeholder="#{account.oldPassword}">
|
2024-05-18 23:47:05 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<label for="newPassword" th:text="#{account.newPassword}">New Password</label>
|
|
|
|
|
<input type="password" class="form-control" name="newPassword" id="newPassword" th:placeholder="#{account.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">
|
|
|
|
|
<button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change Password</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</th:block>
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-05 15:19:53 +04:00
|
|
|
<!-- API Key Form -->
|
|
|
|
|
<h4 th:text="#{account.yourApiKey}">API Key</h4>
|
2024-05-18 23:47:05 +02:00
|
|
|
<div class="card mt-4 mb-4">
|
|
|
|
|
<div class="card-header" th:text="#{account.yourApiKey}"></div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="input-group mb-3">
|
|
|
|
|
<input type="password" class="form-control" id="apiKey" th:placeholder="#{account.yourApiKey}" readonly>
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
<button class="btn btn-secondary" id="copyBtn" type="button" onclick="copyToClipboard()">
|
|
|
|
|
<span class="material-symbols-rounded">
|
2024-05-05 15:19:53 +04:00
|
|
|
content_copy
|
|
|
|
|
</span>
|
2024-05-18 23:47:05 +02:00
|
|
|
</button>
|
|
|
|
|
<button class="btn btn-secondary" id="showBtn" type="button" onclick="showApiKey()">
|
|
|
|
|
<span class="material-symbols-rounded" id="eyeIcon">
|
|
|
|
|
visibility
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="btn btn-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
|
|
|
|
|
<span class="material-symbols-rounded">
|
|
|
|
|
refresh
|
|
|
|
|
</span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2023-08-13 01:12:29 +01:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2024-05-19 12:44:54 +02:00
|
|
|
<script th:inline="javascript">
|
|
|
|
|
jQuery.validator.addMethod("usernamePattern", function(value, element) {
|
|
|
|
|
return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9@._+-]*[a-zA-Z0-9]$|^(?=.{1,64}@)[A-Za-z0-9]+(\.[A-Za-z0-9_+.-]+)*@[^-][A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*(\.[A-Za-z]{2,})$/.test(value);
|
|
|
|
|
}, /*[[#{invalidUsernameMessage}]]*/ "Invalid username format");
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
$('#formsavechangepassword').validate({
|
|
|
|
|
rules: {
|
|
|
|
|
currentPassword: {
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
newPassword: {
|
|
|
|
|
required: true
|
|
|
|
|
},
|
|
|
|
|
confirmNewPassword: {
|
|
|
|
|
required: true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
$('#formsavechangeusername').validate({
|
|
|
|
|
rules: {
|
|
|
|
|
newUsername: {
|
|
|
|
|
required: true,
|
|
|
|
|
usernamePattern: true
|
|
|
|
|
},
|
|
|
|
|
currentPassword: {
|
|
|
|
|
required: true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
messages: {
|
|
|
|
|
newUsername: {
|
|
|
|
|
usernamePattern: /*[[#{invalidUsernameMessage}]]*/ "Invalid username format"
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
errorPlacement: function(error, element) {
|
|
|
|
|
if (element.attr("name") === "newUsername") {
|
|
|
|
|
$("#usernameError").text(error.text()).show();
|
|
|
|
|
} else {
|
|
|
|
|
error.insertAfter(element);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
success: function(label, element) {
|
|
|
|
|
if ($(element).attr("name") === "newUsername") {
|
|
|
|
|
$("#usernameError").hide();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
$('#formsavechangepassword').on('submit', function(event) {
|
|
|
|
|
var newPassword = $('#newPassword').val();
|
|
|
|
|
var confirmNewPassword = $('#confirmNewPassword').val();
|
|
|
|
|
|
|
|
|
|
if (newPassword !== confirmNewPassword) {
|
|
|
|
|
alert('New Password and Confirm New Password must match.');
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
$('#newUsername').on('input', function() {
|
|
|
|
|
var usernameInput = $(this);
|
|
|
|
|
var isValid = usernameInput[0].checkValidity();
|
|
|
|
|
var errorSpan = $('#usernameError');
|
|
|
|
|
|
|
|
|
|
if (isValid) {
|
|
|
|
|
usernameInput.removeClass('invalid').addClass('valid');
|
|
|
|
|
errorSpan.hide();
|
|
|
|
|
} else {
|
|
|
|
|
usernameInput.removeClass('valid').addClass('invalid');
|
|
|
|
|
errorSpan.show();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
2024-05-05 15:19:53 +04:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
<script>
|
|
|
|
|
function copyToClipboard() {
|
|
|
|
|
const apiKeyElement = document.getElementById("apiKey");
|
|
|
|
|
apiKeyElement.select();
|
|
|
|
|
document.execCommand("copy");
|
2024-02-16 22:49:06 +01:00
|
|
|
}
|
|
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
function showApiKey() {
|
|
|
|
|
const apiKeyElement = document.getElementById("apiKey");
|
|
|
|
|
const copyBtn = document.getElementById("copyBtn");
|
|
|
|
|
const eyeIcon = document.getElementById("eyeIcon");
|
|
|
|
|
if (apiKeyElement.type === "password") {
|
|
|
|
|
apiKeyElement.type = "text";
|
|
|
|
|
eyeIcon.textContent = "visibility_off";
|
|
|
|
|
copyBtn.disabled = false; // Enable copy button when API key is visible
|
2024-02-16 22:49:06 +01:00
|
|
|
} else {
|
2024-05-18 23:47:05 +02:00
|
|
|
apiKeyElement.type = "password";
|
|
|
|
|
eyeIcon.textContent = "visibility";
|
|
|
|
|
copyBtn.disabled = true; // Disable copy button when API key is hidden
|
2024-02-16 22:49:06 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
document.addEventListener("DOMContentLoaded", async function() {
|
|
|
|
|
try {
|
|
|
|
|
let response = await fetch('/api/v1/user/get-api-key', { method: 'POST' });
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let apiKey = await response.text();
|
|
|
|
|
manageUIState(apiKey);
|
|
|
|
|
} else {
|
|
|
|
|
manageUIState(null);
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('There was an error:', error);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
async function refreshApiKey() {
|
|
|
|
|
try {
|
|
|
|
|
let response = await fetch('/api/v1/user/update-api-key', { method: 'POST' });
|
|
|
|
|
if (response.status === 200) {
|
|
|
|
|
let apiKey = await response.text();
|
|
|
|
|
manageUIState(apiKey);
|
|
|
|
|
document.getElementById("apiKey").type = 'text';
|
|
|
|
|
document.getElementById("copyBtn").disabled = false;
|
|
|
|
|
} else {
|
|
|
|
|
alert('Error refreshing API key.');
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('There was an error:', error);
|
2024-02-16 22:49:06 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
function manageUIState(apiKey) {
|
|
|
|
|
const apiKeyElement = document.getElementById("apiKey");
|
|
|
|
|
const showBtn = document.getElementById("showBtn");
|
|
|
|
|
const copyBtn = document.getElementById("copyBtn");
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
if (apiKey && apiKey.trim().length > 0) {
|
|
|
|
|
apiKeyElement.value = apiKey;
|
|
|
|
|
showBtn.disabled = false;
|
|
|
|
|
copyBtn.disabled = true;
|
|
|
|
|
} else {
|
|
|
|
|
apiKeyElement.value = "";
|
|
|
|
|
showBtn.disabled = true;
|
|
|
|
|
copyBtn.disabled = true;
|
|
|
|
|
}
|
2024-02-16 22:49:06 +01:00
|
|
|
}
|
|
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
|
|
|
const form = document.querySelector('form[action="api/v1/user/change-password"]');
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
form.addEventListener('submit', function(event) {
|
|
|
|
|
const newPassword = document.getElementById('newPassword').value;
|
|
|
|
|
const confirmNewPassword = document.getElementById('confirmNewPassword').value;
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
if (newPassword !== confirmNewPassword) {
|
|
|
|
|
alert('New Password and Confirm New Password must match.');
|
|
|
|
|
event.preventDefault(); // Prevent form submission
|
|
|
|
|
}
|
|
|
|
|
});
|
2024-02-16 22:49:06 +01:00
|
|
|
});
|
2024-05-18 23:47:05 +02:00
|
|
|
</script>
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
<h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
|
2024-05-19 12:44:54 +02:00
|
|
|
<div class="bg-card container mt-4">
|
2024-05-18 23:47:05 +02:00
|
|
|
<h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>
|
|
|
|
|
<table id="settingsTable" class="table table-bordered table-sm table-striped">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th th:text="#{account.property}">Property</th>
|
|
|
|
|
<th th:text="#{account.accountSettings}">Account Setting</th>
|
|
|
|
|
<th th:text="#{account.webBrowserSettings}">Web Browser Setting</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<!-- This will be dynamically populated by JavaScript -->
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
<div class="buttons-container mt-3 text-center">
|
|
|
|
|
<button id="syncToBrowser" class="btn btn-primary btn-sm" th:text="#{account.syncToBrowser}">Sync Account -> Browser</button>
|
|
|
|
|
<button id="syncToAccount" class="btn btn-secondary btn-sm" th:text="#{account.syncToAccount}">Sync Account <- Browser</button>
|
|
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
|
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
<script th:inline="javascript">
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
|
|
|
const settingsTableBody = document.querySelector("#settingsTable tbody");
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
/*<![CDATA[*/
|
|
|
|
|
var accountSettingsString = /*[[${settings}]]*/ {};
|
|
|
|
|
/*]]>*/
|
|
|
|
|
var accountSettings = JSON.parse(accountSettingsString);
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
let allKeys = new Set([...Object.keys(accountSettings), ...Object.keys(localStorage)]);
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
allKeys.forEach(key => {
|
|
|
|
|
if(key === 'debug' || key === '0' || key === '1') return; // Ignoring specific keys
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
const accountValue = accountSettings[key] || '-';
|
|
|
|
|
const browserValue = localStorage.getItem(key) || '-';
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
const row = settingsTableBody.insertRow();
|
|
|
|
|
const propertyCell = row.insertCell(0);
|
|
|
|
|
const accountCell = row.insertCell(1);
|
|
|
|
|
const browserCell = row.insertCell(2);
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
propertyCell.textContent = key;
|
|
|
|
|
accountCell.textContent = accountValue;
|
|
|
|
|
browserCell.textContent = browserValue;
|
|
|
|
|
});
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
document.getElementById('syncToBrowser').addEventListener('click', function() {
|
|
|
|
|
// First, clear the local storage
|
|
|
|
|
localStorage.clear();
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
// Then, set the account settings to local storage
|
|
|
|
|
for (let key in accountSettings) {
|
|
|
|
|
if(key !== 'debug' && key !== '0' && key !== '1') { // Only sync non-ignored keys
|
|
|
|
|
localStorage.setItem(key, accountSettings[key]);
|
|
|
|
|
}
|
2024-02-16 22:49:06 +01:00
|
|
|
}
|
2024-05-18 23:47:05 +02:00
|
|
|
location.reload(); // Refresh the page after sync
|
|
|
|
|
});
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
document.getElementById('syncToAccount').addEventListener('click', function() {
|
|
|
|
|
let form = document.createElement("form");
|
|
|
|
|
form.method = "POST";
|
|
|
|
|
form.action = "api/v1/user/updateUserSettings"; // Your endpoint URL
|
2024-02-16 22:49:06 +01:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
for (let i = 0; i < localStorage.length; i++) {
|
|
|
|
|
const key = localStorage.key(i);
|
|
|
|
|
if(key !== 'debug' && key !== '0' && key !== '1') { // Only send non-ignored keys
|
|
|
|
|
let hiddenField = document.createElement("input");
|
|
|
|
|
hiddenField.type = "hidden";
|
|
|
|
|
hiddenField.name = key;
|
|
|
|
|
hiddenField.value = localStorage.getItem(key);
|
|
|
|
|
form.appendChild(hiddenField);
|
|
|
|
|
}
|
2024-02-16 22:49:06 +01:00
|
|
|
}
|
|
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
document.body.appendChild(form);
|
|
|
|
|
form.submit();
|
|
|
|
|
});
|
2024-05-05 15:19:53 +04:00
|
|
|
|
2024-05-18 23:47:05 +02:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<div class="mb-3 mt-4 text-center">
|
|
|
|
|
<a href="logout" role="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</a>
|
|
|
|
|
<a th:if="${role == 'ROLE_ADMIN'}" class="btn btn-info" href="addUsers" role="button" th:text="#{account.adminSettings}" target="_blank">Admin Settings</a>
|
|
|
|
|
</div>
|
2023-08-13 01:12:29 +01:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2023-08-13 01:12:29 +01:00
|
|
|
</div>
|
2024-02-16 22:49:06 +01:00
|
|
|
</div>
|
2024-05-18 23:47:05 +02:00
|
|
|
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
|
2023-08-13 01:12:29 +01:00
|
|
|
</div>
|
2024-05-18 23:47:05 +02:00
|
|
|
</body>
|
2024-03-21 21:58:01 +01:00
|
|
|
</html>
|
