Merge pull request 'Name changes' (#67) from sageTheDm/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/67
This commit is contained in:
Patrick 2024-09-30 11:39:18 +02:00
commit 34aabc7867
3 changed files with 190 additions and 52 deletions

View file

@ -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) => {
axios.post("http://localhost:5000/interstellar_ai/db", data)
.then(response => {
const status = response.data.status
postMessage({ status })
})
.catch(error => {
postMessage({ status: 500 })
})
}
export const sendToDatabase = (data: any): Promise<boolean> => {
return axios.post("http://localhost:5000/interstellar_ai/db", data)
.then(response => {
const status = response.data.status;
const success = response.data.response;
postMessage({ status, success });
return success; // Ensure success is returned to the caller
})
.catch(error => {
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);
};

View file

@ -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

View file

@ -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');
@ -80,8 +90,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
// API Keys
const [laPlateforme, setLaPlateforme] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
const [openAI, setOpenAI] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
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());
@ -132,8 +142,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
fontSize,
burgerMenu,
selectedTheme,
laPlateforme,
openAI,
mistral,
openai,
anthropic,
google,
};
@ -182,8 +192,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
fontSize,
burgerMenu,
selectedTheme,
laPlateforme,
openAI,
mistral,
openai,
anthropic,
google,
]);
@ -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>
@ -881,16 +938,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<label>La Plateforme</label>
<input
type="text"
value={laPlateforme}
onChange={(e) => setLaPlateforme(e.target.value)}
value={mistral}
onChange={(e) => setmistral(e.target.value)}
/>
</div>
<div className="settings-option">
<label>OpenAI</label>
<input
type="text"
value={openAI}
onChange={(e) => setOpenAI(e.target.value)}
value={openai}
onChange={(e) => setopenai(e.target.value)}
/>
</div>
<div className="settings-option">
@ -973,8 +1030,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
openSourceMode,
// API Keys
laPlateforme,
openAI,
mistral,
openai,
anthropic,
google
};