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, 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,38 +59,68 @@
{/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}
<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> <span class="label-text">{getNodeLabel(node)}</span>
{#if node.attributes.required} <input
<span class="label-text-alt">Required</span> on:click={eval(node.attributes.onclick ?? '')}
{/if} 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> </label>
{/if} </div>
{:else if node.attributes.type == 'hidden'}
<input <input
on:click={eval(node.attributes.onclick ?? '')} on:click={eval(node.attributes.onclick ?? '')}
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}
@ -88,46 +129,18 @@
type={node.attributes.type} type={node.attributes.type}
value={node.attributes.value ?? ''} value={node.attributes.value ?? ''}
/> />
</div> {/if}
{:else if node.attributes.type == 'checkbox'} {:else if isUiNodeImageAttributes(node.attributes)}
<div class="form-control"> <img alt={getNodeLabel(node)} {...node.attributes} />
<label class="label cursor-pointer"> {:else if isUiNodeAnchorAttributes(node.attributes)}
<span class="label-text">{getNodeLabel(node)}</span> <a class="btn btn-primary" href={node.attributes.href} id={node.attributes.id}>
<input {getNodeLabel(node)}
on:click={eval(node.attributes.onclick ?? '')} </a>
class="checkbox" {:else if isUiNodeScriptAttributes(node.attributes)}
autocomplete={node.attributes.autocomplete} {#if browser}
disabled={node.attributes.disabled} <script {...node.attributes}></script>
name={node.attributes.name} {/if}
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} {/each}
{/each} </form>
</form> {/each}

Write Preview
Loading…
Cancel
Save