From 7a585603776d61a4eaef1ce69376e8152c8e903b Mon Sep 17 00:00:00 2001
From: Ankita Sahu <71656941+SAHU-01@users.noreply.github.com>
Date: Mon, 15 Apr 2024 20:21:04 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9BBug=20Fix:=20Login=20UI,state=20and?=
 =?UTF-8?q?=20handelling=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Login/LoginComponent.tsx           | 18 ++++++++++--------
 src/common/App.tsx                     | 10 +++++++---
 src/common/CredentialsComponent.tsx    |  4 +++-
 src/common/UpdatePasswordComponent.tsx |  4 +++-
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/Login/LoginComponent.tsx b/src/Login/LoginComponent.tsx
index 0bdb2ee..e4eb9d4 100644
--- a/src/Login/LoginComponent.tsx
+++ b/src/Login/LoginComponent.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { Web3AuthNoModal } from "@web3auth/no-modal";
 import { CHAIN_NAMESPACES, IProvider, WALLET_ADAPTERS, WEB3AUTH_NETWORK } from "@web3auth/base";
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
@@ -7,8 +7,10 @@ import "./login.css";
 import RPC from "./web3RPC"; // for using web3.js
 
 const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
-
-function LoginComponent() {
+interface LoginComponentProps {
+  onLogin: () => void; // Add a type for the onLogin prop
+}
+function LoginComponent({onLogin}:LoginComponentProps) {
   const [web3auth, setWeb3auth] = useState<Web3AuthNoModal | null>(null);
   const [provider, setProvider] = useState<IProvider | null>(null);
   const [loggedIn, setLoggedIn] = useState<boolean>(false); // Modify here
@@ -44,10 +46,7 @@ function LoginComponent() {
 
         await web3auth.init();
         setProvider(web3auth.provider);
-        if (web3auth.connected) {
-          localStorage.setItem("userLoggedIn","true")
-          setLoggedIn(true);
-        }
+        
       } catch (error) {
         console.error(error);
       }
@@ -67,6 +66,9 @@ function LoginComponent() {
       loginProvider: "google",
     });
     setProvider(web3authProvider);
+    setLoggedIn(true); // Set loggedIn to true after successful login
+    localStorage.setItem("userLoggedIn", "true");
+    onLogin();
   };
 
   const authenticateUser = async () => {
@@ -226,7 +228,7 @@ function LoginComponent() {
         
       </h1>
 
-      <div className="grid">{loggedIn ? loggedInView : unloggedInView}</div>
+      <div className="grid">{!loggedIn ? unloggedInView : null}</div>
 
     </div>
   );
diff --git a/src/common/App.tsx b/src/common/App.tsx
index 9a49e82..f6b2f70 100644
--- a/src/common/App.tsx
+++ b/src/common/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import {
   Box,
   ChakraProvider,
@@ -38,10 +38,14 @@ const App: React.FC = () => {
     }
   }, []);
 
-  const handleLogout = () => {
+  const handleLogout = async () => {
     localStorage.setItem('userLoggedIn', 'false');
+    localStorage.removeItem('openlogin_store')
     setLoggedIn(false);
   };
+  const handleLogin = () => {
+    setLoggedIn(true);
+  };
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     setSelectedFile(file || null);
@@ -105,7 +109,7 @@ const App: React.FC = () => {
         </Tabs>
 
         ) : (
-  <LoginComponent />
+  <LoginComponent onLogin={handleLogin}/>
 )} 
       </Box>
     </ChakraProvider>
diff --git a/src/common/CredentialsComponent.tsx b/src/common/CredentialsComponent.tsx
index 8cdcd2b..cdbb1be 100644
--- a/src/common/CredentialsComponent.tsx
+++ b/src/common/CredentialsComponent.tsx
@@ -10,6 +10,7 @@ const CredentialsComponent = () => {
     useContext(ModalContext);
   const { setShowCredentialsModal, addMessage, currentFunctionArguments } =
     useChatStore((state) => state);
+    const [isLoading, setIsLoading] = useState(false);
 
   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(e.target.value);
@@ -20,6 +21,7 @@ const CredentialsComponent = () => {
   };
 
   const handleSubmit = async () => {
+    setIsLoading(true);
     if (password.trim() !== '' && privateKey.trim() !== '') {
       const res = await taikoNodeEnvironmentSetup({
         host: currentFunctionArguments.host,
@@ -53,7 +55,7 @@ const CredentialsComponent = () => {
         onChange={handlePrivateKeyChange}
         mb={6}
       />
-      <Button colorScheme="blue" onClick={handleSubmit} w="full" maxW="sm" mb={6}>
+      <Button colorScheme="blue" onClick={handleSubmit} w="full" maxW="sm" mb={6} isLoading={isLoading}  loadingText="Setting environment...">
         Submit
       </Button>
     </Flex>
diff --git a/src/common/UpdatePasswordComponent.tsx b/src/common/UpdatePasswordComponent.tsx
index 2fd3f7f..53e38c3 100644
--- a/src/common/UpdatePasswordComponent.tsx
+++ b/src/common/UpdatePasswordComponent.tsx
@@ -8,6 +8,7 @@ import { ChatMessage } from '../state/chat';
 const UpdatePasswordComponent = () => {
   const { currentPassword, setCurrentPassword, newPassword, setNewPassword } =
     useContext(ModalContext);
+  const [isLoading, setIsLoading] = useState(false);
 
   const { setShowUpdatePasswordModal, addMessage, currentFunctionArguments } =
     useChatStore((state) => state);
@@ -22,6 +23,7 @@ const UpdatePasswordComponent = () => {
   };
 
   const handleSubmit = async () => {
+    setIsLoading(true);
     if (currentPassword.trim() !== '' && newPassword.trim() !== '') {
       const res = await changeNodePassword({
         host: currentFunctionArguments.host,
@@ -57,7 +59,7 @@ const UpdatePasswordComponent = () => {
         onChange={handleNewPasswordChange}
         mb={6}
       />
-      <Button colorScheme="blue" onClick={handleSubmit} mb={4}>
+      <Button colorScheme="blue" onClick={handleSubmit} mb={4} isLoading={isLoading}  loadingText="Updating password ...">
         Update Password
       </Button>
     </Flex>