From e731da6c7b07d757cf8d80364549021115f4a605 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Thu, 26 Sep 2024 16:37:18 +0200
Subject: [PATCH] Create a local account | Login, Logoff (DELETE ACCOUNT) and
 autologin

---
 app/components/Login.tsx    | 42 +++++++++++++++++++++++++------------
 app/components/Settings.tsx |  9 ++++++++
 py/api.py                   |  2 +-
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/app/components/Login.tsx b/app/components/Login.tsx
index 24e4a27..ade180b 100644
--- a/app/components/Login.tsx
+++ b/app/components/Login.tsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 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);
@@ -16,10 +17,20 @@ const Login: React.FC = () => {
   const [newAccountPassword, setNewAccountPassword] = useState('');
   const [newAccountName, setNewAccountName] = useState('');
 
-  // Fixed credentials
-  const fixedEmail = '';
-  const fixedPassword = '';
-  const fixedAccount = '';
+  // On component mount, check if there are credentials in localStorage
+  useEffect(() => {
+    const savedAccountName = localStorage.getItem('accountName');
+    const savedAccountEmail = localStorage.getItem('accountEmail');
+    const savedAccountPassword = localStorage.getItem('accountPassword');
+
+    // If credentials are found in localStorage, log the user in
+    if (savedAccountName && savedAccountEmail && savedAccountPassword) {
+      setAccountName(savedAccountName);
+      setEmail(savedAccountEmail);
+      setPassword(savedAccountPassword);
+      setIsLoggedIn(true); // Automatically log in
+    }
+  }, []);
 
   // Function to toggle the login popup
   const toggleLoginPopup = () => setShowLoginPopup(!showLoginPopup);
@@ -32,22 +43,27 @@ const Login: React.FC = () => {
 
   // Function to handle login
   const handleLogin = () => {
-    if ((email === fixedEmail || accountName === fixedAccount) && password === fixedPassword) {
+    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
+      localStorage.setItem('accountName', savedAccountName || accountName);
+      localStorage.setItem('accountEmail', savedAccountEmail || email);
+      localStorage.setItem('accountPassword', savedAccountPassword || password);
     } else {
       alert('Incorrect credentials');
     }
   };
 
-  const handleLogout = () => {
-    setIsLoggedIn(false);
-    setShowSettingsPopup(false); // Optionally close settings popup on logout
-  };
-
   // Function to handle account creation
   const handleCreateAccount = () => {
-    console.log('New Account Created:', newAccountEmail, newAccountPassword);
+    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
   };
@@ -100,7 +116,7 @@ const Login: React.FC = () => {
 
             {/* Text for creating an account */}
             <p>
-              Don't have an account yet? Create one {' '}
+              Don't have an account yet? Create one{' '}
               <span
                 style={{ color: 'blue', cursor: 'pointer' }}
                 onClick={toggleSignUpPopup}
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index ce04d71..9291f01 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -84,7 +84,15 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     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 handleLogout = () => {
+      setIsLoggedIn(false);
+      localStorage.removeItem('accountName');
+      localStorage.removeItem('accountEmail');
+      localStorage.removeItem('accountPassword');
+    };
+    
     // Effect hooks to update localStorage whenever any state changes
     useEffect(() => {
       const settings = {
@@ -851,6 +859,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <div className="settings-option">
               <button
                 onClick={() => {
+                  handleLogout();
                   closeSettings(); // Optionally close settings after logout
                 }}
                 className="logout-button"
diff --git a/py/api.py b/py/api.py
index f3e13ea..c43bf1f 100644
--- a/py/api.py
+++ b/py/api.py
@@ -1,4 +1,4 @@
-from flask import Flask, request, jsonify
+from flask i                mport Flask, request, jsonify
 from flask_cors import CORS
 import secrets
 import threading