feat(plugins/auth): add logo to auth-form

lib/plugins/auth/islands/auth-form.tsx

@@ -19,7 +19,7 @@ export function AuthForm(props: AuthFormProps) {
   const url = new URL(props.request.url);
   const error = url.searchParams.get("error");
 
-  const { title, description, providers } = props.config;
+  const { logo, title, description, providers } = props.config;
 
   const hasEmail = !!providers?.email;
   const hasOAuth2 = Object.entries(providers ?? {}).some(
@@ -35,6 +35,9 @@ export function AuthForm(props: AuthFormProps) {
   return (
     <>
       <div className="flex flex-col space-y-2 text-center">
+        {logo && (
+          <img src={logo} alt="Logo" className="mx-auto mb-4 w-16 h-16" />
+        )}
         {title && (
           <h1 className="text-2xl font-semibold">
             {title}

lib/plugins/auth/plugin.ts

@@ -17,6 +17,8 @@ import type { Auth, AuthProvider, AuthUser } from "./utils/types.ts";
 export * from "../../deps/deno_kv_oauth/mod.ts";
 
 export type AuthConfig = {
+  /** An image URL for the logo to appear above the login form at /auth. */
+  logo?: string;
   /** A short title for the app to appear above the login form at /auth. */
   title?: string;
   /** A short description for the app to appear above the login form at /auth. */
@@ -78,6 +80,7 @@ export const auth = (config: AuthConfig): Plugin<NetzoState> => {
   ].some((key) => !!config?.providers?.[key as AuthProvider]);
   if (!authEnabled) return { name: "netzo.auth" }; // skip if auth but no providers are set
 
+  config.logo ??= "";
   config.title ??= "Sign In";
   config.description ??= "Sign in to access the app";
   config.caption ??= ""; // e.g. 'By signing in you agree to the <a href="/" target="_blank">Terms of Service</a>';

lib/plugins/auth/routes/auth.tsx

@@ -14,7 +14,7 @@ export const config: RouteConfig = {
 
 export default (config: AuthConfig) => {
   return defineRoute((req, ctx) => {
-    const authFormWrapper = "grid gap-6 w-full xs:w-[350px] max-w-[350px]";
+    const authFormWrapper = "grid gap-6 w-full xs:w-[350px] max-w-[350px] pb-16";
     if (config.image) {
       return (
         <div className="w-full h-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">