From ee45535e8c89f9c87a6ac3cc342a72c0c315b905 Mon Sep 17 00:00:00 2001
From: James <Jamestp19@gmail.com>
Date: Tue, 20 Feb 2024 10:01:26 -0500
Subject: [PATCH] [ALS-5911] Api Page, refactor

[ALS-5911] Api Page

refactor
---
 package-lock.json                             |   3 +-
 package.json                                  |   3 +-
 playwright.config.ts                          |   3 +
 src/app.postcss                               |  30 +++
 src/lib/api.ts                                |   5 +-
 .../component/dataset/cell/copy-button.svelte |  31 ---
 .../Content.svelte}                           |   0
 src/lib/components/CopyButton.svelte          |  29 +++
 .../ErrorAlert.svelte}                        |   0
 .../Navigation.svelte}                        |   0
 src/lib/components/UserToken.svelte           | 204 ++++++++++++++++
 .../dataset/cell/Actions.svelte}              |   2 +-
 .../dataset/cell/CopyButtonCell.svelte        |  12 +
 .../datatable/Table.svelte}                   |  12 +-
 .../datatable/accessories/Count.svelte}       |   0
 .../datatable/accessories/Filter.svelte}      |   0
 .../datatable/accessories/Pagination.svelte}  |   0
 .../datatable/accessories/Rows.svelte}        |   0
 .../datatable/accessories/Search.svelte}      |   0
 .../datatable/accessories/Sort.svelte}        |   0
 src/lib/configuration.ts                      |  35 ++-
 src/lib/content.svelte                        |  10 -
 .../{model/dataset.ts => models/Dataset.ts}   |   4 +-
 src/lib/models/User.ts                        |   8 +
 src/lib/{store => stores}/dataset.ts          |   6 +-
 src/routes/+layout.svelte                     |   8 +-
 src/routes/+page.svelte                       |  20 +-
 src/routes/admin/+page.svelte                 |   2 +-
 src/routes/admin/super/+page.svelte           |   2 +-
 src/routes/api/+page.svelte                   |  39 +++-
 src/routes/dataset/+page.svelte               |  17 +-
 src/routes/dataset/[uuid]/+page.svelte        |   8 +-
 src/routes/explorer/+page.svelte              |   2 +-
 src/routes/help/+page.svelte                  |   2 +-
 src/routes/help/dummy/+page.svelte            |   2 +-
 src/routes/users/+page.svelte                 |   2 +-
 tests/custom-context.ts                       |   2 +-
 tests/lib/component/navigation/test.ts        |   4 +-
 tests/mock-data.ts                            |  10 +-
 tests/routes/api/test.ts                      | 220 ++++++++++++++++++
 tests/routes/dataset/test.ts                  |  28 +--
 vite.config.ts                                |  12 +-
 42 files changed, 640 insertions(+), 137 deletions(-)
 delete mode 100644 src/lib/component/dataset/cell/copy-button.svelte
 rename src/lib/{component/content.svelte => components/Content.svelte} (100%)
 create mode 100644 src/lib/components/CopyButton.svelte
 rename src/lib/{component/error-alert.svelte => components/ErrorAlert.svelte} (100%)
 rename src/lib/{component/navigation.svelte => components/Navigation.svelte} (100%)
 create mode 100644 src/lib/components/UserToken.svelte
 rename src/lib/{component/dataset/cell/actions.svelte => components/dataset/cell/Actions.svelte} (96%)
 create mode 100644 src/lib/components/dataset/cell/CopyButtonCell.svelte
 rename src/lib/{component/datatable/table.svelte => components/datatable/Table.svelte} (86%)
 rename src/lib/{component/datatable/accessories/count.svelte => components/datatable/accessories/Count.svelte} (100%)
 rename src/lib/{component/datatable/accessories/filter.svelte => components/datatable/accessories/Filter.svelte} (100%)
 rename src/lib/{component/datatable/accessories/pagination.svelte => components/datatable/accessories/Pagination.svelte} (100%)
 rename src/lib/{component/datatable/accessories/rows.svelte => components/datatable/accessories/Rows.svelte} (100%)
 rename src/lib/{component/datatable/accessories/search.svelte => components/datatable/accessories/Search.svelte} (100%)
 rename src/lib/{component/datatable/accessories/sort.svelte => components/datatable/accessories/Sort.svelte} (100%)
 delete mode 100644 src/lib/content.svelte
 rename src/lib/{model/dataset.ts => models/Dataset.ts} (92%)
 create mode 100644 src/lib/models/User.ts
 rename src/lib/{store => stores}/dataset.ts (92%)
 create mode 100644 tests/routes/api/test.ts

diff --git a/package-lock.json b/package-lock.json
index 28c9e347..aff65eef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
         "@floating-ui/dom": "1.5.3",
         "@fortawesome/fontawesome-free": "^6.5.1",
         "@vincjo/datatables": "^1.14.5",
-        "dotenv": "^16.3.1"
+        "dotenv": "^16.3.1",
+        "svelte-eslint-parser": "^0.33.1"
       },
       "devDependencies": {
         "@playwright/test": "^1.42.0",
diff --git a/package.json b/package.json
index 0ddef68c..913dc146 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@floating-ui/dom": "1.5.3",
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@vincjo/datatables": "^1.14.5",
-    "dotenv": "^16.3.1"
+    "dotenv": "^16.3.1",
+    "svelte-eslint-parser": "^0.33.1"
   }
 }
diff --git a/playwright.config.ts b/playwright.config.ts
index 49812fed..cd54dde9 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -8,6 +8,9 @@ const config: PlaywrightTestConfig = {
   testDir: 'tests',
   testMatch: /(.+\.)?(test|spec)\.[jt]s/,
   reporter: [['list'], ['html']],
+  use: {
+    permissions: ['clipboard-read', 'clipboard-write'],
+  },
 };
 
 export default config;
