Refactor user page (#1110)

* Refactor user page * Update website/src/components/User/UserPage.astro Co-authored-by: Theo Sanderson <theo@sndrsn.co.uk> * Address PR comments * Fix e2es --------- Co-authored-by: Theo Sanderson <theo@sndrsn.co.uk>
loculus-project · Feb 25, 2024 · 762cc16 · 762cc16
1 parent d34fb80
commit 762cc16
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 22 deletions.
diff --git a/website/src/components/User/UserPage.astro b/website/src/components/User/UserPage.astro
@@ -6,6 +6,9 @@ import { getKeycloakClient } from '../../middleware/authMiddleware';
 import { routes } from '../../routes';
 import { getAccessToken } from '../../utils/getAccessToken';
 const session = Astro.locals.session;
+const user = session.user!; // page only accessible if user is logged in
+const username = user.username!; // all users must have a username
+const name = user.name;
 
 const accessToken = getAccessToken(Astro.locals.session)!;
 
@@ -17,13 +20,13 @@ const logoutUrl = new URL(Astro.request.url);
 logoutUrl.pathname = routes.logout();
 
 const keycloakLogoutUrl = (await getKeycloakClient()).endSessionUrl({
-    post_logout_redirect_uri: logoutUrl.href,
+    post_logout_redirect_uri: logoutUrl.href.replace('http://', 'https://'),
 });
 ---
 
-<BaseLayout title='Login'>
+<BaseLayout title='My account'>
     <div class='flex items-center'>
-        <h1 class='title'>User {session.user?.name}</h1>
+        <h1 class='title'>{name} ({username})</h1>
     </div>
     <div class='my-2 mx-4'>
         <a href={keycloakLogoutUrl}>Logout</a>
@@ -43,21 +46,8 @@ const keycloakLogoutUrl = (await getKeycloakClient()).endSessionUrl({
             </>
         )
     }
-    {
-        session.user?.username !== undefined && (
-            <div class='my-2 mx-4'>
-                <a href={routes.datasetsPage(session.user.username)}>Datasets Overview</a>
-            </div>
-        )
-    }
-    {
-        session.user?.username !== undefined && (
-            <GroupManager
-                accessToken={accessToken}
-                clientConfig={clientConfig}
-                username={session.user.username}
-                client:load
-            />
-        )
-    }
+    <div class='my-2 mx-4'>
+        <a href={routes.datasetsPage(username)}>Datasets Overview</a>
+    </div>
+    <GroupManager accessToken={accessToken} clientConfig={clientConfig} username={username} client:load />
 </BaseLayout>
diff --git a/website/tests/pages/navigation.spec.ts b/website/tests/pages/navigation.spec.ts
@@ -1,7 +1,7 @@
 import { baseUrl, dummyOrganism, test } from '../e2e.fixture';
 
 const organismIndependentNavigationItems = [
-    { link: 'User', title: 'Login' },
+    { link: 'User', title: 'My account' },
     { link: 'About', title: 'About' },
     { link: 'Api documentation', title: 'Api Docs' },
     { link: 'Governance', title: 'Governance' },
@@ -11,7 +11,7 @@ const organismIndependentNavigationItems = [
 const organismNavigationItems = [
     { link: 'Browse', title: '[Organism] - Browse' },
     { link: 'Submit', title: 'Submit' },
-    { link: 'User', title: 'Login' },
+    { link: 'User', title: 'My account' },
     { link: 'Sequence Overview', title: 'Sequences' },
 ];