af0510e486
✨ New Features: - 🤖 AI-powered mail template generation with Ollama - 📧 Test mail sending with preview - 🔧 Ollama server and model management - 🎨 Beautiful AI generation dialog in Templates page - ⚙️ Ollama settings panel with connection test Backend: - Add ollama.service.js - Ollama API integration - Add ollama.controller.js - Template generation endpoint - Add ollama.routes.js - /api/ollama/* routes - Support for multiple Ollama models (llama3.2, mistral, gemma) - JSON-formatted AI responses with subject + HTML body - Configurable server URL and model selection Frontend: - Settings: Ollama configuration panel - Server URL input - Model selection - Connection test with model listing - Templates: AI generation dialog - Company name, scenario, employee info inputs - Custom prompt for AI instructions - Auto-save to database - Test mail sending functionality Documentation: - OLLAMA_SETUP.md - Comprehensive setup guide - Installation instructions - Model recommendations - Usage examples - Troubleshooting Tech Stack: - Ollama API integration (REST) - Axios HTTP client - React dialogs with MUI - Self-hosted AI (privacy-friendly) - Zero external API dependencies Example Usage: Company: Garanti Bankası Scenario: Account security warning → AI generates professional phishing test mail in seconds!
Oltalama Frontend
Modern ve responsive phishing test yönetim paneli frontend'i.
✨ Özellikler
- 🎨 Material-UI - Modern UI component library
- ⚡ Vite - Hızlı development server
- 🔐 Session Auth - Context-based authentication
- 📱 Responsive - Mobile-first tasarım
- 🎯 6 Sayfa - Login, Dashboard, Companies, Tokens, Templates, Settings
🚀 Kurulum
npm install
cp .env.example .env
# VITE_API_URL=http://localhost:3000 olarak ayarlayın
npm run dev
URL: http://localhost:5173
Default Login: admin / admin123
📄 Sayfalar
🔑 Login
- Session-based authentication
- Form validation
- Auto redirect on success
📊 Dashboard
- Genel istatistikler (şirket, token, tıklama)
- Başarı oranı kartı
- Şirket performans tablosu
- Son tıklamalar listesi
🏢 Companies
- Grid view ile şirket kartları
- Create/Edit/Delete modal
- Şirket bazlı istatistikler
- Click-through to detail
🔗 Tokens
- Tüm tokenlar tablo görünümü
- Token oluştur + mail gönder
- Durum badge'leri (Tıklandı/Bekliyor)
- Tıklama sayısı tracking
- Detay sayfası (tıklama geçmişi, IP & cihaz)
✉️ Mail Şablonları
- Tüm şablonların listesi (aktif/pasif)
- HTML editörü + Handlebars değişkenleri
- Önizleme (iframe) & tam ekran preview
- Template type kopyalama, aktif/pasif toggle
- Oluştur / Düzenle / Sil işlemleri
⚙️ Settings
- Gmail yapılandırması
- Telegram yapılandırması
- Test butonları (mail & telegram)
- Gerçek zamanlı feedback
🎨 UI Komponenti
Layout
- Sidebar navigation
- Responsive drawer (mobile)
- User menu (logout)
- Material-UI theming
Services
api.js- Axios instance (credentials, base URL)authService.js- Login/logout/checkcompanyService.js- Company CRUDtokenService.js- Token CRUD + sendstatsService.js- Dashboard statstemplateService.js- Mail templates
Context
AuthContext- Global auth state- Auto session check on mount
- Protected routes
🛠️ Teknolojiler
- React 18 - UI library
- Vite - Build tool
- Material-UI v6 - Component library
- React Router v7 - Routing
- Axios - HTTP client
- date-fns - Date formatting
📦 Build
# Development
npm run dev
# Production build
npm run build
# Preview production build
npm run preview
🔐 Environment Variables
VITE_API_URL=http://localhost:3000
Not: Vite sadece VITE_ prefix'li değişkenleri expose eder.
📁 Yapı
src/
├── components/
│ └── Layout/
│ └── Layout.jsx - Main layout with sidebar
├── context/
│ └── AuthContext.jsx - Authentication context
├── pages/
│ ├── Login.jsx - Login page
│ ├── Dashboard.jsx - Stats dashboard
│ ├── Companies.jsx - Company management
│ ├── Tokens.jsx - Token management
│ └── Settings.jsx - System settings
├── services/
│ ├── api.js - Axios instance
│ ├── authService.js - Auth endpoints
│ ├── companyService.js - Company endpoints
│ ├── tokenService.js - Token endpoints
│ ├── statsService.js - Stats endpoints
│ └── templateService.js - Template endpoints
├── App.jsx - Main app with routing
├── main.jsx - App entry point
└── index.css - Global styles
✅ Durum
Tamamlanan:
- ✅ Login & Authentication
- ✅ Protected routes
- ✅ Dashboard with stats
- ✅ Company management (CRUD)
- ✅ Token management (CRUD + send + detay)
- ✅ Mail templates (CRUD + preview)
- ✅ Settings (Gmail + Telegram)
- ✅ Responsive layout
- ✅ Material-UI theming
- ✅ Error handling
- ✅ Loading states
Production Ready! 🎉