From 893dcf9775e41765537f3607d77883a450a39ca8 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 20 Jul 2023 16:17:49 -0700
Subject: [PATCH] Format OAuth2 provider name better

Show provider name in the Console and use the provider key for
everything else.
---
 src/lib/stores/oauth-providers.ts                      |  8 +++++---
 .../console/project-[project]/auth/appleOAuth.svelte   |  4 +---
 .../console/project-[project]/auth/auth0OAuth.svelte   |  4 +---
 .../project-[project]/auth/authentikOAuth.svelte       |  4 +---
 .../console/project-[project]/auth/gitlabOAuth.svelte  |  4 +---
 .../console/project-[project]/auth/mainOAuth.svelte    |  4 +---
 .../project-[project]/auth/microsoftOAuth.svelte       |  4 +---
 .../console/project-[project]/auth/oidcOAuth.svelte    | 10 ++++------
 .../console/project-[project]/auth/oktaOAuth.svelte    |  4 +---
 .../project-[project]/auth/settings/+page.svelte       |  2 +-
 .../console/project-[project]/auth/updateOAuth.ts      |  2 +-
 11 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/src/lib/stores/oauth-providers.ts b/src/lib/stores/oauth-providers.ts
index bea99ee554..acc423d2cf 100644
--- a/src/lib/stores/oauth-providers.ts
+++ b/src/lib/stores/oauth-providers.ts
@@ -11,6 +11,7 @@ import Oidc from '../../routes/console/project-[project]/auth/oidcOAuth.svelte';
 import Okta from '../../routes/console/project-[project]/auth/oktaOAuth.svelte';
 
 export type Provider = Models.Provider & {
+    key: string;
     icon: string;
     docs?: string;
     component?: typeof SvelteComponent;
@@ -23,11 +24,12 @@ export type Providers = {
 const setProviders = (project: Models.Project): Provider[] => {
     return (
         project?.providers.map((n) => {
+            let p = n as Models.Provider & { key: string };
             let docs: Provider['docs'];
-            let icon: Provider['icon'] = n.name.toLowerCase();
+            let icon: Provider['icon'] = p.key.toLowerCase();
             let component: Provider['component'] = Main;
 
-            switch (n.name.toLowerCase()) {
+            switch (p.key.toLowerCase()) {
                 case 'amazon':
                     docs = 'https://developer.amazon.com/apps-and-games/services-and-apis';
                     break;
@@ -154,7 +156,7 @@ const setProviders = (project: Models.Project): Provider[] => {
             }
 
             return {
-                ...n,
+                ...p,
                 icon,
                 docs,
                 component
diff --git a/src/routes/console/project-[project]/auth/appleOAuth.svelte b/src/routes/console/project-[project]/auth/appleOAuth.svelte
index 88b48040cc..850ae6721b 100644
--- a/src/routes/console/project-[project]/auth/appleOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/appleOAuth.svelte
@@ -63,9 +63,7 @@
         <div>
             <p>URI</p>
             <CopyInput
-                value={`${
-                    sdk.forConsole.client.config.endpoint
-                }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+                value={`${sdk.forConsole.client.config.endpoint}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
         </div>
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/auth/auth0OAuth.svelte b/src/routes/console/project-[project]/auth/auth0OAuth.svelte
index b8e0fa35cf..52e46a6806 100644
--- a/src/routes/console/project-[project]/auth/auth0OAuth.svelte
+++ b/src/routes/console/project-[project]/auth/auth0OAuth.svelte
@@ -72,9 +72,7 @@
         <div>
             <p>URI</p>
             <CopyInput
-                value={`${
-                    sdk.forConsole.client.config.endpoint
-                }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+                value={`${sdk.forConsole.client.config.endpoint}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
         </div>
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/auth/authentikOAuth.svelte b/src/routes/console/project-[project]/auth/authentikOAuth.svelte
index 350fac230b..e204be4e06 100644
--- a/src/routes/console/project-[project]/auth/authentikOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/authentikOAuth.svelte
@@ -72,9 +72,7 @@
         <div>
             <p>URI</p>
             <CopyInput
-                value={`${
-                    sdk.forConsole.client.config.endpoint
-                }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+                value={`${sdk.forConsole.client.config.endpoint}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
         </div>
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/auth/gitlabOAuth.svelte b/src/routes/console/project-[project]/auth/gitlabOAuth.svelte
index 2b5aea8a64..da922ccde1 100644
--- a/src/routes/console/project-[project]/auth/gitlabOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/gitlabOAuth.svelte
@@ -70,9 +70,7 @@
         <div>
             <p>URI</p>
             <CopyInput
-                value={`${
-                    sdk.forConsole.client.config.endpoint
-                }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+                value={`${sdk.forConsole.client.config.endpoint}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
         </div>
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/auth/mainOAuth.svelte b/src/routes/console/project-[project]/auth/mainOAuth.svelte
index 684e8ff81d..36d0aa89f2 100644
--- a/src/routes/console/project-[project]/auth/mainOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/mainOAuth.svelte
@@ -63,9 +63,7 @@
         <div>
             <p>URI</p>
             <CopyInput
-                value={`${
-                    sdk.forConsole.client.config.endpoint
-                }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+                value={`${sdk.forConsole.client.config.endpoint}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
         </div>
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/auth/microsoftOAuth.svelte b/src/routes/console/project-[project]/auth/microsoftOAuth.svelte
index e404fec845..10925962af 100644
--- a/src/routes/console/project-[project]/auth/microsoftOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/microsoftOAuth.svelte
@@ -72,9 +72,7 @@
         <div>
             <p>URI</p>
             <CopyInput
-                value={`${
-                    sdk.forConsole.client.config.endpoint
-                }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+                value={`${sdk.forConsole.client.config.endpoint}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
         </div>
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/auth/oidcOAuth.svelte b/src/routes/console/project-[project]/auth/oidcOAuth.svelte
index 8c3db7df6d..6fade4f7f5 100644
--- a/src/routes/console/project-[project]/auth/oidcOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/oidcOAuth.svelte
@@ -61,11 +61,11 @@
 </script>
 
 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name.toUpperCase()} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
     <FormList>
         <p>
-            To use {provider.name.toUpperCase()} authentication in your application, first fill in this
-            form. For more info you can
+            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>
@@ -110,9 +110,7 @@
         <div>
             <p>URI</p>
             <CopyInput
-                value={`${
-                    sdk.forConsole.client.config.endpoint
-                }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+                value={`${sdk.forConsole.client.config.endpoint}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
         </div>
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/auth/oktaOAuth.svelte b/src/routes/console/project-[project]/auth/oktaOAuth.svelte
index 98f607df1a..548a99576f 100644
--- a/src/routes/console/project-[project]/auth/oktaOAuth.svelte
+++ b/src/routes/console/project-[project]/auth/oktaOAuth.svelte
@@ -82,9 +82,7 @@
         <div>
             <p>URI</p>
             <CopyInput
-                value={`${
-                    sdk.forConsole.client.config.endpoint
-                }/account/sessions/oauth2/callback/${provider.name.toLocaleLowerCase()}/${projectId}`} />
+                value={`${sdk.forConsole.client.config.endpoint}/account/sessions/oauth2/callback/${provider.key}/${projectId}`} />
         </div>
     </FormList>
     <svelte:fragment slot="footer">
diff --git a/src/routes/console/project-[project]/auth/settings/+page.svelte b/src/routes/console/project-[project]/auth/settings/+page.svelte
index eba59cea4d..8276afb222 100644
--- a/src/routes/console/project-[project]/auth/settings/+page.svelte
+++ b/src/routes/console/project-[project]/auth/settings/+page.svelte
@@ -75,7 +75,7 @@
                             on:click={() => {
                                 selectedProvider = provider;
                                 trackEvent(`click_select_provider`, {
-                                    provider: provider.name.toLowerCase()
+                                    provider: provider.key.toLowerCase()
                                 });
                             }}>
                             <div class="image-item">
diff --git a/src/routes/console/project-[project]/auth/updateOAuth.ts b/src/routes/console/project-[project]/auth/updateOAuth.ts
index 8e7f3272ee..f148c41a33 100644
--- a/src/routes/console/project-[project]/auth/updateOAuth.ts
+++ b/src/routes/console/project-[project]/auth/updateOAuth.ts
@@ -28,7 +28,7 @@ export async function updateOAuth({
     try {
         await sdk.forConsole.projects.updateOAuth2(
             projectId,
-            provider.name.toLowerCase(),
+            provider.key,
             appId || undefined,
             secret || undefined,
             enabled