I have immense pain in the left temple.

app/components/Login.tsx

@@ -5,6 +5,7 @@ import {
   getSettings
 } from '../backend/database';
 import Settings from './settings/Settings'; // Import the Settings component
+import { importDatabase } from './settings/settingUtils';
 
 const Login: React.FC = () => {
   // State to handle popup visibility
@@ -23,9 +24,9 @@ const Login: React.FC = () => {
 
   // On component mount, check if there are credentials in localStorage
   useEffect(() => {
-    let savedAccountName:string|null;
+    let savedAccountName: string | null;
-    let savedAccountEmail:string|null;
+    let savedAccountEmail: string | null;
-    let savedAccountPassword:string|null;
+    let savedAccountPassword: string | null;
     if (typeof localStorage !== 'undefined') {
       savedAccountName = localStorage.getItem('accountName');
       savedAccountEmail = localStorage.getItem('accountEmail');
@@ -40,6 +41,14 @@ const Login: React.FC = () => {
           if (savedAccountName !== null && savedAccountPassword !== null) {
             const success = await checkCredentials(savedAccountName, savedAccountPassword);
             setIsLoggedIn(success); // Automatically log in
+            const useName = localStorage.getItem("accountName");
+            const usePassword = localStorage.getItem("accountPassword");
+
+            if (useName && usePassword) {
+              await importDatabase(useName, usePassword);
+            }
+
+
           }
         };
         check();
@@ -69,6 +78,14 @@ const Login: React.FC = () => {
           }
         }
         setShowLoginPopup(false); // Close the login popup
+        const useName = localStorage.getItem("accountName");
+        const usePassword = localStorage.getItem("accountPassword");
+
+        if (useName && usePassword) {
+          await importDatabase(useName, usePassword);
+        }
+
+        window.location.reload();
       } else {
         alert('Incorrect credentials');
       }

app/components/settings/Settings.tsx

@@ -1,7 +1,7 @@
 //#region imports
 import React, { useState, useEffect } from 'react';
 import { applyTheme } from './theme';
-import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
+import { exportSettings, importSettings, sendToDatabase, importDatabase } from './settingUtils'; // Import utility functions
 import { getAllLocalStorageItems } from '../../backend/GetLocalStorage';
 import ColorSetting from './ColorSettings';
 import TextSettings from './TextSettings'
@@ -15,8 +15,6 @@ import {
   changeSettings,
   createAccount,
   deleteAccount,
-  getSettings,
-  sendToDatabase
 } from '../../backend/database';
 import ThemeDropdown from './DropDownTheme';
 
@@ -314,27 +312,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     }
   }, []); // Runs only once when the component mounts
 
-  const importDatabase = async (useName: string, usePassword: string) => {
-    const databaseSettings = await getSettings(useName, usePassword);
-
-    // Ensure user settings exist before flattening and storing
-    if (typeof databaseSettings == 'object' && databaseSettings) {
-      JSON.stringify(importSettings(databaseSettings), null, 2); // Pass only the current user's settings
-    } else {
-      console.error('Database settings are not in the expected format.');
-    }
-  }
-
-  const sendToDatabase = async () => {
-    let useName = localStorage.getItem("accountName")
-    let usePassword = localStorage.getItem("accountPassword")
-    if (useName && usePassword) {
-        if (await changeSettings(useName, usePassword, JSON.parse(exportSettings()))) {
-          alert('Data has been transferred')
-        }
-    }
-  };
-
   // Effect hooks to update localStorage whenever any state changes
   useEffect(() => {
     // Flatten nested objects
@@ -593,7 +570,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             )}
           </div>
         );
-        //#region custom --> foss
+      //#region custom --> foss
       case 'foss':
         return (
           <div className="settings-section">
@@ -606,7 +583,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           </div>
         );
 
-        //#region account
+      //#region account
       case 'account':
         return (
           <div className="settings-section">
@@ -649,7 +626,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             />
           </div>
         );
-        //#region api
+      //#region api
       case 'api':
         return (
           <div className="settings-section">
@@ -703,7 +680,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             </div>
           </div>
         );
