fix(web): stack auth options vertically in config screen
Some checks failed
ci / build-test (push) Has been cancelled
ci / docker-build (push) Has been cancelled
Desktop App / Build Linux (amd64) (push) Has been cancelled
Desktop App / Attach to Release (push) Has been cancelled

This commit is contained in:
2026-07-13 23:16:50 +02:00
parent f1ac82255a
commit 515c9b9174

View File

@@ -135,50 +135,44 @@
</Button> </Button>
</div> </div>
{:else} {:else}
<div class="flex items-center gap-3">
<Separator decorative class="flex-1" />
<span class="text-[11px] font-medium uppercase tracking-widest text-muted-foreground/60">authenticate with</span>
<Separator decorative class="flex-1" />
</div>
<!-- Auth options: Authentik + token --> <!-- Auth options: Authentik + token -->
<div class="flex w-full gap-3"> <div class="flex w-full flex-col gap-3">
<!-- Authentik column --> <!-- Authentik row -->
<div class="flex flex-1 flex-col rounded-xl border border-white/5 bg-background/40 p-4"> <Button
<p class="mb-3 text-center text-xs text-muted-foreground">Single sign-on</p> type="button"
<Button variant="secondary"
type="button" disabled={oidcLoggingIn}
variant="secondary" onclick={loginWithAuthentik}
disabled={oidcLoggingIn} class="w-full gap-2"
onclick={loginWithAuthentik} >
class="w-full gap-2" <LogIn class="size-4" />
> {oidcLoggingIn ? 'Redirecting…' : 'Login with Authentik'}
<LogIn class="size-4" /> </Button>
{oidcLoggingIn ? 'Redirecting…' : 'Login with Authentik'}
</Button> <div class="flex items-center gap-3">
<Separator decorative class="flex-1" />
<span class="text-[10px] font-medium uppercase tracking-widest text-muted-foreground/40">or use</span>
<Separator decorative class="flex-1" />
</div> </div>
<!-- Token column --> <!-- Token row -->
<div class="flex flex-1 flex-col rounded-xl border border-white/5 bg-background/40 p-4"> <form
<p class="mb-3 text-center text-xs text-muted-foreground">Access token</p> class="flex flex-col gap-2.5"
<form onsubmit={(e) => { e.preventDefault(); connect() }}
class="flex flex-col gap-2.5" >
onsubmit={(e) => { e.preventDefault(); connect() }} <div class="relative">
> <Lock class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/50" />
<div class="relative"> <Input
<Lock class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground/50" /> type="password"
<Input placeholder="Bearer token"
type="password" class="pl-9"
placeholder="Bearer token" bind:value={token}
class="pl-8 text-sm" />
bind:value={token} </div>
/> <Button type="submit" disabled={connecting} class="w-full">
</div> {connecting ? 'Connecting…' : 'Connect'}
<Button type="submit" disabled={connecting} size="sm" class="w-full gap-1.5"> </Button>
{connecting ? 'Connecting…' : 'Connect'} </form>
</Button>
</form>
</div>
</div> </div>
{/if} {/if}