NeilClack
b76a540dc4
- Consolidated navbar with hamburger menu for mobile - Responsive styling for root/protected layouts and auth pages - Mobile-friendly account, dashboard, license-key, and setup pages
115 lines
3.2 KiB
Svelte
115 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { authClient } from '$lib/auth-client';
|
|
import { page } from '$app/state';
|
|
import { resolve } from '$app/paths';
|
|
import Window from '$lib/components/containers/Window.svelte';
|
|
let email = $state('');
|
|
let password = $state('');
|
|
let error = $state('');
|
|
let rememberMe = $state(false);
|
|
|
|
let verified = $derived(page.url.searchParams.get('verified') === 'true');
|
|
|
|
async function handleSubmit() {
|
|
const { error: authError } = await authClient.signIn.email({
|
|
email,
|
|
password,
|
|
rememberMe
|
|
});
|
|
|
|
if (authError) {
|
|
error = authError.message as string;
|
|
return;
|
|
}
|
|
|
|
window.location.href = '/account';
|
|
}
|
|
</script>
|
|
|
|
<Window>
|
|
{#if verified}
|
|
<div class="mb-4 rounded-lg bg-green-50 px-4 py-3 text-sm text-green-800" role="status">
|
|
Your email has been verified. You can now log in.
|
|
</div>
|
|
{/if}
|
|
|
|
{#if error}
|
|
<div class="mb-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700" role="alert">
|
|
{error}
|
|
</div>
|
|
{/if}
|
|
|
|
<form onsubmit={handleSubmit} class="flex flex-col gap-4">
|
|
<h1 class="text-2xl font-bold text-slate-900">Login</h1>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="email" class="text-sm font-medium text-slate-700"> Email Address </label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
placeholder="Email Address"
|
|
bind:value={email}
|
|
required
|
|
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1.5">
|
|
<label for="password" class="text-sm font-medium text-slate-700"> Password </label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
placeholder="Password"
|
|
bind:value={password}
|
|
required
|
|
class="h-11 w-full rounded-lg border-slate-300 px-3 text-sm text-slate-900 focus:border-indigo-500 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
<label class="flex items-center gap-2 text-sm text-slate-600">
|
|
<input
|
|
type="checkbox"
|
|
bind:checked={rememberMe}
|
|
class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
Remember me
|
|
</label>
|
|
|
|
<button
|
|
type="submit"
|
|
class="mt-1 flex h-11 w-full items-center justify-center rounded-lg bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700"
|
|
>
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-6 flex flex-col gap-2 text-center text-sm">
|
|
<a href={resolve('/forgot-password')} class="text-indigo-600 hover:text-indigo-700">
|
|
Forgot Password?
|
|
</a>
|
|
<span class="text-slate-500">
|
|
Don't have an account?
|
|
<a href={resolve('/register')} class="font-medium text-indigo-600 hover:text-indigo-700">
|
|
Register
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-6 border-t border-slate-200 pt-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="h-px flex-1 bg-slate-200"></div>
|
|
<span class="text-sm text-slate-500">Or</span>
|
|
<div class="h-px flex-1 bg-slate-200"></div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onclick={async () => {
|
|
await authClient.signIn.social({ provider: 'google', callbackURL: '/account' });
|
|
}}
|
|
class="mx-auto mt-4 flex h-11 items-center justify-center rounded-lg bg-white hover:bg-slate-50"
|
|
>
|
|
<img src="light/web_light_sq_SI.svg" alt="Sign In with Google" class="" />
|
|
</button>
|
|
</div>
|
|
</Window>
|