salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: igny8 project

Browse Source
This commit is contained in:
igny8
2025-11-09 10:27:02 +00:00
commit 60b8188111
27265 changed files with 4360521 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/src/components/auth/ProtectedRoute.tsx Normal file
View File

@@ -0,0 +1,96 @@
import { useEffect, ReactNode, useState } from "react";
import { Navigate, useLocation } from "react-router";
import { useAuthStore } from "../../store/authStore";
import { useErrorHandler } from "../../hooks/useErrorHandler";
import { trackLoading } from "../common/LoadingStateMonitor";
interface ProtectedRouteProps {
children: ReactNode;
}
/**
* ProtectedRoute component - guards routes requiring authentication
* Redirects to /signin if user is not authenticated
*/
export default function ProtectedRoute({ children }: ProtectedRouteProps) {
const { isAuthenticated, loading } = useAuthStore();
const location = useLocation();
const { addError } = useErrorHandler('ProtectedRoute');
const [showError, setShowError] = useState(false);
const [errorMessage, setErrorMessage] = useState<string>('');
// Track loading state
useEffect(() => {
trackLoading('auth-loading', loading);
}, [loading]);
// Immediate check on mount: if loading is true, reset it immediately
useEffect(() => {
if (loading) {
console.warn('ProtectedRoute: Loading state is true on mount, resetting immediately');
useAuthStore.setState({ loading: false });
}
}, []);
// Safety timeout: if loading becomes true and stays stuck, show error
useEffect(() => {
if (loading) {
const timeout1 = setTimeout(() => {
setErrorMessage('Authentication check is taking longer than expected. This may indicate a network or server issue.');
setShowError(true);
addError(new Error('Auth loading stuck for 3 seconds'), 'ProtectedRoute');
}, 3000);
const timeout2 = setTimeout(() => {
console.error('ProtectedRoute: Loading state stuck for 5 seconds, forcing reset');
useAuthStore.setState({ loading: false });
setShowError(false);
}, 5000);
return () => {
clearTimeout(timeout1);
clearTimeout(timeout2);
};
} else {
setShowError(false);
}
}, [loading, addError]);
// Show loading state while checking authentication
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
<div className="text-center max-w-md px-4">
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500 mb-4"></div>
<p className="text-lg font-medium text-gray-800 dark:text-white mb-2">Loading...</p>
{showError && (
<div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
<p className="text-sm text-yellow-800 dark:text-yellow-200 mb-3">
{errorMessage}
</p>
<button
onClick={() => {
useAuthStore.setState({ loading: false });
setShowError(false);
window.location.reload();
}}
className="px-4 py-2 text-sm bg-yellow-600 text-white rounded hover:bg-yellow-700"
>
Retry or Reload Page
</button>
</div>
)}
</div>
</div>
);
}
// Redirect to signin if not authenticated
if (!isAuthenticated) {
return <Navigate to="/signin" state={{ from: location }} replace />;
}
return <>{children}</>;
}

192
frontend/src/components/auth/SignInForm.tsx Normal file
View File

