Merge branch 'main' into feat-user-labels

src/lib/helpers/date.ts

@@ -1,5 +1,10 @@
 export const toLocaleDate = (datetime: string) => {
     const date = new Date(datetime);
+
+    if (isNaN(date.getTime())) {
+        return 'n/a';
+    }
+
     const options: Intl.DateTimeFormatOptions = {
         year: 'numeric',
         month: 'short',
@@ -11,6 +16,11 @@ export const toLocaleDate = (datetime: string) => {
 
 export const toLocaleDateTime = (datetime: string | number) => {
     const date = new Date(datetime);
+
+    if (isNaN(date.getTime())) {
+        return 'n/a';
+    }
+
     const options: Intl.DateTimeFormatOptions = {
         year: 'numeric',
         month: 'short',

src/lib/stores/wizard.ts

@@ -1,11 +1,11 @@
 import { trackEvent } from '$lib/actions/analytics';
-import type { SvelteComponent } from 'svelte';
+import type { ComponentType } from 'svelte';
 import { writable } from 'svelte/store';
 
 export type WizardStore = {
     show: boolean;
     media?: string;
-    component?: typeof SvelteComponent;
+    component?: ComponentType;
     interceptor?: () => Promise<void>;
 };
 
@@ -20,10 +20,11 @@ function createWizardStore() {
     return {
         subscribe,
         set,
-        start: (component: typeof SvelteComponent, media: string = null) =>
+        start: (component: ComponentType, media: string = null) =>
             update((n) => {
                 n.show = true;
                 n.component = component;
+                n.interceptor = null;
                 n.media = media;
                 trackEvent('wizard_start');
                 return n;
@@ -39,6 +40,7 @@ function createWizardStore() {
             update((n) => {
                 n.show = false;
                 n.component = null;
+                n.interceptor = null;
                 n.media = null;
 
                 return n;

src/routes/console/project-[project]/auth/+page.svelte

@@ -19,7 +19,7 @@
         TableRowLink
     } from '$lib/elements/table';
     import { Pill } from '$lib/elements';
-    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { goto } from '$app/navigation';
@@ -32,7 +32,8 @@
     // TODO: Remove this when the console SDK is updated
     const users = data.users.users.map((user) => {
         const labels: string[] = [];
-        return { labels, ...user };
+        const accessedAt = '';
+        return { accessedAt, labels, ...user };
     });
 
     let showCreate = false;
@@ -57,6 +58,7 @@
                 <TableCellHead onlyDesktop width={100}>ID</TableCellHead>
                 <TableCellHead onlyDesktop width={100}>Labels</TableCellHead>
                 <TableCellHead onlyDesktop>Joined</TableCellHead>
+                <TableCellHead onlyDesktop>Last Activity</TableCellHead>
             </TableHeader>
             <TableBody>
                 {#each users as user}
@@ -115,6 +117,9 @@
                         <TableCellText onlyDesktop title="Joined">
                             {toLocaleDateTime(user.registration)}
                         </TableCellText>
+                        <TableCellText onlyDesktop title="Last Activity">
+                            {user.accessedAt ? toLocaleDate(user.accessedAt) : 'never'}
+                        </TableCellText>
                     </TableRowLink>
                 {/each}
             </TableBody>

src/routes/console/project-[project]/auth/user-[user]/dangerZone.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
     import { CardGrid, Box, Heading, AvatarInitials } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { toLocaleDate } from '$lib/helpers/date';
     import DeleteUser from './deleteUser.svelte';
     import { user } from './store';
 
     let showDelete = false;
+
+    // TODO: Remove this when the console SDK is updated
+    $: accessedAt = ($user as unknown as { accessedAt: string }).accessedAt;
 </script>
 
 <CardGrid danger>
@@ -42,6 +46,7 @@
                     ? [$user.email, $user.phone].join(',')
                     : $user.email || $user.phone}
             </p>
+            <p>Last activity: {accessedAt ? toLocaleDate(accessedAt) : 'never'}</p>
         </Box>
     </svelte:fragment>
 

src/routes/console/project-[project]/auth/user-[user]/updateStatus.svelte

@@ -5,7 +5,7 @@
     import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
-    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from './store';
@@ -71,6 +71,9 @@
             trackError(error, Submit.UserUpdateStatus);
         }
     }
+
+    // TODO: Remove this when the console SDK is updated
+    $: accessedAt = ($user as unknown as { accessedAt: string }).accessedAt;
 </script>
 
 <CardGrid>
@@ -100,6 +103,7 @@
                     <p class="title">{$user.phone}</p>
                 {/if}
                 <p>Joined: {toLocaleDateTime($user.registration)}</p>
+                <p>Last activity: {accessedAt ? toLocaleDate(accessedAt) : 'never'}</p>
             </div>
             {#if !$user.status}
                 <Pill danger>blocked</Pill>

src/routes/console/project-[project]/overview/keys/+page.svelte

@@ -9,7 +9,7 @@
         TableHeader,
         TableRowLink
     } from '$lib/elements/table';
-    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
     import { wizard } from '$lib/stores/wizard';
     import type { PageData } from './$types';
     import Wizard from './wizard.svelte';
@@ -46,7 +46,7 @@
                         {key.name}
                     </TableCellText>
                     <TableCellText onlyDesktop title="Last Accessed">
-                        {key.accessedAt ? toLocaleDateTime(key.accessedAt) : 'never'}
+                        {key.accessedAt ? toLocaleDate(key.accessedAt) : 'never'}
                     </TableCellText>
                     <TableCellText onlyDesktop title="Expiration Date">
                         {key.expire ? toLocaleDateTime(key.expire) : 'never'}

src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte

@@ -5,7 +5,7 @@
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { symmetricDifference } from '$lib/helpers/array';
-    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { toLocaleDate } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -83,7 +83,7 @@
 </svelte:head>
 
 <Container>
-    {@const accessedAt = $key.accessedAt ? toLocaleDateTime($key.accessedAt) : 'never'}
+    {@const accessedAt = $key.accessedAt ? toLocaleDate($key.accessedAt) : 'never'}
     <CardGrid>
         <div>
             <Heading tag="h6" size="7">{$key.name}</Heading>

tests/unit/helpers/date.test.ts

@@ -16,6 +16,10 @@ describe('local date', () => {
             expect(toLocaleDate(value)).toBe(expected);
         });
     });
+
+    it('invalid date', () => {
+        expect(toLocaleDate('')).toBe('n/a');
+    });
 });
 
 describe('local date time', () => {
@@ -27,6 +31,10 @@ describe('local date time', () => {
             expect(toLocaleDateTime(value)).toBe(expected);
         });
     });
+
+    it('invalid date', () => {
+        expect(toLocaleDateTime('')).toBe('n/a');
+    });
 });
 
 describe('is same day', () => {