From ed42f9d5083fad8bd53b792dbc5f879ee804efd8 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 9 Feb 2023 17:53:58 +0000
Subject: [PATCH 1/8] refactor: expirationInput checks if predefined date

---
 src/lib/helpers/date.ts                       | 13 ++++++
 .../overview/keys/expirationInput.svelte      | 45 ++++++++++++-------
 tests/unit/helpers/date.test.ts               | 33 +++++++++++++-
 3 files changed, 75 insertions(+), 16 deletions(-)

diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
index 391abb3e7..82031c727 100644
--- a/src/lib/helpers/date.ts
+++ b/src/lib/helpers/date.ts
@@ -22,3 +22,16 @@ export const toLocaleDateTime = (datetime: string | number) => {
 
     return date.toLocaleDateString('en', options);
 };
+
+export const isSameDay = (date1: Date, date2: Date) => {
+    return (
+        date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate()
+    );
+};
+
+// Function that checks if a string is a valid date
+export const isValidDate = (date: string) => {
+    return !isNaN(new Date(date).getTime());
+};
diff --git a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
index 55fca9e05..532f53fd7 100644
--- a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
+++ b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import InputDateTime from '$lib/elements/forms/inputDateTime.svelte';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
+    import { isSameDay, isValidDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
         const date = new Date();
@@ -19,18 +20,7 @@
         return date.toISOString();
     }
 
-    export let value: string | null = null;
-    let expirationSelect = value === null ? null : 'custom';
-    let expirationCustom: string | null = value ?? null;
-
-    $: {
-        value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
-    }
-</script>
-
-<InputSelect
-    bind:value={expirationSelect}
-    options={[
+    const options = [
         {
             label: 'Never',
             value: null
@@ -55,9 +45,34 @@
             label: 'Custom Date',
             value: 'custom'
         }
-    ]}
-    id="preset"
-    label="Expiration Date" />
+    ];
+
+    export let value: string | null = null;
+
+    function initExpirationSelect() {
+        if (value === null || !isValidDate(value)) return null;
+
+        let result = 'custom';
+        for (const option of options) {
+            if (!isValidDate(option.value)) continue;
+
+            if (isSameDay(new Date(option.value), new Date(value))) {
+                result = option.value;
+                break;
+            }
+        }
+
+        return result;
+    }
+    let expirationSelect = initExpirationSelect();
+    let expirationCustom: string | null = value ?? null;
+
+    $: {
+        value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
+    }
+</script>
+
+<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration Date" />
 {#if expirationSelect === 'custom'}
     <InputDateTime id="expire" label="" bind:value={expirationCustom} showLabel={false} />
 {/if}
diff --git a/tests/unit/helpers/date.test.ts b/tests/unit/helpers/date.test.ts
index 4b67f4f3d..99ef7e1f6 100644
--- a/tests/unit/helpers/date.test.ts
+++ b/tests/unit/helpers/date.test.ts
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date';
+import { toLocaleDate, toLocaleDateTime, isSameDay, isValidDate } from '$lib/helpers/date';
 
 describe('local date', () => {
     [
@@ -22,3 +22,34 @@ describe('local date time', () => {
         });
     });
 });
+
+describe('is same day', () => {
+    const entries: Array<[string, string, boolean]> = [
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:28', true],
+        ['2022-11-15 08:26:28', '2022-11-16 08:26:28', false],
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:29', true],
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:27', true]
+    ];
+
+    entries.forEach(([value1, value2, expected]) => {
+        it(`${value1} ${value2}`, () => {
+            expect(isSameDay(new Date(value1), new Date(value2))).toBe(expected);
+        });
+    });
+});
+
+describe('is valid date', () => {
+    const entries: Array<[string, boolean]> = [
+        ['2022-11-15 08:26:28', true],
+        ['2022-11-15 08:26:28', true],
+        ['abc', false],
+        ['2022-11-15', true],
+        ['123.123.123', false]
+    ];
+
+    entries.forEach(([value, expected]) => {
+        it(value, () => {
+            expect(isValidDate(value)).toBe(expected);
+        });
+    });
+});

From 0b8bea1ffbbfcd5a7f20008b8def39a05d84caf1 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 9 Feb 2023 18:17:17 +0000
Subject: [PATCH 2/8] fix: initial value changing on expiration input

---
 .../project-[project]/overview/keys/expirationInput.svelte    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
index 532f53fd7..041554f3d 100644
--- a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
+++ b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
@@ -68,7 +68,9 @@
     let expirationCustom: string | null = value ?? null;
 
     $: {
-        value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
+        if (!isSameDay(new Date(expirationSelect), new Date(value))) {
+            value = expirationSelect === 'custom' ? expirationCustom : expirationSelect;
+        }
     }
 </script>
 

From 75aac13ac023459c56b766ff6d040a9d1c8af9ab Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 9 Feb 2023 18:38:52 +0000
Subject: [PATCH 3/8] feat: expiration date alerts

