first commit: Complete phishing test management panel with Node.js backend and React frontend
This commit is contained in:
salvacybersec
42
frontend/src/App.css
Normal file
42
frontend/src/App.css
Normal file
@@ -0,0 +1,42 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
64
frontend/src/App.jsx
Normal file
64
frontend/src/App.jsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
|
||||
import { AuthProvider, useAuth } from './context/AuthContext';
|
||||
import Layout from './components/Layout/Layout';
|
||||
import Login from './pages/Login';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import Companies from './pages/Companies';
|
||||
import Tokens from './pages/Tokens';
|
||||
import Settings from './pages/Settings';
|
||||
|
||||
const theme = createTheme({
|
||||
palette: {
|
||||
mode: 'light',
|
||||
primary: {
|
||||
main: '#1976d2',
|
||||
},
|
||||
secondary: {
|
||||
main: '#dc004e',
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
|
||||
},
|
||||
});
|
||||
|
||||
function PrivateRoute({ children }) {
|
||||
const { user, loading } = useAuth();
|
||||
|
||||
if (loading) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return user ? children : <Navigate to="/login" />;
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<Layout />
|
||||
</PrivateRoute>
|
||||
}
|
||||
>
|
||||
<Route index element={<Dashboard />} />
|
||||
<Route path="companies" element={<Companies />} />
|
||||
<Route path="tokens" element={<Tokens />} />
|
||||
<Route path="settings" element={<Settings />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
1
frontend/src/assets/react.svg
Normal file
1
frontend/src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
171
frontend/src/components/Layout/Layout.jsx
Normal file
171
frontend/src/components/Layout/Layout.jsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { useState } from 'react';
|
||||
import { Outlet, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Box,
|
||||
Drawer,
|
||||
AppBar,
|
||||
Toolbar,
|
||||
List,
|
||||
Typography,
|
||||
Divider,
|
||||
IconButton,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Avatar,
|
||||
Menu,
|
||||
MenuItem,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Menu as MenuIcon,
|
||||
Dashboard,
|
||||
Business,
|
||||
Token as TokenIcon,
|
||||
Settings,
|
||||
Logout,
|
||||
AccountCircle,
|
||||
} from '@mui/icons-material';
|
||||
import { useAuth } from '../../context/AuthContext';
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const menuItems = [
|
||||
{ text: 'Dashboard', icon: <Dashboard />, path: '/' },
|
||||
{ text: 'Şirketler', icon: <Business />, path: '/companies' },
|
||||
{ text: 'Tokenlar', icon: <TokenIcon />, path: '/tokens' },
|
||||
{ text: 'Ayarlar', icon: <Settings />, path: '/settings' },
|
||||
];
|
||||
|
||||
function Layout() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const handleDrawerToggle = () => {
|
||||
setMobileOpen(!mobileOpen);
|
||||
};
|
||||
|
||||
const handleMenuOpen = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
const drawer = (
|
||||
<div>
|
||||
<Toolbar>
|
||||
<Typography variant="h6" noWrap component="div">
|
||||
🛡️ Oltalama
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
<Divider />
|
||||
<List>
|
||||
{menuItems.map((item) => (
|
||||
<ListItem key={item.text} disablePadding>
|
||||
<ListItemButton onClick={() => navigate(item.path)}>
|
||||
<ListItemIcon>{item.icon}</ListItemIcon>
|
||||
<ListItemText primary={item.text} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
width: { sm: `calc(100% - ${drawerWidth}px)` },
|
||||
ml: { sm: `${drawerWidth}px` },
|
||||
}}
|
||||
>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
edge="start"
|
||||
onClick={handleDrawerToggle}
|
||||
sx={{ mr: 2, display: { sm: 'none' } }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
|
||||
Phishing Test Yönetim Paneli
|
||||
</Typography>
|
||||
<IconButton color="inherit" onClick={handleMenuOpen}>
|
||||
<Avatar sx={{ width: 32, height: 32 }}>
|
||||
<AccountCircle />
|
||||
</Avatar>
|
||||
</IconButton>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuClose}
|
||||
>
|
||||
<MenuItem disabled>
|
||||
<Typography variant="body2">{user?.username}</Typography>
|
||||
</MenuItem>
|
||||
<Divider />
|
||||
<MenuItem onClick={handleLogout}>
|
||||
<Logout fontSize="small" sx={{ mr: 1 }} />
|
||||
Çıkış Yap
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
<Box
|
||||
component="nav"
|
||||
sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
|
||||
>
|
||||
<Drawer
|
||||
variant="temporary"
|
||||
open={mobileOpen}
|
||||
onClose={handleDrawerToggle}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
sx={{
|
||||
display: { xs: 'block', sm: 'none' },
|
||||
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
|
||||
}}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
sx={{
|
||||
display: { xs: 'none', sm: 'block' },
|
||||
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
|
||||
}}
|
||||
open
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
p: 3,
|
||||
width: { sm: `calc(100% - ${drawerWidth}px)` },
|
||||
}}
|
||||
>
|
||||
<Toolbar />
|
||||
<Outlet />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
|
||||
52
frontend/src/context/AuthContext.jsx
Normal file
52
frontend/src/context/AuthContext.jsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { createContext, useState, useContext, useEffect } from 'react';
|
||||
import { authService } from '../services/authService';
|
||||
|
||||
const AuthContext = createContext(null);
|
||||
|
||||
export const AuthProvider = ({ children }) => {
|
||||
const [user, setUser] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
checkAuth();
|
||||
}, []);
|
||||
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const response = await authService.checkAuth();
|
||||
if (response.authenticated) {
|
||||
setUser(response.user);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Auth check failed:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const login = async (username, password) => {
|
||||
const response = await authService.login(username, password);
|
||||
setUser(response.user);
|
||||
return response;
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
await authService.logout();
|
||||
setUser(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, loading, login, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAuth = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error('useAuth must be used within AuthProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
15
frontend/src/index.css
Normal file
15
frontend/src/index.css
Normal file
@@ -0,0 +1,15 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
10
frontend/src/main.jsx
Normal file
10
frontend/src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App.jsx';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
160
frontend/src/pages/Companies.jsx
Normal file
160
frontend/src/pages/Companies.jsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
Typography,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
TextField,
|
||||
} from '@mui/material';
|
||||
import { Add, TrendingUp } from '@mui/icons-material';
|
||||
import { companyService } from '../services/companyService';
|
||||
|
||||
function Companies() {
|
||||
const [companies, setCompanies] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
industry: '',
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
loadCompanies();
|
||||
}, []);
|
||||
|
||||
const loadCompanies = async () => {
|
||||
try {
|
||||
const response = await companyService.getAll();
|
||||
setCompanies(response.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to load companies:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
await companyService.create(formData);
|
||||
setOpenDialog(false);
|
||||
setFormData({ name: '', description: '', industry: '' });
|
||||
loadCompanies();
|
||||
} catch (error) {
|
||||
console.error('Failed to create company:', error);
|
||||
alert('Şirket oluşturulamadı');
|
||||
}
|
||||
};
|
||||
|
||||
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">Şirketler</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={() => setOpenDialog(true)}
|
||||
>
|
||||
Yeni Şirket
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{companies.map((company) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={company.id}>
|
||||
<Card
|
||||
sx={{ cursor: 'pointer', '&:hover': { boxShadow: 6 } }}
|
||||
onClick={() => navigate(`/companies/${company.id}`)}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{company.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
{company.industry || 'Sektör belirtilmemiş'}
|
||||
</Typography>
|
||||
<Box mt={2} display="flex" gap={1} flexWrap="wrap">
|
||||
<Chip
|
||||
label={`${company.total_tokens} Token`}
|
||||
size="small"
|
||||
color="primary"
|
||||
/>
|
||||
<Chip
|
||||
label={`${company.total_clicks} Tıklama`}
|
||||
size="small"
|
||||
color="success"
|
||||
/>
|
||||
<Chip
|
||||
icon={<TrendingUp />}
|
||||
label={`${company.click_rate}%`}
|
||||
size="small"
|
||||
color={company.click_rate > 30 ? 'error' : 'default'}
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
<Dialog open={openDialog} onClose={() => setOpenDialog(false)} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>Yeni Şirket Ekle</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField
|
||||
autoFocus
|
||||
margin="dense"
|
||||
label="Şirket Adı"
|
||||
fullWidth
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
/>
|
||||
<TextField
|
||||
margin="dense"
|
||||
label="Açıklama"
|
||||
fullWidth
|
||||
multiline
|
||||
rows={2}
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
/>
|
||||
<TextField
|
||||
margin="dense"
|
||||
label="Sektör"
|
||||
fullWidth
|
||||
value={formData.industry}
|
||||
onChange={(e) => setFormData({ ...formData, industry: e.target.value })}
|
||||
placeholder="Örn: Banking, Telecom, Government"
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpenDialog(false)}>İptal</Button>
|
||||
<Button onClick={handleCreate} variant="contained" disabled={!formData.name}>
|
||||
Oluştur
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Companies;
|
||||
|
||||
202
frontend/src/pages/Dashboard.jsx
Normal file
202
frontend/src/pages/Dashboard.jsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Grid,
|
||||
Paper,
|
||||
Typography,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Business,
|
||||
Token as TokenIcon,
|
||||
CheckCircle,
|
||||
TrendingUp,
|
||||
} from '@mui/icons-material';
|
||||
import { statsService } from '../services/statsService';
|
||||
import { format } from 'date-fns';
|
||||
import { tr } from 'date-fns/locale';
|
||||
|
||||
function Dashboard() {
|
||||
const [stats, setStats] = useState(null);
|
||||
const [recentClicks, setRecentClicks] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [statsData, clicksData] = await Promise.all([
|
||||
statsService.getDashboard(),
|
||||
statsService.getRecentClicks(10),
|
||||
]);
|
||||
setStats(statsData.data);
|
||||
setRecentClicks(clicksData.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to load dashboard:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const StatCard = ({ title, value, icon, color }) => (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center">
|
||||
<Box>
|
||||
<Typography color="textSecondary" gutterBottom variant="body2">
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="h4">{value}</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: `${color}.light`,
|
||||
borderRadius: 2,
|
||||
p: 1.5,
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Dashboard
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={3} sx={{ mb: 3 }}>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<StatCard
|
||||
title="Şirketler"
|
||||
value={stats?.overview?.total_companies || 0}
|
||||
icon={<Business sx={{ color: 'primary.main' }} />}
|
||||
color="primary"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<StatCard
|
||||
title="Toplam Token"
|
||||
value={stats?.overview?.total_tokens || 0}
|
||||
icon={<TokenIcon sx={{ color: 'info.main' }} />}
|
||||
color="info"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<StatCard
|
||||
title="Tıklanan"
|
||||
value={stats?.overview?.clicked_tokens || 0}
|
||||
icon={<CheckCircle sx={{ color: 'success.main' }} />}
|
||||
color="success"
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<StatCard
|
||||
title="Başarı Oranı"
|
||||
value={`${stats?.overview?.click_rate || 0}%`}
|
||||
icon={<TrendingUp sx={{ color: 'warning.main' }} />}
|
||||
color="warning"
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper sx={{ p: 2 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Şirket Performansı
|
||||
</Typography>
|
||||
<TableContainer>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Şirket</TableCell>
|
||||
<TableCell align="right">Tokenlar</TableCell>
|
||||
<TableCell align="right">Tıklama</TableCell>
|
||||
<TableCell align="right">Oran</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{stats?.top_companies?.map((company) => (
|
||||
<TableRow key={company.id}>
|
||||
<TableCell>{company.name}</TableCell>
|
||||
<TableCell align="right">{company.total_tokens}</TableCell>
|
||||
<TableCell align="right">{company.total_clicks}</TableCell>
|
||||
<TableCell align="right">
|
||||
<Chip
|
||||
label={`${company.click_rate}%`}
|
||||
size="small"
|
||||
color={company.click_rate > 30 ? 'error' : 'success'}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper sx={{ p: 2 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Son Tıklamalar
|
||||
</Typography>
|
||||
<TableContainer>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Email</TableCell>
|
||||
<TableCell>Şirket</TableCell>
|
||||
<TableCell>Konum</TableCell>
|
||||
<TableCell>Zaman</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{recentClicks.map((click) => (
|
||||
<TableRow key={click.id}>
|
||||
<TableCell sx={{ fontSize: '0.875rem' }}>
|
||||
{click.token?.target_email}
|
||||
</TableCell>
|
||||
<TableCell>{click.token?.company?.name}</TableCell>
|
||||
<TableCell>{click.city}, {click.country}</TableCell>
|
||||
<TableCell>
|
||||
{format(new Date(click.clicked_at), 'HH:mm', { locale: tr })}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
|
||||
111
frontend/src/pages/Login.jsx
Normal file
111
frontend/src/pages/Login.jsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Container,
|
||||
Paper,
|
||||
TextField,
|
||||
Button,
|
||||
Typography,
|
||||
Box,
|
||||
Alert,
|
||||
} from '@mui/material';
|
||||
import { LockOutlined } from '@mui/icons-material';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
|
||||
function Login() {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { login } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await login(username, password);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.error || 'Login failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container component="main" maxWidth="xs">
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: 8,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Paper elevation={3} sx={{ p: 4, width: '100%' }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', mb: 3 }}>
|
||||
<LockOutlined sx={{ fontSize: 40, mb: 1, color: 'primary.main' }} />
|
||||
<Typography component="h1" variant="h5">
|
||||
Oltalama Test Paneli
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
|
||||
Güvenlik Farkındalık Yönetimi
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Box component="form" onSubmit={handleSubmit}>
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
label="Kullanıcı Adı"
|
||||
autoFocus
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
disabled={loading}
|
||||
/>
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
label="Şifre"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{ mt: 3, mb: 2 }}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Giriş yapılıyor...' : 'Giriş Yap'}
|
||||
</Button>
|
||||
|
||||
<Box sx={{ mt: 2, p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
<strong>Default Giriş:</strong><br />
|
||||
Kullanıcı Adı: admin<br />
|
||||
Şifre: admin123
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default Login;
|
||||
|
||||
243
frontend/src/pages/Settings.jsx
Normal file
243
frontend/src/pages/Settings.jsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Paper,
|
||||
Typography,
|
||||
TextField,
|
||||
Button,
|
||||
Grid,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
Divider,
|
||||
} from '@mui/material';
|
||||
import { Save, Send } from '@mui/icons-material';
|
||||
import axios from 'axios';
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL;
|
||||
|
||||
function Settings() {
|
||||
const [settings, setSettings] = useState({
|
||||
gmail_user: '',
|
||||
gmail_app_password: '',
|
||||
telegram_bot_token: '',
|
||||
telegram_chat_id: '',
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [testLoading, setTestLoading] = useState({ mail: false, telegram: false });
|
||||
const [alerts, setAlerts] = useState({ mail: null, telegram: null });
|
||||
|
||||
useEffect(() => {
|
||||
loadSettings();
|
||||
}, []);
|
||||
|
||||
const loadSettings = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/api/settings`, {
|
||||
withCredentials: true,
|
||||
});
|
||||
setSettings(response.data.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to load settings:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await axios.put(`${API_URL}/api/settings`, settings, {
|
||||
withCredentials: true,
|
||||
});
|
||||
alert('Ayarlar kaydedildi!');
|
||||
} catch (error) {
|
||||
console.error('Failed to save settings:', error);
|
||||
alert('Ayarlar kaydedilemedi');
|
||||
}
|
||||
};
|
||||
|
||||
const handleTestMail = async () => {
|
||||
setTestLoading({ ...testLoading, mail: true });
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`${API_URL}/api/settings/test-mail`,
|
||||
{},
|
||||
{ withCredentials: true }
|
||||
);
|
||||
setAlerts({ ...alerts, mail: { severity: 'success', message: response.data.message } });
|
||||
} catch (error) {
|
||||
setAlerts({
|
||||
...alerts,
|
||||
mail: { severity: 'error', message: error.response?.data?.error || 'Test başarısız' },
|
||||
});
|
||||
} finally {
|
||||
setTestLoading({ ...testLoading, mail: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleTestTelegram = async () => {
|
||||
setTestLoading({ ...testLoading, telegram: true });
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`${API_URL}/api/settings/test-telegram`,
|
||||
{},
|
||||
{ withCredentials: true }
|
||||
);
|
||||
setAlerts({ ...alerts, telegram: { severity: 'success', message: response.data.message } });
|
||||
} catch (error) {
|
||||
setAlerts({
|
||||
...alerts,
|
||||
telegram: {
|
||||
severity: 'error',
|
||||
message: error.response?.data?.error || 'Test başarısız',
|
||||
},
|
||||
});
|
||||
} finally {
|
||||
setTestLoading({ ...testLoading, telegram: false });
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Sistem Ayarları
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper sx={{ p: 3 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Gmail Ayarları
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
Gmail App Password kullanın (2FA aktif olmalı)
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
margin="normal"
|
||||
label="Gmail Adresi"
|
||||
type="email"
|
||||
value={settings.gmail_user}
|
||||
onChange={(e) =>
|
||||
setSettings({ ...settings, gmail_user: e.target.value })
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
margin="normal"
|
||||
label="App Password"
|
||||
type="password"
|
||||
value={settings.gmail_app_password}
|
||||
onChange={(e) =>
|
||||
setSettings({ ...settings, gmail_app_password: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
{alerts.mail && (
|
||||
<Alert severity={alerts.mail.severity} sx={{ mt: 2 }}>
|
||||
{alerts.mail.message}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Box mt={2} display="flex" gap={2}>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Save />}
|
||||
onClick={handleSave}
|
||||
>
|
||||
Kaydet
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Send />}
|
||||
onClick={handleTestMail}
|
||||
disabled={testLoading.mail}
|
||||
>
|
||||
Test Mail Gönder
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper sx={{ p: 3 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Telegram Ayarları
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
@BotFather'dan bot token alın, @userinfobot'dan chat ID öğrenin
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
margin="normal"
|
||||
label="Bot Token"
|
||||
type="password"
|
||||
value={settings.telegram_bot_token}
|
||||
onChange={(e) =>
|
||||
setSettings({ ...settings, telegram_bot_token: e.target.value })
|
||||
}
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
margin="normal"
|
||||
label="Chat ID"
|
||||
value={settings.telegram_chat_id}
|
||||
onChange={(e) =>
|
||||
setSettings({ ...settings, telegram_chat_id: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
{alerts.telegram && (
|
||||
<Alert severity={alerts.telegram.severity} sx={{ mt: 2 }}>
|
||||
{alerts.telegram.message}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Box mt={2} display="flex" gap={2}>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Save />}
|
||||
onClick={handleSave}
|
||||
>
|
||||
Kaydet
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Send />}
|
||||
onClick={handleTestTelegram}
|
||||
disabled={testLoading.telegram}
|
||||
>
|
||||
Test Bildirimi
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Paper sx={{ p: 3, mt: 3 }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Tracking URL Bilgisi
|
||||
</Typography>
|
||||
<Divider sx={{ my: 2 }} />
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Tracking URL formatı: <strong>http://your-domain.com/t/TOKEN</strong>
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" mt={1}>
|
||||
Bu URL'ler mail şablonlarında otomatik olarak oluşturulur ve gönderilir.
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Settings;
|
||||
|
||||
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;
|
||||
|
||||
26
frontend/src/services/api.js
Normal file
26
frontend/src/services/api.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_URL,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// Response interceptor for error handling
|
||||
api.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
// Redirect to login if unauthorized
|
||||
window.location.href = '/login';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
|
||||
24
frontend/src/services/authService.js
Normal file
24
frontend/src/services/authService.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import api from './api';
|
||||
|
||||
export const authService = {
|
||||
login: async (username, password) => {
|
||||
const response = await api.post('/api/auth/login', { username, password });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
logout: async () => {
|
||||
const response = await api.post('/api/auth/logout');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
checkAuth: async () => {
|
||||
const response = await api.get('/api/auth/check');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getMe: async () => {
|
||||
const response = await api.get('/api/auth/me');
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
||||
39
frontend/src/services/companyService.js
Normal file
39
frontend/src/services/companyService.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import api from './api';
|
||||
|
||||
export const companyService = {
|
||||
getAll: async () => {
|
||||
const response = await api.get('/api/companies');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getById: async (id) => {
|
||||
const response = await api.get(`/api/companies/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
create: async (data) => {
|
||||
const response = await api.post('/api/companies', data);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
update: async (id, data) => {
|
||||
const response = await api.put(`/api/companies/${id}`, data);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
delete: async (id) => {
|
||||
const response = await api.delete(`/api/companies/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getTokens: async (id, params = {}) => {
|
||||
const response = await api.get(`/api/companies/${id}/tokens`, { params });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getStats: async (id) => {
|
||||
const response = await api.get(`/api/companies/${id}/stats`);
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
||||
58
frontend/src/services/statsService.js
Normal file
58
frontend/src/services/statsService.js
Normal file
@@ -0,0 +1,58 @@
|
||||
import api from './api';
|
||||
|
||||
export const statsService = {
|
||||
getDashboard: async () => {
|
||||
const response = await api.get('/api/stats/dashboard');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getRecentClicks: async (limit = 20) => {
|
||||
const response = await api.get('/api/stats/recent-clicks', { params: { limit } });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getByCompany: async () => {
|
||||
const response = await api.get('/api/stats/by-company');
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
||||
export const templateService = {
|
||||
getAll: async () => {
|
||||
const response = await api.get('/api/templates');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getByType: async (type) => {
|
||||
const response = await api.get(`/api/templates/${type}`);
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
||||
export const settingsService = {
|
||||
getAll: async () => {
|
||||
const response = await api.get('/api/settings');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
updateGmail: async (data) => {
|
||||
const response = await api.put('/api/settings/gmail', data);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
updateTelegram: async (data) => {
|
||||
const response = await api.put('/api/settings/telegram', data);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
testGmail: async () => {
|
||||
const response = await api.post('/api/settings/test-gmail');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
testTelegram: async () => {
|
||||
const response = await api.post('/api/settings/test-telegram');
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
||||
11
frontend/src/services/templateService.js
Normal file
11
frontend/src/services/templateService.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import api from './api';
|
||||
|
||||
export const templateService = {
|
||||
getAll: () => api.get('/api/templates'),
|
||||
getById: (id) => api.get(`/api/templates/${id}`),
|
||||
create: (data) => api.post('/api/templates', data),
|
||||
update: (id, data) => api.put(`/api/templates/${id}`, data),
|
||||
delete: (id) => api.delete(`/api/templates/${id}`),
|
||||
preview: (data) => api.post('/api/templates/preview', data),
|
||||
};
|
||||
|
||||
44
frontend/src/services/tokenService.js
Normal file
44
frontend/src/services/tokenService.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import api from './api';
|
||||
|
||||
export const tokenService = {
|
||||
getAll: async (params = {}) => {
|
||||
const response = await api.get('/api/tokens', { params });
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getById: async (id) => {
|
||||
const response = await api.get(`/api/tokens/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
create: async (data) => {
|
||||
const response = await api.post('/api/tokens/create', data);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
createAndSend: async (data) => {
|
||||
const response = await api.post('/api/tokens/create-and-send', data);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
update: async (id, data) => {
|
||||
const response = await api.put(`/api/tokens/${id}`, data);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
delete: async (id) => {
|
||||
const response = await api.delete(`/api/tokens/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
sendMail: async (id) => {
|
||||
const response = await api.post(`/api/tokens/${id}/send`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
getClicks: async (id) => {
|
||||
const response = await api.get(`/api/tokens/${id}/clicks`);
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user