diff --git a/src/app.postcss b/src/app.postcss
index 18f572f8..f86189ee 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -139,6 +139,24 @@ nav#page-navigation a:active {
   color: rgb(var(--theme-font-color-base));
 }
 
+#landing input[type='search'] {
+  width: 100%;
+  box-sizing: border-box;
+  margin-right: 0.5rem;
+  @apply input;
+}
+
+#landing .stats {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  width: 70%;
+  margin: 2rem 0;
+  padding: 2rem;
+  @apply card variant-filled-primary;
+}
+
 .subtitle {
   font-size: 2rem;
 }
@@ -189,3 +207,15 @@ nav#page-navigation a:active {
 .table.align-middle tbody td {
   vertical-align: middle;
 }
+
+#user-token span.badge.expired {
+  @apply variant-filled-error;
+}
+
+#user-token span.badge.expiring {
+  @apply variant-filled-warning;
+}
+
+#user-token span.badge.valid {
+  @apply variant-filled-success;
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index c847404c..ccb82f4c 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -3,11 +3,10 @@ import { browser } from '$app/environment';
 
 // TODO: fix any types
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
 async function send({
   method,
   path,
-  data
+  data,
 }: {
   method: string;
   path: string;
@@ -15,7 +14,7 @@ async function send({
 }) {
   const opts: { method: string; headers: { [key: string]: string }; body?: string } = {
     method,
-    headers: {}
+    headers: {},
   };
 
   if (data) {
diff --git a/src/lib/component/dataset/cell/copy-button.svelte b/src/lib/component/dataset/cell/copy-button.svelte
deleted file mode 100644
index 36a9b978..00000000
--- a/src/lib/component/dataset/cell/copy-button.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { clipboard } from '@skeletonlabs/skeleton';
-
-  export let data = { cell: '', row: {} };
-
-  let buttonText = 'Copy';
-  let timer: ReturnType<typeof setTimeout>;
-
-  function debounce(text: string) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      buttonText = text;
-    }, 4500);
-  }
-  function copyToClipboard() {
-    debounce(buttonText);
-    buttonText = 'Copied!';
-  }
-</script>
-
-<div class="flex justify-between items-center">
-  <span class="uuid">{data.cell}</span>
-  <button
-    type="button"
-    class="btn w-24 bg-primary-500 text-on-primary-token"
-    on:click={copyToClipboard}
-    use:clipboard={data.cell}
-  >
-    {buttonText}
-  </button>
-</div>
diff --git a/src/lib/component/content.svelte b/src/lib/components/Content.svelte
similarity index 100%
rename from src/lib/component/content.svelte
rename to src/lib/components/Content.svelte
diff --git a/src/lib/components/CopyButton.svelte b/src/lib/components/CopyButton.svelte
new file mode 100644
index 00000000..0daecf6f
--- /dev/null
+++ b/src/lib/components/CopyButton.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { clipboard } from '@skeletonlabs/skeleton';
+
+  export let buttonText = 'Copy';
+  export let itemToCopy: string;
+  export let classes: string[] = ['variant-ringed-primary'];
+  let timer: ReturnType<typeof setTimeout>;
+
+  function debounce(text: string) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      buttonText = text;
+    }, 4500);
+  }
+  function updateCopyButtonText() {
+    debounce(buttonText);
+    buttonText = 'Copied!';
+  }
+</script>
+
+<button
+  type="button"
+  data-testid="copy-button"
+  class={'btn ' + classes.join(' ')}
+  on:click={updateCopyButtonText}
+  use:clipboard={itemToCopy}
+>
+  {buttonText}
+</button>
diff --git a/src/lib/component/error-alert.svelte b/src/lib/components/ErrorAlert.svelte
similarity index 100%
rename from src/lib/component/error-alert.svelte
rename to src/lib/components/ErrorAlert.svelte
diff --git a/src/lib/component/navigation.svelte b/src/lib/components/Navigation.svelte
similarity index 100%
rename from src/lib/component/navigation.svelte
rename to src/lib/components/Navigation.svelte
diff --git a/src/lib/components/UserToken.svelte b/src/lib/components/UserToken.svelte
new file mode 100644
index 00000000..15d04e6d
--- /dev/null
+++ b/src/lib/components/UserToken.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+  import {
+    type ToastSettings,
+    type ModalSettings,
+    getModalStore,
+    getToastStore,
+    ProgressRadial,
+  } from '@skeletonlabs/skeleton';
+  import * as api from '$lib/api';
+  import type { User } from '../models/User';
+  import CopyButton from './CopyButton.svelte';
+  import ErrorAlert from './ErrorAlert.svelte';
+
+  type LongTermTokenResponse = {
+    userLongTermToken: string;
+  };
+  const modalStore = getModalStore();
+  const toastStore = getToastStore();
+
+  let rows = 1;
+  let account = '';
+  let placeHolderToken =
+    '•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••';
+  let textarea: HTMLTextAreaElement;
+  let revealed = false;
+  let refreshButtonDisabled = false;
+  let refreshButtonText = 'Refresh';
+  let user: User;
+
+  $: displayedToken = revealed ? user?.token : placeHolderToken;
+  $: revealButtonText = revealed ? 'Hide' : 'Reveal';
+  $: expires = user && user.token ? extractExperationDate(user.token) : 0;
+  $: badge = expires && checkIfExpired();
+  $: account = user?.email || 'There was an error retrieving your account.';
+
+  function checkIfExpired() {
+    if (!expires || expires === 0) {
+      return 'unknown';
+    }
+    const daysLeftOnToken = Math.floor((expires - Date.now()) / (1000 * 60 * 60 * 24));
+    if (expires < Date.now()) {
+      return 'expired';
+    } else if (daysLeftOnToken < 7) {
+      return 'expiring soon';
+    } else {
+      return 'valid for ' + daysLeftOnToken + ' more days';
+    }
+  }
+
+  function confirmRefreshToken() {
+    const modal: ModalSettings = {
+      type: 'confirm',
+      title: 'Please Confirm',
+      body: 'Are you sure you wish to invalidate your old token and create a new one?',
+      response: (r: boolean) => r && refreshToken(),
+    };
+    modalStore.trigger(modal);
+  }
+
+  function extractExperationDate(token: string) {
+    if (!token) return 0;
+    try {
+      return JSON.parse(atob(token.split('.')[1])).exp * 1000;
+    } catch (error) {
+      console.error(error);
+      const extractExperationDateErrorToast: ToastSettings = {
+        message:
+          'An error occured while parsing your token. Please try again later. If this problem persists, please contact an administrator.',
+        background: 'variant-filled-error',
+      };
+      toastStore.trigger(extractExperationDateErrorToast);
+      return 0; //TODO: Handle errors
+    }
+  }
+
+  async function getUser(): Promise<User> {
+    return await api
+      .get('/psama/user/me?hasToken')
+      .then((response: User) => {
+        user = response;
+        return response;
+      })
+      .catch((error) => {
+        console.error('Error getting user:\n', error);
+        throw error;
+      });
+  }
+
+  async function refreshToken() {
+    const newLongTermToken = await api
+      .get('/psama/user/me/refresh_long_term_token')
+      .then((response: LongTermTokenResponse) => {
+        return response.userLongTermToken;
+      })
+      .catch((error) => {
+        console.error(error);
+        return;
+      });
+    if (!newLongTermToken) {
+      refreshButtonText = 'Error';
+      const refreshErrorToast: ToastSettings = {
+        message:
+          'An error occured while refreshing your token. Please try again later. If this problem persists, please contact an administrator.',
+        background: 'variant-filled-error',
+      };
+      toastStore.trigger(refreshErrorToast);
+      return;
+    }
+    user.token = newLongTermToken;
+    refreshButtonText = 'Refreshed!';
+    refreshButtonDisabled = true;
+    rows = updateRows();
+  }
+
+  function revealToken() {
+    revealed = !revealed;
+    rows = updateRows();
+  }
+
+  function updateRows() {
+    if (!revealed || !user.token) return 1;
+    let fontSizeInPt = +window.getComputedStyle(textarea).fontSize.split('px')[0] * 0.75;
+    return Math.ceil((user.token.length * (fontSizeInPt - 1)) / textarea.clientWidth);
+  }
+</script>
+
+<div id="user-token-container">
+  {#await getUser()}
+    <ProgressRadial width="w-10" value={undefined} />
+  {:then}
+    <div id="user-token" class="card variant-filled-sureface">
+      <header class="card-header">PIC-SURE Token</header>
+      <section class="p-4 grid grid-cols-2 gap-y-2 items-center">
+        <label for="account">Account:</label>
+        <span id="account" class="w-full">{account}</span>
+        <label for="token">Token:</label>
+        <textarea id="token" bind:value={displayedToken} bind:this={textarea} {rows} disabled
+        ></textarea>
+        <label for="expires">Expires:</label>
+        <div>
+          <span id="expires" class="w-1/3 mr-2"
+            >{new Date(expires).toString().substring(0, 24)}</span
+          >
+          {#if badge}
+            <span id="expires-badge" class="badge {badge}" data-testid="expires-badge"
+              >{badge.toUpperCase()}</span
+            >
+          {/if}
+        </div>
+      </section>
+      <footer class="card-footer">
+        <CopyButton
+          buttonText="Copy"
+          itemToCopy={user.token || ''}
+          classes={['variant-ringed-primary']}
+        />
+        <button
+          id="refresh-button"
+          class="btn variant-ringed-primary"
+          on:click={confirmRefreshToken}
+          disabled={refreshButtonDisabled}>{refreshButtonText}</button
+        >
+        <button id="reveal-button" class="btn variant-ringed-primary" on:click={revealToken}
+          >{revealButtonText}</button
+        >
+      </footer>
+    </div>
+  {:catch}
+    <ErrorAlert
+      title="An error occured while to retrieving your account. If this problem persists, please
+    contact an administrator."
+    />
+  {/await}
+</div>
+
+<style>
+  #user-token-container {
+    display: flex;
+    justify-content: center;
+    width: 52rem;
+  }
+  #user-token-container #user-token {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+  }
+  #user-token-container #user-token section {
+    min-width: 50rem;
+    grid-template-columns: min-content auto;
+  }
+  #user-token-container #user-token section textarea {
+    max-width: 48rem;
+    word-wrap: break-word;
+    height: fit-content;
+  }
+  #user-token-container #user-token section label {
+    text-align: right;
+    clear: both;
+    float: left;
+    margin-right: 15px;
+  }
+</style>
diff --git a/src/lib/component/dataset/cell/actions.svelte b/src/lib/components/dataset/cell/Actions.svelte
similarity index 96%
rename from src/lib/component/dataset/cell/actions.svelte
rename to src/lib/components/dataset/cell/Actions.svelte
index 7c8524d4..813c8789 100644
--- a/src/lib/component/dataset/cell/actions.svelte
+++ b/src/lib/components/dataset/cell/Actions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import DataSetStore from '$lib/store/dataset';
+  import DataSetStore from '$lib/stores/dataset';
 
   export let data = { cell: '', row: { archived: false } };
   let toggleButton: HTMLButtonElement;
