Show kratos oidc login button

backend/web/static/base.js

@@ -93,9 +93,10 @@ function flow_login() {
 		url: uri,
 		success: function (data) {
 			// Determine which groups to show.
+			window.console.log("flow_login: selecting UI groups to process");
 			var groups = scrape_groups(data);
 			for (const group of groups) {
-				// Render login form (group: password)
+				window.console.log("flow_login: processing group " + group);
 				var form_html = render_form(data, group, "login");
 				$("#contentLogin_" + group).html(form_html);
 			}
@@ -328,6 +329,12 @@ function render_form(data, group, context) {
 
 	for (const node of data.ui.nodes) {
 		if (node.group == "default" || node.group == group) {
+			// We do not want to show the identifier (email
+			// address) input *again* in the OIDC form, which is only a
+			// single "Sign in with ..." button.
+			if (group == "oidc" && node.attributes.name == "identifier") {
+				continue;
+                        }
 			var elm = getFormElement(node, context);
 			form += elm;
 		}
@@ -372,9 +379,9 @@ function render_messages(data) {
 // Kratos give us form names and types and specifies what to render. However
 // it does not provide labels or translations. This function returns a HTML
 // form element based on the fields provided by Kratos with proper names and
-// labels
+// labels.
 // type: input type, usual "input", "hidden" or "submit". But bootstrap types
-//                   like "email" are also supported
+//   like "email" are also supported.
 // name: name of the field. Used when posting data
 // value: If there is already a value known, show it
 // messages: error messages related to the field
@@ -536,6 +543,9 @@ function getFormElement(node, context) {
 		if (context == "recovery") {
 			label = "Send recovery link";
 		}
+		if (node.group == "oidc") {
+			label = node.meta.label.text;
+		}
 		return (
 			`<div class="form-group flex justify-end py-2">
             <input type="hidden" name="` +

backend/web/templates/login.html

@@ -80,6 +80,7 @@
 {% endif %}
 
 <div id="contentMessages"></div>
+<div id="contentLogin_oidc"></div>
 <div id="contentLogin_password"></div>
 <div id="contentLogin_totp"></div>
 <footer