git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-02-01 15:20:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

style(auth): mobile responsive login and setup pages

Browse Source
This commit is contained in:
Sam Chau
2026-01-28 07:42:15 +10:30
parent e3f9c8414e
commit ca0ad56ddd
2 changed files with 54 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/auth/login/+page.svelte
View File

@@ -24,8 +24,8 @@
<title>Login - Profilarr</title>
</svelte:head>
<div class="flex min-h-screen items-center justify-center bg-neutral-100 dark:bg-neutral-900">
<div class="w-full max-w-sm p-8">
<div class="flex min-h-screen items-center justify-center bg-neutral-100 p-4 dark:bg-neutral-900">
<div class="w-full max-w-sm">
<div class="mb-8 flex items-center gap-4">
<img src={logo} alt="Profilarr logo" class="h-12 w-12" />
<div>

60
src/routes/auth/setup/+page.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import type { ActionData } from './$types';
import { enhance } from '$app/forms';
import { UserPlus, Shield, Wifi, KeyRound, ShieldOff } from 'lucide-svelte';
import { UserPlus, Shield, Wifi, KeyRound, ShieldOff, ChevronDown } from 'lucide-svelte';
import Button from '$ui/button/Button.svelte';
import FormInput from '$ui/form/FormInput.svelte';
import { alertStore } from '$alerts/store';
@@ -13,6 +13,7 @@
let username = form?.username ?? '';
let password = '';
let confirmPassword = '';
let authInfoOpen = false;
// Show errors via alert system
$: if (form?.error) {
@@ -24,10 +25,10 @@
<title>Setup - Profilarr</title>
</svelte:head>
<div class="flex min-h-screen items-center justify-center bg-neutral-100 dark:bg-neutral-900">
<div class="flex w-full max-w-3xl gap-12 p-8">
<!-- Left column: Branding and info -->
<div class="flex flex-1 flex-col space-y-6">
<div class="flex min-h-screen items-center justify-center bg-neutral-100 p-4 dark:bg-neutral-900">
<div class="flex w-full max-w-3xl flex-col gap-8 md:flex-row md:gap-12">
<!-- Header - always first -->
<div class="flex flex-col space-y-6 md:flex-1">
<div class="flex items-center gap-4">
<img src={logo} alt="Profilarr logo" class="h-12 w-12" />
<div>
@@ -38,7 +39,8 @@
</div>
</div>
<div class="rounded-xl border border-neutral-200/60 bg-white/50 p-5 shadow-sm backdrop-blur-sm dark:border-neutral-700/60 dark:bg-neutral-800/50">
<!-- Auth info - visible on desktop, hidden on mobile (shown below form) -->
<div class="hidden rounded-xl border border-neutral-200/60 bg-white/50 p-5 shadow-sm backdrop-blur-sm md:block dark:border-neutral-700/60 dark:bg-neutral-800/50">
<p class="text-xs font-medium text-neutral-700 dark:text-neutral-300">
Configure authentication via the <code class="rounded bg-neutral-200 px-1 py-0.5 text-[11px] dark:bg-neutral-700">AUTH</code> environment variable:
</p>
@@ -68,8 +70,8 @@
</div>
</div>
<!-- Right column: Form -->
<div class="flex-1">
<!-- Form -->
<div class="w-full md:flex-1">
<form
method="POST"
class="space-y-6"
@@ -120,6 +122,48 @@
disabled={submitting}
/>
</form>
<!-- Auth info - collapsible on mobile, below form -->
<div class="mt-6 md:hidden">
<button
type="button"
on:click={() => (authInfoOpen = !authInfoOpen)}
class="flex w-full items-center justify-between rounded-lg border border-neutral-200/60 bg-white/50 px-4 py-3 text-left text-sm font-medium text-neutral-700 shadow-sm backdrop-blur-sm dark:border-neutral-700/60 dark:bg-neutral-800/50 dark:text-neutral-300"
>
<span>Auth configuration options</span>
<ChevronDown
size={16}
class="transition-transform {authInfoOpen ? 'rotate-180' : ''}"
/>
</button>
{#if authInfoOpen}
<div class="mt-2 rounded-lg border border-neutral-200/60 bg-white/50 p-4 shadow-sm backdrop-blur-sm dark:border-neutral-700/60 dark:bg-neutral-800/50">
<ul class="space-y-2 text-xs text-neutral-600 dark:text-neutral-400">
<li class="flex items-center gap-2">
<Shield size={12} class="text-neutral-400" />
<code class="font-mono text-neutral-800 dark:text-neutral-200">on</code>
<span>— Full authentication</span>
</li>
<li class="flex items-center gap-2">
<Wifi size={12} class="text-neutral-400" />
<code class="font-mono text-neutral-800 dark:text-neutral-200">local</code>
<span>— Skip for local</span>
</li>
<li class="flex items-center gap-2">
<KeyRound size={12} class="text-neutral-400" />
<code class="font-mono text-neutral-800 dark:text-neutral-200">oidc</code>
<span>— External provider</span>
</li>
<li class="flex items-center gap-2">
<ShieldOff size={12} class="text-neutral-400" />
<code class="font-mono text-neutral-800 dark:text-neutral-200">off</code>
<span>— Reverse proxy</span>
</li>
</ul>
</div>
{/if}
</div>
</div>
</div>
</div>