Stirling-PDF/src/main/resources/templates/account.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=#{account.title})}"></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-9">

                        <!-- User Settings Title -->
                        <h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>
                        <hr>
						<div th:if="${notAuthenticated}" class="alert alert-danger" role="alert">
						    User not authenticated.
						</div>
								<div th:if="${userNotFound}" class="alert alert-danger" role="alert">
						    User not found.
						</div>
								<div th:if="${incorrectPassword}" class="alert alert-danger" role="alert">
						    Current password is incorrect.
						</div>
						<div th:if="${usernameExists}" class="alert alert-danger" role="alert">
						    New username already exists.
						</div>
						
						
						<!-- At the top of the user settings -->
						<h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>

						<div th:if="${error}" class="alert alert-danger" role="alert">
						    <span th:text="${error}">Error Message</span>
						</div>
                        <!-- Change Username Form -->
                        <h4></h4>
                        <form action="/change-username" method="post">
                            <div class="mb-3">
                                <label for="newUsername" th:text="#{account.changeUsername}">Change Username</label>
                                <input type="text" class="form-control" name="newUsername" id="newUsername" placeholder="New Username">
                            </div>
                            <div class="mb-3">
                                <label for="currentPassword" th:text="#{password}">Password</label>
                                <input type="password" class="form-control" name="currentPassword" id="currentPasswordUsername" placeholder="Password">
                            </div>
                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>
                            </div>
                        </form>
                        
                        <hr> <!-- Separator Line -->

                        <!-- Change Password Form -->
                        <h4 th:text="#{account.changePassword}">Change Password?</h4>
                        <form action="/change-password" method="post">
                            <div class="mb-3">
                                <label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>
                                <input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword"  th:placeholder="#{account.oldPassword}">
                            </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>

						<hr>
						
						<div class="card">
					        <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-outline-secondary" id="copyBtn" type="button" onclick="copyToClipboard()"> 
					                    	<img class="blackwhite-icon" src="images/clipboard.svg" alt="Copy" style="height:20px;">
					                	</button>
					                    <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;">
										</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;">
										</button>
										
					                  
					                </div>
					            </div>
					        </div>
					    </div>
					    
					    <script>
					    function copyToClipboard() {
					        const apiKeyElement = document.getElementById("apiKey");
					        apiKeyElement.select();
					        document.execCommand("copy");
					    }

					    
					    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.src = "images/eye-slash.svg";
					        	copyBtn.disabled = false;  // Enable copy button when API key is visible
					        } else {
					            apiKeyElement.type = "password";
					            eyeIcon.src = "images/eye.svg";
					            copyBtn.disabled = true;  // Disable copy button when API key is hidden
					        }
					    }

					    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';
					                document.getElementById("copyBtn").disabled = false;
					            } 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");
					        const copyBtn = document.getElementById("copyBtn");

					        if (apiKey && apiKey.trim().length > 0) {
					            apiKeyElement.value = apiKey;
					            showBtn.disabled = false;
					            copyBtn.disabled = true;  
					        } else {
					            apiKeyElement.value = "";
					            showBtn.disabled = true;
					            copyBtn.disabled = true;
					        }
					    }

					    
					    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
					            }
					        });
					    });
					    </script>
    
    
                        <hr> <!-- Separator Line -->
                        
                        <h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>
                        <div class="container mt-4">
    <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>

    <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>
</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>
            
                        
                        <div class="mb-3 mt-4">
                            <a href="/logout">
                                <button type="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</button>
                            </a>
                            <a th:if="${role == 'ROLE_ADMIN'}" href="addUsers" target="_blank">
						        <button type="button" class="btn btn-info"  th:text="#{account.adminSettings}">Admin Settings</button>
						    </a>

                        </div>

                    </div>
                </div>
            </div>

        </div>
        <div th:insert="~{fragments/footer.html :: footer}"></div>
    </div>
</body>
</html>
test 2023-08-20 22:57:19 +02:00			`<!doctype html>`
security 2023-08-13 02:12:29 +02:00			`<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">`

translations 2023-08-17 23:03:43 +02:00			`<th:block th:insert="~{fragments/common :: head(title=#{account.title})}"></th:block>`
security 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">`
IT WORKS almost 2023-08-13 19:19:15 +02:00			`<div class="col-md-9">`
security 2023-08-13 02:12:29 +02:00
			`<!-- User Settings Title -->`
translates 2023-08-17 01:10:14 +02:00			`<h2 class="text-center" th:text="#{account.accountSettings}">User Settings</h2>`
security 2023-08-13 02:12:29 +02:00			`<hr>`
testing messages 2023-09-03 20:44:16 +02:00			`<div th:if="${notAuthenticated}" class="alert alert-danger" role="alert">`
			`User not authenticated.`
			`</div>`
			`<div th:if="${userNotFound}" class="alert alert-danger" role="alert">`
			`User not found.`
			`</div>`
			`<div th:if="${incorrectPassword}" class="alert alert-danger" role="alert">`
			`Current password is incorrect.`
			`</div>`
			`<div th:if="${usernameExists}" class="alert alert-danger" role="alert">`
			`New username already exists.`
			`</div>`