-        //#region import export
+      //#region import export
       case 'im/export':
         return (
           <div className="settings-section">
@@ -759,52 +736,51 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   //#region overall export
   return (
     <div className="popup-overlay">
-        <div className="settings-content">
+      <div className="settings-content">
-            <div className="settings-container">
+        <div className="settings-container">
-                {/* Sidebar for desktop */}
+          {/* Sidebar for desktop */}
-                <div className="sidebar">
+          <div className="sidebar">
-                    <ul>
+            <ul>
-                        <li onClick={() => setActiveSection('general')}>General</li>
+              <li onClick={() => setActiveSection('general')}>General</li>
-                        <li onClick={() => setActiveSection('privacy')}>Privacy</li>
+              <li onClick={() => setActiveSection('privacy')}>Privacy</li>
-                        <li onClick={() => setActiveSection('theme')}>Theme</li>
+              <li onClick={() => setActiveSection('theme')}>Theme</li>
-                        <li onClick={() => setActiveSection('foss')}>FOSS</li>
+              <li onClick={() => setActiveSection('foss')}>FOSS</li>
-                        <li onClick={() => setActiveSection('account')}>Account</li>
+              <li onClick={() => setActiveSection('account')}>Account</li>
-                        <li onClick={() => setActiveSection('api')}>API Keys</li>
+              <li onClick={() => setActiveSection('api')}>API Keys</li>
-                        <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
+              <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
-                    </ul>
+            </ul>
-                </div>
+          </div>
 
-                <div className="settings-main">
+          <div className="settings-main">
-                    {/* Dropdown for selections in responsive mode */}
+            {/* Dropdown for selections in responsive mode */}
-                    <div className="settings-option dropdown">
+            <div className="settings-option dropdown">
-                      <div className="dropdown-header"><h2>Select a Setting</h2></div>
+              <div className="dropdown-header"><h2>Select a Setting</h2></div>
-                      <select onChange={(e) => setActiveSection(e.target.value)} value={activeSection}>
+              <select onChange={(e) => setActiveSection(e.target.value)} value={activeSection}>
-                          <option value="general">General</option>
+                <option value="general">General</option>
-                          <option value="privacy">Privacy</option>
+                <option value="privacy">Privacy</option>
-                          <option value="theme">Theme</option>
+                <option value="theme">Theme</option>
-                          <option value="foss">FOSS</option>
+                <option value="foss">FOSS</option>
-                          <option value="account">Account</option>
+                <option value="account">Account</option>
-                          <option value="api">API Keys</option>
+                <option value="api">API Keys</option>
-                          <option value="im/export">Import/Export</option>
+                <option value="im/export">Import/Export</option>
-                      </select>
+              </select>
-                    </div>
-                    <h2>Settings for {accountName}</h2>
-                    {renderSettingsContent()}
-                    <button className="close-popup" onClick={closeSettings}>Close</button>
-                    <button className="apply" onClick={async () => {
-                      getAllLocalStorageItems();
-                      closeSettings();
-                      sendToDatabase();
-                      window.location.reload();
-                    }}>
-                      Apply
-                    </button>
-
-                </div>
             </div>
+            <h2>Settings for {accountName}</h2>
+            {renderSettingsContent()}
+            <button className="close-popup" onClick={closeSettings}>Close</button>
+            <button className="apply" onClick={async () => {
+              getAllLocalStorageItems();
+              closeSettings();
+              sendToDatabase();
+            }}>
+              Apply
+            </button>
+
+          </div>
         </div>
+      </div>
     </div>
-);
+  );
 };
 
 

app/components/settings/settingUtils.ts

@@ -1,4 +1,5 @@
 // settingsManager.ts
+import { changeSettings, getSettings } from "@/app/backend/database";
 
 // Method to export localStorage to a JSON object
 export function exportSettings(): string {
@@ -37,3 +38,27 @@ export function importSettings(jsonData: string): void {
         console.error("Invalid JSON data:", error);
     }
 }
+
+export const sendToDatabase = async () => {
+    let useName = localStorage.getItem("accountName")
+    let usePassword = localStorage.getItem("accountPassword")
+    if (useName && usePassword) {
+        let result = await changeSettings(useName, usePassword, JSON.parse(exportSettings()))
+        if (result == true) {
+            alert('Data has been transferred')
+            window.location.reload();
+        }
+    }
+    window.location.reload();
+};
+
+export const importDatabase = async (useName: string, usePassword: string) => {
+    const databaseSettings = await getSettings(useName, usePassword);
+
+    // Ensure user settings exist before flattening and storing
+    if (typeof databaseSettings == 'object' && databaseSettings) {
+        importSettings(JSON.stringify(databaseSettings, null, 2)); // Pass only the current user's settings
+    } else {
+        console.error('Database settings are not in the expected format.');
+    }
+}