@asgardeo/react 0.2.2 → 0.2.3

package/dist/cjs/types/models/auth-context.d.ts

@@ -24,6 +24,7 @@ interface AuthContext {
     isAuthLoading: boolean;
     isAuthenticated: boolean | undefined;
     isBrandingLoading: boolean;
+    isComponentLoading: boolean;
     isGlobalLoading: boolean;
     isTextLoading: boolean;
     onSignOutRef: React.MutableRefObject<Function>;
@@ -31,6 +32,7 @@ interface AuthContext {
     setAuthentication: () => void;
     setIsAuthLoading: (value: boolean) => void;
     setIsBrandingLoading: (value: boolean) => void;
+    setIsComponentLoading: (value: boolean) => void;
     setIsTextLoading: (value: boolean) => void;
     setOnSignIn: (response?: any) => void | Promise<void>;
     setOnSignOut: (response?: any) => void | Promise<void>;

package/dist/esm/index.js

@@ -39979,13 +39979,18 @@ const I18nContext = createContext(undefined);
 const useTranslations = (props) => {
     const { componentLocaleOverride, componentTextOverrides, screen } = props;
     const [isLoading, setIsLoading] = useState(true);
+    const { setIsTextLoading } = useContext(AsgardeoContext);
     const contextValue = useContext(I18nContext);
     const { text, setTranslations } = contextValue;
     useEffect(() => {
         setTranslations({ componentLocaleOverride, componentTextOverrides, screen }).then((response) => {
             setIsLoading(!response);
+            setIsTextLoading(!response);
         });
     }, [componentLocaleOverride, componentTextOverrides, screen, setTranslations]);
+    useEffect(() => {
+        setIsTextLoading(isLoading);
+    }, [isLoading]);
     /**
      * `t` is a function that retrieves a specific translation from the fetched translations.
      * It takes a key as an argument, which is a string that represents a path to the desired translation.
@@ -44428,7 +44433,6 @@ const IdentifierFirst = ({ handleAuthenticate, authenticator, alert, brandingPro
 const SignIn = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { basicAuthChildren, brandingProps, emailOtpChildren, identifierFirstChildren, showFooter = true, showLogo = true, showSignUp, smsOtpChildren, totpChildren, } = props;
-    const [isComponentLoading, setIsComponentLoading] = useState(true);
     const [alert, setAlert] = useState();
     const [showSelfSignUp, setShowSelfSignUp] = useState(showSignUp);
     const [componentBranding, setComponentBranding] = useState();
@@ -44453,12 +44457,13 @@ const SignIn = (props) => {
         authorize()
             .then((response) => {
             authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(response);
-            setIsComponentLoading(false);
         })
             .catch((error) => {
             setAlert({ alertType: { error: true }, key: keys.common.error });
-            setIsComponentLoading(false);
             throw new AsgardeoUIException('REACT_UI-SIGN_IN-SI-SE01', 'Authorization failed', error.stack);
+        })
+            .finally(() => {
+            authContext === null || authContext === void 0 ? void 0 : authContext.setIsComponentLoading(false);
         });
     }, []);
     /**
@@ -44472,7 +44477,7 @@ const SignIn = (props) => {
         if ((authContext === null || authContext === void 0 ? void 0 : authContext.authResponse) === undefined) {
             throw new AsgardeoUIException('REACT_UI-SIGN_IN-HA-IV02', 'Auth response is undefined.');
         }
-        authContext.setIsAuthLoading(true);
+        authContext === null || authContext === void 0 ? void 0 : authContext.setIsAuthLoading(true);
         const resp = yield authenticate({
             flowId: authContext === null || authContext === void 0 ? void 0 : authContext.authResponse.flowId,
             selectedAuthenticator: {
@@ -44481,7 +44486,7 @@ const SignIn = (props) => {
             },
         }).catch((authnError) => {
             setAlert({ alertType: { error: true }, key: keys.common.error });
-            authContext.setIsAuthLoading(false);
+            authContext === null || authContext === void 0 ? void 0 : authContext.setIsAuthLoading(false);
             throw new AsgardeoUIException('REACT_UI-SIGN_IN-HA-SE03', 'Authentication failed.', authnError.stack);
         });
         if (!authParams) {
@@ -44523,7 +44528,7 @@ const SignIn = (props) => {
             const authInstance = AuthClient.getInstance();
             const state = (yield authInstance.getDataLayer().getTemporaryDataParameter('state')).toString();
             yield authInstance.requestAccessToken(resp.authData.code, resp.authData.session_state, state);
-            authContext.setAuthentication();
+            authContext === null || authContext === void 0 ? void 0 : authContext.setAuthentication();
         }
         else if (resp.flowStatus === FlowStatus.FailIncomplete) {
             authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(Object.assign(Object.assign({}, resp), { nextStep: authContext === null || authContext === void 0 ? void 0 : authContext.authResponse.nextStep }));
@@ -44533,13 +44538,13 @@ const SignIn = (props) => {
             authContext === null || authContext === void 0 ? void 0 : authContext.setAuthResponse(resp);
             setShowSelfSignUp(false);
         }
-        authContext.setIsAuthLoading(false);
+        authContext === null || authContext === void 0 ? void 0 : authContext.setIsAuthLoading(false);
     });
     const renderLoginOptions = (authenticators) => {
         const LoginOptions = [];
         authenticators.forEach((authenticator) => {
             const displayName = authenticator.idp === 'LOCAL' ? authenticator.authenticator : authenticator.idp;
-            LoginOptions.push(jsxRuntimeExports.jsx(LoginOptionsBox, { isAuthLoading: authContext.isAuthLoading, socialName: authenticator.authenticator, displayName: `${t(keys.common.multiple.options.prefix)} ${displayName}`, handleOnClick: () => handleAuthenticate(authenticator.authenticatorId) }, authenticator.authenticatorId));
+            LoginOptions.push(jsxRuntimeExports.jsx(LoginOptionsBox, { isAuthLoading: authContext === null || authContext === void 0 ? void 0 : authContext.isAuthLoading, socialName: authenticator.authenticator, displayName: `${t(keys.common.multiple.options.prefix)} ${displayName}`, handleOnClick: () => handleAuthenticate(authenticator.authenticatorId) }, authenticator.authenticatorId));
         });
         return LoginOptions;
     };
@@ -44586,7 +44591,7 @@ const SignIn = (props) => {
     /**
      * Renders the circular progress component while the component or text is loading.
      */
-    if (isComponentLoading || isLoading || authContext.isBrandingLoading) {
+    if ((authContext === null || authContext === void 0 ? void 0 : authContext.isComponentLoading) || isLoading || (authContext === null || authContext === void 0 ? void 0 : authContext.isBrandingLoading)) {
         return (jsxRuntimeExports.jsx("div", { className: "Box-circularProgressHolder", children: jsxRuntimeExports.jsx(ae, { className: "circular-progress" }) }));
     }
     const imgUrl = (_f = (_e = (_d = (_c = (_b = brandingPreference === null || brandingPreference === void 0 ? void 0 : brandingPreference.preference) === null || _b === void 0 ? void 0 : _b.theme) === null || _c === void 0 ? void 0 : _c.LIGHT) === null || _d === void 0 ? void 0 : _d.images) === null || _e === void 0 ? void 0 : _e.logo) === null || _f === void 0 ? void 0 : _f.imgURL;
@@ -44595,7 +44600,7 @@ const SignIn = (props) => {
     if (showFooter && copyrightText.includes('{{currentYear}}')) {
         copyrightText = copyrightText.replace('{{currentYear}}', new Date().getFullYear().toString());
     }
-    return (jsxRuntimeExports.jsx(eo, { theme: generateThemeSignIn(componentBranding === null || componentBranding === void 0 ? void 0 : componentBranding.preference.theme), children: jsxRuntimeExports.jsxs(SignIn$1, { className: "Box-asgardeoSignIn", children: [showLogo && !(isLoading || isComponentLoading) && (jsxRuntimeExports.jsx(SignIn$1.Image, { className: "asgardeo-sign-in-logo", src: imgUrl })), ((_g = authContext === null || authContext === void 0 ? void 0 : authContext.authResponse) === null || _g === void 0 ? void 0 : _g.flowStatus) !== FlowStatus.SuccessCompleted && !isAuthenticated && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderSignIn(), showFooter && !(isLoading || isComponentLoading) && (jsxRuntimeExports.jsx(SignIn$1.Footer, { className: "asgardeo-sign-in-footer", copyrights: { children: copyrightText }, items: [
+    return (jsxRuntimeExports.jsx(eo, { theme: generateThemeSignIn(componentBranding === null || componentBranding === void 0 ? void 0 : componentBranding.preference.theme), children: jsxRuntimeExports.jsxs(SignIn$1, { className: "Box-asgardeoSignIn", children: [showLogo && !(isLoading || (authContext === null || authContext === void 0 ? void 0 : authContext.isComponentLoading)) && (jsxRuntimeExports.jsx(SignIn$1.Image, { className: "asgardeo-sign-in-logo", src: imgUrl })), ((_g = authContext === null || authContext === void 0 ? void 0 : authContext.authResponse) === null || _g === void 0 ? void 0 : _g.flowStatus) !== FlowStatus.SuccessCompleted && !isAuthenticated && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderSignIn(), showFooter && !(isLoading || (authContext === null || authContext === void 0 ? void 0 : authContext.isComponentLoading)) && (jsxRuntimeExports.jsx(SignIn$1.Footer, { className: "asgardeo-sign-in-footer", copyrights: { children: copyrightText }, items: [
                                 {
                                     children: (jsxRuntimeExports.jsx(SignIn$1.Link, { href: componentBranding.preference.urls.privacyPolicyURL, children: t(keys.common.privacy.policy) })),
                                 },
@@ -45014,6 +45019,7 @@ const AsgardeoProvider = (props) => {
     const [isBrandingLoading, setIsBrandingLoading] = useState(true);
     const [isTextLoading, setIsTextLoading] = useState(true);
     const [isAuthLoading, setIsAuthLoading] = useState(false);
+    const [isComponentLoading, setIsComponentLoading] = useState(true);
     const [authResponse, setAuthResponse] = useState();
     const [username, setUsername] = useState('');
     const onSignInRef = useRef();
@@ -45071,13 +45077,15 @@ const AsgardeoProvider = (props) => {
         isAuthLoading,
         isAuthenticated,
         isBrandingLoading,
-        isGlobalLoading: isBrandingLoading || isTextLoading || isAuthLoading,
+        isComponentLoading,
+        isGlobalLoading: isAuthLoading || isBrandingLoading || isComponentLoading || isTextLoading,
         isTextLoading,
         onSignOutRef,
         setAuthResponse,
         setAuthentication,
         setIsAuthLoading,
         setIsBrandingLoading,
+        setIsComponentLoading,
         setIsTextLoading,
         setOnSignIn,
         setOnSignOut,
@@ -45091,9 +45099,11 @@ const AsgardeoProvider = (props) => {
         isAuthLoading,
         isAuthenticated,
         isBrandingLoading,
+        isComponentLoading,
         isTextLoading,
         setAuthResponse,
         setAuthentication,
+        setIsComponentLoading,
         setOnSignIn,
         setOnSignOut,
         setUsername,