Show user's last activity

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/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';
@@ -29,6 +29,13 @@
 
  export let data: PageData;
 
+ // TODO: Remove this when the console SDK is updated
+ const users = data.users.users.map((user) => {
+ const labels: string[] = [];
+ const accessedAt = '';
+ return { accessedAt, labels, ...user };
+ });
+
  let showCreate = false;
  const projectId = $page.params.project;
  async function userCreated(event: CustomEvent<Models.User<Record<string, unknown>>>) {
@@ -50,9 +57,10 @@
  <TableCellHead onlyDesktop width={130}>Status</TableCellHead>
  <TableCellHead onlyDesktop width={100}>ID</TableCellHead>
  <TableCellHead onlyDesktop>Joined</TableCellHead>
+ <TableCellHead onlyDesktop>Last Activity</TableCellHead>
  </TableHeader>
  <TableBody>
- {#each data.users.users as user}
+ {#each users as user}
  <TableRowLink
  href={`${base}/console/project-${projectId}/auth/user-${user.$id}`}>
  <TableCell title="Name">
@@ -105,6 +113,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', () => {