80 lines
2.4 KiB
Svelte
80 lines
2.4 KiB
Svelte
<script>
|
|
import { addSuccessToast } from "$lib/components/store";
|
|
import Toasts from "$lib/components/Toasts.svelte";
|
|
let username = $state("");
|
|
let password = $state("");
|
|
let error = $state("");
|
|
|
|
// Simulate form submission (replace with real login logic)
|
|
async function handleLogin() {
|
|
error = "";
|
|
if (!username || !password) {
|
|
error = "Please fill in both fields";
|
|
return;
|
|
}
|
|
try {
|
|
const resp = await fetch("/api/auth/login", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"App-Token": import.meta.env.VITE_AUTH_APP_TOKEN,
|
|
},
|
|
body: JSON.stringify({ username, password }),
|
|
credentials: "include", // Important to send cookies with requests
|
|
});
|
|
addSuccessToast("Login successful!");
|
|
// setToken(resp.token);
|
|
// goto("/test");
|
|
console.log(resp);
|
|
} catch (err) {
|
|
if (err instanceof Error) {
|
|
error = "Login error: " + err.message;
|
|
} else {
|
|
error = "An unknown error occurred";
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<Toasts />
|
|
<div class="flex justify-center items-center min-h-screen bg-gray-100">
|
|
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
|
|
<h1 class="text-2xl font-bold text-center mb-6">Login</h1>
|
|
{#if error}
|
|
<p class="text-red-500 text-center mb-4">{error}</p>
|
|
{/if}
|
|
<form onsubmit={handleLogin} class="space-y-4">
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700">
|
|
Username:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
bind:value={username}
|
|
class="w-full mt-1 p-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-300"
|
|
placeholder="user@example.com"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-gray-700">
|
|
Password:
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
bind:value={password}
|
|
class="w-full mt-1 p-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-300"
|
|
placeholder="••••••••"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
|
|
>
|
|
Login
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|