Format OAuth2 provider name better

Show provider name in the Console and use the provider key for
everything else.

Author: stnguyen90

src/lib/stores/oauth-providers.ts

@@ -12,6 +12,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;
@@ -24,11 +25,12 @@ export type Providers = {
 const setProviders = (project: Models.Project): Provider[] => {
     return (
         project?.providers.map((n) => {
+            const 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;
@@ -156,7 +158,7 @@ const setProviders = (project: Models.Project): Provider[] => {
             }
 
             return {
-                ...n,
+                ...p,
                 icon,
                 docs,
                 component

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

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

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

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

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

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

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

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

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="avatar">