fix: No Loading Feedback on Login/TOTP Form

Author: Abbas-Askari

packages/react/src/hooks/useRCAuth.js

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import { useToastBarDispatch } from '@embeddedchat/ui-elements';
 import RCContext from '../context/RCInstance';
 import {
@@ -10,6 +10,7 @@ import {
 
 export const useRCAuth = () => {
   const { RCInstance } = useContext(RCContext);
+  const [loading, setLoading] = useState(false);
   const setIsTotpModalOpen = totpModalStore(
     (state) => state.setIsTotpModalOpen
   );
@@ -34,6 +35,7 @@ export const useRCAuth = () => {
   const dispatchToastMessage = useToastBarDispatch();
 
   const handleLogin = async (userOrEmail, password, code) => {
+    setLoading(true);
     try {
       const res = await RCInstance.login(userOrEmail, password, code);
       const permissions = await RCInstance.permissionInfo();
@@ -78,10 +80,13 @@ export const useRCAuth = () => {
       }
     } catch (e) {
       console.error('A error occurred while setting up user', e);
+    } finally {
+      setLoading(false);
     }
   };
 
   return {
     handleLogin,
+    loading,
   };
 };

packages/react/src/views/ChatBody/ChatBody.js

@@ -24,7 +24,6 @@ import {
 } from '../../store';
 import MessageList from '../MessageList';
 import TotpModal from '../TotpModal/TwoFactorTotpModal';
-import { useRCAuth } from '../../hooks/useRCAuth';
 import LoginForm from '../LoginForm/LoginForm';
 import ThreadMessageList from '../Thread/ThreadMessageList';
 import RecentMessageButton from './RecentMessageButton';
@@ -75,7 +74,6 @@ const ChatBody = ({
     uiKitModalData: state.uiKitModalData,
   }));
 
-  const { handleLogin } = useRCAuth();
   const { handleServerInteraction } = useUiKitActionManager();
 
   const isUserAuthenticated = useUserStore(
@@ -365,7 +363,7 @@ const ChatBody = ({
           />
         )}
 
-        <TotpModal handleLogin={handleLogin} />
+        <TotpModal />
         <LoginForm />
 
         {uiKitModalOpen && (

packages/react/src/views/LoginForm/LoginForm.js

@@ -7,6 +7,7 @@ import {
   Input,
   Icon,
   useTheme,
+  Throbber,
 } from '@embeddedchat/ui-elements';
 import { useLoginStore } from '../../store';
 import { useRCAuth } from '../../hooks/useRCAuth';
@@ -22,7 +23,7 @@ export default function LoginForm() {
   const setIsLoginModalOpen = useLoginStore(
     (state) => state.setIsLoginModalOpen
   );
-  const { handleLogin } = useRCAuth();
+  const { handleLogin, loading } = useRCAuth();
 
   const { theme } = useTheme();
 
@@ -132,11 +133,12 @@ export default function LoginForm() {
           <Button
             type="primary"
             onClick={handleSubmit}
+            disabled={loading}
             css={css`
               margin: 10px 0;
             `}
           >
-            Login
+            {loading ? <Throbber /> : 'Login'}
           </Button>
         </Box>
       </GenericModal>

packages/react/src/views/TotpModal/TwoFactorTotpModal.js

@@ -7,10 +7,13 @@ import {
   Modal,
   Input,
   Button,
+  Throbber,
 } from '@embeddedchat/ui-elements';
 import { totpModalStore, useUserStore } from '../../store';
+import { useRCAuth } from '../../hooks/useRCAuth';
 
-export default function TotpModal({ handleLogin }) {
+export default function TotpModal() {
+  let { handleLogin, loading } = useRCAuth();
   const [accessCode, setAccessCode] = useState(null);
   const isTotpModalOpen = totpModalStore((state) => state.isTotpModalOpen);
   const setIsTotpModalOpen = totpModalStore(
@@ -55,8 +58,13 @@ export default function TotpModal({ handleLogin }) {
             <Button type="secondary" onClick={handleClose}>
               Cancel
             </Button>
-            <Button type="primary" onClick={handleSubmit}>
-              Submit
+            <Button
+              type="primary"
+              onClick={handleSubmit}
+              disabled={loading}
+              style={{ height: '36px' }}
+            >
+              {loading ? <Throbber /> : "Submit"}
             </Button>
           </Modal.Footer>
         </Box>