Format OAuth2 provider name better

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.
appwrite · Jul 20, 2023 · f5a309b · f5a309b
1 parent 8fdaaf2
commit f5a309b
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 29 deletions.
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) => {
+            const 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