group form nodes based on groups

src/lib/KratosForm.svelte

@@ -9,10 +9,21 @@
 		isUiNodeImageAttributes,
 		isUiNodeInputAttributes,
 		isUiNodeScriptAttributes,
-		isUiNodeTextAttributes
+		isUiNodeTextAttributes,
+		filterNodesByGroups
 	} from '@ory/integrations/ui';
 
 	export let ui: UiContainer;
+
+	let groups = [
+		...new Set(ui.nodes.map((node) => node.group).filter((group) => group != 'default'))
+	];
+	export let grouped_nodes = groups.map((group) =>
+		filterNodesByGroups({
+			nodes: ui.nodes,
+			groups: group
+		})
+	);
 </script>
 
 {#if ui.messages}
@@ -48,8 +59,9 @@
 	{/each}
 {/if}
 
+{#each grouped_nodes as node_group}
 	<form action={ui.action} method={ui.method} class="space-y-3">
-	{#each ui.nodes as node}
+		{#each node_group as node}
 			{#if isUiNodeTextAttributes(node.attributes)}
 				{node.attributes.text.text}
 			{:else if isUiNodeInputAttributes(node.attributes)}
@@ -131,3 +143,4 @@
 			{/if}
 		{/each}
 	</form>
+{/each}