created authLimit component and logic

src/routes/console/[project]/users/_setUserLimit.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { Modal } from '$lib/components';
+    import { Button, InputNumber, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import { project } from '../store';
+
+    const projectId = $project.$id;
+    let userLimit: number = $project.authLimit;
+    export let showUserLimitModal = false;
+    export let authLimit;
+
+    const update = async () => {
+        try {
+            const oauth = await sdkForConsole.projects.updateAuthLimit(projectId, userLimit);
+            console.log(oauth);
+            authLimit = userLimit;
+            showUserLimitModal = false;
+            addNotification({
+                type: 'success',
+                message: 'Updated project users limit successfully'
+            });
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={update}>
+    <Modal bind:show={showUserLimitModal}>
+        <svelte:fragment slot="header">Max Allowed Users</svelte:fragment>
+        <InputNumber id="userLimit" label="User Limit" autofocus={true} bind:value={userLimit} />
+        <!-- TODO: create infoCardSection component -->
+        <i class="icon-info-circled" />
+        <p>
+            This limit will prevent new users from signing up for your project, no matter what auth
+            method has been used. You will still be able to create users and team memberships from
+            your Appwrite console. For an unlimited amount of users, set the limit to 0. Max limit
+            is 10,000.
+        </p>
+        <svelte:fragment slot="footer">
+            <Button submit>Update</Button>
+            <Button secondary on:click={() => (showUserLimitModal = false)}>Cancel</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>

src/routes/console/[project]/users/settings.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
-    import { page } from '$app/stores';
     import { SwitchBoxes } from '$lib/components';
     import { Container } from '$lib/layout';
     import Toggle from './_toggleOAuth.svelte';
+    import SetUserLimit from './_setUserLimit.svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../store';
 
     let showModal = false;
-    const projectId = $page.params.project;
+    let showUserLimitModal = false;
+    const projectId = $project.$id;
     let provider;
+    let authLimit = $project.authLimit;
 
+    console.log($project);
     const authUpdate = async (event) => {
         try {
             const upup = await sdkForConsole.projects.updateAuthStatus(
@@ -96,11 +99,20 @@
         }
     ];
 
-    //@todo move authBoxes and providersBoxes to a store
-    //@todo if operation not successful revert switchbox value
+    //TODO: move authBoxes and providersBoxes to a store
+    //TODO: if operation not successful revert switchbox value
 </script>
 
 <Container>
+    <p>
+        {authLimit ? `${authLimit} Users allowed` : 'Unlimited Users '}
+        <button
+            on:click={() => {
+                showUserLimitModal = true;
+            }}
+            class=" is-text link"
+            ><span class="text">{authLimit ? 'Change Limit' : 'Set Limit'}</span></button>
+    </p>
     <h2>Settings</h2>
     <p>Choose auth methods you wish to use.</p>
     <SwitchBoxes boxes={authBoxes} on:updated={authUpdate} />
@@ -111,3 +123,5 @@
 {#if provider && showModal}
     <Toggle {provider} bind:showModal />
 {/if}
+
+<SetUserLimit bind:authLimit bind:showUserLimitModal />