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,17 +135,9 @@
</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">
<p class="mb-3 text-center text-xs text-muted-foreground">Single sign-on</p>
<Button <Button
type="button" type="button"
variant="secondary" variant="secondary"
@@ -156,30 +148,32 @@
<LogIn class="size-4" /> <LogIn class="size-4" />
{oidcLoggingIn ? 'Redirecting…' : 'Login with Authentik'} {oidcLoggingIn ? 'Redirecting…' : 'Login with Authentik'}
</Button> </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">
<p class="mb-3 text-center text-xs text-muted-foreground">Access token</p>
<form <form
class="flex flex-col gap-2.5" class="flex flex-col gap-2.5"
onsubmit={(e) => { e.preventDefault(); connect() }} onsubmit={(e) => { e.preventDefault(); connect() }}
> >
<div class="relative"> <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" /> <Lock class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground/50" />
<Input <Input
type="password" type="password"
placeholder="Bearer token" placeholder="Bearer token"
class="pl-8 text-sm" class="pl-9"
bind:value={token} bind:value={token}
/> />
</div> </div>
<Button type="submit" disabled={connecting} size="sm" class="w-full gap-1.5"> <Button type="submit" disabled={connecting} class="w-full">
{connecting ? 'Connecting…' : 'Connect'} {connecting ? 'Connecting…' : 'Connect'}
</Button> </Button>
</form> </form>
</div> </div>
</div>
{/if} {/if}
<!-- Error --> <!-- Error -->