From 9744678f97c22716e342e545d839e39907501f7a Mon Sep 17 00:00:00 2001
From: Mabenan <doener123@googlemail.com>
Date: Thu, 24 Nov 2022 09:48:06 +0100
Subject: [PATCH] feat-4653-keycloak-oauth

---
 src/lib/stores/oauth-providers.ts             |   5 +
 .../auth/keycloakOAuth.svelte                 | 115 ++++++++++++++++++
 static/icons/dark/color/keycloak.svg          |   4 +
 static/icons/dark/grayscale/keycloak.svg      |   4 +
 static/icons/light/color/keycloak.svg         |   4 +
 static/icons/light/grayscale/keycloak.svg     |   4 +
 6 files changed, 136 insertions(+)
 create mode 100644 src/routes/console/project-[project]/auth/keycloakOAuth.svelte
 create mode 100644 static/icons/dark/color/keycloak.svg
 create mode 100644 static/icons/dark/grayscale/keycloak.svg
 create mode 100644 static/icons/light/color/keycloak.svg
 create mode 100644 static/icons/light/grayscale/keycloak.svg

diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index 4ed398e673..c5b2a29bf4 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 Keycloak from '../../routes/console/project-[project]/auth/keycloakOAuth.svelte';
 import Main from '../../routes/console/project-[project]/auth/mainOAuth.svelte';
 
 export type Provider = Models.Provider & {
@@ -82,6 +83,10 @@ const setProviders = (project: Models.Project): Provider[] => {
                 case 'google':
                     docs = 'https://support.google.com/googleapi/answer/6158849';
                     break;
+                case 'keycloak':
+                    docs = 'https://www.keycloak.org/guides#getting-started';
+                    component = Keycloak;
+                    break;
                 case 'linkedin':
                     docs = 'https://developer.linkedin.com/';
                     break;
diff --git a/src/routes/console/project-[project]/auth/keycloakOAuth.svelte b/src/routes/console/project-[project]/auth/keycloakOAuth.svelte
new file mode 100644
index 0000000000..aceba82486
--- /dev/null
+++ b/src/routes/console/project-[project]/auth/keycloakOAuth.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Modal, CopyInput, Alert } from '$lib/components';
+    import { Button, InputPassword, InputText, InputSwitch, FormList } from '$lib/elements/forms';
+    import { sdkForConsole } from '$lib/stores/sdk';
+    import type { Provider } from '$lib/stores/oauth-providers';
+    import { addNotification } from '$lib/stores/notifications';
+    import { onMount } from 'svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { trackEvent } from '$lib/actions/analytics';
+
+    export let provider: Provider;
+
+    let appId: string = null;
+    let enabled: boolean = null;
+    let clientSecret: string = null;
+    let keycloakEndpoint: string = null;
+    let keycloakRealm: string = null;
+    let error: string;
+
+    onMount(() => {
+        appId ??= provider.appId;
+        enabled ??= provider.enabled;
+        if (provider.secret)
+            ({ clientSecret, keycloakEndpoint, keycloakRealm } = JSON.parse(provider.secret));
+    });
+
+    const projectId = $page.params.project;
+    const update = async () => {
+        try {
+            await sdkForConsole.projects.updateOAuth2(
+                projectId,
+                provider.name.toLowerCase(),
+                appId,
+                secret,
+                enabled
+            );
+            addNotification({
+                type: 'success',
+                message: `${provider.name} authentication has been ${
+                    provider.enabled ? 'enabled' : 'disabled'
+                }`
+            });
+            trackEvent('submit_provider_update', {
+                provider,
+                enabled
+            });
+            provider = null;
+            invalidate(Dependencies.PROJECT);
+        } catch ({ message }) {
+            error = message;
+        }
+    };
+
+    $: secret =
+        clientSecret && keycloakEndpoint && keycloakRealm
+            ? JSON.stringify({ clientSecret, keycloakEndpoint, keycloakRealm })
+            : provider.secret;
+</script>
+
+<Modal {error} size="big" show on:submit={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="clientID"
+            label="Client ID"
+            autofocus={true}
+            placeholder="Enter ID"
+            bind:value={appId} />
+        <InputPassword
+            id="secret"
+            label="Client Secret"
+            placeholder="Enter Client Secret"
+            minlength={0}
+            showPasswordButton
+            bind:value={clientSecret} />
+        <InputText
+            id="domain"
+            label="Keycloak Endpoint"
+            placeholder="Your Keycloak endpoint"
+            bind:value={keycloakEndpoint} />
+        <InputText
+            id="domain"
+            label="Keycloak Realm"
+            placeholder="Your Keycloak realm"
+            bind:value={keycloakRealm} />
+        <Alert type="info">
+            To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
+        </Alert>
+        <div>
+            <p>URI</p>
+            <CopyInput
+                value={`${
+                    sdkForConsole.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={(secret === provider.secret &&
+                enabled === provider.enabled &&
+                appId === provider.appId) ||
+                !(appId && clientSecret && keycloakEndpoint && keycloakRealm)}
+            submit>Update</Button>
+    </svelte:fragment>
+</Modal>
diff --git a/static/icons/dark/color/keycloak.svg b/static/icons/dark/color/keycloak.svg
new file mode 100644
index 0000000000..ed9fa706d6
--- /dev/null
+++ b/static/icons/dark/color/keycloak.svg
@@ -0,0 +1,4 @@
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <circle cx="512" cy="512" r="512" style="fill:#008aaa"/>
+   <path d="M786.2 395.5h-80.6c-1.5 0-3-.8-3.7-2.1l-64.7-112.2c-.8-1.3-2.2-2.1-3.8-2.1h-264c-1.5 0-3 .8-3.7 2.1l-67.3 116.4-64.8 112.2c-.7 1.3-.7 2.9 0 4.3l64.8 112.2 67.2 116.5c.7 1.3 2.2 2.2 3.7 2.1h264.1c1.5 0 3-.8 3.8-2.1L702 630.6c.7-1.3 2.2-2.2 3.7-2.1h80.6c2.7 0 4.8-2.2 4.8-4.8V400.4c-.1-2.7-2.3-4.9-4.9-4.9zM477.5 630.6l-20.3 35c-.3.5-.8 1-1.3 1.3-.6.3-1.2.5-1.9.5h-40.3c-1.4 0-2.7-.7-3.3-2l-60.1-104.3-5.9-10.3-21.6-36.9c-.3-.5-.5-1.1-.4-1.8 0-.6.2-1.3.5-1.8l21.7-37.6 65.9-114c.7-1.2 2-2 3.3-2H454c.7 0 1.4.2 2.1.5.5.3 1 .7 1.3 1.3l20.3 35.2c.6 1.2.5 2.7-.2 3.8l-65.1 112.8c-.3.5-.4 1.1-.4 1.6 0 .6.2 1.1.4 1.6l65.1 112.7c.9 1.5.8 3.1 0 4.4zm202.1-116.7L658 550.8l-5.9 10.3L592 665.4c-.7 1.2-1.9 2-3.3 2h-40.3c-.7 0-1.3-.2-1.9-.5-.5-.3-1-.7-1.3-1.3l-20.3-35c-.9-1.3-.9-2.9-.1-4.2l65.1-112.7c.3-.5.4-1.1.4-1.6 0-.6-.2-1.1-.4-1.6l-65.1-112.8c-.7-1.2-.8-2.6-.2-3.8l20.3-35.2c.3-.5.8-1 1.3-1.3.6-.4 1.3-.5 2.1-.5h40.4c1.4 0 2.7.7 3.3 2l65.9 114 21.7 37.6c.3.6.5 1.2.5 1.8 0 .4-.2 1-.5 1.6z" style="fill:#fff"/>
+</svg>
diff --git a/static/icons/dark/grayscale/keycloak.svg b/static/icons/dark/grayscale/keycloak.svg
new file mode 100644
index 0000000000..670a0765c4
--- /dev/null
+++ b/static/icons/dark/grayscale/keycloak.svg
@@ -0,0 +1,4 @@
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <circle cx="512" cy="512" r="512" style="fill:#aaaaaa"/>
+   <path d="M786.2 395.5h-80.6c-1.5 0-3-.8-3.7-2.1l-64.7-112.2c-.8-1.3-2.2-2.1-3.8-2.1h-264c-1.5 0-3 .8-3.7 2.1l-67.3 116.4-64.8 112.2c-.7 1.3-.7 2.9 0 4.3l64.8 112.2 67.2 116.5c.7 1.3 2.2 2.2 3.7 2.1h264.1c1.5 0 3-.8 3.8-2.1L702 630.6c.7-1.3 2.2-2.2 3.7-2.1h80.6c2.7 0 4.8-2.2 4.8-4.8V400.4c-.1-2.7-2.3-4.9-4.9-4.9zM477.5 630.6l-20.3 35c-.3.5-.8 1-1.3 1.3-.6.3-1.2.5-1.9.5h-40.3c-1.4 0-2.7-.7-3.3-2l-60.1-104.3-5.9-10.3-21.6-36.9c-.3-.5-.5-1.1-.4-1.8 0-.6.2-1.3.5-1.8l21.7-37.6 65.9-114c.7-1.2 2-2 3.3-2H454c.7 0 1.4.2 2.1.5.5.3 1 .7 1.3 1.3l20.3 35.2c.6 1.2.5 2.7-.2 3.8l-65.1 112.8c-.3.5-.4 1.1-.4 1.6 0 .6.2 1.1.4 1.6l65.1 112.7c.9 1.5.8 3.1 0 4.4zm202.1-116.7L658 550.8l-5.9 10.3L592 665.4c-.7 1.2-1.9 2-3.3 2h-40.3c-.7 0-1.3-.2-1.9-.5-.5-.3-1-.7-1.3-1.3l-20.3-35c-.9-1.3-.9-2.9-.1-4.2l65.1-112.7c.3-.5.4-1.1.4-1.6 0-.6-.2-1.1-.4-1.6l-65.1-112.8c-.7-1.2-.8-2.6-.2-3.8l20.3-35.2c.3-.5.8-1 1.3-1.3.6-.4 1.3-.5 2.1-.5h40.4c1.4 0 2.7.7 3.3 2l65.9 114 21.7 37.6c.3.6.5 1.2.5 1.8 0 .4-.2 1-.5 1.6z" style="fill:#fff"/>
+</svg>
diff --git a/static/icons/light/color/keycloak.svg b/static/icons/light/color/keycloak.svg
new file mode 100644
index 0000000000..ed9fa706d6
--- /dev/null
+++ b/static/icons/light/color/keycloak.svg
@@ -0,0 +1,4 @@
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <circle cx="512" cy="512" r="512" style="fill:#008aaa"/>
+   <path d="M786.2 395.5h-80.6c-1.5 0-3-.8-3.7-2.1l-64.7-112.2c-.8-1.3-2.2-2.1-3.8-2.1h-264c-1.5 0-3 .8-3.7 2.1l-67.3 116.4-64.8 112.2c-.7 1.3-.7 2.9 0 4.3l64.8 112.2 67.2 116.5c.7 1.3 2.2 2.2 3.7 2.1h264.1c1.5 0 3-.8 3.8-2.1L702 630.6c.7-1.3 2.2-2.2 3.7-2.1h80.6c2.7 0 4.8-2.2 4.8-4.8V400.4c-.1-2.7-2.3-4.9-4.9-4.9zM477.5 630.6l-20.3 35c-.3.5-.8 1-1.3 1.3-.6.3-1.2.5-1.9.5h-40.3c-1.4 0-2.7-.7-3.3-2l-60.1-104.3-5.9-10.3-21.6-36.9c-.3-.5-.5-1.1-.4-1.8 0-.6.2-1.3.5-1.8l21.7-37.6 65.9-114c.7-1.2 2-2 3.3-2H454c.7 0 1.4.2 2.1.5.5.3 1 .7 1.3 1.3l20.3 35.2c.6 1.2.5 2.7-.2 3.8l-65.1 112.8c-.3.5-.4 1.1-.4 1.6 0 .6.2 1.1.4 1.6l65.1 112.7c.9 1.5.8 3.1 0 4.4zm202.1-116.7L658 550.8l-5.9 10.3L592 665.4c-.7 1.2-1.9 2-3.3 2h-40.3c-.7 0-1.3-.2-1.9-.5-.5-.3-1-.7-1.3-1.3l-20.3-35c-.9-1.3-.9-2.9-.1-4.2l65.1-112.7c.3-.5.4-1.1.4-1.6 0-.6-.2-1.1-.4-1.6l-65.1-112.8c-.7-1.2-.8-2.6-.2-3.8l20.3-35.2c.3-.5.8-1 1.3-1.3.6-.4 1.3-.5 2.1-.5h40.4c1.4 0 2.7.7 3.3 2l65.9 114 21.7 37.6c.3.6.5 1.2.5 1.8 0 .4-.2 1-.5 1.6z" style="fill:#fff"/>
+</svg>
diff --git a/static/icons/light/grayscale/keycloak.svg b/static/icons/light/grayscale/keycloak.svg
new file mode 100644
index 0000000000..670a0765c4
--- /dev/null
+++ b/static/icons/light/grayscale/keycloak.svg
@@ -0,0 +1,4 @@
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <circle cx="512" cy="512" r="512" style="fill:#aaaaaa"/>
+   <path d="M786.2 395.5h-80.6c-1.5 0-3-.8-3.7-2.1l-64.7-112.2c-.8-1.3-2.2-2.1-3.8-2.1h-264c-1.5 0-3 .8-3.7 2.1l-67.3 116.4-64.8 112.2c-.7 1.3-.7 2.9 0 4.3l64.8 112.2 67.2 116.5c.7 1.3 2.2 2.2 3.7 2.1h264.1c1.5 0 3-.8 3.8-2.1L702 630.6c.7-1.3 2.2-2.2 3.7-2.1h80.6c2.7 0 4.8-2.2 4.8-4.8V400.4c-.1-2.7-2.3-4.9-4.9-4.9zM477.5 630.6l-20.3 35c-.3.5-.8 1-1.3 1.3-.6.3-1.2.5-1.9.5h-40.3c-1.4 0-2.7-.7-3.3-2l-60.1-104.3-5.9-10.3-21.6-36.9c-.3-.5-.5-1.1-.4-1.8 0-.6.2-1.3.5-1.8l21.7-37.6 65.9-114c.7-1.2 2-2 3.3-2H454c.7 0 1.4.2 2.1.5.5.3 1 .7 1.3 1.3l20.3 35.2c.6 1.2.5 2.7-.2 3.8l-65.1 112.8c-.3.5-.4 1.1-.4 1.6 0 .6.2 1.1.4 1.6l65.1 112.7c.9 1.5.8 3.1 0 4.4zm202.1-116.7L658 550.8l-5.9 10.3L592 665.4c-.7 1.2-1.9 2-3.3 2h-40.3c-.7 0-1.3-.2-1.9-.5-.5-.3-1-.7-1.3-1.3l-20.3-35c-.9-1.3-.9-2.9-.1-4.2l65.1-112.7c.3-.5.4-1.1.4-1.6 0-.6-.2-1.1-.4-1.6l-65.1-112.8c-.7-1.2-.8-2.6-.2-3.8l20.3-35.2c.3-.5.8-1 1.3-1.3.6-.4 1.3-.5 2.1-.5h40.4c1.4 0 2.7.7 3.3 2l65.9 114 21.7 37.6c.3.6.5 1.2.5 1.8 0 .4-.2 1-.5 1.6z" style="fill:#fff"/>
+</svg>