@@ -0,0 +1,192 @@
import { useState } from "react";
import { Link, useNavigate, useLocation } from "react-router";
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "../../icons";
import Label from "../form/Label";
import Input from "../form/input/InputField";
import Checkbox from "../form/input/Checkbox";
import Button from "../ui/button/Button";
import { useAuthStore } from "../../store/authStore";
export default function SignInForm() {
const [showPassword, setShowPassword] = useState(false);
const [isChecked, setIsChecked] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const navigate = useNavigate();
const location = useLocation();
const { login, loading } = useAuthStore();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError("");
if (!email || !password) {
setError("Please enter both email and password");
return;
}
try {
await login(email, password);
// Redirect to the page user was trying to access, or home
const from = (location.state as any)?.from?.pathname || "/";
navigate(from, { replace: true });
} catch (err: any) {
setError(err.message || "Login failed. Please check your credentials.");
}
};
return (
<div className="flex flex-col flex-1">
<div className="w-full max-w-md pt-10 mx-auto">
{/* Back link removed - users shouldn't go back to dashboard when not logged in */}
</div>
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
<div>
<div className="mb-5 sm:mb-8">
<h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">
Sign In
</h1>
<p className="text-sm text-gray-500 dark:text-gray-400">
Enter your email and password to sign in!
</p>
</div>
<div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
<button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
fill="#4285F4"
/>
<path
d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
fill="#34A853"
/>
<path
d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
fill="#FBBC05"
/>
<path
d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
fill="#EB4335"
/>
</svg>
Sign in with Google
</button>
<button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
<svg
width="21"
className="fill-current"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M15.6705 1.875H18.4272L12.4047 8.75833L19.4897 18.125H13.9422L9.59717 12.4442L4.62554 18.125H1.86721L8.30887 10.7625L1.51221 1.875H7.20054L11.128 7.0675L15.6705 1.875ZM14.703 16.475H16.2305L6.37054 3.43833H4.73137L14.703 16.475Z" />
</svg>
Sign in with X
</button>
</div>
<div className="relative py-3 sm:py-5">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-200 dark:border-gray-800"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="p-2 text-gray-400 bg-white dark:bg-gray-900 sm:px-5 sm:py-2">
Or
</span>
</div>
</div>
<form onSubmit={handleSubmit}>
<div className="space-y-6">
{error && (
<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
{error}
</div>
)}
<div>
<Label>
Email <span className="text-error-500">*</span>{" "}
</Label>
<Input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="info@gmail.com"
required
/>
</div>
<div>
<Label>
Password <span className="text-error-500">*</span>{" "}
</Label>
<div className="relative">
<Input
type={showPassword ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter your password"
required
/>
<span
onClick={() => setShowPassword(!showPassword)}
className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"
>
{showPassword ? (
<EyeIcon className="fill-gray-500 dark:fill-gray-400 size-5" />
) : (
<EyeCloseIcon className="fill-gray-500 dark:fill-gray-400 size-5" />
)}
</span>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Checkbox checked={isChecked} onChange={setIsChecked} />
<span className="block font-normal text-gray-700 text-theme-sm dark:text-gray-400">
Keep me logged in
</span>
</div>
<Link
to="/reset-password"
className="text-sm text-brand-500 hover:text-brand-600 dark:text-brand-400"
>
Forgot password?
</Link>
</div>
<div>
<Button
className="w-full"
size="sm"
type="submit"
disabled={loading}
>
{loading ? "Signing in..." : "Sign in"}
</Button>
</div>
</div>
</form>
<div className="mt-5">
<p className="text-sm font-normal text-center text-gray-700 dark:text-gray-400 sm:text-start">
Don&apos;t have an account? {""}
<Link
to="/signup"
className="text-brand-500 hover:text-brand-600 dark:text-brand-400"
>
Sign Up
</Link>
</p>
</div>
</div>
</div>
</div>
</div>
);
}

262
frontend/src/components/auth/SignUpForm.tsx Normal file
View File

