fix(web): stack auth options vertically in config screen
This commit is contained in:
@@ -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}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user