feat: session length

package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "analytics": "^0.8.1",
-        "@aw-labs/appwrite-console": "^11.0.0",
+        "@aw-labs/appwrite-console": "^13.0.0",
         "@aw-labs/icons": "0.0.0-77",
         "@aw-labs/ui": "0.0.0-77",
         "@popperjs/core": "^2.11.6",

src/lib/helpers/timeConversion.ts

@@ -23,3 +23,44 @@ export function calculateTime(time: number) {
         return `${years} y`;
     }
 }
+
+export function timeToSeconds(time: number, unit: string) {
+    switch (unit) {
+        case 'ms':
+            return time / 1000;
+        case 's':
+            return time;
+        case 'm':
+            return time * 60;
+        case 'h':
+            return time * 60 * 60;
+        case 'd':
+            return time * 60 * 60 * 24;
+        case 'M':
+            return time * 60 * 60 * 24 * 30;
+        case 'y':
+            return time * 60 * 60 * 24 * 30 * 12;
+        default:
+            return time;
+    }
+}
+export function timeToMinutes(time: number, unit: string) {
+    switch (unit) {
+        case 'ms':
+            return time / 1000 / 60;
+        case 's':
+            return time / 60;
+        case 'm':
+            return time;
+        case 'h':
+            return time * 60;
+        case 'd':
+            return time * 60 * 24;
+        case 'M':
+            return time * 60 * 24 * 30;
+        case 'y':
+            return time * 60 * 24 * 30 * 12;
+        default:
+            return time;
+    }
+}

src/lib/stores/app.ts

@@ -23,7 +23,7 @@ function createFeedbackStore() {
         elapsed: browser ? parseInt(localStorage.getItem('feedbackElapsed')) : 0,
         visualized: browser ? parseInt(localStorage.getItem('feedbackVisualized')) : 0,
         notification: false,
-        type: 'nps'
+        type: 'general'
     });
     return {
         subscribe,

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

@@ -10,16 +10,22 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
+    import { timeToSeconds } from '$lib/helpers/timeConversion';
+    import { writable } from 'svelte/store';
 
     const projectId = $project.$id;
     let isLimited = $project.authLimit === 0 ? 'unlimited' : 'limited';
     let newLimit = $project.authLimit === 0 ? 100 : $project.authLimit;
+    let time = $project.authDuration;
+    let timeInSec = time;
+    let period = writable('s');
     let btnActive = false;
 
     let options = [
-        { label: 'years', value: 'years' },
-        { label: 'months', value: 'months' },
-        { label: 'days', value: 'days' }
+        { label: 'days', value: 'd' },
+        { label: 'hours', value: 'h' },
+        { label: 'minutes', value: 'm' },
+        { label: 'seconds', value: 's' }
     ];
 
     $: {
@@ -56,7 +62,12 @@
     }
     async function updateSessionLength() {
         try {
-            //TODO: implement correct SDK call
+            await sdkForConsole.projects.updateAuthDuration(
+                projectId,
+                timeToSeconds(time, $period)
+            );
+            invalidate(Dependencies.PROJECT);
+            $period = 's';
 
             addNotification({
                 type: 'success',
@@ -70,6 +81,26 @@
             });
         }
     }
+
+    period.subscribe((p) => {
+        if (p === 'd') {
+            time = timeInSec / 86400;
+            timeInSec = timeToSeconds(time, p);
+        } else if (p === 'h') {
+            time = timeInSec / 3600;
+            timeInSec = timeToSeconds(time, p);
+        } else if (p === 'm') {
+            time = timeInSec / 60;
+            timeInSec = timeToSeconds(time, p);
+        } else if (p === 's') {
+            time = timeInSec;
+            timeInSec = timeToSeconds(time, p);
+        }
+    });
+
+    $: if (time) {
+        timeInSec = timeToSeconds(time, $period);
+    }
 </script>
 
 <Container>
@@ -143,28 +174,23 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h2" size="6">Session Length <Pill>Coming Soon!</Pill></Heading>
+        <Heading tag="h2" size="6">Session Length</Heading>
         <p>
             If you reduce the limit, users who are currently logged in will be logged out of the
             application.
         </p>
         <svelte:fragment slot="aside">
             <form class="form u-grid u-gap-16">
                 <ul class="form-list is-multiple">
-                    <InputNumber disabled id="length" label="Length" value={1} />
-                    <InputSelect
-                        disabled
-                        id="period"
-                        label="Time Period"
-                        value={options[0].value}
-                        {options} />
+                    <InputNumber id="length" label="Length" bind:value={time} />
+                    <InputSelect id="period" label="Time Period" bind:value={$period} {options} />
                 </ul>
             </form>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">
             <Button
-                disabled={true}
+                disabled={$period === 's' && time === $project.authDuration}
                 on:click={() => {
                     updateSessionLength();
                 }}>