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 type { NextPage } from 'next'
|
||||||
import Head from 'next/head'
|
import Head from 'next/head'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
const Home: NextPage = () => {
|
const Home: NextPage = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Head>
|
<Head>
|
||||||
<title>Infohliadka</title>
|
<title>Infohliadka - Ochrana pred problematickými zdrojmi</title>
|
||||||
<meta name="description" content="Informačná stránka" />
|
<meta name="description" content="Platforma na identifikáciu a monitorovanie problematických webových zdrojov" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<main>
|
<main style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
|
||||||
<h1>Infohliadka</h1>
|
<h1 style={{ fontSize: '2.5rem', marginBottom: '20px' }}>Infohliadka</h1>
|
||||||
<p>Vitajte na našej stránke!</p>
|
<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>
|
</main>
|
||||||
</div>
|
</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