feat(website): open account details in new window (#2195)

* Update UserPage.astro * Automated code formatting --------- Co-authored-by: Loculus bot <[email protected]>
loculus-project · Jun 27, 2024 · 454d4ca · 454d4ca
1 parent 9b3561d
commit 454d4ca
Showing 1 changed file with 7 additions and 10 deletions.
diff --git a/website/src/components/User/UserPage.astro b/website/src/components/User/UserPage.astro
@@ -8,25 +8,21 @@ import { getAccessToken } from '../../utils/getAccessToken';
 import { urlForKeycloakAccountPage } from '../../utils/urlForKeycloakAccountPage';
 import ErrorBox from '../common/ErrorBox.tsx';
 import DashiconsGroups from '~icons/dashicons/groups';
+import IconoirOpenNewWindow from '~icons/iconoir/open-new-window';
 import MaterialSymbolsLightPersonOutline from '~icons/material-symbols-light/person-outline';
 
 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(session)!;
-
 const logoutUrl = new URL(Astro.request.url);
 logoutUrl.pathname = routes.logout();
-
 const keycloakClient = await KeycloakClientManager.getClient();
-
 const keycloakLogoutUrl = keycloakClient!.endSessionUrl({
     post_logout_redirect_uri: logoutUrl.href,
 });
 const accountPageUrl = await urlForKeycloakAccountPage(keycloakClient!);
-
 const groupOfUsersResult = await GroupManagementClient.create().getGroupsOfUser(accessToken);
 ---
 
@@ -42,27 +38,28 @@ const groupOfUsersResult = await GroupManagementClient.create().getGroupsOfUser(
                     }}
                 />
             </div>
-
             <div>
                 <h1 class='text-gray-900 text-xl font-semibold'>{name}</h1>
                 <h2 class='text-gray-700 font-semibold'>
                     {username}
                 </h2>
             </div>
         </div>
-
         <div class='my-2 flex gap-2'>
             <a
                 href={keycloakLogoutUrl}
                 class='bg-primary-500 hover:bg-primary-700 text-white font-bold py-2 px-4 rounded text-sm'>Logout</a
             >
             <a
                 href={accountPageUrl}
-                class='bg-primary-500 hover:bg-primary-700 text-white font-bold py-2 px-4 rounded text-sm'
-                >Edit account information</a
+                target='_blank'
+                rel='noopener noreferrer'
+                class='bg-primary-500 hover:bg-primary-700 text-white font-bold py-2 px-4 rounded text-sm flex items-center'
             >
+                Edit account information
+                <IconoirOpenNewWindow className='ml-1 w-4 h-4' />
+            </a>
         </div>
-
         <div class='font-bold mt-12 text-lg mb-2 text-primary-700'>
             <DashiconsGroups className='w-6 h-6 inline-block mr-2' />My groups
         </div>