naja/vberp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perbaikan visual villa bugis

Browse Source
This commit is contained in:
aji@catalis.app
2025-07-20 23:25:19 +07:00
parent 8d7e5dae76
commit 3f47f58490
1 changed files with 257 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
src/routes/login/+page.svelte
View File

@@ -1,102 +1,229 @@
<script lang="ts"> <script lang="ts">
import { supabase } from "$lib/supabaseClient"; import { supabase } from "$lib/supabaseClient";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import logo from "$lib/images/villa.png"; import logo from "$lib/images/villa.png"; // Confirm this path and image is suitable
let email = ""; let email = "";
let password = ""; let password = "";
let error = ""; let error = "";
let isLoading = false;
let showPassword = false; // New state for password visibility
const togglePasswordVisibility = () => {
showPassword = !showPassword;
};
const handleLogin = async () => { const handleLogin = async () => {
error = ""; error = "";
const { data, error: loginError } = isLoading = true;
await supabase.auth.signInWithPassword({ email, password }); try {
const { data, error: loginError } =
await supabase.auth.signInWithPassword({ email, password });
if (loginError) { if (loginError) {
error = loginError.message; if (
} else { loginError.message.includes("Invalid login credentials") ||
const { data: dataUser, error: eror } = await supabase loginError.message.includes("Email not confirmed")
.from("vb_users") ) {
.select("*") error = "Incorrect email or password. Please try again.";
.eq("id", data.user.id) } else if (loginError.message.includes("network")) {
.single(); error =
"Network error. Please check your internet connection and try again.";
if (eror) { } else {
error = "Failed to fetch user data."; error = `Login failed: ${loginError.message}`;
return; }
} else { } else {
// Set user data in local storage or a store const { data: dataUser, error: userDataError } = await supabase
localStorage.setItem("user", JSON.stringify(dataUser)); .from("vb_users")
} .select("*")
.eq("id", data.user.id)
.single();
goto("/backoffice"); if (userDataError) {
error =
"Failed to fetch user data. Please contact support if the issue persists.";
console.error("User data fetch error:", userDataError);
return; // Stop execution if user data fetch fails
} else {
localStorage.setItem("user", JSON.stringify(dataUser));
}
goto("/backoffice");
}
} catch (err) {
error = "An unexpected error occurred. Please try again.";
console.error("Login process error:", err);
} finally {
isLoading = false;
} }
}; };
</script> </script>
<div <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" class="min-h-screen flex flex-col md:flex-row items-center justify-center bg-gradient-to-br from-blue-50 to-purple-100 px-6 py-12 animate-fade-in"
> >
<!-- Ilustrasi --> <div class="hidden md:flex w-1/2 justify-center items-center p-8">
<div class="hidden md:flex w-1/2 justify-center items-center"> <img
<img src={logo} alt="Login Illustration" class="w-full max-w-sm" /> src={logo}
alt="Login Illustration - Your App's Purpose"
class="w-full max-w-sm object-contain animate-float"
/>
</div> </div>
<!-- Form Login --> <div
<div class="w-full max-w-md bg-white rounded-3xl shadow-2xl p-10 space-y-6"> class="w-full max-w-md bg-white rounded-3xl shadow-2xl p-10 space-y-7 transform transition-transform duration-500 ease-out animate-slide-up"
<h2 class="text-4xl font-bold text-center text-gray-800"> >
Welcome Back 👋 <h2
class="text-4xl font-extrabold text-center text-gray-900 leading-tight"
>
Welcome Back <span class="wave-emoji">👋</span>
</h2> </h2>
<p class="text-center text-sm text-gray-500"> <p class="text-center text-md text-gray-600">
Please enter your login credentials Securely access your account to manage everything.
</p> </p>
{#if error} {#if error}
<div <div
class="bg-red-100 border border-red-300 text-red-700 text-sm p-3 rounded-lg animate-pulse" role="alert"
aria-live="assertive"
class="bg-red-50 border border-red-300 text-red-700 text-sm p-4 rounded-xl transition-all duration-300 ease-in-out transform opacity-100 scale-100 shadow-sm"
> >
{error} <div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd"
/>
</svg>
{error}
</div>
</div> </div>
{/if} {/if}
<form on:submit|preventDefault={handleLogin} class="space-y-5"> <form on:submit|preventDefault={handleLogin} class="space-y-6">
<div> <div>
<label <label
for="email" for="email"
class="block text-sm font-medium text-gray-700 mb-1" class="block text-sm font-medium text-gray-700 mb-2"
>Email</label >Email Address</label
> >
<input <input
id="email" id="email"
type="email" type="email"
bind:value={email} bind:value={email}
placeholder="you@example.com" placeholder="your.email@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" class="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-3 focus:ring-blue-400 focus:outline-none shadow-sm transition-all duration-200"
required required
autocomplete="email"
/> />
</div> </div>
<div> <div>
<label <label
for="password" for="password"
class="block text-sm font-medium text-gray-700 mb-1" class="block text-sm font-medium text-gray-700 mb-2"
>Password</label >Password</label
> >
<input <div class="relative">
id="password" <input
type="password" id="password"
bind:value={password} type={showPassword ? "text" : "password"}
placeholder="••••••••" bind:value={password}
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" placeholder="••••••••"
required class="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-3 focus:ring-blue-400 focus:outline-none shadow-sm transition-all duration-200 pr-12"
/> required
autocomplete="current-password"
/>
<button
type="button"
class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-500 hover:text-gray-700 transition"
on:click={togglePasswordVisibility}
aria-label={showPassword
? "Hide password"
: "Show password"}
>
{#if showPassword}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.249-.756A10.05 10.05 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.158 5.447M12 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
{/if}
</button>
</div>
<a
href="/forgot-password"
class="text-sm text-blue-600 hover:underline font-medium mt-2 block text-right"
>Forgot password?</a
>
</div> </div>
<button <button
type="submit" 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" class="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-xl transition duration-300 shadow-lg hover:shadow-xl flex items-center justify-center transform hover:-translate-y-0.5"
disabled={isLoading}
> >
Login {#if isLoading}
<svg
class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
class="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="4"
></circle>
<path
class="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
Authenticating...
{:else}
Login
{/if}
</button> </button>
</form> </form>
@@ -104,8 +231,90 @@
Don’t have an account? Don’t have an account?
<a <a
href="/register" href="/register"
class="text-blue-600 hover:underline font-medium">Sign up</a class="text-blue-600 hover:underline font-bold ml-1"
>Sign Up Now</a
> >
</p> </p>
</div> </div>
</div> </div>
<style>
/* Tailwind CSS animations or custom keyframes */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slide-up {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(14deg);
}
20% {
transform: rotate(-8deg);
}
30% {
transform: rotate(14deg);
}
40% {
transform: rotate(-4deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.animate-fade-in {
animation: fade-in 0.8s ease-out forwards;
}
.animate-slide-up {
animation: slide-up 0.7s ease-out forwards;
animation-delay: 0.2s; /* Delay form animation slightly */
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.wave-emoji {
display: inline-block;
animation: wave 2.5s infinite;
transform-origin: 70% 70%;
}
</style>