generated from muhtadeetaron/nextjs-template
130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import Image from "next/image";
|
|
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
|
import FormField from "@/components/FormField";
|
|
import { login } from "@/lib/auth";
|
|
import DestructibleAlert from "@/components/DestructibleAlert";
|
|
import { useAuth } from "@/context/AuthContext";
|
|
import { LoginForm } from "@/types/auth";
|
|
import { CircleAlert } from "lucide-react";
|
|
|
|
const LoginPage = () => {
|
|
const router = useRouter();
|
|
const { setToken } = useAuth();
|
|
|
|
const [form, setForm] = useState<LoginForm>({
|
|
identifier: "",
|
|
password: "",
|
|
});
|
|
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const loginUser = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
await login(form, setToken);
|
|
router.push("/home");
|
|
} catch (err: unknown) {
|
|
console.error(err);
|
|
|
|
if (
|
|
typeof err === "object" &&
|
|
err !== null &&
|
|
"message" in err &&
|
|
typeof err.message === "string"
|
|
) {
|
|
setError(err.message);
|
|
} else {
|
|
setError("An unexpected error occurred.");
|
|
}
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<BackgroundWrapper>
|
|
<div className="flex-1 min-h-screen">
|
|
<div className="min-h-screen overflow-y-auto">
|
|
<div className="min-h-full flex flex-col justify-center gap-10 mt-7 mx-6 py-8">
|
|
{/* Logo Container */}
|
|
<div
|
|
className="w-full self-center mt-7"
|
|
style={{ aspectRatio: "368/89" }}
|
|
>
|
|
<Image
|
|
src="/images/logo/logo.png"
|
|
alt="Logo"
|
|
width={368}
|
|
height={89}
|
|
className="w-full h-full object-contain"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Form Container */}
|
|
<div className="flex flex-col justify-between gap-10">
|
|
<div className="flex flex-col w-full gap-5">
|
|
<FormField
|
|
title="Email \ Username"
|
|
value={form.identifier}
|
|
placeholder="Enter your email address..."
|
|
handleChangeText={(value) =>
|
|
setForm({ ...form, identifier: value })
|
|
}
|
|
/>
|
|
<FormField
|
|
title="Password"
|
|
value={form.password}
|
|
placeholder="Enter a password"
|
|
handleChangeText={(value) =>
|
|
setForm({ ...form, password: value })
|
|
}
|
|
/>
|
|
</div>
|
|
{error && <DestructibleAlert text={error} extraStyles="" />}
|
|
|
|
<h1 className="flex justify-center items-center gap-2 bg-green-200 p-4 rounded-full">
|
|
<CircleAlert size={20} />
|
|
Your login details will be remembered.
|
|
</h1>
|
|
|
|
<button
|
|
onClick={loginUser}
|
|
disabled={isLoading}
|
|
className="w-full h-14 flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span
|
|
className="font-medium"
|
|
style={{ fontFamily: "Montserrat, sans-serif" }}
|
|
>
|
|
{isLoading ? "Logging in..." : "Login"}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Register Link */}
|
|
<p
|
|
className="text-center mb-[70px]"
|
|
style={{ fontFamily: "Montserrat, sans-serif" }}
|
|
>
|
|
Don't have an account?{" "}
|
|
<Link href="/register" className="text-[#276ac0] hover:underline">
|
|
Register here.
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BackgroundWrapper>
|
|
);
|
|
};
|
|
|
|
export default LoginPage;
|