From d7a84789f3d8ae8e69fa2c3aeb2a29887cef40b0 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 11 Nov 2022 09:57:54 +0100
Subject: [PATCH 01/10] feat: add privacy agreement to signup

---
 src/lib/elements/forms/inputChoice.svelte | 25 +++++++++++++++++++++--
 src/routes/register/+page.svelte          | 20 ++++++++++++++++--
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/lib/elements/forms/inputChoice.svelte b/src/lib/elements/forms/inputChoice.svelte
index be04a386ab..f3348f148e 100644
--- a/src/lib/elements/forms/inputChoice.svelte
+++ b/src/lib/elements/forms/inputChoice.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let type: 'checkbox' | 'switchbox' = 'checkbox';
     export let label: string;
@@ -8,6 +8,22 @@
     export let value = false;
     export let required = false;
     export let disabled = false;
+
+    let element: HTMLInputElement;
+    let error: string;
+
+    const handleInvalid = (event: Event) => {
+        event.preventDefault();
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+    }
 </script>
 
 <FormItem>
@@ -18,7 +34,9 @@
             {required}
             type="checkbox"
             class:switch={type === 'switchbox'}
-            bind:checked={value} />
+            bind:this={element}
+            bind:checked={value}
+            on:invalid={handleInvalid} />
 
         <div class="choice-item-content">
             <div class:u-hide={!showLabel} class="choice-item-title">{label}</div>
@@ -27,4 +45,7 @@
             {/if}
         </div>
     </label>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index f58e12427d..403066094d 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -5,6 +5,7 @@
         Button,
         Form,
         FormItem,
+        InputChoice,
         InputEmail,
         InputPassword,
         InputText
@@ -16,6 +17,7 @@
     import { Dependencies } from '$lib/constants';
 
     let name: string, mail: string, pass: string;
