Skip to content

feat: clear up moderation panel #218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 13, 2024
Merged

feat: clear up moderation panel #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,5 +83,5 @@ export function Footer() {
</div>
</Container>
</footer>
);
)
}
132 changes: 132 additions & 0 deletions src/components/moderation/ViewReport.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import { Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'

export default function ViewReport({ open, setOpen, report }) {
// Parse metadata if it exists and is a string
const metadata = report?.metadata ?
(typeof report.metadata === 'string' ? JSON.parse(report.metadata) : report.metadata)
: {};

return (
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="relative z-50" onClose={setOpen}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-neutral-900 bg-opacity-75 transition-opacity" />
</Transition.Child>

<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-3xl sm:p-6">
<div>
<div className="mt-3 text-center sm:mt-5">
<Dialog.Title as="h3" className="text-2xl font-semibold leading-6 text-white">
Report Details
</Dialog.Title>
<div className="mt-4 text-left">
<div className="space-y-4 text-white">
<div>
<h4 className="font-semibold">Type:</h4>
<p>{report?.type}</p>
</div>

{metadata.reportedUserId && (
<div>
<h4 className="font-semibold">Reported User ID:</h4>

<a
href={`/users/${metadata.reportedUserId}`}
className="text-blue-400 hover:text-blue-300"
target="#blank"
>
{metadata.reportedUserId}
</a>

</div>
)}

{metadata.challengeId && (
<div>
<h4 className="font-semibold">Challenge ID:</h4>
<p>{metadata.challengeId}</p>
</div>
)}

{metadata.url && (
<div>
<h4 className="font-semibold">URL:</h4>
<p>{metadata.url}</p>
</div>
)}

{metadata.severity && (
<div>
<h4 className="font-semibold">Severity:</h4>
<p>
<span className={`inline-flex items-center rounded-md px-2 py-1 text-sm font-medium ${
metadata.severity.toLowerCase() === 'critical' ? 'bg-red-500/15 text-red-700 dark:text-red-400' :
metadata.severity.toLowerCase() === 'high' ? 'bg-orange-500/15 text-orange-700 dark:text-orange-400' :
metadata.severity.toLowerCase() === 'medium' ? 'bg-yellow-500/15 text-yellow-700 dark:text-yellow-400' :
'bg-blue-500/15 text-blue-700 dark:text-blue-400' // For low severity
}`}>
{metadata.severity}
</span>
</p>
</div>
)}

{metadata.featureType && (
<div>
<h4 className="font-semibold">Feature Type:</h4>
<p>{metadata.featureType}</p>
</div>
)}

<div>
<h4 className="font-semibold">Description:</h4>
<p className="whitespace-pre-wrap">
{report?.desc}
</p>
</div>

<div>
<h4 className="font-semibold">Submitted:</h4>
<p>{report?.createdAt && new Date(report.createdAt).toLocaleString()}</p>
</div>
</div>
</div>
</div>
</div>
<div className="mt-5 sm:mt-6">
<button
type="button"
className="inline-flex w-full justify-center rounded-md bg-neutral-800 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-neutral-700"
onClick={() => setOpen(false)}
>
Close
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
)
}
2 changes: 1 addition & 1 deletion src/pages/_app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function App({ Component, pageProps }) {

return <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID} scope="email profile openid">
<Context.Provider value={appState}>
<Component {...pageProps} />;
<Component {...pageProps} />
<Analytics />

</Context.Provider>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/_document.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ class MyDocument extends Document {
<NextScript />
</body>
</Html>
);
)
}
}

Expand Down
76 changes: 40 additions & 36 deletions src/pages/challenges/[...id].jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -623,7 +623,7 @@ function TabLink({ tabName, selected, url, className }) {
'Hints': 'fas fa-question text-red-500',
'Description': 'fas fa-info-circle text-blue-500',
'AI': 'fas fa-robot text-orange-500',
}[tabName] || 'fas fa-file-alt text-blue-500';
}[tabName] || 'fas fa-file-alt text-blue-500'

