agora-appbuilder-core 4.0.0-test.2 → 4.0.1

package/template/src/auth/AuthProvider.tsx

@@ -32,6 +32,11 @@ import SDKMethodEventsManager from '../utils/SdkMethodEvents';
 import StorageContext from '../components/StorageContext';
 import UserCancelPopup from './UserCancelPopup';
 import {exitApp} from './openIDPURL';
+import {useString} from '../utils/useString';
+import {
+  authSessionTimeoutToastHeading,
+  loadingText,
+} from '../language/default-labels/commonLabels';
 
 export const GET_USER = gql`
   query getUser {
@@ -58,6 +63,8 @@ interface AuthContextInterface {
 const AuthContext = createContext<AuthContextInterface | null>(null);
 
 const AuthProvider = (props: AuthProviderProps) => {
+  const loadingLabel = useString(loadingText)();
+  const timeoutHeading = useString(authSessionTimeoutToastHeading)();
   const regEvent = useRef(true);
   const refreshTimeoutWeb = useRef(null);
   const [showNativePopup, setShowNativePopup] = useState(false);
@@ -92,7 +99,6 @@ const AuthProvider = (props: AuthProviderProps) => {
     //production - 59min 1 sec
     // if (authenticated && $config.ENABLE_IDP_AUTH && isWeb()) {
     //   refreshTimeoutWeb.current = setTimeout(() => {
-    //     console.log('debugging calling refresh');
     //     fetch(`${$config.BACKEND_ENDPOINT}/v1/token/refresh`, {
     //       method: 'POST',
     //       credentials: 'include',
@@ -103,19 +109,15 @@ const AuthProvider = (props: AuthProviderProps) => {
     //       .then((data) => {
     //         clearTimeout(refreshTimeoutWeb.current);
     //         tokenRefreshWeb();
-    //         console.log('debugging cookie set');
     //       })
     //       .catch((error) => {
-    //         console.log('debugging error', error);
     //       });
     //   }, timeout);
     // } else if (!authenticated && $config.ENABLE_IDP_AUTH && isWeb()) {
     //   //not authenticated
     //   if (refreshTimeoutWeb.current) {
-    //     console.log('debugging clearing the interval');
     //     clearTimeout(refreshTimeoutWeb.current);
     //   } else {
-    //     console.log('debugging no interval to clear');
     //   }
     // }
   };
@@ -136,20 +138,18 @@ const AuthProvider = (props: AuthProviderProps) => {
   }, [store?.token]);
 
   const deepLinkUrl = (link: string | null) => {
-    console.log('debugging Deep-linking url: ', link);
-
     if (link !== null) {
       //deeplinking handling with authentication enabled
       if ($config.ENABLE_IDP_AUTH) {
         const url = processDeepLinkURI(link);
-        console.log('debugging Deep-linking processed url', url);
         try {
           //login link expiry fix
           if (url?.indexOf('msg') !== -1) {
             //adding time delay to open in app browser
             Toast.show({
+              leadingIconName: 'alert',
               type: 'error',
-              text1: 'Your session has timed out, Retrying...',
+              text1: timeoutHeading,
               visibilityTime: 3000,
             });
             setTimeout(() => {
@@ -158,7 +158,6 @@ const AuthProvider = (props: AuthProviderProps) => {
           } else if (url?.indexOf('authorize') !== -1) {
             const token = getParamFromURL(url, 'token');
             if (token) {
-              console.log('debugging deep-linking got token');
               enableTokenAuth(token)
                 .then(() => {
                   setIsAuthenticated(true);
@@ -188,7 +187,6 @@ const AuthProvider = (props: AuthProviderProps) => {
         }
       } else {
         //deeplinking handling with authentication enabled
-        console.log('debugging path', processDeepLinkURI(link));
         const url = processDeepLinkURI(link);
         setReturnTo(url);
       }
@@ -200,9 +198,7 @@ const AuthProvider = (props: AuthProviderProps) => {
     if (isIOS() || isAndroid()) {
       const deepLink = async () => {
         const initialUrl = await Linking.getInitialURL();
-        console.log('debugging getting initialUrl', initialUrl);
-        Linking.addEventListener('url', (e) => {
-          console.log('debugging url from listener', e.url);
+        Linking.addEventListener('url', e => {
           deepLinkUrl(e.url);
         });
         deepLinkUrl(initialUrl);
@@ -216,7 +212,7 @@ const AuthProvider = (props: AuthProviderProps) => {
       regEvent.current = false;
       SDKMethodEventsManager.on('login', async (res, rej, token) => {
         try {
-          setStore((prevState) => {
+          setStore(prevState => {
             return {...prevState, token};
           });
           setTimeout(async () => {
@@ -224,7 +220,7 @@ const AuthProvider = (props: AuthProviderProps) => {
               .then(() => {
                 res();
               })
-              .catch((error) => {
+              .catch(error => {
                 rej('SDK Login failed' + JSON.stringify(error));
               });
           });
@@ -244,6 +240,7 @@ const AuthProvider = (props: AuthProviderProps) => {
 
     if (!isSDK() && $config.ENABLE_TOKEN_AUTH) {
       Toast.show({
+        leadingIconName: 'alert',
         type: 'error',
         text1: 'Token Server Authentication only supports SDK integration',
         text2: 'Please use Auth0 Authentication.',
@@ -252,6 +249,7 @@ const AuthProvider = (props: AuthProviderProps) => {
     }
     if (isSDK() && $config.ENABLE_IDP_AUTH) {
       Toast.show({
+        leadingIconName: 'alert',
         type: 'error',
         text1: 'Auth0 Authentication does not support SDK integration',
         text2: 'Please use Token Server Authentication.',
@@ -263,6 +261,7 @@ const AuthProvider = (props: AuthProviderProps) => {
   useEffect(() => {
     if (!authenticated && authError) {
       Toast.show({
+        leadingIconName: 'alert',
         type: 'error',
         text1: authError,
         visibilityTime: 3000,
@@ -285,7 +284,8 @@ const AuthProvider = (props: AuthProviderProps) => {
 
   useEffect(() => {
     // Ignore if on sdk since IDP flow is not supported
-    if (isSDK()) {
+    // For unauthenticated flow authLogin should be called to get the token
+    if (isSDK() && ENABLE_AUTH) {
       setIsAuthenticated(true);
       setLoading(false);
       return () => {};
@@ -300,7 +300,7 @@ const AuthProvider = (props: AuthProviderProps) => {
     ) {
       //fetch user details
       getUserDetails()
-        .then((_) => {
+        .then(_ => {
           //Each time user refresh the page we have to redirect the user to IDP login.then only we can able to refresh the token
           //because we can't read the cookie so we don't know expirytime.
           //so each time page refresh will get new token
@@ -319,8 +319,9 @@ const AuthProvider = (props: AuthProviderProps) => {
     } else {
       if (location?.search?.indexOf('msg') !== -1) {
         Toast.show({
+          leadingIconName: 'alert',
           type: 'error',
-          text1: 'Your session has timed out, Retrying...',
+          text1: timeoutHeading,
           visibilityTime: 3000,
         });
         setTimeout(() => {
@@ -350,6 +351,7 @@ const AuthProvider = (props: AuthProviderProps) => {
             : isIOS() || isAndroid()
             ? deepLinkUrl
             : '',
+          timeoutHeading,
         )?.then((response: any) => {
           if (isAndroid() || isIOS()) {
             if (response && response?.showNativePopup) {
@@ -363,11 +365,11 @@ const AuthProvider = (props: AuthProviderProps) => {
       //AUTH -> IDP -> SDK ONLY
       else if ($config.ENABLE_TOKEN_AUTH && isSDK()) {
         enableTokenAuth()
-          .then((res) => {
+          .then(res => {
             setIsAuthenticated(true);
             history.push('/create');
           })
-          .catch((error) => {
+          .catch(error => {
             //don't show token expire/not found toast in the sdk
             //we have event emitter to inform the customer application
             //they have to listen for those events
@@ -389,8 +391,8 @@ const AuthProvider = (props: AuthProviderProps) => {
       fetch(GET_UNAUTH_FLOW_API_ENDPOINT(), {
         credentials: 'include',
       })
-        .then((response) => response.json())
-        .then((response) => {
+        .then(response => response.json())
+        .then(response => {
           // unauthenticated flow all platform we will have to handle the token manually
           // we need to store token manually
           if (!response.token) {
@@ -398,10 +400,9 @@ const AuthProvider = (props: AuthProviderProps) => {
           } else {
             enableTokenAuth(response.token)
               .then(() => {
-                console.log('debugging token auth enabled');
                 //set auth enabled on useEffect
               })
-              .catch((error) => {
+              .catch(error => {
                 //we don't need to show token expire/not found toast in the sdk
                 //we have event emitter to inform the customer application
                 //they have to listen for those events
@@ -416,7 +417,7 @@ const AuthProvider = (props: AuthProviderProps) => {
               });
           }
         })
-        .catch((error) => {
+        .catch(error => {
           if (error instanceof Error) {
             setAuthError(error.message);
           } else {
@@ -430,8 +431,7 @@ const AuthProvider = (props: AuthProviderProps) => {
   const authLogout = () => {
     if (ENABLE_AUTH && $config.ENABLE_IDP_AUTH && !isSDK()) {
       idpLogout(isAndroid() || isIOS() ? setShowNativePopup : {})
-        .then((res) => {
-          console.log('user successfully logged out');
+        .then(res => {
           setIsAuthenticated(false);
         })
         .catch(() => {
@@ -450,9 +450,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         history.push('/create');
       } else {
         tokenLogout()
-          .then((res) => {
-            console.log('user successfully logged out');
-          })
+          .then(res => {})
           .catch(() => {
             console.error('user logout failed');
             setAuthError('Error occured on Logout, please try again.');
@@ -490,7 +488,7 @@ const AuthProvider = (props: AuthProviderProps) => {
         <></>
       )}
       {(!authenticated && !ENABLE_AUTH) || (ENABLE_AUTH && loading) ? (
-        <Loading text={'Loading...'} />
+        <Loading text={loadingLabel} />
       ) : (
         props.children
       )}

package/template/src/auth/AuthRoute.tsx

@@ -18,21 +18,29 @@ import isSDK from '../utils/isSDK';
 import Loading from '../subComponents/Loading';
 import Login from '../pages/Login';
 import {isAndroid, isIOS} from '../utils/common';
+import {useString} from '../utils/useString';
+import {
+  authAuthenticationFailedText,
+  loadingText,
+} from '../language/default-labels/commonLabels';
 
 interface PrivateRouteProps extends RouteProps {
   children: React.ReactNode;
 }
 
-const AuthRoute: React.FC<PrivateRouteProps> = (props) => {
+const AuthRoute: React.FC<PrivateRouteProps> = props => {
   const didMountRef = useRef(false);
   const {authenticated} = useAuth();
+  const loadingLabel = useString(loadingText)();
+  const failedtext = useString(authAuthenticationFailedText)();
 
   useEffect(() => {
     if (!didMountRef.current) return;
     if (!authenticated) {
       Toast.show({
+        leadingIconName: 'alert',
         type: 'error',
-        text1: 'Authentication failed',
+        text1: failedtext,
         visibilityTime: 1000,
       });
     }
@@ -55,7 +63,7 @@ const AuthRoute: React.FC<PrivateRouteProps> = (props) => {
     //if user closes inapp browser then show login/signup button
     //  <Login />
     //)
-    <Loading text={'Loading...'} />
+    <Loading text={loadingLabel} />
   );
   // <Redirect
   //   to={{

package/template/src/auth/IDPAuth.electron.tsx

@@ -3,20 +3,21 @@ import {useAuth} from './AuthProvider';
 import {useHistory, useParams} from '../components/Router';
 import Loading from '../subComponents/Loading';
 import useTokenAuth from './useTokenAuth';
+import {useString} from '../utils/useString';
+import {authAuthorizingApplicationText} from '../language/default-labels/commonLabels';
 
 export const IDPAuth = () => {
   const {setIsAuthenticated} = useAuth();
   const {enableTokenAuth} = useTokenAuth();
   const history = useHistory();
   const {token}: {token: string} = useParams();
+  const text = useString(authAuthorizingApplicationText)();
 
   useEffect(() => {
-    console.log('debugging electron token', token);
     if (token) {
       enableTokenAuth(token)
         .then(() => {
           setIsAuthenticated(true);
-          console.log('debugging electron login success');
           history.push('/');
         })
         .catch(() => {
@@ -26,5 +27,5 @@ export const IDPAuth = () => {
     }
   }, []);
 
-  return <Loading text={'Authorizing app...'} />;
+  return <Loading text={text} />;
 };

package/template/src/auth/IDPAuth.tsx

@@ -6,8 +6,15 @@ import {useApolloClient} from '@apollo/client';
 import Toast from '../../react-native-toast-message';
 import {getParamFromURL} from '../utils/common';
 import useTokenAuth from './useTokenAuth';
+import {useString} from '../utils/useString';
+import {
+  authAuthorizingApplicationText,
+  authErrorOnLoginToastHeading,
+} from '../language/default-labels/commonLabels';
 
 export const IDPAuth = () => {
+  const toastheading = useString(authErrorOnLoginToastHeading)();
+  const text = useString(authAuthorizingApplicationText)();
   const {setIsAuthenticated, authLogin} = useAuth();
   const history = useHistory();
   const {token: returnTo}: {token: string} = useParams();
@@ -45,8 +52,9 @@ export const IDPAuth = () => {
     } else {
       setIsAuthenticated(false);
       Toast.show({
+        leadingIconName: 'alert',
         type: 'error',
-        text1: 'Error occured on Login, Please login again.',
+        text1: toastheading,
         visibilityTime: 3000,
       });
       setTimeout(() => {
@@ -55,5 +63,5 @@ export const IDPAuth = () => {
     }
   }, []);
 
-  return <Loading text={'Authorizing app...'} />;
+  return <Loading text={text} />;
 };

package/template/src/auth/IDPLogoutComponent.tsx

@@ -8,6 +8,14 @@ import {isMobileUA, useIsDesktop} from '../utils/common';
 import TertiaryButton from '../atoms/TertiaryButton';
 import isSDK from '../utils/isSDK';
 import {useAuth} from './AuthProvider';
+import {useString} from '../utils/useString';
+import {
+  authLogoutPopupHeading,
+  authLogoutPopupPrimaryBtnText,
+  authLogoutPopupSubHeading,
+  cancelText,
+  logoutText,
+} from '../language/default-labels/commonLabels';
 
 interface LogoutPopupProps {
   modalVisible: boolean;
@@ -16,11 +24,11 @@ interface LogoutPopupProps {
 }
 const LogoutPopup = (props: LogoutPopupProps) => {
   const isDesktop = useIsDesktop()('popup');
-  const logoutLabelHeading = 'Logout?';
-  const logoutLabelSubHeading = 'Are you sure you wanna log out?';
+  const logoutLabelHeading = useString(authLogoutPopupHeading)();
+  const logoutLabelSubHeading = useString(authLogoutPopupSubHeading)();
 
-  const cancelBtnLabel = 'CANCEL';
-  const confirmBtnLabel = 'CONFIRM';
+  const cancelBtnLabel = useString(cancelText)();
+  const confirmBtnLabel = useString(authLogoutPopupPrimaryBtnText)();
   return (
     <Popup
       modalVisible={props.modalVisible}
@@ -114,6 +122,7 @@ interface IDPLogoutComponentProps {
 }
 
 const IDPLogoutComponent = (props?: IDPLogoutComponentProps) => {
+  const logoutLabel = useString(logoutText)();
   const {authenticated, authLogout} = useAuth();
   const [modalVisible, setModalVisible] = useState(false);
   return authenticated && $config.ENABLE_IDP_AUTH && !isSDK() ? (
@@ -136,7 +145,7 @@ const IDPLogoutComponent = (props?: IDPLogoutComponentProps) => {
         setModalVisible={setModalVisible}
       />
       <TertiaryButton
-        text="Logout"
+        text={logoutLabel}
         onPress={() => {
           setModalVisible(true);
         }}

package/template/src/auth/UserCancelPopup.tsx

@@ -6,6 +6,13 @@ import PrimaryButton from '../atoms/PrimaryButton';
 import ThemeConfig from '../theme';
 import {useIsDesktop} from '../utils/common';
 import TertiaryButton from '../atoms/TertiaryButton';
+import {useString} from '../utils/useString';
+import {
+  authLogInRequiredPopupHeading,
+  authLogInRequiredPopupPrimaryBtnText,
+  authLogInRequiredPopupSecondaryBtnText,
+  authLogInRequiredPopupSubHeading,
+} from '../language/default-labels/commonLabels';
 
 interface UserCancelPopupProps {
   modalVisible: boolean;
@@ -15,11 +22,11 @@ interface UserCancelPopupProps {
 }
 const UserCancelPopup = (props: UserCancelPopupProps) => {
   const isDesktop = useIsDesktop()('popup');
-  const logoutLabelHeading = 'Login Required';
-  const logoutLabelSubHeading = 'Log-in to your organization to contiue';
+  const logoutLabelHeading = useString(authLogInRequiredPopupHeading)();
+  const logoutLabelSubHeading = useString(authLogInRequiredPopupSubHeading)();
 
-  const closeAppBtnLabel = 'CLOSE APP';
-  const loginBtnLabel = 'LOGIN';
+  const loginBtnLabel = useString(authLogInRequiredPopupPrimaryBtnText)();
+  const closeAppBtnLabel = useString(authLogInRequiredPopupSecondaryBtnText)();
   return (
     <Popup
       cancelable={false}

package/template/src/auth/openIDPURL.electron.tsx

@@ -8,7 +8,7 @@ export const getIDPAuthLoginURL = () => {
   }&origin_url=${getOriginURL()}&platform_id=${getPlatformId()}`;
 };
 
