From 637a1fcfb627416e8e163632991c09ade95370e2 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Sat, 6 Apr 2024 15:37:02 +0530
Subject: [PATCH 1/7] fix: show the runtime in the selector when only one
 exists.

---
 src/lib/wizards/functions/steps/templateConfiguration.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index 7da879c82..030380f73 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -25,6 +25,10 @@
                 return allowedRuntimes.includes(runtime.value);
             });
 
+        if (options.length == 1) {
+            $templateConfig.runtime = options[0].value;
+        }
+
         return options;
     }
 </script>

From 3e7b145a4884287d1bc91060a3567df3cd6bcec1 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 4 Mar 2024 17:32:27 -0800
Subject: [PATCH 2/7] refactor(auth): refactor OAuth2 providers

Build a lookup table of provider information into the Console
so that it can be used for user identities and account identities.

This is necessary because it's not possible to fetch the console
project to get the oAuthProviders.
---
 src/lib/stores/oauth-providers.ts             | 402 ++++++++++--------
 .../auth/(providers)/appleOAuth.svelte        |   9 +-
 .../auth/(providers)/auth0OAuth.svelte        |  12 +-
 .../auth/(providers)/authentikOAuth.svelte    |  12 +-
 .../auth/(providers)/gitlabOAuth.svelte       |  12 +-
 .../auth/(providers)/googleOAuth.svelte       |  13 +-
 .../auth/(providers)/mainOAuth.svelte         |  13 +-
 .../auth/(providers)/microsoftOAuth.svelte    |  13 +-
 .../auth/(providers)/oidcOAuth.svelte         |   9 +-
 .../auth/(providers)/oktaOAuth.svelte         |   9 +-
 .../auth/settings/+page.svelte                |  71 ++--
 .../project-[project]/auth/updateOAuth.ts     |   5 +-
 .../auth/user-[user]/identities/table.svelte  |  12 +-
 13 files changed, 338 insertions(+), 254 deletions(-)

diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 8d08dffdb..2cb2ddd3f 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -1,6 +1,4 @@
-import type { Models } from '@appwrite.io/console';
 import type { SvelteComponent } from 'svelte';
-import { writable } from 'svelte/store';
 import Apple from '../../routes/console/project-[project]/auth/(providers)/appleOAuth.svelte';
 import Auth0 from '../../routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte';
 import Authentik from '../../routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte';
@@ -11,176 +9,240 @@ import Microsoft from '../../routes/console/project-[project]/auth/(providers)/m
 import Oidc from '../../routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte';
 import Okta from '../../routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte';
 
