feat: 5263 - configurable jwt expiration

src/lib/actions/analytics.ts

@@ -156,6 +156,7 @@ export enum Submit {
     AuthPasswordDictionaryUpdate = 'submit_auth_password_dictionary_update',
     AuthPersonalDataCheckUpdate = 'submit_auth_personal_data_check_update',
     SessionsLengthUpdate = 'submit_sessions_length_update',
+    JwtExpirationUpdate = 'submit_jwt_expiration_update',
     SessionsLimitUpdate = 'submit_sessions_limit_update',
     SessionDelete = 'submit_session_delete',
     SessionDeleteAll = 'submit_session_delete_all',

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

@@ -4,6 +4,7 @@
     import UpdatePasswordHistory from './updatePasswordHistory.svelte';
     import UpdatePersonalDataCheck from './updatePersonalDataCheck.svelte';
     import UpdateSessionLength from './updateSessionLength.svelte';
+    import UpdateJwtExpiration from './updateJwtExpiration.svelte';
     import UpdateSessionsLimit from './updateSessionsLimit.svelte';
     import UpdateUsersLimit from './updateUsersLimit.svelte';
 </script>
@@ -12,6 +13,7 @@
     <UpdateUsersLimit />
     <UpdateSessionLength />
     <UpdateSessionsLimit />
+    <UpdateJwtExpiration />
     <UpdatePasswordHistory />
     <UpdatePasswordDictionary />
     <UpdatePersonalDataCheck />

src/routes/console/project-[project]/auth/security/updateJwtExpiration.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
+    import { createTimeUnitPair } from '$lib/helpers/unit';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { project } from '../../store';
+
+    const projectId = $project.$id;
+    console.log('Project: ', $project);
+    const { value, unit, baseValue, units } = createTimeUnitPair($project.jwtExpiration);
+    const options = units.map((v) => ({ label: v.name, value: v.name }));
+
+    async function updateJwtExpiration() {
+        try {
+            await sdk.forConsole.projects.updateJwtExpiration(projectId, $baseValue);
+            await invalidate(Dependencies.PROJECT);
+
+            addNotification({
+                type: 'success',
+                message: 'Updated project JWT expiration successfully'
+            });
+            trackEvent(Submit.JwtExpirationUpdate);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.JwtExpirationUpdate);
+        }
+    }
+</script>
+
+<CardGrid>
+    <Heading tag="h2" size="7" id="session-length">JWT expiration</Heading>
+
+    <p>
+        The time limit after which a JWT becomes invalid and can no longer be used for
+        authentication or authorization purposes.
+    </p>
+    <svelte:fragment slot="aside">
+        <form class="form u-grid u-gap-16">
+            <ul class="form-list is-multiple">
+                <InputNumber id="jwt-length" label="Length" bind:value={$value} min={0} />
+                <InputSelect id="jwt-period" label="Time Period" bind:value={$unit} {options} />
+            </ul>
+        </form>
+    </svelte:fragment>
+
+    <svelte:fragment slot="actions">
+        <Button
+            disabled={$baseValue === $project.jwtExpiration}
+            on:click={() => {
+                updateJwtExpiration();
+            }}>
+            Update
+        </Button>
+    </svelte:fragment>
+</CardGrid>