group form nodes based on groups
This commit is contained in:
parent
a8b145382c
commit
692f7249a6
GPG key ID:
0104BC05F41B77B8
1 changed files with 86 additions and 73 deletions
|
|
@ -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,54 +59,39 @@
|
|||
{/each}
|
||||
{/if}
|
||||
|
||||
<form action={ui.action} method={ui.method} class="space-y-3">
|
||||
{#each ui.nodes as node}
|
||||
{#if isUiNodeTextAttributes(node.attributes)}
|
||||
{node.attributes.text.text}
|
||||
{:else if isUiNodeInputAttributes(node.attributes)}
|
||||
{#if node.attributes.type == 'button' || node.attributes.type == 'submit'}
|
||||
<div class="form-control">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={eval(node.attributes.onclick ?? '')}
|
||||
disabled={node.attributes.disabled}
|
||||
name={node.attributes.name}
|
||||
type={node.attributes.type}
|
||||
value={node.attributes.value ?? ''}
|
||||
>
|
||||
{getNodeLabel(node)}
|
||||
</button>
|
||||
</div>
|
||||
{:else if node.attributes.type == 'text' || node.attributes.type == 'password' || node.attributes.type == 'number' || node.attributes.type == 'email' || node.attributes.type == 'tel' || node.attributes.type == 'datetime-local' || node.attributes.type == 'date' || node.attributes.type == 'url'}
|
||||
<div class="form-control">
|
||||
{#if node.meta.label}
|
||||
<label class="label" for={node.attributes.name}>
|
||||
<span class="label-text">{getNodeLabel(node)}</span>
|
||||
{#if node.attributes.required}
|
||||
<span class="label-text-alt">Required</span>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
<input
|
||||
on:click={eval(node.attributes.onclick ?? '')}
|
||||
class="input input-bordered"
|
||||
id={node.attributes.name}
|
||||
autocomplete={node.attributes.autocomplete}
|
||||
disabled={node.attributes.disabled}
|
||||
name={node.attributes.name}
|
||||
pattern={node.attributes.pattern}
|
||||
required={node.attributes.required}
|
||||
type={node.attributes.type}
|
||||
value={node.attributes.value ?? ''}
|
||||
/>
|
||||
</div>
|
||||
{:else if node.attributes.type == 'checkbox'}
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text">{getNodeLabel(node)}</span>
|
||||
{#each grouped_nodes as node_group}
|
||||
<form action={ui.action} method={ui.method} class="space-y-3">
|
||||
{#each node_group as node}
|
||||
{#if isUiNodeTextAttributes(node.attributes)}
|
||||
{node.attributes.text.text}
|
||||
{:else if isUiNodeInputAttributes(node.attributes)}
|
||||
{#if node.attributes.type == 'button' || node.attributes.type == 'submit'}
|
||||
<div class="form-control">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={eval(node.attributes.onclick ?? '')}
|
||||
disabled={node.attributes.disabled}
|
||||
name={node.attributes.name}
|
||||
type={node.attributes.type}
|
||||
value={node.attributes.value ?? ''}
|
||||
>
|
||||
{getNodeLabel(node)}
|
||||
</button>
|
||||
</div>
|
||||
{:else if node.attributes.type == 'text' || node.attributes.type == 'password' || node.attributes.type == 'number' || node.attributes.type == 'email' || node.attributes.type == 'tel' || node.attributes.type == 'datetime-local' || node.attributes.type == 'date' || node.attributes.type == 'url'}
|
||||
<div class="form-control">
|
||||
{#if node.meta.label}
|
||||
<label class="label" for={node.attributes.name}>
|
||||
<span class="label-text">{getNodeLabel(node)}</span>
|
||||
{#if node.attributes.required}
|
||||
<span class="label-text-alt">Required</span>
|
||||
{/if}
|
||||
</label>
|
||||
{/if}
|
||||
<input
|
||||
on:click={eval(node.attributes.onclick ?? '')}
|
||||
class="checkbox"
|
||||
class="input input-bordered"
|
||||
id={node.attributes.name}
|
||||
autocomplete={node.attributes.autocomplete}
|
||||
disabled={node.attributes.disabled}
|
||||
name={node.attributes.name}
|
||||
|
|
@ -104,30 +100,47 @@
|
|||
type={node.attributes.type}
|
||||
value={node.attributes.value ?? ''}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
{:else if node.attributes.type == 'hidden'}
|
||||
<input
|
||||
on:click={eval(node.attributes.onclick ?? '')}
|
||||
autocomplete={node.attributes.autocomplete}
|
||||
disabled={node.attributes.disabled}
|
||||
name={node.attributes.name}
|
||||
pattern={node.attributes.pattern}
|
||||
required={node.attributes.required}
|
||||
type={node.attributes.type}
|
||||
value={node.attributes.value ?? ''}
|
||||
/>
|
||||
</div>
|
||||
{:else if node.attributes.type == 'checkbox'}
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text">{getNodeLabel(node)}</span>
|
||||
<input
|
||||
on:click={eval(node.attributes.onclick ?? '')}
|
||||
class="checkbox"
|
||||
autocomplete={node.attributes.autocomplete}
|
||||
disabled={node.attributes.disabled}
|
||||
name={node.attributes.name}
|
||||
pattern={node.attributes.pattern}
|
||||
required={node.attributes.required}
|
||||
type={node.attributes.type}
|
||||
value={node.attributes.value ?? ''}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
{:else if node.attributes.type == 'hidden'}
|
||||
<input
|
||||
on:click={eval(node.attributes.onclick ?? '')}
|
||||
autocomplete={node.attributes.autocomplete}
|
||||
disabled={node.attributes.disabled}
|
||||
name={node.attributes.name}
|
||||
pattern={node.attributes.pattern}
|
||||
required={node.attributes.required}
|
||||
type={node.attributes.type}
|
||||
value={node.attributes.value ?? ''}
|
||||
/>
|
||||
{/if}
|
||||
{:else if isUiNodeImageAttributes(node.attributes)}
|
||||
<img alt={getNodeLabel(node)} {...node.attributes} />
|
||||
{:else if isUiNodeAnchorAttributes(node.attributes)}
|
||||
<a class="btn btn-primary" href={node.attributes.href} id={node.attributes.id}>
|
||||
{getNodeLabel(node)}
|
||||
</a>
|
||||
{:else if isUiNodeScriptAttributes(node.attributes)}
|
||||
{#if browser}
|
||||
<script {...node.attributes}></script>
|
||||
{/if}
|
||||
{/if}
|
||||
{:else if isUiNodeImageAttributes(node.attributes)}
|
||||
<img alt={getNodeLabel(node)} {...node.attributes} />
|
||||
{:else if isUiNodeAnchorAttributes(node.attributes)}
|
||||
<a class="btn btn-primary" href={node.attributes.href} id={node.attributes.id}>
|
||||
{getNodeLabel(node)}
|
||||
</a>
|
||||
{:else if isUiNodeScriptAttributes(node.attributes)}
|
||||
{#if browser}
|
||||
<script {...node.attributes}></script>
|
||||
{/if}
|
||||
{/if}
|
||||
{/each}
|
||||
</form>
|
||||
{/each}
|
||||
</form>
|
||||
{/each}
|
||||
|
|
|
|||
Loading…
Reference in a new issue