195 lines
8.1 KiB
HTML
195 lines
8.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
|
||
|
|
|
||
|
|
<th:block th:insert="~{fragments/common :: head(title=#{settings.userSettings})}"></th:block>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<th:block th:insert="~{fragments/common :: game}"></th:block>
|
||
|
|
<div id="page-container">
|
||
|
|
<div id="content-wrap">
|
||
|
|
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
||
|
|
<br> <br>
|
||
|
|
<div class="container">
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-md-8">
|
||
|
|
|
||
|
|
<!-- User Settings Title -->
|
||
|
|
<h2 class="text-center" th:text="#{settings.accountSettings}">User Settings</h2>
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<!-- At the top of the user settings -->
|
||
|
|
<h3 class="text-center">Welcome <span th:text="${username}">User</span>!</h3>
|
||
|
|
|
||
|
|
<!-- Change Username Form -->
|
||
|
|
<h4>Change username?</h4>
|
||
|
|
<form action="/change-username" method="post">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="newUsername" th:text="#{settings.changeUsername}">Change Username</label>
|
||
|
|
<input type="text" class="form-control" name="newUsername" id="newUsername" placeholder="New Username">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="password" th:text="#{settings.password}">Password</label>
|
||
|
|
<input type="password" class="form-control" name="password" id="password" placeholder="Password">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<button type="submit" class="btn btn-primary" th:text="#{settings.changeUsernameButton}">Change Username</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<hr> <!-- Separator Line -->
|
||
|
|
|
||
|
|
<!-- Change Password Form -->
|
||
|
|
<h4>Change Password?</h4>
|
||
|
|
<form action="/change-password" method="post">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="oldPassword" th:text="#{settings.oldPassword}">Old Password</label>
|
||
|
|
<input type="password" class="form-control" name="oldPassword" id="oldPassword" placeholder="Old Password">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="newPassword" th:text="#{settings.newPassword}">New Password</label>
|
||
|
|
<input type="password" class="form-control" name="newPassword" id="newPassword" placeholder="New Password">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="confirmNewPassword" th:text="#{settings.confirmNewPassword}">Confirm New Password</label>
|
||
|
|
<input type="password" class="form-control" name="confirmNewPassword" id="confirmNewPassword" placeholder="Confirm New Password">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<button type="submit" class="btn btn-primary" th:text="#{settings.changePasswordButton}">Change Password</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<hr> <!-- Separator Line -->
|
||
|
|
|
||
|
|
<h4>Sync browser settings with Account</h4>
|
||
|
|
<div class="container mt-4">
|
||
|
|
<h3>Settings Comparison:</h3>
|
||
|
|
<table id="settingsTable" class="table table-bordered table-sm table-striped">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Property</th>
|
||
|
|
<th>Account Setting</th>
|
||
|
|
<th>Web Browser Setting</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<!-- This will be dynamically populated by JavaScript -->
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<div class="buttons-container mt-3 text-center">
|
||
|
|
<button id="syncToBrowser" class="btn btn-primary btn-sm">Sync Account to Web Browser</button>
|
||
|
|
<button id="syncToAccount" class="btn btn-secondary btn-sm">Sync Web Browser to Account</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<a th:if="${role == 'ROLE_ADMIN'}" href="addUsers" target="_blank">
|
||
|
|
<button type="button" class="btn btn-sm btn-outline-primary" th:text="#{settings.adminSettings}">Admin Settings</button>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 800px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
.buttons-container {
|
||
|
|
margin-top: 20px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script th:inline="javascript">
|
||
|
|
document.addEventListener("DOMContentLoaded", function() {
|
||
|
|
const settingsTableBody = document.querySelector("#settingsTable tbody");
|
||
|
|
|
||
|
|
/*<![CDATA[*/
|
||
|
|
var accountSettingsString = /*[[${settings}]]*/ {};
|
||
|
|
/*]]>*/
|
||
|
|
var accountSettings = JSON.parse(accountSettingsString);
|
||
|
|
|
||
|
|
let allKeys = new Set([...Object.keys(accountSettings), ...Object.keys(localStorage)]);
|
||
|
|
|
||
|
|
allKeys.forEach(key => {
|
||
|
|
if(key === 'debug' || key === '0' || key === '1') return; // Ignoring specific keys
|
||
|
|
|
||
|
|
const accountValue = accountSettings[key] || '-';
|
||
|
|
const browserValue = localStorage.getItem(key) || '-';
|
||
|
|
|
||
|
|
const row = settingsTableBody.insertRow();
|
||
|
|
const propertyCell = row.insertCell(0);
|
||
|
|
const accountCell = row.insertCell(1);
|
||
|
|
const browserCell = row.insertCell(2);
|
||
|
|
|
||
|
|
propertyCell.textContent = key;
|
||
|
|
accountCell.textContent = accountValue;
|
||
|
|
browserCell.textContent = browserValue;
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('syncToBrowser').addEventListener('click', function() {
|
||
|
|
// First, clear the local storage
|
||
|
|
localStorage.clear();
|
||
|
|
|
||
|
|
// 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]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
location.reload(); // Refresh the page after sync
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
document.getElementById('syncToAccount').addEventListener('click', function() {
|
||
|
|
let form = document.createElement("form");
|
||
|
|
form.method = "POST";
|
||
|
|
form.action = "/updateUserSettings"; // Your endpoint URL
|
||
|
|
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.body.appendChild(form);
|
||
|
|
form.submit();
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Sign Out Button -->
|
||
|
|
<div class="form-group mt-4">
|
||
|
|
<a href="/logout">
|
||
|
|
<button type="button" class="btn btn-danger" th:text="#{settings.signOut}">Sign Out</button>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|