1
0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-09-21 12:20:13 +02:00
Stirling-PDF/src/main/resources/templates/account.html

308 lines
13 KiB
HTML
Raw Normal View History

2023-08-13 02:12:29 +02:00
<!DOCTYPE html>
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
2023-08-17 23:03:43 +02:00
<th:block th:insert="~{fragments/common :: head(title=#{account.title})}"></th:block>
2023-08-13 02:12:29 +02:00
<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">
2023-08-13 19:19:15 +02:00
<div class="col-md-9">
2023-08-13 02:12:29 +02:00
<!-- User Settings Title -->
2023-08-17 01:10:14 +02:00
<h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>
2023-08-13 02:12:29 +02:00
<hr>
<!-- At the top of the user settings -->
2023-08-17 01:10:14 +02:00
<h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>
2023-08-13 02:12:29 +02:00
2023-08-15 01:39:13 +02:00
2023-08-13 02:12:29 +02:00
<!-- Change Username Form -->
2023-08-17 01:10:14 +02:00
<h4></h4>
2023-08-13 02:12:29 +02:00
<form action="/change-username" method="post">
<div class="form-group">
2023-08-17 01:10:14 +02:00
<label for="newUsername" th:text="#{account.changeUsername}">Change Username</label>
2023-08-13 02:12:29 +02:00
<input type="text" class="form-control" name="newUsername" id="newUsername" placeholder="New Username">
</div>
<div class="form-group">
2023-08-17 01:10:14 +02:00
<label for="currentPassword" th:text="#{password}">Password</label>
<input type="password" class="form-control" name="currentPassword" id="currentPasswordUsername" placeholder="Password">
2023-08-13 02:12:29 +02:00
</div>
<div class="form-group">
2023-08-17 01:10:14 +02:00
<button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
2023-08-13 02:12:29 +02:00
</div>
</form>
<hr> <!-- Separator Line -->
<!-- Change Password Form -->
2023-08-17 01:10:14 +02:00
<h4 th:text="#{account.changePassword}">Change Password?</h4>
2023-08-13 02:12:29 +02:00
<form action="/change-password" method="post">
<div class="form-group">
2023-08-17 01:10:14 +02:00
<label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
<input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword" th:placeholder="#{account.oldPassword}">
2023-08-13 02:12:29 +02:00
</div>
<div class="form-group">
2023-08-17 01:10:14 +02:00
<label for="newPassword" th:text="#{account.newPassword}">New Password</label>
<input type="password" class="form-control" name="newPassword" id="newPassword" th:placeholder="#{account.newPassword}">
2023-08-13 02:12:29 +02:00
</div>
<div class="form-group">
2023-08-17 01:10:14 +02:00
<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}">
2023-08-13 02:12:29 +02:00
</div>
<div class="form-group">
2023-08-17 01:10:14 +02:00
<button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change Password</button>
2023-08-13 02:12:29 +02:00
</div>
</form>
2023-08-13 19:19:15 +02:00
<hr>
<div class="card">
2023-08-17 01:10:14 +02:00
<div class="card-header" th:text="#{account.yourApiKey}">
2023-08-13 19:19:15 +02:00
</div>
<div class="card-body">
<div class="input-group mb-3">
2023-08-17 01:10:14 +02:00
<input type="password" class="form-control" id="apiKey" th:placeholder="#{account.yourApiKey}" readonly>
2023-08-13 19:19:15 +02:00
<div class="input-group-append">
2023-08-13 23:46:18 +02:00
<button class="btn btn-outline-secondary" id="copyBtn" type="button" onclick="copyToClipboard()">
<img class="blackwhite-icon" src="images/clipboard.svg" alt="Copy" style="height:20px;">
2023-08-13 23:46:18 +02:00
</button>
2023-08-14 23:48:30 +02:00
<button class="btn btn-outline-secondary" id="showBtn" type="button" onclick="showApiKey()">
<img class="blackwhite-icon" id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">
2023-08-14 23:48:30 +02:00
</button>
<button class="btn btn-outline-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">
<img class="blackwhite-icon" id="eyeIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">
2023-08-14 23:48:30 +02:00
</button>
2023-08-13 19:19:15 +02:00
</div>
</div>
</div>
</div>
<script>
2023-08-13 23:46:18 +02:00
function copyToClipboard() {
const apiKeyElement = document.getElementById("apiKey");
apiKeyElement.select();
document.execCommand("copy");
}
2023-08-13 19:19:15 +02:00
function showApiKey() {
const apiKeyElement = document.getElementById("apiKey");
2023-08-13 23:46:18 +02:00
const copyBtn = document.getElementById("copyBtn");
2023-08-14 23:48:30 +02:00
const eyeIcon = document.getElementById("eyeIcon");
2023-08-13 19:19:15 +02:00
if (apiKeyElement.type === "password") {
2023-08-13 23:46:18 +02:00
apiKeyElement.type = "text";
2023-08-14 23:48:30 +02:00
eyeIcon.src = "images/eye-slash.svg";
2023-08-13 23:46:18 +02:00
copyBtn.disabled = false; // Enable copy button when API key is visible
2023-08-13 19:19:15 +02:00
} else {
apiKeyElement.type = "password";
2023-08-14 23:48:30 +02:00
eyeIcon.src = "images/eye.svg";
2023-08-13 23:46:18 +02:00
copyBtn.disabled = true; // Disable copy button when API key is hidden
2023-08-13 19:19:15 +02:00
}
}
document.addEventListener("DOMContentLoaded", async function() {
try {
let response = await fetch('/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('/update-api-key', { method: 'POST' });
if (response.status === 200) {
let apiKey = await response.text();
manageUIState(apiKey);
document.getElementById("apiKey").type = 'text';
2023-08-13 23:46:18 +02:00
document.getElementById("copyBtn").disabled = false;
2023-08-13 19:19:15 +02:00
} else {
alert('Error refreshing API key.');
}
} catch (error) {
console.error('There was an error:', error);
}
}
function manageUIState(apiKey) {
const apiKeyElement = document.getElementById("apiKey");
const showBtn = document.getElementById("showBtn");
2023-08-13 23:46:18 +02:00
const copyBtn = document.getElementById("copyBtn");
2023-08-13 19:19:15 +02:00
if (apiKey && apiKey.trim().length > 0) {
apiKeyElement.value = apiKey;
showBtn.disabled = false;
2023-08-13 23:46:18 +02:00
copyBtn.disabled = true;
2023-08-13 19:19:15 +02:00
} else {
apiKeyElement.value = "";
showBtn.disabled = true;
2023-08-13 23:46:18 +02:00
copyBtn.disabled = true;
2023-08-13 19:19:15 +02:00
}
}
2023-08-19 13:50:49 +02:00
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector('form[action="/change-password"]');
form.addEventListener('submit', function(event) {
const newPassword = document.getElementById('newPassword').value;
const confirmNewPassword = document.getElementById('confirmNewPassword').value;
if (newPassword !== confirmNewPassword) {
alert('New Password and Confirm New Password must match.');
event.preventDefault(); // Prevent form submission
}
});
});
2023-08-13 19:19:15 +02:00
</script>
2023-08-13 02:12:29 +02:00
<hr> <!-- Separator Line -->
2023-08-17 01:10:14 +02:00
<h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
2023-08-13 02:12:29 +02:00
<div class="container mt-4">
2023-08-17 01:10:14 +02:00
<h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>
2023-08-13 02:12:29 +02:00
<table id="settingsTable" class="table table-bordered table-sm table-striped">
<thead>
<tr>
2023-08-17 01:10:14 +02:00
<th th:text="#{account.property}">Property</th>
<th th:text="#{account.accountSettings}">Account Setting</th>
<th th:text="#{account.webBrowserSettings}">Web Browser Setting</th>
2023-08-13 02:12:29 +02:00
</tr>
</thead>
<tbody>
<!-- This will be dynamically populated by JavaScript -->
</tbody>
</table>
<div class="buttons-container mt-3 text-center">
2023-08-17 01:10:14 +02:00
<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>
2023-08-13 02:12:29 +02:00
</div>
</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>
2023-08-15 01:39:13 +02:00
2023-08-13 02:12:29 +02:00
<div class="form-group mt-4">
<a href="/logout">
2023-08-17 01:10:14 +02:00
<button type="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</button>
2023-08-13 02:12:29 +02:00
</a>
2023-08-15 01:39:13 +02:00
<a th:if="${role == 'ROLE_ADMIN'}" href="addUsers" target="_blank">
2023-08-17 01:10:14 +02:00
<button type="button" class="btn btn-info" th:text="#{account.adminSettings}">Admin Settings</button>
2023-08-15 01:39:13 +02:00
</a>
2023-08-13 02:12:29 +02:00
</div>
</div>
</div>
</div>
</div>
<div th:insert="~{fragments/footer.html :: footer}"></div>
</div>
</body>
</html>