Add user option to change username

frontend/static/css/admin.css

@@ -139,7 +139,7 @@ div.input-style:has(input.changed) {
 
 #add-user-form,
 #edit-user-form {
-	width: 16rem;
+	width: min(90%, 16rem);
 	height: 8rem;
 
 	display: flex;
@@ -160,7 +160,8 @@ dialog:where(#upload-db-dialog, #import-db-dialog) {
 	--max-height: 25rem;
 }
 
-:where(#upload-db-dialog, #import-db-dialog) .dialog-content > p {
+:where(#upload-db-dialog, #import-db-dialog, #add-user-dialog, #edit-user-dialog)
+ .dialog-content > p {
 	padding-inline: 1rem;
 	text-align: center;
 }

frontend/static/css/settings.css

@@ -15,14 +15,19 @@
 	}
 }
 
-#change-password-form {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
+:where(#edit-account-dialog, #delete-user-dialog) .dialog-content > p {
+	padding-inline: 1rem;
+	text-align: center;
 }
 
-#change-password-form input {
-	width: 16rem;
+#edit-account-form {
+	width: min(90%, 16rem);
+	height: 8rem;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: 1rem;
 }
 
 #delete-account-button {
@@ -33,10 +38,6 @@
 	background-color: var(--color-error);
 }
 
