fix: various fixes from QA

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",

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')}>

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} />

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}

src/lib/components/permissions/team.svelte

@@ -60,7 +60,19 @@
 
 <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 <button
+            type="button"
+            class="link"
+            on:click={() => dispatch('custom')}>custom permission</button
+        >.
+    </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">

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">

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>

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>