@truworth/twc-auth 3.0.12 → 3.0.13

package/build/src/screens/SSOLogin/AuthenticationMethods/hooks/internal/useSSOAuthenticationMethods.js

@@ -1,7 +1,7 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { axiosClient } from "../../../../../api/axiosClient";
 import { showMessage } from "../../../../../helpers/show-message";
-const useSSOAuthenticationMethods = () => {
+const useSSOAuthenticationMethods = ({ client }) => {
     const [loading, setLoading] = useState(false);
     const isMountedRef = useRef(true);
     useEffect(() => {
@@ -34,6 +34,30 @@ const useSSOAuthenticationMethods = () => {
             }
         });
     };
-    return { loading, initiateSSOLogin };
+    const headingText = useMemo(() => {
+        if (client?.ssoEnabled && client?.mobileLoginEnabled) {
+            return `Choose how to sign in`;
+        }
+        if (client?.ssoEnabled) {
+            return `Sign in with your organization account`;
+        }
+        if (client?.mobileLoginEnabled) {
+            return `Sign in with your mobile number`;
+        }
+        return 'No Single Sign-On methods are available';
+    }, [client?.ssoEnabled, client?.mobileLoginEnabled]);
+    const subHeadingText = useMemo(() => {
+        if (!client?.ssoEnabled && !client?.mobileLoginEnabled) {
+            return 'Your organization has not configured any single sign-on methods yet. Please contact your administrator.';
+        }
+        return null;
+    }, [client?.ssoEnabled, client?.mobileLoginEnabled]);
+    return {
+        loading,
+        initiateSSOLogin,
+        headingText,
+        subHeadingText,
+        hasMultipleLoginOptions: client?.ssoEnabled && client?.mobileLoginEnabled,
+    };
 };
 export { useSSOAuthenticationMethods };

package/build/src/screens/SSOLogin/AuthenticationMethods/index.js

@@ -6,9 +6,9 @@ import { ScreenLayout } from "../../../components/ScreenLayout";
 import { CDN_IMAGES_URL } from "../../../constants/cdn-url";
 import { showMessage } from "../../../helpers/show-message";
 import React from "react";
