{#if oidcUser}

Signed in via Authentik as {oidcUser}

{/if} {oidcLoggingIn ? 'Redirecting…' : oidcConfigured ? 'Switch account with Authentik' : 'Login with Authentik'}

{ e.preventDefault() save() }} >

{saving ? 'Saving…' : 'Save'}

{#if error}

{error}

{/if} {#if existing.token || oidcConfigured} {/if}

Desktop background

A subtle CSS pattern behind your icons, in the style of magicpattern.design.

{#each PATTERNS as p (p.id)} {@const active = getBackground().pattern === p.id} setBackgroundPattern(p.id)} title={p.label} > {p.label} {#if active}{/if} {/each}

Pattern color

setPatternColor((e.currentTarget as HTMLInputElement).value)} /> {getBackground().color}

onFillToggle(!!v)} /> Custom background fill

{getBackground().fillColor ?? 'Auto'}

Opacity {Math.round(getBackground().opacity * 100)}%

Fade mask {getBackground().fade === 0 ? 'Off' : `${Math.round(getBackground().fade * 100)}%`}

Fades the pattern out toward the edges, like a vignette.

Size {Math.round(getBackground().scale * 100)}%

Rotation {Math.round(getBackground().rotation)}°