Add 2 files

index.html

@@ -482,21 +482,54 @@
         }
 
         // Handle login form submission
-        document.getElementById('login-form').addEventListener('submit', function(e) {
+        document.getElementById('login-form').addEventListener('submit', async function(e) {
             e.preventDefault();
             
-            // In a real app, you would validate and send to server
-            // For demo purposes, we'll just show the dashboard
-            showPage('dashboard');
+            const email = document.getElementById('login-email').value;
+            const password = document.getElementById('login-password').value;
+            
+            try {
+                const response = await fetch('/api/auth/login', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ email, password })
+                });
+                
+                const data = await response.json();
+                
+                if (response.ok) {
+                    // Store the token in localStorage
+                    localStorage.setItem('token', data.token);
+                    localStorage.setItem('userName', data.name);
+                    
+                    // Show dashboard
+                    showPage('dashboard');
+                    
+                    // Update welcome message
+                    const welcomeMessage = document.querySelector('#dashboard-page .text-2xl');
+                    if (welcomeMessage) {
+                        welcomeMessage.textContent = `Welcome back, ${data.name}!`;
+                    }
+                } else {
+                    alert(data.message || 'Login failed');
+                }
+            } catch (error) {
+                console.error('Login error:', error);
+                alert('An error occurred during login');
+            }
             
             // Clear form
             this.reset();
         });
 
         // Handle signup form submission
-        document.getElementById('signup-form').addEventListener('submit', function(e) {
+        document.getElementById('signup-form').addEventListener('submit', async function(e) {
             e.preventDefault();
             
+            const name = document.getElementById('signup-name').value;
+            const email = document.getElementById('signup-email').value;
             const password = document.getElementById('signup-password').value;
             const confirmPassword = document.getElementById('signup-confirm-password').value;
             
@@ -505,19 +538,58 @@
                 return;
             }
             
-            // In a real app, you would send to server
-            // For demo, we'll show success message and redirect to login
-            alert('Account created successfully! Please login.');
-            showPage('login');
+            try {
+                const response = await fetch('/api/auth/signup', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ name, email, password })
+                });
+                
+                const data = await response.json();
+                
+                if (response.ok) {
+                    alert('Account created successfully! Please login.');
+                    showPage('login');
+                } else {
+                    alert(data.message || 'Signup failed');
+                }
+            } catch (error) {
+                console.error('Signup error:', error);
+                alert('An error occurred during signup');
+            }
             
             // Clear form
             this.reset();
         });
 
+        // Check if user is logged in on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            const token = localStorage.getItem('token');
+            const userName = localStorage.getItem('userName');
+            
+            if (token && userName) {
+                // Show dashboard
+                showPage('dashboard');
+                
+                // Update welcome message
+                const welcomeMessage = document.querySelector('#dashboard-page .text-2xl');
+                if (welcomeMessage) {
+                    welcomeMessage.textContent = `Welcome back, ${userName}!`;
+                }
+            } else {
+                showPage('home');
+            }
+        });
+
         // Logout function
         function logout() {
-            // In a real app, you would clear session/token
-            // For demo, just go back to home
+            // Clear localStorage
+            localStorage.removeItem('token');
+            localStorage.removeItem('userName');
+            
+            // Go back to home
             showPage('home');
         }
 
@@ -716,96 +788,5 @@
                                                 <td class="px-4 py-2">Steam Client</td>
                                                 <td class="px-4 py-2">High</td>
                                                 <td class="px-4 py-2">Enabled</td>
