AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

app/backend/database.ts

@@ -7,23 +7,90 @@ data should be the json containing everything relevant, the json can contain the
 
 action -> contains the action you want to do, there are: create_account, change_password, get_data, change_data, check_credentials, delete_account
 username -> contains the current username, required for create_account, but can be omitted in favor of email in other requests. Preffered over email authentication.
-email -> contains the current email, required for create_account, but just like the username, it can be ommitted, in favor of the other, sending both is possible too.
+email -> contains the current email, required for create_account, but just like the username, it can be omitted, in favor of the other, sending both is possible too.
 password -> contains the password, required for all requests.
 new_password -> in the case you are changing your password, you will need to use this in addition to password, to specify the new password.
-data -> data contains all the data you want to store, you have to always give the entire data, because the data you give here overwrites the data in the database, so if you only give the chat history for example, all settings will be deleted, and if you only give settings, all chat histories will get deleted.
+data -> data contains all the data you want to store, you have to always give the entire data, because the data you give here overwrites the data in the database, 
+so if you only give the chat history for example, all settings will be deleted, and if you only give settings, all chat histories will get deleted.
 
 
 if all went well, you will get the status 200 in response.data.status
 to check if the request was accepted or declined, check response.data.response, it will be either true or false depending on if it worked, or not.
 */
 
-const sendToDatabase = (data: any) => {
+export const sendToDatabase = (data: any): Promise<boolean> => {
-    axios.post("http://localhost:5000/interstellar_ai/db", data)
+  return axios.post("http://localhost:5000/interstellar_ai/db", data)
     .then(response => {
-            const status = response.data.status
+      const status = response.data.status;
-            postMessage({ status })
+      const success = response.data.response;
+      postMessage({ status, success });
+      return success;  // Ensure success is returned to the caller
     })
     .catch(error => {
-            postMessage({ status: 500 })
+      postMessage({ status: 500, success: false });
-        })
+      return false;  // Return false in case of an error
-}
+    });
+};
+
+// Functions for each action
+export const createAccount = async (username: string, email: string, password: string) => {
+  const data = {
+    action: "create_account",
+    username,
+    email,
+    password,
+  };
+  return await sendToDatabase(data);
+};
+
+export const changePassword = async (usernameOrEmail: string, password: string, newPassword: string) => {
+  const data = {
+    action: "change_password",
+    username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
+    email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
+    password,
+    new_password: newPassword,
+  };
+  return await sendToDatabase(data);
+};
+
+export const getData = async (usernameOrEmail: string, password: string) => {
+  const data = {
+    action: "get_data",
+    username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
+    email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
+    password,
+  };
+  return await sendToDatabase(data);
+};
+
+export const changeData = async (usernameOrEmail: string, password: string, newData: any) => {
+  const data = {
+    action: "change_data",
+    username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
+    email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
+    password,
+    data: newData,
+  };
+  return await sendToDatabase(data);
+};
+
+export const checkCredentials = async (usernameOrEmail: string, password: string) => {
+  const data = {
+    action: "check_credentials",
+    username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
+    email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
+    password,
+  };
+  return await sendToDatabase(data);
+};
+
+export const deleteAccount = async (usernameOrEmail: string, password: string) => {
+  const data = {
+    action: "delete_account",
+    username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
+    email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
+    password,
+  };
+  return await sendToDatabase(data);
+};

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,15 +49,17 @@ 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 (
+    // Check if savedAccountName or savedAccountEmail is not null before passing to checkCredentials
-      (email === savedAccountEmail || accountName === savedAccountName) &&
+    const accountIdentifier = savedAccountName || savedAccountEmail;
-      password === savedAccountPassword
+
-    ) {
+    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)
@@ -60,15 +69,20 @@ const Login: React.FC = () => {
       } else {
         alert('Incorrect credentials');
       }
+    } else {
+      alert('Incorrect credentials');
+    }
   };
 
   // Function to handle account creation
-  const handleCreateAccount = () => {
+  const handleCreateAccount = async () => {
-    localStorage.setItem('accountName', newAccountName);
+    const success = await createAccount(newAccountName, newAccountEmail, newAccountPassword);
-    localStorage.setItem('accountEmail', newAccountEmail);
+    if (success) {
-    localStorage.setItem('accountPassword', newAccountPassword);
       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
@@ -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={() => {
+                onClick={handleUpdateCredentials} // Update all credentials
-                  handleLogout();
+                className="update-credentials-button"
-                  closeSettings(); // Optionally close settings after logout
-                }}
-                className="logout-button"
               >
-                Logout
+                Update Credentials
+              </button>
+            </div>
+            <div className="settings-option">
+              <button
+                onClick={handleDeleteAccount} // Delete account
+                className="delete-account-button"
+              >
+                Delete Account
               </button>
             </div>
           </div>