return (
<Link href={url} className={`flex justify-center items-center ${selectedStyle} hover:text-white transition-all duration-400 px-2 hover:bg-neutral-600 rounded-sm h-full ${className}`}>
Expand Down Expand Up @@ -1069,7 +1069,7 @@ function WriteUpPage({ cache, setCache, onWriteupSelect }) {
</h3>

</div>
<p className="text-sm text-blue-500 font-semibold" onClick={() => window.location.href = `../../users/${writeup.user.username}`}>@{writeup.user.username}</p>
<p className="text-sm text-blue-500 font-semibold">@{writeup.user.username}</p>

</div>
<div className="ml-auto mt-2">
Expand Down Expand Up @@ -1274,42 +1274,46 @@ function LeaderboardPage({ cache, setCache }) {
</div>

{leaderboard.length > 0 ? (
leaderboard.slice(0, 10).map((entry, index) => {
let color;
switch (index) {
case 0:
color = "from-yellow-700 to-yellow-800"; // gold
break;
case 1:
color = "from-gray-700 to-gray-800"; // silver
break;
case 2:
color = "from-orange-800 to-orange-900"; // bronze
break;
default:
color = "bg-neutral-700"; // default color for others
}
return (
<div className="px-3" key={index}>
<div className={`flex justify-between items-center py-2 px-2 bg-gradient-to-r ${color} rounded-lg my-2`}>
<div className="flex items-center justify-between align-middle">
<img
src={entry.user.profileImage || `https://robohash.org/${entry.user.username}.png?set=set1&size=150x150`}
className="w-8 h-8 mr-2 rounded-full"
alt={`${entry.user.username}'s profile`}
/>
<span className="text-2xl font-bold">{index + 1}.</span>
<span className="ml-2 text-xl font-semibold text-white">
<Link href={`/users/${entry.user.username}`}>
{entry.user.username}
</Link>
</span>
<div className="px-1 overflow-y-auto max-h-[calc(100vh-40px)] relative">
{leaderboard.slice(0, 10).map((entry, index) => {
let color;
switch (index) {
case 0:
color = "from-yellow-700 to-yellow-800"; // gold
break;
case 1:
color = "from-gray-700 to-gray-800"; // silver
break;
case 2:
color = "from-orange-800 to-orange-900"; // bronze
break;
default:
color = "bg-neutral-700"; // default color for others
}
return (
<div className="px-3" key={index}>
<div className={`flex justify-between items-center py-2 px-2 bg-gradient-to-r ${color} rounded-lg my-2`}>
<div className="flex items-center justify-between align-middle">
<img
src={entry.user.profileImage || `https://robohash.org/${entry.user.username}.png?set=set1&size=150x150`}
className="w-8 h-8 mr-2 rounded-full"
alt={`${entry.user.username}'s profile`}
/>
<span className="text-2xl font-bold">{index + 1}.</span>
<span className="ml-2 text-xl font-semibold text-white">
<Link href={`/users/${entry.user.username}`}>
{entry.user.username}
</Link>
</span>
</div>
<div className="text-xl font-semibold">{entry.points} points</div>
</div>
<div className="text-xl font-semibold">{entry.points} points</div>
</div>
</div>
)
})
)
})}
{/* Add fade-out overlay that stays anchored */}
<div className="sticky bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-neutral-800 to-transparent pointer-events-none"></div>
</div>
) : (
<div className="px-3">
<div className="flex justify-center items-center py-2 px-2 bg-neutral-900 rounded-lg my-2">
Expand Down
34 changes: 31 additions & 3 deletions src/pages/moderation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import request from '@/utils/request';
import { MyTable } from '@/components/Table';
import { TableHead, TableRow, TableHeader, TableCell, TableBody, Table } from "@/components/ui/table"
import ViewChallenge from '@/components/moderation/ViewChallenge';
import ViewReport from '@/components/moderation/ViewReport';

export default function Competitions() {
const [selectedChallenges, setSelectedChallenges] = useState([]);
Expand All @@ -25,6 +26,8 @@ export default function Competitions() {


const [bonusPoints, setBonusPoints] = useState(0);
const [selectedReport, setSelectedReport] = useState(null);
const [reportIsOpen, setReportIsOpen] = useState(false);


// get reports
Expand Down Expand Up @@ -323,7 +326,7 @@ export default function Competitions() {
return (
<>
<Head>
<title>Leaderboards - CTFGuide</title>
<title>CTFGuide Moderation Panel</title>
<meta name="description" content="Practice Problems" />
<style>
@import url(&apos;https://fonts.googleapis.com/css2?family=Poppins&display=swap&apos;);
Expand Down Expand Up @@ -423,9 +426,33 @@ export default function Competitions() {
<div className='mt-2'>
{reports.length > 0 ? (
reports.map((report) => (
<div key={report.id} className='bg-neutral-800 w-full mb-2 border focus:bg-blue-900 focus:border-blue-500 border-neutral-700 hover:bg-neutral-700/50 cursor-pointer px-2 py-1 flex items-center text-sm'>
<div
key={report.id}
className={`w-full mb-2 border focus:bg-blue-900 focus:border-blue-500 border-neutral-700 hover:bg-neutral-700/50 cursor-pointer px-2 py-1 flex items-center text-sm ${
JSON.parse(report.metadata).severity === 'HIGH' ? 'bg-red-900/20' :
JSON.parse(report.metadata).severity === 'MEDIUM' ? 'bg-yellow-900/20' :
JSON.parse(report.metadata).severity === 'LOW' ? 'bg-blue-900/20' :
'bg-neutral-800'
}`}
onClick={() => {
setSelectedReport(report);
setReportIsOpen(true);
}}
>
<div className='flex-grow'>
<h1 className='text-sm text-left ml-4'>{report.type} REPORT</h1>
<h1 className='text-sm text-left ml-4'>
{report.type} REPORT
{report.metadata?.severity && (
<span className={`ml-2 px-2 py-0.5 rounded text-xs ${
report.metadata.severity === 'HIGH' ? 'bg-red-600 text-white' :
report.metadata.severity === 'MEDIUM' ? 'bg-yellow-600 text-white' :
report.metadata.severity === 'LOW' ? 'bg-blue-600 text-white' :
'bg-neutral-600 text-white'
}`}>
{report.metadata.severity}
</span>
)}
</h1>
</div>
<div className='ml-auto text-right'>
<p className='text-sm'>Reported by <span className='font-bold'>{report.userId}</span></p>
Expand Down Expand Up @@ -487,6 +514,7 @@ export default function Competitions() {
</main>
<div className='flex w-full h-full grow basis-0'></div>
<ViewChallenge open={challengeIsOpen} setOpen={setChallengeIsOpen} selected={selectedId} />
<ViewReport open={reportIsOpen} setOpen={setReportIsOpen} report={selectedReport} />
<Footer />
</div>
</>
Expand Down