Format OAuth2 provider name better

stnguyen90 · stnguyen90 · commit aefe2df68937 · 2023-07-20T15:31:43.000-07:00
The provider name is not that nice because it is just
the provider key with the first letter capitalized.
So, instead of showing that name, override the name
with a nicer or more correct value as needed.
diff --git 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,6 +24,8 @@ export type Providers = {
 const setProviders = (project: Models.Project): Provider[] => {
     return (
         project?.providers.map((n) => {
+            let key = n.name.toLocaleLowerCase();
+            let name = n.name;
             let docs: Provider['docs'];
             let icon: Provider['icon'] = n.name.toLowerCase();
             let component: Provider['component'] = Main;
@@ -74,16 +77,19 @@ const setProviders = (project: Models.Project): Provider[] => {
                     docs = 'https://developers.facebook.com/';
                     break;
                 case 'github':
+                    name = 'GitHub';
                     docs = 'https://developer.github.com';
                     break;
                 case 'gitlab':
+                    name = 'GitLab';
                     docs = 'https://docs.gitlab.com/ee/api/';
                     component = GitLab;
                     break;
                 case 'google':
                     docs = 'https://support.google.com/googleapi/answer/6158849';
                     break;
                 case 'linkedin':
+                    name = 'LinkedIn';
                     docs = 'https://developer.linkedin.com/';
                     break;
                 case 'microsoft':
@@ -94,6 +100,7 @@ const setProviders = (project: Models.Project): Provider[] => {
                     docs = 'https://developers.notion.com/docs';
                     break;
                 case 'oidc':
+                    name = 'OpenID Connect';
                     docs = 'https://openid.net/connect/faq/';
                     component = Oidc;
                     break;
@@ -102,9 +109,11 @@ const setProviders = (project: Models.Project): Provider[] => {
                     component = Okta;
                     break;
                 case 'paypal':
+                    name = 'PayPal';
                     docs = 'https://developer.paypal.com/docs/api/overview/';
                     break;
                 case 'paypalsandbox':
+                    name = 'PayPal Sandbox';
                     icon = 'paypal';
                     docs = 'https://developer.paypal.com/docs/api/overview/';
                     break;
@@ -128,6 +137,7 @@ const setProviders = (project: Models.Project): Provider[] => {
                     docs = 'https://developers.tradeshift.com/docs/api';
                     break;
                 case 'tradeshiftbox':
+                    name = 'Tradeshift Sandbox';
                     icon = 'tradeshift';
                     docs = 'https://developers.tradeshift.com/docs/api';
                     break;
@@ -155,6 +165,8 @@ const setProviders = (project: Models.Project): Provider[] => {
 
             return {
                 ...n,
+                key,
+                name,
                 icon,
                 docs,
                 component
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -75,7 +75,7 @@
                             on:click={() => {
                                 selectedProvider = provider;
                                 trackEvent(`click_select_provider`, {
-                                    provider: provider.name.toLowerCase()
+                                    provider: provider.key
                                 });
                             }}>
                             <div class="image-item">
diff --git 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
