Branding

authentik/blueprints/kaboot-setup.yaml

@@ -25,6 +25,166 @@ metadata:
     blueprints.goauthentik.io/description: "Complete Kaboot OAuth2/OIDC setup with enrollment flow"
 
 entries:
+  # ═══════════════════════════════════════════════════════════════════════════════
+  # BRANDING
+  # ═══════════════════════════════════════════════════════════════════════════════
+
+  - id: kaboot-brand
+    model: authentik_brands.brand
+    identifiers:
+      domain: localhost
+    attrs:
+      domain: localhost
+      default: true
+      branding_title: Kaboot
+      branding_logo: /media/branding/logo.svg
+      branding_favicon: /media/branding/logo.svg
+      flow_authentication: !Find [authentik_flows.flow, [slug, default-authentication-flow]]
+      flow_invalidation: !Find [authentik_flows.flow, [slug, default-invalidation-flow]]
+      flow_user_settings: !Find [authentik_flows.flow, [slug, default-user-settings-flow]]
+      attributes:
+        settings:
+          theme:
+            base: light
+          css: |
+            /* Kaboot Theme for Authentik */
+            
+            :root {
+              --ak-accent: #2563eb;
+              --ak-primary: #2563eb;
+              --ak-primary-dark: #1e40af;
+              --ak-primary-light: #60a5fa;
+              --ak-error: #ef4444;
+              --ak-success: #22c55e;
+              --pf-global--FontFamily--sans-serif: "Inter", system-ui, -apple-system, sans-serif;
+            }
+
+            /* Background color fallback (image set via Flow settings) */
+            body {
+              background-color: #2563eb !important;
+            }
+
+            /* Login Card */
+            .pf-c-login__main {
+              background-color: #ffffff !important;
+              border-radius: 2rem !important;
+              box-shadow: 0 10px 0 rgba(0,0,0,0.1) !important;
+              padding: 3rem !important;
+              max-width: 500px !important;
+              margin: 0 auto;
+            }
+
+            /* Inputs */
+            .pf-c-form-control {
+              border: 2px solid #e5e7eb !important;
+              border-radius: 1rem !important;
+              padding: 0.75rem 1rem !important;
+              font-weight: 600 !important;
+              color: #333 !important;
+              font-size: 1rem !important;
+              box-shadow: none !important;
+              transition: all 0.2s ease !important;
+            }
+
+            .pf-c-form-control:focus {
+              border-color: #2563eb !important;
+              outline: none !important;
+            }
+
+            /* Primary Button - Kaboot Signature 3D Style */
+            .pf-c-button.pf-m-primary {
+              background-color: #333333 !important;
+              color: #ffffff !important;
+              border: none !important;
+              border-radius: 1rem !important;
+              padding: 0.75rem 1.5rem !important;
+              font-weight: 800 !important;
+              font-size: 1.1rem !important;
+              box-shadow: 0 6px 0 #000000 !important;
+              transform: translateY(0) !important;
+              transition: all 0.1s ease !important;
+              text-transform: uppercase !important;
+              letter-spacing: 0.05em !important;
+            }
+
+            .pf-c-button.pf-m-primary:hover {
+              background-color: #1a1a1a !important;
+            }
+
+            .pf-c-button.pf-m-primary:active {
+              transform: translateY(6px) !important;
+              box-shadow: none !important;
+            }
+            
+            /* Secondary/Link Buttons */
+            .pf-c-button.pf-m-secondary, .pf-c-button.pf-m-link {
+              color: #2563eb !important;
+              font-weight: 600 !important;
+            }
+
+            /* Titles */
+            .pf-c-title {
+              font-weight: 900 !important;
+              color: #111827 !important;
+              text-align: center !important;
+              margin-bottom: 1.5rem !important;
+            }
+            
+            /* Logo styling if present in header */
+            .pf-c-brand {
+              filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
+            }
+
+            /* Alert/Notification boxes */
+            .pf-c-alert {
+              border-radius: 1rem !important;
+              border: 2px solid transparent !important;
+              box-shadow: 0 4px 0 rgba(0,0,0,0.05) !important;
+            }
+            
+            .pf-c-alert.pf-m-danger {
+              background-color: #fef2f2 !important;
+              border-color: #fca5a5 !important;
+              color: #991b1b !important;
+            }
+            
+            /* Footer links */
+            .pf-c-login__main-footer-links-item-link {
+                color: #6b7280 !important;
+                font-weight: 500 !important;
+            }
+            
+            /* Hide the default background image if any */
+            .pf-c-background-image {
+              display: none !important;
+            }
+
+  # ═══════════════════════════════════════════════════════════════════════════════
+  # FLOW BACKGROUNDS
+  # ═══════════════════════════════════════════════════════════════════════════════
+
+  - id: update-authentication-flow-background
+    model: authentik_flows.flow
+    identifiers:
+      slug: default-authentication-flow
+    attrs:
+      title: Welcome to Kaboot!
+      background: /media/branding/background.svg
+
+  - id: update-invalidation-flow-background
+    model: authentik_flows.flow
+    identifiers:
+      slug: default-invalidation-flow
+    attrs:
+      background: /media/branding/background.svg
+
+  - id: update-authorization-flow-background
+    model: authentik_flows.flow
+    identifiers:
+      slug: default-provider-authorization-implicit-consent
+    attrs:
+      background: /media/branding/background.svg
+
   # ═══════════════════════════════════════════════════════════════════════════════
   # GROUPS
   # ═══════════════════════════════════════════════════════════════════════════════