@@ -0,0 +1,262 @@
import { useState } from "react";
import { Link, useNavigate } from "react-router";
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from "../../icons";
import Label from "../form/Label";
import Input from "../form/input/InputField";
import Checkbox from "../form/input/Checkbox";
import { useAuthStore } from "../../store/authStore";
export default function SignUpForm() {
const [showPassword, setShowPassword] = useState(false);
const [isChecked, setIsChecked] = useState(false);
const [formData, setFormData] = useState({
firstName: "",
lastName: "",
email: "",
password: "",
username: "",
});
const [error, setError] = useState("");
const navigate = useNavigate();
const { register, loading } = useAuthStore();
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError("");
if (!formData.email || !formData.password || !formData.firstName || !formData.lastName) {
setError("Please fill in all required fields");
return;
}
if (!isChecked) {
setError("Please agree to the Terms and Conditions");
return;
}
try {
// Generate username from email if not provided
const username = formData.username || formData.email.split("@")[0];
await register({
email: formData.email,
password: formData.password,
username: username,
first_name: formData.firstName,
last_name: formData.lastName,
});
// Redirect to home after successful registration
navigate("/", { replace: true });
} catch (err: any) {
setError(err.message || "Registration failed. Please try again.");
}
};
return (
<div className="flex flex-col flex-1 w-full overflow-y-auto lg:w-1/2 no-scrollbar">
<div className="w-full max-w-md mx-auto mb-5 sm:pt-10">
<Link
to="/"
className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
>
<ChevronLeftIcon className="size-5" />
Back to dashboard
</Link>
</div>
<div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
<div>
<div className="mb-5 sm:mb-8">
<h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">
Sign Up
</h1>
<p className="text-sm text-gray-500 dark:text-gray-400">
Enter your email and password to sign up!
</p>
</div>
<div>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-5">
<button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.7511 10.1944C18.7511 9.47495 18.6915 8.94995 18.5626 8.40552H10.1797V11.6527H15.1003C15.0011 12.4597 14.4654 13.675 13.2749 14.4916L13.2582 14.6003L15.9087 16.6126L16.0924 16.6305C17.7788 15.1041 18.7511 12.8583 18.7511 10.1944Z"
fill="#4285F4"
/>
<path
d="M10.1788 18.75C12.5895 18.75 14.6133 17.9722 16.0915 16.6305L13.274 14.4916C12.5201 15.0068 11.5081 15.3666 10.1788 15.3666C7.81773 15.3666 5.81379 13.8402 5.09944 11.7305L4.99473 11.7392L2.23868 13.8295L2.20264 13.9277C3.67087 16.786 6.68674 18.75 10.1788 18.75Z"
fill="#34A853"
/>
<path
d="M5.10014 11.7305C4.91165 11.186 4.80257 10.6027 4.80257 9.99992C4.80257 9.3971 4.91165 8.81379 5.09022 8.26935L5.08523 8.1534L2.29464 6.02954L2.20333 6.0721C1.5982 7.25823 1.25098 8.5902 1.25098 9.99992C1.25098 11.4096 1.5982 12.7415 2.20333 13.9277L5.10014 11.7305Z"
fill="#FBBC05"
/>
<path
d="M10.1789 4.63331C11.8554 4.63331 12.9864 5.34303 13.6312 5.93612L16.1511 3.525C14.6035 2.11528 12.5895 1.25 10.1789 1.25C6.68676 1.25 3.67088 3.21387 2.20264 6.07218L5.08953 8.26943C5.81381 6.15972 7.81776 4.63331 10.1789 4.63331Z"
fill="#EB4335"
/>
</svg>
Sign up with Google
</button>
<button className="inline-flex items-center justify-center gap-3 py-3 text-sm font-normal text-gray-700 transition-colors bg-gray-100 rounded-lg px-7 hover:bg-gray-200 hover:text-gray-800 dark:bg-white/5 dark:text-white/90 dark:hover:bg-white/10">
<svg
width="21"
className="fill-current"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M15.6705 1.875H18.4272L12.4047 8.75833L19.4897 18.125H13.9422L9.59717 12.4442L4.62554 18.125H1.86721L8.30887 10.7625L1.51221 1.875H7.20054L11.128 7.0675L15.6705 1.875ZM14.703 16.475H16.2305L6.37054 3.43833H4.73137L14.703 16.475Z" />
</svg>
Sign up with X
</button>
</div>
<div className="relative py-3 sm:py-5">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-200 dark:border-gray-800"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="p-2 text-gray-400 bg-white dark:bg-gray-900 sm:px-5 sm:py-2">
Or
</span>
</div>
</div>
<form onSubmit={handleSubmit}>
<div className="space-y-5">
{error && (
<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg dark:bg-red-900/20 dark:text-red-400 dark:border-red-800">
{error}
</div>
)}
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
{/* <!-- First Name --> */}
<div className="sm:col-span-1">
<Label>
First Name<span className="text-error-500">*</span>
</Label>
<Input
type="text"
id="firstName"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="Enter your first name"
required
/>
</div>
{/* <!-- Last Name --> */}
<div className="sm:col-span-1">
<Label>
Last Name<span className="text-error-500">*</span>
</Label>
<Input
type="text"
id="lastName"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="Enter your last name"
required
/>
</div>
</div>
{/* <!-- Email --> */}
<div>
<Label>
Email<span className="text-error-500">*</span>
</Label>
<Input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Enter your email"
required
/>
</div>
{/* <!-- Password --> */}
<div>
<Label>
Password<span className="text-error-500">*</span>
</Label>
<div className="relative">
<Input
placeholder="Enter your password"
type={showPassword ? "text" : "password"}
id="password"
name="password"
value={formData.password}
onChange={handleChange}
required
/>
<span
onClick={() => setShowPassword(!showPassword)}
className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2"
>
{showPassword ? (
<EyeIcon className="fill-gray-500 dark:fill-gray-400 size-5" />
) : (
<EyeCloseIcon className="fill-gray-500 dark:fill-gray-400 size-5" />
)}
</span>
</div>
</div>
{/* <!-- Checkbox --> */}
<div className="flex items-center gap-3">
<Checkbox
className="w-5 h-5"
checked={isChecked}
onChange={setIsChecked}
/>
<p className="inline-block font-normal text-gray-500 dark:text-gray-400">
By creating an account means you agree to the{" "}
<span className="text-gray-800 dark:text-white/90">
Terms and Conditions,
</span>{" "}
and our{" "}
<span className="text-gray-800 dark:text-white">
Privacy Policy
</span>
</p>
</div>
{/* <!-- Button --> */}
<div>
<button
type="submit"
disabled={loading}
className="flex items-center justify-center w-full px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? "Signing up..." : "Sign Up"}
</button>
</div>
</div>
</form>
<div className="mt-5">
<p className="text-sm font-normal text-center text-gray-700 dark:text-gray-400 sm:text-start">
Already have an account? {""}
<Link
to="/signin"
className="text-brand-500 hover:text-brand-600 dark:text-brand-400"
>
Sign In
</Link>
</p>
</div>
</div>
</div>
</div>
</div>
);
}