Merge pull request #259 from fractal-analytics-platform/243-revamp-home-page-and-remove-info-page

Revamp home page and remove Info page

Author: tcompa

.env.development

@@ -7,4 +7,7 @@ AUTH_COOKIE_DOMAIN=localhost
 AUTH_COOKIE_PATH=/
 AUTH_COOKIE_MAX_AGE=1800
 AUTH_COOKIE_SAME_SITE=lax
-AUTH_COOKIE_HTTP_ONLY=true
+AUTH_COOKIE_HTTP_ONLY=true
+
+# PUBLIC VARIABLES (accessible from client side)
+PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL=help@localhost

CHANGELOG.md

@@ -3,6 +3,8 @@
 
 # Unreleased
 
+* Revamp home page and user-related layout (\#259).
+* Review logout action (\#259).
 * Implemented editing and deletion of tasks (\#207, \#268). 
 * Bump `word-wrap` from 1.2.3 to 1.2.5 (\#251).
 * Implemented A to B workflow execution (\#254).

docs/contribute.md

@@ -32,6 +32,26 @@ Environment variables are set either in `.env` or `.env.development` files, see
 [vite documentation](https://vitejs.dev/guide/env-and-mode.html#env-files)
 (briefly: `.env.development` is the relevant file when using `npm run dev`).
 
+Here is an example of a `.env` file:
+```bash
+FRACTAL_SERVER_HOST=http://localhost:8000
+
+# AUTH COOKIE
+AUTH_COOKIE_NAME=fastapiusersauth
+AUTH_COOKIE_SECURE=false
+AUTH_COOKIE_DOMAIN=localhost
+AUTH_COOKIE_PATH=/
+AUTH_COOKIE_MAX_AGE=1800
+AUTH_COOKIE_SAME_SITE=lax
+AUTH_COOKIE_HTTP_ONLY=true
+
+# PUBLIC VARIABLES (accessible from client side)
+PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL=help@localhost
+```
+
+Some relevant environment variables are:
+* 
+
 ## Web client startup
 
 The project comes with a default `.env.development` development environment file.

src/lib/server/api/v1/auth_api.js

@@ -1,4 +1,5 @@
 import { FRACTAL_SERVER_HOST } from '$env/static/private';
+import { responseError } from '$lib/common/errors';
 
 /**
  * Request to authenticate user
@@ -52,7 +53,11 @@ export async function logout(fetch) {
 		mode: 'cors'
 	});
 
-	if (!response.ok) {
-		throw new Error('Logout failed');
+	if (response.ok) {
+		console.log('Logout successful');
+		return await response.json();
 	}
+
+	console.error('Logout failed');
+	await responseError(response);
 }

src/routes/+layout.svelte

@@ -13,9 +13,6 @@
 					<a href="/" class="nav-link">Home</a>
 				</li>
 				{#if userLoggedIn}
-					<li class="nav-item">
-						<a href="/info" class="nav-link">Info</a>
-					</li>
 					<li class="nav-item">
 						<a href="/projects" class="nav-link">Projects</a>
 					</li>
@@ -25,6 +22,9 @@
 				{/if}
 			</ul>
 			<ul class="nav">
+				{#if userLoggedIn}
+					<span class="navbar-text">{$page.data.userInfo.email}</span>
+				{/if}
 				<li class="nav-item">
 					{#if !userLoggedIn}
 						<a href="/auth/login" class="nav-link">Login</a>
@@ -42,25 +42,13 @@
 		<footer
 			class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"
 		>
-			<div class="col-md-4 d-flex align-items-center">
-				<span class="mb-3 mb-md-0 text-muted">
-					<a href="https://fractal-analytics-platform.github.io">Fractal Analytics Platform</a>
-				</span>
-			</div>
-			<div class="col-md-4 d-flex justify-content-center">
+			<div class="col d-flex justify-content-center">
 				<div class="hstack gap-3">
 					<span class="font-monospace">{server.version}</span>
 					<div class="vr" />
 					<span class="font-monospace">{server.deployment_type}</span>
 				</div>
 			</div>
-			<ul class="nav col-md-4 justify-content-end d-flex">
-				<li class="ms-2">
-					<a class="text-muted fs-4" href="https://github.com/fractal-analytics-platform">
-						<i class="bi bi-github" />
-					</a>
-				</li>
-			</ul>
 		</footer>
 	</div>
 </main>

src/routes/+page.svelte

@@ -1,4 +1,48 @@
 <script>
+    import { env } from '$env/dynamic/public';
 </script>
 
-<h1>Welcome to Fractal's web client.</h1>
+<h1>Welcome to Fractal web client.</h1>
+
+<div>
+<p>
+    Welcome to the web client of Fractal, a framework to process high-content imaging data at scale and prepare it for interactive visualization.
+</p>
+<p>
+    To access Fractal features, you should first log-in as a registered user.
+    Navigate to the <i>Projects</i> page to create new projects and to create/edit/execute image-analysis workflows.
+    The <i>Tasks</i> page lets you view/edit the available image-analysis tasks or create new ones.
+    </p>
+
+<div class="col mb-3">
+    <a href="/auth/login" class="btn btn-primary">Login</a>
+    <a href="/projects" class="btn btn-primary">Projects</a>
+    <a href="/tasks" class="btn btn-primary">Tasks</a>
+</div>
+
+{#if env.PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL}
+<h3>Where to get support</h3>
+<p>
+    <a href="mailto:{env.PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL}">{env.PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL}</a>
+</p>
+{/if}
+
+<h3>Links</h3>
+
+<ul>
+    <li>
+        <a href="https://fractal-analytics-platform.github.io" target="_blank">
+            Home page of the Fractal project
+        </a>
+    </li>
+    <li>
+        <a href="https://github.com/fractal-analytics-platform" target="_blank">
+            Fractal GitHub organization
+        </a>
+        (where development takes place)
+
+
+    </li>
+</ul>
+
+</div>

src/routes/auth/login/+page.server.js

@@ -42,6 +42,6 @@ export const actions = {
 		console.log(cookieOptions);
 		cookies.set(AUTH_COOKIE_NAME, authData.access_token, cookieOptions);
 
-		throw redirect(302, '/');
+		throw redirect(302, '/projects');
 	}
 };

src/routes/auth/logout/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+    import { goto, invalidateAll } from '$app/navigation';
+    import { onMount } from 'svelte';
+    
+    async function logout() {
+        await fetch(`/auth/token/logout`, {
+			method: 'POST',
+			credentials: 'include'
+		});
+        await invalidateAll();
+        goto('/');
+    };
+    
+    onMount(() => logout());
+</script>
+
+Logging out...

src/routes/auth/logout/+server.js renamed to src/routes/auth/token/logout/+server.js

@@ -1,4 +1,3 @@
-import { error } from '@sveltejs/kit';
 import { logout } from '$lib/server/api/v1/auth_api';
 import {
 	AUTH_COOKIE_NAME,
@@ -9,13 +8,9 @@ import {
 	AUTH_COOKIE_HTTP_ONLY
 } from '$env/static/private';
 
-export async function GET({ fetch, cookies }) {
-	try {
-		await logout(fetch);
-	} catch (e) {
-		console.error(e);
-		throw error(500, { message: e.message });
-	}
+export async function POST({fetch, cookies}) {
+	
+	await logout(fetch);
 
 	// Set the fastapiusersauth cookie to expire in the past
 	// This will delete the cookie
@@ -28,9 +23,5 @@ export async function GET({ fetch, cookies }) {
 		httpOnly: `${AUTH_COOKIE_HTTP_ONLY}` === 'true'
 	});
 
-	const headers = new Headers();
-	// Set a redirect header to index
-	headers.set('Location', '/');
-
-	return new Response('', { headers, status: 302 });
+	return new Response(null, { status: 204 });
 }