@@ -173,6 +333,7 @@ entries:
       slug: enrollment-flow
       designation: enrollment
       authentication: none
+      background: /media/branding/background.svg
 
   - id: enrollment-flow-prompt-binding
     model: authentik_flows.flowstagebinding

authentik/branding/background.svg

@@ -0,0 +1,13 @@
+<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#2563eb" />
+      <stop offset="100%" stop-color="#60a5fa" />
+    </linearGradient>
+  </defs>
+  <rect width="1920" height="1080" fill="url(#bg-gradient)" />
+  
+  <!-- Subtle decorative elements -->
+  <circle cx="200" cy="200" r="400" fill="white" fill-opacity="0.03" />
+  <circle cx="1700" cy="900" r="500" fill="white" fill-opacity="0.03" />
+</svg>

authentik/branding/custom-css.yaml

@@ -0,0 +1,115 @@
+settings:
+  theme:
+    base: light
+  css: |
+    /* Kaboot Theme for Authentik */
+    
+    :root {
+      --ak-accent: #2563eb;
+      --ak-primary: #2563eb;
+      --ak-primary-dark: #1e40af;
+      --ak-primary-light: #60a5fa;
+      --ak-error: #ef4444;
+      --ak-success: #22c55e;
+      --pf-global--FontFamily--sans-serif: "Inter", system-ui, -apple-system, sans-serif;
+    }
+
+    /* Background color fallback (image set via Brand settings) */
+    body {
+      background-color: #2563eb !important;
+    }
+
+    /* Login Card */
+    .pf-c-login__main {
+      background-color: #ffffff !important;
+      border-radius: 2rem !important;
+      box-shadow: 0 10px 0 rgba(0,0,0,0.1) !important;
+      padding: 3rem !important;
+      max-width: 500px !important;
+      margin: 0 auto;
+    }
+
+    /* Inputs */
+    .pf-c-form-control {
+      border: 2px solid #e5e7eb !important;
+      border-radius: 1rem !important;
+      padding: 0.75rem 1rem !important;
+      font-weight: 600 !important;
+      color: #333 !important;
+      font-size: 1rem !important;
+      box-shadow: none !important;
+      transition: all 0.2s ease !important;
+    }
+
+    .pf-c-form-control:focus {
+      border-color: #2563eb !important;
+      outline: none !important;
+    }
+
+    /* Primary Button - Kaboot Signature 3D Style */
+    .pf-c-button.pf-m-primary {
+      background-color: #333333 !important;
+      color: #ffffff !important;
+      border: none !important;
+      border-radius: 1rem !important;
+      padding: 0.75rem 1.5rem !important;
+      font-weight: 800 !important;
+      font-size: 1.1rem !important;
+      box-shadow: 0 6px 0 #000000 !important;
+      transform: translateY(0) !important;
+      transition: all 0.1s ease !important;
+      text-transform: uppercase !important;
+      letter-spacing: 0.05em !important;
+    }
+
+    .pf-c-button.pf-m-primary:hover {
+      background-color: #1a1a1a !important;
+    }
+
+    .pf-c-button.pf-m-primary:active {
+      transform: translateY(6px) !important;
+      box-shadow: none !important;
+    }
+    
+    /* Secondary/Link Buttons */
+    .pf-c-button.pf-m-secondary, .pf-c-button.pf-m-link {
+      color: #2563eb !important;
+      font-weight: 600 !important;
+    }
+
+    /* Titles */
+    .pf-c-title {
+      font-weight: 900 !important;
+      color: #111827 !important;
+      text-align: center !important;
+      margin-bottom: 1.5rem !important;
+    }
+    
+    /* Logo styling if present in header */
+    .pf-c-brand {
+      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
+    }
+
+    /* Alert/Notification boxes */
+    .pf-c-alert {
+      border-radius: 1rem !important;
+      border: 2px solid transparent !important;
+      box-shadow: 0 4px 0 rgba(0,0,0,0.05) !important;
+    }
+    
+    .pf-c-alert.pf-m-danger {
+      background-color: #fef2f2 !important;
+      border-color: #fca5a5 !important;
+      color: #991b1b !important;
+    }
+    
+    /* Footer links */
+    .pf-c-login__main-footer-links-item-link {
+        color: #6b7280 !important;
+        font-weight: 500 !important;
+    }
+    
+    /* Hide the default background image if any */
+    .pf-c-background-image {
+      display: none !important;
+    }

authentik/branding/logo.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+  <path d="M9 13a4.5 4.5 0 0 0 3-4" />
+  <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+  <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+  <path d="M6 18a4 4 0 0 1-1.967-.516" />
+  <path d="M12 13h4" />
+  <path d="M12 18h6a2 2 0 0 1 2 2v1" />
+  <path d="M12 8h8" />
+  <path d="M16 8V5a2 2 0 0 1 2-2" />
+  <circle cx="16" cy="13" r=".5" />
+  <circle cx="18" cy="3" r=".5" />
+  <circle cx="20" cy="21" r=".5" />
+  <circle cx="20" cy="8" r=".5" />
+</svg>

components/AuthButton.tsx

@@ -75,7 +75,7 @@ export const AuthButton: React.FC<AuthButtonProps> = ({ onAccountSettingsClick }
             <button
               onClick={() => {
                 setDropdownOpen(false);
-                auth.signoutRedirect();
+                auth.signoutRedirect({ post_logout_redirect_uri: window.location.origin });
               }}
               className="w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 flex items-center gap-2 font-medium transition"
             >