AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

app/components/Login.tsx

@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from 'react';
+import {
+  createAccount,
+  checkCredentials,
+} from '../backend/database';
 import Settings from './Settings'; // Import the Settings component
 
 const Login: React.FC = () => {
-  
   // State to handle popup visibility
   const [showLoginPopup, setShowLoginPopup] = useState(false);
   const [showSignUpPopup, setShowSignUpPopup] = useState(false);
@@ -28,7 +31,11 @@ const Login: React.FC = () => {
       setAccountName(savedAccountName);
       setEmail(savedAccountEmail);
       setPassword(savedAccountPassword);
-      setIsLoggedIn(true); // Automatically log in
+      const check = async () => {
+        const success = await checkCredentials(savedAccountName, savedAccountPassword);
+        setIsLoggedIn(success); // Automatically log in
+      };
+      check();
     }
   }, []);
 
@@ -42,33 +49,40 @@ const Login: React.FC = () => {
   };
 
   // Function to handle login
-  const handleLogin = () => {
+  const handleLogin = async () => {
     const savedAccountEmail = localStorage.getItem('accountEmail');
     const savedAccountPassword = localStorage.getItem('accountPassword');
     const savedAccountName = localStorage.getItem('accountName');
 
-    if (
-      (email === savedAccountEmail || accountName === savedAccountName) &&
-      password === savedAccountPassword
-    ) {
-      setIsLoggedIn(true); // Successful login
-      setShowLoginPopup(false); // Close the login popup
-      // Save credentials to localStorage (optional in case of changes)
-      localStorage.setItem('accountName', savedAccountName || accountName);
-      localStorage.setItem('accountEmail', savedAccountEmail || email);
-      localStorage.setItem('accountPassword', savedAccountPassword || password);
+    // Check if savedAccountName or savedAccountEmail is not null before passing to checkCredentials
+    const accountIdentifier = savedAccountName || savedAccountEmail;
+
+    if (accountIdentifier && password === savedAccountPassword) {
+      const success = await checkCredentials(accountIdentifier, password);
+      if (success) {
+        setIsLoggedIn(true); // Successful login
+        setShowLoginPopup(false); // Close the login popup
+        // Save credentials to localStorage (optional in case of changes)
+        localStorage.setItem('accountName', savedAccountName || accountName);
+        localStorage.setItem('accountEmail', savedAccountEmail || email);
+        localStorage.setItem('accountPassword', savedAccountPassword || password);
+      } else {
+        alert('Incorrect credentials');
+      }
     } else {
       alert('Incorrect credentials');
     }
   };
 
   // Function to handle account creation
-  const handleCreateAccount = () => {
-    localStorage.setItem('accountName', newAccountName);
-    localStorage.setItem('accountEmail', newAccountEmail);
-    localStorage.setItem('accountPassword', newAccountPassword);
-    alert('Account created successfully! You can now log in.');
-    toggleSignUpPopup(); // Close sign-up popup
+  const handleCreateAccount = async () => {
+    const success = await createAccount(newAccountName, newAccountEmail, newAccountPassword);
+    if (success) {
+      alert('Account created successfully! You can now log in.');
+      toggleSignUpPopup(); // Close sign-up popup
+    } else {
+      alert('Account creation failed. Please try again.');
+    }
   };
 
   // Function to toggle the settings popup

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>