diff --git a/app/backend/database.ts b/app/backend/database.ts index 78d7307..d05cc17 100644 --- a/app/backend/database.ts +++ b/app/backend/database.ts @@ -31,6 +31,19 @@ export const sendToDatabase = async (data: any): Promise => { } }; +export const sendToDatabaseAndGetString = async (data: any): Promise => { + try { + const response = await axios.post("http://localhost:5000/interstellar_ai/db", data); + const status = response.data.status; + const success = response.data.response; + postMessage({ status, success }); + return success; + } catch (error) { + postMessage({ status: 500, success: false }); + return "false"; + } +}; + // Functions for each action export const createAccount = async (username: string, email: string, password: string) => { const data = { @@ -60,7 +73,27 @@ export const getData = async (usernameOrEmail: string, password: string) => { email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined, password, }; - return await sendToDatabase(data); + return await sendToDatabaseAndGetString(data); +}; + +export const getEmail = async (usernameOrEmail: string, password: string): Promise => { + const data = { + action: "get_email", + username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail, + email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined, + password, + }; + return await sendToDatabaseAndGetString(data); +}; + +export const getName = async (usernameOrEmail: string, password: string): Promise => { + const data = { + action: "get_name", + username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail, + email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined, + password, + }; + return await sendToDatabaseAndGetString(data); }; export const changeData = async (usernameOrEmail: string, password: string, newData: any) => { @@ -81,7 +114,13 @@ export const checkCredentials = async (usernameOrEmail: string, password: string email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined, password, }; - return await sendToDatabase(data); + var sendBack = await sendToDatabase(data); + if (sendBack) { + localStorage.setItem("accountEmail", await getEmail(usernameOrEmail, password)) + localStorage.setItem("accountName", await getName(usernameOrEmail, password)) + localStorage.setItem("accountPassword", password) + } + return sendBack }; export const deleteAccount = async (usernameOrEmail: string, password: string) => { diff --git a/app/components/Login.tsx b/app/components/Login.tsx index 300ed66..e2e8c32 100644 --- a/app/components/Login.tsx +++ b/app/components/Login.tsx @@ -50,25 +50,11 @@ const Login: React.FC = () => { // Function to handle login const handleLogin = async () => { - const savedAccountEmail = localStorage.getItem('accountEmail'); - const savedAccountPassword = localStorage.getItem('accountPassword'); - const savedAccountName = localStorage.getItem('accountName'); - - // Check if savedAccountName or savedAccountEmail is not null before passing to checkCredentials - var accountIdentifier = savedAccountName || savedAccountEmail; - if (!accountIdentifier) { - accountIdentifier = accountName - } - - if (accountIdentifier && password) { - const success = await checkCredentials(accountIdentifier, password); + if (accountName && password) { + const success = await checkCredentials(accountName, 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'); } diff --git a/app/components/settings/PrivacySettings.tsx b/app/components/settings/PrivacySettings.tsx index d7ff28e..e9cab20 100644 --- a/app/components/settings/PrivacySettings.tsx +++ b/app/components/settings/PrivacySettings.tsx @@ -37,11 +37,8 @@ const PrivacySettings: React.FC = ({ selectedOption, handl > None{openSourceMode ? ' (FOSS)' : ''} - +
-