-export const addEventListenerForToken = (history) => {
+export const addEventListenerForToken = (history, heading) => {
   window.addEventListener(
     'message',
     ({data, origin}: {data: {token: string; msg: string}; origin: string}) => {
@@ -16,8 +16,9 @@ export const addEventListenerForToken = (history) => {
         history.push(`/authorize/${data.token}`);
       } else if (data?.msg && data?.msg === 'login_link_expired') {
         Toast.show({
+          leadingIconName: 'alert',
           type: 'error',
-          text1: 'Your session has timed out, Retrying...',
+          text1: heading ? heading : 'Your session has timed out, Retrying...',
           visibilityTime: 3000,
         });
         setTimeout(() => {
@@ -30,8 +31,8 @@ export const addEventListenerForToken = (history) => {
   );
 };
 
-export const enableIDPAuth = async (history) => {
-  addEventListenerForToken(history);
+export const enableIDPAuth = async (history, heading) => {
+  addEventListenerForToken(history, heading);
   //open the auth login in the popup
   window.open(getIDPAuthLoginURL(), 'modal');
 };

package/template/src/auth/openIDPURL.tsx

@@ -13,7 +13,7 @@ export const getIDPAuthLoginURL = (returnTo?: any) => {
   }&redirect_url=${finalRedirectURL}&origin_url=${getOriginURL()}&platform_id=${getPlatformId()}`;
 };
 
-export const enableIDPAuth = async (returnTo?: any) => {
+export const enableIDPAuth = async (returnTo?: any, heading?: string) => {
   Linking.openURL(getIDPAuthLoginURL(returnTo));
 };
 

package/template/src/auth/useIDPAuth.electron.tsx

@@ -7,10 +7,13 @@ import {
 import StorageContext from '../components/StorageContext';
 import useTokenAuth from './useTokenAuth';
 import {useHistory} from '../components/Router';
+import {useString} from '../utils/useString';
+import {authSessionTimeoutToastHeading} from '../language/default-labels/commonLabels';
 
 export const useIDPAuth = () => {
   const {store, setStore} = useContext(StorageContext);
   const {tokenLogout} = useTokenAuth();
+  const headingText = useString(authSessionTimeoutToastHeading)();
   const history = useHistory();
   const idpLogout = () => {
     return new Promise((resolve, reject) => {
@@ -21,7 +24,7 @@ export const useIDPAuth = () => {
             authorization: store?.token ? `Bearer ${store?.token}` : '',
           },
         })
-          .then((response) => response.json())
+          .then(response => response.json())
           .then((res: any) => {
             if (res && res?.url) {
               //Storing the URL in the local variable
@@ -33,7 +36,7 @@ export const useIDPAuth = () => {
               tokenLogout()
                 .then(() => {
                   //call IDP logout url
-                  addEventListenerForToken(history);
+                  addEventListenerForToken(history, headingText);
                   setTimeout(() => {
                     window.open(IDPAuthLogoutURL, 'modal');
                   });
@@ -46,7 +49,7 @@ export const useIDPAuth = () => {
               reject(false);
             }
           })
-          .catch((_) => {
+          .catch(_ => {
             reject(false);
           });
       } catch (error) {

package/template/src/auth/useIDPAuth.tsx

@@ -30,10 +30,6 @@ export const useIDPAuth = () => {
                 `&returnTo=${encodeURIComponent(
                   getIDPAuthLoginURL(location.pathname),
                 )}`;
-              console.log(
-                'debugging non native IDPAuthLogoutURL',
-                IDPAuthLogoutURL,
-              );
               //manage backend logout
               //it will invalid the user session from the manage backend
               //cookie logout -> true

package/template/src/auth/useTokenAuth.tsx

@@ -12,12 +12,13 @@ const useTokenAuth = () => {
   const [tokenExpiresAt, setTokenExpiresAt] = React.useState(0);
   const timerRef = useRef(null);
   const updateToken = (token: string) => {
-    setStore && setStore((store) => ({...store, token}));
+    setStore && setStore(store => ({...store, token}));
   };
 
   const validateToken = (token: string) => {
     if (token && token.trim() !== '') {
       const decoded = jwt_decode(token);
+      // @ts-ignore
       const expiresAt = decoded?.exp * 1000;
       if (Date.now() >= expiresAt) {
         if (isSDK()) {
@@ -44,8 +45,8 @@ const useTokenAuth = () => {
           'X-Platform-ID': getPlatformId(),
         },
       })
-        .then((response) => response.json())
-        .then((data) => {
+        .then(response => response.json())
+        .then(data => {
           if (data?.token) {
             updateToken(data.token);
             if (isSDK()) {
@@ -54,7 +55,7 @@ const useTokenAuth = () => {
           }
         });
     } else {
-      console.log('debugging no token to refresh');
+      //'debugging no token to refresh'
     }
   };
 
@@ -99,12 +100,13 @@ const useTokenAuth = () => {
         }
       } else {
         const decoded = jwt_decode(store.token);
+        // @ts-ignore
         const expiresAt = decoded?.exp * 1000;
         if (Date.now() >= expiresAt) {
           if (isSDK()) {
             SdkEvents.emit('did-token-expire');
           }
-          console.log('token expired');
+          //token expired
         } else {
           setTokenExpiresAt(expiresAt);
         }
@@ -169,12 +171,12 @@ const useTokenAuth = () => {
                 },
               },
         )
-          .then((response) => response.text())
-          .then((_) => {
+          .then(response => response.text())
+          .then(_ => {
             resolve(true);
             updateToken(null);
           })
-          .catch((_) => {
+          .catch(_ => {
             reject(false);
           });
       } catch (error) {