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>
</div>
{: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 -->
<div class="flex w-full gap-3">
<!-- Authentik column -->
<div class="flex flex-1 flex-col rounded-xl border border-white/5 bg-background/40 p-4">
<p class="mb-3 text-center text-xs text-muted-foreground">Single sign-on</p>
<Button
type="button"
variant="secondary"
disabled={oidcLoggingIn}
onclick={loginWithAuthentik}
class="w-full gap-2"
>
<LogIn class="size-4" />
{oidcLoggingIn ? 'Redirecting…' : 'Login with Authentik'}
</Button>
<div class="flex w-full flex-col gap-3">
<!-- Authentik row -->
<Button
type="button"
variant="secondary"
disabled={oidcLoggingIn}
onclick={loginWithAuthentik}
class="w-full gap-2"
>
<LogIn class="size-4" />
{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>
<!-- Token column -->
<div class="flex flex-1 flex-col rounded-xl border border-white/5 bg-background/40 p-4">
<p class="mb-3 text-center text-xs text-muted-foreground">Access token</p>
<form
class="flex flex-col gap-2.5"
onsubmit={(e) => { e.preventDefault(); connect() }}
>
<div class="relative">
<Lock class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground/50" />
<Input
type="password"
placeholder="Bearer token"
class="pl-8 text-sm"
bind:value={token}
/>
</div>
<Button type="submit" disabled={connecting} size="sm" class="w-full gap-1.5">
{connecting ? 'Connecting…' : 'Connect'}
</Button>
</form>
</div>
<!-- Token row -->
<form
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" />
<Input
type="password"
placeholder="Bearer token"
class="pl-9"
bind:value={token}
/>
</div>
<Button type="submit" disabled={connecting} class="w-full">
{connecting ? 'Connecting…' : 'Connect'}
</Button>
</form>
</div>
{/if}