-#delete-user-dialog .dialog-content p {
-	text-align: center;
-}
-
 .contact-list {
 	width: min(100%, 31rem);
 	margin: auto;

frontend/static/js/settings.js

@@ -4,10 +4,22 @@ const settingsEls = {
 		locale: document.querySelector('#locale-input'),
 		defaultService: document.querySelector('#default-service-input'),
 	},
-	changePassword: {
-		form: document.querySelector('#change-password-form'),
-		input: document.querySelector('#change-password-input'),
-		submit: document.querySelector('#change-password-form button')
+	editAccount: {
+		start: document.querySelector("#start-edit-account"),
+		dialog: document.querySelector("#edit-account-dialog"),
+		form: document.querySelector("#edit-account-form"),
+		close: document.querySelector("#close-edit-account"),
+		inputContainers: {
+			username: document.querySelector("#edit-account-form .checked-input-container:has(input[type='text'])")
+		},
+		inputs: {
+			username: document.querySelector("#edit-account-username-input"),
+			password: document.querySelector("#edit-account-password-input")
+		},
+		errors: {
+			usernameInvalid: document.querySelector('#edit-invalid-username-error'),
+			usernameTaken: document.querySelector('#edit-taken-username-error')
+		}
 	},
 	deleteAccount: {
 		dialog: document.querySelector('#delete-user-dialog'),
@@ -40,23 +52,57 @@ function updateClockSetting() {
 	setupClock()
 }
 
-function changePassword() {
-	const data = {
-		'new_password': settingsEls.changePassword.input.value
+function openEditAccount() {
+	settingsEls.editAccount.inputContainers.username.classList.remove('error-input-container')
+	hide([settingsEls.editAccount.errors.usernameInvalid, settingsEls.editAccount.errors.usernameTaken])
+	settingsEls.editAccount.inputs.username.value = ''
+	settingsEls.editAccount.inputs.password.value = ''
+
+	settingsEls.editAccount.dialog.showModal()
+}
+
+function closeEditAccount() {
+	settingsEls.editAccount.dialog.close()
+}
+
+function editAccount() {
+	settingsEls.editAccount.inputContainers.username.classList.remove('error-input-container')
+	hide([settingsEls.editAccount.errors.usernameInvalid, settingsEls.editAccount.errors.usernameTaken])
+
+	const data = {}
+
+	if (settingsEls.editAccount.inputs.username.value !== '')
+		data.new_username = settingsEls.editAccount.inputs.username.value
+
+	if (settingsEls.editAccount.inputs.password.value !== '')
+		data.new_password = settingsEls.editAccount.inputs.password.value
+
+	if (Object.keys(data).length === 0) {
+		// Nothing changed
+		closeEditAccount()
+		return
 	}
+
 	sendAPI("PUT", "/user", {}, data)
-	.then(response => {
-		settingsEls.changePassword.input.value = ""
-		settingsEls.changePassword.submit.style.backgroundColor = "var(--color-success)"
-		settingsEls.changePassword.submit.innerText = "Changed"
-		setTimeout(() => {
-				settingsEls.changePassword.submit.style.backgroundColor = ""
-				settingsEls.changePassword.submit.innerText = "Change"
-			},
-			2000
-		)
+	.then(json => {
+		closeEditAccount()
+	})
+	.catch(e => {
+		e.json().then(e => {
+			if (e.error === 'UsernameInvalid') {
+				settingsEls.editAccount.errors.usernameInvalid.innerText = e.result.reason
+				hide([], [settingsEls.editAccount.errors.usernameInvalid])
+				settingsEls.editAccount.inputContainers.username.classList.add('error-input-container')
+
+			} else if (e.error === 'UsernameTaken') {
+				hide([], [settingsEls.editAccount.errors.usernameTaken])
+				settingsEls.editAccount.inputContainers.username.classList.add('error-input-container')
+
+			} else {
+				console.log(e)
+			}
+		})
 	})
-	.catch(e => console.log(e))
 }
 
 function deleteAccount() {
@@ -71,10 +117,19 @@ loadSettings()
 settingsEls.settings.showClock.onchange = e => updateClockSetting()
 settingsEls.settings.locale.onchange = e => updateLocale()
 settingsEls.settings.defaultService.onchange = e => updateDefaultService()
-settingsEls.changePassword.form.action = 'javascript:changePassword();'
 settingsEls.deleteAccount.button.onclick = e => 
 	settingsEls.deleteAccount.dialog.showModal()
 
+settingsEls.editAccount.start.onclick = e => openEditAccount()
+settingsEls.editAccount.dialog.onclick = e => {
+	if (e.target === e.currentTarget) {
+		e.stopPropagation()
+		closeEditAccount()
+	}
+}
+settingsEls.editAccount.form.action = 'javascript:editAccount()'
+settingsEls.editAccount.close.onclick = e => closeEditAccount()
+
 settingsEls.deleteAccount.dialog.onclick = e => {
 	if (e.target === e.currentTarget) {
 		e.stopPropagation()

frontend/templates/reminders.html

@@ -114,6 +114,30 @@
 		</div>
 	</dialog>
 
+	<dialog id="edit-account-dialog">
+		<div class="dialog-container">
+			<div class="dialog-header">
+				<h2>Edit Account</h2>
+			</div>
+			<div class="dialog-content">
+				<p>Leave fields empty to not change their value</p>
+				<form id="edit-account-form">
+					<div class="checked-input-container">
+						<input type="text" id="edit-account-username-input" autocomplete="username" placeholder="New username" class="input-style">
+						<p id="edit-invalid-username-error">Username invalid</p>
+						<p id="edit-taken-username-error">Username already taken</p>
+					</div>
+
+					<input type="password" id="edit-account-password-input" autocomplete="new-password" placeholder="New password" class="input-style">
+				</form>
+			</div>
+			<div class="dialog-footer">
+				<button id="close-edit-account" class="input-style">Cancel</button>
+				<button type="submit" form="edit-account-form" class="input-style">Save</button>
+			</div>
+		</div>
+	</dialog>
+
 	<header>
 		<div>
 			<label for="nav-toggle" id="toggle-nav">
@@ -481,13 +505,9 @@
 									<td><select id="default-service-input" class="input-style"></select></td>
 								</tr>
 								<tr>
-									<th><label for="change-password-input">Change Password</label></th>
+									<th><label for="start-edit-account">Edit Account</label></th>
 									<td>
-										<form id="change-password-form">
-											<input type="text" name="hidden-username" class="hidden" autocomplete="username">
-											<input type="password" id="change-password-input" class="input-style" autocomplete="new-password" placeholder="New Password" required>
-											<button type="submit" class="input-style">Change</button>
-										</form>
+										<button id="start-edit-account" class="input-style">Edit Account</button>
 									</td>
 								</tr>
 								<tr>