report form
This commit is contained in:
68
pages/api/reports.ts
Normal file
68
pages/api/reports.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
import sqlite3 from 'sqlite3'
|
||||
import path from 'path'
|
||||
|
||||
function extractDomain(url: string): string {
|
||||
try {
|
||||
const urlObj = new URL(url)
|
||||
return urlObj.hostname.replace('www.', '')
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
export default async function handler(
|
||||
req: NextApiRequest,
|
||||
res: NextApiResponse
|
||||
) {
|
||||
if (req.method !== 'POST') {
|
||||
return res.status(405).json({ error: 'Method not allowed' })
|
||||
}
|
||||
|
||||
const { source_url, reporter_email, reporter_name, description, categories } = req.body
|
||||
|
||||
if (!source_url || !description) {
|
||||
return res.status(400).json({ error: 'URL and description are required' })
|
||||
}
|
||||
|
||||
const domain = extractDomain(source_url)
|
||||
if (!domain) {
|
||||
return res.status(400).json({ error: 'Invalid URL format' })
|
||||
}
|
||||
|
||||
const dbPath = path.join(process.cwd(), 'database', 'antihoax.db')
|
||||
const db = new sqlite3.Database(dbPath)
|
||||
|
||||
try {
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
db.run(
|
||||
`INSERT INTO reports (
|
||||
source_url, source_domain, reporter_email, reporter_name,
|
||||
category_suggestions, description, ip_address, user_agent
|
||||
) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,
|
||||
[
|
||||
source_url,
|
||||
domain,
|
||||
reporter_email || null,
|
||||
reporter_name || null,
|
||||
JSON.stringify(categories || []),
|
||||
description,
|
||||
req.headers['x-forwarded-for'] || req.connection.remoteAddress,
|
||||
req.headers['user-agent']
|
||||
],
|
||||
function(err) {
|
||||
if (err) reject(err)
|
||||
else resolve()
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
return res.status(200).json({ success: true, message: 'Report submitted successfully' })
|
||||
|
||||
} catch (error) {
|
||||
console.error('Database error:', error)
|
||||
return res.status(500).json({ error: 'Internal server error' })
|
||||
} finally {
|
||||
db.close()
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,57 @@
|
||||
import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
|
||||
const Home: NextPage = () => {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Infohliadka</title>
|
||||
<meta name="description" content="Informačná stránka" />
|
||||
<title>Infohliadka - Ochrana pred problematickými zdrojmi</title>
|
||||
<meta name="description" content="Platforma na identifikáciu a monitorovanie problematických webových zdrojov" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main>
|
||||
<h1>Infohliadka</h1>
|
||||
<p>Vitajte na našej stránke!</p>
|
||||
<main style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
|
||||
<h1 style={{ fontSize: '2.5rem', marginBottom: '20px' }}>Infohliadka</h1>
|
||||
<p style={{ fontSize: '1.2rem', color: '#6b7280', marginBottom: '40px' }}>
|
||||
Platforma na ochranu pred hoaxmi, nenávistným prejavmi a dezinformáciami
|
||||
</p>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px', marginTop: '40px' }}>
|
||||
<div style={{ padding: '30px', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
|
||||
<h3>Nahlásiť obsah</h3>
|
||||
<p style={{ color: '#6b7280', margin: '15px 0' }}>
|
||||
Pomôžte nám identifikovať problematické stránky a obsah
|
||||
</p>
|
||||
<Link href="/report" style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#3b82f6',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
borderRadius: '6px',
|
||||
display: 'inline-block'
|
||||
}}>
|
||||
Nahlásiť
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '30px', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
|
||||
<h3>Admin panel</h3>
|
||||
<p style={{ color: '#6b7280', margin: '15px 0' }}>
|
||||
Správa hlásení a moderovanie obsahu
|
||||
</p>
|
||||
<Link href="/admin" style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#10b981',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
borderRadius: '6px',
|
||||
display: 'inline-block'
|
||||
}}>
|
||||
Admin
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
||||
212
pages/report.tsx
Normal file
212
pages/report.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import { useState } from 'react'
|
||||
import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import Link from 'next/link'
|
||||
|
||||
const ReportPage: NextPage = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
source_url: '',
|
||||
reporter_email: '',
|
||||
reporter_name: '',
|
||||
description: '',
|
||||
categories: [] as string[]
|
||||
})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [success, setSuccess] = useState(false)
|
||||
|
||||
const categories = [
|
||||
{ id: 'hoax', name: 'Hoax' },
|
||||
{ id: 'hate-speech', name: 'Hate Speech' },
|
||||
{ id: 'violence', name: 'Violence' },
|
||||
{ id: 'racism', name: 'Racism' },
|
||||
{ id: 'conspiracy', name: 'Conspiracy' },
|
||||
{ id: 'propaganda', name: 'Propaganda' }
|
||||
]
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/reports', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
setSuccess(true)
|
||||
setFormData({
|
||||
source_url: '',
|
||||
reporter_email: '',
|
||||
reporter_name: '',
|
||||
description: '',
|
||||
categories: []
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to submit report:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCategoryChange = (categoryId: string, checked: boolean) => {
|
||||
if (checked) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
categories: [...prev.categories, categoryId]
|
||||
}))
|
||||
} else {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
categories: prev.categories.filter(id => id !== categoryId)
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Hlásenie odoslané - Infohliadka</title>
|
||||
</Head>
|
||||
<div style={{ padding: '20px', textAlign: 'center' }}>
|
||||
<h1>Ďakujeme!</h1>
|
||||
<p>Vaše hlásenie bolo úspešne odoslané a bude preverené našimi moderátormi.</p>
|
||||
<Link href="/" style={{ color: '#3b82f6' }}>← Späť na hlavnú stránku</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Nahlásiť problematický obsah - Infohliadka</title>
|
||||
</Head>
|
||||
|
||||
<div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
|
||||
<h1>Nahlásiť problematický obsah</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} style={{ marginTop: '30px' }}>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
URL stránky *
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
required
|
||||
value={formData.source_url}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, source_url: e.target.value }))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Váš email (voliteľný)
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.reporter_email}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, reporter_email: e.target.value }))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
placeholder="vas@email.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Vaše meno (voliteľné)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.reporter_name}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, reporter_name: e.target.value }))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '4px'
|
||||
}}
|
||||
placeholder="Vaše meno"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Kategórie problému
|
||||
</label>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
|
||||
{categories.map(category => (
|
||||
<label key={category.id} style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.categories.includes(category.id)}
|
||||
onChange={(e) => handleCategoryChange(category.id, e.target.checked)}
|
||||
style={{ marginRight: '8px' }}
|
||||
/>
|
||||
{category.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
|
||||
Popis problému *
|
||||
</label>
|
||||
<textarea
|
||||
required
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '4px',
|
||||
minHeight: '100px'
|
||||
}}
|
||||
placeholder="Popíšte prečo považujete tento obsah za problematický..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
padding: '12px 24px',
|
||||
backgroundColor: loading ? '#9ca3af' : '#3b82f6',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: loading ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
{loading ? 'Odesilá sa...' : 'Odoslať hlásenie'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div style={{ marginTop: '30px' }}>
|
||||
<Link href="/" style={{ color: '#6b7280' }}>← Späť na hlavnú stránku</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReportPage
|
||||
Reference in New Issue
Block a user