From 1ad13c47a3def887e8aa1f83dbbf66d01c41684a Mon Sep 17 00:00:00 2001
From: Jordan Doyle <jordan@doyle.la>
Date: Sat, 10 Sep 2022 02:30:38 +0100
Subject: [PATCH] Add friendly name/icon mapping to OAuth providers

---
 chartered-frontend/src/routes/(unauthed)/auth/login/+page.svelte | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/chartered-frontend/src/routes/(unauthed)/auth/login/+page.svelte b/chartered-frontend/src/routes/(unauthed)/auth/login/+page.svelte
index 0e59b22..1d81757 100644
--- a/chartered-frontend/src/routes/(unauthed)/auth/login/+page.svelte
+++ a/chartered-frontend/src/routes/(unauthed)/auth/login/+page.svelte
@@ -1,9 +1,10 @@
 <script type="typescript">
     import { loginOAuth, login, fetchOAuthProviders } from '../../../../stores/auth';
     import Spinner from '../../../../components/Spinner.svelte';
     import ErrorAlert from '../../../../components/ErrorAlert.svelte';
     import { goto } from '$app/navigation';
     import { getErrorMessage } from '../../../../util';
+    import Icon from '../../../../components/Icon.svelte';
 
     /**
      * Once OAuth providers are loaded this will contain whether password auth
@@ -84,6 +85,17 @@
         passwordAllowed = v.password;
         return v;
     });
+
+    const friendlyOauthMapping: { [s: string]: { name: string; icon: string } } = {
+        github: {
+            name: 'GitHub',
+            icon: 'github',
+        },
+        gitlab: {
+            name: 'GitLab',
+            icon: 'gitlab',
+        },
+    };
 </script>
 
 <Spinner hidden={!loginInProgress} />
@@ -113,8 +125,13 @@
         <div class:!hidden={!oauthProviders.password} class="side-lines">or</div>
 
         {#each oauthProviders.providers as provider}
-            <button on:click={() => doLoginOAuth(provider)}>
-                Login with {provider}
+            <button on:click={() => doLoginOAuth(provider)} class="flex items-center justify-center">
+                {#if friendlyOauthMapping[provider]?.icon}
+                    <span class="mr-2">
+                        <Icon name={friendlyOauthMapping[provider].icon} />
+                    </span>
+                {/if}
+                Login with {friendlyOauthMapping[provider]?.name || friendlyOauthMapping}
             </button>
         {/each}
     {/await}
--
rgit 0.1.3