---
 src/lib/helpers/date.ts                       |  6 ++++-
 .../keys/[key]/updateExpirationDate.svelte    | 21 +++++++++++++++
 tests/unit/helpers/date.test.ts               | 26 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
index 82031c727..8558f315f 100644
--- a/src/lib/helpers/date.ts
+++ b/src/lib/helpers/date.ts
@@ -31,7 +31,11 @@ export const isSameDay = (date1: Date, date2: Date) => {
     );
 };
 
-// Function that checks if a string is a valid date
 export const isValidDate = (date: string) => {
     return !isNaN(new Date(date).getTime());
 };
+
+export const diffDays = (date1: Date, date2: Date) => {
+    const diffTime = Math.abs(date2.getTime() - date1.getTime());
+    return Math.floor(diffTime / (1000 * 60 * 60 * 24));
+};
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte b/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
index 9fa7c7703..241359280 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { trackEvent } from '$lib/actions/analytics';
+    import Alert from '$lib/components/alert.svelte';
     import CardGrid from '$lib/components/cardGrid.svelte';
     import Heading from '$lib/components/heading.svelte';
     import { Dependencies } from '$lib/constants';
     import { Form } from '$lib/elements/forms';
     import Button from '$lib/elements/forms/button.svelte';
     import FormList from '$lib/elements/forms/formList.svelte';
+    import { diffDays } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../../../store';
@@ -37,6 +39,11 @@
             });
         }
     }
+
+    let alertsDismissed = false;
+    $: isExpiring =
+        !alertsDismissed && $key.expire && diffDays(new Date(), new Date($key.expire)) < 14;
+    $: isExpired = !alertsDismissed && $key.expire !== null && new Date($key.expire) < new Date();
 </script>
 
 <Form on:submit={updateExpire}>
@@ -44,6 +51,20 @@
         <Heading tag="h6" size="7">Update Expiration Date</Heading>
         <p class="text">Set a date after which your API Key will expire.</p>
         <svelte:fragment slot="aside">
+            {#if isExpired}
+                <Alert type="error" dismissible on:dismiss={() => (alertsDismissed = true)}>
+                    <span slot="title">Your API Key has expired</span>
+                    <p>
+                        For security reasons, we recommend you delete your expired key and create a
+                        new one.
+                    </p>
+                </Alert>
+            {:else if isExpiring}
+                <Alert type="warning" dismissible on:dismiss={() => (alertsDismissed = true)}>
+                    <span slot="title">Your API Key is about to expire</span>
+                    <p>Update the expiration date to keep the key active</p>
+                </Alert>
+            {/if}
             <FormList>
                 <ExpirationInput bind:value={expiration} />
             </FormList>
diff --git a/tests/unit/helpers/date.test.ts b/tests/unit/helpers/date.test.ts
index 99ef7e1f6..16b5ff3f4 100644
--- a/tests/unit/helpers/date.test.ts
+++ b/tests/unit/helpers/date.test.ts
@@ -1,5 +1,11 @@
 import '@testing-library/jest-dom';
-import { toLocaleDate, toLocaleDateTime, isSameDay, isValidDate } from '$lib/helpers/date';
+import {
+    toLocaleDate,
+    toLocaleDateTime,
+    isSameDay,
+    isValidDate,
+    diffDays
+} from '$lib/helpers/date';
 
 describe('local date', () => {
     [
@@ -53,3 +59,21 @@ describe('is valid date', () => {
         });
     });
 });
+
+describe('diff days', () => {
+    const entries: Array<[string, string, number]> = [
+        ['2022-11-15 08:26:28', '2022-11-15 08:26:28', 0],
+        ['2022-11-15 08:26:28', '2022-11-16 08:26:28', 1],
+        ['2022-11-15 08:26:28', '2022-11-16 08:26:27', 0],
+        ['2022-11-15 08:26:28', '2022-11-14 08:26:29', 0],
+        ['2022-11-15 08:26:28', '2022-11-14 08:26:27', 1],
+        ['2022-11-15 08:26:28', '2022-11-20 08:26:29', 5],
+        ['2022-11-15 08:26:28', '2022-11-20 08:26:27', 4]
+    ];
+
+    entries.forEach(([value1, value2, expected]) => {
+        it(`${value1} ${value2}`, () => {
+            expect(diffDays(new Date(value1), new Date(value2))).toBe(expected);
+        });
+    });
+});

From 2a87d3fa5cbc875976bde75d5b1736488de916fa Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 9 Feb 2023 18:46:25 +0000
Subject: [PATCH 4/8] feat: expiration helper

---
 src/lib/elements/forms/inputSelect.svelte             |  2 ++
 .../overview/keys/expirationInput.svelte              | 11 +++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 2ed1f0670..f0cf489bf 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -61,5 +61,7 @@
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
+    {:else}
+        <slot name="helper" />
     {/if}
 </FormItem>
diff --git a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
index 041554f3d..39c5bdef0 100644
--- a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
+++ b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+    import Helper from '$lib/elements/forms/helper.svelte';
     import InputDateTime from '$lib/elements/forms/inputDateTime.svelte';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
