codey/codey.lol
1
0
Fork 0
Code Issues Pull Requests Activity

misc

Browse Source
This commit is contained in:
codey
2025-12-17 13:33:31 -05:00
parent e18aa3f42c
commit c49bfe5a3d
38 changed files with 2436 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/Login.jsx
View File

@@ -14,7 +14,7 @@ function clearCookie(name) {
document.cookie = `${name}=; Max-Age=0; path=/;`;
}
export default function LoginPage({ loggedIn = false }) {
export default function LoginPage({ loggedIn = false, accessDenied = false, requiredRoles = [] }) {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [loading, setLoading] = useState(false);
@@ -80,7 +80,11 @@ export default function LoginPage({ loggedIn = false }) {
toast.success("Login successful!", {
toastId: "login-success-toast",
});
const returnTo = "/";
// 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", {
@@ -98,18 +102,32 @@ export default function LoginPage({ loggedIn = 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-[#1E1E1E] rounded-2xl shadow-xl px-10 py-8 text-center">
<img className="logo-auth mx-auto mb-4" src="/images/zim.png" alt="Logo" />
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">You're already logged in</h2>
<p className="text-sm text-gray-800 dark:text-gray-300 mb-4">But you do not have permission to access this resource.
<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>
<p className="text-xs italic text-gray-800 dark:text-gray-300 mb-4">
If you feel you have received this message in error, scream at codey.
{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="btn"
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 = "/")}
@@ -122,16 +140,23 @@ export default function LoginPage({ loggedIn = false }) {
}
return (
<div className="flex items-start justify-center bg-gray-50 dark:bg-[#121212] px-4 pt-20 py-10">
<div className="max-w-md w-full bg-white dark:bg-[#1E1E1E] rounded-2xl shadow-xl px-10 pb-6">
<h2 className="flex flex-col items-center text-3xl font-semibold text-gray-900 dark:text-white mb-8 font-sans">
<img className="logo-auth mb-4" src="/images/zim.png" alt="Logo" />
Log In
</h2>
<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-6 relative" onSubmit={handleSubmit} noValidate>
{/* Username */}
<div className="relative">
<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"
@@ -141,20 +166,15 @@ export default function LoginPage({ loggedIn = false }) {
onChange={(e) => setUsername(e.target.value)}
required
disabled={loading}
className="peer block w-full px-4 pt-5 pb-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
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"
/>
<label
htmlFor="username"
className="absolute left-4 top-2 text-gray-500 dark:text-gray-400 text-sm transition-all
peer-placeholder-shown:top-5 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-base
peer-focus:top-2 peer-focus:text-sm peer-focus:text-blue-500 dark:peer-focus:text-blue-400"
>
Username
</label>
</div>
{/* Password */}
<div className="relative">
<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"
@@ -166,26 +186,20 @@ export default function LoginPage({ loggedIn = false }) {
onChange={(e) => setPassword(e.target.value)}
required
disabled={loading}
className="peer block w-full px-4 pt-5 pb-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-white placeholder-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
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"
/>
<label
htmlFor="password"
className="absolute left-4 top-2 text-gray-500 dark:text-gray-400 text-sm transition-all
peer-placeholder-shown:top-5 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-base
peer-focus:top-2 peer-focus:text-sm peer-focus:text-blue-500 dark:peer-focus:text-blue-400"
>
Password
</label>
</div>
<button
type="submit"
disabled={loading}
className={`w-full py-3 bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 text-white rounded-lg font-semibold shadow-md transition-colors ${loading ? "opacity-60 cursor-not-allowed" : ""
}`}
>
{loading ? "Signing In..." : "Sign In"}
</button>
<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>