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