diff --git a/src/lib/components/dataset/cell/CopyButtonCell.svelte b/src/lib/components/dataset/cell/CopyButtonCell.svelte
new file mode 100644
index 00000000..818173f1
--- /dev/null
+++ b/src/lib/components/dataset/cell/CopyButtonCell.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import CopyButton from '$lib/components/CopyButton.svelte';
+
+  export let data = { cell: '', row: {} };
+  let buttonText = 'Copy';
+  const buttonClasses = ['w-24', 'bg-primary-500', 'text-on-primary-token'];
+</script>
+
+<div class="flex justify-between items-center">
+  <span class="uuid">{data.cell}</span>
+  <CopyButton {buttonText} itemToCopy={data.cell} classes={buttonClasses} />
+</div>
diff --git a/src/lib/component/datatable/table.svelte b/src/lib/components/datatable/Table.svelte
similarity index 86%
rename from src/lib/component/datatable/table.svelte
rename to src/lib/components/datatable/Table.svelte
index 721fc3c0..81e06bcd 100644
--- a/src/lib/component/datatable/table.svelte
+++ b/src/lib/components/datatable/Table.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { DataHandler } from '@vincjo/datatables';
 
-  import ThSort from './accessories/sort.svelte';
-  import ThFilter from './accessories/filter.svelte';
-  import Search from './accessories/search.svelte';
-  import RowsPerPage from './accessories/rows.svelte';
-  import RowCount from './accessories/count.svelte';
-  import Pagination from './accessories/pagination.svelte';
+  import ThSort from './accessories/Sort.svelte';
+  import ThFilter from './accessories/Filter.svelte';
+  import Search from './accessories/Search.svelte';
+  import RowsPerPage from './accessories/Rows.svelte';
+  import RowCount from './accessories/Count.svelte';
+  import Pagination from './accessories/Pagination.svelte';
   import type { Indexable } from '$lib/types';
 
   interface Column {
diff --git a/src/lib/component/datatable/accessories/count.svelte b/src/lib/components/datatable/accessories/Count.svelte
similarity index 100%
rename from src/lib/component/datatable/accessories/count.svelte
rename to src/lib/components/datatable/accessories/Count.svelte
diff --git a/src/lib/component/datatable/accessories/filter.svelte b/src/lib/components/datatable/accessories/Filter.svelte
similarity index 100%
rename from src/lib/component/datatable/accessories/filter.svelte
rename to src/lib/components/datatable/accessories/Filter.svelte
diff --git a/src/lib/component/datatable/accessories/pagination.svelte b/src/lib/components/datatable/accessories/Pagination.svelte
similarity index 100%
rename from src/lib/component/datatable/accessories/pagination.svelte
rename to src/lib/components/datatable/accessories/Pagination.svelte
diff --git a/src/lib/component/datatable/accessories/rows.svelte b/src/lib/components/datatable/accessories/Rows.svelte
similarity index 100%
rename from src/lib/component/datatable/accessories/rows.svelte
rename to src/lib/components/datatable/accessories/Rows.svelte
diff --git a/src/lib/component/datatable/accessories/search.svelte b/src/lib/components/datatable/accessories/Search.svelte
similarity index 100%
rename from src/lib/component/datatable/accessories/search.svelte
rename to src/lib/components/datatable/accessories/Search.svelte
diff --git a/src/lib/component/datatable/accessories/sort.svelte b/src/lib/components/datatable/accessories/Sort.svelte
similarity index 100%
rename from src/lib/component/datatable/accessories/sort.svelte
rename to src/lib/components/datatable/accessories/Sort.svelte
diff --git a/src/lib/configuration.ts b/src/lib/configuration.ts
index db8dbdc8..b4af3bde 100644
--- a/src/lib/configuration.ts
+++ b/src/lib/configuration.ts
@@ -1,4 +1,19 @@
 export const branding = {
+  applicationName: 'PIC‑SURE',
+  apiPage: {
+    cards: [
+      {
+        header: 'What is the PIC‑SURE API?',
+        body: 'The PIC-SURE Application Programming Interface allows you to search, query, and export data using Python or R. \n\nClick this card to read more about the PIC-SURE API.',
+        link: 'https://pic-sure.org/about',
+      },
+      {
+        header: 'PIC‑SURE API Examples',
+        body: 'Get started using the PIC‑SURE API with real example code and analyses from simple queries to complex real-world use cases. \n\nClick this card to check out the PIC-SURE API example code.',
+        link: 'https://pic-sure.org/about',
+      },
+    ],
+  },
   landing: {
     searchPlaceholder: 'Search terms or variables of interest…',
     description:
@@ -49,26 +64,32 @@ export const branding = {
         title: 'User Guide',
         description: 'Complete user manual for seamless navigation and utilization.',
         icon: 'fa-solid fa-book fa-4x',
-        url: '/help/dummy?title=' + encodeURI('User Guide')
+        url: '/help/dummy?title=' + encodeURI('User Guide'),
       },
       {
         title: 'Video Library',
         description: "Example 'how-to' video demonstrations.",
         icon: 'fa-solid fa-tv fa-4x',
-        url: '/help/dummy?title=' + encodeURI('Video Library')
+        url: '/help/dummy?title=' + encodeURI('Video Library'),
       },
       {
         title: 'Request Assistance',
         description: 'Need help? Submit a service desk ticket, we are here to help!',
         icon: 'fa-solid fa-hands-holding-circle fa-4x',
-        url: '/help/dummy?title=' + encodeURI('Request Assistance')
+        url: '/help/dummy?title=' + encodeURI('Request Assistance'),
       },
       {
         title: 'PIC-Sure Website',
         description: 'Check out the PIC-Sure website for information.',
         icon: 'fa-solid fa-circle-info fa-4x',
-        url: '/help/dummy?title=' + encodeURI('PIC-Sure Website')
-      }
-    ]
-  }
+        url: '/help/dummy?title=' + encodeURI('PIC-Sure Website'),
+      },
+    ],
+  },
+};
+
+export const domain = {
+  name: 'pic-sure.org',
+  url: 'https://nhanes-dev.hms.harvard.edu',
+  supportEmail: '',
 };
