begin js(x) to ts(x)
This commit is contained in:
213
src/components/Login.tsx
Normal file
213
src/components/Login.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import React, { useState, useRef, useEffect, type FormEvent } from "react";
|
||||
import Button from "@mui/joy/Button";
|
||||
import { toast } from "react-toastify";
|
||||
import { API_URL } from "@/config";
|
||||
|
||||
function getCookie(name: string): string | null {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return decodeURIComponent(parts.pop()!.split(';').shift()!);
|
||||
return null;
|
||||
}
|
||||
|
||||
function clearCookie(name: string): void {
|
||||
document.cookie = `${name}=; Max-Age=0; path=/;`;
|
||||
}
|
||||
|
||||
interface LoginPageProps {
|
||||
loggedIn?: boolean;
|
||||
accessDenied?: boolean;
|
||||
requiredRoles?: string[] | string;
|
||||
}
|
||||
|
||||
export default function LoginPage({ loggedIn = false, accessDenied = false, requiredRoles = [] }: LoginPageProps): React.ReactElement {
|
||||
const [username, setUsername] = useState<string>("");
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const passwordRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (passwordRef.current && password === "") {
|
||||
passwordRef.current.value = "";
|
||||
}
|
||||
}, []);
|
||||
|
||||
async function handleSubmit(e: FormEvent<HTMLFormElement>): Promise<void> {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
if (!username || !password) {
|
||||
setLoading(false);
|
||||
if (!toast.isActive("login-missing-data-toast")) {
|
||||
toast.error("Username and password are required", {
|
||||
toastId: "login-missing-data-toast",
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new URLSearchParams({
|
||||
username,
|
||||
password,
|
||||
grant_type: "password",
|
||||
scope: "",
|
||||
client_id: "",
|
||||
client_secret: "",
|
||||
});
|
||||
|
||||
const resp = await fetch(`${API_URL}/auth/login`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
||||
credentials: "include",
|
||||
body: formData.toString(),
|
||||
});
|
||||
|
||||
if (resp.status === 401) {
|
||||
toast.error("Invalid username or password", {
|
||||
toastId: "login-error-invalid-toast",
|
||||
});
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!resp.ok) {
|
||||
const data = await resp.json().catch(() => ({}));
|
||||
toast.error(data.detail ? `Login failed: ${data.detail}` : "Login failed", {
|
||||
toastId: "login-error-failed-toast",
|
||||
});
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
if (data.access_token) {
|
||||
toast.success("Login successful!", {
|
||||
toastId: "login-success-toast",
|
||||
});
|
||||
// Check for returnUrl in query params
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const returnUrl = urlParams.get('returnUrl');
|
||||
// Validate returnUrl is a relative path (security: prevent open redirect)
|
||||
const returnTo = (returnUrl && returnUrl.startsWith('/')) ? returnUrl : '/';
|
||||
window.location.href = returnTo;
|
||||
} else {
|
||||
toast.error("Login failed: no access token received", {
|
||||
toastId: "login-error-no-token-toast",
|
||||
});
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("Network error during login", {
|
||||
toastId: "login-error-network-toast",
|
||||
});
|
||||
console.error("Login error:", error);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (loggedIn) {
|
||||
const rolesList = Array.isArray(requiredRoles) ? requiredRoles : (requiredRoles ? requiredRoles.split(',') : []);
|
||||
return (
|
||||
<div className="flex items-center justify-center px-4 py-16">
|
||||
<div className="max-w-md w-full bg-white dark:bg-[#1a1a1a] rounded-2xl shadow-xl shadow-neutral-900/5 dark:shadow-black/30 border border-neutral-200/60 dark:border-neutral-800/60 px-10 py-8 text-center">
|
||||
<img className="logo-auth mx-auto mb-5" src="/images/zim.png" alt="Logo" />
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-3 tracking-tight">Access Denied</h2>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
|
||||
You don't have permission to access this resource.
|
||||
</p>
|
||||
{rolesList.length > 0 && (
|
||||
<div className="mb-5 p-3 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl border border-neutral-200/60 dark:border-neutral-700/60">
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-500 mb-2 font-medium">Required role{rolesList.length > 1 ? 's' : ''}:</p>
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{rolesList.map((role, i) => (
|
||||
<span key={i} className="px-2.5 py-1 text-xs font-semibold bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300 rounded-full">
|
||||
{role}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs italic text-neutral-400 dark:text-neutral-500 mb-5">
|
||||
If you believe this is an error, scream at codey.
|
||||
</p>
|
||||
<Button
|
||||
className="w-full py-2.5 px-6 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 font-semibold rounded-xl hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-colors shadow-sm"
|
||||
color="primary"
|
||||
variant="solid"
|
||||
onClick={() => (window.location.href = "/")}
|
||||
>
|
||||
Go Home
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center px-4 py-16">
|
||||
<div className="max-w-md w-full bg-white dark:bg-[#1a1a1a] rounded-2xl shadow-xl shadow-neutral-900/5 dark:shadow-black/30 border border-neutral-200/60 dark:border-neutral-800/60 px-10 py-8">
|
||||
<div className="text-center mb-8">
|
||||
<img className="logo-auth mx-auto mb-4" src="/images/zim.png" alt="Logo" />
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white tracking-tight">
|
||||
Log In
|
||||
</h2>
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
|
||||
Sign in to continue
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-5" onSubmit={handleSubmit} noValidate>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="username" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
autoComplete="off"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
disabled={loading}
|
||||
className="w-full border border-neutral-200 dark:border-neutral-700 rounded-xl px-4 py-3 bg-white dark:bg-neutral-900/50 text-neutral-900 dark:text-white focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 transition-all outline-none"
|
||||
placeholder="Enter your username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="password" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
autoComplete="new-password"
|
||||
spellCheck="false"
|
||||
ref={passwordRef}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
disabled={loading}
|
||||
className="w-full border border-neutral-200 dark:border-neutral-700 rounded-xl px-4 py-3 bg-white dark:bg-neutral-900/50 text-neutral-900 dark:text-white focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 transition-all outline-none"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className={`w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-500/30 text-white rounded-xl font-semibold shadow-sm transition-all ${loading ? "opacity-60 cursor-not-allowed" : ""}`}
|
||||
>
|
||||
{loading ? "Signing In..." : "Sign In"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user