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] 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}