+    let terms = false;
 
     const register = async () => {
         try {
@@ -60,9 +62,23 @@
                     required={true}
                     showPasswordButton={true}
                     bind:value={pass} />
-
+                <InputChoice required bind:value={terms} id="terms" label="terms" showLabel={false}>
+                    By registering, you agree that you have read, understand, and acknowledge our <a
+                        class="link"
+                        href="https://appwrite.io/policy/privacy"
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        Privacy Policy</a>
+                    and accept our
+                    <a
+                        class="link"
+                        href="https://appwrite.io/policy/terms"
+                        target="_blank"
+                        rel="noopener noreferrer">General Terms of Use</a>
+                    .</InputChoice>
                 <FormItem>
-                    <Button fullWidth submit>Sign up</Button></FormItem>
+                    <Button fullWidth submit>Sign up</Button>
+                </FormItem>
             </FormList>
         </Form>
     </svelte:fragment>

From 9111fae33163a0d21a8fd502de79590b6220b835 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 11 Nov 2022 10:06:16 +0100
Subject: [PATCH 02/10] feat: add text to permissions

---
 src/lib/components/permissions/custom.svelte |  5 ++++-
 src/lib/components/permissions/team.svelte   | 15 ++++++++++++++-
 src/lib/components/permissions/user.svelte   |  7 ++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/permissions/custom.svelte b/src/lib/components/permissions/custom.svelte
index 617a635906..aecd660684 100644
--- a/src/lib/components/permissions/custom.svelte
+++ b/src/lib/components/permissions/custom.svelte
@@ -27,7 +27,10 @@
 
 <Modal bind:show on:close={reset} on:submit={create}>
     <svelte:fragment slot="header">Custom permission</svelte:fragment>
-
+    <p class="text">
+        Custom permissions allow you to grant access to specific users or teams using their ID and
+        role.
+    </p>
     <FormList>
         <InputText
             showLabel={false}
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 3451522cf0..4ab31e3496 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -60,7 +60,20 @@
 
 <Modal bind:show on:submit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select teams</svelte:fragment>
-    <InputSearch autofocus disabled={!results?.teams?.length && !search} bind:value={search} />
+    <p class="text">
+        Grant access to any member of a specific team. To grant access to team members with specific
+        roles, you will need to set a <a
+            class="link"
+            href="https://appwrite.io/docs/permissions"
+            target="_blank"
+            rel="noopener noreferrer">custom permission</a
+        >.
+    </p>
+    <InputSearch
+        autofocus
+        disabled={!results?.teams?.length && !search}
+        placeholder="Search by name or ID"
+        bind:value={search} />
     {#if results?.teams?.length}
         <div class="table-wrapper">
             <table class="table is-table-layout-auto is-remove-outer-styles">
diff --git a/src/lib/components/permissions/user.svelte b/src/lib/components/permissions/user.svelte
index 9b068db512..d5468b47d9 100644
--- a/src/lib/components/permissions/user.svelte
+++ b/src/lib/components/permissions/user.svelte
@@ -60,7 +60,12 @@
 
 <Modal bind:show on:submit={create} on:close={reset} size="big">
     <svelte:fragment slot="header">Select users</svelte:fragment>
-    <InputSearch autofocus disabled={!results?.users?.length && !search} bind:value={search} />
+    <p class="text">Grant access to any authenticated or anonymous user.</p>
+    <InputSearch
+        autofocus
+        disabled={!results?.users?.length && !search}
+        placeholder="Search by name, email, phone or ID"
+        bind:value={search} />
     {#if results?.users?.length}
         <div class="table-wrapper">
             <table class="table is-table-layout-auto is-remove-outer-styles">

From 280df90b229e48da8fc5d569e49beabc9461a497 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 11 Nov 2022 10:40:27 +0100
Subject: [PATCH 03/10] fix: custom now opens the modal

---
 src/lib/components/permissions/actions.svelte | 9 ++++++++-
 src/lib/components/permissions/team.svelte    | 7 +++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/permissions/actions.svelte b/src/lib/components/permissions/actions.svelte
index d97edeffd1..e85deb2fd1 100644
--- a/src/lib/components/permissions/actions.svelte
+++ b/src/lib/components/permissions/actions.svelte
@@ -43,5 +43,12 @@
 </DropList>
 
 <User bind:show={showUser} on:create {groups} />
-<Team bind:show={showTeam} on:create {groups} />
+<Team
+    bind:show={showTeam}
+    on:create
+    on:custom={() => {
+        showTeam = false;
+        showCustom = true;
+    }}
+    {groups} />
 <Custom bind:show={showCustom} on:create {groups} />
diff --git a/src/lib/components/permissions/team.svelte b/src/lib/components/permissions/team.svelte
index 4ab31e3496..d8d636401b 100644
--- a/src/lib/components/permissions/team.svelte
+++ b/src/lib/components/permissions/team.svelte
@@ -62,11 +62,10 @@
     <svelte:fragment slot="header">Select teams</svelte:fragment>
     <p class="text">
         Grant access to any member of a specific team. To grant access to team members with specific
-        roles, you will need to set a <a
+        roles, you will need to set a <button
+            type="button"
             class="link"
-            href="https://appwrite.io/docs/permissions"
-            target="_blank"
-            rel="noopener noreferrer">custom permission</a
+            on:click={() => dispatch('custom')}>custom permission</button
         >.
     </p>
     <InputSearch

From 98aa918e241f0f6afca92eefbc4cb2ebb37147cb Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 11 Nov 2022 11:21:07 +0100
Subject: [PATCH 04/10] feat: new security for documents

---
 .../settings/+page.svelte                     | 114 ++++++++++--------
 1 file changed, 65 insertions(+), 49 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
index c8abe4744f..6c7bc2aff7 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, CardGrid, Box, Heading } from '$lib/components';
+    import { CardGrid, Box, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, InputSwitch, Helper } from '$lib/elements/forms';
     import { Permissions } from '$lib/components/permissions';
@@ -13,6 +13,7 @@
     import Delete from './deleteCollection.svelte';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import FormList from '$lib/elements/forms/formList.svelte';
 
     const databaseId = $page.params.database;
 
@@ -33,15 +34,12 @@
         collectionDocumentSecurity ??= $collection.documentSecurity;
     });
 
-    $: if (collectionDocumentSecurity || collectionPermissions) {
-        if (collectionDocumentSecurity !== $collection.documentSecurity) {
-            arePermsDisabled = false;
-        } else if (collectionPermissions) {
-            if (symmetricDifference(collectionPermissions, $collection.$permissions).length) {
-                arePermsDisabled = false;
-            } else arePermsDisabled = true;
-        }
-    }
+    $: if (
+        collectionPermissions &&
+        symmetricDifference(collectionPermissions, $collection.$permissions).length
+    ) {
+        arePermsDisabled = false;
+    } else arePermsDisabled = true;
 
     function addError(location: typeof showError, message: string, type: typeof errorType) {
         showError = location;
@@ -95,7 +93,7 @@
                 databaseId,
                 $collection.$id,
                 $collection.name,
-                collectionDocumentSecurity ? $collection.$permissions : collectionPermissions
+                collectionPermissions
             );
             invalidate(Dependencies.COLLECTION);
             arePermsDisabled = true;
@@ -110,6 +108,29 @@
             });
         }
     }
