112 lines
3.6 KiB
Svelte
112 lines
3.6 KiB
Svelte
<script lang="ts">
|
||
import { supabase } from "$lib/supabaseClient";
|
||
import { goto } from "$app/navigation";
|
||
import logo from "$lib/images/villa.png";
|
||
|
||
let email = "";
|
||
let password = "";
|
||
let error = "";
|
||
|
||
const handleLogin = async () => {
|
||
error = "";
|
||
const { data, error: loginError } =
|
||
await supabase.auth.signInWithPassword({ email, password });
|
||
|
||
if (loginError) {
|
||
error = loginError.message;
|
||
} else {
|
||
const { data: dataUser, error: eror } = await supabase
|
||
.from("vb_users")
|
||
.select("*")
|
||
.eq("id", data.user.id)
|
||
.single();
|
||
|
||
if (eror) {
|
||
error = "Failed to fetch user data.";
|
||
return;
|
||
} else {
|
||
// Set user data in local storage or a store
|
||
localStorage.setItem("user", JSON.stringify(dataUser));
|
||
}
|
||
|
||
goto("/backoffice");
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<div
|
||
class="min-h-screen flex flex-col md:flex-row items-center justify-center bg-gradient-to-br from-gray-50 to-gray-200 px-6 py-12"
|
||
>
|
||
<!-- Ilustrasi -->
|
||
<div class="hidden md:flex w-1/2 justify-center items-center">
|
||
<img src={logo} alt="Login Illustration" class="w-full max-w-sm" />
|
||
</div>
|
||
|
||
<!-- Form Login -->
|
||
<div class="w-full max-w-md bg-white rounded-3xl shadow-2xl p-10 space-y-6">
|
||
<h2 class="text-4xl font-bold text-center text-gray-800">
|
||
Welcome Back 👋
|
||
</h2>
|
||
<p class="text-center text-sm text-gray-500">
|
||
Please enter your login credentials
|
||
</p>
|
||
|
||
{#if error}
|
||
<div
|
||
class="bg-red-100 border border-red-300 text-red-700 text-sm p-3 rounded-lg animate-pulse"
|
||
>
|
||
{error}
|
||
</div>
|
||
{/if}
|
||
|
||
<form on:submit|preventDefault={handleLogin} class="space-y-5">
|
||
<div>
|
||
<label
|
||
for="email"
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>Email</label
|
||
>
|
||
<input
|
||
id="email"
|
||
type="email"
|
||
bind:value={email}
|
||
placeholder="you@example.com"
|
||
class="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:outline-none shadow-sm transition"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label
|
||
for="password"
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>Password</label
|
||
>
|
||
<input
|
||
id="password"
|
||
type="password"
|
||
bind:value={password}
|
||
placeholder="••••••••"
|
||
class="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:outline-none shadow-sm transition"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition duration-200 shadow-md"
|
||
>
|
||
Login
|
||
</button>
|
||
</form>
|
||
|
||
<p class="text-center text-sm text-gray-500">
|
||
Don’t have an account?
|
||
<a
|
||
href="/register"
|
||
class="text-blue-600 hover:underline font-medium">Sign up</a
|
||
>
|
||
</p>
|
||
</div>
|
||
</div>
|