diff --git a/src/lib/content.svelte b/src/lib/content.svelte
deleted file mode 100644
index 884b9314..00000000
--- a/src/lib/content.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  export let title = 'Unknown page title';
-</script>
-
-<section class="main-content">
-  <h1 class="h1 mb-4">
-    {title}
-  </h1>
-  <slot />
-</section>
diff --git a/src/lib/model/dataset.ts b/src/lib/models/Dataset.ts
similarity index 92%
rename from src/lib/model/dataset.ts
rename to src/lib/models/Dataset.ts
index 3668edd3..9cc9a184 100644
--- a/src/lib/model/dataset.ts
+++ b/src/lib/models/Dataset.ts
@@ -31,7 +31,7 @@ export function mapDataset(data: any) {
     query = jsonQuery?.query;
     if (jsonQuery?.commonAreaUUID) {
       federated = {
-        commonId: jsonQuery?.commonAreaUUID
+        commonId: jsonQuery?.commonAreaUUID,
       };
     }
   } catch (_) {
@@ -46,7 +46,7 @@ export function mapDataset(data: any) {
     query,
     federated,
     queryId: data.query.uuid,
-    startTime: secondsToDate(data.query.startTime)
+    startTime: secondsToDate(data.query.startTime),
   };
   return dataset;
 }
