🏡 index : ~doyle/chartered.git

1ad13c47a3def887e8aa1f83dbbf66d01c41684a [patch]

33542bce5c2e35edbc01b6c2f69c2372db664bb2

e7f4cf0c0f1647c3c8e3e9f469ba8cd1324c26bc

1ad13c47a3def887e8aa1f83dbbf66d01c41684a.tar.gz

Add friendly name/icon mapping to OAuth providers

Diff

 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}