Merge pull request #8 from Bitbaza-Org/login_bug

🐛Bug Fix: Login UI,state and handelling bug
ZkAGI · Apr 15, 2024 · 7b5402b · 7b5402b
2 parents 94052cd + 7a58560
commit 7b5402b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>