Allow to delete an account

pwa/app.js

@@ -50,6 +50,9 @@ class Account {
 document.addEventListener('DOMContentLoaded', () => {
 	// Functions to open and close a modal
 	function openModal(el) {
+		if (el.id === 'modal-del-account') {
+			document.querySelector('#del-account-name').innerHTML = getSelectedAccountName();
+		}
 		el.classList.add('is-active');
 	}
 
@@ -70,6 +73,11 @@ document.addEventListener('DOMContentLoaded', () => {
 		});
 	}
 
+	// Function to get the name of the currently selected account
+	function getSelectedAccountName() {
+		return document.querySelector('#account-name').value;
+	}
+
 	// Function to get an account by its name
 	function getAccountByName(name) {
 		const account_string = localStorage.getItem(name);
@@ -130,6 +138,15 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	});
 
+	// Add a click event on the delete account button to display the confirmation message
+	document.querySelector('#btn-del-account-confirm').addEventListener('click', (event) => {
+		const account_name = getSelectedAccountName();
+		localStorage.removeItem(account_name);
+		console.log(`Account ${account_name} deleted.`);
+		syncAccountList();
+		closeAllModals();
+	});
+
 	// Add a click event on the new account button to register the new account
 	document.querySelector('#btn-new-account').addEventListener('click', (event) => {
 		console.log('Adding new account…');

pwa/index.html

@@ -26,6 +26,9 @@
 									</div>
 								</div>
 								<p class="control">
+								<a class="button is-danger js-modal-trigger" data-target="modal-del-account" id="btn-del-account">Delete</a>
+								</p>
+								<p class="control">
 								<a class="button is-primary js-modal-trigger" data-target="modal-add-account" id="btn-add-account">New</a>
 								</p>
 							</div>
@@ -90,5 +93,23 @@
 				</footer>
 			</div>
 		</div>
+		<div id="modal-del-account" class="modal">
+			<div class="modal-background"></div>
+			<div class="modal-card">
+				<header class="modal-card-head">
+					<p class="modal-card-title">Delete account</p>
+					<button class="delete" aria-label="close"></button>
+				</header>
+				<section class="modal-card-body">
+					<p>You are about to delete the following account:</p>
+					<p id="del-account-name"></p>
+					<p>Are you sure?</p>
+				</section>
+				<footer class="modal-card-foot buttons is-centered">
+					<button class="button is-danger" id="btn-del-account-confirm">Delete</button>
+					<button class="button button-close">Cancel</button>
+				</footer>
+			</div>
+		</div>
 	</body>
 </html>