diff --git a/src/lib/models/User.ts b/src/lib/models/User.ts
new file mode 100644
index 00000000..5d3a837c
--- /dev/null
+++ b/src/lib/models/User.ts
@@ -0,0 +1,8 @@
+export interface User {
+  uuid?: string;
+  email?: string;
+  privileges?: string[];
+  roles?: string[];
+  token?: string;
+  acceptedTOS?: boolean;
+}
diff --git a/src/lib/store/dataset.ts b/src/lib/stores/dataset.ts
similarity index 92%
rename from src/lib/store/dataset.ts
rename to src/lib/stores/dataset.ts
index 28933321..2e8b1bf3 100644
--- a/src/lib/store/dataset.ts
+++ b/src/lib/stores/dataset.ts
@@ -1,6 +1,6 @@
 import { get, writable, derived, type Readable, type Writable } from 'svelte/store';
 
-import { mapDataset, type DataSet } from '$lib/model/dataset';
+import { mapDataset, type DataSet } from '$lib/models/Dataset';
 import * as api from '$lib/api';
 
 const datasets: Writable<DataSet[]> = writable([]);
@@ -23,7 +23,7 @@ async function toggleArchived(uuid: string) {
     queryId: dataset?.queryId,
     name: dataset?.name,
     metadata: dataset?.metadata,
-    archived: !dataset?.archived
+    archived: !dataset?.archived,
   };
   const res = await api.put(`picsure/dataset/named/${uuid}`, request);
   store[datasetIndex] = mapDataset(res);
@@ -47,5 +47,5 @@ export default {
   archived,
   loadDatasets,
   toggleArchived,
-  getDataset
+  getDataset,
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f751c573..9e3248d4 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,15 +5,15 @@
     Modal,
     Toast,
     getModalStore,
-    type ModalSettings
+    type ModalSettings,
   } from '@skeletonlabs/skeleton';
-  import Navigation from '$lib/component/navigation.svelte';
+  import Navigation from '$lib/components/Navigation.svelte';
   import '@fortawesome/fontawesome-free/css/all.min.css';
   import '../app.postcss';
   import { onMount } from 'svelte';
   initializeStores();
   let modalProps: Record<string, unknown> = {
-    buttonPositive: 'variant-filled-primary'
+    buttonPositive: 'variant-filled-primary',
   };
   const modalStore = getModalStore();
   onMount(() => {
@@ -38,7 +38,7 @@
         // Returns the updated response value
         response: (r: string) => {
           sessionStorage.setItem('token', r);
-        }
+        },
       };
       modalStore.trigger(modal);
     }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f505af32..85a0dc7d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { branding } from '$lib/configuration';
   import { ProgressRadial } from '@skeletonlabs/skeleton';
-  import type { Value } from '$lib/models/value';
+  import type { Value } from '$lib/models/Value';
   import * as api from '$lib/api';
   import { goto } from '$app/navigation';
 
@@ -107,24 +107,6 @@
     text-align: center;
   }
 
-  #landing input[type='search'] {
-    width: 100%;
-    box-sizing: border-box;
-    margin-right: 0.5rem;
-    @apply input;
-  }
-
-  #landing .stats {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
-    width: 70%;
-    margin: 2rem 0;
-    padding: 2rem;
-    @apply card variant-filled-primary;
-  }
-
   #landing #search-section p {
     max-width: 50rem;
     margin: 1rem 0;
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index ae828474..785be91a 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Content from '$lib/component/content.svelte';
+  import Content from '$lib/components/Content.svelte';
 </script>
 
 <Content title="Admin">
diff --git a/src/routes/admin/super/+page.svelte b/src/routes/admin/super/+page.svelte
index 15887c9c..16779cfa 100644
--- a/src/routes/admin/super/+page.svelte
+++ b/src/routes/admin/super/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Content from '$lib/component/content.svelte';
+  import Content from '$lib/components/Content.svelte';
 </script>
 
 <Content title="Super Admin">
diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte
index 677b9e6f..08b2fb68 100644
--- a/src/routes/api/+page.svelte
+++ b/src/routes/api/+page.svelte
@@ -1,7 +1,38 @@
 <script lang="ts">
-  import Content from '$lib/component/content.svelte';
+  import UserToken from '$lib/components/UserToken.svelte';
+  import { branding } from '$lib/configuration';
 </script>
 
-<Content title="API">
-  <p>Sample page data for the api page.</p>
-</Content>
+<div id="api-page">
+  <section>
+    <UserToken />
+  </section>
+  <section id="info-cards" class="w-full flex flex-wrap flex-row justify-between mt-6">
+    {#each branding.apiPage.cards as card}
+      <a href={card.link} target="_blank" class="pic-sure-info-card basis-2/4">
+        <div class="card card-hover">
+          <header class="card-header flex flex-col items-center">
+            <h4 class="my-1" data-testid={card.header}>{card.header}</h4>
+            <hr class="!border-t-2" />
+          </header>
+          <section class="p-4 whitespace-pre-wrap" data-testid={card.body}>{card.body}</section>
+        </div>
+      </a>
+    {/each}
+  </section>
+</div>
+
+<style>
+  #api-page section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    width: 100%;
+  }
+  #api-page a.pic-sure-info-card {
+    max-width: 25rem;
+    min-height: 18rem;
+    margin: 0 8px;
+  }
+</style>
diff --git a/src/routes/dataset/+page.svelte b/src/routes/dataset/+page.svelte
index acadc4ec..0fd6bc98 100644
--- a/src/routes/dataset/+page.svelte
+++ b/src/routes/dataset/+page.svelte
@@ -1,24 +1,23 @@
 <script lang="ts">
   import { ProgressBar } from '@skeletonlabs/skeleton';