-export type Provider = Models.AuthProvider & {
+export type Provider = {
+    name: string;
     icon: string;
     docs?: string;
-    component?: typeof SvelteComponent<unknown>;
+    component: typeof SvelteComponent<unknown>;
 };
 
-export type Providers = {
-    providers: Provider[];
+export const oAuthProviders: Record<string, Provider> = {
+    amazon: {
+        name: 'Amazon',
+        icon: 'amazon',
+        docs: 'https://developer.amazon.com/apps-and-games/services-and-apis',
+        component: Main
+    },
+    apple: {
+        name: 'Apple',
+        icon: 'apple',
+        docs: 'https://developer.apple.com/',
+        component: Apple
+    },
+    auth0: {
+        name: 'Auth0',
+        icon: 'auth0',
+        docs: 'https://auth0.com/developers',
+        component: Auth0
+    },
+    authentik: {
+        name: 'Authentik',
+        icon: 'authentik',
+        docs: 'https://goauthentik.io/integrations/sources/oauth/',
+        component: Authentik
+    },
+    autodesk: {
+        name: 'Autodesk',
+        icon: 'autodesk',
+        docs: 'https://forge.autodesk.com/en/docs/oauth/v2/developers_guide/overview/',
+        component: Main
+    },
+    bitbucket: {
+        name: 'Bitbucket',
+        icon: 'bitbucket',
+        docs: 'https://developer.atlassian.com/bitbucket',
+        component: Main
+    },
+    bitly: {
+        name: 'Bitly',
+        icon: 'bitly',
+        docs: 'https://dev.bitly.com/v4_documentation.html',
+        component: Main
+    },
+    box: {
+        name: 'Box',
+        icon: 'box',
+        docs: 'https://developer.box.com/reference/',
+        component: Main
+    },
+    dailymotion: {
+        name: 'Dailymotion',
+        icon: 'dailymotion',
+        docs: 'https://developers.dailymotion.com/api/',
+        component: Main
+    },
+    discord: {
+        name: 'Discord',
+        icon: 'discord',
+        docs: 'https://discordapp.com/developers/docs/topics/oauth2',
+        component: Main
+    },
+    disqus: {
+        name: 'Disqus',
+        icon: 'disqus',
+        docs: 'https://disqus.com/api/docs/auth/',
+        component: Main
+    },
+    dropbox: {
+        name: 'Dropbox',
+        icon: 'dropbox',
+        docs: 'https://www.dropbox.com/developers/documentation',
+        component: Main
+    },
+    etsy: {
+        name: 'Etsy',
+        icon: 'etsy',
+        docs: 'https://developers.etsy.com/',
+        component: Main
+    },
+    facebook: {
+        name: 'Facebook',
+        icon: 'facebook',
+        docs: 'https://developers.facebook.com/',
+        component: Main
+    },
+    github: {
+        name: 'GitHub',
+        icon: 'github',
+        docs: 'https://developer.github.com',
+        component: Main
+    },
+    gitlab: {
+        name: 'GitLab',
+        icon: 'gitlab',
+        docs: 'https://docs.gitlab.com/ee/api/',
+        component: GitLab
+    },
+    google: {
+        name: 'Google',
+        icon: 'google',
+        docs: 'https://support.google.com/googleapi/answer/6158849',
+        component: Google
+    },
+    linkedin: {
+        name: 'LinkedIn',
+        icon: 'linkedin',
+        docs: 'https://developer.linkedin.com/',
+        component: Main
+    },
+    microsoft: {
+        name: 'Microsoft',
+        icon: 'microsoft',
+        docs: 'https://developer.microsoft.com/en-us/',
+        component: Microsoft
+    },
+    notion: {
+        name: 'Notion',
+        icon: 'notion',
+        docs: 'https://developers.notion.com/docs',
+        component: Main
+    },
+    oidc: {
+        name: 'OIDC',
+        icon: 'oidc',
+        docs: 'https://openid.net/connect/faq/',
+        component: Oidc
+    },
+    okta: {
+        name: 'Okta',
+        icon: 'okta',
+        docs: 'https://developer.okta.com',
+        component: Okta
+    },
+    paypal: {
+        name: 'Paypal',
+        icon: 'paypal',
+        docs: 'https://developer.paypal.com/docs/api/overview/',
+        component: Main
+    },
+    paypalsandbox: {
+        name: 'Paypal Sandbox',
+        icon: 'paypal',
+        docs: 'https://developer.paypal.com/docs/api/overview/',
+        component: Main
+    },
+    podio: {
+        name: 'Podio',
+        icon: 'podio',
+        docs: 'https://developers.podio.com/doc/oauth-authorization',
+        component: Main
+    },
+    salesforce: {
+        name: 'Salesforce',
+        icon: 'salesforce',
+        docs: 'https://developer.salesforce.com/docs/',
+        component: Main
+    },
+    slack: {
+        name: 'Slack',
+        icon: 'slack',
+        docs: 'https://api.slack.com/',
+        component: Main
+    },
+    spotify: {
+        name: 'Spotify',
+        icon: 'spotify',
+        docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/',
+        component: Main
+    },
+    stripe: {
+        name: 'Stripe',
+        icon: 'stripe',
+        docs: 'https://stripe.com/docs/api',
+        component: Main
+    },
+    tradeshift: {
+        name: 'Tradeshift',
+        icon: 'tradeshift',
+        docs: 'https://developers.tradeshift.com/docs/api',
+        component: Main
+    },
+    tradeshiftBox: {
+        name: 'Tradeshift Sandbox',
+        icon: 'tradeshift',
+        docs: 'https://developers.tradeshift.com/docs/api',
+        component: Main
+    },
+    twitch: {
+        name: 'Twitch',
+        icon: 'twitch',
+        docs: 'https://dev.twitch.tv/docs/auth',
+        component: Main
+    },
+    wordpress: {
+        name: 'Wordpress',
+        icon: 'wordpress',
+        docs: 'https://developer.wordpress.com/docs/oauth2/',
+        component: Main
+    },
+    yahoo: {
+        name: 'Yahoo',
+        icon: 'yahoo',
+        docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/',
+        component: Main
+    },
+    yammer: {
+        name: 'Yammer',
+        icon: 'yammer',
+        docs: 'https://developer.yammer.com/docs/oauth-2',
+        component: Main
+    },
+    yandex: {
+        name: 'Yandex',
+        icon: 'yandex',
+        docs: 'https://tech.yandex.com/oauth/',
+        component: Main
+    },
+    zoho: {
+        name: 'Zoho',
+        icon: 'zoho',
+        docs: 'https://www.zoho.com/crm/developer/docs/api/oauth-overview.html',
+        component: Main
+    },
+    zoom: {
+        name: 'Zoom',
+        icon: 'zoom',
+        docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/',
+        component: Main
+    }
 };
-
-const setProviders = (project: Models.Project): Provider[] => {
-    return (
-        project?.oAuthProviders.map((n) => {
-            let docs: Provider['docs'];
-            let icon: Provider['icon'] = n.key.toLowerCase();
-            let component: Provider['component'] = Main;
-
-            switch (n.key.toLowerCase()) {
-                case 'amazon':
-                    docs = 'https://developer.amazon.com/apps-and-games/services-and-apis';
-                    break;
-                case 'apple':
-                    docs = 'https://developer.apple.com/';
-                    component = Apple;
-                    break;
-                case 'auth0':
-                    docs = 'https://auth0.com/developers';
-                    component = Auth0;
-                    break;
-                case 'authentik':
-                    docs = 'https://goauthentik.io/integrations/sources/oauth/';
-                    component = Authentik;
-                    break;
-                case 'autodesk':
-                    docs = 'https://forge.autodesk.com/en/docs/oauth/v2/developers_guide/overview/';
-                    break;
-                case 'bitbucket':
-                    docs = 'https://developer.atlassian.com/bitbucket';
-                    break;
-                case 'bitly':
-                    docs = 'https://dev.bitly.com/v4_documentation.html';
-                    break;
-                case 'box':
-                    docs = 'https://developer.box.com/reference/';
-                    break;
-                case 'dailymotion':
-                    docs = 'https://developers.dailymotion.com/api/';
-                    break;
-                case 'discord':
-                    docs = 'https://discordapp.com/developers/docs/topics/oauth2';
-                    break;
-                case 'disqus':
-                    docs = 'https://disqus.com/api/docs/auth/';
-                    break;
-                case 'dropbox':
-                    docs = 'https://www.dropbox.com/developers/documentation';
-                    break;
-                case 'etsy':
-                    docs = 'https://developers.etsy.com/';
-                    break;
-                case 'facebook':
-                    docs = 'https://developers.facebook.com/';
-                    break;
-                case 'github':
-                    docs = 'https://developer.github.com';
-                    break;
-                case 'gitlab':
-                    docs = 'https://docs.gitlab.com/ee/api/';
-                    component = GitLab;
-                    break;
-                case 'google':
-                    docs = 'https://support.google.com/googleapi/answer/6158849';
-                    component = Google;
-                    break;
-                case 'linkedin':
-                    docs = 'https://developer.linkedin.com/';
-                    break;
-                case 'microsoft':
-                    docs = 'https://developer.microsoft.com/en-us/';
-                    component = Microsoft;
-                    break;
-                case 'notion':
-                    docs = 'https://developers.notion.com/docs';
-                    break;
-                case 'oidc':
-                    docs = 'https://openid.net/connect/faq/';
-                    component = Oidc;
-                    break;
-                case 'okta':
-                    docs = 'https://developer.okta.com';
-                    component = Okta;
-                    break;
-                case 'paypal':
-                    docs = 'https://developer.paypal.com/docs/api/overview/';
-                    break;
-                case 'paypalsandbox':
-                    icon = 'paypal';
-                    docs = 'https://developer.paypal.com/docs/api/overview/';
-                    break;
-                case 'podio':
-                    docs = 'https://developers.podio.com/doc/oauth-authorization';
-                    break;
-                case 'salesforce':
-                    docs = 'https://developer.salesforce.com/docs/';
-                    break;
-                case 'slack':
-                    docs = 'https://api.slack.com/';
-                    break;
-                case 'spotify':
-                    docs =
-                        'https://developer.spotify.com/documentation/general/guides/authorization-guide/';
-                    break;
-                case 'stripe':
-                    docs = 'https://stripe.com/docs/api';
-                    break;
-                case 'tradeshift':
-                    docs = 'https://developers.tradeshift.com/docs/api';
-                    break;
-                case 'tradeshiftbox':
-                    icon = 'tradeshift';
-                    docs = 'https://developers.tradeshift.com/docs/api';
-                    break;
-                case 'twitch':
-                    docs = 'https://dev.twitch.tv/docs/auth';
-                    break;
-                case 'wordpress':
-                    docs = 'https://developer.wordpress.com/docs/oauth2/';
-                    break;
-                case 'yahoo':
-                    docs = 'https://developer.yahoo.com/oauth2/guide/flows_authcode/';
-                    break;
-                case 'yammer':
-                    docs = 'https://developer.yammer.com/docs/oauth-2';
-                    break;
-                case 'yandex':
-                    docs = 'https://tech.yandex.com/oauth/';
-                    break;
-                case 'zoho':
-                    docs = 'https://www.zoho.com/accounts/protocol/oauth/sign-in-using-zoho.html';
-                    break;
-                case 'zoom':
-                    docs = 'https://marketplace.zoom.us/docs/guides/auth/oauth/';
-                    break;
-                default:
-                    break;
-            }
-
-            return {
-                ...n,
-                icon,
-                docs,
-                component
-            };
-        }) ?? []
-    );
-};
-
-function createOAuthProviders() {
-    const { subscribe, set } = writable<Providers>({
-        providers: setProviders(null)
-    });
-    return {
-        subscribe,
-        set,
-        load: (project: Models.Project) => {
-            const providers = setProviders(project);
-
-            set({ providers });
-        }
-    };
-}
-
-export const OAuthProviders = createOAuthProviders();
diff --git a/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte
index 982422b3f..2d34598f5 100644
--- a/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/appleOAuth.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputSwitch, InputText, InputTextarea } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
-    export let provider: Provider;
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -18,11 +19,13 @@
     let teamID: string = null;
     let p8: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     const update = async () => {
@@ -44,7 +47,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
                 visit the docs.
             </a>
         </p>
diff --git a/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte
index 0607180a5..26ae7296e 100644
--- a/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/auth0OAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,14 +18,15 @@
     let clientSecret: string = null;
     let auth0Domain: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -45,7 +49,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte
index f7d6dcd37..e6b99f2b4 100644
--- a/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/authentikOAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,14 +18,15 @@
     let clientSecret: string = null;
     let authentikDomain: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, authentikDomain } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -45,7 +49,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte
index 95f80675e..dc1dd71a4 100644
--- a/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/gitlabOAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,14 +18,15 @@
     let clientSecret: string = null;
     let endpoint: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, endpoint } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -43,7 +47,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte
