Sure! Pl
This commit is contained in:
319
Extension/popup/popup.js
Normal file
319
Extension/popup/popup.js
Normal file
@@ -0,0 +1,319 @@
|
||||
// EShip Extension Popup Logic
|
||||
|
||||
// DOM Elements
|
||||
const loadingEl = document.getElementById('loading');
|
||||
const loginFormEl = document.getElementById('login-form');
|
||||
const toolsMenuEl = document.getElementById('tools-menu');
|
||||
const authForm = document.getElementById('auth-form');
|
||||
const emailInput = document.getElementById('email');
|
||||
const passwordInput = document.getElementById('password');
|
||||
const errorMessage = document.getElementById('error-message');
|
||||
const loginBtn = document.getElementById('login-btn');
|
||||
const logoutBtn = document.getElementById('logout-btn');
|
||||
const userEmailEl = document.getElementById('user-email');
|
||||
const toolsListEl = document.getElementById('tools-list');
|
||||
const openSiteBtn = document.getElementById('open-site-btn');
|
||||
|
||||
// Protected site URL (should match config.js)
|
||||
const PROTECTED_SITE_URL = 'http://localhost:5173';
|
||||
|
||||
// State
|
||||
let currentUser = null;
|
||||
let tools = [];
|
||||
|
||||
// Initialize popup
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
async function init() {
|
||||
showState('loading');
|
||||
|
||||
try {
|
||||
// Check if service worker is available
|
||||
if (!chrome.runtime || !chrome.runtime.id) {
|
||||
throw new Error('Chrome Runtime nicht verfuegbar');
|
||||
}
|
||||
|
||||
// First, test if service worker is alive
|
||||
console.log('Testing service worker...');
|
||||
const pingResponse = await sendMessage({ action: 'PING' });
|
||||
console.log('PING response:', pingResponse);
|
||||
|
||||
if (!pingResponse) {
|
||||
throw new Error('Service Worker antwortet nicht. Bitte Extension in chrome://extensions neu laden und Service Worker Konsole pruefen.');
|
||||
}
|
||||
|
||||
if (!pingResponse.success) {
|
||||
throw new Error('Service Worker Fehler: ' + (pingResponse.error || 'Unbekannter Fehler'));
|
||||
}
|
||||
|
||||
console.log('Service Worker ist aktiv!');
|
||||
|
||||
console.log('Checking auth status...');
|
||||
|
||||
// Check current auth status
|
||||
const response = await sendMessage({ action: 'CHECK_AUTH' });
|
||||
|
||||
if (!response) {
|
||||
throw new Error('Keine Antwort vom Service Worker');
|
||||
}
|
||||
|
||||
console.log('Auth response:', response);
|
||||
|
||||
// If there's an error, show it but still allow login
|
||||
if (response.error && !response.success) {
|
||||
console.error('Service Worker Error:', response.error);
|
||||
showError('Hinweis: ' + response.error + ' - Login sollte trotzdem funktionieren.');
|
||||
}
|
||||
|
||||
if (response.success && response.authenticated) {
|
||||
currentUser = response.user;
|
||||
await loadTools();
|
||||
showLoggedInState();
|
||||
} else {
|
||||
// Not authenticated - show login form
|
||||
showState('login-form');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Init error:', error);
|
||||
showError('Fehler beim Laden: ' + error.message + '. Bitte Extension in chrome://extensions neu laden.');
|
||||
showState('login-form');
|
||||
}
|
||||
}
|
||||
|
||||
// Show a specific state (loading, login-form, tools-menu)
|
||||
function showState(stateId) {
|
||||
loadingEl.classList.add('hidden');
|
||||
loginFormEl.classList.add('hidden');
|
||||
toolsMenuEl.classList.add('hidden');
|
||||
|
||||
document.getElementById(stateId).classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Show logged in state with user info
|
||||
function showLoggedInState() {
|
||||
userEmailEl.textContent = currentUser.email || currentUser.name || 'Benutzer';
|
||||
renderTools();
|
||||
showState('tools-menu');
|
||||
}
|
||||
|
||||
// Send message to service worker
|
||||
function sendMessage(message) {
|
||||
return new Promise((resolve) => {
|
||||
// Add timeout to prevent hanging
|
||||
const timeout = setTimeout(() => {
|
||||
console.error('Message timeout:', message.action);
|
||||
resolve({
|
||||
success: false,
|
||||
error: 'Service Worker antwortet nicht. Bitte Extension in chrome://extensions neu laden und Service Worker Konsole pruefen.'
|
||||
});
|
||||
}, 2000); // Reduced timeout to 2 seconds for faster feedback
|
||||
|
||||
try {
|
||||
if (!chrome.runtime || !chrome.runtime.id) {
|
||||
clearTimeout(timeout);
|
||||
resolve({ success: false, error: 'Chrome Runtime nicht verfuegbar' });
|
||||
return;
|
||||
}
|
||||
|
||||
chrome.runtime.sendMessage(message, (response) => {
|
||||
clearTimeout(timeout);
|
||||
if (chrome.runtime.lastError) {
|
||||
console.error('Chrome runtime error:', chrome.runtime.lastError);
|
||||
resolve({
|
||||
success: false,
|
||||
error: chrome.runtime.lastError.message || 'Service Worker Fehler'
|
||||
});
|
||||
} else {
|
||||
console.log('Response received:', response);
|
||||
resolve(response || { success: false, error: 'Keine Antwort vom Service Worker' });
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
clearTimeout(timeout);
|
||||
console.error('Send message error:', error);
|
||||
resolve({ success: false, error: error.message || 'Fehler beim Senden der Nachricht' });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Login form submission
|
||||
authForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const email = emailInput.value.trim();
|
||||
const password = passwordInput.value;
|
||||
|
||||
if (!email || !password) {
|
||||
showError('Bitte E-Mail und Passwort eingeben');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoginLoading(true);
|
||||
hideError();
|
||||
|
||||
const response = await sendMessage({
|
||||
action: 'LOGIN',
|
||||
email,
|
||||
password
|
||||
});
|
||||
|
||||
setLoginLoading(false);
|
||||
|
||||
if (response.success) {
|
||||
currentUser = response.user;
|
||||
await loadTools();
|
||||
showLoggedInState();
|
||||
|
||||
// Open protected site after successful login
|
||||
openProtectedSite();
|
||||
} else {
|
||||
showError(response.error || 'Anmeldung fehlgeschlagen');
|
||||
}
|
||||
});
|
||||
|
||||
// Logout button
|
||||
logoutBtn.addEventListener('click', async () => {
|
||||
const response = await sendMessage({ action: 'LOGOUT' });
|
||||
|
||||
if (response.success) {
|
||||
currentUser = null;
|
||||
tools = [];
|
||||
emailInput.value = '';
|
||||
passwordInput.value = '';
|
||||
showState('login-form');
|
||||
}
|
||||
});
|
||||
|
||||
// Open site button
|
||||
openSiteBtn.addEventListener('click', () => {
|
||||
openProtectedSite();
|
||||
});
|
||||
|
||||
// Open protected site in new tab
|
||||
function openProtectedSite() {
|
||||
chrome.tabs.create({ url: PROTECTED_SITE_URL });
|
||||
}
|
||||
|
||||
// Load tools settings
|
||||
async function loadTools() {
|
||||
const response = await sendMessage({ action: 'GET_SETTINGS' });
|
||||
if (response.success) {
|
||||
tools = response.tools;
|
||||
}
|
||||
}
|
||||
|
||||
// Render tools list
|
||||
function renderTools() {
|
||||
toolsListEl.innerHTML = '';
|
||||
|
||||
tools.forEach((tool, index) => {
|
||||
const toolEl = document.createElement('div');
|
||||
toolEl.className = 'tool-item';
|
||||
toolEl.innerHTML = `
|
||||
<div class="tool-header">
|
||||
<span class="tool-name">${escapeHtml(tool.name)}</span>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" data-tool-id="${tool.id}" ${tool.enabled ? 'checked' : ''}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="tool-settings ${tool.enabled ? 'visible' : ''}" id="settings-${tool.id}">
|
||||
${renderToolSettings(tool)}
|
||||
</div>
|
||||
`;
|
||||
toolsListEl.appendChild(toolEl);
|
||||
|
||||
// Toggle event listener
|
||||
const toggle = toolEl.querySelector('input[type="checkbox"]');
|
||||
toggle.addEventListener('change', (e) => {
|
||||
handleToolToggle(tool.id, e.target.checked);
|
||||
});
|
||||
|
||||
// Settings change listeners
|
||||
const settingsInputs = toolEl.querySelectorAll('.setting-row input');
|
||||
settingsInputs.forEach(input => {
|
||||
input.addEventListener('change', (e) => {
|
||||
handleSettingChange(tool.id, e.target.dataset.setting, e.target.value);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Render settings inputs for a tool
|
||||
function renderToolSettings(tool) {
|
||||
if (!tool.settings) return '';
|
||||
|
||||
let html = '';
|
||||
for (const [key, value] of Object.entries(tool.settings)) {
|
||||
html += `
|
||||
<div class="setting-row">
|
||||
<label>${escapeHtml(formatSettingName(key))}</label>
|
||||
<input type="text" data-setting="${key}" value="${escapeHtml(value)}">
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
// Format setting key to readable name
|
||||
function formatSettingName(key) {
|
||||
return key
|
||||
.replace(/([A-Z])/g, ' $1')
|
||||
.replace(/^./, str => str.toUpperCase())
|
||||
.replace(/_/g, ' ');
|
||||
}
|
||||
|
||||
// Handle tool toggle
|
||||
async function handleToolToggle(toolId, enabled) {
|
||||
const tool = tools.find(t => t.id === toolId);
|
||||
if (tool) {
|
||||
tool.enabled = enabled;
|
||||
|
||||
// Show/hide settings
|
||||
const settingsEl = document.getElementById(`settings-${toolId}`);
|
||||
if (settingsEl) {
|
||||
settingsEl.classList.toggle('visible', enabled);
|
||||
}
|
||||
|
||||
await saveTools();
|
||||
}
|
||||
}
|
||||
|
||||
// Handle setting value change
|
||||
async function handleSettingChange(toolId, settingKey, value) {
|
||||
const tool = tools.find(t => t.id === toolId);
|
||||
if (tool && tool.settings) {
|
||||
tool.settings[settingKey] = value;
|
||||
await saveTools();
|
||||
}
|
||||
}
|
||||
|
||||
// Save tools to storage
|
||||
async function saveTools() {
|
||||
await sendMessage({ action: 'SAVE_SETTINGS', settings: tools });
|
||||
}
|
||||
|
||||
// Show error message
|
||||
function showError(message) {
|
||||
errorMessage.textContent = message;
|
||||
errorMessage.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Hide error message
|
||||
function hideError() {
|
||||
errorMessage.classList.add('hidden');
|
||||
}
|
||||
|
||||
// Set login button loading state
|
||||
function setLoginLoading(loading) {
|
||||
loginBtn.disabled = loading;
|
||||
loginBtn.querySelector('.btn-text').classList.toggle('hidden', loading);
|
||||
loginBtn.querySelector('.btn-spinner').classList.toggle('hidden', !loading);
|
||||
}
|
||||
|
||||
// Escape HTML to prevent XSS
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
Reference in New Issue
Block a user