75 lines
3.1 KiB
Svelte
75 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
let activeTab = $state<'login' | 'register'>('login');
|
|
let username = $state('');
|
|
let password = $state('');
|
|
let error = $state('');
|
|
|
|
async function handleSubmit() {
|
|
const endpoint = activeTab === 'login' ? '/api/auth/login' : '/api/auth/register';
|
|
const res = await fetch(`http://localhost:3000${endpoint}`, {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
|
|
if (res.ok) {
|
|
window.location.href = '/';
|
|
} else {
|
|
error = 'Invalid credentials';
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<div class="flex-1 flex items-center justify-center -mt-16">
|
|
<div class="w-full max-w-xs">
|
|
<h1 class="text-4xl text-white mb-8" style="font-family: 'Caveat', cursive;">loft</h1>
|
|
|
|
<div class="flex mb-6 border-b border-sky-200/20">
|
|
<button
|
|
onclick={() => activeTab = 'login'}
|
|
class="flex-1 py-2 text-sm transition-colors cursor-pointer {activeTab === 'login' ? 'text-white border-b border-white -mb-px' : 'text-white/40 hover:text-white/60'}"
|
|
>
|
|
Login
|
|
</button>
|
|
<button
|
|
onclick={() => activeTab = 'register'}
|
|
class="flex-1 py-2 text-sm transition-colors cursor-pointer {activeTab === 'register' ? 'text-white border-b border-white -mb-px' : '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-white/30 text-xs">Username</label>
|
|
<input
|
|
id="username"
|
|
bind:value={username}
|
|
type="text"
|
|
autocomplete="username"
|
|
class="px-4 py-2 rounded-sm !bg-[#0f1117] border border-sky-200/15 transition-colors hover:bg-black/20 hover:border-sky-200/30 text-white/80 text-sm focus:outline-none focus:border-sky-200/40"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<label for="password" class="text-white/30 text-xs">Password</label>
|
|
<input
|
|
id="password"
|
|
bind:value={password}
|
|
type="password"
|
|
autocomplete="current-password"
|
|
class="px-4 py-2 rounded-sm !bg-[#0f1117] border border-sky-200/15 transition-colors hover:bg-black/20 hover:border-sky-200/30 text-white/80 text-sm focus:outline-none focus:border-sky-200/40"
|
|
/>
|
|
</div>
|
|
{#if error}<p class="text-red-400/60 text-xs">{error}</p>{/if}
|
|
<button
|
|
onclick={handleSubmit}
|
|
class="mt-1 px-4 py-2 border border-sky-200/15 text-white/40 hover:border-sky-200/30 hover:text-white/60 text-sm transition-colors rounded-sm cursor-pointer">
|
|
{activeTab === 'login' ? 'Login' : 'Register'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|