119 lines
4.1 KiB
JavaScript
119 lines
4.1 KiB
JavaScript
"use client";
|
||
import Layout from "@/components/layout/Layout";
|
||
import Link from "next/link";
|
||
import { useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
export default function Login() {
|
||
const [email, setEmail] = useState("");
|
||
const [password, setPassword] = useState("");
|
||
const [error, setError] = useState("");
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [wrongCred, setWrongCred] = useState(false);
|
||
const router = useRouter();
|
||
|
||
const handleLogin = async (e) => {
|
||
e.preventDefault();
|
||
setError("");
|
||
setIsLoading(true);
|
||
|
||
// Simulate a login validation (replace this with actual logic or API calls)
|
||
if (email === "test@example.com" && password === "password123") {
|
||
// Successful login simulation
|
||
router.push("/client-area");
|
||
} else {
|
||
setError("Invalid login credentials, please try again.");
|
||
setWrongCred(true);
|
||
}
|
||
|
||
setIsLoading(false);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Layout headerStyle={6} footerStyle={3} transparent={false}>
|
||
<section className="login__area-one">
|
||
<div className="container">
|
||
<div className="box-form-login">
|
||
<div className="head-login">
|
||
<h3>Client Area</h3>
|
||
<p className={wrongCred ? "display-none" : ""}>
|
||
Login with your email
|
||
</p>
|
||
<p className={wrongCred ? "error-red" : "display-none"}>
|
||
Invalid login credentials, please try again.
|
||
</p>
|
||
<div className="form-login">
|
||
<form onSubmit={handleLogin}>
|
||
<div className="form-group">
|
||
<input
|
||
type="text"
|
||
className="form-control account"
|
||
placeholder="Email Address"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<input
|
||
type="password"
|
||
className="form-control"
|
||
placeholder="Password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
minLength={8}
|
||
required
|
||
/>
|
||
<span className="view-password" />
|
||
</div>
|
||
<div className="box-forgot-pass">
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
className="cb-remember"
|
||
defaultValue={1}
|
||
/>{" "}
|
||
Remember me
|
||
</label>
|
||
<Link href="/forgot-password">Forgot Password ?</Link>
|
||
</div>
|
||
<div className="form-group">
|
||
{!isLoading ? (
|
||
<input
|
||
type="submit"
|
||
className="btn btn-login"
|
||
defaultValue="Login"
|
||
/>
|
||
) : (
|
||
<div
|
||
className="btn btn-login btn-loader"
|
||
defaultValue="Register now"
|
||
>
|
||
<div
|
||
className="spinner-border text-light"
|
||
role="status"
|
||
>
|
||
<span className="sr-only">Loading...</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</form>
|
||
<p>
|
||
Don’t have an account?{" "}
|
||
<Link href="/register" className="link-bold">
|
||
Register
|
||
</Link>{" "}
|
||
now
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Layout>
|
||
</>
|
||
);
|
||
}
|