first commit: Complete phishing test management panel with Node.js backend and React frontend
This commit is contained in:
salvacybersec
198
frontend/src/pages/Tokens.jsx
Normal file
198
frontend/src/pages/Tokens.jsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Paper,
|
||||
Typography,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
MenuItem,
|
||||
} from '@mui/material';
|
||||
import { Add, Check, Close } from '@mui/icons-material';
|
||||
import { tokenService } from '../services/tokenService';
|
||||
import { companyService } from '../services/companyService';
|
||||
import { templateService } from '../services/templateService';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
function Tokens() {
|
||||
const [tokens, setTokens] = useState([]);
|
||||
const [companies, setCompanies] = useState([]);
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
company_id: '',
|
||||
target_email: '',
|
||||
employee_name: '',
|
||||
template_type: 'bank',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [tokensData, companiesData, templatesData] = await Promise.all([
|
||||
tokenService.getAll(),
|
||||
companyService.getAll(),
|
||||
templateService.getAll(),
|
||||
]);
|
||||
setTokens(tokensData.data);
|
||||
setCompanies(companiesData.data);
|
||||
setTemplates(templatesData.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to load data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateAndSend = async () => {
|
||||
try {
|
||||
await tokenService.createAndSend(formData);
|
||||
setOpenDialog(false);
|
||||
setFormData({ company_id: '', target_email: '', employee_name: '', template_type: 'bank' });
|
||||
loadData();
|
||||
alert('Token oluşturuldu ve mail gönderildi!');
|
||||
} catch (error) {
|
||||
console.error('Failed to create token:', error);
|
||||
alert('Token oluşturulamadı: ' + (error.response?.data?.error || error.message));
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
|
||||
<Typography variant="h4">Tracking Tokenlar</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={() => setOpenDialog(true)}
|
||||
>
|
||||
Yeni Mail Oluştur
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<TableContainer component={Paper}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Email</TableCell>
|
||||
<TableCell>Şirket</TableCell>
|
||||
<TableCell>Çalışan</TableCell>
|
||||
<TableCell>Durum</TableCell>
|
||||
<TableCell align="right">Tıklama</TableCell>
|
||||
<TableCell>Tarih</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{tokens.map((token) => (
|
||||
<TableRow key={token.id} hover sx={{ cursor: 'pointer' }}>
|
||||
<TableCell>{token.target_email}</TableCell>
|
||||
<TableCell>{token.company?.name}</TableCell>
|
||||
<TableCell>{token.employee_name || '-'}</TableCell>
|
||||
<TableCell>
|
||||
<Chip
|
||||
icon={token.clicked ? <Check /> : <Close />}
|
||||
label={token.clicked ? 'Tıklandı' : 'Bekliyor'}
|
||||
color={token.clicked ? 'success' : 'default'}
|
||||
size="small"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="right">{token.click_count}×</TableCell>
|
||||
<TableCell>
|
||||
{format(new Date(token.created_at), 'dd/MM/yyyy HH:mm')}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Yeni Token Oluştur ve Mail Gönder</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
select
|
||||
margin="dense"
|
||||
label="Şirket Seç"
|
||||
fullWidth
|
||||
required
|
||||
value={formData.company_id}
|
||||
onChange={(e) => setFormData({ ...formData, company_id: e.target.value })}
|
||||
>
|
||||
{companies.map((company) => (
|
||||
<MenuItem key={company.id} value={company.id}>
|
||||
{company.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<TextField
|
||||
margin="dense"
|
||||
label="Hedef Email"
|
||||
type="email"
|
||||
fullWidth
|
||||
required
|
||||
value={formData.target_email}
|
||||
onChange={(e) => setFormData({ ...formData, target_email: e.target.value })}
|
||||
/>
|
||||
<TextField
|
||||
margin="dense"
|
||||
label="Çalışan Adı (Opsiyonel)"
|
||||
fullWidth
|
||||
value={formData.employee_name}
|
||||
onChange={(e) => setFormData({ ...formData, employee_name: e.target.value })}
|
||||
/>
|
||||
<TextField
|
||||
select
|
||||
margin="dense"
|
||||
label="Mail Şablonu"
|
||||
fullWidth
|
||||
required
|
||||
value={formData.template_type}
|
||||
onChange={(e) => setFormData({ ...formData, template_type: e.target.value })}
|
||||
>
|
||||
{templates.map((template) => (
|
||||
<MenuItem key={template.id} value={template.template_type}>
|
||||
{template.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenDialog(false)}>İptal</Button>
|
||||
<Button
|
||||
onClick={handleCreateAndSend}
|
||||
variant="contained"
|
||||
disabled={!formData.company_id || !formData.target_email}
|
||||
>
|
||||
Oluştur ve Gönder
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tokens;
|
||||
|
||||
Reference in New Issue
Block a user