+
+    async function updateSecurity() {
+        try {
+            await sdkForProject.databases.updateCollection(
+                databaseId,
+                $collection.$id,
+                $collection.name,
+                $collection.$permissions,
+                collectionDocumentSecurity
+            );
+            invalidate(Dependencies.COLLECTION);
+            arePermsDisabled = true;
+            addNotification({
+                message: 'Security has been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
 </script>
 
 <Container>
@@ -160,49 +181,18 @@
                     on:click={updateName}>Update</Button>
             </svelte:fragment>
         </CardGrid>
+
         <CardGrid>
             <Heading tag="h6" size="7">Update Permissions</Heading>
             <p>
-                Assign read or write permissions at the <b>Collection Level</b> or
-                <b>Document Level</b>. If collection Level permissions are assigned, permissions
-                applied to individual documents are ignored.
+                Choose who can access your collection and documents. For more information, check out
+                the <a
+                    href="https://appwrite.io/docs/permissions"
+                    target="_blank"
+                    rel="noopener noreferrer">Permissions Guide</a> in our documentation.
             </p>
             <svelte:fragment slot="aside">
-                <ul class="checkboxes-list">
-                    <li class="checkboxes-item">
-                        <label class="label">
-                            <input
-                                type="radio"
-                                class="is-small"
-                                name="level"
-                                bind:group={collectionDocumentSecurity}
-                                value={false} />
-                            <span>Collection Level</span>
-                        </label>
-                    </li>
-                    <li class="checkboxes-item">
-                        <label class="label">
-                            <input
-                                type="radio"
-                                class="is-small"
-                                name="level"
-                                bind:group={collectionDocumentSecurity}
-                                value={true} />
-                            <span>Document Level</span>
-                        </label>
-                    </li>
-                </ul>
-
-                {#if collectionDocumentSecurity}
-                    <Alert type="info">
-                        <p>
-                            Manage permissions at the <b>Document Level</b> to control access over
-                            every document in your collection. Check out our documentation for more
-                            on
-                            <a class="link" href="/#">Permissions</a>
-                        </p>
-                    </Alert>
-                {:else if collectionPermissions !== null}
+                {#if collectionPermissions}
                     <Permissions bind:permissions={collectionPermissions} withCreate />
                 {/if}
             </svelte:fragment>
@@ -211,6 +201,32 @@
             </svelte:fragment>
         </CardGrid>
 
+        <CardGrid>
+            <Heading tag="h6" size="7">Update Document Security</Heading>
+            <svelte:fragment slot="aside">
+                <FormList>
+                    <InputSwitch
+                        bind:value={collectionDocumentSecurity}
+                        id="security"
+                        label="Document Security" />
+                </FormList>
+                <p class="text">
+                    When document security is enabled, users will be able to access documents for
+                    which they have been granted <b>either Document or Collection permissions</b>.
+                </p>
+                <p class="text">
+                    If document security is disabled, users can access documents <b
+                        >only if they have Collection permissions</b
+                    >. Document permissions will be ignored.
+                </p>
+            </svelte:fragment>
+            <svelte:fragment slot="actions">
+                <Button
+                    disabled={collectionDocumentSecurity === $collection.documentSecurity}
+                    on:click={updateSecurity}>Update</Button>
+            </svelte:fragment>
+        </CardGrid>
+
         <CardGrid danger>
             <Heading tag="h6" size="7">Delete Collection</Heading>
             <p>

From c641d6ed7d737df711bbc9115159ce065a277e5f Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 11 Nov 2022 11:47:22 +0100
Subject: [PATCH 05/10] feat: new security / permissions

---
 .../settings/+page.svelte                     |  2 +-
 .../bucket-[bucket]/settings/+page.svelte     | 99 +++++++++++--------
 2 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
index 6c7bc2aff7..838e832a3d 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
@@ -184,7 +184,7 @@
 
         <CardGrid>
             <Heading tag="h6" size="7">Update Permissions</Heading>
-            <p>
+            <p class="text">
                 Choose who can access your collection and documents. For more information, check out
                 the <a
                     href="https://appwrite.io/docs/permissions"
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
index e712af75d5..5cac624b70 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -54,14 +54,10 @@
         encryption ??= $bucket.encryption;
         antivirus ??= $bucket.antivirus;
     });
-    $: if (bucketFileSecurity || bucketPermissions) {
-        if (bucketFileSecurity !== $bucket.fileSecurity) {
+    $: if (bucketPermissions) {
+        if (symmetricDifference(bucketPermissions, $bucket.$permissions).length) {
             arePermsDisabled = false;
-        } else if (bucketPermissions) {
-            if (symmetricDifference(bucketPermissions, $bucket.$permissions).length) {
-                arePermsDisabled = false;
-            } else arePermsDisabled = true;
-        }
+        } else arePermsDisabled = true;
     }
     $: if (extensions) {
         if (JSON.stringify(extensions) !== JSON.stringify($bucket.allowedFileExtensions)) {
@@ -106,17 +102,33 @@
         }
     }
     async function updatePermissions() {
+        try {
+            await sdkForProject.storage.updateBucket($bucket.$id, $bucket.name, bucketPermissions);
+            invalidate(Dependencies.BUCKET);
+            arePermsDisabled = true;
+            addNotification({
+                message: 'Permissions have been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    }
+    async function updateFileSecurity() {
         try {
             await sdkForProject.storage.updateBucket(
                 $bucket.$id,
                 $bucket.name,
-                bucketFileSecurity ? bucketPermissions : undefined,
+                $bucket.$permissions,
                 bucketFileSecurity
             );
             invalidate(Dependencies.BUCKET);
             arePermsDisabled = true;
             addNotification({
-                message: 'Permissions have been updated',
+                message: 'Security has been updated',
                 type: 'success'
             });
         } catch (error) {
@@ -242,8 +254,9 @@
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
-                    <Button disabled={bucketName === $bucket.name || !bucketName} submit
-                        >Update</Button>
+                    <Button disabled={bucketName === $bucket.name || !bucketName} submit>
+                        Update
+                    </Button>
                 </svelte:fragment>
             </CardGrid>
         </Form>
@@ -251,37 +264,15 @@
         <Form on:submit={updatePermissions}>
             <CardGrid>
                 <Heading tag="h6" size="7">Update Permissions</Heading>
-                <p>
-                    Assign read or write permissions at the <b>Bucket Level</b> or
-                    <b>File Level</b>. If Bucket Level permissions are assigned, file permissions
-                    will be ignored.
+                <p class="text">
+                    Choose who can access your buckets and files. For more information, check out
+                    the <a
+                        href="https://appwrite.io/docs/permissions"
+                        target="_blank"
+                        rel="noopener noreferrer">Permissions Guide</a> in our documentation.
                 </p>
                 <svelte:fragment slot="aside">
-                    <ul class="checkboxes-list">
-                        <li class="checkboxes-item">
-                            <label class="label">
-                                <input
-                                    type="radio"
-                                    class="is-small"
-                                    name="level"
-                                    bind:group={bucketFileSecurity}
-                                    value={true} />
-                                <span>Bucket Level</span>
-                            </label>
-                        </li>
-                        <li class="checkboxes-item">
-                            <label class="label">
-                                <input
-                                    type="radio"
-                                    class="is-small"
-                                    name="level"
-                                    bind:group={bucketFileSecurity}
-                                    value={false} />
-                                <span>File Level</span>
-                            </label>
-                        </li>
-                    </ul>
-                    {#if bucketFileSecurity}
+                    {#if bucketPermissions}
                         <Permissions bind:permissions={bucketPermissions} />
                     {/if}
                 </svelte:fragment>
@@ -291,6 +282,34 @@
             </CardGrid>
         </Form>
 
+        <Form on:submit={updateFileSecurity}>
+            <CardGrid>
+                <Heading tag="h6" size="7">Update File Security</Heading>
+                <svelte:fragment slot="aside">
+                    <FormList>
+                        <InputSwitch
+                            bind:value={bucketFileSecurity}
+                            id="security"
+                            label="File Security" />
+                    </FormList>
+                    <p class="text">
+                        When file security is enabled, users will be able to access files for which
+                        they have been granted <b>either File or Bucket permissions</b>.
+                    </p>
+                    <p class="text">
+                        If file security is disabled, users can access files <b
+                            >only if they have Bucket permissions</b
+                        >. File permissions will be ignored..
+                    </p>
+                </svelte:fragment>
+                <svelte:fragment slot="actions">
+                    <Button disabled={bucketFileSecurity === $bucket.fileSecurity} submit>
+                        Update
+                    </Button>
+                </svelte:fragment>
+            </CardGrid>
+        </Form>
+
         <Form on:submit={updateSecurity}>
             <CardGrid>
                 <Heading tag="h2" size="7">Update Security Settings</Heading>

From e259c67d2c6961aa80937289c4843c8fcef0d975 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 11 Nov 2022 12:25:47 +0100
Subject: [PATCH 06/10] feat: add alerts to modals and wizards

---
 src/lib/components/alert.svelte               |  1 +
 .../wizard/step2.svelte                       | 30 +++++++++++++++----
 .../storage/bucket-[bucket]/create.svelte     | 28 +++++++++++++++--
 3 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
index bf06d2c280..32351e47a5 100644
--- a/src/lib/components/alert.svelte
+++ b/src/lib/components/alert.svelte
@@ -18,6 +18,7 @@
     <div class="alert-grid">
         {#if dismissible}
             <button
+                type="button"
                 class="x-button"
                 aria-label="close alert box"
                 on:click={() => dispatch('dismiss')}>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
index e987e82545..fd4ec4b4e2 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
@@ -2,16 +2,34 @@
     import { Permissions } from '$lib/components/permissions';
     import { WizardStep } from '$lib/layout';
     import { createDocument } from './store';
+    import { collection } from '../store';
+    import { Alert } from '$lib/components';
 </script>
 
 <WizardStep>
     <svelte:fragment slot="title">Set Permissions</svelte:fragment>
     <svelte:fragment slot="subtitle">
-        Assign read or write permissions at the <b> Collection Level</b> or
-        <b> Document Level</b>. If collection Level permissions are assigned, permissions applied to
-        individual documents are ignored.
+        Choose who can access your collection and documents. For more information, check out the <a
+            href="https://appwrite.io/docs/permissions"
+            target="_blank"
+            rel="noopener noreferrer">Permissions Guide</a> in our documentation.
     </svelte:fragment>
-    <div class="common-section">
-        <Permissions bind:permissions={$createDocument.permissions} />
-    </div>
+    {#if $collection.documentSecurity}
+        <div class="common-section">
+            <Alert type="info">
+                <svelte:fragment slot="title">Document security is enabled</svelte:fragment>
+                Users will be able to access this document if they have been granted
+                <b>either Document or Collection permissions</b>.
+            </Alert>
+        </div>
+        <div class="common-section">
+            <Permissions bind:permissions={$createDocument.permissions} />
+        </div>
+    {:else}
+        <Alert type="info">
+            <svelte:fragment slot="title">Document security is disabled</svelte:fragment>
+            If you want to assign document permissions, navigate to Collection settings and enable document
+            security. Otherwise, only Collection permissions will be used.
+        </Alert>
+    {/if}
 </WizardStep>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
index b881da6750..a4c831b82b 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button, FormList, InputFile } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
-    import { Modal, CustomId } from '$lib/components';
+    import { Modal, CustomId, Heading, Alert } from '$lib/components';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { page } from '$app/stores';
@@ -69,8 +69,30 @@
         {:else}
             <CustomId bind:show={showCustomId} name="File" bind:id />
         {/if}
-        <p class="heading-level-7">Permissions</p>
-        <Permissions bind:permissions />
+        <Heading tag="h6" size="7">Update Permissions</Heading>
+        <p class="text">
+            Choose who can access your buckets and files. For more information, check out the
+            <a href="https://appwrite.io/docs/permissions" target="_blank" rel="noopener noreferrer"
+                >Permissions Guide</a> in our documentation.
+        </p>
+        {#if $bucket.fileSecurity}
+            <div class="common-section">
+                <Alert type="info">
+                    <svelte:fragment slot="title">File security enabled</svelte:fragment>
+                    Users will be able to access this file if they have been granted
+                    <b>either File or Bucket permissions</b>.
+                </Alert>
+            </div>
+            <div class="common-section">
+                <Permissions bind:permissions />
+            </div>
+        {:else}
+            <Alert type="info">
+                <svelte:fragment slot="title">File security disabled</svelte:fragment>
+                If you want to assign file permissions, navigate to Bucket settings and enable file security.
+                Otherwise, only Bucket permissions will be used.
+            </Alert>
+        {/if}
     </FormList>
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>

From 1943c5a49ea9522bf01a455352537275d1146262 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 11 Nov 2022 12:27:40 +0100
Subject: [PATCH 07/10] chore: bump css

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index fed4a0d116..bd563e7da7 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^10.0.0",
-        "@aw-labs/icons": "0.0.0-74",
-        "@aw-labs/ui": "0.0.0-74",
+        "@aw-labs/icons": "0.0.0-75",
+        "@aw-labs/ui": "0.0.0-75",
         "@popperjs/core": "^2.11.6",
         "echarts": "^5.4.0",
         "pretty-bytes": "^6.0.0",

From e6524927ac230ad09832307c625de38debbdf64a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 11 Nov 2022 12:31:18 +0100
Subject: [PATCH 08/10] chore: bump css

---
 package-lock.json | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 40cf403bae..66182949f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^10.0.0",
-                "@aw-labs/icons": "0.0.0-74",
-                "@aw-labs/ui": "0.0.0-74",
+                "@aw-labs/icons": "0.0.0-75",
+                "@aw-labs/ui": "0.0.0-75",
                 "@popperjs/core": "^2.11.6",
                 "echarts": "^5.4.0",
                 "pretty-bytes": "^6.0.0",
@@ -81,14 +81,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-74",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-74.tgz",
-            "integrity": "sha512-aWb1OV8QEvw2BgJNK3P92wmfXlHw15wKOqMndx4kGrof+FCEekplohCnO1WZYZODoE+rF8DKHUE8RodVbJzo4A=="
+            "version": "0.0.0-75",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-75.tgz",
+            "integrity": "sha512-3ajSt88EulmGyk0P8PUGROJehx+uNyUCfRzg29rE2h/SYMNwwyNWilh7qSRXJqbpBvC9y8IjwZ0D9MbILFzbFA=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-74",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-74.tgz",
-            "integrity": "sha512-bg8j0XiB9+PwBUXVehKcxjdIS/GH9aJ1+RtdghDNBhOPc2A5zX+MmTCDsN071qlmDfW3pnufiCoQlek/qBvcdQ==",
+            "version": "0.0.0-75",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-75.tgz",
+            "integrity": "sha512-Kk27kWH4Mxszpfpr954gqrJMkyjZwZS/X5zU4Jg/sCCg2QMYXbxRGmPoit0qNIRGVHf72hf8eJCUU17/2IHCSQ==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -7467,14 +7467,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-74",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-74.tgz",
-            "integrity": "sha512-aWb1OV8QEvw2BgJNK3P92wmfXlHw15wKOqMndx4kGrof+FCEekplohCnO1WZYZODoE+rF8DKHUE8RodVbJzo4A=="
+            "version": "0.0.0-75",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-75.tgz",
+            "integrity": "sha512-3ajSt88EulmGyk0P8PUGROJehx+uNyUCfRzg29rE2h/SYMNwwyNWilh7qSRXJqbpBvC9y8IjwZ0D9MbILFzbFA=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-74",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-74.tgz",
-            "integrity": "sha512-bg8j0XiB9+PwBUXVehKcxjdIS/GH9aJ1+RtdghDNBhOPc2A5zX+MmTCDsN071qlmDfW3pnufiCoQlek/qBvcdQ==",
+            "version": "0.0.0-75",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-75.tgz",
+            "integrity": "sha512-Kk27kWH4Mxszpfpr954gqrJMkyjZwZS/X5zU4Jg/sCCg2QMYXbxRGmPoit0qNIRGVHf72hf8eJCUU17/2IHCSQ==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",

From e4faefd5b79879bfd9c2779694b924a319b573c9 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 11 Nov 2022 13:05:33 +0100
Subject: [PATCH 09/10] fix: better html

---
 .../auth/settings/+page.svelte                | 56 ++++++++++---------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/routes/console/project-[project]/auth/settings/+page.svelte b/src/routes/console/project-[project]/auth/settings/+page.svelte
index 66032e6c30..f2b845303a 100644
--- a/src/routes/console/project-[project]/auth/settings/+page.svelte
+++ b/src/routes/console/project-[project]/auth/settings/+page.svelte
@@ -64,33 +64,35 @@
             <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
             <ul class="grid-box common-section">
                 {#each $OAuthProviders.providers.sort( (a, b) => (a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1) ) as provider}
-                    <button
-                        class="card u-flex u-flex-vertical u-cross-center"
-                        on:click={() => {
-                            selectedProvider = provider;
-                        }}
-                        use:event={{
-                            name: 'console_users',
-                            action: 'click_update',
-                            event: 'click',
-                            parameters: {
-                                provider: provider.name
-                            }
-                        }}>
-                        <div class="image-item">
-                            <img
-                                height="20"
-                                width="20"
-                                src={`/icons/${$app.themeInUse}/color/${provider.icon}.svg`}
-                                alt={provider.name} />
-                        </div>
-                        <p class="u-margin-block-start-8">{provider.name}</p>
-                        <div class="u-margin-block-start-24">
-                            <Pill success={provider.enabled}>
-                                {provider.enabled ? 'enabled' : 'disabled'}
-                            </Pill>
-                        </div>
-                    </button>
+                    <li class="grid-box-item">
+                        <button
+                            class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
+                            on:click={() => {
+                                selectedProvider = provider;
+                            }}
+                            use:event={{
+                                name: 'console_users',
+                                action: 'click_update',
+                                event: 'click',
+                                parameters: {
+                                    provider: provider.name
+                                }
+                            }}>
+                            <div class="image-item">
+                                <img
+                                    height="20"
+                                    width="20"
+                                    src={`/icons/${$app.themeInUse}/color/${provider.icon}.svg`}
+                                    alt={provider.name} />
+                            </div>
+                            <p class="u-margin-block-start-8">{provider.name}</p>
+                            <div class="u-margin-block-start-24">
+                                <Pill success={provider.enabled}>
+                                    {provider.enabled ? 'enabled' : 'disabled'}
+                                </Pill>
+                            </div>
+                        </button>
+                    </li>
                 {/each}
             </ul>
         </section>

From 131b70b36dd1fea69c7a3acc0512951c3237ae12 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 14 Nov 2022 10:17:19 +0100
Subject: [PATCH 10/10] fix: remove binding

---
 src/routes/register/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 403066094d..2faae4a024 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -62,7 +62,7 @@
                     required={true}
                     showPasswordButton={true}
                     bind:value={pass} />
-                <InputChoice required bind:value={terms} id="terms" label="terms" showLabel={false}>
+                <InputChoice required value={terms} id="terms" label="terms" showLabel={false}>
                     By registering, you agree that you have read, understand, and acknowledge our <a
                         class="link"
                         href="https://appwrite.io/policy/privacy"