-import { KeyRound, MailIcon, Smartphone } from "lucide-react";
+import { KeyRound, Smartphone } from "lucide-react";
 const SSOAuthenticationMethods = ({ client, onPressBack, handleMobileLogin }) => {
-    const { loading, initiateSSOLogin } = useSSOAuthenticationMethods();
+    const { loading, initiateSSOLogin, hasMultipleLoginOptions, headingText, subHeadingText } = useSSOAuthenticationMethods({ client });
     const { LogoComponent } = useAuthPackageContext();
     const renderLogo = () => {
         if (!LogoComponent) {
@@ -40,11 +40,13 @@ const SSOAuthenticationMethods = ({ client, onPressBack, handleMobileLogin }) =>
     };
     return (_jsx(ScreenLayout, { onPressBack: onPressBack, title: _jsxs(Flex, { direction: "column", children: [client?.image ?
                     _jsx("img", { src: client?.image, width: 175, height: 117, alt: `${client?.name ?? 'Client'} logo` })
-                    : renderLogo(), _jsx(Typography, { type: "heading", size: "h5", className: "my-6", children: "Select how to sign-in" }), client?.ssoEnabled &&
-                    _jsxs(_Fragment, { children: [_jsx(Button, { label: "Login with SSO", isFullWidth: true, variant: "primary", leftIcon: _jsx(KeyRound, {}), onClick: () => initiateSSOLogin({
-                                    clientId: client.id,
-                                    onSSOLoginInitiated
-                                }), loading: loading }), _jsx(Typography, { type: "body", size: "large", className: "mt-6 text-gray-600", children: "Recommended for quick access" }), _jsxs(Flex, { align: "center", className: "my-4", children: [_jsx(Flex, { className: "flex-1 border-t border-gray-300" }), _jsx(Typography, { type: 'body', size: 'small', className: "text-gray-500 px-4", children: "OR" }), _jsx(Flex, { className: "flex-1 border-t border-gray-300" })] })] }), _jsx(Button, { label: "Login with Email & Password", isFullWidth: true, variant: "secondary", leftIcon: _jsx(MailIcon, {}), onClick: onPressBack }), client?.mobileLoginEnabled &&
-                    _jsx(Button, { label: "Login with Mobile Number", isFullWidth: true, className: "mt-6", leftIcon: _jsx(Smartphone, {}), variant: "text", onClick: handleMobileLogin })] }) }));
+                    : renderLogo(), _jsx(Typography, { type: "heading", size: "h5", className: "mb-4 mt-6", children: headingText }), subHeadingText &&
+                    _jsx(Typography, { type: "body", size: "large", className: "text-gray-600", children: subHeadingText }), client?.ssoEnabled &&
+                    _jsx(Button, { label: "Login with SSO", isFullWidth: true, variant: "primary", leftIcon: _jsx(KeyRound, {}), onClick: () => initiateSSOLogin({
+                            clientId: client.id,
+                            onSSOLoginInitiated
+                        }), loading: loading }), hasMultipleLoginOptions &&
+                    _jsxs(_Fragment, { children: [_jsx(Typography, { type: "body", size: "large", className: "mt-6 text-gray-600", children: "Recommended for quick access" }), _jsxs(Flex, { align: "center", className: "my-4", children: [_jsx(Flex, { className: "flex-1 border-t border-gray-300" }), _jsx(Typography, { type: 'body', size: 'small', className: "text-gray-500 px-4", children: "OR" }), _jsx(Flex, { className: "flex-1 border-t border-gray-300" })] })] }), client?.mobileLoginEnabled &&
+                    _jsx(Button, { label: "Login with Mobile Number", isFullWidth: true, className: "mt-6", leftIcon: _jsx(Smartphone, {}), variant: "secondary", onClick: handleMobileLogin })] }) }));
 };
 export default SSOAuthenticationMethods;

package/build/src/screens/SSOLogin/AuthenticationMethods/index.native.js

