Update login button appearance and add support for dynamic images (#245)

The style changes are temporary and will likely be reverted in the
future. The ability to include images will be kept.

src/lib/components/LoginButton.svelte

@@ -15,6 +15,11 @@
       resetSearch();
     });
   };
+
+  let imageSrc: string | undefined = undefined;
+  if (provider.imagesrc) {
+    imageSrc = './' + provider.imagesrc;
+  }
 </script>
 
 <button
@@ -23,6 +28,9 @@
   class={$$props.class ?? 'btn variant-filled-primary m-1'}
   on:click={() => login(redirectTo, provider.type)}
 >
+  {#if imageSrc}
+    <img src={imageSrc} alt={provider.imageAlt} class="h-8 mr-2" />
+  {/if}
   {buttonText}
 </button>
 

src/lib/models/AuthProvider.ts

@@ -9,6 +9,8 @@ export interface AuthData extends Indexable {
   helpText?: string;
   enabled: boolean;
   alt: boolean;
+  imageSrc?: string;
+  imageAlt?: string;
 }
 
 export default class AuthProvider implements AuthData {
@@ -21,6 +23,8 @@ export default class AuthProvider implements AuthData {
   logouturl?: string | undefined;
   callbackurl?: string | undefined;
   alt: boolean;
+  imageSrc?: string | undefined;
+  imageAlt?: string | undefined;
 
   constructor(data: AuthData) {
     this.name = data.name;
@@ -29,6 +33,8 @@ export default class AuthProvider implements AuthData {
     this.icon = data.icon;
     this.enabled = data.enabled;
     this.alt = data.alt || false;
+    this.imageSrc = data.imagesrc;
+    this.imageAlt = data.imagealt;
   }
 
   protected getRedirectURI(): string {

src/routes/(authentication)/login/+page.svelte

@@ -68,7 +68,7 @@
                 provider={selectedProvider}
                 {redirectTo}
                 helpText={selectedProvider.helptext}
-                class="btn variant-filled-primary m-1 mt-2 w-full"
+                class="btn variant-outline-primary m-1 mt-2 w-full"
               />
             {/if}
           {:else}
@@ -78,7 +78,7 @@
                 {provider}
                 {redirectTo}
                 helpText={provider.helptext}
-                class="btn variant-filled-primary w-full"
+                class="btn variant-outline-primary text-primary-500 w-full"
               />
             {/each}
           {/if}