From b3ca78f4ae0a527609e9e803f378d4d26a4cb9e1 Mon Sep 17 00:00:00 2001
From: "Vincent (Wen Yu) Ge" <vincent@appwrite.io>
Date: Tue, 23 May 2023 21:38:18 +0000
Subject: [PATCH 1/2] Add custom copy for google oauth provider

---
 src/lib/stores/oauth-providers.ts             |  2 +
 .../project-[project]/auth/googleOAuth.svelte | 82 +++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/routes/console/project-[project]/auth/googleOAuth.svelte

diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 8047d6bdb3..40bcff26ab 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -7,6 +7,7 @@ import Okta from '../../routes/console/project-[project]/auth/oktaOAuth.svelte';
 import Auth0 from '../../routes/console/project-[project]/auth/auth0OAuth.svelte';
 import Authentik from '../../routes/console/project-[project]/auth/authentikOAuth.svelte';
 import GitLab from '../../routes/console/project-[project]/auth/gitlabOAuth.svelte';
+import Google from '../../routes/console/project-[project]/auth/googleOAuth.svelte';
 import Main from '../../routes/console/project-[project]/auth/mainOAuth.svelte';
 
 export type Provider = Models.Provider & {
@@ -81,6 +82,7 @@ const setProviders = (project: Models.Project): Provider[] => {
                     break;
                 case 'google':
                     docs = 'https://support.google.com/googleapi/answer/6158849';
+                    component = Google;
                     break;
                 case 'linkedin':
                     docs = 'https://developer.linkedin.com/';
diff --git a/src/routes/console/project-[project]/auth/googleOAuth.svelte b/src/routes/console/project-[project]/auth/googleOAuth.svelte
new file mode 100644
index 0000000000..1b4d3c9860
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/googleOAuth.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    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;
+
+    const projectId = $page.params.project;
+
+    let enabled: boolean = null;
+    let appId: string = null;
+    let secret: string = null;
+
+    onMount(() => {
+        enabled ??= provider.enabled;
+        appId ??= provider.appId;
+        secret ??= provider.secret;
+    });
+
+    let error: string;
+
+    const update = async () => {
+        const result = await updateOAuth({ projectId, provider, secret, appId, enabled });
+
+        if (result.status === 'error') {
+            error = result.message;
+        } else {
+            provider = null;
+        }
+    };
+</script>
+
+<Modal {error} size="big" show onSubmit={update} on:close>
+    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <FormList>
+        <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"
+                >visit the docs.</a>
+        </p>
+        <InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
+        <InputText
+            id="appID"
+            label="App ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={appId} />
+        <InputPassword
+            id="secret"
+            label="App Secret"
+            placeholder="Enter App Secret"
+            minlength={0}
+            showPasswordButton
+            bind:value={secret} />
+        <Alert type="info">
+            To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration
+            and select web application as the application type.
+        </Alert>
+        <div>
+            <p>URI</p>
+            <CopyInput
+                value={`${
+                    sdk.forConsole.client.config.endpoint
+                }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+        </div>
+    </FormList>
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (provider = null)}>Cancel</Button>
+        <Button
+            disabled={!appId ||
+                !secret ||
+                (appId === provider.appId &&
+                    secret === provider.secret &&
+                    enabled === provider.enabled)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>

From 35c33066af971d78b515b47aae6f44e631d613c1 Mon Sep 17 00:00:00 2001
From: "Vincent (Wen Yu) Ge" <vincent@appwrite.io>
Date: Fri, 2 Jun 2023 17:53:45 +0000
Subject: [PATCH 2/2] update instruction ordering

---
 src/routes/console/project-[project]/auth/googleOAuth.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/auth/googleOAuth.svelte b/src/routes/console/project-[project]/auth/googleOAuth.svelte
index 1b4d3c9860..c8fd0390bc 100644
--- a/src/routes/console/project-[project]/auth/googleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/googleOAuth.svelte
@@ -58,8 +58,8 @@
             showPasswordButton
             bind:value={secret} />
         <Alert type="info">
-            To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration
-            and select web application as the application type.
+            To complete the setup, create an OAuth2 client ID with "Web application" as the
+            application type, then add this redirect URI to your {provider.name} configuration.
         </Alert>
         <div>
             <p>URI</p>