mirror of
https://github.com/trafficlunar/tomodachi-share.git
synced 2026-05-13 13:17:45 +00:00
feat: reports
This commit is contained in:
parent
896dc40553
commit
97f0fda25c
16 changed files with 315 additions and 389 deletions
|
|
@ -1,5 +1,7 @@
|
||||||
# TomodachiShare Development Instructions
|
# TomodachiShare Development Instructions
|
||||||
|
|
||||||
|
This is probably outdated.
|
||||||
|
|
||||||
Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the front-end and back-end, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety.
|
Welcome to the TomodachiShare development guide! This project uses [pnpm](https://pnpm.io/) for package management, [Next.js](https://nextjs.org/) with the app router for the front-end and back-end, [Prisma](https://prisma.io) for the database, [TailwindCSS](https://tailwindcss.com/) for styling, and [TypeScript](https://www.typescriptlang.org/) for type safety.
|
||||||
|
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<img src="public/logo.svg" alt="TomodachiShare Logo" width="128" />
|
<img src="backend/public/logo.svg" alt="TomodachiShare Logo" width="128" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h1 align="center"><a href="https://tomodachishare.com">TomodachiShare</a></h1>
|
<h1 align="center"><a href="https://tomodachishare.com">TomodachiShare</a></h1>
|
||||||
|
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
import { Metadata } from "next";
|
|
||||||
import { redirect } from "next/navigation";
|
|
||||||
|
|
||||||
import { auth } from "@/lib/auth";
|
|
||||||
import { prisma } from "@/lib/prisma";
|
|
||||||
|
|
||||||
import ReportMiiForm from "@/components/report/mii-form";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
params: Promise<{ id: string }>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: "Report Mii - TomodachiShare",
|
|
||||||
description: "Report a Mii on TomodachiShare",
|
|
||||||
robots: {
|
|
||||||
index: false,
|
|
||||||
follow: false,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default async function ReportMiiPage({ params }: Props) {
|
|
||||||
const session = await auth();
|
|
||||||
const { id } = await params;
|
|
||||||
|
|
||||||
const mii = await prisma.mii.findUnique({
|
|
||||||
where: {
|
|
||||||
id: Number(id),
|
|
||||||
},
|
|
||||||
include: {
|
|
||||||
_count: {
|
|
||||||
select: {
|
|
||||||
likedBy: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!session) redirect("/login");
|
|
||||||
if (!mii) redirect("/404");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center w-full">
|
|
||||||
<ReportMiiForm mii={mii} likes={mii._count.likedBy} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
import { Metadata } from "next";
|
|
||||||
import { redirect } from "next/navigation";
|
|
||||||
|
|
||||||
import { auth } from "@/lib/auth";
|
|
||||||
import { prisma } from "@/lib/prisma";
|
|
||||||
|
|
||||||
import ReportUserForm from "@/components/report/user-form";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
params: Promise<{ id: string }>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: "Report User - TomodachiShare",
|
|
||||||
description: "Report a user on TomodachiShare",
|
|
||||||
robots: {
|
|
||||||
index: false,
|
|
||||||
follow: false,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default async function ReportUserPage({ params }: Props) {
|
|
||||||
const session = await auth();
|
|
||||||
const { id } = await params;
|
|
||||||
|
|
||||||
const user = await prisma.user.findUnique({
|
|
||||||
where: {
|
|
||||||
id: Number(id),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!session) redirect("/login");
|
|
||||||
if (!user) redirect("/404");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex justify-center w-full">
|
|
||||||
<ReportUserForm user={user} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
import ReasonSelector from "./reason-selector";
|
|
||||||
import SubmitButton from "../submit-button";
|
|
||||||
import { Mii, ReportReason } from "@prisma/client";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
mii: Mii;
|
|
||||||
likes: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ReportMiiForm({ mii, likes }: Props) {
|
|
||||||
const [reason, setReason] = useState<ReportReason>();
|
|
||||||
const [notes, setNotes] = useState<string>();
|
|
||||||
const [error, setError] = useState<string | undefined>(undefined);
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
const response = await fetch(`/api/report`, {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ id: mii.id, type: "mii", reason: reason?.toLowerCase(), notes }),
|
|
||||||
});
|
|
||||||
const { error } = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
setError(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// redirect(`/`);
|
|
||||||
window.location.href = "https://tomodachishare.com";
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold">Report a Mii</h2>
|
|
||||||
<p className="text-sm text-zinc-500">If you encounter a rule-breaking Mii, please report it here</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="border-zinc-300" />
|
|
||||||
|
|
||||||
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex">
|
|
||||||
<img src={`/mii/${mii.id}/image?type=mii`} alt="mii image" width={128} height={128} />
|
|
||||||
<div className="p-4">
|
|
||||||
<p className="text-xl font-bold line-clamp-1">{mii.name}</p>
|
|
||||||
{/* <LikeButton likes={likes} isLiked={true} disabled /> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full grid grid-cols-3 items-center">
|
|
||||||
<label htmlFor="reason" className="font-semibold">
|
|
||||||
Reason
|
|
||||||
</label>
|
|
||||||
<ReasonSelector reason={reason} setReason={setReason} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full grid grid-cols-3">
|
|
||||||
<label htmlFor="reason-note" className="font-semibold">
|
|
||||||
Reason notes
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
rows={3}
|
|
||||||
maxLength={256}
|
|
||||||
placeholder="Type notes here for the report..."
|
|
||||||
className="pill input rounded-xl! resize-none col-span-2"
|
|
||||||
value={notes}
|
|
||||||
onChange={(e) => setNotes(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="border-zinc-300" />
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
|
||||||
|
|
||||||
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
import ReasonSelector from "./reason-selector";
|
|
||||||
import SubmitButton from "../submit-button";
|
|
||||||
import { ReportReason, User } from "@prisma/client";
|
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
user: User;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ReportUserForm({ user }: Props) {
|
|
||||||
const [reason, setReason] = useState<ReportReason>();
|
|
||||||
const [notes, setNotes] = useState<string>();
|
|
||||||
const [error, setError] = useState<string | undefined>(undefined);
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
const response = await fetch(`/api/report`, {
|
|
||||||
method: "POST",
|
|
||||||
body: JSON.stringify({ id: user.id, type: "user", reason: reason?.toLowerCase(), notes }),
|
|
||||||
});
|
|
||||||
const { error } = await response.json();
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
setError(error);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.location.href = "https://tomodachishare.com";
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-bold">Report a User</h2>
|
|
||||||
<p className="text-sm text-zinc-500">If you encounter a user causing issues, please report them here</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="border-zinc-300" />
|
|
||||||
|
|
||||||
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex p-4 gap-4">
|
|
||||||
<Image
|
|
||||||
src={user.image ?? "/guest.png"}
|
|
||||||
alt="profile picture"
|
|
||||||
width={96}
|
|
||||||
height={96}
|
|
||||||
className="aspect-square rounded-full border-2 border-orange-400"
|
|
||||||
/>
|
|
||||||
<p className="text-xl font-bold overflow-hidden text-ellipsis">{user.name}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full grid grid-cols-3 items-center">
|
|
||||||
<label htmlFor="reason" className="font-semibold">
|
|
||||||
Reason
|
|
||||||
</label>
|
|
||||||
<ReasonSelector reason={reason} setReason={setReason} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full grid grid-cols-3">
|
|
||||||
<label htmlFor="reason-note" className="font-semibold">
|
|
||||||
Reason notes
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
rows={3}
|
|
||||||
maxLength={256}
|
|
||||||
placeholder="Type notes here for the report..."
|
|
||||||
className="pill input rounded-xl! resize-none col-span-2"
|
|
||||||
value={notes}
|
|
||||||
onChange={(e) => setNotes(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="border-zinc-300" />
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
|
||||||
|
|
||||||
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Icon } from "@iconify/react";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
onClick: () => void | Promise<void>;
|
|
||||||
disabled?: boolean;
|
|
||||||
text?: string;
|
|
||||||
className?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SubmitButton({ onClick, disabled = false, text = "Submit", className }: Props) {
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
|
|
||||||
const handleClick = async (event: React.FormEvent) => {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
setIsLoading(true);
|
|
||||||
try {
|
|
||||||
await onClick();
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button type="submit" aria-label={text} onClick={handleClick} disabled={disabled} className={`pill button w-min ${className}`}>
|
|
||||||
{text}
|
|
||||||
{isLoading && <Icon icon="svg-spinners:180-ring-with-bg" className="ml-2" />}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
import { Icon } from "@iconify/react";
|
|
||||||
|
|
||||||
import Description from "./description";
|
|
||||||
import { useStore } from "@nanostores/react";
|
|
||||||
import { session } from "../session";
|
|
||||||
import { Link, useLocation } from "react-router";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
user?: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ProfileInformation({ user }: Props) {
|
|
||||||
const location = useLocation();
|
|
||||||
const $session = useStore(session);
|
|
||||||
|
|
||||||
if (!user) return null;
|
|
||||||
|
|
||||||
const currentUser = user ?? $session?.user;
|
|
||||||
const page = location.pathname;
|
|
||||||
const isAdmin = currentUser?.id === Number(import.meta.env.VITE_ADMIN_USER_ID);
|
|
||||||
const isContributor = import.meta.env.VITE_CONTRIBUTORS_USER_IDS?.split(",").includes(user?.id);
|
|
||||||
const isOwnProfile = currentUser?.id === user?.id;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
|
|
||||||
<div className="flex w-full gap-4 overflow-x-scroll">
|
|
||||||
{/* Profile picture */}
|
|
||||||
<Link to={`${import.meta.env.VITE_API_URL}/profile/${user.id}`} className="size-28 aspect-square">
|
|
||||||
<img src={user.image ?? "/guest.png"} className="rounded-full bg-white border-2 border-orange-400 shadow w-full max-md:self-center" />
|
|
||||||
</Link>
|
|
||||||
{/* User information */}
|
|
||||||
<div className="flex flex-col w-full relative py-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<h1 className="text-3xl font-extrabold wrap-break-word">{user.name}</h1>
|
|
||||||
{isAdmin && (
|
|
||||||
<div data-tooltip="Admin" className="text-orange-400">
|
|
||||||
<Icon icon="mdi:shield-moon" className="text-2xl" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{isContributor && (
|
|
||||||
<div data-tooltip="Contributor" className="text-orange-400">
|
|
||||||
<Icon icon="mingcute:group-fill" className="text-2xl" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<h2 className="text-black/60 text-sm font-semibold wrap-break-word">ID: {user?.id}</h2>
|
|
||||||
|
|
||||||
<div className="mt-3 text-sm flex gap-8">
|
|
||||||
<h4 title={`${new Date(user.createdAt).toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
|
|
||||||
<span className="font-medium">Created:</span>{" "}
|
|
||||||
{new Date(user.createdAt).toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
|
|
||||||
</h4>
|
|
||||||
<h4>
|
|
||||||
Liked <span className="font-bold">{user._count.likes}</span> Miis
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{user.description && <Description text={user.description} className="max-h-32!" />}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Buttons */}
|
|
||||||
<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
|
|
||||||
{!isOwnProfile && (
|
|
||||||
<Link aria-label="Report User" to={`${import.meta.env.VITE_API_URL}/report/user/${user.id}`}>
|
|
||||||
<Icon icon="material-symbols:flag-rounded" />
|
|
||||||
<span>Report</span>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{isOwnProfile && isAdmin && (
|
|
||||||
<Link aria-label="Go to Admin" to="/admin">
|
|
||||||
<Icon icon="mdi:shield-moon" />
|
|
||||||
<span>Admin</span>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{isOwnProfile && page !== "/profile/likes" && (
|
|
||||||
<Link aria-label="Go to My Likes" to="/profile/likes">
|
|
||||||
<Icon icon="icon-park-solid:like" />
|
|
||||||
<span>My Likes</span>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{isOwnProfile && page !== "/profile/settings" && (
|
|
||||||
<Link aria-label="Go to Settings" to="/profile/settings">
|
|
||||||
<Icon icon="material-symbols:settings-rounded" />
|
|
||||||
<span>Settings</span>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{(page === "/profile/likes" || page === "/profile/settings") && (
|
|
||||||
<Link aria-label="Go Back to Profile" to={`/profile/${user.id}`}>
|
|
||||||
<Icon icon="tabler:chevron-left" />
|
|
||||||
<span>Back</span>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
import { ReportReason } from "@prisma/client";
|
import type { ReportReason } from "@tomodachi-share/shared";
|
||||||
import { useSelect } from "downshift";
|
import { useSelect } from "downshift";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -18,6 +18,8 @@ import LinkOutPage from "./pages/out.tsx";
|
||||||
import Layout from "./layout.tsx";
|
import Layout from "./layout.tsx";
|
||||||
import ProfileLayout from "./pages/profile/layout.tsx";
|
import ProfileLayout from "./pages/profile/layout.tsx";
|
||||||
import ProfileLikesPage from "./pages/profile/likes.tsx";
|
import ProfileLikesPage from "./pages/profile/likes.tsx";
|
||||||
|
import ReportMiiPage from "./pages/report/mii.tsx";
|
||||||
|
import ReportUserPage from "./pages/report/user.tsx";
|
||||||
|
|
||||||
createRoot(document.getElementById("root")!).render(
|
createRoot(document.getElementById("root")!).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
|
|
@ -34,6 +36,10 @@ createRoot(document.getElementById("root")!).render(
|
||||||
</Route>
|
</Route>
|
||||||
<Route path="/submit" element={<SubmitPage />} />
|
<Route path="/submit" element={<SubmitPage />} />
|
||||||
<Route path="/login" element={<LoginPage />} />
|
<Route path="/login" element={<LoginPage />} />
|
||||||
|
<Route path="/report">
|
||||||
|
<Route path="mii/:id" element={<ReportMiiPage />} />
|
||||||
|
<Route path="profile/:id" element={<ReportUserPage />} />
|
||||||
|
</Route>
|
||||||
<Route path="/out" element={<LinkOutPage />} />
|
<Route path="/out" element={<LinkOutPage />} />
|
||||||
<Route path="/privacy" element={<PrivacyPage />} />
|
<Route path="/privacy" element={<PrivacyPage />} />
|
||||||
<Route path="/terms-of-service" element={<TermsOfServicePage />} />
|
<Route path="/terms-of-service" element={<TermsOfServicePage />} />
|
||||||
|
|
|
||||||
|
|
@ -294,7 +294,7 @@ export default function MiiPage() {
|
||||||
{/* <AuthorButtons mii={mii} /> */}
|
{/* <AuthorButtons mii={mii} /> */}
|
||||||
|
|
||||||
<ShareMiiButton miiId={mii.id} />
|
<ShareMiiButton miiId={mii.id} />
|
||||||
<Link aria-label="Report Mii" to={`${API_URL}/report/mii/${mii.id}`}>
|
<Link aria-label="Report Mii" to={`/report/mii/${mii.id}`}>
|
||||||
<Icon icon="material-symbols:flag-rounded" />
|
<Icon icon="material-symbols:flag-rounded" />
|
||||||
<span>Report</span>
|
<span>Report</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
import { Outlet, useNavigate, useParams } from "react-router";
|
import { Outlet, useNavigate, useParams } from "react-router";
|
||||||
import ProfileInformation from "../../components/profile-information";
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useStore } from "@nanostores/react";
|
import { useStore } from "@nanostores/react";
|
||||||
import { session } from "../../session";
|
import { session } from "../../session";
|
||||||
|
import { Icon } from "@iconify/react";
|
||||||
|
import { Link } from "react-router";
|
||||||
|
import Description from "../../components/description";
|
||||||
|
|
||||||
export default function ProfileLayout() {
|
export default function ProfileLayout() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
|
|
@ -41,9 +43,93 @@ export default function ProfileLayout() {
|
||||||
return <div className="p-6 text-center">Loading...</div>;
|
return <div className="p-6 text-center">Loading...</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const currentUser = user ?? $session?.user;
|
||||||
|
const page = location.pathname;
|
||||||
|
const isAdmin = currentUser?.id === Number(import.meta.env.VITE_ADMIN_USER_ID);
|
||||||
|
const isContributor = import.meta.env.VITE_CONTRIBUTORS_USER_IDS?.split(",").includes(user?.id);
|
||||||
|
const isOwnProfile = currentUser?.id === user?.id;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<ProfileInformation user={user} />
|
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex gap-4 mb-2 max-md:flex-col">
|
||||||
|
<div className="flex w-full gap-4 overflow-x-scroll">
|
||||||
|
{/* Profile picture */}
|
||||||
|
<Link to={`/profile/${user.id}`} className="size-28 aspect-square">
|
||||||
|
<img
|
||||||
|
src={user.image.startsWith("/profile") ? `${import.meta.env.VITE_API_URL}${user.image}` : user.image}
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.onerror = null; // Prevent infinite loops
|
||||||
|
e.currentTarget.src = "/guest.png";
|
||||||
|
}}
|
||||||
|
className="rounded-full bg-white border-2 border-orange-400 shadow w-full max-md:self-center"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
{/* User information */}
|
||||||
|
<div className="flex flex-col w-full relative py-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<h1 className="text-3xl font-extrabold wrap-break-word">{user.name}</h1>
|
||||||
|
{isAdmin && (
|
||||||
|
<div data-tooltip="Admin" className="text-orange-400">
|
||||||
|
<Icon icon="mdi:shield-moon" className="text-2xl" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isContributor && (
|
||||||
|
<div data-tooltip="Contributor" className="text-orange-400">
|
||||||
|
<Icon icon="mingcute:group-fill" className="text-2xl" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-black/60 text-sm font-semibold wrap-break-word">ID: {user?.id}</h2>
|
||||||
|
|
||||||
|
<div className="mt-3 text-sm flex gap-8">
|
||||||
|
<h4 title={`${new Date(user.createdAt).toLocaleTimeString("en-GB", { timeZone: "UTC" })} UTC`}>
|
||||||
|
<span className="font-medium">Created:</span>{" "}
|
||||||
|
{new Date(user.createdAt).toLocaleDateString("en-GB", { month: "long", day: "2-digit", year: "numeric" })}
|
||||||
|
</h4>
|
||||||
|
<h4>
|
||||||
|
Liked <span className="font-bold">{user._count.likes}</span> Miis
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{user.description && <Description text={user.description} className="max-h-32!" />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="flex gap-1 w-fit text-3xl text-orange-400 max-md:place-self-center *:size-17 *:flex *:flex-col *:items-center *:gap-1 **:transition-discrete **:duration-150 *:hover:brightness-75 *:hover:scale-[1.08] *:[&_span]:text-sm">
|
||||||
|
{!isOwnProfile && (
|
||||||
|
<Link aria-label="Report User" to={`/report/profile/${user.id}`}>
|
||||||
|
<Icon icon="material-symbols:flag-rounded" />
|
||||||
|
<span>Report</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{isOwnProfile && isAdmin && (
|
||||||
|
<Link aria-label="Go to Admin" to="/admin">
|
||||||
|
<Icon icon="mdi:shield-moon" />
|
||||||
|
<span>Admin</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{isOwnProfile && page !== "/profile/likes" && (
|
||||||
|
<Link aria-label="Go to My Likes" to="/profile/likes">
|
||||||
|
<Icon icon="icon-park-solid:like" />
|
||||||
|
<span>My Likes</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{isOwnProfile && page !== "/profile/settings" && (
|
||||||
|
<Link aria-label="Go to Settings" to="/profile/settings">
|
||||||
|
<Icon icon="material-symbols:settings-rounded" />
|
||||||
|
<span>Settings</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{(page === "/profile/likes" || page === "/profile/settings") && (
|
||||||
|
<Link aria-label="Go Back to Profile" to={`/profile/${user.id}`}>
|
||||||
|
<Icon icon="tabler:chevron-left" />
|
||||||
|
<span>Back</span>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
103
frontend/src/pages/report/mii.tsx
Normal file
103
frontend/src/pages/report/mii.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
import { useNavigate, useParams } from "react-router";
|
||||||
|
import ReasonSelector from "../../components/reason-selector";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { type ReportReason } from "@tomodachi-share/shared";
|
||||||
|
import SubmitButton from "../../components/submit-button";
|
||||||
|
|
||||||
|
export default function ReportMiiPage() {
|
||||||
|
const { id } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [reason, setReason] = useState<ReportReason>();
|
||||||
|
const [notes, setNotes] = useState<string>();
|
||||||
|
const [error, setError] = useState<string | undefined>(undefined);
|
||||||
|
|
||||||
|
const [mii, setMii] = useState<any>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const API_URL = import.meta.env.VITE_API_URL;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch(`${API_URL}/api/mii/${id}/info`)
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.ok) throw new Error("Failed to fetch Mii");
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
setMii(data);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
setLoading(false);
|
||||||
|
navigate("/404");
|
||||||
|
});
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
if (loading || !mii) {
|
||||||
|
return <div className="p-6 text-center">Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/report`, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ id: mii.id, type: "mii", reason: reason?.toLowerCase(), notes }),
|
||||||
|
credentials: "include",
|
||||||
|
});
|
||||||
|
const { error } = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
setError(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
navigate("/");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grow flex items-center justify-center">
|
||||||
|
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold">Report a Mii</h2>
|
||||||
|
<p className="text-sm text-zinc-500">If you encounter a rule-breaking Mii, please report it here</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr className="border-zinc-300" />
|
||||||
|
|
||||||
|
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex">
|
||||||
|
<img src={`${import.meta.env.VITE_API_URL}/mii/${mii.id}/image?type=mii`} alt="mii image" width={128} height={128} />
|
||||||
|
<div className="p-4">
|
||||||
|
<p className="text-xl font-bold line-clamp-1">{mii.name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full grid grid-cols-3 items-center">
|
||||||
|
<label htmlFor="reason" className="font-semibold">
|
||||||
|
Reason
|
||||||
|
</label>
|
||||||
|
<ReasonSelector reason={reason} setReason={setReason} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full grid grid-cols-3">
|
||||||
|
<label htmlFor="reason-note" className="font-semibold">
|
||||||
|
Reason notes
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
rows={3}
|
||||||
|
maxLength={256}
|
||||||
|
placeholder="Type notes here for the report..."
|
||||||
|
className="pill input rounded-xl! resize-none col-span-2"
|
||||||
|
value={notes}
|
||||||
|
onChange={(e) => setNotes(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr className="border-zinc-300" />
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
||||||
|
|
||||||
|
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
111
frontend/src/pages/report/user.tsx
Normal file
111
frontend/src/pages/report/user.tsx
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
import { useNavigate, useParams } from "react-router";
|
||||||
|
import ReasonSelector from "../../components/reason-selector";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { type ReportReason } from "@tomodachi-share/shared";
|
||||||
|
import SubmitButton from "../../components/submit-button";
|
||||||
|
|
||||||
|
export default function ReportUserPage() {
|
||||||
|
const { id } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [reason, setReason] = useState<ReportReason>();
|
||||||
|
const [notes, setNotes] = useState<string>();
|
||||||
|
const [error, setError] = useState<string | undefined>(undefined);
|
||||||
|
|
||||||
|
const [user, setUser] = useState<any>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const API_URL = import.meta.env.VITE_API_URL;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetch(`${API_URL}/api/profile/${id}/info`)
|
||||||
|
.then((res) => {
|
||||||
|
if (!res.ok) throw new Error("Failed to fetch profile");
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
setUser(data);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
setLoading(false);
|
||||||
|
navigate("/404");
|
||||||
|
});
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
if (loading || !user) {
|
||||||
|
return <div className="p-6 text-center">Loading...</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/report`, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ id: user.id, type: "user", reason: reason?.toLowerCase(), notes }),
|
||||||
|
credentials: "include",
|
||||||
|
});
|
||||||
|
const { error } = await response.json();
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
setError(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
navigate("/");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grow flex items-center justify-center">
|
||||||
|
<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-4 w-full max-w-2xl">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold">Report a User</h2>
|
||||||
|
<p className="text-sm text-zinc-500">If you encounter a user causing issues, please report them here</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr className="border-zinc-300" />
|
||||||
|
|
||||||
|
<div className="bg-orange-100 rounded-xl border-2 border-orange-400 flex p-4 gap-4">
|
||||||
|
<img
|
||||||
|
src={user.image.startsWith("/profile") ? `${import.meta.env.VITE_API_URL}${user.image}` : user.image}
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.onerror = null; // Prevent infinite loops
|
||||||
|
e.currentTarget.src = "/guest.png";
|
||||||
|
}}
|
||||||
|
alt="profile picture"
|
||||||
|
width={96}
|
||||||
|
height={96}
|
||||||
|
className="aspect-square rounded-full border-2 border-orange-400"
|
||||||
|
/>
|
||||||
|
<p className="text-xl font-bold overflow-hidden text-ellipsis">{user.name}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full grid grid-cols-3 items-center">
|
||||||
|
<label htmlFor="reason" className="font-semibold">
|
||||||
|
Reason
|
||||||
|
</label>
|
||||||
|
<ReasonSelector reason={reason} setReason={setReason} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full grid grid-cols-3">
|
||||||
|
<label htmlFor="reason-note" className="font-semibold">
|
||||||
|
Reason notes
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
rows={3}
|
||||||
|
maxLength={256}
|
||||||
|
placeholder="Type notes here for the report..."
|
||||||
|
className="pill input rounded-xl! resize-none col-span-2"
|
||||||
|
value={notes}
|
||||||
|
onChange={(e) => setNotes(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr className="border-zinc-300" />
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
|
||||||
|
|
||||||
|
<SubmitButton onClick={handleSubmit} className="ml-auto" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -2,4 +2,4 @@ export * from "./constants";
|
||||||
export * from "./qr-codes";
|
export * from "./qr-codes";
|
||||||
export * from "./switch";
|
export * from "./switch";
|
||||||
export * from "./three-ds-tomodachi-life-mii";
|
export * from "./three-ds-tomodachi-life-mii";
|
||||||
export type { SwitchMiiInstructions, MiiGender, MiiMakeup, MiiPlatform } from "./types";
|
export type { SwitchMiiInstructions, MiiGender, MiiMakeup, MiiPlatform, ReportReason } from "./types";
|
||||||
|
|
|
||||||
1
shared/src/types.d.ts
vendored
1
shared/src/types.d.ts
vendored
|
|
@ -1,6 +1,7 @@
|
||||||
type MiiGender = "MALE" | "FEMALE" | "NONBINARY";
|
type MiiGender = "MALE" | "FEMALE" | "NONBINARY";
|
||||||
type MiiPlatform = "THREE_DS" | "SWITCH";
|
type MiiPlatform = "THREE_DS" | "SWITCH";
|
||||||
type MiiMakeup = "FULL" | "PARTIAL" | "NONE";
|
type MiiMakeup = "FULL" | "PARTIAL" | "NONE";
|
||||||
|
type ReportReason = "INAPPROPRIATE" | "SPAM" | "BAD_QUALITY" | "OTHER";
|
||||||
|
|
||||||
export interface SwitchMiiInstructions {
|
export interface SwitchMiiInstructions {
|
||||||
head: {
|
head: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue