larvit/plainpages
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Render SSO buttons per configured Kratos OIDC provider (todo §4); flow-view collects oidc nodes → auth-card submit buttons, server-side visibility, drop mockup #sso-toggle CSS

Browse Source
This commit is contained in:
Lilleman auf Larv
2026-06-17 18:20:45 +02:00
parent 0928f9dd39
commit 26a7821611
9 changed files with 54 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
views/auth.ejs
View File

@@ -30,6 +30,7 @@
back: flow.back,
body,
method: flow.method,
sso: { providers: flow.sso },
sub: flow.sub,
title: flow.title,
}) %>

5
views/partials/auth-card.ejs
View File

@@ -6,7 +6,8 @@
method? (default "post"), action?
back? { href, label } back link above the title
sso? { label?, divider?, providers: Provider[] } omit / empty ⇒ no SSO section
Provider: { label, logo? (text) | icon? (sprite id), href? ⇒ <a>, else <button> }
Provider: { label, logo? (text) | icon? (sprite id),
href? ⇒ <a>, else name?/value? ⇒ submit <button>, else inert <button> }
body pre-rendered HTML placed inside .auth-form (fields + submit)
alt? { text, href, label } centered footer line
%><%
@@ -20,7 +21,7 @@
<div class="auth-head"><% if (back) { %><a class="auth-back" href="<%= back.href %>"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-arrow-left"/></svg><%= back.label %></a><% } %><h1><%= locals.title %></h1><% if (locals.sub) { %><p class="auth-sub"><%= locals.sub %></p><% } %></div>
<% if (providers.length) { -%>
<div class="sso" aria-label="<%= sso.label || "Single sign-on options" %>">
<ul class="sso-list"><% providers.forEach((p) => { %><li><% if (p.href) { %><a class="sso-btn" href="<%= p.href %>"><% } else { %><button type="button" class="sso-btn"><% } %><span class="sso-logo" aria-hidden="true"><% if (p.icon) { %><svg class="ico ico-sm"><use href="#<%= p.icon %>"/></svg><% } else { %><%= p.logo %><% } %></span><span class="sso-label"><%= p.label %></span><% if (p.href) { %></a><% } else { %></button><% } %></li><% }) %></ul>
<ul class="sso-list"><% providers.forEach((p) => { %><li><% if (p.href) { %><a class="sso-btn" href="<%= p.href %>"><% } else { %><button type="<%= p.name ? "submit" : "button" %>" class="sso-btn"<% if (p.name) { %> name="<%= p.name %>" value="<%= p.value %>"<% } %>><% } %><span class="sso-logo" aria-hidden="true"><% if (p.icon) { %><svg class="ico ico-sm"><use href="#<%= p.icon %>"/></svg><% } else { %><%= p.logo %><% } %></span><span class="sso-label"><%= p.label %></span><% if (p.href) { %></a><% } else { %></button><% } %></li><% }) %></ul>
<div class="auth-divider"><%= sso.divider || "or" %></div>
</div>
<% } -%>