admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: finished login page

Browse Source
This commit is contained in:
Amir Adal
2025-05-21 19:27:08 +02:00
parent ba89880f8a
commit af8b347173
1 changed files with 152 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
web/src/pages/Login/index.tsx
View File

@ -1,68 +1,172 @@
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Mail, Lock, LogIn } from "lucide-react"; import { Mail, Lock } from "lucide-react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import overlay from "@/assets/overlay.jpg"; import overlay from "@/assets/overlay.jpg";
import { useForm, type SubmitHandler } from "react-hook-form";
import { useCallback, useState } from "react";
interface LoginForm {
email: string;
password: string;
}
export default function LoginPage() { export default function LoginPage() {
const {
register,
reset,
handleSubmit,
formState: { errors },
} = useForm<LoginForm>();
const [isLoading, setLoading] = useState(false);
const [error, setError] = useState("");
const [success, setSuccess] = useState("");
const onSubmit: SubmitHandler<LoginForm> = useCallback(
async (data) => {
console.log({ data });
setLoading(true);
setError("");
setSuccess("");
try {
const response = await fetch("/api/v1/login", {
method: "POST",
body: JSON.stringify({
email: data.email,
password: data.password,
}),
headers: {
"Content-Type": "application/json",
},
});
if (response.status != 200) {
const json = await response.json();
const text = json.error || "Unexpected error happened";
setError(
`Failed to create an account. ${
text[0].toUpperCase() + text.slice(1)
}`
);
} else {
setSuccess("You have successfully logged in");
reset();
}
} catch (err) {
console.log(err);
setError("Failed to create account. Unexpected error happened");
} finally {
setLoading(false);
}
},
[reset]
);
return ( return (
<div <div
className="relative min-h-screen bg-cover bg-center" className="relative min-h-screen bg-cover bg-center bg-white"
style={{ backgroundImage: overlay }} style={{ backgroundImage: `url(${overlay})` }}
> >
<div className="absolute inset-0 bg-black bg-opacity-60"></div> <div className="relative z-10 flex items-center justify-center min-h-screen">
<Card className="sm:w-96 sm:min-w-96 sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/90 backdrop-blur-md">
<div className="flex flex-col items-center pt-16 sm:pt-0">
<img
src="/icon.png"
alt="icon"
className="w-16 h-16 mb-4 mt-2 sm:mt-6"
/>
<div className="relative z-10 flex items-center justify-center min-h-screen p-4"> <div className="px-4 sm:mt-4 mt-8">
<Card className="w-full max-w-md sm:max-w-full sm:h-full sm:rounded-none p-6 shadow-lg bg-white/90 backdrop-blur-md"> <h2 className="text-2xl font-bold text-gray-800 text-left w-full">
<div className="flex flex-col items-center"> Sign In
<LogIn className="w-8 h-8 text-gray-700 mb-4" /> </h2>
<h2 className="text-2xl font-bold mb-6 text-gray-800">Login</h2> <h4 className="text-base mb-3 text-gray-400 text-left">
Enter your credentials to access home services and tools.
</h4>
</div>
{/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
<CardContent className="w-full space-y-4"> <CardContent className="w-full space-y-4">
<div> <form onSubmit={handleSubmit(onSubmit)}>
<label <div className="mb-4">
htmlFor="email" <div className="relative">
className="block text-sm font-medium text-gray-700 mb-1" <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
> <Input
Email id="email"
</label> type="email"
<div className="relative"> placeholder="Email Address"
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> className="pl-10"
<Input {...register("email", {
id="email" required: true,
type="email" pattern: {
placeholder="you@example.com" value: /\S+@\S+\.\S+/,
className="pl-10" message: "Invalid email",
/> },
})}
aria-invalid={errors.email ? "true" : "false"}
/>
</div>
{!!errors.email && (
<p className="text-red-500">
{errors.email.message ?? "Email is required"}
</p>
)}
</div> </div>
</div>
<div> <div className="mb-4">
<label <div className="relative">
htmlFor="password" <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
className="block text-sm font-medium text-gray-700 mb-1" <Input
> id="password"
Password type="password"
</label> placeholder="Password"
<div className="relative"> className="pl-10"
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> {...register("password", {
<Input required: true,
id="password" })}
type="password" aria-invalid={errors.password ? "true" : "false"}
placeholder="••••••••" />
className="pl-10" </div>
/> {!!errors.password && (
<p className="text-red-500">
{errors.password.message ?? "Password is required"}
</p>
)}
</div> </div>
</div>
<Button className="w-full mt-2">Log In</Button> {success.length > 0 && (
<div className="text-sm text-center text-gray-600"> <div className="border border-green-400 p-2 rounded bg-green-200 text-sm">
Don’t have an account?{" "} {success}
<Link to="/register" className="text-blue-600 hover:underline"> </div>
Register )}
</Link>
</div> {error.length > 0 && (
<div className="border border-red-400 p-2 rounded bg-red-200 text-sm">
{error}
</div>
)}
<Button
className="w-full mt-2 mb-4"
type="submit"
loading={isLoading}
>
Log In
</Button>
<div className="text-sm text-center text-gray-600">
Don't have an account?{" "}
<Link
to="/register"
className="text-blue-600 hover:underline"
>
Register
</Link>
</div>
</form>
</CardContent> </CardContent>
</div> </div>
</Card> </Card>