d1b5b72c46
Major Update: From simple click counter to comprehensive automation platform ## New Features: ✅ Full user authentication (register/login/logout) ✅ SQLite database with user management ✅ API credentials management system ✅ Workflow templates library (4 ready-to-use templates) ✅ User workflow management ✅ Comprehensive dashboard interface ✅ Detailed n8n integration instructions ✅ Security features (bcrypt, sessions, helmet) ✅ Automated testing suite (14 passing tests) ## Technical Stack: - Backend: Node.js + Express + SQLite - Frontend: Vanilla JS + Modern CSS - Security: bcrypt, express-session, helmet - Database: SQLite with proper schemas and indexes - Testing: Mocha + Chai + Supertest ## Templates Included: 1. 📱 Telegram Bot Notifications 2. 📧 Email to Slack Integration 3. 💾 Google Drive Backup Automation 4. 📊 Lead Scoring Automation ## Access Points: - Legacy app: http://localhost:3000/ - SaaS Platform: http://localhost:3000/dashboard - API endpoints: /api/* ## Demo Credentials: - Email: demo@example.com - Password: demo123 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
304 lines
No EOL
13 KiB
HTML
304 lines
No EOL
13 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>SaaS Automation Platform</title>
|
||
<link rel="stylesheet" href="/dashboard.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!-- Loading Screen -->
|
||
<div id="loadingScreen" class="loading-screen">
|
||
<div class="loading-spinner"></div>
|
||
<p>Загрузка...</p>
|
||
</div>
|
||
|
||
<!-- Login Form -->
|
||
<div id="loginForm" class="auth-container" style="display: none;">
|
||
<div class="auth-card">
|
||
<h1>🚀 SaaS Automation Platform</h1>
|
||
<p>Войдите в ваш аккаунт</p>
|
||
|
||
<form id="login">
|
||
<div class="form-group">
|
||
<label for="loginEmail">Email:</label>
|
||
<input type="email" id="loginEmail" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="loginPassword">Пароль:</label>
|
||
<input type="password" id="loginPassword" required>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Войти</button>
|
||
</form>
|
||
|
||
<p class="auth-toggle">
|
||
Нет аккаунта? <a href="#" id="showRegister">Зарегистрироваться</a>
|
||
</p>
|
||
|
||
<div class="demo-credentials">
|
||
<p><strong>Демо аккаунт:</strong></p>
|
||
<p>Email: demo@example.com</p>
|
||
<p>Пароль: demo123</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Registration Form -->
|
||
<div id="registerForm" class="auth-container" style="display: none;">
|
||
<div class="auth-card">
|
||
<h1>📝 Регистрация</h1>
|
||
<p>Создайте новый аккаунт</p>
|
||
|
||
<form id="register">
|
||
<div class="form-group">
|
||
<label for="registerUsername">Имя пользователя:</label>
|
||
<input type="text" id="registerUsername" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="registerEmail">Email:</label>
|
||
<input type="email" id="registerEmail" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="registerPassword">Пароль:</label>
|
||
<input type="password" id="registerPassword" required minlength="6">
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Зарегистрироваться</button>
|
||
</form>
|
||
|
||
<p class="auth-toggle">
|
||
Уже есть аккаунт? <a href="#" id="showLogin">Войти</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Dashboard -->
|
||
<div id="dashboard" style="display: none;">
|
||
<header class="dashboard-header">
|
||
<div class="header-content">
|
||
<h1>🤖 Automation Platform</h1>
|
||
<div class="header-actions">
|
||
<span id="userInfo"></span>
|
||
<button id="logoutBtn" class="btn btn-secondary">Выйти</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="dashboard-nav">
|
||
<a href="#" class="nav-item active" data-section="overview">📊 Обзор</a>
|
||
<a href="#" class="nav-item" data-section="templates">📋 Шаблоны</a>
|
||
<a href="#" class="nav-item" data-section="workflows">⚡ Мои процессы</a>
|
||
<a href="#" class="nav-item" data-section="credentials">🔑 Настройки API</a>
|
||
<a href="#" class="nav-item" data-section="instructions">📖 Инструкции</a>
|
||
</nav>
|
||
|
||
<main class="dashboard-main">
|
||
<!-- Overview Section -->
|
||
<div id="overviewSection" class="section active">
|
||
<h2>📊 Обзор аккаунта</h2>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="totalWorkflows">0</div>
|
||
<div class="stat-label">Рабочие процессы</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="totalCredentials">0</div>
|
||
<div class="stat-label">API ключи</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" id="totalExecutions">0</div>
|
||
<div class="stat-label">Выполнений</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="welcome-section">
|
||
<h3>🚀 Добро пожаловать в SaaS Automation Platform!</h3>
|
||
<p>Платформа для автоматизации ваших бизнес-процессов с помощью n8n.</p>
|
||
<div class="action-cards">
|
||
<div class="action-card">
|
||
<h4>1. Настройте API ключи</h4>
|
||
<p>Добавьте ваши креденшелы для интеграции с внешними сервисами</p>
|
||
<button class="btn btn-primary" data-action="goto-credentials">Настроить API ключи</button>
|
||
</div>
|
||
<div class="action-card">
|
||
<h4>2. Выберите шаблон</h4>
|
||
<p>Используйте готовые шаблоны автоматизации для быстрого старта</p>
|
||
<button class="btn btn-primary" data-action="goto-templates">Посмотреть шаблоны</button>
|
||
</div>
|
||
<div class="action-card">
|
||
<h4>3. Изучите инструкции</h4>
|
||
<p>Узнайте как настроить n8n и работать с нашими шаблонами</p>
|
||
<button class="btn btn-primary" data-action="goto-instructions">Читать инструкции</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Templates Section -->
|
||
<div id="templatesSection" class="section">
|
||
<h2>📋 Шаблоны автоматизации</h2>
|
||
|
||
<div class="templates-filters">
|
||
<select id="categoryFilter">
|
||
<option value="">Все категории</option>
|
||
<option value="notifications">Уведомления</option>
|
||
<option value="communication">Коммуникации</option>
|
||
<option value="backup">Резервное копирование</option>
|
||
<option value="sales">Продажи</option>
|
||
</select>
|
||
<label>
|
||
<input type="checkbox" id="featuredFilter"> Только рекомендуемые
|
||
</label>
|
||
</div>
|
||
|
||
<div id="templatesGrid" class="templates-grid">
|
||
<!-- Templates will be loaded here -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Workflows Section -->
|
||
<div id="workflowsSection" class="section">
|
||
<h2>⚡ Мои рабочие процессы</h2>
|
||
|
||
<div class="section-header">
|
||
<button id="createWorkflowBtn" class="btn btn-primary">+ Создать процесс</button>
|
||
</div>
|
||
|
||
<div id="workflowsList" class="workflows-list">
|
||
<!-- User workflows will be loaded here -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Credentials Section -->
|
||
<div id="credentialsSection" class="section">
|
||
<h2>🔑 Управление API ключами</h2>
|
||
|
||
<div class="section-header">
|
||
<button id="addCredentialBtn" class="btn btn-primary">+ Добавить ключ</button>
|
||
</div>
|
||
|
||
<div id="credentialsList" class="credentials-list">
|
||
<!-- User credentials will be loaded here -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Instructions Section -->
|
||
<div id="instructionsSection" class="section">
|
||
<h2>📖 Инструкции по настройке</h2>
|
||
|
||
<div class="instructions-content">
|
||
<div class="instruction-card">
|
||
<h3>🔧 Настройка n8n</h3>
|
||
<ol>
|
||
<li><strong>Установка n8n:</strong> <code>npm install n8n -g</code></li>
|
||
<li><strong>Запуск:</strong> <code>n8n start</code></li>
|
||
<li><strong>Открыть интерфейс:</strong> <a href="http://localhost:5678" target="_blank">http://localhost:5678</a></li>
|
||
<li><strong>Создать аккаунт</strong> в n8n и получить API ключ</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="instruction-card">
|
||
<h3>🤖 Получение API ключа n8n</h3>
|
||
<ol>
|
||
<li>Перейдите в n8n интерфейс</li>
|
||
<li>Откройте <strong>Settings → API Keys</strong></li>
|
||
<li>Создайте новый API ключ</li>
|
||
<li>Скопируйте ключ и добавьте его в разделе "API ключи"</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="instruction-card">
|
||
<h3>📱 Настройка Telegram бота</h3>
|
||
<ol>
|
||
<li>Найдите <strong>@BotFather</strong> в Telegram</li>
|
||
<li>Отправьте команду <code>/newbot</code></li>
|
||
<li>Следуйте инструкциям для создания бота</li>
|
||
<li>Получите токен бота и добавьте его в "API ключи"</li>
|
||
<li>Получите ваш Chat ID отправив сообщение <code>/start</code> боту <strong>@userinfobot</strong></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="instruction-card">
|
||
<h3>📧 Настройка SMTP для email</h3>
|
||
<ol>
|
||
<li><strong>Gmail:</strong> Включите 2-факторную аутентификацию</li>
|
||
<li>Создайте <strong>App Password</strong> в настройках аккаунта</li>
|
||
<li>Используйте данные: <code>smtp.gmail.com:587</code></li>
|
||
<li>Добавьте креденшелы в раздел "API ключи"</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="instruction-card">
|
||
<h3>💬 Настройка Slack</h3>
|
||
<ol>
|
||
<li>Перейдите в <a href="https://api.slack.com/apps" target="_blank">Slack API</a></li>
|
||
<li>Создайте новое приложение</li>
|
||
<li>Добавьте OAuth Scopes: <code>chat:write</code>, <code>channels:read</code></li>
|
||
<li>Установите приложение в рабочую область</li>
|
||
<li>Скопируйте Bot User OAuth Token</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="instruction-card">
|
||
<h3>🔄 Импорт шаблонов в n8n</h3>
|
||
<ol>
|
||
<li>Выберите шаблон на вкладке "Шаблоны"</li>
|
||
<li>Скопируйте JSON конфигурацию</li>
|
||
<li>В n8n нажмите <strong>+ → Import from Clipboard</strong></li>
|
||
<li>Вставьте JSON и настройте креденшелы</li>
|
||
<li>Активируйте рабочий процесс</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальные окна -->
|
||
<div id="credentialModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<h3>Добавить API ключ</h3>
|
||
<form id="credentialForm">
|
||
<div class="form-group">
|
||
<label for="serviceName">Сервис:</label>
|
||
<select id="serviceName" required>
|
||
<option value="">Выберите сервис</option>
|
||
<option value="n8n">n8n API Key</option>
|
||
<option value="telegram">Telegram Bot Token</option>
|
||
<option value="openai">OpenAI API Key</option>
|
||
<option value="slack">Slack Bot Token</option>
|
||
<option value="gmail">Gmail SMTP</option>
|
||
<option value="google_drive">Google Drive</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="credentialType">Тип:</label>
|
||
<select id="credentialType" required>
|
||
<option value="api_key">API Key</option>
|
||
<option value="oauth_token">OAuth Token</option>
|
||
<option value="webhook_url">Webhook URL</option>
|
||
<option value="smtp_credentials">SMTP Credentials</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="credentialValue">Значение:</label>
|
||
<textarea id="credentialValue" required placeholder="Введите ваш API ключ или конфигурацию"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="credentialDescription">Описание:</label>
|
||
<input type="text" id="credentialDescription" placeholder="Описание (необязательно)">
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||
<button type="button" class="btn btn-secondary" id="cancelCredential">Отмена</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="/dashboard.js" defer></script>
|
||
</body>
|
||
</html> |