-                                                <td class="px-4 py-2"><button class="text-indigo-600 hover:text-indigo-800 text-xs">Disable</button></td>
-                                            </tr>
-                                            <tr>
-                                                <td class="px-4 py-2">Adobe Updater</td>
-                                                <td class="px-4 py-2">Low</td>
-                                                <td class="px-4 py-2">Disabled</td>
-                                                <td class="px-4 py-2"><button class="text-indigo-600 hover:text-indigo-800 text-xs">Enable</button></td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                            </div>
-                            <div class="bg-blue-50 p-3 rounded-lg text-sm text-blue-700">
-                                <i class="fas fa-lightbulb mr-2"></i> Disabling unnecessary startup programs can help your computer boot faster.
-                            </div>
-                        `;
-                        break;
-                        
-                    case 'duplicateFiles':
-                        resultHtml = `
-                            <div class="p-4 bg-green-50 rounded-lg mb-4">
-                                <div class="flex items-center text-green-600 mb-2">
-                                    <i class="fas fa-check-circle mr-2"></i>
-                                    <h4 class="font-semibold">Duplicate Files Scan Complete</h4>
-                                </div>
-                                <p class="text-sm text-gray-700 mb-3">Found 3 sets of duplicate files taking up 450MB of space:</p>
-                                <div class="border rounded-lg overflow-hidden">
-                                    <table class="min-w-full text-sm">
-                                        <thead class="bg-gray-50">
-                                            <tr>
-                                                <th class="px-4 py-2 text-left">File</th>
-                                                <th class="px-4 py-2 text-left">Size</th>
-                                                <th class="px-4 py-2 text-left">Copies</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody class="divide-y divide-gray-200">
-                                            <tr>
-                                                <td class="px-4 py-2">vacation.jpg</td>
-                                                <td class="px-4 py-2">3.2MB</td>
-                                                <td class="px-4 py-2">2 copies</td>
-                                            </tr>
-                                            <tr>
-                                                <td class="px-4 py-2">report.docx</td>
-                                                <td class="px-4 py-2">1.5MB</td>
-                                                <td class="px-4 py-2">3 copies</td>
-                                            </tr>
-                                            <tr>
-                                                <td class="px-4 py-2">presentation.pptx</td>
-                                                <td class="px-4 py-2">12.4MB</td>
-                                                <td class="px-4 py-2">2 copies</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
-                                </div>
-                                <div class="mt-3">
-                                    <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 smooth-transition">
-                                        <i class="fas fa-trash-alt mr-2"></i> Delete Selected Duplicates
-                                    </button>
-                                </div>
-                            </div>
-                        `;
-                        break;
-                        
-                    case 'backupReminder':
-                        resultHtml = `
-                            <div class="p-4 bg-green-50 rounded-lg">
-                                <div class="flex items-center text-green-600 mb-2">
-                                    <i class="fas fa-check-circle mr-2"></i>
-                                    <h4 class="font-semibold">Backup Reminder Set</h4>
-                                </div>
-                                <p class="text-sm text-gray-700 mb-3">You'll be reminded to back up your Documents folder every 7 days.</p>
-                                <div class="bg-blue-50 p-3 rounded-lg text-sm text-blue-700">
-                                    <i class="fas fa-lightbulb mr-2"></i> Consider using cloud storage or an external drive for backups.
-                                </div>
-                            </div>
-                        `;
-                        break;
-                }
-                
-                resultsContent.innerHTML = resultHtml;
-            }, 1500);
-        }
-
-        // Close results panel
-        function closeResults() {
-            document.getElementById('results-panel').classList.add('hidden');
-        }
-
-        // Initialize - show home page
-        showPage('home');
-    </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mitznjay/tech-maintenance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+                                                <td class="px-4 py-2"><button class="text-indigo-600 hover:text-indigo-800 text-xs">Disable
 </html>

prompts.txt

@@ -1,3 +1 @@
-Build a web-based application called 'Tech PC Maintenance Center'. This will be a beginner-friendly portal where users can log in to access simple computer maintenance tools.  For now, focus only on building:  A homepage with a simple introduction  A signup page (create account)  A login page (login to existing account)  A simple user dashboard after login (can just say 'Welcome to Tech PC Maintenance Center').  Make it mobile-friendly and clean. Use plain HTML/CSS/JS or a simple framework if necessary, but no heavy backend features yet. I will add the tools later.
-Now add a full basic PC maintenance dashboard to the logged-in user's home screen. The dashboard should include easy-to-understand buttons for the following actions:  Clean Temporary Files (cleans temp folder safely)  Delete Browser Cache (option for Chrome, Firefox, Edge)  Check Disk Space (shows how much free space is left)  Organize Downloads Folder (group files by type: Documents, Images, Videos)  Scan for Large Files (identify files over 500MB and list them)  Startup Program Manager (list startup programs with the option to disable)  Duplicate File Finder (scan selected folder for duplicate files)  Simple Backup Reminder (button that reminds user to back up Documents folder)  For now, actions can show a success message or simulate the process safely.  Create a clean, easy-to-use layout:  Use big friendly buttons for each function  Add short descriptions under each button  Organize tools into sections if possible (e.g., Cleaning, Organizing, Managing)  The goal is to make this beginner-friendly, mobile-friendly, and safe — no dangerous actions or destructive file deletion without confirmation.
-Upgrade the 'Tech PC Maintenance Center' app.  Keep the same design and frontend layout, but now add real functionality:  Create a working signup system (store users in a simple database — email, name, password).  Create a working login system (validate credentials, redirect to dashboard).  Make passwords securely hashed (use a basic hashing method).  Use a lightweight backend like Node.js + Express + SQLite database (or any simple server + database combination).  Keep everything beginner-friendly, safe, and ready for hosting.  Important:  Maintain mobile responsiveness.  Keep fake tool actions (PC Maintenance buttons) simulated for now — no real PC changes yet.  I want full downloadable project files (frontend + backend)
+Add real signup and login functionality to Tech PC Maintenance Center. Save user emails, names, and hashed passwords in a SQLite database. Use Node.js and Express for the backend. After login, redirect users to the dashboard. Keep the frontend design the same. The maintenance tools can stay simulated for now.