-    import { isSameDay, isValidDate } from '$lib/helpers/date';
+    import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
         const date = new Date();
@@ -74,7 +75,13 @@
     }
 </script>
 
-<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration Date" />
+<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration Date">
+    <svelte:fragment slot="helper">
+        {#if expirationSelect !== 'custom'}
+            <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
+        {/if}
+    </svelte:fragment>
+</InputSelect>
 {#if expirationSelect === 'custom'}
     <InputDateTime id="expire" label="" bind:value={expirationCustom} showLabel={false} />
 {/if}

From 3e06e21116eb99cdde84335c2770102c5a41ffc8 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 9 Feb 2023 18:56:41 +0000
Subject: [PATCH 5/8] fix: scopes missing singular case

---
 .../console/project-[project]/overview/keys/scopes.svelte  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/overview/keys/scopes.svelte b/src/routes/console/project-[project]/overview/keys/scopes.svelte
index 4f3b44036..2adef6e1d 100644
--- a/src/routes/console/project-[project]/overview/keys/scopes.svelte
+++ b/src/routes/console/project-[project]/overview/keys/scopes.svelte
@@ -96,8 +96,11 @@
                 {category}
             </svelte:fragment>
             <svelte:fragment slot="subtitle">
-                ({allScopes.filter((n) => n.category === category && scopes.includes(n.scope))
-                    .length} Scopes)
+                {@const scopesLength = allScopes.filter(
+                    (n) => n.category === category && scopes.includes(n.scope)
+                ).length}
+                ({scopesLength}
+                {scopesLength === 1 ? 'Scope' : 'Scopes'})
             </svelte:fragment>
             <div class="form">
                 <FormList>

From 43abe03ac1d93925f8db6d7f1aa3fa6340900c8e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 10 Feb 2023 12:04:48 +0000
Subject: [PATCH 6/8] fix: expiration input showing helper text when value is
 null

---
 .../project-[project]/overview/keys/expirationInput.svelte      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
index 39c5bdef0..01ec1e2e8 100644
--- a/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
+++ b/src/routes/console/project-[project]/overview/keys/expirationInput.svelte
@@ -77,7 +77,7 @@
 
 <InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration Date">
     <svelte:fragment slot="helper">
-        {#if expirationSelect !== 'custom'}
+        {#if expirationSelect !== 'custom' && expirationSelect !== null}
             <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
         {/if}
     </svelte:fragment>

From 7c85da3a0b32d3ae26bc1da084771de11821de4c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 10 Feb 2023 12:07:44 +0000
Subject: [PATCH 7/8] refactor: small design changes

---
 .../keys/[key]/+page@project-[project].svelte       |  2 +-
 .../project-[project]/overview/keys/scopes.svelte   | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index ae2389e79..3f385e20d 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -63,7 +63,7 @@
             trackEvent('submit_key_update_scopes');
             addNotification({
                 type: 'success',
-                message: 'API Key scopes has been updated'
+                message: 'API Key scopes have been updated'
             });
         } catch (error) {
             addNotification({
diff --git a/src/routes/console/project-[project]/overview/keys/scopes.svelte b/src/routes/console/project-[project]/overview/keys/scopes.svelte
index 2adef6e1d..ac9ae7c86 100644
--- a/src/routes/console/project-[project]/overview/keys/scopes.svelte
+++ b/src/routes/console/project-[project]/overview/keys/scopes.svelte
@@ -77,10 +77,15 @@
     }
 </script>
 
-<div class="u-flex u-cross-center u-main-end">
-    <Button text on:click={deselectAll}>Deselect all</Button>
-    <Button text on:click={selectAll}>Select all</Button>
-</div>
+<ul class="buttons-list u-main-end">
+    <li class="buttons-list-item">
+        <Button text on:click={deselectAll}>Deselect all</Button>
+    </li>
+    <li class="buttons-list-item">
+        <Button text on:click={selectAll}>Select all</Button>
+    </li>
+</ul>
+
 <Collapsible>
     {#each [Category.Auth, Category.Database, Category.Functions, Category.Storage, Category.Other] as category}
         {@const checked = categoryState(category, scopes)}

From 259adb44c614126bb6da9f9186bdc2ddca7ba3ec Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 10 Feb 2023 12:19:57 +0000
Subject: [PATCH 8/8] chore: organize imports

---
 .../overview/keys/[key]/updateExpirationDate.svelte       | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte b/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
index 241359280..dab38a083 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/updateExpirationDate.svelte
@@ -1,13 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { trackEvent } from '$lib/actions/analytics';
-    import Alert from '$lib/components/alert.svelte';
-    import CardGrid from '$lib/components/cardGrid.svelte';
-    import Heading from '$lib/components/heading.svelte';
+    import { Alert, CardGrid, Heading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Form } from '$lib/elements/forms';
-    import Button from '$lib/elements/forms/button.svelte';
-    import FormList from '$lib/elements/forms/formList.svelte';
+    import { Button, Form, FormList } from '$lib/elements/forms';
     import { diffDays } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';