From 6b842e3d90a4c0b8328fa48ed3d2a942839eee20 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 22 Jun 2022 11:08:48 +0200
Subject: [PATCH] feat: implement new card & some refactoring

---
 .../console/[project]/users/security.svelte   | 83 ++++++++++---------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/src/routes/console/[project]/users/security.svelte b/src/routes/console/[project]/users/security.svelte
index 5238b0f72..029dfd003 100644
--- a/src/routes/console/[project]/users/security.svelte
+++ b/src/routes/console/[project]/users/security.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Card } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Pill } from '$lib/elements/';
     import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
@@ -11,7 +11,6 @@
     let isLimited = $project.authLimit === 0 ? 'unlimited' : 'limited';
     let newLimit = $project.authLimit === 0 ? 100 : $project.authLimit;
     let btnActive = false;
-    let first = true;
 
     let options = [
         { label: 'years', value: 'years' },
@@ -21,8 +20,10 @@
 
     $: {
         if (isLimited) {
-            if (first) {
-                first = false;
+            if (isLimited === 'unlimited' && $project.authLimit === 0) {
+                btnActive = false;
+            } else if (isLimited === 'limited' && $project.authLimit === newLimit) {
+                btnActive = false;
             } else {
                 btnActive = true;
             }
@@ -52,7 +53,7 @@
     }
     async function updateSessionLength() {
         try {
-            //Some SDK call
+            //TODO: implement correct SDK call
 
             addNotification({
                 type: 'success',
@@ -68,18 +69,14 @@
 </script>
 
 <Container>
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
-            <div class="u-flex u-main-space-between u-gap-12 common-section">
-                <div>
-                    <h2 class="heading-level-6">Users Limit</h2>
-                    <p>
-                        This limits new users from signing up for your project, regardless of
-                        authentication method. You can still create users from your Appwrite
-                        console.
-                    </p>
-                </div>
-            </div>
+    <CardGrid>
+        <h2 class="heading-level-6">Users Limit</h2>
+        <p>
+            This limits new users from signing up for your project, regardless of authentication
+            method. You can still create users from your Appwrite console.
+        </p>
+
+        <svelte:fragment slot="right">
             <ul class="u-flex u-gap-12">
                 <li>
                     <div class="input-text-wrapper">
@@ -112,38 +109,44 @@
                         bind:value={newLimit} />
                 </li>
             </ul>
-        </div>
-        <div class="u-flex u-main-space-end common-section">
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
             <Button
                 disabled={!btnActive}
                 on:click={() => {
                     updateLimit();
                 }}>Update</Button>
-        </div>
-    </Card>
+        </svelte:fragment>
+    </CardGrid>
 
-    <Card>
-        <div class="u-flex u-main-space-between u-gap-12 common-section">
-            <div class="u-flex u-main-space-between u-gap-12 common-section">
-                <div>
-                    <h2 class="heading-level-6">Session Length</h2>
-                    <p>
-                        If you reduce the limit, users who are currently logged in will be logged
-                        out of the application.
-                    </p>
-                </div>
-            </div>
-            <ul class="u-flex u-gap-12">
-                <InputNumber id="length" label="Length" value={1} />
-                <InputSelect id="period" {options} label="Time Period" value={options[0].value} />
-            </ul>
-        </div>
-        <div class="u-flex u-main-space-end common-section">
+    <CardGrid>
+        <h2 class="heading-level-6">Session Length</h2>
+        <p>
+            If you reduce the limit, users who are currently logged in will be logged out of the
+            application.
+        </p>
+        <svelte:fragment slot="right">
+            <form class="form u-grid u-gap-16">
+                <ul class="form-list">
+                    <li class="form-item is-multiple">
+                        <InputNumber id="length" label="Length" value={1} />
+                        <InputSelect
+                            id="period"
+                            {options}
+                            label="Time Period"
+                            value={options[0].value} />
+                    </li>
+                </ul>
+            </form>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
             <Button
                 disabled={true}
                 on:click={() => {
                     updateSessionLength();
                 }}>Update</Button>
-        </div>
-    </Card>
+        </svelte:fragment>
+    </CardGrid>
 </Container>