bobbert/peworkshop
1
0 Fork 0
mirror of https://github.com/mudabbir-ahmad/peworkshop.git synced 2026-10-08 03:50:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed a bit

Browse Source
This commit is contained in:
bobbert committed 2025-03-11 21:22:34 +00:00
1 parent e9d831c0a2
commit 9326f2845e
8 files changed
+990 -584
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(auth)/login/page.js
+165 -97
View File
@@ -1,107 +1,175 @@
'use client'; // Mark as a Client Component "use client"; // Mark as a Client Component
import { useState } from 'react'; import { useState } from "react";
import { signIn } from 'next-auth/react'; import { signIn } from "next-auth/react";
import { useRouter } from 'next/navigation'; import { useRouter } from "next/navigation";
import Link from 'next/link'; import Link from "next/link";
export default function Login() { export default function Login() {
const [username, setUsername] = useState(''); const [username, setUsername] = useState("");
const [password, setPassword] = useState(''); const [password, setPassword] = useState("");
const [error, setError] = useState(''); const [error, setError] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const router = useRouter(); const router = useRouter();
const handleLogin = async (e) => { const handleLogin = async (e) => {
e.preventDefault(); e.preventDefault();
setIsLoading(true); setIsLoading(true);
setError(''); setError("");
try { try {
const result = await signIn('credentials', { const result = await signIn("credentials", {
redirect: false, redirect: false,
username, username,
password, password,
}); });
if (result?.error) { if (result?.error) {
setError('Invalid username or password'); setError("Invalid username or password");
setIsLoading(false); setIsLoading(false);
} else { } else {
// Fetch the user role to redirect appropriately // Fetch the user role to redirect appropriately
const response = await fetch('/api/user'); const response = await fetch("/api/user");
const userData = await response.json(); const userData = await response.json();
if (userData.role === 'admin') { if (userData.role === "admin") {
router.push('/admin'); router.push("/admin");
} else { } else {
router.push('/team-selection'); router.push("/team-selection");
}
}
} catch (err) {
setError('An unexpected error occurred');
console.error(err);
setIsLoading(false);
} }
}; }
} catch (err) {
setError("An unexpected error occurred");
console.error(err);
setIsLoading(false);
}
};
return ( return (
<div className="auth-page"> <div className="auth-page">
<div className="page-header"> <div className="page-header">
<div className="back-button">←</div> <div className="back-button">←</div>
<div className="page-title">Login</div> <div className="page-title">Login</div>
<div className="placeholder"></div> <div className="placeholder"></div>
</div> </div>
<div className="auth-container"> <div className="auth-container">
<div className="auth-card"> <div className="auth-card">
<div className="input-container"> <div className="input-container">
<input <input
type="text" type="text"
placeholder="Username" placeholder="Username"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
required required
className="auth-input" className="auth-input"
/> />
</div> </div>
<div className="input-container"> <div className="input-container">
<input <input
type="password" type="password"
placeholder="Password" placeholder="Password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
required required
className="auth-input" className="auth-input"
/> />
</div> </div>
{error && <div className="error-message">{error}</div>} {error && <div className="error-message">{error}</div>}
<button <button
onClick={handleLogin} onClick={handleLogin}
className="auth-button" className="auth-button"
disabled={isLoading} disabled={isLoading}
> >
{isLoading ? 'Logging in...' : 'Log In'} {isLoading ? "Logging in..." : "Log In"}
</button> </button>
<div className="auth-link"> <Link href="/register">
Don't have an account? <Link href="/register">Register</Link> <button className="auth-button">Register</button>
</div> </Link>
</div>
</div>
<div className="nav-bar">
<div className="nav-item">
<div className="nav-icon">🏠</div>
</div>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
</div>
</div> </div>
); </div>
}
<div className="nav-bar">
<div className="nav-item">
<div className="nav-icon">🏠</div>
</div>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
</div>
<style jsx>{`
.auth-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.auth-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 400px;
padding: 20px;
box-sizing: border-box;
}
.auth-card {
width: 100%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: #fff;
}
.input-container {
margin-bottom: 10px;
}
.auth-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.auth-button {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #68543c; /* Updated brown color */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
.error-message {
color: red;
margin-top: 10px;
}
.nav-bar {
position: fixed;
bottom: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #ccc;
padding: 10px 0;
text-align: center;
}
.nav-item {
display: inline-block;
margin: 0 10px;
}
.nav-icon {
font-size: 24px;
}
`}</style>
</div>
);
}
app/(auth)/register/page.js
+170 -88
View File
@@ -1,99 +1,181 @@
'use client'; // Mark as a Client Component "use client"; // Mark as a Client Component
import { useState } from 'react'; import { useState } from "react";
import { useRouter } from 'next/navigation'; import { signIn } from "next-auth/react";
import { registerUser } from '../../actions/auth'; import { useRouter } from "next/navigation";
import Link from 'next/link'; import Link from "next/link";
export default function Register() { export default function Register() {
const [username, setUsername] = useState(''); const [username, setUsername] = useState("");
const [password, setPassword] = useState(''); const [password, setPassword] = useState("");
const [error, setError] = useState(''); const [error, setError] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const router = useRouter(); const router = useRouter();
async function handleSubmit(e) { const handleRegister = async (e) => {
e.preventDefault(); e.preventDefault();
setIsLoading(true); setIsLoading(true);
setError(''); setError("");
try { try {
const formData = new FormData(); const response = await fetch("/api/register", {
formData.append('username', username); method: "POST",
formData.append('password', password); headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
});
const result = await registerUser(formData); const result = await response.json();
if (result.success) { if (result.error) {
router.push('/login'); setError(result.error);
} else { setIsLoading(false);
setError(result.error || 'Registration failed'); } else {
} // Automatically log in the user after successful registration
} catch (err) { const signInResult = await signIn("credentials", {
setError('An unexpected error occurred'); redirect: false,
console.error(err); username,
} finally { password,
setIsLoading(false); });
if (signInResult?.error) {
setError("Registration successful, but failed to log in");
setIsLoading(false);
} else {
router.push("/team-selection");
} }
}
} catch (err) {
setError("An unexpected error occurred");
console.error(err);
setIsLoading(false);
} }
};
return ( return (
<div className="auth-page"> <div className="auth-page">
<div className="page-header"> <div className="page-header">
<Link href="/login" className="back-button">←</Link> <div className="back-button">←</div>
<div className="page-title">Register</div> <div className="page-title">Register</div>
<div className="placeholder"></div> <div className="placeholder"></div>
</div> </div>
<div className="auth-container"> <div className="auth-container">
<div className="auth-card"> <div className="auth-card">
<div className="input-container"> <div className="input-container">
<input <input
type="text" type="text"
placeholder="Username" placeholder="Username"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
required required
className="auth-input" className="auth-input"
/> />
</div> </div>
<div className="input-container"> <div className="input-container">
<input <input
type="password" type="password"
placeholder="Password" placeholder="Password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
required required
className="auth-input" className="auth-input"
/> />
</div> </div>
{error && <div className="error-message">{error}</div>} {error && <div className="error-message">{error}</div>}
<button <button
onClick={handleSubmit} onClick={handleRegister}
className="auth-button" className="auth-button"
disabled={isLoading} disabled={isLoading}
> >
{isLoading ? 'Registering...' : 'Register'} {isLoading ? "Registering..." : "Register"}
</button> </button>
<div className="auth-link"> <Link href="/login">
Already have an account? <Link href="/login">Login</Link> <button className="auth-button">Log In</button>
</div> </Link>
</div>
</div>
<div className="nav-bar">
<div className="nav-item">
<div className="nav-icon">🏠</div>
</div>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
</div>
</div> </div>
); </div>
}
<div className="nav-bar">
<div className="nav-item">
<div className="nav-icon">🏠</div>
</div>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
</div>
<style jsx>{`
.auth-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.auth-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 400px;
padding: 20px;
box-sizing: border-box;
}
.auth-card {
width: 100%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: #fff;
}
.input-container {
margin-bottom: 10px;
}
.auth-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.auth-button {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #68543c; /* Updated brown color */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
.error-message {
color: red;
margin-top: 10px;
}
.nav-bar {
position: fixed;
bottom: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #ccc;
padding: 10px 0;
text-align: center;
}
.nav-item {
display: inline-block;
margin: 0 10px;
}
.nav-icon {
font-size: 24px;
}
`}</style>
</div>
);
}
app/(main)/create-team/page.js
+183 -104
View File
@@ -1,118 +1,197 @@
'use client'; // Mark as a Client Component "use client";
import { useState, useEffect } from 'react'; import { useState } from "react";
import { useSession } from 'next-auth/react'; import { useSession } from "next-auth/react";
import { useRouter } from 'next/navigation'; import { useRouter } from "next/navigation";
import Link from 'next/link'; import Link from "next/link";
const styles = {
navbar: {
position: "fixed",
bottom: 0,
width: "100%",
backgroundColor: "#fff",
borderTop: "1px solid #ccc",
padding: "10px 0",
textAlign: "center",
},
};
export default function CreateTeam() { export default function CreateTeam() {
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const [teamName, setTeamName] = useState(''); const [teamName, setTeamName] = useState("");
const [error, setError] = useState(''); const [error, setError] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const router = useRouter(); const router = useRouter();
// Use useEffect for navigation instead of doing it in render if (status === "loading") {
useEffect(() => { return <div className="loading">Loading...</div>;
// Redirect if not authenticated }
if (status === 'unauthenticated') {
router.push('/login');
}
// Redirect if user is admin if (!session || status === "unauthenticated") {
if (status === 'authenticated' && session?.user?.role === 'admin') { router.replace("/login");
router.push('/admin'); return null;
} }
}, [status, session, router]);
const handleCreateTeam = async (e) => { if (session?.user?.role === "admin") {
e.preventDefault(); router.replace("/admin");
setIsLoading(true); return null;
setError(''); }
try { const handleCreateTeam = async (e) => {
const response = await fetch('/api/teams/create', { e.preventDefault();
method: 'POST', if (isLoading || !teamName.trim()) return;
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: teamName,
userId: session.user.id
}),
});
const result = await response.json(); setIsLoading(true);
try {
const response = await fetch("/api/teams/create", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
name: teamName,
userId: session.user.id,
}),
});
if (result.success) { const result = await response.json();
router.push(`/team/${result.teamId}`); if (result.success) {
} else { // Update the user's session with the new teamId
setError(result.error || 'Failed to create team'); await fetch("/api/auth/session", {
} method: "PATCH",
} catch (err) { headers: { "Content-Type": "application/json" },
setError('An unexpected error occurred'); body: JSON.stringify({
console.error(err); teamId: result.teamId,
} finally { }),
setIsLoading(false); });
}
};
if (status === 'loading') { router.push(`/team/${result.teamId}`);
return <div className="loading">Loading...</div>; } else {
setError(result.error || "Failed to create team");
}
} catch (err) {
console.error("Team creation error:", err);
setError("An unexpected error occurred");
} finally {
setIsLoading(false);
} }
};
// Don't render anything if redirecting return (
if (status === 'unauthenticated' || (status === 'authenticated' && session?.user?.role === 'admin')) { <div className="auth-page">
return null; <div className="page-header">
} <div className="back-button"></div>
<div className="page-title">Create Team</div>
<div className="placeholder"></div>
</div>
return ( <div className="auth-container">
<div className="team-selection-container"> <div className="auth-card">
<div className="page-header"> <h1>Create a New Team</h1>
<div className="page-title">Create Team</div> <form onSubmit={handleCreateTeam}>
<div className="placeholder"></div> <div className="form-group">
</div> <input
type="text"
<div className="team-selection-card"> placeholder="Team Name"
<h1>Create a New Team</h1> value={teamName}
<form onSubmit={handleCreateTeam}> onChange={(e) => setTeamName(e.target.value)}
<div className="form-group"> required
<input className="auth-input"
type="text" />
placeholder="Team Name"
value={teamName}
onChange={(e) => setTeamName(e.target.value)}
required
className="team-input"
/>
</div>
<button
type="submit"
className="team-button"
disabled={isLoading}
>
{isLoading ? 'Creating...' : 'Create Team'}
</button>
</form>
{error && <p className="error">{error}</p>}
<div className="team-options">
<Link href="/team-selection" className="create-team-link">Back to Team Selection</Link>
</div>
</div>
<div className="nav-bar ">
<div className="nav-item">
<div className="nav-icon">🏠</div>
</div>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
</div> </div>
<button type="submit" className="auth-button" disabled={isLoading}>
{isLoading ? "Creating..." : "Create Team"}
</button>
</form>
{error && <p className="error-message">{error}</p>}
<div className="team-options">
<Link href="/team-selection">
<button className="auth-button">Back to Team Selection</button>
</Link>
</div>
</div> </div>
); </div>
}
<div className="nav-bar" style={styles.navbar}>
<div className="nav-item">
<div className="nav-icon">🏠</div>
</div>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
</div>
<style jsx>{`
.auth-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.auth-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 400px;
padding: 20px;
box-sizing: border-box;
}
.auth-card {
width: 100%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: #fff;
}
.form-group {
margin-bottom: 10px;
}
.auth-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.auth-button {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #68543c; /* Updated brown color */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
.error-message {
color: red;
margin-top: 10px;
}
.nav-bar {
position: fixed;
bottom: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #ccc;
padding: 10px 0;
text-align: center;
}
.nav-item {
display: inline-block;
margin: 0 10px;
}
.nav-icon {
font-size: 24px;
}
`}</style>
</div>
);
}
app/(main)/team-selection/page.js
+182 -98
View File
@@ -1,109 +1,193 @@
'use client'; // Mark as a Client Component "use client"; // Mark as a Client Component
import { useState, useEffect } from 'react'; import { useState, useEffect } from "react";
import { useSession } from 'next-auth/react'; import { useSession } from "next-auth/react";
import { useRouter } from 'next/navigation'; import { useRouter } from "next/navigation";
import Link from 'next/link'; import Link from "next/link";
import { joinTeam } from '../../actions/auth'; import { joinTeam } from "../../actions/auth";
// Add CSS to fix the navbar at the bottom
const styles = {
navbar: {
position: "fixed",
bottom: 0,
width: "100%",
backgroundColor: "#fff",
borderTop: "1px solid #ccc",
padding: "10px 0",
textAlign: "center",
},
};
export default function TeamSelection() { export default function TeamSelection() {
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const [teamCode, setTeamCode] = useState(''); const [teamCode, setTeamCode] = useState("");
const [error, setError] = useState(''); const [error, setError] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const router = useRouter(); const router = useRouter();
// Use useEffect for navigation instead of doing it in render // Use useEffect for navigation instead of doing it in render
useEffect(() => { useEffect(() => {
// Redirect if not authenticated // Redirect if not authenticated
if (status === 'unauthenticated') { if (status === "unauthenticated") {
router.push('/login'); router.push("/login");
}
// Redirect if user is admin
if (status === 'authenticated' && session?.user?.role === 'admin') {
router.push('/admin');
}
}, [status, session, router]);
const handleJoinTeam = async (e) => {
e.preventDefault();
setIsLoading(true);
setError('');
try {
const result = await joinTeam(session.user.id, teamCode);
if (result.success) {
router.push(`/team/${result.teamId}`);
} else {
setError(result.error || 'Team not found');
}
} catch (err) {
setError('An unexpected error occurred');
console.error(err);
} finally {
setIsLoading(false);
}
};
if (status === 'loading') {
return <div className="loading">Loading...</div>;
} }
// Don't render anything if redirecting // Redirect if user is admin
if (status === 'unauthenticated' || (status === 'authenticated' && session?.user?.role === 'admin')) { if (status === "authenticated" && session?.user?.role === "admin") {
return null; router.push("/admin");
} }
}, [status, session, router]);
return ( const handleJoinTeam = async (e) => {
<div className="team-selection-container"> e.preventDefault();
<div className="page-header"> setIsLoading(true);
<div className="back-button"></div> setError("");
<div className="page-title">Team Selection</div>
<div className="placeholder"></div>
</div>
<div className="team-selection-card"> try {
<h1>Team Selection</h1> const result = await joinTeam(session.user.id, teamCode);
<form onSubmit={handleJoinTeam}>
<div className="form-group">
<input
type="text"
placeholder="Team Code"
value={teamCode}
onChange={(e) => setTeamCode(e.target.value)}
required
className="team-input"
/>
</div>
<button
type="submit"
className="team-button"
disabled={isLoading}
>
{isLoading ? 'Joining...' : 'Join Team'}
</button>
</form>
{error && <p className="error">{error}</p>}
<div className="team-options">
<Link href="/create-team" className="create-team-link">Create a new team</Link>
</div>
</div>
<div className="nav-bar"> if (result.success) {
<div className="nav-item"> router.push(`/team/${result.teamId}`);
<div className="nav-icon">🏠</div> } else {
</div> setError(result.error || "Team not found");
<div className="nav-item"> }
<div className="nav-icon">📊</div> } catch (err) {
</div> setError("An unexpected error occurred");
<div className="nav-item"> console.error(err);
<div className="nav-icon">🏆</div> } finally {
</div> setIsLoading(false);
<div className="nav-item"> }
<div className="nav-icon">👤</div> };
</div>
if (status === "loading") {
return <div className="loading">Loading...</div>;
}
// Don't render anything if redirecting
if (
status === "unauthenticated" ||
(status === "authenticated" && session?.user?.role === "admin")
) {
return null;
}
return (
<div className="auth-page">
<div className="page-header">
<div className="back-button"></div>
<div className="page-title">Team Selection</div>
<div className="placeholder"></div>
</div>
<div className="auth-container">
<div className="auth-card">
<h1>Team Selection</h1>
<form onSubmit={handleJoinTeam}>
<div className="form-group">
<input
type="text"
placeholder="Team Code"
value={teamCode}
onChange={(e) => setTeamCode(e.target.value)}
required
className="auth-input"
/>
</div> </div>
<button type="submit" className="auth-button" disabled={isLoading}>
{isLoading ? "Joining..." : "Join Team"}
</button>
</form>
{error && <p className="error-message">{error}</p>}
<div className="team-options">
<Link href="/create-team">
<button className="auth-button">Create a new team</button>
</Link>
</div>
</div> </div>
); </div>
}
<div className="nav-bar" style={styles.navbar}>
<div className="nav-item">
<div className="nav-icon">🏠</div>
</div>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
</div>
<style jsx>{`
.auth-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.auth-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 400px;
padding: 20px;
box-sizing: border-box;
}
.auth-card {
width: 100%;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: #fff;
}
.form-group {
margin-bottom: 10px;
}
.auth-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.auth-button {
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #68543c; /* Updated brown color */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
.error-message {
color: red;
margin-top: 10px;
}
.nav-bar {
position: fixed;
bottom: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #ccc;
padding: 10px 0;
text-align: center;
}
.nav-item {
display: inline-block;
margin: 0 10px;
}
.nav-icon {
font-size: 24px;
}
`}</style>
</div>
);
}
app/(main)/team/[teamId]/members/route.js
+45 -29
View File
@@ -1,35 +1,51 @@
// app/api/teams/[teamId]/members/route.js import { query } from "../../../../lib/db";
import { query } from '../../../../../lib/db'; import { getServerSession } from "next-auth/next";
import { getServerSession } from 'next-auth/next'; import { authOptions } from "../../auth/[...nextauth]/route";
import { authOptions } from '../../../api/auth/[...nextauth]/route';
export async function GET(request, { params }) { export async function GET(request, context) {
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
if (!session) { if (!session) {
return Response.json({ error: 'Unauthorised' }, { status: 401 }); return Response.json({ error: "Unauthorised" }, { status: 401 });
}
try {
const { teamId } = context.params;
// Convert teamId to number for proper comparison
const requestedTeamId = parseInt(teamId, 10);
const userTeamId = parseInt(session.user.teamId, 10);
// Log for debugging
console.log("Requested team:", requestedTeamId);
console.log("User team:", userTeamId);
console.log("User role:", session.user.role);
// Ensure the user is requesting their own team or is an admin
if (userTeamId !== requestedTeamId && session.user.role !== "admin") {
return Response.json(
{ error: "Not authorized to view this team" },
{ status: 403 }
);
} }
try { const teamMembers = await query("SELECT * FROM users WHERE team_id = ?", [
const { teamId } = params; requestedTeamId,
]);
// Convert teamId to number for proper comparison if (!teamMembers) {
const requestedTeamId = parseInt(teamId, 10); return Response.json(
const userTeamId = parseInt(session.user.teamId, 10); { error: "Team members not found" },
{ status: 404 }
// Ensure the user is requesting their own team or is an admin );
if (userTeamId !== requestedTeamId && session.user.role !== 'admin') {
return Response.json({ error: 'Not authorized to view this team' }, { status: 403 });
}
const members = await query(
'SELECT id, username FROM users WHERE team_id = ?',
[requestedTeamId]
);
return Response.json(members);
} catch (error) {
console.error('Team members fetch error:', error);
return Response.json({ error: 'Failed to fetch team members' }, { status: 500 });
} }
}
return Response.json(teamMembers);
} catch (error) {
console.error("Team members fetch error:", error);
return Response.json(
{ error: "Failed to fetch team members" },
{ status: 500 }
);
}
}
app/(main)/team/[teamId]/page.js
+118 -108
View File
@@ -1,129 +1,139 @@
'use client'; // Mark as a Client Component "use client"; // Mark as a Client Component
import { useState, useEffect } from 'react'; import { useState, useEffect } from "react";
import { useSession } from 'next-auth/react'; import { useSession } from "next-auth/react";
import { useRouter } from 'next/navigation'; import { useRouter } from "next/navigation";
import Link from 'next/link'; import Link from "next/link";
export default function TeamPage({ params }) { export default function TeamPage({ params }) {
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const [team, setTeam] = useState(null); const [team, setTeam] = useState(null);
const [teamMembers, setTeamMembers] = useState([]); const [teamMembers, setTeamMembers] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(''); const [error, setError] = useState("");
const router = useRouter(); const [huntActive, setHuntActive] = useState(false);
const { teamId } = params; const router = useRouter();
const { teamId } = params;
// Fetch team data // Fetch team data
useEffect(() => { useEffect(() => {
async function fetchTeamData() { async function fetchTeamData() {
try { try {
if (!teamId) { if (!teamId) {
throw new Error('No team ID provided'); throw new Error("No team ID provided");
}
// Fetch team details
const teamResponse = await fetch(`/api/teams/${teamId}`);
if (!teamResponse.ok) {
const errorData = await teamResponse.json();
throw new Error(errorData.error || 'Failed to fetch team data');
}
const teamData = await teamResponse.json();
setTeam(teamData);
// Fetch team members
const membersResponse = await fetch(`/api/teams/${teamId}/members`);
if (!membersResponse.ok) {
// Don't throw here, just log the error
console.error('Failed to fetch team members');
} else {
const membersData = await membersResponse.json();
setTeamMembers(membersData);
}
} catch (err) {
console.error('Team page error:', err);
setError(err.message);
} finally {
setLoading(false);
}
} }
if (status === 'authenticated' && teamId) { // Fetch team details
fetchTeamData(); const teamResponse = await fetch(`/api/teams/${teamId}`);
if (!teamResponse.ok) {
const errorData = await teamResponse.json();
throw new Error(errorData.error || "Failed to fetch team data");
} }
}, [teamId, status]); const teamData = await teamResponse.json();
setTeam(teamData);
// Handle authentication // Fetch team members
useEffect(() => { const membersResponse = await fetch(`/api/teams/${teamId}/members`);
if (status === 'unauthenticated') { if (!membersResponse.ok) {
router.push('/login'); // Don't throw here, just log the error
console.error("Failed to fetch team members");
} else {
const membersData = await membersResponse.json();
setTeamMembers(membersData);
} }
}, [status, router]);
if (status === 'loading' || loading) { // Fetch hunt status
return <div className="loading">Loading...</div>; const huntStatusResponse = await fetch("/api/hunt-status");
if (huntStatusResponse.ok) {
const huntStatusData = await huntStatusResponse.json();
setHuntActive(huntStatusData.active);
}
} catch (err) {
console.error("Team page error:", err);
setError(err.message);
} finally {
setLoading(false);
}
} }
if (error) { if (status === "authenticated" && teamId) {
return <div className="error">Error: {error}</div>; fetchTeamData();
} }
}, [teamId, status]);
if (!team) { // Handle authentication
return <div className="error">Team not found</div>; useEffect(() => {
if (status === "unauthenticated") {
router.push("/login");
} }
}, [status, router]);
return ( if (status === "loading" || loading) {
<div className="team-page-container"> return <div className="loading">Loading...</div>;
<div className="page-header"> }
<Link href="/team-selection" className="back-button">←</Link>
<div className="page-title">Team Details</div>
<div className="placeholder"></div>
</div>
<div className="team-details-card"> if (error) {
<h1>{team.name}</h1> return <div className="error">Error: {error}</div>;
}
<div className="team-code-container"> if (!team) {
<h2>Team Code</h2> return <div className="error">Team not found</div>;
<div className="team-code">{team.code}</div> }
<p>Share this code with others to join your team</p>
</div>
<div className="team-members-container"> return (
<h2>Team Members</h2> <div className="team-page-container">
{teamMembers.length === 0 ? ( <div className="page-header">
<p>No members have joined yet</p> <Link href="/team-selection" className="back-button">
) : ( ←
<ul className="team-members-list"> </Link>
{teamMembers.map(member => ( <div className="page-title">Team Details</div>
<li key={member.id} className="team-member"> <div className="placeholder"></div>
{member.username} </div>
</li>
))}
</ul>
)}
</div>
<div className="team-actions"> <div className="team-details-card">
<Link href="/" className="team-button"> <h1>{team.name}</h1>
Start Hunt
</Link>
</div>
</div>
<div className="nav-bar"> <div className="team-code-container">
<div className="nav-item"> <h2>Team Code</h2>
<div className="nav-icon">🏠</div> <div className="team-code">{team.code}</div>
</div> <p>Share this code with others to join your team</p>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
</div>
</div> </div>
);
} <div className="team-members-container">
<h2>Team Members</h2>
{teamMembers.length === 0 ? (
<p>No members have joined yet</p>
) : (
<ul className="team-members-list">
{teamMembers.map((member) => (
<li key={member.id} className="team-member">
{member.username}
</li>
))}
</ul>
)}
</div>
<div className="team-actions">
<button className="team-button" disabled={!huntActive}>
Start Hunt
</button>
</div>
</div>
<div className="nav-bar">
<div className="nav-item">
<div className="nav-icon">🏠</div>
</div>
<div className="nav-item">
<div className="nav-icon">📊</div>
</div>
<div className="nav-item">
<div className="nav-icon">🏆</div>
</div>
<div className="nav-item">
<div className="nav-icon">👤</div>
</div>
</div>
</div>
);
}
app/(main)/team/[teamId]/route.js
+94 -34
View File
@@ -1,41 +1,101 @@
// app/api/teams/[teamId]/route.js // app/api/teams/[teamId]/route.js
import { queryOne } from '../../../../lib/db'; import { queryOne } from "../../../../lib/db";
import { getServerSession } from 'next-auth/next'; import { getServerSession } from "next-auth/next";
import { authOptions } from '../../../api/auth/[...nextauth]/route'; import { authOptions } from "../../../api/auth/[...nextauth]/route";
export async function GET(request, { params }) { export async function GET(request, context) {
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
if (!session) { if (!session) {
return Response.json({ error: 'Unauthorised' }, { status: 401 }); return new Response(JSON.stringify({ error: "Unauthorised" }), {
status: 401,
});
}
try {
const { teamId } = await context.params; // Await the params
// Convert teamId to number for proper comparison
const requestedTeamId = parseInt(teamId, 10);
const userTeamId = parseInt(session.user.teamId, 10);
// Log for debugging
console.log("Requested team:", requestedTeamId);
console.log("User team:", userTeamId);
console.log("User role:", session.user.role);
// Ensure the user is requesting their own team or is an admin
if (userTeamId !== requestedTeamId && session.user.role !== "admin") {
return new Response(
JSON.stringify({ error: "Not authorized to view this team" }),
{ status: 403 }
);
} }
try { const team = await queryOne("SELECT * FROM teams WHERE id = ?", [
const { teamId } = params; requestedTeamId,
]);
// Convert teamId to number for proper comparison if (!team) {
const requestedTeamId = parseInt(teamId, 10); return new Response(JSON.stringify({ error: "Team not found" }), {
const userTeamId = parseInt(session.user.teamId, 10); status: 404,
});
// Log for debugging
console.log('Requested team:', requestedTeamId);
console.log('User team:', userTeamId);
console.log('User role:', session.user.role);
// Ensure the user is requesting their own team or is an admin
if (userTeamId !== requestedTeamId && session.user.role !== 'admin') {
return Response.json({ error: 'Not authorized to view this team' }, { status: 403 });
}
const team = await queryOne('SELECT * FROM teams WHERE id = ?', [requestedTeamId]);
if (!team) {
return Response.json({ error: 'Team not found' }, { status: 404 });
}
return Response.json(team);
} catch (error) {
console.error('Team fetch error:', error);
return Response.json({ error: 'Failed to fetch team details' }, { status: 500 });
} }
}
return new Response(JSON.stringify(team), { status: 200 });
} catch (error) {
console.error("Team fetch error:", error);
return new Response(
JSON.stringify({ error: "Failed to fetch team details" }),
{ status: 500 }
);
}
}
export async function PATCH(request, context) {
const session = await getServerSession(authOptions);
if (!session) {
return new Response(JSON.stringify({ error: "Unauthorised" }), {
status: 401,
});
}
try {
const { teamId } = await context.params; // Await the params
const requestedTeamId = parseInt(teamId, 10);
const { userId } = await request.json(); // Parse the request body
// Log for debugging
console.log("Requested team:", requestedTeamId);
console.log("User role:", session.user.role);
// Ensure the user is an admin or the user themselves
if (session.user.role !== "admin" && session.user.id !== userId) {
return new Response(
JSON.stringify({ error: "Not authorized to change this team" }),
{ status: 403 }
);
}
// Update the user's team
await queryOne("UPDATE users SET teamId = ? WHERE id = ?", [
requestedTeamId,
userId,
]);
// Update the session with the new teamId
session.user.teamId = requestedTeamId;
return new Response(
JSON.stringify({ success: "Team updated successfully" }),
{ status: 200 }
);
} catch (error) {
console.error("Team update error:", error);
return new Response(
JSON.stringify({ error: "Failed to update team" }),
{ status: 500 }
);
}
}
app/api/teams/[teamId]/route.js
+33 -26
View File
@@ -1,31 +1,38 @@
import { queryOne } from '../../../../lib/db'; import { queryOne } from "../../../../lib/db";
import { getServerSession } from 'next-auth/next'; import { getServerSession } from "next-auth/next";
import { authOptions } from '../../auth/[...nextauth]/route'; import { authOptions } from "../../auth/[...nextauth]/route";
export async function GET(request, { params }) { export async function GET(request, { params }) {
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
if (!session) { if (!session) {
return Response.json({ error: 'Unauthorised' }, { status: 401 }); return Response.json({ error: "Unauthorised" }, { status: 401 });
}
try {
const { teamId } = params;
// Single query to get team data with authorization check
const team = await queryOne(
`SELECT t.* FROM teams t
LEFT JOIN users u ON u.id = ?
WHERE t.id = ? AND (u.team_id = t.id OR ? = 'admin')`,
[session.user.id, teamId, session.user.role]
);
if (!team) {
return Response.json(
{ error: "Team not found or unauthorized" },
{ status: 404 }
);
} }
try { return Response.json(team);
const { teamId } = params; } catch (error) {
console.error("Team fetch error:", error);
// Ensure the user is requesting their own team or is an admin return Response.json(
if (session.user.teamId != teamId && session.user.role !== 'admin') { { error: "Failed to fetch team details" },
return Response.json({ error: 'Not authorized to view this team' }, { status: 403 }); { status: 500 }
} );
}
const team = await queryOne('SELECT * FROM teams WHERE id = ?', [teamId]); }
if (!team) {
return Response.json({ error: 'Team not found' }, { status: 404 });
}
return Response.json(team);
} catch (error) {
console.error('Team fetch error:', error);
return Response.json({ error: 'Failed to fetch team details' }, { status: 500 });
}
}