-
   import type { Indexable } from '$lib/types';
-  import DataSetStore from '$lib/store/dataset';
-  import ErrorAlert from '$lib/component/error-alert.svelte';
-  import Content from '$lib/component/content.svelte';
-  import Datatable from '$lib/component/datatable/table.svelte';
-  import CopyButton from '$lib/component/dataset/cell/copy-button.svelte';
-  import Actions from '$lib/component/dataset/cell/actions.svelte';
+  import DataSetStore from '$lib/stores/dataset';
+  import ErrorAlert from '$lib/components/ErrorAlert.svelte';
+  import Content from '$lib/components/Content.svelte';
+  import Datatable from '$lib/components/datatable/Table.svelte';
+  import CopyButton from '$lib/components/dataset/cell/CopyButtonCell.svelte';
+  import Actions from '$lib/components/dataset/cell/Actions.svelte';
 
   const columns = [
     { dataElement: 'name', label: 'Dataset ID Name' },
     { dataElement: 'startTime', label: 'Created' },
     { dataElement: 'queryId', label: 'Query ID' },
-    { dataElement: 'uuid', label: 'Actions' }
+    { dataElement: 'uuid', label: 'Actions' },
   ];
 
   const cellOverides: Indexable = {
     queryId: CopyButton,
-    uuid: Actions
+    uuid: Actions,
   };
 
   let { active, archived, loadDatasets } = DataSetStore;
diff --git a/src/routes/dataset/[uuid]/+page.svelte b/src/routes/dataset/[uuid]/+page.svelte
index 4831f114..762315d3 100644
--- a/src/routes/dataset/[uuid]/+page.svelte
+++ b/src/routes/dataset/[uuid]/+page.svelte
@@ -2,10 +2,10 @@
   import { ProgressBar } from '@skeletonlabs/skeleton';
 
   import { page } from '$app/stores';
-  import type { DataSet } from '$lib/model/dataset';
-  import DataSetStore from '$lib/store/dataset';
-  import Content from '$lib/component/content.svelte';
-  import ErrorAlert from '$lib/component/error-alert.svelte';
+  import type { DataSet } from '$lib/models/Dataset';
+  import DataSetStore from '$lib/stores/dataset';
+  import Content from '$lib/components/Content.svelte';
+  import ErrorAlert from '$lib/components/ErrorAlert.svelte';
 
   const { getDataset } = DataSetStore;
 
diff --git a/src/routes/explorer/+page.svelte b/src/routes/explorer/+page.svelte
index 2b98b0ca..1d94339b 100644
--- a/src/routes/explorer/+page.svelte
+++ b/src/routes/explorer/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/component/content.svelte';
+  import Content from '$lib/components/Content.svelte';
 </script>
 
 <Content title="Explorer/Query Builder">
diff --git a/src/routes/help/+page.svelte b/src/routes/help/+page.svelte
index 85a8bb7a..0a512669 100644
--- a/src/routes/help/+page.svelte
+++ b/src/routes/help/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/component/content.svelte';
+  import Content from '$lib/components/Content.svelte';
   import { branding } from '$lib/configuration';
 </script>
 
diff --git a/src/routes/help/dummy/+page.svelte b/src/routes/help/dummy/+page.svelte
index eb4e3170..b89fa3a3 100644
--- a/src/routes/help/dummy/+page.svelte
+++ b/src/routes/help/dummy/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/component/content.svelte';
+  import Content from '$lib/components/Content.svelte';
   import { page } from '$app/stores';
   export const title = $page.url.searchParams.get('title') || 'Dummy';
 </script>
diff --git a/src/routes/users/+page.svelte b/src/routes/users/+page.svelte
index 809f87d5..844086ad 100644
--- a/src/routes/users/+page.svelte
+++ b/src/routes/users/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Content from '$lib/component/content.svelte';
+  import Content from '$lib/components/Content.svelte';
 </script>
 
 <Content title="Users">
diff --git a/tests/custom-context.ts b/tests/custom-context.ts
index 522811f1..c5af76a4 100644
--- a/tests/custom-context.ts
+++ b/tests/custom-context.ts
@@ -7,5 +7,5 @@ export const test = base.extend({
     });
 
     use(context);
-  }
+  },
 });
