Merging dev into main
This commit is contained in:
Tyler
@@ -0,0 +1,508 @@
|
||||
/**
|
||||
* Bulk Operations Module
|
||||
* Handles bulk file encryption/decryption, drag & drop, and file preview
|
||||
*/
|
||||
|
||||
class BulkOperations {
|
||||
constructor() {
|
||||
this.files = [];
|
||||
this.results = [];
|
||||
this.isProcessing = false;
|
||||
this.setupEventListeners();
|
||||
this.populateAlgorithmDropdown();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Drag & Drop Zone
|
||||
const dropZone = document.getElementById('bulk-drop-zone');
|
||||
const fileInput = document.getElementById('bulk-file-input');
|
||||
const fileSelect = document.getElementById('bulk-file-select');
|
||||
|
||||
console.log('Bulk setup - dropZone:', dropZone, 'fileInput:', fileInput, 'fileSelect:', fileSelect);
|
||||
|
||||
if (dropZone && fileInput) {
|
||||
console.log('Setting up bulk drag & drop events');
|
||||
// Drag & Drop Events
|
||||
dropZone.addEventListener('dragover', this.handleDragOver.bind(this));
|
||||
dropZone.addEventListener('dragleave', this.handleDragLeave.bind(this));
|
||||
dropZone.addEventListener('drop', this.handleDrop.bind(this));
|
||||
dropZone.addEventListener('click', () => {
|
||||
console.log('Bulk drop zone clicked, opening file input');
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
// File Input Events
|
||||
fileInput.addEventListener('change', this.handleFileSelect.bind(this));
|
||||
} else {
|
||||
console.error('Bulk elements not found - dropZone:', dropZone, 'fileInput:', fileInput);
|
||||
}
|
||||
|
||||
if (fileSelect) {
|
||||
console.log('Setting up bulk file select button');
|
||||
fileSelect.addEventListener('click', (e) => {
|
||||
console.log('Bulk file select button clicked');
|
||||
e.stopPropagation();
|
||||
fileInput.click();
|
||||
});
|
||||
} else {
|
||||
console.error('Bulk file select button not found');
|
||||
}
|
||||
|
||||
// Control Buttons
|
||||
const processBtn = document.getElementById('bulk-process-btn');
|
||||
const clearBtn = document.getElementById('bulk-clear-btn');
|
||||
const downloadAllBtn = document.getElementById('bulk-download-all');
|
||||
const resetBtn = document.getElementById('bulk-reset');
|
||||
|
||||
if (processBtn) processBtn.addEventListener('click', this.processFiles.bind(this));
|
||||
if (clearBtn) clearBtn.addEventListener('click', this.clearFiles.bind(this));
|
||||
if (downloadAllBtn) downloadAllBtn.addEventListener('click', this.downloadAllResults.bind(this));
|
||||
if (resetBtn) resetBtn.addEventListener('click', this.reset.bind(this));
|
||||
}
|
||||
|
||||
handleDragOver(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
document.getElementById('bulk-drop-zone').classList.add('drag-over');
|
||||
}
|
||||
|
||||
handleDragLeave(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
document.getElementById('bulk-drop-zone').classList.remove('drag-over');
|
||||
}
|
||||
|
||||
handleDrop(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
document.getElementById('bulk-drop-zone').classList.remove('drag-over');
|
||||
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
this.addFiles(files);
|
||||
}
|
||||
|
||||
handleFileSelect(e) {
|
||||
const files = Array.from(e.target.files);
|
||||
this.addFiles(files);
|
||||
}
|
||||
|
||||
addFiles(newFiles) {
|
||||
// Filter out duplicates
|
||||
newFiles = newFiles.filter(newFile =>
|
||||
!this.files.some(existingFile =>
|
||||
existingFile.name === newFile.name && existingFile.size === newFile.size
|
||||
)
|
||||
);
|
||||
|
||||
this.files.push(...newFiles);
|
||||
this.updateFileList();
|
||||
this.showFilePreview();
|
||||
}
|
||||
|
||||
updateFileList() {
|
||||
const fileList = document.getElementById('bulk-file-list');
|
||||
if (!fileList) return;
|
||||
|
||||
fileList.innerHTML = '';
|
||||
|
||||
this.files.forEach((file, index) => {
|
||||
const fileItem = document.createElement('div');
|
||||
fileItem.className = 'file-item';
|
||||
fileItem.innerHTML = `
|
||||
<div class="file-info">
|
||||
<div class="file-name">${file.name}</div>
|
||||
<div class="file-size">${this.formatFileSize(file.size)}</div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<button type="button" onclick="bulkOps.previewFile(${index})" style="padding: 5px 10px; font-size: 0.8em;">Preview</button>
|
||||
<button type="button" onclick="bulkOps.removeFile(${index})" class="danger-button" style="padding: 5px 10px; font-size: 0.8em;">Remove</button>
|
||||
</div>
|
||||
`;
|
||||
fileList.appendChild(fileItem);
|
||||
});
|
||||
}
|
||||
|
||||
showFilePreview() {
|
||||
const previewSection = document.getElementById('bulk-file-preview');
|
||||
if (previewSection) {
|
||||
previewSection.style.display = this.files.length > 0 ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
async previewFile(index) {
|
||||
const file = this.files[index];
|
||||
if (!file) return;
|
||||
|
||||
const previewContainer = document.createElement('div');
|
||||
previewContainer.className = 'file-preview-container';
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'file-preview-header';
|
||||
header.textContent = `Preview: ${file.name}`;
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'file-preview-content';
|
||||
|
||||
// Handle different file types
|
||||
if (file.type.startsWith('text/') || this.isTextFile(file.name)) {
|
||||
try {
|
||||
const text = await this.readFileAsText(file);
|
||||
content.textContent = text.length > 2000 ? text.substring(0, 2000) + '...' : text;
|
||||
} catch (error) {
|
||||
content.textContent = 'Error reading file: ' + error.message;
|
||||
}
|
||||
} else if (file.type.startsWith('image/')) {
|
||||
const img = document.createElement('img');
|
||||
img.className = 'image-preview';
|
||||
img.src = URL.createObjectURL(file);
|
||||
img.onload = () => URL.revokeObjectURL(img.src);
|
||||
content.appendChild(img);
|
||||
} else {
|
||||
content.innerHTML = `
|
||||
<div style="color: #888;">
|
||||
File Type: ${file.type || 'Unknown'}<br>
|
||||
Size: ${this.formatFileSize(file.size)}<br>
|
||||
Preview not available for this file type.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
previewContainer.appendChild(header);
|
||||
previewContainer.appendChild(content);
|
||||
|
||||
// Remove existing preview
|
||||
const existingPreview = document.querySelector('.file-preview-container');
|
||||
if (existingPreview) {
|
||||
existingPreview.remove();
|
||||
}
|
||||
|
||||
// Add new preview after the file list
|
||||
const fileList = document.getElementById('bulk-file-list');
|
||||
if (fileList) {
|
||||
fileList.parentNode.insertBefore(previewContainer, fileList.nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
isTextFile(filename) {
|
||||
const textExtensions = ['.txt', '.md', '.js', '.html', '.css', '.json', '.xml', '.csv', '.log', '.py', '.java', '.c', '.cpp', '.h'];
|
||||
return textExtensions.some(ext => filename.toLowerCase().endsWith(ext));
|
||||
}
|
||||
|
||||
readFileAsText(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => resolve(e.target.result);
|
||||
reader.onerror = e => reject(new Error('Failed to read file'));
|
||||
reader.readAsText(file);
|
||||
});
|
||||
}
|
||||
|
||||
removeFile(index) {
|
||||
this.files.splice(index, 1);
|
||||
this.updateFileList();
|
||||
this.showFilePreview();
|
||||
|
||||
// Remove preview if it exists
|
||||
const existingPreview = document.querySelector('.file-preview-container');
|
||||
if (existingPreview) {
|
||||
existingPreview.remove();
|
||||
}
|
||||
}
|
||||
|
||||
clearFiles() {
|
||||
this.files = [];
|
||||
this.updateFileList();
|
||||
this.showFilePreview();
|
||||
|
||||
// Remove preview if it exists
|
||||
const existingPreview = document.querySelector('.file-preview-container');
|
||||
if (existingPreview) {
|
||||
existingPreview.remove();
|
||||
}
|
||||
|
||||
// Clear file input
|
||||
const fileInput = document.getElementById('bulk-file-input');
|
||||
if (fileInput) fileInput.value = '';
|
||||
}
|
||||
|
||||
async processFiles() {
|
||||
if (this.files.length === 0) {
|
||||
alert('Please select files to process');
|
||||
return;
|
||||
}
|
||||
|
||||
const password = document.getElementById('bulk-password')?.value;
|
||||
if (!password) {
|
||||
alert('Please enter a password');
|
||||
return;
|
||||
}
|
||||
|
||||
const algorithm = document.getElementById('bulk-algorithm')?.value;
|
||||
if (!algorithm) {
|
||||
alert('Please select an algorithm');
|
||||
return;
|
||||
}
|
||||
|
||||
const isDecrypt = document.getElementById('bulk-operation-toggle')?.checked;
|
||||
|
||||
this.isProcessing = true;
|
||||
this.results = [];
|
||||
|
||||
// Show progress section
|
||||
const progressSection = document.getElementById('bulk-progress-section');
|
||||
if (progressSection) progressSection.style.display = 'block';
|
||||
|
||||
// Initialize progress
|
||||
this.updateOverallProgress(0, this.files.length);
|
||||
this.initializeFileProgress();
|
||||
|
||||
// Process files sequentially to avoid overwhelming the server
|
||||
for (let i = 0; i < this.files.length; i++) {
|
||||
const file = this.files[i];
|
||||
this.updateFileProgress(i, 'processing');
|
||||
|
||||
try {
|
||||
const result = await this.processFile(file, password, algorithm, isDecrypt);
|
||||
this.results.push({ file, result, success: true });
|
||||
this.updateFileProgress(i, 'completed');
|
||||
} catch (error) {
|
||||
this.results.push({ file, error: error.message, success: false });
|
||||
this.updateFileProgress(i, 'error');
|
||||
}
|
||||
|
||||
this.updateOverallProgress(i + 1, this.files.length);
|
||||
}
|
||||
|
||||
this.isProcessing = false;
|
||||
this.showResults();
|
||||
}
|
||||
|
||||
async processFile(file, password, algorithm, isDecrypt) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('enc_password', password);
|
||||
formData.append('algorithm', algorithm);
|
||||
|
||||
const endpoint = isDecrypt ? '/api/decrypt' : '/api/encrypt';
|
||||
|
||||
const response = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || 'Processing failed');
|
||||
}
|
||||
|
||||
// Return the blob for download
|
||||
return await response.blob();
|
||||
}
|
||||
|
||||
updateOverallProgress(completed, total) {
|
||||
const progressBar = document.getElementById('bulk-overall-bar');
|
||||
const progressText = document.getElementById('bulk-overall-text');
|
||||
|
||||
if (progressBar) {
|
||||
const percentage = total > 0 ? (completed / total) * 100 : 0;
|
||||
progressBar.style.width = `${percentage}%`;
|
||||
}
|
||||
|
||||
if (progressText) {
|
||||
progressText.textContent = `${completed} / ${total} files processed`;
|
||||
}
|
||||
}
|
||||
|
||||
initializeFileProgress() {
|
||||
const progressList = document.getElementById('bulk-file-progress-list');
|
||||
if (!progressList) return;
|
||||
|
||||
progressList.innerHTML = '';
|
||||
|
||||
this.files.forEach((file, index) => {
|
||||
const progressItem = document.createElement('div');
|
||||
progressItem.className = 'file-progress-item';
|
||||
progressItem.innerHTML = `
|
||||
<div class="file-progress-name">${file.name}</div>
|
||||
<div class="file-progress-status" id="progress-status-${index}">Waiting</div>
|
||||
`;
|
||||
progressList.appendChild(progressItem);
|
||||
});
|
||||
}
|
||||
|
||||
updateFileProgress(index, status) {
|
||||
const statusElement = document.getElementById(`progress-status-${index}`);
|
||||
if (!statusElement) return;
|
||||
|
||||
statusElement.className = `file-progress-status status-${status}`;
|
||||
|
||||
switch (status) {
|
||||
case 'processing':
|
||||
statusElement.textContent = 'Processing...';
|
||||
break;
|
||||
case 'completed':
|
||||
statusElement.textContent = 'Completed';
|
||||
break;
|
||||
case 'error':
|
||||
statusElement.textContent = 'Error';
|
||||
break;
|
||||
default:
|
||||
statusElement.textContent = 'Waiting';
|
||||
}
|
||||
}
|
||||
|
||||
showResults() {
|
||||
const resultsSection = document.getElementById('bulk-results-section');
|
||||
if (!resultsSection) return;
|
||||
|
||||
resultsSection.style.display = 'block';
|
||||
|
||||
const resultsList = document.getElementById('bulk-results-list');
|
||||
if (!resultsList) return;
|
||||
|
||||
resultsList.innerHTML = '';
|
||||
|
||||
this.results.forEach((result, index) => {
|
||||
const resultItem = document.createElement('div');
|
||||
resultItem.className = 'result-item';
|
||||
|
||||
const successCount = this.results.filter(r => r.success).length;
|
||||
const totalCount = this.results.length;
|
||||
|
||||
if (result.success) {
|
||||
resultItem.innerHTML = `
|
||||
<div class="result-info">
|
||||
<div class="result-name">✅ ${result.file.name}</div>
|
||||
<div class="result-details">Successfully processed</div>
|
||||
</div>
|
||||
<div class="result-actions">
|
||||
<button type="button" onclick="bulkOps.downloadResult(${index})" style="padding: 5px 10px; font-size: 0.8em;">Download</button>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
resultItem.innerHTML = `
|
||||
<div class="result-info">
|
||||
<div class="result-name">❌ ${result.file.name}</div>
|
||||
<div class="result-details">${result.error}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
resultsList.appendChild(resultItem);
|
||||
});
|
||||
|
||||
// Add summary
|
||||
const summary = document.createElement('div');
|
||||
summary.style.cssText = 'padding: 15px; border-bottom: 1px solid #333; background-color: #1a1a1a; font-weight: bold;';
|
||||
summary.innerHTML = `
|
||||
<div style="color: #00ff99;">Processing Complete</div>
|
||||
<div style="font-size: 0.9em; color: #ccc; margin-top: 5px;">
|
||||
${successCount} successful, ${totalCount - successCount} failed out of ${totalCount} files
|
||||
</div>
|
||||
`;
|
||||
resultsList.insertBefore(summary, resultsList.firstChild);
|
||||
}
|
||||
|
||||
downloadResult(index) {
|
||||
const result = this.results[index];
|
||||
if (!result.success) return;
|
||||
|
||||
const isDecrypt = document.getElementById('bulk-operation-toggle')?.checked;
|
||||
const algorithm = document.getElementById('bulk-algorithm')?.value;
|
||||
|
||||
let filename;
|
||||
if (isDecrypt) {
|
||||
// For decryption, try to restore original filename
|
||||
filename = result.file.name.replace(/\.(aes_cbc|aes_gcm|xchacha|rsa_hybrid)\.encrypted$/, '');
|
||||
} else {
|
||||
// For encryption, add algorithm extension
|
||||
filename = `${result.file.name}.${algorithm}.encrypted`;
|
||||
}
|
||||
|
||||
this.downloadBlob(result.result, filename);
|
||||
}
|
||||
|
||||
downloadAllResults() {
|
||||
const successfulResults = this.results.filter(r => r.success);
|
||||
|
||||
if (successfulResults.length === 0) {
|
||||
alert('No successful results to download');
|
||||
return;
|
||||
}
|
||||
|
||||
successfulResults.forEach((result, index) => {
|
||||
setTimeout(() => {
|
||||
this.downloadResult(this.results.indexOf(result));
|
||||
}, index * 500); // Stagger downloads
|
||||
});
|
||||
}
|
||||
|
||||
downloadBlob(blob, filename) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.clearFiles();
|
||||
this.results = [];
|
||||
this.isProcessing = false;
|
||||
|
||||
// Hide sections
|
||||
const sections = ['bulk-progress-section', 'bulk-results-section'];
|
||||
sections.forEach(id => {
|
||||
const section = document.getElementById(id);
|
||||
if (section) section.style.display = 'none';
|
||||
});
|
||||
|
||||
// Clear password
|
||||
const passwordField = document.getElementById('bulk-password');
|
||||
if (passwordField) passwordField.value = '';
|
||||
}
|
||||
|
||||
formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
async populateAlgorithmDropdown() {
|
||||
try {
|
||||
const response = await fetch('/api/algorithms');
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.algorithms) {
|
||||
const dropdown = document.getElementById('bulk-algorithm');
|
||||
if (dropdown) {
|
||||
dropdown.innerHTML = '';
|
||||
|
||||
for (const [key, algo] of Object.entries(data.algorithms)) {
|
||||
if (algo.supports_file) {
|
||||
const option = document.createElement('option');
|
||||
option.value = key;
|
||||
option.textContent = algo.name;
|
||||
dropdown.appendChild(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load algorithms for bulk operations:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize bulk operations when DOM is loaded
|
||||
let bulkOps;
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
bulkOps = new BulkOperations();
|
||||
// Make bulkOps available globally for onclick handlers
|
||||
window.bulkOps = bulkOps;
|
||||
});
|
||||
@@ -0,0 +1,333 @@
|
||||
/**
|
||||
* Crypto Settings Module
|
||||
* Handles the encryption settings modal and mode switching
|
||||
*/
|
||||
|
||||
class CryptoSettings {
|
||||
constructor() {
|
||||
this.currentMode = 'single';
|
||||
this.settings = {
|
||||
processingMode: 'single',
|
||||
enableFilePreview: true,
|
||||
autoDownloadResults: true,
|
||||
sequentialProcessing: true,
|
||||
showDetailedProgress: true,
|
||||
stopOnError: false,
|
||||
maxFileSizeMB: 100
|
||||
};
|
||||
this.setupEventListeners();
|
||||
this.loadSettings();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Modal controls
|
||||
const settingsBtn = document.getElementById("crypto-settings-btn");
|
||||
const modal = document.getElementById("crypto-settings-modal");
|
||||
const closeBtn = document.getElementById("close-crypto-settings");
|
||||
const applyBtn = document.getElementById("apply-crypto-settings");
|
||||
const resetBtn = document.getElementById("reset-crypto-settings");
|
||||
|
||||
if (settingsBtn && modal) {
|
||||
settingsBtn.addEventListener("click", () => {
|
||||
modal.style.display = "flex";
|
||||
this.updateModalFromSettings();
|
||||
});
|
||||
}
|
||||
|
||||
if (closeBtn && modal) {
|
||||
closeBtn.addEventListener("click", () => {
|
||||
modal.style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
if (modal) {
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (applyBtn && modal) {
|
||||
applyBtn.addEventListener("click", () => {
|
||||
this.applySettings();
|
||||
modal.style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
if (resetBtn) {
|
||||
resetBtn.addEventListener("click", () => {
|
||||
this.resetToDefaults();
|
||||
});
|
||||
}
|
||||
|
||||
// Processing mode radio buttons
|
||||
const singleModeRadio = document.getElementById("single-file-mode-radio");
|
||||
const bulkModeRadio = document.getElementById("bulk-file-mode-radio");
|
||||
|
||||
if (singleModeRadio) {
|
||||
singleModeRadio.addEventListener("change", () => {
|
||||
if (singleModeRadio.checked) {
|
||||
this.toggleBulkOptions(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (bulkModeRadio) {
|
||||
bulkModeRadio.addEventListener("change", () => {
|
||||
if (bulkModeRadio.checked) {
|
||||
this.toggleBulkOptions(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// File size input validation
|
||||
const fileSizeInput = document.getElementById("max-file-size-input");
|
||||
if (fileSizeInput) {
|
||||
fileSizeInput.addEventListener("input", () => {
|
||||
let value = parseInt(fileSizeInput.value);
|
||||
if (value < 1) {
|
||||
fileSizeInput.value = 1;
|
||||
} else if (value > 1000) {
|
||||
fileSizeInput.value = 1000;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
toggleBulkOptions(show) {
|
||||
const bulkOptions = document.getElementById("bulk-options");
|
||||
if (bulkOptions) {
|
||||
bulkOptions.style.display = show ? "block" : "none";
|
||||
}
|
||||
}
|
||||
|
||||
updateModalFromSettings() {
|
||||
// Set radio buttons
|
||||
const singleModeRadio = document.getElementById("single-file-mode-radio");
|
||||
const bulkModeRadio = document.getElementById("bulk-file-mode-radio");
|
||||
|
||||
if (this.settings.processingMode === 'single') {
|
||||
if (singleModeRadio) singleModeRadio.checked = true;
|
||||
this.toggleBulkOptions(false);
|
||||
} else {
|
||||
if (bulkModeRadio) bulkModeRadio.checked = true;
|
||||
this.toggleBulkOptions(true);
|
||||
}
|
||||
|
||||
// Set checkboxes
|
||||
const checkboxes = [
|
||||
{ id: "enable-file-preview", setting: "enableFilePreview" },
|
||||
{ id: "auto-download-results", setting: "autoDownloadResults" },
|
||||
{ id: "sequential-processing", setting: "sequentialProcessing" },
|
||||
{ id: "show-detailed-progress", setting: "showDetailedProgress" },
|
||||
{ id: "stop-on-error", setting: "stopOnError" }
|
||||
];
|
||||
|
||||
checkboxes.forEach(checkbox => {
|
||||
const element = document.getElementById(checkbox.id);
|
||||
if (element) {
|
||||
element.checked = this.settings[checkbox.setting];
|
||||
}
|
||||
});
|
||||
|
||||
// Set file size
|
||||
const fileSizeInput = document.getElementById("max-file-size-input");
|
||||
if (fileSizeInput) {
|
||||
fileSizeInput.value = this.settings.maxFileSizeMB;
|
||||
}
|
||||
}
|
||||
|
||||
applySettings() {
|
||||
// Get processing mode
|
||||
const singleModeRadio = document.getElementById("single-file-mode-radio");
|
||||
const bulkModeRadio = document.getElementById("bulk-file-mode-radio");
|
||||
|
||||
if (singleModeRadio && singleModeRadio.checked) {
|
||||
this.settings.processingMode = 'single';
|
||||
} else if (bulkModeRadio && bulkModeRadio.checked) {
|
||||
this.settings.processingMode = 'bulk';
|
||||
}
|
||||
|
||||
// Get checkbox values
|
||||
const checkboxes = [
|
||||
{ id: "enable-file-preview", setting: "enableFilePreview" },
|
||||
{ id: "auto-download-results", setting: "autoDownloadResults" },
|
||||
{ id: "sequential-processing", setting: "sequentialProcessing" },
|
||||
{ id: "show-detailed-progress", setting: "showDetailedProgress" },
|
||||
{ id: "stop-on-error", setting: "stopOnError" }
|
||||
];
|
||||
|
||||
checkboxes.forEach(checkbox => {
|
||||
const element = document.getElementById(checkbox.id);
|
||||
if (element) {
|
||||
this.settings[checkbox.setting] = element.checked;
|
||||
}
|
||||
});
|
||||
|
||||
// Get file size
|
||||
const fileSizeInput = document.getElementById("max-file-size-input");
|
||||
if (fileSizeInput) {
|
||||
this.settings.maxFileSizeMB = parseInt(fileSizeInput.value) || 100;
|
||||
}
|
||||
|
||||
// Apply the mode change
|
||||
this.switchMode(this.settings.processingMode);
|
||||
|
||||
// Save settings
|
||||
this.saveSettings();
|
||||
|
||||
// Show feedback
|
||||
this.showFeedback("Settings applied successfully!");
|
||||
}
|
||||
|
||||
switchMode(mode) {
|
||||
this.currentMode = mode;
|
||||
|
||||
const singleFileMode = document.getElementById("single-file-mode");
|
||||
const bulkFileMode = document.getElementById("bulk-file-mode");
|
||||
|
||||
if (mode === 'single') {
|
||||
if (singleFileMode) singleFileMode.style.display = "block";
|
||||
if (bulkFileMode) bulkFileMode.style.display = "none";
|
||||
} else {
|
||||
if (singleFileMode) singleFileMode.style.display = "none";
|
||||
if (bulkFileMode) bulkFileMode.style.display = "block";
|
||||
}
|
||||
|
||||
// Update the form submit handler
|
||||
this.updateFormHandler();
|
||||
}
|
||||
|
||||
updateFormHandler() {
|
||||
const cryptoForm = document.getElementById("crypto-form");
|
||||
if (!cryptoForm) return;
|
||||
|
||||
// Remove existing event listeners by cloning the form
|
||||
const newForm = cryptoForm.cloneNode(true);
|
||||
cryptoForm.parentNode.replaceChild(newForm, cryptoForm);
|
||||
|
||||
// Add the appropriate event listener
|
||||
if (this.currentMode === 'single') {
|
||||
newForm.addEventListener("submit", this.handleSingleFileSubmit.bind(this));
|
||||
} else {
|
||||
newForm.addEventListener("submit", this.handleBulkFileSubmit.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
async handleSingleFileSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const algorithm = document.getElementById("algorithm")?.value;
|
||||
const password = document.getElementById("password")?.value;
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const isDecrypt = document.getElementById("operation-toggle").checked;
|
||||
|
||||
if (!algorithm || !fileInput) return;
|
||||
|
||||
// Use existing single file handling logic
|
||||
if (window.handleSubmit) {
|
||||
window.handleSubmit(event);
|
||||
}
|
||||
}
|
||||
|
||||
async handleBulkFileSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
// Use bulk operations functionality
|
||||
if (window.bulkOps && window.bulkOps.processFiles) {
|
||||
await window.bulkOps.processFiles();
|
||||
}
|
||||
}
|
||||
|
||||
resetToDefaults() {
|
||||
this.settings = {
|
||||
processingMode: 'single',
|
||||
enableFilePreview: true,
|
||||
autoDownloadResults: true,
|
||||
sequentialProcessing: true,
|
||||
showDetailedProgress: true,
|
||||
stopOnError: false,
|
||||
maxFileSizeMB: 100
|
||||
};
|
||||
|
||||
this.updateModalFromSettings();
|
||||
this.showFeedback("Settings reset to defaults!");
|
||||
}
|
||||
|
||||
loadSettings() {
|
||||
try {
|
||||
const saved = localStorage.getItem('paccrypt-crypto-settings');
|
||||
if (saved) {
|
||||
this.settings = { ...this.settings, ...JSON.parse(saved) };
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to load crypto settings:', error);
|
||||
}
|
||||
|
||||
// Apply the loaded settings
|
||||
this.switchMode(this.settings.processingMode);
|
||||
}
|
||||
|
||||
saveSettings() {
|
||||
try {
|
||||
localStorage.setItem('paccrypt-crypto-settings', JSON.stringify(this.settings));
|
||||
} catch (error) {
|
||||
console.warn('Failed to save crypto settings:', error);
|
||||
}
|
||||
}
|
||||
|
||||
showFeedback(message) {
|
||||
// Use the existing feedback system or create a temporary one
|
||||
const feedbackDiv = document.createElement('div');
|
||||
feedbackDiv.className = 'copy-feedback';
|
||||
feedbackDiv.textContent = message;
|
||||
feedbackDiv.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background-color: #00ff99;
|
||||
color: #000;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
z-index: 10000;
|
||||
display: block;
|
||||
`;
|
||||
|
||||
document.body.appendChild(feedbackDiv);
|
||||
|
||||
setTimeout(() => {
|
||||
feedbackDiv.style.opacity = '0';
|
||||
feedbackDiv.style.transition = 'opacity 0.3s ease';
|
||||
setTimeout(() => {
|
||||
if (feedbackDiv.parentNode) {
|
||||
feedbackDiv.parentNode.removeChild(feedbackDiv);
|
||||
}
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// Public methods for external access
|
||||
getCurrentMode() {
|
||||
return this.currentMode;
|
||||
}
|
||||
|
||||
getSettings() {
|
||||
return { ...this.settings };
|
||||
}
|
||||
|
||||
isBulkMode() {
|
||||
return this.currentMode === 'bulk';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize crypto settings when DOM is loaded
|
||||
let cryptoSettings;
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
cryptoSettings = new CryptoSettings();
|
||||
});
|
||||
|
||||
// Make cryptoSettings available globally
|
||||
window.cryptoSettings = cryptoSettings;
|
||||
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* File operations using the new Python backend APIs
|
||||
*/
|
||||
|
||||
/**
|
||||
* Encrypts a full file using the backend API and downloads the encrypted version.
|
||||
*/
|
||||
export async function encryptFile(fileInput, password) {
|
||||
const file = fileInput.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const algorithm = document.getElementById("algorithm")?.value || "aes_cbc";
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('enc_password', password);
|
||||
formData.append('algorithm', algorithm);
|
||||
|
||||
const response = await fetch('/api/encrypt', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
// Download the encrypted file
|
||||
const blob = await response.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = `${file.name}.${algorithm}.encrypted`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
alert("Error encrypting file: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Decrypts a file using the backend API and downloads the decrypted version.
|
||||
*/
|
||||
export async function decryptFile(fileInput, password) {
|
||||
const file = fileInput.files[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('enc_password', password);
|
||||
|
||||
const response = await fetch('/api/decrypt', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
// Download the decrypted file
|
||||
const blob = await response.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
|
||||
// Clean up filename - remove algorithm-specific extensions
|
||||
let filename = file.name;
|
||||
const algorithms = ["aes_cbc", "aes_gcm", "xchacha", "rsa_hybrid"];
|
||||
for (const algo of algorithms) {
|
||||
filename = filename.replace(`.${algo}.encrypted`, "");
|
||||
}
|
||||
filename = filename.replace(".encrypted", "");
|
||||
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (error) {
|
||||
alert("Error decrypting file: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Main application entry point.
|
||||
* Initializes UI and game components when the DOM is loaded.
|
||||
*/
|
||||
|
||||
import { setupUI } from './ui.js';
|
||||
import { setupGame } from './pacman.js';
|
||||
|
||||
// Initialize application when DOM is fully loaded
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
setupUI();
|
||||
setupGame();
|
||||
});
|
||||
@@ -0,0 +1,376 @@
|
||||
/**
|
||||
* Pacman game module.
|
||||
* Handles game logic, rendering, and user interaction.
|
||||
*/
|
||||
|
||||
// ===== Game Constants =====
|
||||
const PACMAN_SPEED = 40;
|
||||
const ENEMY_SPEED = 20;
|
||||
const CELL_SIZE = 40;
|
||||
const DOT_SIZE = 5;
|
||||
|
||||
// ===== Game State =====
|
||||
let canvas, ctx, pacman, enemy, walls, dots, score;
|
||||
let cols, rows, randSeed, gameInterval;
|
||||
|
||||
// ===== Public Interface =====
|
||||
export function setupGame() {
|
||||
console.log('[PacMan] Game module loaded.');
|
||||
window.startPacman = startPacman;
|
||||
window.exitGame = exitGame;
|
||||
}
|
||||
|
||||
export function startPacman() {
|
||||
// Scroll to the Pacman section
|
||||
const pacmanSection = document.getElementById("pacman-section");
|
||||
if (pacmanSection) {
|
||||
pacmanSection.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// Initialize game state
|
||||
initializeGame();
|
||||
setupGameLoop();
|
||||
}
|
||||
|
||||
export function stopPacman() {
|
||||
clearInterval(gameInterval);
|
||||
if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Restore scrolling
|
||||
document.body.style.overflow = '';
|
||||
document.removeEventListener('wheel', preventScroll);
|
||||
document.removeEventListener('touchmove', preventScroll);
|
||||
}
|
||||
|
||||
export function resetGame() {
|
||||
stopPacman();
|
||||
startPacman();
|
||||
}
|
||||
|
||||
export function exitGame() {
|
||||
stopPacman();
|
||||
document.getElementById("input-text").value = "";
|
||||
document.getElementById("pacman-section").style.display = "none";
|
||||
document.getElementById("encoding-section").style.display = "block";
|
||||
}
|
||||
|
||||
// ===== Game Initialization =====
|
||||
function initializeGame() {
|
||||
canvas = document.getElementById("pacmanCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
cols = Math.floor(canvas.width / CELL_SIZE);
|
||||
rows = Math.floor(canvas.height / CELL_SIZE);
|
||||
walls = [];
|
||||
dots = [];
|
||||
score = 0;
|
||||
|
||||
clearInterval(gameInterval);
|
||||
|
||||
// Get seed from generated password or use default
|
||||
const passwordField = document.getElementById("generated-password");
|
||||
const seedSource = passwordField?.value || "pacman";
|
||||
randSeed = [...seedSource].reduce((s, c) => s + c.charCodeAt(0), 0);
|
||||
|
||||
generateWalls();
|
||||
generateDots();
|
||||
|
||||
pacman = spawn();
|
||||
do { enemy = spawn(); } while (enemy.x === pacman.x && enemy.y === pacman.y);
|
||||
|
||||
pacman.dx = pacman.dy = 0;
|
||||
document.addEventListener("keydown", movePacman);
|
||||
|
||||
// Prevent scrolling
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.addEventListener('wheel', preventScroll, { passive: false });
|
||||
document.addEventListener('touchmove', preventScroll, { passive: false });
|
||||
|
||||
// Add touch controls
|
||||
let touchStartX = 0;
|
||||
let touchStartY = 0;
|
||||
|
||||
canvas.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault();
|
||||
touchStartX = e.touches[0].clientX;
|
||||
touchStartY = e.touches[0].clientY;
|
||||
}, { passive: false });
|
||||
|
||||
canvas.addEventListener('touchmove', (e) => {
|
||||
e.preventDefault();
|
||||
}, { passive: false });
|
||||
|
||||
canvas.addEventListener('touchend', (e) => {
|
||||
e.preventDefault();
|
||||
const touchEndX = e.changedTouches[0].clientX;
|
||||
const touchEndY = e.changedTouches[0].clientY;
|
||||
|
||||
const dx = touchEndX - touchStartX;
|
||||
const dy = touchEndY - touchStartY;
|
||||
|
||||
// Determine swipe direction based on the larger movement
|
||||
if (Math.abs(dx) > Math.abs(dy)) {
|
||||
// Horizontal swipe
|
||||
if (dx > 0) {
|
||||
pacman.dx = PACMAN_SPEED;
|
||||
pacman.dy = 0;
|
||||
} else {
|
||||
pacman.dx = -PACMAN_SPEED;
|
||||
pacman.dy = 0;
|
||||
}
|
||||
} else {
|
||||
// Vertical swipe
|
||||
if (dy > 0) {
|
||||
pacman.dx = 0;
|
||||
pacman.dy = PACMAN_SPEED;
|
||||
} else {
|
||||
pacman.dx = 0;
|
||||
pacman.dy = -PACMAN_SPEED;
|
||||
}
|
||||
}
|
||||
}, { passive: false });
|
||||
}
|
||||
|
||||
function setupGameLoop() {
|
||||
gameInterval = setInterval(gameLoop, 150);
|
||||
}
|
||||
|
||||
// ===== Game Setup Helpers =====
|
||||
function spawn() {
|
||||
const options = [];
|
||||
for (let c = 1; c < cols - 1; c++) {
|
||||
for (let r = 1; r < rows - 1; r++) {
|
||||
if (!walls.some(w => w.c === c && w.r === r)) {
|
||||
const neighbors = [
|
||||
{ c: c + 1, r }, { c: c - 1, r },
|
||||
{ c, r: r + 1 }, { c, r: r - 1 }
|
||||
];
|
||||
if (neighbors.some(n => !walls.some(w => w.c === n.c && w.r === n.r))) {
|
||||
options.push({ c, r });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const s = options[Math.floor(rand() * options.length)];
|
||||
return {
|
||||
x: s.c * CELL_SIZE + CELL_SIZE / 2,
|
||||
y: s.r * CELL_SIZE + CELL_SIZE / 2,
|
||||
size: CELL_SIZE / 2 - 5,
|
||||
dx: 0,
|
||||
dy: 0
|
||||
};
|
||||
}
|
||||
|
||||
function rand() {
|
||||
const x = Math.sin(randSeed++) * 10000;
|
||||
return x - Math.floor(x);
|
||||
}
|
||||
|
||||
function generateWalls() {
|
||||
// First pass: generate initial walls
|
||||
for (let c = 0; c < cols; c++) {
|
||||
for (let r = 0; r < rows; r++) {
|
||||
if (c === 0 || r === 0 || c === cols - 1 || r === rows - 1 || rand() < 0.2) {
|
||||
walls.push({ c, r });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Second pass: check for enclosed spaces
|
||||
for (let c = 1; c < cols - 1; c++) {
|
||||
for (let r = 1; r < rows - 1; r++) {
|
||||
// Skip if already a wall
|
||||
if (walls.some(w => w.c === c && w.r === r)) continue;
|
||||
|
||||
// Check all four sides
|
||||
const hasWallAbove = walls.some(w => w.c === c && w.r === r - 1);
|
||||
const hasWallBelow = walls.some(w => w.c === c && w.r === r + 1);
|
||||
const hasWallLeft = walls.some(w => w.c === c - 1 && w.r === r);
|
||||
const hasWallRight = walls.some(w => w.c === c + 1 && w.r === r);
|
||||
|
||||
// If all sides are walls, make this spot a wall too
|
||||
if (hasWallAbove && hasWallBelow && hasWallLeft && hasWallRight) {
|
||||
walls.push({ c, r });
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function generateDots() {
|
||||
dots = [];
|
||||
for (let c = 1; c < cols - 1; c++) {
|
||||
for (let r = 1; r < rows - 1; r++) {
|
||||
if (walls.some(w => w.c === c && w.r === r)) continue;
|
||||
|
||||
const isEnclosed =
|
||||
walls.some(w => w.c === c + 1 && w.r === r) &&
|
||||
walls.some(w => w.c === c - 1 && w.r === r) &&
|
||||
walls.some(w => w.c === c && w.r === r + 1) &&
|
||||
walls.some(w => w.c === c && w.r === r - 1);
|
||||
|
||||
if (!isEnclosed) dots.push({ c, r });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Game Loop & Rendering =====
|
||||
function gameLoop() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
drawWalls();
|
||||
moveChar(pacman);
|
||||
moveEnemy();
|
||||
drawChar(pacman, "yellow");
|
||||
drawChar(enemy, "red");
|
||||
eatDots();
|
||||
drawScore();
|
||||
checkGameOver();
|
||||
}
|
||||
|
||||
function drawWalls() {
|
||||
ctx.fillStyle = "blue";
|
||||
walls.forEach(w => {
|
||||
ctx.fillRect(w.c * CELL_SIZE, w.r * CELL_SIZE, CELL_SIZE, CELL_SIZE);
|
||||
});
|
||||
}
|
||||
|
||||
function drawChar(ch, color) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(ch.x, ch.y, ch.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function drawScore() {
|
||||
ctx.fillStyle = "white";
|
||||
ctx.font = "20px Poppins";
|
||||
ctx.textAlign = "left";
|
||||
// Add padding to prevent clipping
|
||||
const padding = 10;
|
||||
ctx.fillText("Score: " + score, padding, 25);
|
||||
}
|
||||
|
||||
function checkGameOver() {
|
||||
if (
|
||||
Math.abs(pacman.x - enemy.x) < pacman.size &&
|
||||
Math.abs(pacman.y - enemy.y) < pacman.size
|
||||
) {
|
||||
ctx.fillStyle = "#00ff99";
|
||||
ctx.font = "40px Poppins";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2);
|
||||
clearInterval(gameInterval);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Movement Logic =====
|
||||
function movePacman(e) {
|
||||
const k = e.key;
|
||||
if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(k)) return;
|
||||
e.preventDefault();
|
||||
|
||||
if (k === "ArrowUp") { pacman.dx = 0; pacman.dy = -PACMAN_SPEED; }
|
||||
if (k === "ArrowDown") { pacman.dx = 0; pacman.dy = PACMAN_SPEED; }
|
||||
if (k === "ArrowLeft") { pacman.dx = -PACMAN_SPEED; pacman.dy = 0; }
|
||||
if (k === "ArrowRight") { pacman.dx = PACMAN_SPEED; pacman.dy = 0; }
|
||||
}
|
||||
|
||||
function moveChar(ch) {
|
||||
const nx = ch.x + ch.dx;
|
||||
const ny = ch.y + ch.dy;
|
||||
if (!willCollide(nx, ny, ch.size)) {
|
||||
ch.x = nx;
|
||||
ch.y = ny;
|
||||
}
|
||||
}
|
||||
|
||||
function moveEnemy() {
|
||||
const options = [];
|
||||
const moves = [[ENEMY_SPEED, 0], [-ENEMY_SPEED, 0], [0, ENEMY_SPEED], [0, -ENEMY_SPEED]];
|
||||
|
||||
moves.forEach(([dx, dy]) => {
|
||||
const nx = enemy.x + dx;
|
||||
const ny = enemy.y + dy;
|
||||
if (!willCollide(nx, ny, enemy.size)) options.push({ dx, dy });
|
||||
});
|
||||
|
||||
if (!options.length) return;
|
||||
|
||||
let best = options[0];
|
||||
let bestDist = dist(enemy.x + best.dx, enemy.y + best.dy, pacman.x, pacman.y);
|
||||
|
||||
for (const opt of options) {
|
||||
const d = dist(enemy.x + opt.dx, enemy.y + opt.dy, pacman.x, pacman.y);
|
||||
if (d < bestDist) {
|
||||
best = opt;
|
||||
bestDist = d;
|
||||
}
|
||||
}
|
||||
|
||||
enemy.x += best.dx;
|
||||
enemy.y += best.dy;
|
||||
}
|
||||
|
||||
function dist(x1, y1, x2, y2) {
|
||||
return Math.abs(x1 - x2) + Math.abs(y1 - y2);
|
||||
}
|
||||
|
||||
function willCollide(x, y, size) {
|
||||
const left = x - size, right = x + size;
|
||||
const top = y - size, bottom = y + size;
|
||||
|
||||
return walls.some(w => {
|
||||
const wx1 = w.c * CELL_SIZE, wy1 = w.r * CELL_SIZE;
|
||||
const wx2 = wx1 + CELL_SIZE, wy2 = wy1 + CELL_SIZE;
|
||||
return right > wx1 && left < wx2 && bottom > wy1 && top < wy2;
|
||||
});
|
||||
}
|
||||
|
||||
function eatDots() {
|
||||
const chompSound = document.getElementById("chomp-sound");
|
||||
|
||||
dots = dots.filter(d => {
|
||||
const dx = d.c * CELL_SIZE + CELL_SIZE / 2;
|
||||
const dy = d.r * CELL_SIZE + CELL_SIZE / 2;
|
||||
|
||||
if (Math.abs(pacman.x - dx) < pacman.size && Math.abs(pacman.y - dy) < pacman.size) {
|
||||
score++;
|
||||
if (chompSound) {
|
||||
chompSound.currentTime = 0;
|
||||
chompSound.volume = 0.4;
|
||||
chompSound.play();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// Check if all dots are eaten
|
||||
if (dots.length === 0) {
|
||||
// Trigger password generator for new random map
|
||||
const generateBtn = document.getElementById("generate-btn");
|
||||
if (generateBtn) {
|
||||
generateBtn.click();
|
||||
}
|
||||
|
||||
// Auto-restart the game after a short delay
|
||||
setTimeout(() => {
|
||||
resetGame();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
ctx.fillStyle = "white";
|
||||
dots.forEach(d => {
|
||||
ctx.beginPath();
|
||||
ctx.arc(d.c * CELL_SIZE + CELL_SIZE / 2, d.r * CELL_SIZE + CELL_SIZE / 2, DOT_SIZE, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
||||
// ===== Global Functions =====
|
||||
window.resetGame = resetGame;
|
||||
window.exitGame = exitGame;
|
||||
|
||||
// Add scroll prevention function
|
||||
function preventScroll(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
@@ -0,0 +1,796 @@
|
||||
/**
|
||||
* Enhanced PacShare Module
|
||||
* Handles bulk uploads and single file uploads seamlessly
|
||||
*/
|
||||
|
||||
class PacShareEnhanced {
|
||||
constructor() {
|
||||
this.selectedFiles = [];
|
||||
this.uploadResults = [];
|
||||
this.settings = {
|
||||
enable2FA: false,
|
||||
autoClearPasswords: true,
|
||||
autoCopyLinks: true,
|
||||
showUploadProgress: true,
|
||||
scrollToResults: true,
|
||||
maxUploadSizeMB: 25,
|
||||
validateFileTypes: false,
|
||||
concurrentUploads: 1,
|
||||
enableFilePreview: true,
|
||||
rememberAlgorithm: true
|
||||
};
|
||||
this.setupEventListeners();
|
||||
this.loadSettings();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Drag & Drop Zone
|
||||
const dropZone = document.getElementById('pacshare-drop-zone');
|
||||
const fileInput = document.getElementById('upload-file');
|
||||
const fileSelect = document.getElementById('pacshare-file-select');
|
||||
|
||||
console.log('PacShare setup - dropZone:', dropZone, 'fileInput:', fileInput, 'fileSelect:', fileSelect);
|
||||
|
||||
if (dropZone && fileInput) {
|
||||
console.log('Setting up PacShare drag & drop events');
|
||||
// Drag & Drop Events
|
||||
dropZone.addEventListener('dragover', this.handleDragOver.bind(this));
|
||||
dropZone.addEventListener('dragleave', this.handleDragLeave.bind(this));
|
||||
dropZone.addEventListener('drop', this.handleDrop.bind(this));
|
||||
dropZone.addEventListener('click', () => {
|
||||
console.log('PacShare drop zone clicked, opening file input');
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
// File Input Events
|
||||
fileInput.addEventListener('change', this.handleFileSelect.bind(this));
|
||||
} else {
|
||||
console.error('PacShare elements not found - dropZone:', dropZone, 'fileInput:', fileInput);
|
||||
}
|
||||
|
||||
if (fileSelect) {
|
||||
console.log('Setting up PacShare file select button');
|
||||
fileSelect.addEventListener('click', (e) => {
|
||||
console.log('PacShare file select button clicked');
|
||||
e.stopPropagation();
|
||||
fileInput.click();
|
||||
});
|
||||
} else {
|
||||
console.error('PacShare file select button not found');
|
||||
}
|
||||
|
||||
// Clear files button
|
||||
const clearBtn = document.getElementById('pacshare-clear-files');
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener('click', this.clearFiles.bind(this));
|
||||
}
|
||||
|
||||
// Enhanced form submission
|
||||
const uploadForm = document.getElementById('upload-form');
|
||||
if (uploadForm) {
|
||||
// Remove existing event listener first
|
||||
uploadForm.replaceWith(uploadForm.cloneNode(true));
|
||||
const newForm = document.getElementById('upload-form');
|
||||
newForm.addEventListener('submit', this.handleEnhancedSubmit.bind(this));
|
||||
}
|
||||
|
||||
// Settings modal controls
|
||||
this.setupSettingsModal();
|
||||
}
|
||||
|
||||
handleDragOver(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
document.getElementById('pacshare-drop-zone').classList.add('drag-over');
|
||||
}
|
||||
|
||||
handleDragLeave(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
document.getElementById('pacshare-drop-zone').classList.remove('drag-over');
|
||||
}
|
||||
|
||||
handleDrop(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
document.getElementById('pacshare-drop-zone').classList.remove('drag-over');
|
||||
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
this.addFiles(files);
|
||||
}
|
||||
|
||||
handleFileSelect(e) {
|
||||
const files = Array.from(e.target.files);
|
||||
this.addFiles(files);
|
||||
}
|
||||
|
||||
addFiles(newFiles) {
|
||||
// Filter out duplicates
|
||||
newFiles = newFiles.filter(newFile =>
|
||||
!this.selectedFiles.some(existingFile =>
|
||||
existingFile.name === newFile.name && existingFile.size === newFile.size
|
||||
)
|
||||
);
|
||||
|
||||
this.selectedFiles.push(...newFiles);
|
||||
this.updateFileDisplay();
|
||||
this.updateUI();
|
||||
}
|
||||
|
||||
updateFileDisplay() {
|
||||
const fileListContainer = document.getElementById('pacshare-file-list');
|
||||
const filesContainer = document.getElementById('pacshare-files-container');
|
||||
const uploadBtn = document.getElementById('pacshare-upload-btn');
|
||||
|
||||
if (!filesContainer || !fileListContainer) return;
|
||||
|
||||
if (this.selectedFiles.length === 0) {
|
||||
fileListContainer.style.display = 'none';
|
||||
if (uploadBtn) uploadBtn.textContent = 'Upload and Generate Link';
|
||||
return;
|
||||
}
|
||||
|
||||
fileListContainer.style.display = 'block';
|
||||
filesContainer.innerHTML = '';
|
||||
|
||||
// Update button text based on file count
|
||||
if (uploadBtn) {
|
||||
uploadBtn.textContent = this.selectedFiles.length === 1
|
||||
? 'Upload and Generate Link'
|
||||
: `Upload ${this.selectedFiles.length} Files and Generate Links`;
|
||||
}
|
||||
|
||||
this.selectedFiles.forEach((file, index) => {
|
||||
const fileItem = document.createElement('div');
|
||||
fileItem.className = 'file-item';
|
||||
fileItem.innerHTML = `
|
||||
<div class="file-info">
|
||||
<div class="file-name">${file.name}</div>
|
||||
<div class="file-size">${this.formatFileSize(file.size)}</div>
|
||||
</div>
|
||||
<div class="file-actions">
|
||||
<button type="button" onclick="pacShareEnhanced.previewFile(${index})" style="padding: 5px 10px; font-size: 0.8em;">Preview</button>
|
||||
<button type="button" onclick="pacShareEnhanced.removeFile(${index})" class="danger-button" style="padding: 5px 10px; font-size: 0.8em;">Remove</button>
|
||||
</div>
|
||||
`;
|
||||
filesContainer.appendChild(fileItem);
|
||||
});
|
||||
}
|
||||
|
||||
async previewFile(index) {
|
||||
const file = this.selectedFiles[index];
|
||||
if (!file) return;
|
||||
|
||||
const previewContainer = document.createElement('div');
|
||||
previewContainer.className = 'file-preview-container';
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'file-preview-header';
|
||||
header.textContent = `Preview: ${file.name}`;
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'file-preview-content';
|
||||
|
||||
// Handle different file types
|
||||
if (file.type.startsWith('text/') || this.isTextFile(file.name)) {
|
||||
try {
|
||||
const text = await this.readFileAsText(file);
|
||||
content.textContent = text.length > 2000 ? text.substring(0, 2000) + '...' : text;
|
||||
} catch (error) {
|
||||
content.textContent = 'Error reading file: ' + error.message;
|
||||
}
|
||||
} else if (file.type.startsWith('image/')) {
|
||||
const img = document.createElement('img');
|
||||
img.className = 'image-preview';
|
||||
img.src = URL.createObjectURL(file);
|
||||
img.onload = () => URL.revokeObjectURL(img.src);
|
||||
content.appendChild(img);
|
||||
} else {
|
||||
content.innerHTML = `
|
||||
<div style="color: #888;">
|
||||
File Type: ${file.type || 'Unknown'}<br>
|
||||
Size: ${this.formatFileSize(file.size)}<br>
|
||||
Preview not available for this file type.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
previewContainer.appendChild(header);
|
||||
previewContainer.appendChild(content);
|
||||
|
||||
// Remove existing preview
|
||||
const existingPreview = document.querySelector('.file-preview-container');
|
||||
if (existingPreview) {
|
||||
existingPreview.remove();
|
||||
}
|
||||
|
||||
// Add new preview after the file list
|
||||
const fileList = document.getElementById('pacshare-files-container');
|
||||
if (fileList) {
|
||||
fileList.parentNode.insertBefore(previewContainer, fileList.nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
removeFile(index) {
|
||||
this.selectedFiles.splice(index, 1);
|
||||
this.updateFileDisplay();
|
||||
|
||||
// Remove preview if it exists
|
||||
const existingPreview = document.querySelector('.file-preview-container');
|
||||
if (existingPreview) {
|
||||
existingPreview.remove();
|
||||
}
|
||||
}
|
||||
|
||||
clearFiles() {
|
||||
this.selectedFiles = [];
|
||||
this.updateFileDisplay();
|
||||
|
||||
// Clear file input
|
||||
const fileInput = document.getElementById('upload-file');
|
||||
if (fileInput) fileInput.value = '';
|
||||
|
||||
// Remove preview if it exists
|
||||
const existingPreview = document.querySelector('.file-preview-container');
|
||||
if (existingPreview) {
|
||||
existingPreview.remove();
|
||||
}
|
||||
|
||||
this.hideResults();
|
||||
}
|
||||
|
||||
async handleEnhancedSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (this.selectedFiles.length === 0) {
|
||||
alert('Please select at least one file to upload.');
|
||||
return;
|
||||
}
|
||||
|
||||
const algorithm = document.getElementById('share-algorithm')?.value;
|
||||
const encPassword = document.querySelector('input[name="enc_password"]')?.value;
|
||||
const pickupPassword = document.querySelector('input[name="pickup_password"]')?.value;
|
||||
const enable2FA = this.settings.enable2FA;
|
||||
|
||||
if (!algorithm || !encPassword || !pickupPassword) {
|
||||
alert('Please fill in all required fields.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.selectedFiles.length === 1) {
|
||||
// Single file - use existing logic
|
||||
await this.uploadSingleFile(this.selectedFiles[0], algorithm, encPassword, pickupPassword, enable2FA);
|
||||
} else {
|
||||
// Multiple files - use bulk upload
|
||||
await this.uploadMultipleFiles(algorithm, encPassword, pickupPassword, enable2FA);
|
||||
}
|
||||
}
|
||||
|
||||
async uploadSingleFile(file, algorithm, encPassword, pickupPassword, enable2FA) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('algorithm', algorithm);
|
||||
formData.append('enc_password', encPassword);
|
||||
formData.append('pickup_password', pickupPassword);
|
||||
if (enable2FA) formData.append('enable_2fa', 'on');
|
||||
|
||||
try {
|
||||
const response = await fetch('/', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.success && data.pickup_url) {
|
||||
this.showSingleResult(data);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
alert('Error uploading file: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async uploadMultipleFiles(algorithm, encPassword, pickupPassword, enable2FA) {
|
||||
this.uploadResults = [];
|
||||
this.showProgress();
|
||||
|
||||
// Upload files sequentially to avoid overwhelming the server
|
||||
for (let i = 0; i < this.selectedFiles.length; i++) {
|
||||
const file = this.selectedFiles[i];
|
||||
this.updateFileProgress(i, 'uploading');
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('algorithm', algorithm);
|
||||
formData.append('enc_password', encPassword);
|
||||
formData.append('pickup_password', pickupPassword);
|
||||
if (enable2FA) formData.append('enable_2fa', 'on');
|
||||
|
||||
const response = await fetch('/', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
this.uploadResults.push({ file, error: data.error, success: false });
|
||||
this.updateFileProgress(i, 'error');
|
||||
} else if (data.success && data.pickup_url) {
|
||||
this.uploadResults.push({ file, data, success: true });
|
||||
this.updateFileProgress(i, 'completed');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
this.uploadResults.push({ file, error: error.message, success: false });
|
||||
this.updateFileProgress(i, 'error');
|
||||
}
|
||||
|
||||
this.updateOverallProgress(i + 1, this.selectedFiles.length);
|
||||
}
|
||||
|
||||
this.showResults();
|
||||
}
|
||||
|
||||
showProgress() {
|
||||
const progressSection = document.getElementById('pacshare-progress');
|
||||
if (progressSection) {
|
||||
progressSection.style.display = 'block';
|
||||
}
|
||||
|
||||
this.updateOverallProgress(0, this.selectedFiles.length);
|
||||
this.initializeFileProgress();
|
||||
}
|
||||
|
||||
initializeFileProgress() {
|
||||
const progressContainer = document.getElementById('pacshare-file-progress');
|
||||
if (!progressContainer) return;
|
||||
|
||||
progressContainer.innerHTML = '';
|
||||
|
||||
this.selectedFiles.forEach((file, index) => {
|
||||
const progressItem = document.createElement('div');
|
||||
progressItem.className = 'file-progress-item';
|
||||
progressItem.innerHTML = `
|
||||
<div class="file-progress-name">${file.name}</div>
|
||||
<div class="file-progress-status" id="pacshare-progress-${index}">Waiting</div>
|
||||
`;
|
||||
progressContainer.appendChild(progressItem);
|
||||
});
|
||||
}
|
||||
|
||||
updateFileProgress(index, status) {
|
||||
const statusElement = document.getElementById(`pacshare-progress-${index}`);
|
||||
if (!statusElement) return;
|
||||
|
||||
statusElement.className = `file-progress-status status-${status}`;
|
||||
|
||||
switch (status) {
|
||||
case 'uploading':
|
||||
statusElement.textContent = 'Uploading...';
|
||||
break;
|
||||
case 'completed':
|
||||
statusElement.textContent = 'Completed';
|
||||
break;
|
||||
case 'error':
|
||||
statusElement.textContent = 'Error';
|
||||
break;
|
||||
default:
|
||||
statusElement.textContent = 'Waiting';
|
||||
}
|
||||
}
|
||||
|
||||
updateOverallProgress(completed, total) {
|
||||
const progressBar = document.getElementById('pacshare-overall-bar');
|
||||
const progressText = document.getElementById('pacshare-overall-text');
|
||||
|
||||
if (progressBar) {
|
||||
const percentage = total > 0 ? (completed / total) * 100 : 0;
|
||||
progressBar.style.width = `${percentage}%`;
|
||||
}
|
||||
|
||||
if (progressText) {
|
||||
progressText.textContent = `${completed} / ${total} files uploaded`;
|
||||
}
|
||||
}
|
||||
|
||||
showSingleResult(data) {
|
||||
// Use existing single result display logic
|
||||
const shareLink = document.getElementById('share-link');
|
||||
const shareLinkContainer = document.getElementById('share-link-container');
|
||||
|
||||
if (shareLink && shareLinkContainer) {
|
||||
shareLink.href = data.pickup_url;
|
||||
shareLink.textContent = data.pickup_url;
|
||||
shareLinkContainer.style.display = 'flex';
|
||||
|
||||
// Handle 2FA if enabled
|
||||
if (data.qr_code_url) {
|
||||
this.showTwoFactorSetup(data.qr_code_url, data.service_name, data.totp_secret);
|
||||
}
|
||||
|
||||
// Clear form
|
||||
this.clearForm();
|
||||
|
||||
// Scroll to results
|
||||
shareLinkContainer.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
showResults() {
|
||||
const resultsSection = document.getElementById('pacshare-results');
|
||||
const resultsList = document.getElementById('pacshare-results-list');
|
||||
|
||||
if (!resultsSection || !resultsList) return;
|
||||
|
||||
resultsSection.style.display = 'block';
|
||||
resultsList.innerHTML = '';
|
||||
|
||||
const successCount = this.uploadResults.filter(r => r.success).length;
|
||||
const totalCount = this.uploadResults.length;
|
||||
|
||||
// Add summary
|
||||
const summary = document.createElement('div');
|
||||
summary.style.cssText = 'padding: 15px; border-bottom: 1px solid #333; background-color: #1a1a1a; font-weight: bold;';
|
||||
summary.innerHTML = `
|
||||
<div style="color: #00ff99;">Upload Complete</div>
|
||||
<div style="font-size: 0.9em; color: #ccc; margin-top: 5px;">
|
||||
${successCount} successful, ${totalCount - successCount} failed out of ${totalCount} files
|
||||
</div>
|
||||
`;
|
||||
resultsList.appendChild(summary);
|
||||
|
||||
// Add individual results
|
||||
this.uploadResults.forEach((result, index) => {
|
||||
const resultItem = document.createElement('div');
|
||||
resultItem.className = 'result-item';
|
||||
|
||||
if (result.success) {
|
||||
resultItem.innerHTML = `
|
||||
<div class="result-info">
|
||||
<div class="result-name">✅ ${result.file.name}</div>
|
||||
<div class="result-details">
|
||||
<a href="${result.data.pickup_url}" target="_blank" style="color: #00ff99;">${result.data.pickup_url}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-actions">
|
||||
<button type="button" onclick="pacShareEnhanced.copyLink('${result.data.pickup_url}')" style="padding: 5px 10px; font-size: 0.8em;">Copy Link</button>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
resultItem.innerHTML = `
|
||||
<div class="result-info">
|
||||
<div class="result-name">❌ ${result.file.name}</div>
|
||||
<div class="result-details">${result.error}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
resultsList.appendChild(resultItem);
|
||||
});
|
||||
|
||||
// Clear form and scroll to results
|
||||
this.clearForm();
|
||||
resultsSection.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
copyLink(url) {
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
this.showToast('Link copied to clipboard!');
|
||||
}).catch(() => {
|
||||
// Fallback
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = url;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
this.showToast('Link copied to clipboard!');
|
||||
});
|
||||
}
|
||||
|
||||
showToast(message) {
|
||||
const toast = document.createElement('div');
|
||||
toast.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background-color: #00ff99;
|
||||
color: #000;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
z-index: 10000;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
`;
|
||||
toast.textContent = message;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
if (toast.parentNode) {
|
||||
toast.parentNode.removeChild(toast);
|
||||
}
|
||||
}, 300);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
clearForm() {
|
||||
// Clear passwords but keep algorithm
|
||||
const encPassword = document.querySelector('input[name="enc_password"]');
|
||||
const pickupPassword = document.querySelector('input[name="pickup_password"]');
|
||||
const enable2FA = document.getElementById('enable-2fa');
|
||||
|
||||
if (encPassword) encPassword.value = '';
|
||||
if (pickupPassword) pickupPassword.value = '';
|
||||
if (enable2FA) enable2FA.checked = false;
|
||||
|
||||
// Clear selected files
|
||||
this.clearFiles();
|
||||
}
|
||||
|
||||
hideResults() {
|
||||
const sections = ['pacshare-results', 'pacshare-progress', 'share-link-container'];
|
||||
sections.forEach(id => {
|
||||
const section = document.getElementById(id);
|
||||
if (section) section.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
updateUI() {
|
||||
// Hide results when new files are selected
|
||||
this.hideResults();
|
||||
}
|
||||
|
||||
// Utility methods
|
||||
formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
isTextFile(filename) {
|
||||
const textExtensions = ['.txt', '.md', '.js', '.html', '.css', '.json', '.xml', '.csv', '.log', '.py', '.java', '.c', '.cpp', '.h'];
|
||||
return textExtensions.some(ext => filename.toLowerCase().endsWith(ext));
|
||||
}
|
||||
|
||||
readFileAsText(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => resolve(e.target.result);
|
||||
reader.onerror = e => reject(new Error('Failed to read file'));
|
||||
reader.readAsText(file);
|
||||
});
|
||||
}
|
||||
|
||||
showTwoFactorSetup(qrCodeUrl, serviceName, totpSecret) {
|
||||
const container = document.getElementById('tfa-setup-container');
|
||||
const qrImage = document.getElementById('tfa-qr-image');
|
||||
const tfaString = document.getElementById('tfa-string');
|
||||
|
||||
if (container && qrImage && tfaString) {
|
||||
qrImage.src = qrCodeUrl;
|
||||
tfaString.value = totpSecret;
|
||||
container.style.display = 'block';
|
||||
container.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
// Settings Modal Methods
|
||||
setupSettingsModal() {
|
||||
const settingsBtn = document.getElementById("pacshare-settings-btn");
|
||||
const modal = document.getElementById("pacshare-settings-modal");
|
||||
const closeBtn = document.getElementById("close-pacshare-settings");
|
||||
const applyBtn = document.getElementById("apply-pacshare-settings");
|
||||
const resetBtn = document.getElementById("reset-pacshare-settings");
|
||||
|
||||
if (settingsBtn && modal) {
|
||||
settingsBtn.addEventListener("click", () => {
|
||||
modal.style.display = "flex";
|
||||
this.updateSettingsModal();
|
||||
});
|
||||
}
|
||||
|
||||
if (closeBtn && modal) {
|
||||
closeBtn.addEventListener("click", () => {
|
||||
modal.style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
if (modal) {
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (applyBtn && modal) {
|
||||
applyBtn.addEventListener("click", () => {
|
||||
this.applySettings();
|
||||
modal.style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
if (resetBtn) {
|
||||
resetBtn.addEventListener("click", () => {
|
||||
this.resetSettings();
|
||||
});
|
||||
}
|
||||
|
||||
// Input validation
|
||||
const uploadSizeInput = document.getElementById("max-upload-size-input");
|
||||
const concurrentInput = document.getElementById("concurrent-uploads-input");
|
||||
|
||||
if (uploadSizeInput) {
|
||||
uploadSizeInput.addEventListener("input", () => {
|
||||
let value = parseInt(uploadSizeInput.value);
|
||||
if (value < 1) uploadSizeInput.value = 1;
|
||||
else if (value > 1000) uploadSizeInput.value = 1000;
|
||||
this.updateSettingsSummary();
|
||||
});
|
||||
}
|
||||
|
||||
if (concurrentInput) {
|
||||
concurrentInput.addEventListener("input", () => {
|
||||
let value = parseInt(concurrentInput.value);
|
||||
if (value < 1) concurrentInput.value = 1;
|
||||
else if (value > 10) concurrentInput.value = 10;
|
||||
this.updateSettingsSummary();
|
||||
});
|
||||
}
|
||||
|
||||
// Update summary when checkboxes change
|
||||
const checkboxIds = [
|
||||
"enable-2fa-setting", "auto-clear-passwords", "auto-copy-links",
|
||||
"show-upload-progress", "scroll-to-results", "validate-file-types",
|
||||
"enable-file-preview", "remember-algorithm"
|
||||
];
|
||||
|
||||
checkboxIds.forEach(id => {
|
||||
const checkbox = document.getElementById(id);
|
||||
if (checkbox) {
|
||||
checkbox.addEventListener("change", () => {
|
||||
this.updateSettingsSummary();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateSettingsModal() {
|
||||
// Set checkbox values
|
||||
const checkboxMap = {
|
||||
"enable-2fa-setting": "enable2FA",
|
||||
"auto-clear-passwords": "autoClearPasswords",
|
||||
"auto-copy-links": "autoCopyLinks",
|
||||
"show-upload-progress": "showUploadProgress",
|
||||
"scroll-to-results": "scrollToResults",
|
||||
"validate-file-types": "validateFileTypes",
|
||||
"enable-file-preview": "enableFilePreview",
|
||||
"remember-algorithm": "rememberAlgorithm"
|
||||
};
|
||||
|
||||
Object.entries(checkboxMap).forEach(([id, setting]) => {
|
||||
const checkbox = document.getElementById(id);
|
||||
if (checkbox) {
|
||||
checkbox.checked = this.settings[setting];
|
||||
}
|
||||
});
|
||||
|
||||
// Set number inputs
|
||||
const uploadSizeInput = document.getElementById("max-upload-size-input");
|
||||
const concurrentInput = document.getElementById("concurrent-uploads-input");
|
||||
|
||||
if (uploadSizeInput) uploadSizeInput.value = this.settings.maxUploadSizeMB;
|
||||
if (concurrentInput) concurrentInput.value = this.settings.concurrentUploads;
|
||||
|
||||
this.updateSettingsSummary();
|
||||
}
|
||||
|
||||
updateSettingsSummary() {
|
||||
const summary = document.getElementById("pacshare-settings-summary");
|
||||
if (!summary) return;
|
||||
|
||||
const enable2FA = document.getElementById("enable-2fa-setting")?.checked || this.settings.enable2FA;
|
||||
const autoClearPasswords = document.getElementById("auto-clear-passwords")?.checked || this.settings.autoClearPasswords;
|
||||
const maxSize = document.getElementById("max-upload-size-input")?.value || this.settings.maxUploadSizeMB;
|
||||
const concurrent = document.getElementById("concurrent-uploads-input")?.value || this.settings.concurrentUploads;
|
||||
|
||||
summary.innerHTML = `
|
||||
• 2FA: ${enable2FA ? 'Enabled' : 'Disabled'}<br>
|
||||
• Auto-clear passwords: ${autoClearPasswords ? 'Yes' : 'No'}<br>
|
||||
• Max file size: ${maxSize} MB<br>
|
||||
• Upload mode: ${concurrent == 1 ? 'Sequential' : `${concurrent} concurrent`}<br>
|
||||
• File preview: ${this.settings.enableFilePreview ? 'Enabled' : 'Disabled'}
|
||||
`;
|
||||
}
|
||||
|
||||
applySettings() {
|
||||
// Get checkbox values
|
||||
const checkboxMap = {
|
||||
"enable-2fa-setting": "enable2FA",
|
||||
"auto-clear-passwords": "autoClearPasswords",
|
||||
"auto-copy-links": "autoCopyLinks",
|
||||
"show-upload-progress": "showUploadProgress",
|
||||
"scroll-to-results": "scrollToResults",
|
||||
"validate-file-types": "validateFileTypes",
|
||||
"enable-file-preview": "enableFilePreview",
|
||||
"remember-algorithm": "rememberAlgorithm"
|
||||
};
|
||||
|
||||
Object.entries(checkboxMap).forEach(([id, setting]) => {
|
||||
const checkbox = document.getElementById(id);
|
||||
if (checkbox) {
|
||||
this.settings[setting] = checkbox.checked;
|
||||
}
|
||||
});
|
||||
|
||||
// Get number inputs
|
||||
const uploadSizeInput = document.getElementById("max-upload-size-input");
|
||||
const concurrentInput = document.getElementById("concurrent-uploads-input");
|
||||
|
||||
if (uploadSizeInput) this.settings.maxUploadSizeMB = parseInt(uploadSizeInput.value) || 25;
|
||||
if (concurrentInput) this.settings.concurrentUploads = parseInt(concurrentInput.value) || 1;
|
||||
|
||||
this.saveSettings();
|
||||
this.showToast("PacShare settings applied successfully!");
|
||||
}
|
||||
|
||||
resetSettings() {
|
||||
this.settings = {
|
||||
enable2FA: false,
|
||||
autoClearPasswords: true,
|
||||
autoCopyLinks: true,
|
||||
showUploadProgress: true,
|
||||
scrollToResults: true,
|
||||
maxUploadSizeMB: 25,
|
||||
validateFileTypes: false,
|
||||
concurrentUploads: 1,
|
||||
enableFilePreview: true,
|
||||
rememberAlgorithm: true
|
||||
};
|
||||
|
||||
this.updateSettingsModal();
|
||||
this.showToast("Settings reset to defaults!");
|
||||
}
|
||||
|
||||
loadSettings() {
|
||||
try {
|
||||
const saved = localStorage.getItem('paccrypt-pacshare-settings');
|
||||
if (saved) {
|
||||
this.settings = { ...this.settings, ...JSON.parse(saved) };
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to load PacShare settings:', error);
|
||||
}
|
||||
}
|
||||
|
||||
saveSettings() {
|
||||
try {
|
||||
localStorage.setItem('paccrypt-pacshare-settings', JSON.stringify(this.settings));
|
||||
} catch (error) {
|
||||
console.warn('Failed to save PacShare settings:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize enhanced PacShare when DOM is loaded
|
||||
let pacShareEnhanced;
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
pacShareEnhanced = new PacShareEnhanced();
|
||||
// Make available globally for onclick handlers
|
||||
window.pacShareEnhanced = pacShareEnhanced;
|
||||
});
|
||||
+944
@@ -0,0 +1,944 @@
|
||||
/**
|
||||
* UI management module.
|
||||
* Handles user interface interactions and form handling.
|
||||
*/
|
||||
|
||||
import { encryptFile, decryptFile } from './fileops.js';
|
||||
|
||||
// ===== UI Initialization =====
|
||||
export function setupUI() {
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = "none";
|
||||
}
|
||||
initializeEventListeners();
|
||||
}
|
||||
|
||||
async function initializeEventListeners() {
|
||||
const elements = {
|
||||
algorithm: document.getElementById("algorithm"),
|
||||
inputText: document.getElementById("input-text"),
|
||||
form: document.getElementById("crypto-form"),
|
||||
removeFileBtn: document.getElementById("remove-file-btn"),
|
||||
clearAllBtn: document.getElementById("clear-all-btn"),
|
||||
generateBtn: document.getElementById("generate-btn"),
|
||||
copyPasswordBtn: document.getElementById("copy-btn"),
|
||||
copyOutputBtn: document.getElementById("copy-output-btn"),
|
||||
toggleSwitch: document.getElementById("operation-toggle"),
|
||||
copyShareBtn: document.getElementById("copy-share-btn"),
|
||||
shareLink: document.getElementById("share-link"),
|
||||
generateKeypairBtn: document.getElementById("generate-keypair-btn"),
|
||||
loadPublicKeyBtn: document.getElementById("load-public-key-btn"),
|
||||
loadPrivateKeyBtn: document.getElementById("load-private-key-btn"),
|
||||
publicKeyFile: document.getElementById("public-key-file"),
|
||||
privateKeyFile: document.getElementById("private-key-file")
|
||||
};
|
||||
|
||||
if (validateElements(elements)) {
|
||||
setupElementListeners(elements);
|
||||
}
|
||||
await loadAvailableAlgorithms();
|
||||
// Initialize algorithm options on page load after algorithms are loaded
|
||||
toggleAlgorithmOptions();
|
||||
}
|
||||
|
||||
function validateElements(elements) {
|
||||
return elements.algorithm && elements.inputText && elements.form &&
|
||||
elements.removeFileBtn && elements.clearAllBtn && elements.generateBtn &&
|
||||
elements.copyPasswordBtn && elements.toggleSwitch;
|
||||
}
|
||||
|
||||
function setupElementListeners(elements) {
|
||||
elements.algorithm?.addEventListener("change", toggleAlgorithmOptions);
|
||||
elements.inputText.addEventListener("input", handleInputChange);
|
||||
elements.form.addEventListener("submit", handleSubmit);
|
||||
elements.removeFileBtn.addEventListener("click", removeFile);
|
||||
elements.clearAllBtn.addEventListener("click", clearAll);
|
||||
elements.generateBtn.addEventListener("click", generateRandomPassword);
|
||||
elements.copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
|
||||
elements.copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
|
||||
elements.toggleSwitch.addEventListener("change", () => {
|
||||
console.log("Mode:", elements.toggleSwitch.checked ? "Decrypt" : "Encrypt");
|
||||
});
|
||||
|
||||
// Password generator controls
|
||||
setupPasswordGeneratorListeners();
|
||||
|
||||
// Key pair management listeners
|
||||
elements.generateKeypairBtn?.addEventListener("click", generateAndDownloadKeyPair);
|
||||
elements.loadPublicKeyBtn?.addEventListener("click", () => elements.publicKeyFile?.click());
|
||||
elements.loadPrivateKeyBtn?.addEventListener("click", () => elements.privateKeyFile?.click());
|
||||
elements.publicKeyFile?.addEventListener("change", handlePublicKeyLoad);
|
||||
elements.privateKeyFile?.addEventListener("change", handlePrivateKeyLoad);
|
||||
|
||||
const fileInput = document.getElementById("file-input");
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener("change", () => {
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = fileInput.files.length > 0 ? "inline-block" : "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupShareLinkListeners(elements);
|
||||
}
|
||||
|
||||
function setupShareLinkListeners(elements) {
|
||||
if (elements.copyShareBtn && elements.shareLink) {
|
||||
elements.copyShareBtn.addEventListener("click", () => {
|
||||
const linkText = elements.shareLink.textContent.trim();
|
||||
navigator.clipboard.writeText(linkText).then(() => {
|
||||
const feedback = document.getElementById("shared-link-feedback");
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function toggleInputMode() {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const textValue = document.getElementById("input-text")?.value.trim();
|
||||
|
||||
const textSection = document.getElementById("text-section");
|
||||
const fileSection = document.getElementById("file-section");
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
|
||||
if (!fileInput || !textSection || !fileSection || !removeBtn) return;
|
||||
|
||||
const fileSelected = fileInput.files.length > 0;
|
||||
|
||||
textSection.style.display = fileSelected ? "none" : "flex";
|
||||
fileSection.style.display = !textValue ? "flex" : "none";
|
||||
removeBtn.style.display = fileSelected ? "inline-block" : "none";
|
||||
}
|
||||
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const algorithm = document.getElementById("algorithm")?.value;
|
||||
const password = document.getElementById("password")?.value;
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const isDecrypt = document.getElementById("operation-toggle").checked;
|
||||
const operation = isDecrypt ? "decrypt" : "encrypt";
|
||||
|
||||
if (!algorithm || !fileInput) return;
|
||||
|
||||
// Check requirements based on algorithm
|
||||
let requiresKeypair = false;
|
||||
if (window.availableAlgorithms && window.availableAlgorithms[algorithm]) {
|
||||
requiresKeypair = window.availableAlgorithms[algorithm].requires_keypair || false;
|
||||
} else {
|
||||
requiresKeypair = algorithm.includes("hybrid");
|
||||
}
|
||||
|
||||
if (requiresKeypair) {
|
||||
const globalKeys = window.getGlobalKeys ? window.getGlobalKeys() : {};
|
||||
if (operation === "encrypt" && !globalKeys.publicKey) {
|
||||
return alert("Please load a public key in the Key Pairs Management section for encryption with this algorithm.");
|
||||
}
|
||||
if (operation === "decrypt" && !globalKeys.privateKey) {
|
||||
return alert("Please load a private key in the Key Pairs Management section for decryption with this algorithm.");
|
||||
}
|
||||
} else if (!password) {
|
||||
return alert("Password is required for this algorithm.");
|
||||
}
|
||||
|
||||
if (fileInput.files.length > 0) {
|
||||
return (operation === "encrypt")
|
||||
? encryptFile(fileInput, password)
|
||||
: decryptFile(fileInput, password);
|
||||
}
|
||||
|
||||
await handleTextOperation(operation, password);
|
||||
}
|
||||
|
||||
async function handleTextOperation(operation, password) {
|
||||
const algorithm = document.getElementById("algorithm")?.value || "aes_gcm";
|
||||
|
||||
const payload = {
|
||||
message: document.getElementById("input-text")?.value,
|
||||
algorithm: algorithm
|
||||
};
|
||||
|
||||
// Add appropriate authentication based on algorithm
|
||||
let requiresKeypair = false;
|
||||
if (window.availableAlgorithms && window.availableAlgorithms[algorithm]) {
|
||||
requiresKeypair = window.availableAlgorithms[algorithm].requires_keypair || false;
|
||||
} else {
|
||||
requiresKeypair = algorithm.includes("hybrid");
|
||||
}
|
||||
|
||||
if (requiresKeypair) {
|
||||
const globalKeys = window.getGlobalKeys ? window.getGlobalKeys() : {};
|
||||
if (operation === "encrypt" && globalKeys.publicKey) {
|
||||
payload.public_key = globalKeys.publicKey;
|
||||
} else if (operation === "decrypt" && globalKeys.privateKey) {
|
||||
payload.private_key = globalKeys.privateKey;
|
||||
}
|
||||
} else {
|
||||
payload.password = password;
|
||||
}
|
||||
|
||||
try {
|
||||
const endpoint = operation === "encrypt" ? "/api/encrypt" : "/api/decrypt";
|
||||
const response = await fetch(endpoint, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
const outputField = document.getElementById("output-text");
|
||||
if (outputField) {
|
||||
if (data.error) {
|
||||
outputField.value = `[Error] ${data.error}`;
|
||||
} else {
|
||||
outputField.value = data.result || "[Error] No response received.";
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
alert("Error processing request: " + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function removeFile() {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
if (fileInput) fileInput.value = "";
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) removeBtn.style.display = 'none';
|
||||
toggleInputMode();
|
||||
}
|
||||
|
||||
// ===== Advanced Password Generator =====
|
||||
function generateRandomPassword() {
|
||||
const settings = getPasswordSettings();
|
||||
|
||||
if (!settings.charset || settings.charset.length === 0) {
|
||||
alert("Please select at least one character type for password generation!");
|
||||
return;
|
||||
}
|
||||
|
||||
const password = generatePassword(settings.length, settings.charset);
|
||||
const passwordField = document.getElementById("generated-password");
|
||||
|
||||
if (passwordField) {
|
||||
passwordField.value = password;
|
||||
updatePasswordStrength(password);
|
||||
checkForPacman();
|
||||
}
|
||||
}
|
||||
|
||||
function getPasswordSettings() {
|
||||
const length = parseInt(document.getElementById("password-length-input")?.value || 16);
|
||||
const includeUppercase = document.getElementById("include-uppercase")?.checked;
|
||||
const includeLowercase = document.getElementById("include-lowercase")?.checked;
|
||||
const includeNumbers = document.getElementById("include-numbers")?.checked;
|
||||
const includeSpecial = document.getElementById("include-special")?.checked;
|
||||
const excludeAmbiguous = document.getElementById("exclude-ambiguous")?.checked;
|
||||
const customCharacters = document.getElementById("custom-characters")?.value || "";
|
||||
|
||||
let charset = "";
|
||||
|
||||
// Character sets
|
||||
const sets = {
|
||||
uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
|
||||
lowercase: "abcdefghijklmnopqrstuvwxyz",
|
||||
numbers: "0123456789",
|
||||
special: "!@#$%^&*()_+-=[]{}|;:,.<>?/~"
|
||||
};
|
||||
|
||||
// Ambiguous characters to exclude
|
||||
const ambiguous = "0O1lI";
|
||||
|
||||
if (includeUppercase) charset += sets.uppercase;
|
||||
if (includeLowercase) charset += sets.lowercase;
|
||||
if (includeNumbers) charset += sets.numbers;
|
||||
if (includeSpecial) charset += sets.special;
|
||||
|
||||
// Add custom characters
|
||||
if (customCharacters) {
|
||||
charset += customCharacters;
|
||||
}
|
||||
|
||||
// Remove ambiguous characters if requested
|
||||
if (excludeAmbiguous) {
|
||||
charset = charset.split('').filter(char => !ambiguous.includes(char)).join('');
|
||||
}
|
||||
|
||||
// Remove duplicates
|
||||
charset = [...new Set(charset)].join('');
|
||||
|
||||
return { length, charset, settings: { includeUppercase, includeLowercase, includeNumbers, includeSpecial } };
|
||||
}
|
||||
|
||||
function generatePassword(length, charset) {
|
||||
// Use crypto.getRandomValues for cryptographically secure random generation
|
||||
const array = new Uint32Array(length);
|
||||
crypto.getRandomValues(array);
|
||||
|
||||
return Array.from(array, (x) => charset[x % charset.length]).join('');
|
||||
}
|
||||
|
||||
function updatePasswordStrength(password) {
|
||||
const score = calculatePasswordStrength(password);
|
||||
const strengthText = document.getElementById("password-strength-text");
|
||||
const strengthFill = document.getElementById("password-strength-fill");
|
||||
const strengthScore = document.getElementById("strength-score");
|
||||
const strengthFeedback = document.getElementById("strength-feedback");
|
||||
|
||||
if (!strengthText || !strengthFill || !strengthScore || !strengthFeedback) return;
|
||||
|
||||
strengthScore.textContent = `Score: ${score.score}/100`;
|
||||
strengthFeedback.textContent = score.feedback;
|
||||
|
||||
// Update strength level and colors
|
||||
let level, color, width;
|
||||
if (score.score < 30) {
|
||||
level = "Very Weak";
|
||||
color = "#ff4444";
|
||||
width = "20%";
|
||||
} else if (score.score < 50) {
|
||||
level = "Weak";
|
||||
color = "#ff8800";
|
||||
width = "40%";
|
||||
} else if (score.score < 70) {
|
||||
level = "Fair";
|
||||
color = "#ffaa00";
|
||||
width = "60%";
|
||||
} else if (score.score < 85) {
|
||||
level = "Strong";
|
||||
color = "#88ff00";
|
||||
width = "80%";
|
||||
} else {
|
||||
level = "Very Strong";
|
||||
color = "#00ff44";
|
||||
width = "100%";
|
||||
}
|
||||
|
||||
strengthText.textContent = level;
|
||||
strengthText.style.color = color;
|
||||
strengthFill.style.backgroundColor = color;
|
||||
strengthFill.style.width = width;
|
||||
}
|
||||
|
||||
function calculatePasswordStrength(password) {
|
||||
if (!password) return { score: 0, feedback: "Enter a password to see strength analysis" };
|
||||
|
||||
let score = 0;
|
||||
const feedback = [];
|
||||
|
||||
// Length scoring
|
||||
if (password.length >= 8) score += 10;
|
||||
if (password.length >= 12) score += 10;
|
||||
if (password.length >= 16) score += 10;
|
||||
if (password.length >= 20) score += 5;
|
||||
|
||||
// Character variety scoring
|
||||
const hasLower = /[a-z]/.test(password);
|
||||
const hasUpper = /[A-Z]/.test(password);
|
||||
const hasNumber = /[0-9]/.test(password);
|
||||
const hasSpecial = /[^a-zA-Z0-9]/.test(password);
|
||||
|
||||
let varieties = 0;
|
||||
if (hasLower) { score += 5; varieties++; }
|
||||
if (hasUpper) { score += 5; varieties++; }
|
||||
if (hasNumber) { score += 5; varieties++; }
|
||||
if (hasSpecial) { score += 10; varieties++; }
|
||||
|
||||
// Bonus for character variety
|
||||
if (varieties >= 3) score += 10;
|
||||
if (varieties === 4) score += 5;
|
||||
|
||||
// Pattern penalties
|
||||
if (/(.)\1{2,}/.test(password)) {
|
||||
score -= 10;
|
||||
feedback.push("Avoid repeating characters");
|
||||
}
|
||||
|
||||
if (/123|abc|qwe|password|admin|test/i.test(password)) {
|
||||
score -= 15;
|
||||
feedback.push("Avoid common patterns or words");
|
||||
}
|
||||
|
||||
// Entropy calculation
|
||||
const uniqueChars = new Set(password).size;
|
||||
const entropy = password.length * Math.log2(uniqueChars);
|
||||
if (entropy > 60) score += 15;
|
||||
else if (entropy > 40) score += 10;
|
||||
else if (entropy > 30) score += 5;
|
||||
|
||||
// Generate specific feedback
|
||||
if (password.length < 8) feedback.push("Use at least 8 characters");
|
||||
if (password.length < 12) feedback.push("12+ characters recommended");
|
||||
if (!hasLower) feedback.push("Add lowercase letters");
|
||||
if (!hasUpper) feedback.push("Add uppercase letters");
|
||||
if (!hasNumber) feedback.push("Add numbers");
|
||||
if (!hasSpecial) feedback.push("Add special characters");
|
||||
|
||||
if (feedback.length === 0) {
|
||||
feedback.push("Excellent password strength!");
|
||||
}
|
||||
|
||||
return {
|
||||
score: Math.min(100, Math.max(0, score)),
|
||||
feedback: feedback.join(", ")
|
||||
};
|
||||
}
|
||||
|
||||
function setupPasswordGeneratorListeners() {
|
||||
// Modal controls
|
||||
const settingsBtn = document.getElementById("password-settings-btn");
|
||||
const modal = document.getElementById("password-settings-modal");
|
||||
const closeBtn = document.getElementById("close-password-settings");
|
||||
const applyBtn = document.getElementById("apply-password-settings");
|
||||
const resetBtn = document.getElementById("reset-password-settings");
|
||||
|
||||
if (settingsBtn && modal) {
|
||||
settingsBtn.addEventListener("click", () => {
|
||||
modal.style.display = "flex";
|
||||
updateCharsetPreview();
|
||||
});
|
||||
}
|
||||
|
||||
if (closeBtn && modal) {
|
||||
closeBtn.addEventListener("click", () => {
|
||||
modal.style.display = "none";
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
if (modal) {
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (applyBtn && modal) {
|
||||
applyBtn.addEventListener("click", () => {
|
||||
generateRandomPassword();
|
||||
modal.style.display = "none";
|
||||
showPasswordFeedback("Settings applied and password regenerated!");
|
||||
});
|
||||
}
|
||||
|
||||
if (resetBtn) {
|
||||
resetBtn.addEventListener("click", () => {
|
||||
resetPasswordSettings();
|
||||
updateCharsetPreview();
|
||||
showPasswordFeedback("Settings reset to defaults!");
|
||||
});
|
||||
}
|
||||
|
||||
// Length controls (slider and number input)
|
||||
const lengthSlider = document.getElementById("password-length");
|
||||
const lengthInput = document.getElementById("password-length-input");
|
||||
|
||||
if (lengthSlider && lengthInput) {
|
||||
// Sync slider to number input
|
||||
lengthSlider.addEventListener("input", () => {
|
||||
lengthInput.value = lengthSlider.value;
|
||||
updateCharsetPreview();
|
||||
});
|
||||
|
||||
// Sync number input to slider
|
||||
lengthInput.addEventListener("input", () => {
|
||||
let value = parseInt(lengthInput.value);
|
||||
|
||||
// Validate bounds
|
||||
if (value < 8) {
|
||||
value = 8;
|
||||
lengthInput.value = 8;
|
||||
} else if (value > 128) {
|
||||
value = 128;
|
||||
lengthInput.value = 128;
|
||||
}
|
||||
|
||||
lengthSlider.value = value;
|
||||
updateCharsetPreview();
|
||||
});
|
||||
|
||||
// Handle edge cases for number input
|
||||
lengthInput.addEventListener("blur", () => {
|
||||
if (!lengthInput.value || lengthInput.value < 8) {
|
||||
lengthInput.value = 8;
|
||||
lengthSlider.value = 8;
|
||||
updateCharsetPreview();
|
||||
}
|
||||
});
|
||||
|
||||
// Allow Enter key to apply changes
|
||||
lengthInput.addEventListener("keypress", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
lengthInput.blur();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Character set checkboxes
|
||||
const checkboxes = [
|
||||
"include-uppercase",
|
||||
"include-lowercase",
|
||||
"include-numbers",
|
||||
"include-special",
|
||||
"exclude-ambiguous"
|
||||
];
|
||||
|
||||
checkboxes.forEach(id => {
|
||||
const checkbox = document.getElementById(id);
|
||||
if (checkbox) {
|
||||
checkbox.addEventListener("change", () => {
|
||||
updateCharsetPreview();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Custom characters input
|
||||
const customCharsInput = document.getElementById("custom-characters");
|
||||
if (customCharsInput) {
|
||||
customCharsInput.addEventListener("input", () => {
|
||||
updateCharsetPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Password visibility toggle
|
||||
const toggleVisibilityBtn = document.getElementById("toggle-password-visibility");
|
||||
const passwordField = document.getElementById("generated-password");
|
||||
|
||||
if (toggleVisibilityBtn && passwordField) {
|
||||
toggleVisibilityBtn.addEventListener("click", () => {
|
||||
if (passwordField.type === "password") {
|
||||
passwordField.type = "text";
|
||||
toggleVisibilityBtn.textContent = "🙈";
|
||||
} else {
|
||||
passwordField.type = "password";
|
||||
toggleVisibilityBtn.textContent = "👁️";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Use password in form button
|
||||
const usePasswordBtn = document.getElementById("use-password-btn");
|
||||
if (usePasswordBtn) {
|
||||
usePasswordBtn.addEventListener("click", () => {
|
||||
const generatedPassword = document.getElementById("generated-password")?.value;
|
||||
const passwordInput = document.getElementById("password");
|
||||
|
||||
if (generatedPassword && passwordInput) {
|
||||
passwordInput.value = generatedPassword;
|
||||
showPasswordFeedback("Password applied to form!");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Monitor password field for manual changes to update strength
|
||||
if (passwordField) {
|
||||
passwordField.addEventListener("input", () => {
|
||||
updatePasswordStrength(passwordField.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Generate initial password
|
||||
generateRandomPassword();
|
||||
}
|
||||
|
||||
function updateCharsetPreview() {
|
||||
const settings = getPasswordSettings();
|
||||
const preview = document.getElementById("charset-preview");
|
||||
|
||||
if (preview) {
|
||||
if (settings.charset && settings.charset.length > 0) {
|
||||
preview.textContent = `Characters (${settings.charset.length}): ${settings.charset}`;
|
||||
} else {
|
||||
preview.textContent = "⚠️ No character types selected! Please select at least one character type.";
|
||||
preview.style.color = "#ff6b6b";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetPasswordSettings() {
|
||||
// Reset to default values
|
||||
document.getElementById("password-length").value = 16;
|
||||
document.getElementById("password-length-input").value = 16;
|
||||
document.getElementById("include-uppercase").checked = true;
|
||||
document.getElementById("include-lowercase").checked = true;
|
||||
document.getElementById("include-numbers").checked = true;
|
||||
document.getElementById("include-special").checked = true;
|
||||
document.getElementById("exclude-ambiguous").checked = false;
|
||||
document.getElementById("custom-characters").value = "";
|
||||
}
|
||||
|
||||
function showPasswordFeedback(message) {
|
||||
const feedback = document.getElementById("password-copy-feedback");
|
||||
if (feedback) {
|
||||
const originalText = feedback.textContent;
|
||||
feedback.textContent = message;
|
||||
showFeedback(feedback);
|
||||
// Reset feedback text after showing
|
||||
setTimeout(() => {
|
||||
feedback.textContent = originalText;
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(elementId, feedbackId) {
|
||||
const el = document.getElementById(elementId);
|
||||
const feedback = document.getElementById(feedbackId);
|
||||
|
||||
if (!el || !el.value) return;
|
||||
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = el.value;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
textarea.select();
|
||||
textarea.setSelectionRange(0, 99999);
|
||||
|
||||
try {
|
||||
navigator.clipboard.writeText(el.value).then(() => {
|
||||
showFeedback(feedback);
|
||||
}).catch(() => {
|
||||
document.execCommand('copy');
|
||||
showFeedback(feedback);
|
||||
});
|
||||
} catch (err) {
|
||||
document.execCommand('copy');
|
||||
showFeedback(feedback);
|
||||
}
|
||||
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
|
||||
function showFeedback(feedback) {
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
const fields = ["input-text", "output-text", "file-input", "password"];
|
||||
fields.forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.value = "";
|
||||
});
|
||||
removeFile();
|
||||
toggleInputMode();
|
||||
document.getElementById("pacman-section")?.style.setProperty("display", "none");
|
||||
document.getElementById("encoding-section")?.style.setProperty("display", "block");
|
||||
}
|
||||
|
||||
function handleInputChange() {
|
||||
toggleInputMode();
|
||||
checkForPacman();
|
||||
}
|
||||
|
||||
function checkForPacman() {
|
||||
const val = document.getElementById("input-text").value.trim().toLowerCase();
|
||||
const pacSection = document.getElementById("pacman-section");
|
||||
const encSection = document.getElementById("encoding-section");
|
||||
|
||||
if (val.includes("pacman") && pacSection.style.display !== "block") {
|
||||
pacSection.style.display = "block";
|
||||
encSection.style.display = "none";
|
||||
window.startPacman();
|
||||
} else if (pacSection.style.display === "block" && !val.includes("pacman")) {
|
||||
window.exitGame();
|
||||
}
|
||||
}
|
||||
|
||||
function copyShareLink() {
|
||||
const linkEl = document.getElementById("share-link");
|
||||
const feedback = document.getElementById("shared-link-feedback");
|
||||
|
||||
if (!linkEl) return;
|
||||
|
||||
const linkText = linkEl.href || linkEl.textContent.trim();
|
||||
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(linkText).then(() => {
|
||||
showCopyFeedback(feedback);
|
||||
}).catch(() => {
|
||||
fallbackCopy(linkText, feedback);
|
||||
});
|
||||
} else {
|
||||
fallbackCopy(linkText, feedback);
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopy(text, feedbackEl) {
|
||||
const tempInput = document.createElement("input");
|
||||
tempInput.value = text;
|
||||
document.body.appendChild(tempInput);
|
||||
tempInput.select();
|
||||
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
showCopyFeedback(feedbackEl);
|
||||
} catch (err) {
|
||||
alert("Copy failed. Please copy manually.");
|
||||
}
|
||||
|
||||
document.body.removeChild(tempInput);
|
||||
}
|
||||
|
||||
function showCopyFeedback(feedbackEl) {
|
||||
if (!feedbackEl) return;
|
||||
feedbackEl.style.display = "block";
|
||||
feedbackEl.classList.add("show");
|
||||
|
||||
setTimeout(() => {
|
||||
feedbackEl.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedbackEl.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// ===== Algorithm Management =====
|
||||
async function loadAvailableAlgorithms() {
|
||||
try {
|
||||
const response = await fetch('/api/algorithms');
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.algorithms) {
|
||||
// Store algorithms globally for use in other functions
|
||||
window.availableAlgorithms = data.algorithms;
|
||||
updateAlgorithmDropdown(data.algorithms);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load algorithms:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateAlgorithmDropdown(algorithms) {
|
||||
const algorithmSelect = document.getElementById('algorithm');
|
||||
const shareAlgorithmSelect = document.getElementById('share-algorithm');
|
||||
|
||||
// Update main encryption/decryption algorithm dropdown
|
||||
if (algorithmSelect) {
|
||||
algorithmSelect.innerHTML = '';
|
||||
|
||||
let firstOption = null;
|
||||
for (const [key, algo] of Object.entries(algorithms)) {
|
||||
if (algo.supports_text) {
|
||||
const option = document.createElement('option');
|
||||
option.value = key;
|
||||
option.textContent = `${algo.name}${algo.requires_keypair ? ' (requires keypair)' : ''}`;
|
||||
algorithmSelect.appendChild(option);
|
||||
|
||||
// Remember the first option (should be a non-keypair algorithm)
|
||||
if (!firstOption) {
|
||||
firstOption = key;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure the first option is selected
|
||||
if (firstOption) {
|
||||
algorithmSelect.value = firstOption;
|
||||
}
|
||||
}
|
||||
|
||||
// Update PacShare algorithm dropdown (for file uploads)
|
||||
if (shareAlgorithmSelect) {
|
||||
shareAlgorithmSelect.innerHTML = '';
|
||||
|
||||
let firstFileOption = null;
|
||||
for (const [key, algo] of Object.entries(algorithms)) {
|
||||
if (algo.supports_file) {
|
||||
const option = document.createElement('option');
|
||||
option.value = key;
|
||||
option.textContent = `${algo.name}${algo.requires_keypair ? ' (requires keypair)' : ''}`;
|
||||
shareAlgorithmSelect.appendChild(option);
|
||||
|
||||
// Remember the first file-supporting option
|
||||
if (!firstFileOption) {
|
||||
firstFileOption = key;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Set the first file-supporting option as selected
|
||||
if (firstFileOption) {
|
||||
shareAlgorithmSelect.value = firstFileOption;
|
||||
}
|
||||
}
|
||||
|
||||
// Update Key Pairs Management dropdown
|
||||
const keypairAlgorithmSelect = document.getElementById('keypair-algorithm');
|
||||
if (keypairAlgorithmSelect) {
|
||||
// Clear existing options except the hardcoded ones
|
||||
const options = keypairAlgorithmSelect.querySelectorAll('option');
|
||||
options.forEach(option => {
|
||||
if (option.value !== 'rsa_hybrid' && option.value !== 'pqcrypto') {
|
||||
option.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide post-quantum option based on availability
|
||||
const pqOption = document.getElementById('pqcrypto-option');
|
||||
if (pqOption) {
|
||||
pqOption.style.display = algorithms.pqcrypto ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// If rsa_hybrid is not available, hide it
|
||||
const rsaOption = keypairAlgorithmSelect.querySelector('option[value="rsa_hybrid"]');
|
||||
if (rsaOption) {
|
||||
rsaOption.style.display = algorithms.rsa_hybrid ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Call toggleAlgorithmOptions after dropdown is populated
|
||||
toggleAlgorithmOptions();
|
||||
}
|
||||
|
||||
function toggleAlgorithmOptions() {
|
||||
const algorithm = document.getElementById("algorithm")?.value;
|
||||
const keypairSection = document.getElementById("keypair-section");
|
||||
const passwordInput = document.getElementById("password-input");
|
||||
|
||||
if (!algorithm) return;
|
||||
|
||||
// Check if algorithm requires keypair by looking at available algorithms data
|
||||
let requiresKeypair = false;
|
||||
if (window.availableAlgorithms && window.availableAlgorithms[algorithm]) {
|
||||
requiresKeypair = window.availableAlgorithms[algorithm].requires_keypair || false;
|
||||
} else {
|
||||
// Fallback to checking name for "hybrid"
|
||||
requiresKeypair = algorithm.includes("hybrid");
|
||||
}
|
||||
|
||||
// Show/hide keypair section only for algorithms that require it
|
||||
if (keypairSection) {
|
||||
keypairSection.style.display = requiresKeypair ? "block" : "none";
|
||||
}
|
||||
|
||||
// Show/hide password input (opposite of keypair section)
|
||||
if (passwordInput) {
|
||||
passwordInput.style.display = requiresKeypair ? "none" : "block";
|
||||
}
|
||||
|
||||
// Update key status based on global keys
|
||||
const globalKeys = window.getGlobalKeys ? window.getGlobalKeys() : {};
|
||||
const publicStatus = document.getElementById("public-key-status");
|
||||
const privateStatus = document.getElementById("private-key-status");
|
||||
|
||||
if (!requiresKeypair) {
|
||||
if (publicStatus) publicStatus.style.display = "none";
|
||||
if (privateStatus) privateStatus.style.display = "none";
|
||||
} else {
|
||||
// Show key status if keys are loaded in global store
|
||||
if (publicStatus) publicStatus.style.display = globalKeys.publicKey ? "block" : "none";
|
||||
if (privateStatus) privateStatus.style.display = globalKeys.privateKey ? "block" : "none";
|
||||
}
|
||||
}
|
||||
|
||||
// ===== File-based Key Management =====
|
||||
async function generateAndDownloadKeyPair() {
|
||||
const algorithm = document.getElementById("algorithm")?.value;
|
||||
|
||||
let requiresKeypair = false;
|
||||
if (window.availableAlgorithms && window.availableAlgorithms[algorithm]) {
|
||||
requiresKeypair = window.availableAlgorithms[algorithm].requires_keypair || false;
|
||||
} else {
|
||||
requiresKeypair = algorithm.includes("hybrid");
|
||||
}
|
||||
|
||||
if (!algorithm || !requiresKeypair) {
|
||||
alert("Key pair generation is only available for algorithms that require key pairs");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/generate-keypair', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ algorithm: algorithm })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
// Download public key
|
||||
downloadTextAsFile(data.public_key, `${algorithm}_public_key.pub`, 'text/plain');
|
||||
|
||||
// Download private key
|
||||
downloadTextAsFile(data.private_key, `${algorithm}_private_key.key`, 'text/plain');
|
||||
|
||||
alert("✅ Key pair generated and downloaded!\n\n📁 Files saved:\n• Public Key: " + `${algorithm}_public_key.pub` + "\n• Private Key: " + `${algorithm}_private_key.key` + "\n\n🔐 Use public key for encryption, private key for decryption.");
|
||||
} else {
|
||||
alert(`Error generating key pair: ${data.error}`);
|
||||
}
|
||||
} catch (error) {
|
||||
alert(`Error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function downloadTextAsFile(text, filename, mimeType) {
|
||||
const blob = new Blob([text], { type: mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function handlePublicKeyLoad(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
// Update global keys instead of window variables
|
||||
if (window.setGlobalKeys) {
|
||||
window.setGlobalKeys({ publicKey: e.target.result });
|
||||
}
|
||||
document.getElementById("public-key-status").style.display = "block";
|
||||
console.log("Public key loaded successfully and synced to global store");
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function handlePrivateKeyLoad(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
// Update global keys instead of window variables
|
||||
if (window.setGlobalKeys) {
|
||||
window.setGlobalKeys({ privateKey: e.target.result });
|
||||
}
|
||||
document.getElementById("private-key-status").style.display = "block";
|
||||
console.log("Private key loaded successfully and synced to global store");
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function startPacman() { }
|
||||
function exitGame() { }
|
||||
Reference in New Issue
Block a user