Add custom copy for google oauth provider

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/';

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