76 lines
3.1 KiB
Svelte
76 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { submit } from '$lib/api';
|
|
|
|
let activeTab = $state<'login' | 'register'>('login');
|
|
let username = $state('');
|
|
let password = $state('');
|
|
let error = $state('');
|
|
|
|
async function handleSubmit() {
|
|
try {
|
|
await submit(activeTab, username, password);
|
|
window.location.href = '/';
|
|
} catch {
|
|
error = 'Invalid credentials';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="-mt-16 flex flex-1 items-center justify-center">
|
|
<div class="w-full max-w-xs">
|
|
<h1 class="mb-8 text-4xl text-white" style="font-family: 'Caveat', cursive;">loft</h1>
|
|
|
|
<div class="mb-6 flex border-b border-sky-200/20">
|
|
<button
|
|
data-testid="auth-tab-login"
|
|
onclick={() => (activeTab = 'login')}
|
|
class="flex-1 cursor-pointer py-2 text-sm transition-colors {activeTab === 'login'
|
|
? '-mb-px border-b border-white text-white'
|
|
: 'text-white/40 hover:text-white/60'}"
|
|
>
|
|
Login
|
|
</button>
|
|
<button
|
|
data-testid="auth-tab-register"
|
|
onclick={() => (activeTab = 'register')}
|
|
class="flex-1 cursor-pointer py-2 text-sm transition-colors {activeTab === 'register'
|
|
? '-mb-px border-b border-white text-white'
|
|
: 'text-white/40 hover:text-white/60'}"
|
|
>
|
|
Register
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex flex-col gap-1">
|
|
<label for="username" class="text-xs text-white/30">Username</label>
|
|
<input
|
|
id="username"
|
|
bind:value={username}
|
|
type="text"
|
|
autocomplete="username"
|
|
class="rounded-sm border border-sky-200/15 bg-[#0f1117]! px-4 py-2 text-sm text-white/80 transition-colors hover:border-sky-200/30 hover:bg-black/20 focus:border-sky-200/40 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label for="password" class="text-xs text-white/30">Password</label>
|
|
<input
|
|
id="password"
|
|
bind:value={password}
|
|
type="password"
|
|
autocomplete="current-password"
|
|
class="rounded-sm border border-sky-200/15 bg-[#0f1117]! px-4 py-2 text-sm text-white/80 transition-colors hover:border-sky-200/30 hover:bg-black/20 focus:border-sky-200/40 focus:outline-none"
|
|
/>
|
|
</div>
|
|
{#if error}<p class="text-xs text-red-400/60">{error}</p>{/if}
|
|
<button
|
|
data-testid="auth-submit"
|
|
onclick={handleSubmit}
|
|
class="mt-1 cursor-pointer rounded-sm border border-sky-200/15 px-4 py-2 text-sm text-white/40 transition-colors hover:border-sky-200/30 hover:text-white/60"
|
|
>
|
|
{activeTab === 'login' ? 'Login' : 'Register'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|