Initial commit

js/main.js

@@ -0,0 +1,171 @@
+let apiKey = localStorage.getItem('apiKey');
+
+function updateUI() {
+    const hasKey = !!apiKey;
+    document.getElementById('noKeySection').classList.toggle('hidden', hasKey);
+    document.getElementById('hasKeySection').classList.toggle('hidden', !hasKey);
+    document.getElementById('uploadSection').classList.toggle('hidden', !hasKey);
+    document.getElementById('filesSection').classList.toggle('hidden', !hasKey);
+
+    if (hasKey) {
+        document.getElementById('apiKeyDisplay').textContent = apiKey;
+        loadFiles();
+    }
+}
+
+async function generateKey() {
+    const messageDiv = document.getElementById('authMessage');
+    try {
+        const response = await fetch('/add-user', {
+            method: 'POST'
+        });
+        const result = await response.json();
+
+        if (response.ok) {
+            apiKey = result.api_key;
+            localStorage.setItem('apiKey', apiKey);
+            messageDiv.innerHTML = '<div class="message success">API key generated successfully!</div>';
+            updateUI();
+        } else {
+            messageDiv.innerHTML = `<div class="message error">${result.detail}</div>`;
+        }
+    } catch (error) {
+        messageDiv.innerHTML = '<div class="message error">Failed to generate key</div>';
+    }
+}
+
+function useExistingKey() {
+    const key = document.getElementById('existingKey').value.trim();
+    const messageDiv = document.getElementById('authMessage');
+
+    if (!key) {
+        messageDiv.innerHTML = '<div class="message error">Please enter an API key</div>';
+        return;
+    }
+
+    apiKey = key;
+    localStorage.setItem('apiKey', apiKey);
+    messageDiv.innerHTML = '<div class="message success">API key set!</div>';
+    document.getElementById('existingKey').value = '';
+    updateUI();
+}
+
+function clearKey() {
+    apiKey = null;
+    localStorage.removeItem('apiKey');
+    document.getElementById('authMessage').innerHTML = '';
+    updateUI();
+}
+
+async function uploadFiles() {
+    const input = document.getElementById('fileInput');
+    const files = input.files;
+    const messageDiv = document.getElementById('uploadMessage');
+
+    if (files.length === 0) {
+        messageDiv.innerHTML = '<div class="message error">Please select files</div>';
+        return;
+    }
+
+    const formData = new FormData();
+    for (let file of files) {
+        formData.append('files', file);
+    }
+
+    try {
+        const response = await fetch('/upload', {
+            method: 'POST',
+            headers: {
+                'X-API-Key': apiKey
+            },
+            body: formData
+        });
+        const result = await response.json();
+
+        if (response.ok) {
+            messageDiv.innerHTML = '<div class="message success">Files uploaded successfully!</div>';
+            input.value = '';
+            loadFiles();
+        } else {
+            messageDiv.innerHTML = `<div class="message error">${result.detail}</div>`;
+        }
+    } catch (error) {
+        messageDiv.innerHTML = '<div class="message error">Upload failed</div>';
+    }
+}
+
+async function loadFiles() {
+    if (!apiKey) return;
+
+    try {
+        const response = await fetch('/files', {
+            headers: {
+                'X-API-Key': apiKey
+            }
+        });
+        const files = await response.json();
+        const fileList = document.getElementById('fileList');
+
+        if (response.status === 401) {
+            document.getElementById('authMessage').innerHTML = '<div class="message error">Invalid API key</div>';
+            clearKey();
+            return;
+        }
+
+        if (files.length === 0) {
+            fileList.innerHTML = '<li>No files available</li>';
+            return;
+        }
+
+        fileList.innerHTML = files.map(file => `
+            <li class="file-item">
+                <div>
+                    <div><strong>${file.original_name}</strong> (${formatBytes(file.size)})&nbsp;<a href="/dn/${file.file_id}">Direct link to file</a></div>
+                    <div class="file-date">Uploaded: ${new Date(file.uploaded_at).toLocaleString()}</div>
+                </div>
+                <div>
+                    <button onclick="downloadFile('${file.file_id}', '${file.original_name}')">Download</button>
+                    <button onclick="deleteFile('${file.file_id}')" style="background: #dc3545;">Delete</button>
+                </div>
+            </li>
+        `).join('');
+    } catch (error) {
+        console.error('Failed to load files:', error);
+    }
+}
+
+async function downloadFile(fileId, filename) {
+    window.location.href = `/download/${fileId}?api_key=${apiKey}`;
+}
+
+async function deleteFile(fileId) {
+    if (!confirm('Are you sure you want to delete this file?')) return;
+
+    try {
+        const response = await fetch(`/files/${fileId}`, {
+            method: 'DELETE',
+            headers: {
+                'X-API-Key': apiKey
+            }
+        });
+
+        if (response.ok) {
+            loadFiles();
+        } else {
+            alert('Failed to delete file');
+        }
+    } catch (error) {
+        alert('Failed to delete file');
+    }
+}
+
+function formatBytes(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 Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+}
+
+// Initialize UI
+updateUI();