Shaun Campbell
348aac996d
All checks were successful
PR Checks / lint-test-and-docker-build (pull_request) Successful in 2m15s
After a successful Credentials sign-in, Auth.js was redirecting to its own built-in /auth/signin page because no callbackUrl was provided. Add a callbackUrl hidden field (pointing to the app root) so Auth.js redirects back to the application after local login completes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
87 lines
2.9 KiB
Svelte
87 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
let { data } = $props();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Sign in — Trips</title>
|
|
</svelte:head>
|
|
|
|
<div class="mx-auto flex min-h-[70vh] w-full max-w-3xl flex-col justify-center px-6 py-12">
|
|
<div class="mb-10">
|
|
<h1 class="text-3xl font-semibold text-slate-900">Sign in</h1>
|
|
<p class="mt-2 text-sm text-slate-500">
|
|
Choose a sign-in method to access Trips.
|
|
</p>
|
|
</div>
|
|
|
|
{#if data.error}
|
|
<div class="mb-6 rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
|
{data.error}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="grid gap-8 md:grid-cols-2">
|
|
<section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<h2 class="text-lg font-semibold text-slate-900">Synology account</h2>
|
|
<p class="mt-2 text-sm text-slate-500">
|
|
Use your Synology SSO account.
|
|
</p>
|
|
<form method="POST" action={data.signinUrl} class="mt-6">
|
|
<input type="hidden" name="csrfToken" />
|
|
<button
|
|
type="submit"
|
|
class="inline-flex w-full items-center justify-center rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-800"
|
|
>
|
|
Sign in with Synology
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<h2 class="text-lg font-semibold text-slate-900">Local account</h2>
|
|
<p class="mt-2 text-sm text-slate-500">
|
|
Sign in with your local username or email.
|
|
</p>
|
|
{#if data.localAuthEnabled}
|
|
<form method="POST" action={data.localSigninUrl} class="mt-6 space-y-4">
|
|
<input type="hidden" name="csrfToken" />
|
|
<input type="hidden" name="callbackUrl" value={data.callbackUrl} />
|
|
<div>
|
|
<label class="text-sm font-medium text-slate-700" for="identifier">
|
|
Username or email
|
|
</label>
|
|
<input
|
|
id="identifier"
|
|
name="identifier"
|
|
autocomplete="username"
|
|
class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-slate-400 focus:outline-none"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label class="text-sm font-medium text-slate-700" for="password">Password</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
autocomplete="current-password"
|
|
type="password"
|
|
class="mt-2 w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-slate-400 focus:outline-none"
|
|
required
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="inline-flex w-full items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-900 transition hover:border-slate-400"
|
|
>
|
|
Sign in locally
|
|
</button>
|
|
</form>
|
|
{:else}
|
|
<div class="mt-6 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-500">
|
|
Local sign-in is disabled.
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
</div>
|
|
</div>
|