index defd59038..9ddfdb74f 100644
--- a/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/googleOAuth.svelte
@@ -2,24 +2,27 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
-
-    export let provider: Provider;
-    export let show = false;
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
+    export let provider: Models.AuthProvider;
+    export let show = false;
+
     let enabled: boolean = null;
     let appId: string = null;
     let secret: string = null;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         enabled ??= provider.enabled;
         appId ??= provider.appId;
         secret ??= provider.secret;
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     let error: string;
@@ -41,7 +44,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte
index 184fcd00c..0e38ff2e6 100644
--- a/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/mainOAuth.svelte
@@ -2,24 +2,27 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
-
-    export let provider: Provider;
-    export let show = false;
+    import type { Models } from '@appwrite.io/console';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
 
     const projectId = $page.params.project;
 
+    export let provider: Models.AuthProvider;
+    export let show = false;
+
     let enabled: boolean = null;
     let appId: string = null;
     let secret: string = null;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         enabled ??= provider.enabled;
         appId ??= provider.appId;
         secret ??= provider.secret;
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     let error: string;
@@ -41,7 +44,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte
index 7fd451af5..8df2259fc 100644
--- a/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/microsoftOAuth.svelte
@@ -2,12 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
-    export let provider: Provider;
+    const projectId = $page.params.project;
+
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -15,15 +18,15 @@
     let clientSecret: string = null;
     let tenantID: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
         enabled ??= provider.enabled;
         if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret));
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
-    const projectId = $page.params.project;
-
     const update = async () => {
         const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
 
@@ -44,7 +47,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer">
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
                 visit the docs.
             </a>
         </p>
diff --git a/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte
index f00f07e30..0c6565f19 100644
--- a/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/oidcOAuth.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
-    export let provider: Provider;
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -20,6 +21,7 @@
     let tokenEndpoint: string = null;
     let userinfoEndpoint: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     // secret is valid if clientSecret is set and either wellKnownEndpoint or all of the other endpoints are set
     $: isValidSecret =
@@ -38,6 +40,7 @@
                 userinfoEndpoint
             } = JSON.parse(provider.secret));
         }
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     const update = async () => {
@@ -67,7 +70,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte b/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte
index 6e23ca60c..3f73d9d13 100644
--- a/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/(providers)/oktaOAuth.svelte
@@ -2,14 +2,15 @@
     import { page } from '$app/stores';
     import { Alert, CopyInput, Modal } from '$lib/components';
     import { Button, FormList, InputPassword, InputSwitch, InputText } from '$lib/elements/forms';
-    import type { Provider } from '$lib/stores/oauth-providers';
+    import { oAuthProviders, type Provider } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import { updateOAuth } from '../updateOAuth';
+    import type { Models } from '@appwrite.io/console';
 
     const projectId = $page.params.project;
 
-    export let provider: Provider;
+    export let provider: Models.AuthProvider;
     export let show = false;
 
     let appId: string = null;
@@ -18,6 +19,7 @@
     let oktaDomain: string = null;
     let authorizationServerId: string = null;
     let error: string;
+    let oAuthProvider: Provider;
 
     onMount(() => {
         appId ??= provider.appId;
@@ -25,6 +27,7 @@
         if (provider.secret) {
             ({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret));
         }
+        oAuthProvider = oAuthProviders[provider.key];
     });
 
     const update = async () => {
@@ -49,7 +52,7 @@
         <p>
             To use {provider.name} authentication in your application, first fill in this form. For more
             info you can
-            <a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
+            <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
                 >visit the docs.</a>
         </p>
         <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
diff --git a/src/routes/console/project-[project]/auth/settings/+page.svelte b/src/routes/console/project-[project]/auth/settings/+page.svelte
index 610733117..50ec182c4 100644
--- a/src/routes/console/project-[project]/auth/settings/+page.svelte
+++ b/src/routes/console/project-[project]/auth/settings/+page.svelte
@@ -8,18 +8,15 @@
     import { app } from '$lib/stores/app';
     import { authMethods, type AuthMethod } from '$lib/stores/auth-methods';
     import { addNotification } from '$lib/stores/notifications';
-    import type { Provider } from '$lib/stores/oauth-providers';
-    import { OAuthProviders } from '$lib/stores/oauth-providers';
+    import { oAuthProviders } from '$lib/stores/oauth-providers';
     import { sdk } from '$lib/stores/sdk';
+    import type { Models } from '@appwrite.io/console';
     import { project } from '../../store';
 
     const projectId = $page.params.project;
     let showProvider = false;
 
-    $: {
-        authMethods.load($project);
-        OAuthProviders.load($project);
-    }
+    let selectedProvider: Models.AuthProvider | null = null;
 
     async function authUpdate(box: AuthMethod) {
         try {
@@ -42,10 +39,10 @@
         }
     }
 
-    let selectedProvider: Provider | null = null;
+    $: authMethods.load($project);
 </script>
 
-{#if $authMethods && $OAuthProviders}
+{#if $authMethods && $project}
     <Container>
         <CardGrid>
             <Heading tag="h2" size="7">Auth methods</Heading>
@@ -67,34 +64,37 @@
         <section class="common-section">
             <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
             <ul class="grid-box common-section">
-                {#each $OAuthProviders.providers
+                {#each $project.oAuthProviders
                     .filter((p) => p.name !== 'Mock')
                     .sort((a, b) => (a.enabled === b.enabled ? 0 : a.enabled ? -1 : 1)) as provider}
-                    <li class="grid-box-item">
-                        <button
-                            class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
-                            on:click={() => {
-                                selectedProvider = provider;
-                                showProvider = true;
-                                trackEvent(`click_select_provider`, {
-                                    provider: provider.key.toLowerCase()
-                                });
-                            }}>
-                            <div class="avatar">
-                                <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>
+                    {@const oAuthProvider = oAuthProviders[provider.key]}
+                    {#if oAuthProvider}
+                        <li class="grid-box-item">
+                            <button
+                                class="card u-flex u-flex-vertical u-cross-center u-width-full-line"
+                                on:click={() => {
+                                    selectedProvider = provider;
+                                    showProvider = true;
+                                    trackEvent(`click_select_provider`, {
+                                        provider: provider.key.toLowerCase()
+                                    });
+                                }}>
+                                <div class="avatar">
+                                    <img
+                                        height="20"
+                                        width="20"
+                                        src={`/icons/${$app.themeInUse}/color/${oAuthProvider.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>
+                    {/if}
                 {/each}
             </ul>
         </section>
@@ -102,8 +102,9 @@
 {/if}
 
 {#if selectedProvider && showProvider}
+    {@const oAuthProvider = oAuthProviders[selectedProvider.key]}
     <svelte:component
-        this={selectedProvider.component}
+        this={oAuthProvider.component}
         bind:provider={selectedProvider}
         bind:show={showProvider}
         on:close={() => {
diff --git a/src/routes/console/project-[project]/auth/updateOAuth.ts b/src/routes/console/project-[project]/auth/updateOAuth.ts
index dade0a767..5ada36747 100644
--- a/src/routes/console/project-[project]/auth/updateOAuth.ts
+++ b/src/routes/console/project-[project]/auth/updateOAuth.ts
@@ -3,13 +3,12 @@ import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
 import { Dependencies } from '$lib/constants';
 import { isValueOfStringEnum } from '$lib/helpers/types';
 import { addNotification } from '$lib/stores/notifications';
-import type { Provider } from '$lib/stores/oauth-providers';
 import { sdk } from '$lib/stores/sdk';
-import { OAuthProvider } from '@appwrite.io/console';
+import { OAuthProvider, type Models } from '@appwrite.io/console';
 
 type Args = {
     projectId: string;
-    provider: Provider;
+    provider: Models.AuthProvider;
     appId: string;
     secret: string;
     enabled: boolean;
diff --git a/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte b/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte
index 1d62ab264..841db0487 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/identities/table.svelte
@@ -20,8 +20,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import type { Column } from '$lib/helpers/types';
-    import { OAuthProviders, type Provider } from '$lib/stores/oauth-providers';
-    import { project } from '$routes/console/project-[project]/store';
+    import { oAuthProviders } from '$lib/stores/oauth-providers';
     import { app } from '$lib/stores/app';
 
     export let columns: Column[];
@@ -30,7 +29,6 @@
     let selectedIds: string[] = [];
     let showDelete = false;
     let deleting = false;
-    let providerLookup: Record<string, Provider> = {};
 
     async function handleDelete() {
         showDelete = false;
@@ -58,12 +56,6 @@
             showDelete = false;
         }
     }
-
-    $: OAuthProviders.load($project);
-    $: providerLookup = $OAuthProviders.providers.reduce((acc, provider) => {
-        acc[provider.key] = provider;
-        return acc;
-    }, {});
 </script>
 
 <TableScroll>
@@ -93,7 +85,7 @@
                                 </TableCell>
                             {/key}
                         {:else if column.id === 'provider'}
-                            {@const provider = providerLookup[identity[column.id]]}
+                            {@const provider = oAuthProviders[identity[column.id]]}
                             <TableCellText title={column.title} width={column.width}>
                                 <div class="u-inline-flex u-cross-center u-gap-8">
                                     <div class="avatar is-size-small">

From 06007255d187a0235d88c5e2b8f323147108c169 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 4 Mar 2024 17:34:12 -0800
Subject: [PATCH 3/7] feat(console): add account identities card

---
 src/lib/actions/analytics.ts                 |   1 +
 src/lib/constants.ts                         |   1 +
 src/routes/console/account/+layout.ts        |  11 +-
 src/routes/console/account/+page.svelte      |   2 +
 src/routes/console/account/identities.svelte | 101 +++++++++++++++++++
 src/routes/console/account/store.ts          |   4 +
 6 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/console/account/identities.svelte

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index 93119dbbb..744a4e351 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -157,6 +157,7 @@ export enum Submit {
     AccountAuthenticatorDelete = 'submit_account_authenticator_delete',
     AccountRecoveryCodesCreate = 'submit_account_recovery_codes_create',
     AccountRecoveryCodesUpdate = 'submit_account_recovery_codes_update',
+    AccountDeleteIdentity = 'submit_account_delete_identity',
     UserCreate = 'submit_user_create',
     UserDelete = 'submit_user_delete',
     UserUpdateEmail = 'submit_user_update_email',
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index fd4a80b82..9a5f63e7c 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -4,6 +4,7 @@ export const INTERVAL = 5 * 60000; // default interval to check for feedback
 
 export enum Dependencies {
     FACTORS = 'dependency:factors',
+    IDENTITIES = 'dependency:identities',
     CREDIT = 'dependency:credit',
     INVOICES = 'dependency:invoices',
     ADDRESS = 'dependency:address',
diff --git a/src/routes/console/account/+layout.ts b/src/routes/console/account/+layout.ts
index 2341ee3c0..1c993bedf 100644
--- a/src/routes/console/account/+layout.ts
+++ b/src/routes/console/account/+layout.ts
@@ -6,9 +6,18 @@ import { Dependencies } from '$lib/constants';
 
 export const load: LayoutLoad = async ({ depends }) => {
     depends(Dependencies.FACTORS);
+    depends(Dependencies.IDENTITIES);
+
+    const promises = [
+        sdk.forConsole.account.listMfaFactors(),
+        sdk.forConsole.account.listIdentities()
+    ];
+
+    const [factors, identities] = await Promise.all(promises);
 
     return {
-        factors: await sdk.forConsole.account.listMfaFactors(),
+        factors,
+        identities,
         header: Header,
         breadcrumbs: Breadcrumbs
     };
diff --git a/src/routes/console/account/+page.svelte b/src/routes/console/account/+page.svelte
index 1006770d8..b3cbe4f57 100644
--- a/src/routes/console/account/+page.svelte
+++ b/src/routes/console/account/+page.svelte
@@ -5,12 +5,14 @@
     import UpdateEmail from './updateEmail.svelte';
     import DeleteAccount from './deleteAccount.svelte';
     import UpdateMfa from './updateMfa.svelte';
+    import Identities from './identities.svelte';
 </script>
 
 <Container>
     <UpdateName />
     <UpdateEmail />
     <UpdatePassword />
+    <Identities />
     <UpdateMfa />
     <DeleteAccount />
 </Container>
diff --git a/src/routes/console/account/identities.svelte b/src/routes/console/account/identities.svelte
new file mode 100644
index 000000000..44ad5b772
--- /dev/null
+++ b/src/routes/console/account/identities.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid, Heading } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import {
+        Table,
+        TableBody,
+        TableCell,
+        TableCellHead,
+        TableCellText,
+        TableHeader,
+        TableRow
+    } from '$lib/elements/table';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { identities } from './store';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { oAuthProviders } from '$lib/stores/oauth-providers';
+    import EmptySearch from '$lib/components/emptySearch.svelte';
+
+    async function deleteIdentity(id: string) {
+        try {
+            await sdk.forConsole.account.deleteIdentity(id);
+            addNotification({
+                message: 'Identity has been deleted',
+                type: 'success'
+            });
+            await invalidate(Dependencies.IDENTITIES);
+            trackEvent(Submit.AccountDeleteIdentity);
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.AccountDeleteIdentity);
+        }
+    }
+</script>
+
+<CardGrid>
+    <Heading tag="h6" size="7">Identities</Heading>
+    <p class="text">
+        Identities are your connected GitHub accounts. You can sign in using these accounts.
+    </p>
+
+    <svelte:fragment slot="aside">
+        {#if $identities.length === 0}
+            <EmptySearch hidePagination>
+                <div class="u-text-center">
+                    No identities are currently available. Once you sign in via GitHub, you'll see
+                    it here.
+                </div>
+            </EmptySearch>
+        {:else}
+            <Table noMargin noStyles>
+                <TableHeader>
+                    <TableCellHead width={100}>Provider</TableCellHead>
+                    <TableCellHead>Email</TableCellHead>
+                    <TableCellHead>Created At</TableCellHead>
+                    <TableCellHead>Expiry Date</TableCellHead>
+                    <TableCellHead width={40} />
+                </TableHeader>
+                <TableBody>
+                    {#each $identities as identity (identity.$id)}
+                        {@const provider = oAuthProviders[identity.provider]}
+                        <TableRow>
+                            <TableCell title="Provider">
+                                <div class="u-flex u-gap-8 u-cross-center">
+                                    <div class="avatar is-size-small">
+                                        <span
+                                            class={`icon-${provider.icon}`}
+                                            style="font-size: var(--icon-size-medium)!important" />
+                                    </div>
+                                    {provider.name}
+                                </div>
+                            </TableCell>
+                            <TableCellText title="Email">
+                                {identity.providerEmail}
+                            </TableCellText>
+                            <TableCellText title="Created at">
+                                {toLocaleDateTime(identity.$createdAt)}
+                            </TableCellText>
+                            <TableCellText title="Expiry date">
+                                {toLocaleDateTime(identity.providerAccessTokenExpiry)}
+                            </TableCellText>
+                            <TableCell title="Remove">
+                                <Button
+                                    text
+                                    class="is-only-icon"
+                                    on:click={() => deleteIdentity(identity.$id)}
+                                    ><span class="icon-trash" aria-hidden="true" /></Button>
+                            </TableCell>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </Table>
+        {/if}
+    </svelte:fragment>
+</CardGrid>
diff --git a/src/routes/console/account/store.ts b/src/routes/console/account/store.ts
index e5638c575..362054d6f 100644
--- a/src/routes/console/account/store.ts
+++ b/src/routes/console/account/store.ts
@@ -6,3 +6,7 @@ export const factors = derived(
     page,
     ($page) => $page.data.factors as Models.MfaFactors & { recoveryCode: boolean }
 );
+export const identities = derived(
+    page,
+    ($page) => $page.data.identities.identities as Models.Identity[]
+);

From a5b98b59a35ef325b5dff0d674e6df23eb5a4583 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 3 May 2024 15:59:23 +0530
Subject: [PATCH 4/7] fix: show select runtime placeholder.

---
 src/lib/wizards/functions/cover.svelte                      | 4 ----
 .../wizards/functions/steps/templateConfiguration.svelte    | 6 +-----
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index bcc19f123..08a18f119 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -7,10 +7,6 @@
             variables[variable.name] = variable.value ?? '';
         });
 
-        if (!runtime) {
-            runtime = template.runtimes[0].name;
-        }
-
         templateStore.set(template);
         templateConfig.set({
             $id: null,
diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index 030380f73..536d32b94 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -25,10 +25,6 @@
                 return allowedRuntimes.includes(runtime.value);
             });
 
-        if (options.length == 1) {
-            $templateConfig.runtime = options[0].value;
-        }
-
         return options;
     }
 </script>
@@ -61,7 +57,7 @@
                 id="runtime"
                 placeholder="Select runtime"
                 required
-                disabled={options.length <= 1}
+                disabled={options.length < 1}
                 {options}
                 bind:value={$templateConfig.runtime} />
         {/await}

From 2d165d3531988ae98ece500ee0b4e9dd115407dc Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Sun, 12 May 2024 06:41:06 +0200
Subject: [PATCH 5/7] Update old colors variables to the new ones

---
 src/lib/components/permissions/row.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index ba87e0e38..e03c56efd 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -118,8 +118,8 @@
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss" global>
     .tippy-user .tippy-box {
-        --p-drop-bg-color: var(--color-neutral-500);
-        --p-drop-border-color: var(--color-neutral-200);
+        --p-drop-bg-color: var(--color-neutral-110);
+        --p-drop-border-color: var(--color-neutral-85);
 
         body.theme-light & {
             --p-drop-bg-color: var(--color-neutral-0);

From d4cd8fefc9f01feee89263d3a5eef521aca597a4 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Wed, 15 May 2024 09:24:45 +0200
Subject: [PATCH 6/7] Update colors

---
 src/lib/components/permissions/row.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/permissions/row.svelte b/src/lib/components/permissions/row.svelte
index e03c56efd..b8cb07ebd 100644
--- a/src/lib/components/permissions/row.svelte
+++ b/src/lib/components/permissions/row.svelte
@@ -118,7 +118,7 @@
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss" global>
     .tippy-user .tippy-box {
-        --p-drop-bg-color: var(--color-neutral-110);
+        --p-drop-bg-color: var(--color-neutral-105);
         --p-drop-border-color: var(--color-neutral-85);
 
         body.theme-light & {

From 7cb62529f455180f2c48d3147fc28dedfdfb295a Mon Sep 17 00:00:00 2001
From: Steven Nguyen <1477010+stnguyen90@users.noreply.github.com>
Date: Wed, 15 May 2024 16:29:34 +0000
Subject: [PATCH 7/7] chore(dependencies): bump pink and pink-icons to 0.19.0

---
 package-lock.json | 18 +++++++++---------
 package.json      |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4ba09abc4..af5616a82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,8 +7,8 @@
             "name": "@appwrite/console",
             "dependencies": {
                 "@appwrite.io/console": "^0.6.1",
-                "@appwrite.io/pink": "0.11.0",
-                "@appwrite.io/pink-icons": "0.11.0",
+                "@appwrite.io/pink": "^0.19.0",
+                "@appwrite.io/pink-icons": "^0.19.0",
                 "@popperjs/core": "^2.11.8",
                 "@sentry/svelte": "^7.66.0",
                 "@sentry/tracing": "^7.66.0",
@@ -166,19 +166,19 @@
             }
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.11.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.11.0.tgz",
-            "integrity": "sha512-0/ztJxeV6Cy1FnXy2ClLELzDnR4eRtGAhQ24napCg0VwOFevSIc0S7jcRrWVyA6WRuwex4eGiEn2JeYMTq70Xg==",
+            "version": "0.19.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.19.0.tgz",
+            "integrity": "sha512-b5yJCtkqRfikgqpi6rxN0je7FkLdvtSPQ3XNW49yLN7euHHuMr74qj8XvWrvv41ilikanvvUWUD2C8PLvmOy8Q==",
             "dependencies": {
-                "@appwrite.io/pink-icons": "0.11.0",
+                "@appwrite.io/pink-icons": "0.19.0",
                 "normalize.css": "^8.0.1",
                 "the-new-css-reset": "^1.11.2"
             }
         },
         "node_modules/@appwrite.io/pink-icons": {
-            "version": "0.11.0",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.11.0.tgz",
-            "integrity": "sha512-FOvP87m4S17QRQPrLzsSlwrbIeJNJi5RliGUQYONIhmI0PiwE4Xm5LXFE+NqFYsR56w2X3jYdJIHdIdZlH3XjA=="
+            "version": "0.19.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.19.0.tgz",
+            "integrity": "sha512-qXzIQrY9OVFUJ7/qCf5oRJqJEJ+ECQpzlU0JiLycbPnu/nbq+pbaFDPma+7cTHsaD8znRC8X+a7P22JNrsN0rg=="
         },
         "node_modules/@babel/code-frame": {
             "version": "7.24.2",
diff --git a/package.json b/package.json
index d3cd60e05..c615a8592 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@appwrite.io/console": "^0.6.1",
-        "@appwrite.io/pink": "0.11.0",
-        "@appwrite.io/pink-icons": "0.11.0",
+        "@appwrite.io/pink": "^0.19.0",
+        "@appwrite.io/pink-icons": "^0.19.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/svelte": "^7.66.0",
         "@sentry/tracing": "^7.66.0",