- After changing the preferred settings, please reload the website so it can update itself properly. -

); diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index a35131f..71cacda 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -11,312 +11,311 @@ import PrivacySettings from './PrivacySettings'; import FontSizeSetting from './FontSize'; import OpenSourceModeToggle from './OpenSourceToggle'; import { - changePassword, changeData, + createAccount, deleteAccount, + getData, } from '../../backend/database'; import ThemeDropdown from './DropDownTheme'; - const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { - const getItemFromLocalStorage = (key: string) => { - const item = localStorage.getItem(key); - - if (item) { - try { - return JSON.parse(item); // Attempt to parse the item - } catch (e) { - console.error(`Error parsing JSON for key "${key}":`, e); - return false; // Return false if parsing fails - } - } - - return false; // Default to false if item is null or empty - }; + const getItemFromLocalStorage = (key: string) => { + const item = localStorage.getItem(key); - interface SettingsProps { - closeSettings: () => void; - accountName: string; - handleLogout: () => void; // Add this line to accept handleLogout as a prop + if (item) { + try { + return JSON.parse(item); // Attempt to parse the item + } catch (e) { + console.error(`Error parsing JSON for key "${key}":`, e); + return false; // Return false if parsing fails + } } - // Active section - const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general'); + return false; // Default to false if item is null or empty + }; - // Language setting - const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en'); + interface SettingsProps { + closeSettings: () => void; + accountName: string; + handleLogout: () => void; // Add this line to accept handleLogout as a prop + } - // Currency setting - const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd'); + // Active section + const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general'); - // Date and time format settings - const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy'); - const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour'); - const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT'); + // Language setting + const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en'); - // Online AI and chat history settings - const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline' - const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory')); - const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory')); - const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode')); + // Currency setting + const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd'); - // User credentials - 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(''); + // Date and time format settings + const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy'); + const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour'); + const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT'); - // Measurement setting - const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric'); + // Online AI and chat history settings + const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline' + const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory')); + const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory')); + const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode')); - // Theme settings - const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim()); - const [headerBackground, setHeaderBackground] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--header-background-color').trim()); - const [textColor, setTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim()); - const [inputBackgroundColor, setInputBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim()); - const [inputButtonColor, setInputButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim()); - const [inputButtonHoverColor, setInputButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim()); - const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim()); - const [userMessageTextColor, setUserMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim()); - const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim()); - const [aiMessageTextColor, setAiMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim()); - const [buttonBackgroundColor, setButtonBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim()); - const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim()); - const [modelsBackgroundColor, setModelsBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim()); - const [historyBackgroundColor, setHistoryBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim()); - const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim()); - const [conversationBackgroundColor, setConversationBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim()); - const [popUpTextColor, setPopUpTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim()); - const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim()); - const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim()); - const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim()); - const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim()); - const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim()); - const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim()); - const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim()); - const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim()); - const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim()); - const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim()); - const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim()); - const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim()); + // User credentials + 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'); + + // Theme settings + const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim()); + const [headerBackground, setHeaderBackground] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--header-background-color').trim()); + const [textColor, setTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim()); + const [inputBackgroundColor, setInputBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim()); + const [inputButtonColor, setInputButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim()); + const [inputButtonHoverColor, setInputButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim()); + const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim()); + const [userMessageTextColor, setUserMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim()); + const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim()); + const [aiMessageTextColor, setAiMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim()); + const [buttonBackgroundColor, setButtonBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim()); + const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim()); + const [modelsBackgroundColor, setModelsBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim()); + const [historyBackgroundColor, setHistoryBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim()); + const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim()); + const [conversationBackgroundColor, setConversationBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim()); + const [popUpTextColor, setPopUpTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim()); + const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim()); + const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim()); + const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim()); + const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim()); + const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim()); + const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim()); + const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim()); + const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim()); + const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim()); + const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim()); + const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim()); + const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim()); - // Theme selection - const [selectedTheme, setSelectedTheme] = useState(''); + // Theme selection + const [selectedTheme, setSelectedTheme] = useState(''); - // API Keys - const [mistral, setMistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim()); - const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim()); - const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim()); - const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim()); + // API Keys + const [mistral, setMistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim()); + const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim()); + const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim()); + const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim()); - const [isLoggedIn, setIsLoggedIn] = useState(false); + const [isLoggedIn, setIsLoggedIn] = useState(false); - const settings = { - userPreferences: { - activeSection, - preferredLanguage, - preferredCurrency, - dateFormat, - timeFormat, - timeZone, - selectedOption, - disableChatHistory, - disableAIMemory, - openSourceMode, - newName, - newEmail, - newPassword, - preferredMeasurement, - }, - theme: { - backgroundColor, - headerBackground, - textColor, - inputBackgroundColor, - inputButtonColor, - inputButtonHoverColor, - userMessageBackgroundColor, - userMessageTextColor, - aiMessageBackgroundColor, - aiMessageTextColor, - buttonBackgroundColor, - buttonHoverBackgroundColor, - modelsBackgroundColor, - historyBackgroundColor, - leftPanelBackgroundColor, - conversationBackgroundColor, - popUpTextColor, - inputBorderColor, - fontFamily, - fontSize, - selectedTheme, - faqSettings: { - faqBackgroundColor, - faqHeadingColor, - faqItemBackgroundColor, - faqItemHeadingColor, - faqItemTextColor, - faqItemHoverBackgroundColor, - }, - popupSettings: { - popupBackgroundColor, - overlayTextColor, - }, - }, - apiKeys: { - mistral, - openai, - anthropic, - google, - }, - generalSettings: { - burgerMenu, - }, - }; + const settings = { + userPreferences: { + activeSection, + preferredLanguage, + preferredCurrency, + dateFormat, + timeFormat, + timeZone, + selectedOption, + disableChatHistory, + disableAIMemory, + openSourceMode, + preferredMeasurement, + }, + theme: { + backgroundColor, + headerBackground, + textColor, + inputBackgroundColor, + inputButtonColor, + inputButtonHoverColor, + userMessageBackgroundColor, + userMessageTextColor, + aiMessageBackgroundColor, + aiMessageTextColor, + buttonBackgroundColor, + buttonHoverBackgroundColor, + modelsBackgroundColor, + historyBackgroundColor, + leftPanelBackgroundColor, + conversationBackgroundColor, + popUpTextColor, + inputBorderColor, + fontFamily, + fontSize, + selectedTheme, + faqSettings: { + faqBackgroundColor, + faqHeadingColor, + faqItemBackgroundColor, + faqItemHeadingColor, + faqItemTextColor, + faqItemHoverBackgroundColor, + }, + popupSettings: { + popupBackgroundColor, + overlayTextColor, + }, + }, + apiKeys: { + mistral, + openai, + anthropic, + google, + }, + generalSettings: { + burgerMenu, + }, + }; - const colorSettings = [ - { name: "Background Color", value: headerBackground, setValue: setBackgroundColor, cssVariable: "--background-color" }, - { name: "Header Background Color", value: backgroundColor, setValue: setHeaderBackground, cssVariable: "--background-color" }, - { name: "Text Color", value: textColor, setValue: setTextColor, cssVariable: "--text-color" }, - { name: "Input Background Color", value: inputBackgroundColor, setValue: setInputBackgroundColor, cssVariable: "--input-background-color" }, - { name: "Input Button Color", value: inputButtonColor, setValue: setInputButtonColor, cssVariable: "--input-button-color" }, - { name: "Input Button Hover Color", value: inputButtonHoverColor, setValue: setInputButtonHoverColor, cssVariable: "--input-button-hover-color" }, - { name: "User Message Background Color", value: userMessageBackgroundColor, setValue: setUserMessageBackgroundColor, cssVariable: "--user-message-background-color" }, - { name: "User Message Text Color", value: userMessageTextColor, setValue: setUserMessageTextColor, cssVariable: "--user-message-text-color" }, - { name: "AI Message Background Color", value: aiMessageBackgroundColor, setValue: setAiMessageBackgroundColor, cssVariable: "--ai-message-background-color" }, - { name: "AI Message Text Color", value: aiMessageTextColor, setValue: setAiMessageTextColor, cssVariable: "--ai-message-text-color" }, - { name: "Button Background Color", value: buttonBackgroundColor, setValue: setButtonBackgroundColor, cssVariable: "--button-background-color" }, - { name: "Button Hover Background Color", value: buttonHoverBackgroundColor, setValue: setButtonHoverBackgroundColor, cssVariable: "--button-hover-background-color" }, - { name: "Models Background Color", value: modelsBackgroundColor, setValue: setModelsBackgroundColor, cssVariable: "--models-background-color" }, - { name: "History Background Color", value: historyBackgroundColor, setValue: setHistoryBackgroundColor, cssVariable: "--history-background-color" }, - { name: "Left Panel Background Color", value: leftPanelBackgroundColor, setValue: setLeftPanelBackgroundColor, cssVariable: "--left-panel-background-color" }, - { name: "Conversation Background Color", value: conversationBackgroundColor, setValue: setConversationBackgroundColor, cssVariable: "--conversation-background-color" }, - { name: "Pop-up Text Color", value: popUpTextColor, setValue: setPopUpTextColor, cssVariable: "--pop-up-text" }, - { name: "Input Border Color", value: inputBorderColor, setValue: setInputBorderColor, cssVariable: "--input-border-color" }, - { name: "FAQ Background Color", value: faqBackgroundColor, setValue: setFaqBackgroundColor, cssVariable: "--faq-background-color" }, - { name: "FAQ Heading Color", value: faqHeadingColor, setValue: setFaqHeadingColor, cssVariable: "--faq-heading-color" }, - { name: "FAQ Item Background Color", value: faqItemBackgroundColor, setValue: setFaqItemBackgroundColor, cssVariable: "--faq-item-background-color" }, - { name: "FAQ Item Heading Color", value: faqItemHeadingColor, setValue: setFaqItemHeadingColor, cssVariable: "--faq-item-heading-color" }, - { name: "FAQ Item Text Color", value: faqItemTextColor, setValue: setFaqItemTextColor, cssVariable: "--faq-item-text-color" }, - { name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" }, - { name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" }, - { name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" }, - ]; - - const timeZoneOptions = [ - { value: 'GMT', label: 'GMT' }, - { value: 'EST', label: 'EST' }, - { value: 'CST', label: 'CST' }, - { value: 'MST', label: 'MST' }, - { value: 'PST', label: 'PST' }, - { value: 'UTC', label: 'UTC' }, - { value: 'BST', label: 'BST' }, - { value: 'IST', label: 'IST' }, - { value: 'CET', label: 'CET' }, - { value: 'JST', label: 'JST' }, - ]; - + const colorSettings = [ + { name: "Background Color", value: headerBackground, setValue: setBackgroundColor, cssVariable: "--background-color" }, + { name: "Header Background Color", value: backgroundColor, setValue: setHeaderBackground, cssVariable: "--background-color" }, + { name: "Text Color", value: textColor, setValue: setTextColor, cssVariable: "--text-color" }, + { name: "Input Background Color", value: inputBackgroundColor, setValue: setInputBackgroundColor, cssVariable: "--input-background-color" }, + { name: "Input Button Color", value: inputButtonColor, setValue: setInputButtonColor, cssVariable: "--input-button-color" }, + { name: "Input Button Hover Color", value: inputButtonHoverColor, setValue: setInputButtonHoverColor, cssVariable: "--input-button-hover-color" }, + { name: "User Message Background Color", value: userMessageBackgroundColor, setValue: setUserMessageBackgroundColor, cssVariable: "--user-message-background-color" }, + { name: "User Message Text Color", value: userMessageTextColor, setValue: setUserMessageTextColor, cssVariable: "--user-message-text-color" }, + { name: "AI Message Background Color", value: aiMessageBackgroundColor, setValue: setAiMessageBackgroundColor, cssVariable: "--ai-message-background-color" }, + { name: "AI Message Text Color", value: aiMessageTextColor, setValue: setAiMessageTextColor, cssVariable: "--ai-message-text-color" }, + { name: "Button Background Color", value: buttonBackgroundColor, setValue: setButtonBackgroundColor, cssVariable: "--button-background-color" }, + { name: "Button Hover Background Color", value: buttonHoverBackgroundColor, setValue: setButtonHoverBackgroundColor, cssVariable: "--button-hover-background-color" }, + { name: "Models Background Color", value: modelsBackgroundColor, setValue: setModelsBackgroundColor, cssVariable: "--models-background-color" }, + { name: "History Background Color", value: historyBackgroundColor, setValue: setHistoryBackgroundColor, cssVariable: "--history-background-color" }, + { name: "Left Panel Background Color", value: leftPanelBackgroundColor, setValue: setLeftPanelBackgroundColor, cssVariable: "--left-panel-background-color" }, + { name: "Conversation Background Color", value: conversationBackgroundColor, setValue: setConversationBackgroundColor, cssVariable: "--conversation-background-color" }, + { name: "Pop-up Text Color", value: popUpTextColor, setValue: setPopUpTextColor, cssVariable: "--pop-up-text" }, + { name: "Input Border Color", value: inputBorderColor, setValue: setInputBorderColor, cssVariable: "--input-border-color" }, + { name: "FAQ Background Color", value: faqBackgroundColor, setValue: setFaqBackgroundColor, cssVariable: "--faq-background-color" }, + { name: "FAQ Heading Color", value: faqHeadingColor, setValue: setFaqHeadingColor, cssVariable: "--faq-heading-color" }, + { name: "FAQ Item Background Color", value: faqItemBackgroundColor, setValue: setFaqItemBackgroundColor, cssVariable: "--faq-item-background-color" }, + { name: "FAQ Item Heading Color", value: faqItemHeadingColor, setValue: setFaqItemHeadingColor, cssVariable: "--faq-item-heading-color" }, + { name: "FAQ Item Text Color", value: faqItemTextColor, setValue: setFaqItemTextColor, cssVariable: "--faq-item-text-color" }, + { name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" }, + { name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" }, + { name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" }, + ]; - const languageOptions = [ - { code: 'en', name: 'English' }, - { code: 'es', name: 'Spanish' }, - { code: 'fr', name: 'French' }, - { code: 'de', name: 'German' }, - { code: 'it', name: 'Italian' }, - { code: 'pt', name: 'Portuguese' }, - { code: 'zh', name: 'Chinese' }, - { code: 'ja', name: 'Japanese' }, - { code: 'ru', name: 'Russian' }, - { code: 'ar', name: 'Arabic' }, - ]; + const timeZoneOptions = [ + { value: 'GMT', label: 'GMT' }, + { value: 'EST', label: 'EST' }, + { value: 'CST', label: 'CST' }, + { value: 'MST', label: 'MST' }, + { value: 'PST', label: 'PST' }, + { value: 'UTC', label: 'UTC' }, + { value: 'BST', label: 'BST' }, + { value: 'IST', label: 'IST' }, + { value: 'CET', label: 'CET' }, + { value: 'JST', label: 'JST' }, + ]; - const currencyOptions = [ - { code: 'usd', name: 'USD' }, - { code: 'eur', name: 'EUR' }, - { code: 'gbp', name: 'GBP' }, - { code: 'jpy', name: 'JPY' }, - { code: 'cad', name: 'CAD' }, - { code: 'aud', name: 'AUD' }, - { code: 'chf', name: 'CHF' }, - { code: 'cny', name: 'CNY' }, - { code: 'inr', name: 'INR' }, - ]; - - const dateFormatOptions = [ - { value: 'mm/dd/yyyy', label: 'MM/DD/YYYY' }, - { value: 'dd/mm/yyyy', label: 'DD/MM/YYYY' }, - { value: 'yyyy-mm-dd', label: 'YYYY-MM-DD' }, - { value: 'mm-dd-yyyy', label: 'MM-DD-YYYY' }, - { value: 'dd-mm-yyyy', label: 'DD-MM-YYYY' }, - ]; - - const timeFormatOptions = [ - { value: '12-hour', label: '12 Hour' }, - { value: '24-hour', label: '24 Hour' }, - ]; - - const measurementOptions = [ - { value: 'Metric', label: 'Metric' }, - { value: 'Imperial', label: 'Imperial' }, - ]; - const fontOptions = [ - { value: "'Poppins', sans-serif", label: 'Poppins' }, - { value: "'Inconsolata', monospace", label: 'Inconsolata' }, - { value: "'Merriweather', serif", label: 'Merriweather' }, - { value: "'Noto Sans', sans-serif", label: 'Noto Sans' }, - { value: "'Noto Serif', serif", label: 'Noto Serif' }, - { value: "'Playfair Display', serif", label: 'Playfair Display' }, - { value: "'Roboto', sans-serif", label: 'Roboto' }, - { value: "'Ubuntu', sans-serif", label: 'Ubuntu' }, - { value: "'Bangers', cursive", label: 'Bangers' }, - { value: "'Caveat', cursive", label: 'Caveat' }, - { value: "'Frederika the Great', cursive", label: 'Frederika the Great' }, - { value: "'Rock Salt', cursive", label: 'Rock Salt' }, - { value: "'Sofadi One', sans-serif", label: 'Sofadi One' }, - { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' }, - ]; + const languageOptions = [ + { code: 'en', name: 'English' }, + { code: 'es', name: 'Spanish' }, + { code: 'fr', name: 'French' }, + { code: 'de', name: 'German' }, + { code: 'it', name: 'Italian' }, + { code: 'pt', name: 'Portuguese' }, + { code: 'zh', name: 'Chinese' }, + { code: 'ja', name: 'Japanese' }, + { code: 'ru', name: 'Russian' }, + { code: 'ar', name: 'Arabic' }, + ]; - const handleLogout = () => { - setIsLoggedIn(false); - localStorage.removeItem('accountName'); - localStorage.removeItem('accountEmail'); - localStorage.removeItem('accountPassword'); + const currencyOptions = [ + { code: 'usd', name: 'USD' }, + { code: 'eur', name: 'EUR' }, + { code: 'gbp', name: 'GBP' }, + { code: 'jpy', name: 'JPY' }, + { code: 'cad', name: 'CAD' }, + { code: 'aud', name: 'AUD' }, + { code: 'chf', name: 'CHF' }, + { code: 'cny', name: 'CNY' }, + { code: 'inr', name: 'INR' }, + ]; + + const dateFormatOptions = [ + { value: 'mm/dd/yyyy', label: 'MM/DD/YYYY' }, + { value: 'dd/mm/yyyy', label: 'DD/MM/YYYY' }, + { value: 'yyyy-mm-dd', label: 'YYYY-MM-DD' }, + { value: 'mm-dd-yyyy', label: 'MM-DD-YYYY' }, + { value: 'dd-mm-yyyy', label: 'DD-MM-YYYY' }, + ]; + + const timeFormatOptions = [ + { value: '12-hour', label: '12 Hour' }, + { value: '24-hour', label: '24 Hour' }, + ]; + + const measurementOptions = [ + { value: 'Metric', label: 'Metric' }, + { value: 'Imperial', label: 'Imperial' }, + ]; + + const fontOptions = [ + { value: "'Poppins', sans-serif", label: 'Poppins' }, + { value: "'Inconsolata', monospace", label: 'Inconsolata' }, + { value: "'Merriweather', serif", label: 'Merriweather' }, + { value: "'Noto Sans', sans-serif", label: 'Noto Sans' }, + { value: "'Noto Serif', serif", label: 'Noto Serif' }, + { value: "'Playfair Display', serif", label: 'Playfair Display' }, + { value: "'Roboto', sans-serif", label: 'Roboto' }, + { value: "'Ubuntu', sans-serif", label: 'Ubuntu' }, + { value: "'Bangers', cursive", label: 'Bangers' }, + { value: "'Caveat', cursive", label: 'Caveat' }, + { value: "'Frederika the Great', cursive", label: 'Frederika the Great' }, + { value: "'Rock Salt', cursive", label: 'Rock Salt' }, + { value: "'Sofadi One', sans-serif", label: 'Sofadi One' }, + { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' }, + ]; + + const handleLogout = () => { + setIsLoggedIn(false); + localStorage.removeItem('accountName'); + localStorage.removeItem('accountEmail'); + localStorage.removeItem('accountPassword'); + alert('Successfully logged out!'); + window.location.reload(); + }; + + useEffect(() => { + const savedTheme = localStorage.getItem('selectedTheme'); + if (savedTheme) { + setSelectedTheme(savedTheme); + applyTheme(savedTheme); + } + }, []); // Runs only once when the component mounts + + // Effect hooks to update localStorage whenever any state changes + useEffect(() => { + // Flatten nested objects + const flattenedSettings = { + ...settings.userPreferences, + ...settings.theme, + ...settings.theme.faqSettings, + ...settings.theme.popupSettings, + ...settings.apiKeys, + ...settings.generalSettings, }; - - useEffect(() => { - const savedTheme = localStorage.getItem('selectedTheme'); - if (savedTheme) { - setSelectedTheme(savedTheme); - applyTheme(savedTheme); - } - }, []); // Runs only once when the component mounts - - // Effect hooks to update localStorage whenever any state changes - useEffect(() => { - // Flatten nested objects - const flattenedSettings = { - ...settings.userPreferences, - ...settings.theme, - ...settings.theme.faqSettings, - ...settings.theme.popupSettings, - ...settings.apiKeys, - ...settings.generalSettings, - }; - // Update localStorage for all settings - for (const [key, value] of Object.entries(flattenedSettings)) { - localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value); - } - }, [ - ...Object.values(settings.userPreferences), - ...Object.values(settings.theme), - ...Object.values(settings.theme.faqSettings), - ...Object.values(settings.theme.popupSettings), - ...Object.values(settings.apiKeys), - ...Object.values(settings.generalSettings), - ]); + // Update localStorage for all settings + for (const [key, value] of Object.entries(flattenedSettings)) { + localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value); + } + }, [ + ...Object.values(settings.userPreferences), + ...Object.values(settings.theme), + ...Object.values(settings.theme.faqSettings), + ...Object.values(settings.theme.popupSettings), + ...Object.values(settings.apiKeys), + ...Object.values(settings.generalSettings), + ]); useEffect(() => { const savedOption = localStorage.getItem('radioSelection'); @@ -327,47 +326,55 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const handleRadioChange = (newValue: string) => { setSelectedOption(newValue); // Update the state with the selected option - if (openSourceMode){ + if (openSourceMode) { newValue += " (FOSS)" - } + } localStorage.setItem('radioSelection', newValue); // Save the selection for persistence }; - // 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 updating all credentials + const handleUpdateCredentials = async () => { + var useName = localStorage.getItem("accountName") + var useEmail = localStorage.getItem("accountEmail") + var usePassword = localStorage.getItem("accountPassword") + if (useName && useEmail && usePassword) { + await deleteAccount(useName, usePassword) + + if (newName != "") { + useName = newName + } if (newEmail != "") { + useEmail = newEmail + } if (newPassword != "") { + usePassword = newPassword } - }; - - // Function to handle account deletion - const handleDeleteAccount = async () => { - const success = await deleteAccount(accountName, currentPassword); + + if (await createAccount(useName, useEmail, usePassword)) { + if (await changeData(useName, usePassword, settings)) { + localStorage.setItem("currentName", useName) + localStorage.setItem("currentPassword", usePassword) + localStorage.setItem("currentEmail", useEmail) + alert('Account successfully changed!') + window.location.reload() + } + } + } + }; + + // Function to handle account deletion + const handleDeleteAccount = async () => { + var useName = localStorage.getItem("accountName") + var usePassword = localStorage.getItem("accountPassword") + if (useName && usePassword) { + const success = await deleteAccount(useName, usePassword); if (success) { alert('Account deleted successfully!'); - closeSettings(); // Close settings after deletion + window.location.reload() // Optionally, redirect or reset state here } else { alert('Account deletion failed. Please check your password.'); } - }; + } + }; // Render settings content based on the active section @@ -376,51 +383,51 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( case 'general': return (
-

General Settings

- - ({ value: lang.code, label: lang.name }))} // Convert to Option format - /> +

General Settings

- ({ value: currency.code, label: currency.name }))} // Convert to Option format - /> + ({ value: lang.code, label: lang.name }))} // Convert to Option format + /> - + ({ value: currency.code, label: currency.name }))} // Convert to Option format + /> - + - + - -
- ); + + + + + ); case 'privacy': return ( @@ -431,7 +438,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( selectedOption={selectedOption} handleRadioChange={handleRadioChange} openSourceMode={openSourceMode} - /> + /> void; accountName: string }> = ( ); - case 'theme': - return ( -
-

Theme Settings

- - +

Theme Settings

+ + + + {selectedTheme === 'CUSTOM' && ( + <> + {/* Font Size */} + - - {selectedTheme === 'CUSTOM' && ( - <> - {/* Font Size */} - - {colorSettings.map((setting) => ( - - ))} + {colorSettings.map((setting) => ( + + ))} - { - setFontFamily(newFont); - document.documentElement.style.setProperty('--font-family', newFont); - }} - options={fontOptions} - /> - - )} -
- ); - - - case 'foss': - return ( -
-

Open Source Settings

- { + setFontFamily(newFont); + document.documentElement.style.setProperty('--font-family', newFont); + }} + options={fontOptions} /> -
- ); - - - case 'account': - return ( -
-

Account Settings

- - - - - - - -
+ + )} + ); - case 'api': - return ( -
- - - - -
- ); - case 'im/export': - return ( -
-

Import & Export

-
-

Export the settings

- -
-
-

Import the settings

- -
+ case 'foss': + return ( +
+

Open Source Settings

+ +
+ ); + + + case 'account': + return ( +
+

Account Settings

+ + + + + + + +
+ ); + + case 'api': + return ( +
+ + + + +
+ ); + + case 'im/export': + return ( +
+

Import & Export

+
+

Export the settings

+
- ); +
+

Import the settings

+ +
+
+ ); default: return null; @@ -635,11 +642,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (

Settings for {accountName}

{renderSettingsContent()} -
diff --git a/py/api.py b/py/api.py index bfaf1cd..348c4ba 100644 --- a/py/api.py +++ b/py/api.py @@ -97,6 +97,7 @@ class API: @self.app.route('/interstellar_ai/db', methods=['POST']) def db_manipulate(): sent_data = request.get_json() + print(sent_data) action = sent_data.get('action') if action == "create_account": return jsonify({'status': 200, 'response': self.db.add_user(sent_data)}) @@ -110,6 +111,10 @@ class API: return jsonify({'status': 200, 'response': self.db.check_credentials(sent_data)}) elif action == "delete_account": return jsonify({'status': 200, 'response': self.db.delete_user(sent_data)}) + elif action == "get_email": + return jsonify({'status': 200, 'response': self.db.get_email(sent_data)}) + elif action == "get_name": + return jsonify({'status': 200, 'response': self.db.get_name(sent_data)}) return jsonify({'status': 401, 'response': "Invalid action"}) diff --git a/py/db.py b/py/db.py index 778c6c7..c8317e3 100644 --- a/py/db.py +++ b/py/db.py @@ -9,13 +9,9 @@ class DB: self.database = {} def ensure_username(self, data): - print(data) - print(self.database) if 'username' in data: - print("usr") return data.get('username') elif 'email' in data: - print("email") for index, entry in self.database: if entry.get('email') == data.get('email'): return index @@ -34,15 +30,12 @@ class DB: user_data = {"hashed_password": hashed_password, "email": email, "data": None} if username not in self.database: self.database[username] = user_data - print("yes") self.save_database() return True - print("fail") return False def delete_user(self, data): username = self.ensure_username(data) - data = data.get('data') if not self.check_credentials(data): return False @@ -52,11 +45,10 @@ class DB: def change_data(self, data): username = self.ensure_username(data) - data = data.get('data') if not self.check_credentials(data): return False - self.database[username]['data'] = data + self.database[username]['data'] = data.get('data') self.save_database() return True @@ -75,8 +67,6 @@ class DB: username = self.ensure_username(data) password = data.get('password') if username not in self.database: - print("no username") - print(username) return False stored_hashed_password = self.database[username]["hashed_password"] @@ -92,6 +82,22 @@ class DB: send_back = self.database[username].get('data') return send_back + def get_email(self, data): + username = self.ensure_username(data) + if not self.check_credentials(data): + return None + + send_back = self.database[username].get('email') + return send_back + + def get_name(self, data): + username = self.ensure_username(data) + if not self.check_credentials(data): + return None + + send_back = self.ensure_username(data) + return send_back + def save_database(self): if os.environ.get('PRODUCTION') == "YES": server = pycouchdb.Server("http://admin:admin@localhost:5984/")