cred change start 2023-09-03 17:40:40 +02:00
security 2023-08-13 02:12:29 +02:00			`<!-- At the top of the user settings -->`
translates 2023-08-17 01:10:14 +02:00			`<h3 class="text-center"><span th:text="#{welcome} + ' ' + ${username}">User</span>!</h3>`
security 2023-08-13 02:12:29 +02:00
cred change start 2023-09-03 17:40:40 +02:00			`<div th:if="${error}" class="alert alert-danger" role="alert">`
			`<span th:text="${error}">Error Message</span>`
			`</div>`
security 2023-08-13 02:12:29 +02:00			`<!-- Change Username Form -->`
translates 2023-08-17 01:10:14 +02:00			`<h4></h4>`
security 2023-08-13 02:12:29 +02:00			`<form action="/change-username" method="post">`
test 2023-08-20 22:57:19 +02:00			`<div class="mb-3">`
translates 2023-08-17 01:10:14 +02:00			`<label for="newUsername" th:text="#{account.changeUsername}">Change Username</label>`
security 2023-08-13 02:12:29 +02:00			`<input type="text" class="form-control" name="newUsername" id="newUsername" placeholder="New Username">`
			`</div>`
test 2023-08-20 22:57:19 +02:00			`<div class="mb-3">`
translates 2023-08-17 01:10:14 +02:00			`<label for="currentPassword" th:text="#{password}">Password</label>`
darkmode fix for account and pagenumber support filename 2023-08-19 17:59:34 +02:00			`<input type="password" class="form-control" name="currentPassword" id="currentPasswordUsername" placeholder="Password">`
security 2023-08-13 02:12:29 +02:00			`</div>`
test 2023-08-20 22:57:19 +02:00			`<div class="mb-3">`
translates 2023-08-17 01:10:14 +02:00			`<button type="submit" class="btn btn-primary" th:text="#{account.changeUsername}">Change Username</button>`
security 2023-08-13 02:12:29 +02:00			`</div>`
			`</form>`

			`<hr> <!-- Separator Line -->`

			`<!-- Change Password Form -->`
translates 2023-08-17 01:10:14 +02:00			`<h4 th:text="#{account.changePassword}">Change Password?</h4>`
security 2023-08-13 02:12:29 +02:00			`<form action="/change-password" method="post">`
test 2023-08-20 22:57:19 +02:00			`<div class="mb-3">`
translates 2023-08-17 01:10:14 +02:00			`<label for="currentPassword" th:text="#{account.oldPassword}">Old Password</label>`
darkmode fix for account and pagenumber support filename 2023-08-19 17:59:34 +02:00			`<input type="password" class="form-control" name="currentPassword" id="currentPasswordPassword" th:placeholder="#{account.oldPassword}">`
security 2023-08-13 02:12:29 +02:00			`</div>`
test 2023-08-20 22:57:19 +02:00			`<div class="mb-3">`
translates 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}">`
security 2023-08-13 02:12:29 +02:00			`</div>`
test 2023-08-20 22:57:19 +02:00			`<div class="mb-3">`
translates 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}">`
security 2023-08-13 02:12:29 +02:00			`</div>`
test 2023-08-20 22:57:19 +02:00			`<div class="mb-3">`
translates 2023-08-17 01:10:14 +02:00			`<button type="submit" class="btn btn-primary" th:text="#{account.changePassword}">Change Password</button>`
security 2023-08-13 02:12:29 +02:00			`</div>`
			`</form>`

IT WORKS almost 2023-08-13 19:19:15 +02:00			`<hr>`

			`<div class="card">`
translates 2023-08-17 01:10:14 +02:00			`<div class="card-header" th:text="#{account.yourApiKey}">`

IT WORKS almost 2023-08-13 19:19:15 +02:00			`</div>`
			`<div class="card-body">`
			`<div class="input-group mb-3">`
translates 2023-08-17 01:10:14 +02:00			`<input type="password" class="form-control" id="apiKey" th:placeholder="#{account.yourApiKey}" readonly>`
IT WORKS almost 2023-08-13 19:19:15 +02:00			`<div class="input-group-append">`
Login 2023-08-13 23:46:18 +02:00			`<button class="btn btn-outline-secondary" id="copyBtn" type="button" onclick="copyToClipboard()">`
darkmode fix for account and pagenumber support filename 2023-08-19 17:59:34 +02:00			`<img class="blackwhite-icon" src="images/clipboard.svg" alt="Copy" style="height:20px;">`
Login 2023-08-13 23:46:18 +02:00			`</button>`
Change account icons 2023-08-14 23:48:30 +02:00			`<button class="btn btn-outline-secondary" id="showBtn" type="button" onclick="showApiKey()">`
darkmode fix for account and pagenumber support filename 2023-08-19 17:59:34 +02:00			`<img class="blackwhite-icon" id="eyeIcon" src="images/eye.svg" alt="Toggle API Key Visibility" style="height:20px;">`
Change account icons 2023-08-14 23:48:30 +02:00			`</button>`
			`<button class="btn btn-outline-secondary" id="refreshBtn" type="button" onclick="refreshApiKey()">`