diff --git a/tests/lib/component/navigation/test.ts b/tests/lib/component/navigation/test.ts
index 6c3f82e0..bf773e92 100644
--- a/tests/lib/component/navigation/test.ts
+++ b/tests/lib/component/navigation/test.ts
@@ -13,10 +13,10 @@ test.describe('navigation', () => {
       path: '/dataset',
       id: 'nav-link-dataset',
       headerText: 'Dataset Management',
-      mock: { path: '*/**/picsure/dataset/named', data: mockData }
+      mock: { path: '*/**/picsure/dataset/named', data: mockData },
     },
     { path: '/help', id: 'nav-link-help', headerText: 'Knowledge Hub' },
-    { path: '/admin', id: 'nav-link-admin', headerText: 'Admin' }
+    { path: '/admin', id: 'nav-link-admin', headerText: 'Admin' },
   ];
 
   routes.forEach((route) => {
diff --git a/tests/mock-data.ts b/tests/mock-data.ts
index fc22d7cd..8e9c3640 100644
--- a/tests/mock-data.ts
+++ b/tests/mock-data.ts
@@ -6,9 +6,9 @@ export const datasets = [
     name: 'active demo',
     archived: false,
     query: {
-      uuid: '6104ee94-1b0c-44cb-bed2-08c95d1d63ee'
+      uuid: '6104ee94-1b0c-44cb-bed2-08c95d1d63ee',
     },
-    metadata: {}
+    metadata: {},
   },
   {
     // Archived
@@ -17,8 +17,8 @@ export const datasets = [
     name: 'inactive demo',
     archived: true,
     query: {
-      uuid: '853c2c35-f665-462e-8775-aa07121ae3dc'
+      uuid: '853c2c35-f665-462e-8775-aa07121ae3dc',
     },
-    metadata: {}
-  }
+    metadata: {},
+  },
 ];
diff --git a/tests/routes/api/test.ts b/tests/routes/api/test.ts
new file mode 100644
index 00000000..cbdf85af
--- /dev/null
+++ b/tests/routes/api/test.ts
@@ -0,0 +1,220 @@
+import { expect, type Route } from '@playwright/test';
+import { test } from '../../custom-context';
+import { branding } from '../../../src/lib/configuration';
+import type { User } from '$lib/models/User';
+
+const mockExpiredToken =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxNjEyMTY0OTgyLCJpYXQiOjE2MDk1NzI5ODJ9.wzXW7OBk0crFFGD2j9avij-sfWpcIvruSj55j2-oXxo';
+const mockUser: User = {
+  uuid: '1234',
+  email: 'test@pic-sure.org',
+  privileges: ['user'],
+  roles: ['user'],
+  token: mockExpiredToken,
+  acceptedTOS: true,
+};
+const placeHolderDots =
+  '•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••';
+
+test.describe('API page', () => {
+  test('Has expected error message', async ({ page }) => {
+    // Given
+    await page.goto('/api');
+    // When
+    const errorAlert = page.locator('[data-testid=error-alert]');
+    // Then
+    await expect(errorAlert).toBeVisible();
+  });
+  branding.apiPage.cards.forEach((card) => {
+    test(`Has expect card, ${card.header} from branding`, async ({ page }) => {
+      // Given
+      await page.goto('/api');
+      // When
+      const cardTitle = page.getByText(card.header);
+      const cardBody = page.getByText(card.body);
+      // Then
+      await expect(cardTitle).toBeVisible();
+      await expect(cardBody).toBeVisible();
+    });
+  });
+  test('Has expected content', async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.goto('/api');
+
+    // When
+    const userToken = page.locator('#user-token');
+
+    // Then
+    await expect(userToken).toBeVisible();
+  });
+  test('Has expected badge and expiration', async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.goto('/api');
+    // When
+    const expires = page.locator('#expires');
+    const badge = page.locator('#expires-badge');
+
+    // Then
+    await expect(expires).toBeVisible();
+    await expect(badge).toBeVisible();
+    expect(await badge.innerText()).toBe('EXPIRED');
+    expect(await expires.innerText()).toContain('Mon Feb 01 2021');
+  });
+  test(`User account matches expected email of ${mockUser.email}`, async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.goto('/api');
+    // When
+    const userEmail = page.locator('#account');
+    // Then
+    await expect(userEmail).toBeVisible();
+    expect(await userEmail.innerText()).toBe(mockUser.email);
+  });
+  test('Token is hidden by default', async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.goto('/api');
+    // When
+    const userToken = page.locator('#token');
+    // Then
+    await expect(userToken).toBeVisible();
+    expect(await userToken.inputValue()).toBe(placeHolderDots);
+  });
+  test('Buttons are displayed', async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.goto('/api');
+    // When
+    const copyButton = page.getByTestId('copy-button');
+    const refeshButton = page.locator('#refresh-button');
+    const revealButton = page.locator('#reveal-button');
+    // Then
+    await expect(copyButton).toBeVisible();
+    await expect(refeshButton).toBeVisible();
+    await expect(revealButton).toBeVisible();
+  });
+  test('Copy button copies token to clipboard', async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.goto('/api');
+
+    // When
+    const copyButton = page.getByTestId('copy-button');
+
+    // Then
+    await expect(copyButton).toBeVisible();
+    expect((await copyButton.innerHTML()).toString()).toBe('Copy');
+
+    // When
+    await copyButton.click();
+
+    // Then
+    expect((await copyButton.innerHTML()).toString()).toBe('Copied!');
+    //expect(await page.evaluate(() => navigator.clipboard.readText())).toEqual(mockUser.token);
+  });
+  test('Token is visible when reveal button is clicked', async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.goto('/api');
+    // When
+    const revealButton = page.locator('#reveal-button');
+    await revealButton.click();
+    const userToken = page.locator('#token');
+    // Then
+    await expect(userToken).toBeVisible();
+    expect(await userToken.inputValue()).toBe(mockUser.token);
+  });
+  test('Reveal button text changes when clicked', async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.goto('/api');
+    // When
+    const revealButton = page.locator('#reveal-button');
+    await revealButton.click();
+    // Then
+    expect((await revealButton.innerHTML()).toString()).toBe('Hide');
+  });
+  test('Refresh button changes token', async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.goto('/api');
+    // When
+    const refreshButton = page.locator('#refresh-button');
+    const userToken = page.locator('#token');
+    await refreshButton.click();
+    // Then
+    expect(await userToken.inputValue()).not.toBe(mockUser.token);
+  });
+  test('Refresh button changes expiration, updates button text, disables button', async ({
+    page,
+  }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.route('*/**/psama/user/me/refresh_long_term_token', (route: Route) =>
+      route.fulfill({ json: { userLongTermToken: 'new longterm token' } }),
+    );
+    await page.goto('/api');
+    // When
+    const userToken = page.locator('#token');
+    const refreshButton = page.locator('#refresh-button');
+    const expires = page.locator('#expires');
+    await refreshButton.click();
+    // Confirm Modal pops up
+    const confrimButton = page.locator('button:has-text("Confirm")');
+    await confrimButton.click();
+    // Confirm Modal closes and now reveal new token
+    const revealButton = page.locator('#reveal-button');
+    await revealButton.click();
+    // Then
+    await expect(refreshButton).toHaveText('Refreshed!');
+    await expect(refreshButton).toBeDisabled();
+    expect(await userToken.inputValue()).not.toBe(placeHolderDots);
+    expect(await userToken.inputValue()).toBe('new longterm token');
+    expect(await expires.innerText()).not.toContain('Mon Feb 01 2021');
+  });
+  test('Canceling confirm modal does nothing to user', async ({ page }) => {
+    // Given
+    await page.route('*/**/psama/user/me?hasToken', (route: Route) =>
+      route.fulfill({ json: mockUser }),
+    );
+    await page.route('*/**/psama/user/me/refresh_long_term_token', (route: Route) =>
+      route.fulfill({ json: { userLongTermToken: 'new longterm token' } }),
+    );
+    await page.goto('/api');
+    // When
+    const userToken = page.locator('#token');
+    const refreshButton = page.locator('#refresh-button');
+    const expires = page.locator('#expires');
+    await refreshButton.click();
+    // Confirm Modal pops up
+    const cancel = page.locator('button:has-text("Cancel")');
+    await cancel.click();
+    // Then
+    await expect(refreshButton).toHaveText('Refresh');
+    await expect(refreshButton).not.toBeDisabled();
+    expect(await userToken.inputValue()).toBe(placeHolderDots);
+    expect(await expires.innerText()).toContain('Mon Feb 01 2021');
+  });
+});
diff --git a/tests/routes/dataset/test.ts b/tests/routes/dataset/test.ts
index d37f35a9..ea3c9723 100644
--- a/tests/routes/dataset/test.ts
+++ b/tests/routes/dataset/test.ts
@@ -6,7 +6,7 @@ test.describe('dataset', () => {
   test('Shows active datasets table', async ({ page }) => {
     // Given
     await page.route('*/**/picsure/dataset/named', async (route: Route) =>
-      route.fulfill({ json: mockData })
+      route.fulfill({ json: mockData }),
     );
     await page.goto('/dataset');
 
@@ -17,7 +17,7 @@ test.describe('dataset', () => {
   test('Should not show archived datasets table on page load', async ({ page }) => {
     // Given
     await page.route('*/**/picsure/dataset/named', (route: Route) =>
-      route.fulfill({ json: mockData })
+      route.fulfill({ json: mockData }),
     );
     await page.goto('/dataset');
 
@@ -28,7 +28,7 @@ test.describe('dataset', () => {
   test('Shows archived datasets on archive toggle button press', async ({ page }) => {
     // Given
     await page.route('*/**/picsure/dataset/named', (route: Route) =>
-      route.fulfill({ json: mockData })
+      route.fulfill({ json: mockData }),
     );
     await page.goto('/dataset');
 
@@ -43,15 +43,15 @@ test.describe('dataset', () => {
   test('Archive button press moves item to archived', async ({ page }) => {
     // Given
     await page.route('*/**/picsure/dataset/named', (route: Route) =>
-      route.fulfill({ json: mockData })
+      route.fulfill({ json: mockData }),
     );
     await page.route(`*/**/picsure/dataset/named/${mockData[0].uuid}`, (route: Route) =>
       route.fulfill({
         json: {
           ...mockData[0],
-          archived: true
-        }
-      })
+          archived: true,
+        },
+      }),
     );
     await page.goto('/dataset');
 
@@ -68,15 +68,15 @@ test.describe('dataset', () => {
   test('Restore button press moves item to active', async ({ page }) => {
     // Given
     await page.route('*/**/picsure/dataset/named', (route: Route) =>
-      route.fulfill({ json: mockData })
+      route.fulfill({ json: mockData }),
     );
     await page.route(`*/**/picsure/dataset/named/${mockData[1].uuid}`, (route: Route) =>
       route.fulfill({
         json: {
           ...mockData[1],
-          archived: false
-        }
-      })
+          archived: false,
+        },
+      }),
     );
     await page.goto('/dataset');
     const toggleButton = page.getByTestId('dataset-toggle-archive');
@@ -93,7 +93,7 @@ test.describe('dataset', () => {
   test('View button should route to view page', async ({ page }) => {
     // Given
     await page.route('*/**/picsure/dataset/named', (route: Route) =>
-      route.fulfill({ json: mockData })
+      route.fulfill({ json: mockData }),
     );
     await page.goto('/dataset');
 
@@ -118,7 +118,7 @@ test.describe('dataset/[uuid]', () => {
   test('Dataset values present on page', async ({ page }) => {
     // Given
     await page.route(`*/**/picsure/dataset/named/${mockData[0].uuid}`, (route: Route) =>
-      route.fulfill({ json: mockData[0] })
+      route.fulfill({ json: mockData[0] }),
     );
     await page.goto(`/dataset/${mockData[0].uuid}`);
 
@@ -131,7 +131,7 @@ test.describe('dataset/[uuid]', () => {
   test('Error message on api error', async ({ page }) => {
     // Given
     await page.route(`*/**/picsure/dataset/named/${mockData[0].uuid}`, (route: Route) =>
-      route.abort('accessdenied')
+      route.abort('accessdenied'),
     );
     await page.goto(`/dataset/${mockData[0].uuid}`);
 
diff --git a/vite.config.ts b/vite.config.ts
index 029003f0..ce6a4e10 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,11 @@
 import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 
-export default defineConfig({
-  plugins: [sveltekit(), purgeCss()],
-});
+export default (mode: string) => {
+  // Extends 'process.env.*' with VITE_*-variables from '.env.(mode=production|development)'
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
+  return defineConfig({
+    plugins: [sveltekit(), purgeCss()],
+  });
+};