AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

app/components/Settings.tsx

@@ -2,6 +2,15 @@ import React, { useState, useEffect } from 'react';
 import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme';
 import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
 import { getAllLocalStorageItems } from '../backend/GetLocalStorage';
+import {
+  sendToDatabase,
+  createAccount,
+  changePassword,
+  getData,
+  changeData,
+  checkCredentials,
+  deleteAccount,
+} from '../backend/database';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
 
@@ -50,6 +59,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
     const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
     const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');
+    const [currentPassword, setCurrentPassword] = useState('');
 
     // Measurement setting
     const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');
@@ -306,7 +316,41 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     }  
   };
 
+    // Function to handle updating all credentials
+    const handleUpdateCredentials = async () => {
+      // Update account information
+      const newData = {
+        name: newName || accountName, // Keep old name if new name is not provided
+        email: newEmail || '', // Optionally use empty string if not provided
+      };
   
+      // First change the data
+      const dataSuccess = await changeData(accountName, currentPassword, newData);
+      
+      // Then change the password if a new password is provided
+      const passwordSuccess = newPassword ? 
+        await changePassword(accountName, currentPassword, newPassword) : 
+        true; // If no new password, treat as success
+  
+      if (dataSuccess && passwordSuccess) {
+        alert('Credentials updated successfully!');
+        closeSettings(); // Close settings after updating
+      } else {
+        alert('Failed to update credentials. Please check your current password.');
+      }
+    };
+  
+    // Function to handle account deletion
+    const handleDeleteAccount = async () => {
+      const success = await deleteAccount(accountName, currentPassword);
+      if (success) {
+        alert('Account deleted successfully!');
+        closeSettings(); // Close settings after deletion
+        // Optionally, redirect or reset state here
+      } else {
+        alert('Account deletion failed. Please check your password.');
+      }
+    };
 
 
   // Render settings content based on the active section
@@ -832,9 +876,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             );
           
 
-      case 'account':
-        return (
-          <div className="settings-section">
+        case 'account':
+          return (
+            <div className="settings-section">
             <h2>Account Settings</h2>
             <div className="settings-option">
               <label>New Name</label>
@@ -860,15 +904,28 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 onChange={(e) => setNewPassword(e.target.value)}
               />
             </div>
+            <div className="settings-option">
+              <label>Current Password</label>
+              <input
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+              />
+            </div>
             <div className="settings-option">
               <button
-                onClick={() => {
-                  handleLogout();
-                  closeSettings(); // Optionally close settings after logout
-                }}
-                className="logout-button"
+                onClick={handleUpdateCredentials} // Update all credentials
+                className="update-credentials-button"
               >
-                Logout
+                Update Credentials
+              </button>
+            </div>
+            <div className="settings-option">
+              <button
+                onClick={handleDeleteAccount} // Delete account
+                className="delete-account-button"
+              >
+                Delete Account
               </button>
             </div>
           </div>