@@ -13,9 +13,9 @@ const { primary, gray } = Colors;
 const SSOAuthenticationMethods = ({ route }) => {
     const { client } = route.params;
     const [aspectRatio, setAspectRatio] = useState(1);
-    const { loading, initiateSSOLogin } = useSSOAuthenticationMethods();
-    const { LogoComponent } = useAuthPackageContext();
+    const { loading, initiateSSOLogin, hasMultipleLoginOptions, headingText, subHeadingText } = useSSOAuthenticationMethods({ client });
     const navigation = useNavigation();
+    const { LogoComponent } = useAuthPackageContext();
     useEffect(() => {
         if (client.image) {
             Image.getSize(client.image, (width, height) => {
@@ -52,8 +52,23 @@ const SSOAuthenticationMethods = ({ route }) => {
     };
     return (_jsx(ScreenLayout, { title: "", containerStyle: { flex: 1, backgroundColor: primary.white }, children: _jsxs(View, { style: { flex: 1, justifyContent: 'center' }, children: [client.image ?
                     _jsx(FastImage, { source: { uri: client.image }, resizeMode: 'contain', style: { width: 180, aspectRatio: aspectRatio, alignSelf: 'center', marginTop: -150 } })
-                    : renderLogo(), _jsx(Text, { style: { textAlign: 'center', fontSize: 24, fontWeight: '600', color: gray.gray_700, marginTop: 30 }, children: "Select how to sign-in" }), client?.ssoEnabled &&
-                    _jsxs(_Fragment, { children: [_jsx(RoundedButton, { loading: loading, type: 'primary', label: 'Login with SSO', size: 'large', containerStyle: { marginTop: 40 }, onPress: () => initiateSSOLogin({ clientId: client.id, onSSOLoginInitiated }), leftIcon: 'key-outline' }), _jsx(Text, { style: { textAlign: 'center', fontSize: 14, color: gray.gray_700, marginTop: 20 }, children: "Recommended for quick access" }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 30, marginHorizontal: 30 }, children: [_jsx(View, { style: { flex: 1, height: 1, backgroundColor: gray.gray_200 } }), _jsx(View, { children: _jsx(Text, { style: { width: 50, textAlign: 'center', color: gray.gray_500, fontSize: 16 }, children: "OR" }) }), _jsx(View, { style: { flex: 1, height: 1, backgroundColor: gray.gray_200 } })] })] }), _jsx(RoundedButton, { type: 'secondary', label: 'Login with Email & Password', size: 'large', containerStyle: { marginTop: 30 }, onPress: () => navigation.popTo('EnterEmail'), leftIcon: 'mail-outline' }), client?.mobileLoginEnabled &&
-                    _jsx(RoundedButton, { type: 'text', label: 'Login with Mobile Number', size: 'large', containerStyle: { marginHorizontal: 16, marginTop: 30 }, onPress: () => navigation.navigate('EnterMobile'), leftIcon: 'phone-portrait-outline' })] }) }));
+                    : renderLogo(), _jsx(Text, { style: { textAlign: 'center', fontSize: 18, fontWeight: '600', color: gray.gray_700, marginTop: 30, lineHeight: 32 }, children: headingText }), subHeadingText &&
+                    _jsx(Text, { style: {
+                            textAlign: 'center',
+                            fontSize: 16,
+                            lineHeight: 22,
+                            color: gray.gray_600,
+                            marginTop: 12,
+                            marginHorizontal: 32,
+                        }, children: subHeadingText }), client?.ssoEnabled &&
+                    _jsx(RoundedButton, { loading: loading, type: 'primary', label: 'Login with SSO', size: 'large', containerStyle: { marginTop: 18 }, onPress: () => initiateSSOLogin({
+                            clientId: client.id,
+                            onSSOLoginInitiated,
+                        }), leftIcon: 'key-outline' }), hasMultipleLoginOptions &&
+                    _jsxs(_Fragment, { children: [_jsx(Text, { style: { textAlign: 'center', fontSize: 14, color: gray.gray_700, marginTop: 20, }, children: "Recommended for quick access" }), _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 30, marginHorizontal: 30 }, children: [_jsx(View, { style: { flex: 1, height: 1, backgroundColor: gray.gray_200, } }), _jsx(Text, { style: { width: 50, textAlign: 'center', color: gray.gray_500, fontSize: 16, }, children: "OR" }), _jsx(View, { style: { flex: 1, height: 1, backgroundColor: gray.gray_200, } })] })] }), client?.mobileLoginEnabled &&
+                    _jsx(RoundedButton, { type: 'secondary', label: 'Login with Mobile Number', size: 'large', containerStyle: {
+                            marginHorizontal: 16,
+                            marginTop: 30
+                        }, onPress: () => navigation.navigate('EnterMobile'), leftIcon: 'phone-portrait-outline' })] }) }));
 };
 export default SSOAuthenticationMethods;

package/build/types/screens/SSOLogin/AuthenticationMethods/hooks/internal/useSSOAuthenticationMethods.d.ts

@@ -1,9 +1,15 @@
 import type { SSOInitiationData } from "../../types";
-declare const useSSOAuthenticationMethods: () => {
+import type { Client } from "../../../../../types/types";
+declare const useSSOAuthenticationMethods: ({ client }: {
+    client: Client;
+}) => {
     loading: boolean;
     initiateSSOLogin: ({ clientId, onSSOLoginInitiated }: {
         clientId: number;
         onSSOLoginInitiated: (data: SSOInitiationData) => void;
     }) => void;
+    headingText: string;
+    subHeadingText: string | null;
+    hasMultipleLoginOptions: boolean;
 };
 export { useSSOAuthenticationMethods };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "description": "Truworth Auth Package for React Native and Web",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "main": "build/src/index.js",
   "types": "build/types/index.d.ts",
   "files": [