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,
|
isUiNodeImageAttributes,
|
||||||
isUiNodeInputAttributes,
|
isUiNodeInputAttributes,
|
||||||
isUiNodeScriptAttributes,
|
isUiNodeScriptAttributes,
|
||||||
isUiNodeTextAttributes
|
isUiNodeTextAttributes,
|
||||||
|
filterNodesByGroups
|
||||||
} from '@ory/integrations/ui';
|
} from '@ory/integrations/ui';
|
||||||
|
|
||||||
export let ui: UiContainer;
|
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>
|
</script>
|
||||||
|
|
||||||
{#if ui.messages}
|
{#if ui.messages}
|
||||||
|
|
@ -48,54 +59,39 @@
|
||||||
{/each}
|
{/each}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<form action={ui.action} method={ui.method} class="space-y-3">
|
{#each grouped_nodes as node_group}
|
||||||
{#each ui.nodes as node}
|
<form action={ui.action} method={ui.method} class="space-y-3">
|
||||||
{#if isUiNodeTextAttributes(node.attributes)}
|
{#each node_group as node}
|
||||||
{node.attributes.text.text}
|
{#if isUiNodeTextAttributes(node.attributes)}
|
||||||
{:else if isUiNodeInputAttributes(node.attributes)}
|
{node.attributes.text.text}
|
||||||
{#if node.attributes.type == 'button' || node.attributes.type == 'submit'}
|
{:else if isUiNodeInputAttributes(node.attributes)}
|
||||||
<div class="form-control">
|
{#if node.attributes.type == 'button' || node.attributes.type == 'submit'}
|
||||||
<button
|
<div class="form-control">
|
||||||
class="btn btn-primary"
|
<button
|
||||||
on:click={eval(node.attributes.onclick ?? '')}
|
class="btn btn-primary"
|
||||||
disabled={node.attributes.disabled}
|
on:click={eval(node.attributes.onclick ?? '')}
|
||||||
name={node.attributes.name}
|
disabled={node.attributes.disabled}
|
||||||
type={node.attributes.type}
|
name={node.attributes.name}
|
||||||
value={node.attributes.value ?? ''}
|
type={node.attributes.type}
|
||||||
>
|
value={node.attributes.value ?? ''}
|
||||||
{getNodeLabel(node)}
|
>
|
||||||
</button>
|
{getNodeLabel(node)}
|
||||||
</div>
|
</button>
|
||||||
{: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>
|
||||||
<div class="form-control">
|
{: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'}
|
||||||
{#if node.meta.label}
|
<div class="form-control">
|
||||||
<label class="label" for={node.attributes.name}>
|
{#if node.meta.label}
|
||||||
<span class="label-text">{getNodeLabel(node)}</span>
|
<label class="label" for={node.attributes.name}>
|
||||||
{#if node.attributes.required}
|
<span class="label-text">{getNodeLabel(node)}</span>
|
||||||
<span class="label-text-alt">Required</span>
|
{#if node.attributes.required}
|
||||||
{/if}
|
<span class="label-text-alt">Required</span>
|
||||||
</label>
|
{/if}
|
||||||
{/if}
|
</label>
|
||||||
<input
|
{/if}
|
||||||
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>
|
|
||||||
<input
|
<input
|
||||||
on:click={eval(node.attributes.onclick ?? '')}
|
on:click={eval(node.attributes.onclick ?? '')}
|
||||||
class="checkbox"
|
class="input input-bordered"
|
||||||
|
id={node.attributes.name}
|
||||||
autocomplete={node.attributes.autocomplete}
|
autocomplete={node.attributes.autocomplete}
|
||||||
disabled={node.attributes.disabled}
|
disabled={node.attributes.disabled}
|
||||||
name={node.attributes.name}
|
name={node.attributes.name}
|
||||||
|
|
@ -104,30 +100,47 @@
|
||||||
type={node.attributes.type}
|
type={node.attributes.type}
|
||||||
value={node.attributes.value ?? ''}
|
value={node.attributes.value ?? ''}
|
||||||
/>
|
/>
|
||||||
</label>
|
</div>
|
||||||
</div>
|
{:else if node.attributes.type == 'checkbox'}
|
||||||
{:else if node.attributes.type == 'hidden'}
|
<div class="form-control">
|
||||||
<input
|
<label class="label cursor-pointer">
|
||||||
on:click={eval(node.attributes.onclick ?? '')}
|
<span class="label-text">{getNodeLabel(node)}</span>
|
||||||
autocomplete={node.attributes.autocomplete}
|
<input
|
||||||
disabled={node.attributes.disabled}
|
on:click={eval(node.attributes.onclick ?? '')}
|
||||||
name={node.attributes.name}
|
class="checkbox"
|
||||||
pattern={node.attributes.pattern}
|
autocomplete={node.attributes.autocomplete}
|
||||||
required={node.attributes.required}
|
disabled={node.attributes.disabled}
|
||||||
type={node.attributes.type}
|
name={node.attributes.name}
|
||||||
value={node.attributes.value ?? ''}
|
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}
|
{/if}
|
||||||
{:else if isUiNodeImageAttributes(node.attributes)}
|
{/each}
|
||||||
<img alt={getNodeLabel(node)} {...node.attributes} />
|
</form>
|
||||||
{:else if isUiNodeAnchorAttributes(node.attributes)}
|
{/each}
|
||||||
<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>
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue