share auth providers UI configurations

ui/src/components/settings/PageAuthProviders.svelte

@@ -8,6 +8,7 @@
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
     import EmailAuthAccordion from "@/components/settings/EmailAuthAccordion.svelte";
     import AuthProviderAccordion from "@/components/settings/AuthProviderAccordion.svelte";
+    import providersList from "@/providers.js";
 
     $pageTitle = "Auth providers";
 
@@ -63,11 +64,10 @@
             emailAuth: Object.assign({ enabled: true }, data.emailAuth),
         };
 
-        const providers = ["googleAuth", "facebookAuth", "githubAuth", "gitlabAuth", "discordAuth"];
+        for (const providerKey in providersList) {
-        for (const provider of providers) {
+            formSettings[providerKey] = Object.assign(
-            formSettings[provider] = Object.assign(
                 { enabled: false, allowRegistrations: true },
-                data[provider]
+                data[providerKey]
             );
         }
 
@@ -102,42 +102,17 @@
                         single
                         bind:config={formSettings.emailAuth}
                     />
+
+                    {#each Object.entries(providersList) as [key, provider]}
                         <AuthProviderAccordion
                             single
-                        key="googleAuth"
+                            {key}
-                        title="Google"
+                            title={provider.title}
-                        icon="ri-google-line"
+                            icon={provider.icon || "ri-fingerprint-line"}
-                        bind:config={formSettings.googleAuth}
+                            showSelfHostedFields={provider.selfHosted}
-                    />
+                            bind:config={formSettings[key]}
-                    <AuthProviderAccordion
-                        single
-                        key="facebookAuth"
-                        title="Facebook"
-                        icon="ri-facebook-line"
-                        bind:config={formSettings.facebookAuth}
-                    />
-                    <AuthProviderAccordion
-                        single
-                        key="githubAuth"
-                        title="GitHub"
-                        icon="ri-github-line"
-                        bind:config={formSettings.githubAuth}
-                    />
-                    <AuthProviderAccordion
-                        single
-                        key="gitlabAuth"
-                        title="GitLab"
-                        icon="ri-gitlab-line"
-                        showSelfHostedFields
-                        bind:config={formSettings.gitlabAuth}
-                    />
-                    <AuthProviderAccordion
-                        single
-                        key="discordAuth"
-                        title="Discord"
-                        icon="ri-discord-line"
-                        bind:config={formSettings.discordAuth}
                         />
+                    {/each}
                 </div>
 
                 <div class="flex m-t-base">

ui/src/components/users/ExternalAuthsList.svelte

@@ -4,6 +4,7 @@
     import CommonHelper from "@/utils/CommonHelper";
     import { confirm } from "@/stores/confirmation";
     import { addSuccessToast } from "@/stores/toasts";
+    import providersList from "@/providers.js";
 
     const dispatch = createEventDispatcher();
 
@@ -12,6 +13,14 @@
     let externalAuths = [];
     let isLoading = false;
 
+    function getProviderTitle(provider) {
+        return providersList[provider + "Auth"]?.title || CommonHelper.sentenize(auth.provider, false);
+    }
+
+    function getProviderIcon(provider) {
+        return providersList[provider + "Auth"]?.icon || `ri-${provider}-line`;
+    }
+
     async function loadExternalAuths() {
         if (!user?.id) {
             externalAuths = [];
@@ -35,11 +44,11 @@
             return; // nothing to unlink
         }
 
-        confirm(`Do you really want to unlink the selected provider?`, () => {
+        confirm(`Do you really want to unlink the ${getProviderTitle(provider)} provider?`, () => {
             return ApiClient.users
                 .unlinkExternalAuth(user.id, provider)
                 .then(() => {
-                    addSuccessToast("Successfully unlinked the provider.");
+                    addSuccessToast(`Successfully unlinked the ${getProviderTitle(provider)} provider.`);
                     dispatch("unlink", provider);
                     loadExternalAuths(); // reload list
                 })
@@ -62,8 +71,8 @@
     <div class="list">
         {#each externalAuths as auth}
             <div class="list-item">
-                <i class="ri-{auth.provider}-line" />
+                <i class={getProviderIcon(auth.provider)} />
-                <span class="txt">{CommonHelper.sentenize(auth.provider, false)}</span>
+                <span class="txt">{getProviderTitle(auth.provider)}</span>
                 <div class="txt-hint">ID: {auth.providerId}</div>
                 <button
                     type="button"

ui/src/providers.js

@@ -0,0 +1,31 @@
+// Object list with all supported OAuth2 providers in the format:
+// ```
+// { settingsKey: { title, icon, selfHosted } }
+// ```
+export default {
+    googleAuth: {
+        title: "Google",
+        icon:  "ri-google-line",
+    },
+    facebookAuth: {
+        title: "Facebook",
+        icon:  "ri-facebook-line",
+    },
+    twitterAuth: {
+        title: "Twitter",
+        icon:  "ri-twitter-line",
+    },
+    githubAuth: {
+        title: "GitHub",
+        icon:  "ri-github-line",
+    },
+    gitlabAuth: {
+        title:    "GitLab",
+        icon:     "ri-gitlab-line",
+        selfHosted: true,
+    },
+    discordAuth: {
+        title: "Discord",
+        icon:  "ri-discord-line",
+    },
+};