darkmode fix for account and pagenumber support filename 2023-08-19 17:59:34 +02:00			`<img class="blackwhite-icon" id="eyeIcon" src="images/arrow-clockwise.svg" alt="Refresh API-Key" style="height:20px;">`
Change account icons 2023-08-14 23:48:30 +02:00			`</button>`


IT WORKS almost 2023-08-13 19:19:15 +02:00			`</div>`
			`</div>`
			`</div>`
			`</div>`

			`<script>`
Login 2023-08-13 23:46:18 +02:00			`function copyToClipboard() {`
			`const apiKeyElement = document.getElementById("apiKey");`
			`apiKeyElement.select();`
			`document.execCommand("copy");`
			`}`

IT WORKS almost 2023-08-13 19:19:15 +02:00
			`function showApiKey() {`
			`const apiKeyElement = document.getElementById("apiKey");`
Login 2023-08-13 23:46:18 +02:00			`const copyBtn = document.getElementById("copyBtn");`
Change account icons 2023-08-14 23:48:30 +02:00			`const eyeIcon = document.getElementById("eyeIcon");`
IT WORKS almost 2023-08-13 19:19:15 +02:00			`if (apiKeyElement.type === "password") {`
Login 2023-08-13 23:46:18 +02:00			`apiKeyElement.type = "text";`
Change account icons 2023-08-14 23:48:30 +02:00			`eyeIcon.src = "images/eye-slash.svg";`
Login 2023-08-13 23:46:18 +02:00			`copyBtn.disabled = false; // Enable copy button when API key is visible`
IT WORKS almost 2023-08-13 19:19:15 +02:00			`} else {`
			`apiKeyElement.type = "password";`
Change account icons 2023-08-14 23:48:30 +02:00			`eyeIcon.src = "images/eye.svg";`
Login 2023-08-13 23:46:18 +02:00			`copyBtn.disabled = true; // Disable copy button when API key is hidden`
IT WORKS almost 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';`
Login 2023-08-13 23:46:18 +02:00			`document.getElementById("copyBtn").disabled = false;`
IT WORKS almost 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");`
Login 2023-08-13 23:46:18 +02:00			`const copyBtn = document.getElementById("copyBtn");`
IT WORKS almost 2023-08-13 19:19:15 +02:00
			`if (apiKey && apiKey.trim().length > 0) {`
			`apiKeyElement.value = apiKey;`
			`showBtn.disabled = false;`
Login 2023-08-13 23:46:18 +02:00			`copyBtn.disabled = true;`
IT WORKS almost 2023-08-13 19:19:15 +02:00			`} else {`
			`apiKeyElement.value = "";`
			`showBtn.disabled = true;`
Login 2023-08-13 23:46:18 +02:00			`copyBtn.disabled = true;`
IT WORKS almost 2023-08-13 19:19:15 +02:00			`}`
			`}`


Fix password updation 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`
			`}`
			`});`
			`});`
IT WORKS almost 2023-08-13 19:19:15 +02:00			`</script>`


security 2023-08-13 02:12:29 +02:00			`<hr> <!-- Separator Line -->`

translates 2023-08-17 01:10:14 +02:00			`<h4 th:text="#{account.syncTitle}">Sync browser settings with Account</h4>`
security 2023-08-13 02:12:29 +02:00			`<div class="container mt-4">`
translates 2023-08-17 01:10:14 +02:00			`<h3 th:text="#{account.settingsCompare}">Settings Comparison:</h3>`
security 2023-08-13 02:12:29 +02:00			`<table id="settingsTable" class="table table-bordered table-sm table-striped">`
			`<thead>`
			`<tr>`
translates 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>`
security 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">`
translates 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>`
security 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>`





change user and pass 2023-08-15 01:39:13 +02:00
test 2023-08-20 22:57:19 +02:00			`<div class="mb-3 mt-4">`
security 2023-08-13 02:12:29 +02:00			`<a href="/logout">`
translates 2023-08-17 01:10:14 +02:00			`<button type="button" class="btn btn-danger" th:text="#{account.signOut}">Sign Out</button>`
security 2023-08-13 02:12:29 +02:00			`</a>`
change user and pass 2023-08-15 01:39:13 +02:00			`<a th:if="${role == 'ROLE_ADMIN'}" href="addUsers" target="_blank">`
translates 2023-08-17 01:10:14 +02:00			`<button type="button" class="btn btn-info" th:text="#{account.adminSettings}">Admin Settings</button>`
change user and pass 2023-08-15 01:39:13 +02:00			`</a>`

security 2023-08-13 02:12:29 +02:00			`</div>`

			`</div>`
			`</div>`
			`</div>`

			`</div>`
			`<div th:insert="~{fragments/footer.html :: footer}"></div>`
			`</div>`
			`</body>`
			`</html>`