Merged my profiles and my settings

Author: zonia3000

src/routes/+layout.svelte

@@ -174,7 +174,6 @@
 						</a>
 						<ul class="dropdown-menu">
 							<li><a class="dropdown-item" href="/profile">My profile</a></li>
-							<li><a class="dropdown-item" href="/settings">My settings</a></li>
 							{#if env.PUBLIC_FRACTAL_DATA_URL && env.PUBLIC_FRACTAL_VIZARR_VIEWER_URL}
 								<li><a class="dropdown-item" href="/viewer-paths">Viewer paths</a></li>
 							{/if}

src/routes/profile/+page.server.js

@@ -1,4 +1,9 @@
-import { getCurrentUser, getProfileInfo } from '$lib/server/api/auth_api.js';
+import {
+	getCurrentUser,
+	getCurrentUserSettings,
+	getProfileInfo
+} from '$lib/server/api/auth_api.js';
+import { env } from '$env/dynamic/private';
 import { getLogger } from '$lib/server/logger.js';
 
 const logger = getLogger('profile page');
@@ -8,9 +13,12 @@ export async function load({ fetch }) {
 
 	const user = await getCurrentUser(fetch, true);
 	const profile = await getProfileInfo(fetch);
+	const settings = await getCurrentUserSettings(fetch);
 
 	return {
 		user,
-		profile
+		profile,
+		settings,
+		runnerBackend: env.FRACTAL_RUNNER_BACKEND
 	};
 }

src/routes/profile/+page.svelte

@@ -1,11 +1,95 @@
 <script>
 	import { page } from '$app/state';
+	import {
+		AlertError,
+		displayStandardErrorAlert,
+		getValidationMessagesMap
+	} from '$lib/common/errors';
+	import StandardDismissableAlert from '$lib/components/common/StandardDismissableAlert.svelte';
+	import { normalizePayload } from 'fractal-components';
 	import BooleanIcon from 'fractal-components/common/BooleanIcon.svelte';
+	import { onMount } from 'svelte';
 
 	/** @type {import('fractal-components/types/api').User & {group_ids_names: Array<[number, string]>}} */
 	const user = $derived(page.data.user);
 	/** @type {import('fractal-components/types/api').ProfileInfo} */
 	const profile = $derived(page.data.profile);
+
+	/**
+	 * @type {import('fractal-components/types/api').UserSettings}
+	 */
+	const settings = $derived(page.data.settings);
+	const runnerBackend = $derived(page.data.runnerBackend);
+
+	/** @type {import('$lib/components/common/StandardErrorAlert.svelte').default|undefined} */
+	let errorAlert = undefined;
+
+	/** @type {string[]} */
+	let slurmAccounts = $state([]);
+	let slurmAccountsError = $state('');
+
+	let settingsUpdatedMessage = $state('');
+
+	function addSlurmAccount() {
+		slurmAccounts = [...slurmAccounts, ''];
+	}
+
+	/**
+	 * @param {number} index
+	 */
+	function removeSlurmAccount(index) {
+		slurmAccounts = slurmAccounts.filter((_, i) => i !== index);
+	}
+
+	async function save() {
+		if (errorAlert) {
+			errorAlert.hide();
+		}
+		settingsUpdatedMessage = '';
+		slurmAccountsError = '';
+		const headers = new Headers();
+		headers.set('Content-Type', 'application/json');
+		const payload = {
+			slurm_accounts: slurmAccounts
+		};
+		const response = await fetch(`/api/auth/current-user/settings`, {
+			method: 'PATCH',
+			credentials: 'include',
+			headers,
+			body: normalizePayload(payload, { nullifyEmptyStrings: true })
+		});
+		const result = await response.json();
+		if (response.ok) {
+			initFields(result);
+			settingsUpdatedMessage = 'User settings successfully updated';
+		} else {
+			const errorMap = getValidationMessagesMap(result, response.status);
+			let errorShown = false;
+			if (errorMap) {
+				if ('slurm_accounts' in errorMap) {
+					slurmAccountsError = /** @type {string} */ (errorMap['slurm_accounts']);
+					errorShown = true;
+				}
+			}
+			if (!errorShown) {
+				errorAlert = displayStandardErrorAlert(
+					new AlertError(result, response.status),
+					'settingsUpdate-error'
+				);
+			}
+		}
+	}
+
+	/**
+	 * @param {import('fractal-components/types/api').UserSettings} settings
+	 */
+	function initFields(settings) {
+		slurmAccounts = settings.slurm_accounts;
+	}
+
+	onMount(() => {
+		initFields(page.data.settings);
+	});
 </script>
 
 <div class="container mt-3">
@@ -86,8 +170,58 @@
 							</tr>
 						{/if}
 					{/if}
+					<tr>
+						<th>Project dir</th>
+						<td>{settings.project_dir || '-'}</td>
+					</tr>
 				</tbody>
 			</table>
 		</div>
 	</div>
+
+	{#if runnerBackend !== 'local'}
+		<div class="row mb-3">
+			<div class="col-lg-2 col-sm-4 ms-2 fw-bold">SLURM accounts</div>
+			<div class="col-lg-6 col-sm-8">
+				<div class="col-sm-9 has-validation">
+					<!-- eslint-disable-next-line no-unused-vars -->
+					{#each slurmAccounts as _, i (i)}
+						<div class="input-group mb-2" class:is-invalid={slurmAccountsError}>
+							<input
+								type="text"
+								class="form-control"
+								id={`slurmAccount-${i}`}
+								bind:value={slurmAccounts[i]}
+								class:is-invalid={slurmAccountsError}
+								aria-label="SLURM account {i + 1}"
+								required
+							/>
+							<button
+								class="btn btn-outline-secondary"
+								type="button"
+								id="slurm_account_remove_{i}"
+								aria-label="Remove SLURM account"
+								onclick={() => removeSlurmAccount(i)}
+							>
+								<i class="bi bi-trash"></i>
+							</button>
+						</div>
+					{/each}
+					<span class="invalid-feedback mb-2">{slurmAccountsError}</span>
+					<button class="btn btn-light" type="button" onclick={addSlurmAccount}>
+						<i class="bi bi-plus-circle"></i>
+						Add SLURM account
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<div class="row">
+			<div class="col-lg-6 col-sm-8 offset-lg-2 offset-sm-4">
+				<div id="settingsUpdate-error"></div>
+				<StandardDismissableAlert message={settingsUpdatedMessage} />
+				<button class="btn btn-primary ms-2" onclick={save}> Save </button>
+			</div>
+		</div>
+	{/if}
 </div>