Compare commits
14 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2d670ad9cf
|
||
|
|
fc2f5214b1
|
||
|
|
aa17c57e26
|
||
|
|
004021ff84
|
||
|
|
586d827552
|
||
|
|
17fc8d4b68
|
||
|
|
4a66676fcb
|
||
|
|
48db40b3d4
|
||
|
|
c32d4e7203
|
||
|
|
9b7c2c8e5b
|
||
|
|
0584c46190
|
||
|
|
13ccdbc2ab
|
||
|
|
ba0234fd13
|
||
|
|
81461d04e9
|
BIN
REAC_CDA_V04_24052023.pdf
Normal file
BIN
REAC_CDA_V04_24052023.pdf
Normal file
Binary file not shown.
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@memegoat/backend",
|
"name": "@memegoat/backend",
|
||||||
"version": "1.7.1",
|
"version": "1.7.3",
|
||||||
"description": "",
|
"description": "",
|
||||||
"author": "",
|
"author": "",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|||||||
@@ -1,10 +1,14 @@
|
|||||||
import { Injectable, Logger, NestMiddleware } from "@nestjs/common";
|
import { CACHE_MANAGER } from "@nestjs/cache-manager";
|
||||||
|
import { Inject, Injectable, Logger, NestMiddleware } from "@nestjs/common";
|
||||||
|
import type { Cache } from "cache-manager";
|
||||||
import type { NextFunction, Request, Response } from "express";
|
import type { NextFunction, Request, Response } from "express";
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class CrawlerDetectionMiddleware implements NestMiddleware {
|
export class CrawlerDetectionMiddleware implements NestMiddleware {
|
||||||
private readonly logger = new Logger("CrawlerDetection");
|
private readonly logger = new Logger("CrawlerDetection");
|
||||||
|
|
||||||
|
constructor(@Inject(CACHE_MANAGER) private cacheManager: Cache) {}
|
||||||
|
|
||||||
private readonly SUSPICIOUS_PATTERNS = [
|
private readonly SUSPICIOUS_PATTERNS = [
|
||||||
/\.env/,
|
/\.env/,
|
||||||
/wp-admin/,
|
/wp-admin/,
|
||||||
@@ -24,7 +28,7 @@ export class CrawlerDetectionMiddleware implements NestMiddleware {
|
|||||||
/db\./,
|
/db\./,
|
||||||
/backup\./,
|
/backup\./,
|
||||||
/cgi-bin/,
|
/cgi-bin/,
|
||||||
/\.well-known\/security\.txt/, // Bien que légitime, souvent scanné
|
/\.well-known\/security\.txt/,
|
||||||
];
|
];
|
||||||
|
|
||||||
private readonly BOT_USER_AGENTS = [
|
private readonly BOT_USER_AGENTS = [
|
||||||
@@ -40,11 +44,21 @@ export class CrawlerDetectionMiddleware implements NestMiddleware {
|
|||||||
/masscan/i,
|
/masscan/i,
|
||||||
];
|
];
|
||||||
|
|
||||||
use(req: Request, res: Response, next: NextFunction) {
|
async use(req: Request, res: Response, next: NextFunction) {
|
||||||
const { method, url, ip } = req;
|
const { method, url, ip } = req;
|
||||||
const userAgent = req.get("user-agent") || "unknown";
|
const userAgent = req.get("user-agent") || "unknown";
|
||||||
|
|
||||||
res.on("finish", () => {
|
// Vérifier si l'IP est bannie
|
||||||
|
const isBanned = await this.cacheManager.get(`banned_ip:${ip}`);
|
||||||
|
if (isBanned) {
|
||||||
|
this.logger.warn(`Banned IP attempt: ${ip} -> ${method} ${url}`);
|
||||||
|
res.status(403).json({
|
||||||
|
message: "Access denied: Your IP has been temporarily banned.",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
res.on("finish", async () => {
|
||||||
if (res.statusCode === 404) {
|
if (res.statusCode === 404) {
|
||||||
const isSuspiciousPath = this.SUSPICIOUS_PATTERNS.some((pattern) =>
|
const isSuspiciousPath = this.SUSPICIOUS_PATTERNS.some((pattern) =>
|
||||||
pattern.test(url),
|
pattern.test(url),
|
||||||
@@ -57,7 +71,9 @@ export class CrawlerDetectionMiddleware implements NestMiddleware {
|
|||||||
this.logger.warn(
|
this.logger.warn(
|
||||||
`Potential crawler detected: [${ip}] ${method} ${url} - User-Agent: ${userAgent}`,
|
`Potential crawler detected: [${ip}] ${method} ${url} - User-Agent: ${userAgent}`,
|
||||||
);
|
);
|
||||||
// Ici, on pourrait ajouter une logique pour bannir l'IP temporairement via Redis
|
|
||||||
|
// Bannir l'IP pour 24h via Redis
|
||||||
|
await this.cacheManager.set(`banned_ip:${ip}`, true, 86400000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@memegoat/frontend",
|
"name": "@memegoat/frontend",
|
||||||
"version": "1.7.1",
|
"version": "1.7.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
|
|||||||
@@ -24,6 +24,12 @@ import {
|
|||||||
FormMessage,
|
FormMessage,
|
||||||
} from "@/components/ui/form";
|
} from "@/components/ui/form";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
InputOTP,
|
||||||
|
InputOTPGroup,
|
||||||
|
InputOTPSeparator,
|
||||||
|
InputOTPSlot,
|
||||||
|
} from "@/components/ui/input-otp";
|
||||||
import { useAuth } from "@/providers/auth-provider";
|
import { useAuth } from "@/providers/auth-provider";
|
||||||
|
|
||||||
const loginSchema = z.object({
|
const loginSchema = z.object({
|
||||||
@@ -36,8 +42,11 @@ const loginSchema = z.object({
|
|||||||
type LoginFormValues = z.infer<typeof loginSchema>;
|
type LoginFormValues = z.infer<typeof loginSchema>;
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const { login } = useAuth();
|
const { login, verify2fa } = useAuth();
|
||||||
const [loading, setLoading] = React.useState(false);
|
const [loading, setLoading] = React.useState(false);
|
||||||
|
const [show2fa, setShow2fa] = React.useState(false);
|
||||||
|
const [userId, setUserId] = React.useState<string | null>(null);
|
||||||
|
const [otpValue, setOtpValue] = React.useState("");
|
||||||
|
|
||||||
const form = useForm<LoginFormValues>({
|
const form = useForm<LoginFormValues>({
|
||||||
resolver: zodResolver(loginSchema),
|
resolver: zodResolver(loginSchema),
|
||||||
@@ -50,7 +59,11 @@ export default function LoginPage() {
|
|||||||
async function onSubmit(values: LoginFormValues) {
|
async function onSubmit(values: LoginFormValues) {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
try {
|
try {
|
||||||
await login(values.email, values.password);
|
const res = await login(values.email, values.password);
|
||||||
|
if (res.userId && res.message === "Please provide 2FA token") {
|
||||||
|
setUserId(res.userId);
|
||||||
|
setShow2fa(true);
|
||||||
|
}
|
||||||
} catch (_error) {
|
} catch (_error) {
|
||||||
// Error is handled in useAuth via toast
|
// Error is handled in useAuth via toast
|
||||||
} finally {
|
} finally {
|
||||||
@@ -58,6 +71,20 @@ export default function LoginPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function onOtpSubmit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!userId || otpValue.length !== 6) return;
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
await verify2fa(userId, otpValue);
|
||||||
|
} catch (_error) {
|
||||||
|
// Error handled in useAuth
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-zinc-950 p-4">
|
<div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-zinc-950 p-4">
|
||||||
<div className="w-full max-w-md space-y-4">
|
<div className="w-full max-w-md space-y-4">
|
||||||
@@ -70,45 +97,82 @@ export default function LoginPage() {
|
|||||||
</Link>
|
</Link>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="text-2xl">Connexion</CardTitle>
|
<CardTitle className="text-2xl">
|
||||||
|
{show2fa ? "Double Authentification" : "Connexion"}
|
||||||
|
</CardTitle>
|
||||||
<CardDescription>
|
<CardDescription>
|
||||||
Entrez vos identifiants pour accéder à votre compte MemeGoat.
|
{show2fa
|
||||||
|
? "Entrez le code à 6 chiffres de votre application d'authentification."
|
||||||
|
: "Entrez vos identifiants pour accéder à votre compte MemeGoat."}
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Form {...form}>
|
{show2fa ? (
|
||||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
<form onSubmit={onOtpSubmit} className="space-y-6 flex flex-col items-center">
|
||||||
<FormField
|
<InputOTP
|
||||||
control={form.control}
|
maxLength={6}
|
||||||
name="email"
|
value={otpValue}
|
||||||
render={({ field }) => (
|
onChange={(value) => setOtpValue(value)}
|
||||||
<FormItem>
|
>
|
||||||
<FormLabel>Email</FormLabel>
|
<InputOTPGroup>
|
||||||
<FormControl>
|
<InputOTPSlot index={0} />
|
||||||
<Input placeholder="goat@example.com" {...field} />
|
<InputOTPSlot index={1} />
|
||||||
</FormControl>
|
<InputOTPSlot index={2} />
|
||||||
<FormMessage />
|
</InputOTPGroup>
|
||||||
</FormItem>
|
<InputOTPSeparator />
|
||||||
)}
|
<InputOTPGroup>
|
||||||
/>
|
<InputOTPSlot index={3} />
|
||||||
<FormField
|
<InputOTPSlot index={4} />
|
||||||
control={form.control}
|
<InputOTPSlot index={5} />
|
||||||
name="password"
|
</InputOTPGroup>
|
||||||
render={({ field }) => (
|
</InputOTP>
|
||||||
<FormItem>
|
<Button type="submit" className="w-full" disabled={loading || otpValue.length !== 6}>
|
||||||
<FormLabel>Mot de passe</FormLabel>
|
{loading ? "Vérification..." : "Vérifier le code"}
|
||||||
<FormControl>
|
</Button>
|
||||||
<Input type="password" placeholder="••••••••" {...field} />
|
<Button
|
||||||
</FormControl>
|
variant="ghost"
|
||||||
<FormMessage />
|
className="w-full"
|
||||||
</FormItem>
|
onClick={() => setShow2fa(false)}
|
||||||
)}
|
disabled={loading}
|
||||||
/>
|
>
|
||||||
<Button type="submit" className="w-full" disabled={loading}>
|
Retour
|
||||||
{loading ? "Connexion en cours..." : "Se connecter"}
|
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
) : (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="goat@example.com" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Mot de passe</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input type="password" placeholder="••••••••" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button type="submit" className="w-full" disabled={loading}>
|
||||||
|
{loading ? "Connexion en cours..." : "Se connecter"}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
<CardFooter className="flex flex-col space-y-2">
|
<CardFooter className="flex flex-col space-y-2">
|
||||||
<p className="text-sm text-center text-muted-foreground">
|
<p className="text-sm text-center text-muted-foreground">
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { AlertCircle, FileText, LayoutGrid, Users } from "lucide-react";
|
import { AlertCircle, FileText, Flag, LayoutGrid, Users } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
@@ -54,6 +54,13 @@ export default function AdminDashboardPage() {
|
|||||||
href: "/admin/categories",
|
href: "/admin/categories",
|
||||||
color: "text-purple-500",
|
color: "text-purple-500",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "Signalements",
|
||||||
|
value: "Voir",
|
||||||
|
icon: Flag,
|
||||||
|
href: "/admin/reports",
|
||||||
|
color: "text-red-500",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
208
frontend/src/app/(dashboard)/admin/reports/page.tsx
Normal file
208
frontend/src/app/(dashboard)/admin/reports/page.tsx
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import {
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
AlertCircle,
|
||||||
|
MoreHorizontal,
|
||||||
|
ArrowLeft,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { adminService } from "@/services/admin.service";
|
||||||
|
import { ReportStatus, type Report } from "@/services/report.service";
|
||||||
|
|
||||||
|
export default function AdminReportsPage() {
|
||||||
|
const [reports, setReports] = useState<Report[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
const fetchReports = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const data = await adminService.getReports();
|
||||||
|
setReports(data);
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Erreur lors du chargement des signalements.");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchReports();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleUpdateStatus = async (reportId: string, status: ReportStatus) => {
|
||||||
|
try {
|
||||||
|
await adminService.updateReportStatus(reportId, status);
|
||||||
|
toast.success("Statut mis à jour.");
|
||||||
|
fetchReports();
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Erreur lors de la mise à jour du statut.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusBadge = (status: ReportStatus) => {
|
||||||
|
switch (status) {
|
||||||
|
case ReportStatus.PENDING:
|
||||||
|
return <Badge variant="outline">En attente</Badge>;
|
||||||
|
case ReportStatus.REVIEWED:
|
||||||
|
return <Badge variant="secondary">Examiné</Badge>;
|
||||||
|
case ReportStatus.RESOLVED:
|
||||||
|
return <Badge variant="success">Résolu</Badge>;
|
||||||
|
case ReportStatus.DISMISSED:
|
||||||
|
return <Badge variant="destructive">Rejeté</Badge>;
|
||||||
|
default:
|
||||||
|
return <Badge variant="default">{status}</Badge>;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-1 space-y-8 p-4 pt-6 md:p-8">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button variant="ghost" size="icon" asChild>
|
||||||
|
<Link href="/admin">
|
||||||
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight">Signalements</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Liste des signalements</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Gérez les signalements de contenu inapproprié.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Signalé par</TableHead>
|
||||||
|
<TableHead>Cible</TableHead>
|
||||||
|
<TableHead>Raison</TableHead>
|
||||||
|
<TableHead>Description</TableHead>
|
||||||
|
<TableHead>Statut</TableHead>
|
||||||
|
<TableHead>Date</TableHead>
|
||||||
|
<TableHead className="text-right">Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{loading ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={7} className="text-center py-8">
|
||||||
|
Chargement...
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : reports.length === 0 ? (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={7} className="text-center py-8">
|
||||||
|
Aucun signalement trouvé.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
) : (
|
||||||
|
reports.map((report) => (
|
||||||
|
<TableRow key={report.uuid}>
|
||||||
|
<TableCell>
|
||||||
|
{report.reporterId.substring(0, 8)}...
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{report.contentId ? (
|
||||||
|
<Link
|
||||||
|
href={`/meme/${report.contentId}`}
|
||||||
|
className="text-primary hover:underline"
|
||||||
|
>
|
||||||
|
Contenu
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
"Tag"
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-medium capitalize">
|
||||||
|
{report.reason}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="max-w-xs truncate">
|
||||||
|
{report.description || "-"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{getStatusBadge(report.status)}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{new Date(report.createdAt).toLocaleDateString()}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" size="icon">
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() =>
|
||||||
|
handleUpdateStatus(report.uuid, ReportStatus.REVIEWED)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<AlertCircle className="h-4 w-4 mr-2" />
|
||||||
|
Marquer comme examiné
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() =>
|
||||||
|
handleUpdateStatus(report.uuid, ReportStatus.RESOLVED)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<CheckCircle className="h-4 w-4 mr-2" />
|
||||||
|
Marquer comme résolu
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() =>
|
||||||
|
handleUpdateStatus(report.uuid, ReportStatus.DISMISSED)
|
||||||
|
}
|
||||||
|
className="text-destructive"
|
||||||
|
>
|
||||||
|
<XCircle className="h-4 w-4 mr-2" />
|
||||||
|
Rejeter
|
||||||
|
</DropdownMenuItem>
|
||||||
|
{report.contentId && (
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<Link href={`/meme/${report.contentId}`}>
|
||||||
|
Voir le contenu
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -12,6 +12,7 @@ import {
|
|||||||
Sun,
|
Sun,
|
||||||
Trash2,
|
Trash2,
|
||||||
User as UserIcon,
|
User as UserIcon,
|
||||||
|
Download,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useTheme } from "next-themes";
|
import { useTheme } from "next-themes";
|
||||||
@@ -52,6 +53,7 @@ import { Label } from "@/components/ui/label";
|
|||||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||||
import { Spinner } from "@/components/ui/spinner";
|
import { Spinner } from "@/components/ui/spinner";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { TwoFactorSetup } from "@/components/two-factor-setup";
|
||||||
import { useAuth } from "@/providers/auth-provider";
|
import { useAuth } from "@/providers/auth-provider";
|
||||||
import { UserService } from "@/services/user.service";
|
import { UserService } from "@/services/user.service";
|
||||||
|
|
||||||
@@ -68,6 +70,7 @@ export default function SettingsPage() {
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [isSaving, setIsSaving] = React.useState(false);
|
const [isSaving, setIsSaving] = React.useState(false);
|
||||||
const [isDeleting, setIsDeleting] = React.useState(false);
|
const [isDeleting, setIsDeleting] = React.useState(false);
|
||||||
|
const [isExporting, setIsExporting] = React.useState(false);
|
||||||
const [mounted, setMounted] = React.useState(false);
|
const [mounted, setMounted] = React.useState(false);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
@@ -143,6 +146,29 @@ export default function SettingsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleExportData = async () => {
|
||||||
|
setIsExporting(true);
|
||||||
|
try {
|
||||||
|
const data = await UserService.exportData();
|
||||||
|
const blob = new Blob([JSON.stringify(data, null, 2)], {
|
||||||
|
type: "application/json",
|
||||||
|
});
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute("download", `memegoat-data-${user?.username}.json`);
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
link.remove();
|
||||||
|
toast.success("Vos données ont été exportées avec succès.");
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
toast.error("Erreur lors de l'exportation des données.");
|
||||||
|
} finally {
|
||||||
|
setIsExporting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-2xl mx-auto py-12 px-4">
|
<div className="max-w-2xl mx-auto py-12 px-4">
|
||||||
<div className="flex items-center gap-3 mb-8">
|
<div className="flex items-center gap-3 mb-8">
|
||||||
@@ -239,6 +265,8 @@ export default function SettingsPage() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
<TwoFactorSetup />
|
||||||
|
|
||||||
<Card className="border-none shadow-sm">
|
<Card className="border-none shadow-sm">
|
||||||
<CardHeader className="pb-4">
|
<CardHeader className="pb-4">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
@@ -291,6 +319,47 @@ export default function SettingsPage() {
|
|||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-none shadow-sm">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<Download className="h-5 w-5 text-primary" />
|
||||||
|
<CardTitle>Portabilité des données</CardTitle>
|
||||||
|
</div>
|
||||||
|
<CardDescription>
|
||||||
|
Conformément au RGPD, vous pouvez exporter l'intégralité de vos données rattachées à votre compte.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 rounded-lg bg-white dark:bg-zinc-900 border">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="font-bold">Exporter mes données</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Téléchargez un fichier JSON contenant votre profil, vos mèmes et vos favoris.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={handleExportData}
|
||||||
|
disabled={isExporting}
|
||||||
|
className="font-semibold"
|
||||||
|
>
|
||||||
|
{isExporting ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Exportation...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Download className="h-4 w-4 mr-2" />
|
||||||
|
Exporter mes données
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card className="border-destructive/20 shadow-sm bg-destructive/5">
|
<Card className="border-destructive/20 shadow-sm bg-destructive/5">
|
||||||
<CardHeader className="pb-4">
|
<CardHeader className="pb-4">
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import {
|
import {
|
||||||
Edit,
|
Edit,
|
||||||
Eye,
|
Eye,
|
||||||
|
Flag,
|
||||||
Heart,
|
Heart,
|
||||||
MoreHorizontal,
|
MoreHorizontal,
|
||||||
Share2,
|
Share2,
|
||||||
@@ -34,6 +35,7 @@ import { useAuth } from "@/providers/auth-provider";
|
|||||||
import { ContentService } from "@/services/content.service";
|
import { ContentService } from "@/services/content.service";
|
||||||
import { FavoriteService } from "@/services/favorite.service";
|
import { FavoriteService } from "@/services/favorite.service";
|
||||||
import type { Content } from "@/types/content";
|
import type { Content } from "@/types/content";
|
||||||
|
import { ReportDialog } from "./report-dialog";
|
||||||
import { UserContentEditDialog } from "./user-content-edit-dialog";
|
import { UserContentEditDialog } from "./user-content-edit-dialog";
|
||||||
|
|
||||||
interface ContentCardProps {
|
interface ContentCardProps {
|
||||||
@@ -49,6 +51,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
|
|||||||
const [isLiked, setIsLiked] = React.useState(content.isLiked || false);
|
const [isLiked, setIsLiked] = React.useState(content.isLiked || false);
|
||||||
const [likesCount, setLikesCount] = React.useState(content.favoritesCount);
|
const [likesCount, setLikesCount] = React.useState(content.favoritesCount);
|
||||||
const [editDialogOpen, setEditDialogOpen] = React.useState(false);
|
const [editDialogOpen, setEditDialogOpen] = React.useState(false);
|
||||||
|
const [reportDialogOpen, setReportDialogOpen] = React.useState(false);
|
||||||
|
|
||||||
const isAuthor = user?.uuid === content.authorId;
|
const isAuthor = user?.uuid === content.authorId;
|
||||||
const isVideo = !content.mimeType.startsWith("image/");
|
const isVideo = !content.mimeType.startsWith("image/");
|
||||||
@@ -188,6 +191,12 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
|
|||||||
<Share2 className="h-4 w-4 mr-2" />
|
<Share2 className="h-4 w-4 mr-2" />
|
||||||
Partager
|
Partager
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
|
{!isAuthor && (
|
||||||
|
<DropdownMenuItem onClick={() => setReportDialogOpen(true)}>
|
||||||
|
<Flag className="h-4 w-4 mr-2" />
|
||||||
|
Signaler
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
117
frontend/src/components/report-dialog.tsx
Normal file
117
frontend/src/components/report-dialog.tsx
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { ReportReason, ReportService } from "@/services/report.service";
|
||||||
|
|
||||||
|
interface ReportDialogProps {
|
||||||
|
contentId?: string;
|
||||||
|
tagId?: string;
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ReportDialog({
|
||||||
|
contentId,
|
||||||
|
tagId,
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
}: ReportDialogProps) {
|
||||||
|
const [reason, setReason] = useState<ReportReason>(ReportReason.INAPPROPRIATE);
|
||||||
|
const [description, setDescription] = useState("");
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
setIsSubmitting(true);
|
||||||
|
try {
|
||||||
|
await ReportService.create({
|
||||||
|
contentId,
|
||||||
|
tagId,
|
||||||
|
reason,
|
||||||
|
description,
|
||||||
|
});
|
||||||
|
toast.success("Signalement envoyé avec succès. Merci de nous aider à maintenir la communauté sûre.");
|
||||||
|
onOpenChange(false);
|
||||||
|
setDescription("");
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Erreur lors de l'envoi du signalement.");
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Signaler le contenu</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Pourquoi signalez-vous ce contenu ? Un modérateur examinera votre demande.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid gap-4 py-4">
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="reason">Raison</Label>
|
||||||
|
<Select
|
||||||
|
value={reason}
|
||||||
|
onValueChange={(value) => setReason(value as ReportReason)}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="reason">
|
||||||
|
<SelectValue placeholder="Sélectionnez une raison" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value={ReportReason.INAPPROPRIATE}>Inapproprié</SelectItem>
|
||||||
|
<SelectItem value={ReportReason.SPAM}>Spam</SelectItem>
|
||||||
|
<SelectItem value={ReportReason.COPYRIGHT}>Droit d'auteur</SelectItem>
|
||||||
|
<SelectItem value={ReportReason.OTHER}>Autre</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="description">Description (optionnelle)</Label>
|
||||||
|
<Textarea
|
||||||
|
id="description"
|
||||||
|
placeholder="Détaillez votre signalement..."
|
||||||
|
value={description}
|
||||||
|
onChange={(e) => setDescription(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => onOpenChange(false)}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
Annuler
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
{isSubmitting ? "Envoi..." : "Signaler"}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
213
frontend/src/components/two-factor-setup.tsx
Normal file
213
frontend/src/components/two-factor-setup.tsx
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { Shield, ShieldCheck, ShieldAlert, Loader2 } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardFooter,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
InputOTP,
|
||||||
|
InputOTPGroup,
|
||||||
|
InputOTPSeparator,
|
||||||
|
InputOTPSlot,
|
||||||
|
} from "@/components/ui/input-otp";
|
||||||
|
import { AuthService } from "@/services/auth.service";
|
||||||
|
import { useAuth } from "@/providers/auth-provider";
|
||||||
|
|
||||||
|
export function TwoFactorSetup() {
|
||||||
|
const { user, refreshUser } = useAuth();
|
||||||
|
const [step, setStep] = useState<"idle" | "setup" | "verify">("idle");
|
||||||
|
const [qrCode, setQrCode] = useState<string | null>(null);
|
||||||
|
const [secret, setSecret] = useState<string | null>(null);
|
||||||
|
const [otpValue, setOtpValue] = useState("");
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleSetup = async () => {
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
const data = await AuthService.setup2fa();
|
||||||
|
setQrCode(data.qrCodeUrl);
|
||||||
|
setSecret(data.secret);
|
||||||
|
setStep("setup");
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Erreur lors de la configuration de la 2FA.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEnable = async () => {
|
||||||
|
if (otpValue.length !== 6) return;
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
await AuthService.enable2fa(otpValue);
|
||||||
|
toast.success("Double authentification activée !");
|
||||||
|
await refreshUser();
|
||||||
|
setStep("idle");
|
||||||
|
setOtpValue("");
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Code invalide. Veuillez réessayer.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDisable = async () => {
|
||||||
|
if (otpValue.length !== 6) return;
|
||||||
|
setIsLoading(true);
|
||||||
|
try {
|
||||||
|
await AuthService.disable2fa(otpValue);
|
||||||
|
toast.success("Double authentification désactivée.");
|
||||||
|
await refreshUser();
|
||||||
|
setStep("idle");
|
||||||
|
setOtpValue("");
|
||||||
|
} catch (error) {
|
||||||
|
toast.error("Code invalide. Veuillez réessayer.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Note: We need a way to know if 2FA is enabled.
|
||||||
|
// Assuming user object might have twoFactorEnabled property or similar.
|
||||||
|
// For now, let's assume it's on the user object (we might need to add it to the type).
|
||||||
|
const isEnabled = (user as any)?.twoFactorEnabled;
|
||||||
|
|
||||||
|
if (step === "idle") {
|
||||||
|
return (
|
||||||
|
<Card className="border-none shadow-sm">
|
||||||
|
<CardHeader className="pb-4">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<Shield className="h-5 w-5 text-primary" />
|
||||||
|
<CardTitle>Double Authentification (2FA)</CardTitle>
|
||||||
|
</div>
|
||||||
|
<CardDescription>
|
||||||
|
Ajoutez une couche de sécurité supplémentaire à votre compte en utilisant une application d'authentification.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-4 p-4 rounded-lg bg-zinc-50 dark:bg-zinc-900 border">
|
||||||
|
{isEnabled ? (
|
||||||
|
<>
|
||||||
|
<div className="bg-green-100 dark:bg-green-900/30 p-2 rounded-full">
|
||||||
|
<ShieldCheck className="h-6 w-6 text-green-600 dark:text-green-400" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-bold">La 2FA est activée</p>
|
||||||
|
<p className="text-sm text-muted-foreground">Votre compte est protégé par un code temporaire.</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" onClick={() => setStep("verify")}>
|
||||||
|
Désactiver
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="bg-zinc-200 dark:bg-zinc-800 p-2 rounded-full">
|
||||||
|
<ShieldAlert className="h-6 w-6 text-zinc-500" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-bold">La 2FA n'est pas activée</p>
|
||||||
|
<p className="text-sm text-muted-foreground">Activez la 2FA pour mieux protéger votre compte.</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="primary" size="sm" onClick={handleSetup} disabled={isLoading}>
|
||||||
|
{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Configurer"}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (step === "setup") {
|
||||||
|
return (
|
||||||
|
<Card className="border-none shadow-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Configurer la 2FA</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Scannez le QR Code ci-dessous avec votre application d'authentification (Google Authenticator, Authy, etc.).
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col items-center gap-6">
|
||||||
|
{qrCode && (
|
||||||
|
<div className="bg-white p-4 rounded-xl border-4 border-zinc-100">
|
||||||
|
<img src={qrCode} alt="QR Code 2FA" className="w-48 h-48" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="w-full space-y-2">
|
||||||
|
<p className="text-sm font-medium text-center">Ou entrez ce code manuellement :</p>
|
||||||
|
<code className="block p-2 bg-muted text-center rounded text-xs font-mono break-all">
|
||||||
|
{secret}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-4 w-full border-t pt-6">
|
||||||
|
<p className="text-sm font-medium">Entrez le code à 6 chiffres pour confirmer :</p>
|
||||||
|
<InputOTP maxLength={6} value={otpValue} onChange={setOtpValue}>
|
||||||
|
<InputOTPGroup>
|
||||||
|
<InputOTPSlot index={0} />
|
||||||
|
<InputOTPSlot index={1} />
|
||||||
|
<InputOTPSlot index={2} />
|
||||||
|
</InputOTPGroup>
|
||||||
|
<InputOTPSeparator />
|
||||||
|
<InputOTPGroup>
|
||||||
|
<InputOTPSlot index={3} />
|
||||||
|
<InputOTPSlot index={4} />
|
||||||
|
<InputOTPSlot index={5} />
|
||||||
|
</InputOTPGroup>
|
||||||
|
</InputOTP>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter className="flex justify-between">
|
||||||
|
<Button variant="ghost" onClick={() => setStep("idle")}>Annuler</Button>
|
||||||
|
<Button onClick={handleEnable} disabled={otpValue.length !== 6 || isLoading}>
|
||||||
|
{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Activer la 2FA"}
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (step === "verify") {
|
||||||
|
return (
|
||||||
|
<Card className="border-none shadow-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Désactiver la 2FA</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Veuillez entrer le code de votre application pour désactiver la double authentification.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col items-center gap-6">
|
||||||
|
<InputOTP maxLength={6} value={otpValue} onChange={setOtpValue}>
|
||||||
|
<InputOTPGroup>
|
||||||
|
<InputOTPSlot index={0} />
|
||||||
|
<InputOTPSlot index={1} />
|
||||||
|
<InputOTPSlot index={2} />
|
||||||
|
</InputOTPGroup>
|
||||||
|
<InputOTPSeparator />
|
||||||
|
<InputOTPGroup>
|
||||||
|
<InputOTPSlot index={3} />
|
||||||
|
<InputOTPSlot index={4} />
|
||||||
|
<InputOTPSlot index={5} />
|
||||||
|
</InputOTPGroup>
|
||||||
|
</InputOTP>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter className="flex justify-between">
|
||||||
|
<Button variant="ghost" onClick={() => setStep("idle")}>Annuler</Button>
|
||||||
|
<Button variant="destructive" onClick={handleDisable} disabled={otpValue.length !== 6 || isLoading}>
|
||||||
|
{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Confirmer la désactivation"}
|
||||||
|
</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@@ -5,14 +5,15 @@ import * as React from "react";
|
|||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { AuthService } from "@/services/auth.service";
|
import { AuthService } from "@/services/auth.service";
|
||||||
import { UserService } from "@/services/user.service";
|
import { UserService } from "@/services/user.service";
|
||||||
import type { RegisterPayload } from "@/types/auth";
|
import type { LoginResponse, RegisterPayload } from "@/types/auth";
|
||||||
import type { User } from "@/types/user";
|
import type { User } from "@/types/user";
|
||||||
|
|
||||||
interface AuthContextType {
|
interface AuthContextType {
|
||||||
user: User | null;
|
user: User | null;
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
isAuthenticated: boolean;
|
isAuthenticated: boolean;
|
||||||
login: (email: string, password: string) => Promise<void>;
|
login: (email: string, password: string) => Promise<LoginResponse>;
|
||||||
|
verify2fa: (userId: string, token: string) => Promise<void>;
|
||||||
register: (payload: RegisterPayload) => Promise<void>;
|
register: (payload: RegisterPayload) => Promise<void>;
|
||||||
logout: () => Promise<void>;
|
logout: () => Promise<void>;
|
||||||
refreshUser: () => Promise<void>;
|
refreshUser: () => Promise<void>;
|
||||||
@@ -59,12 +60,43 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
|||||||
|
|
||||||
const login = async (email: string, password: string) => {
|
const login = async (email: string, password: string) => {
|
||||||
try {
|
try {
|
||||||
await AuthService.login(email, password);
|
const response = await AuthService.login(email, password);
|
||||||
|
if (response.userId && response.message === "Please provide 2FA token") {
|
||||||
|
return response;
|
||||||
|
}
|
||||||
|
await refreshUser();
|
||||||
|
toast.success("Connexion réussie !");
|
||||||
|
router.push("/");
|
||||||
|
return response;
|
||||||
|
} catch (error: unknown) {
|
||||||
|
let errorMessage = "Erreur de connexion";
|
||||||
|
if (
|
||||||
|
error &&
|
||||||
|
typeof error === "object" &&
|
||||||
|
"response" in error &&
|
||||||
|
error.response &&
|
||||||
|
typeof error.response === "object" &&
|
||||||
|
"data" in error.response &&
|
||||||
|
error.response.data &&
|
||||||
|
typeof error.response.data === "object" &&
|
||||||
|
"message" in error.response.data &&
|
||||||
|
typeof error.response.data.message === "string"
|
||||||
|
) {
|
||||||
|
errorMessage = error.response.data.message;
|
||||||
|
}
|
||||||
|
toast.error(errorMessage);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const verify2fa = async (userId: string, token: string) => {
|
||||||
|
try {
|
||||||
|
await AuthService.verify2fa(userId, token);
|
||||||
await refreshUser();
|
await refreshUser();
|
||||||
toast.success("Connexion réussie !");
|
toast.success("Connexion réussie !");
|
||||||
router.push("/");
|
router.push("/");
|
||||||
} catch (error: unknown) {
|
} catch (error: unknown) {
|
||||||
let errorMessage = "Erreur de connexion";
|
let errorMessage = "Code 2FA invalide";
|
||||||
if (
|
if (
|
||||||
error &&
|
error &&
|
||||||
typeof error === "object" &&
|
typeof error === "object" &&
|
||||||
@@ -130,6 +162,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
|||||||
isLoading,
|
isLoading,
|
||||||
isAuthenticated: !!user,
|
isAuthenticated: !!user,
|
||||||
login,
|
login,
|
||||||
|
verify2fa,
|
||||||
register,
|
register,
|
||||||
logout,
|
logout,
|
||||||
refreshUser,
|
refreshUser,
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import api from "@/lib/api";
|
import api from "@/lib/api";
|
||||||
|
import type { Report, ReportStatus } from "./report.service";
|
||||||
|
|
||||||
export interface AdminStats {
|
export interface AdminStats {
|
||||||
users: number;
|
users: number;
|
||||||
@@ -11,4 +12,21 @@ export const adminService = {
|
|||||||
const response = await api.get("/admin/stats");
|
const response = await api.get("/admin/stats");
|
||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getReports: async (limit = 10, offset = 0): Promise<Report[]> => {
|
||||||
|
const response = await api.get("/reports", { params: { limit, offset } });
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateReportStatus: async (reportId: string, status: ReportStatus): Promise<void> => {
|
||||||
|
await api.patch(`/reports/${reportId}/status`, { status });
|
||||||
|
},
|
||||||
|
|
||||||
|
deleteUser: async (userId: string): Promise<void> => {
|
||||||
|
await api.delete(`/users/${userId}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
updateUser: async (userId: string, data: any): Promise<void> => {
|
||||||
|
await api.patch(`/users/admin/${userId}`, data);
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import api from "@/lib/api";
|
import api from "@/lib/api";
|
||||||
import type { LoginResponse, RegisterPayload } from "@/types/auth";
|
import type { LoginResponse, RegisterPayload, TwoFactorSetupResponse } from "@/types/auth";
|
||||||
|
|
||||||
export const AuthService = {
|
export const AuthService = {
|
||||||
async login(email: string, password: string): Promise<LoginResponse> {
|
async login(email: string, password: string): Promise<LoginResponse> {
|
||||||
@@ -10,6 +10,14 @@ export const AuthService = {
|
|||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async verify2fa(userId: string, token: string): Promise<LoginResponse> {
|
||||||
|
const { data } = await api.post<LoginResponse>("/auth/verify-2fa", {
|
||||||
|
userId,
|
||||||
|
token,
|
||||||
|
});
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
|
||||||
async register(payload: RegisterPayload): Promise<void> {
|
async register(payload: RegisterPayload): Promise<void> {
|
||||||
await api.post("/auth/register", payload);
|
await api.post("/auth/register", payload);
|
||||||
},
|
},
|
||||||
@@ -21,4 +29,17 @@ export const AuthService = {
|
|||||||
async refresh(): Promise<void> {
|
async refresh(): Promise<void> {
|
||||||
await api.post("/auth/refresh");
|
await api.post("/auth/refresh");
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async setup2fa(): Promise<TwoFactorSetupResponse> {
|
||||||
|
const { data } = await api.post<TwoFactorSetupResponse>("/users/me/2fa/setup");
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async enable2fa(token: string): Promise<void> {
|
||||||
|
await api.post("/users/me/2fa/enable", { token });
|
||||||
|
},
|
||||||
|
|
||||||
|
async disable2fa(token: string): Promise<void> {
|
||||||
|
await api.post("/users/me/2fa/disable", { token });
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
40
frontend/src/services/report.service.ts
Normal file
40
frontend/src/services/report.service.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import api from "@/lib/api";
|
||||||
|
|
||||||
|
export enum ReportReason {
|
||||||
|
INAPPROPRIATE = "inappropriate",
|
||||||
|
SPAM = "spam",
|
||||||
|
COPYRIGHT = "copyright",
|
||||||
|
OTHER = "other",
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ReportStatus {
|
||||||
|
PENDING = "pending",
|
||||||
|
REVIEWED = "reviewed",
|
||||||
|
RESOLVED = "resolved",
|
||||||
|
DISMISSED = "dismissed",
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateReportPayload {
|
||||||
|
contentId?: string;
|
||||||
|
tagId?: string;
|
||||||
|
reason: ReportReason;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Report {
|
||||||
|
uuid: string;
|
||||||
|
reporterId: string;
|
||||||
|
contentId?: string;
|
||||||
|
tagId?: string;
|
||||||
|
reason: ReportReason;
|
||||||
|
description?: string;
|
||||||
|
status: ReportStatus;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ReportService = {
|
||||||
|
async create(payload: CreateReportPayload): Promise<void> {
|
||||||
|
await api.post("/reports", payload);
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -53,4 +53,9 @@ export const UserService = {
|
|||||||
});
|
});
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async exportData(): Promise<any> {
|
||||||
|
const { data } = await api.get("/users/me/export");
|
||||||
|
return data;
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
export interface LoginResponse {
|
export interface LoginResponse {
|
||||||
message: string;
|
message: string;
|
||||||
userId: string;
|
userId?: string;
|
||||||
|
access_token?: string;
|
||||||
|
refresh_token?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface RegisterPayload {
|
export interface RegisterPayload {
|
||||||
@@ -17,6 +19,12 @@ export interface AuthStatus {
|
|||||||
username: string;
|
username: string;
|
||||||
displayName?: string;
|
displayName?: string;
|
||||||
avatarUrl?: string;
|
avatarUrl?: string;
|
||||||
|
role?: string;
|
||||||
};
|
};
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface TwoFactorSetupResponse {
|
||||||
|
qrCodeUrl: string;
|
||||||
|
secret: string;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@memegoat/source",
|
"name": "@memegoat/source",
|
||||||
"version": "1.7.1",
|
"version": "1.7.3",
|
||||||
"description": "",
|
"description": "",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"version:get": "cmake -P version.cmake GET",
|
"version:get": "cmake -P version.cmake GET",
|
||||||
|
|||||||
20852
pnpm-lock.yaml
generated
20852
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user