me
/
orkeslos
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

group form nodes based on groups

Browse Source
master
Skye 2 years ago
parent a8b145382c
commit 692f7249a6
Signed by: me
GPG Key ID: 0104BC05F41B77B8
1 changed files with 84 additions and 71 deletions
Show Stats Download Patch File Download Diff File

155
src/lib/KratosForm.svelte
Unescape View File

@ -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,38 +59,68 @@
{/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}>
{#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="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>
{#if node.attributes.required}
<span class="label-text-alt">Required</span>
{/if}
<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>
{/if}
</div>
{:else if node.attributes.type == 'hidden'}
<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}
@ -88,46 +129,18 @@
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}
{: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}
{/each}
</form>
{/each}
</form>
{/each}

Write Preview
Loading…
Cancel
Save