@truworth/twc-auth 1.2.2 → 1.2.3

package/build/src/components/PasswordCriteria/hooks/usePasswordCriteria.js

@@ -1,13 +1,6 @@
 import { useEffect, useState } from "react";
 import { axiosClient } from "../../../api/axiosClient";
-const defaultPolicy = {
-    minLength: 6,
-    maxLength: 30,
-    numbers: true,
-    uppercase: true,
-    lowercase: true,
-    specialCharacters: true,
-};
+import { defaultPolicy } from "../../../constants/defaultPolicy";
 const usePasswordCriteria = ({ email, password, onCriteriaChange, onMaxLengthChange }) => {
     const { maxLength: defaultMaxLength, ...restDefaultPolicy } = defaultPolicy;
     const [loading, setLoading] = useState(false);

package/build/src/components/PasswordCriteria/index.native.js

@@ -4,7 +4,7 @@ import { Text, View } from 'react-native';
 import { usePasswordCriteria } from './hooks/usePasswordCriteria';
 const { gray, utility } = Colors;
 const PasswordCriteria = ({ email, password, criteria, onCriteriaChange, onMaxLengthChange }) => {
-    const { passwordPolicy, loading, renderLabel, } = usePasswordCriteria({ email, password, onCriteriaChange, onMaxLengthChange });
+    const { loading, passwordPolicy, renderLabel, } = usePasswordCriteria({ email, password, onCriteriaChange, onMaxLengthChange });
     const getCriteriaColor = (isValid) => (isValid ? utility.success_main : gray.gray_600);
     const getCriteriaBackground = (isValid) => (isValid ? utility.success_bg : gray.gray_100);
     return (_jsx(View, { style: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', alignContent: 'space-between', marginTop: 8 }, children: Object.keys(passwordPolicy).map((item, index) => (loading
@@ -13,10 +13,10 @@ const PasswordCriteria = ({ email, password, criteria, onCriteriaChange, onMaxLe
                 _jsx(View, { style: {
                         marginRight: 8, marginTop: 8, borderRadius: 32,
                         paddingVertical: 4, paddingHorizontal: 12,
-                        backgroundColor: getCriteriaBackground(criteria[item]),
+                        backgroundColor: getCriteriaBackground(Boolean(criteria[item])),
                     }, children: _jsx(Text, { style: {
                             fontSize: 12, fontWeight: '500',
-                            color: getCriteriaColor(criteria[item]),
+                            color: getCriteriaColor(Boolean(criteria[item])),
                         }, children: renderLabel(item) }) }, index))) }));
 };
 export { PasswordCriteria };

package/build/src/components/{EmailOTPVerify → VerifyEmailOTP}/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Flex, OTPInput, Typography } from "@truworth/twc-web-design";
 import { useEffect, useState } from "react";
-const EmailOTPVerify = ({ validateOTP, resendOTP, resendOTPCounter, email, status }) => {
+const VerifyEmailOTP = ({ validateOTP, resendOTP, resendOTPCounter, email, status }) => {
     const [otp, setOtp] = useState('');
     const [otpError, setOtpError] = useState(false);
     useEffect(() => {
@@ -17,4 +17,4 @@ const EmailOTPVerify = ({ validateOTP, resendOTP, resendOTPCounter, email, statu
                 _jsx(Typography, { type: "utility", size: "medium", className: "mt-1", color: "text-utility-danger-main", children: "Please enter the correct OTP." }), (resendOTPCounter < 3) &&
                 _jsxs(Flex, { align: "center", justify: "between", className: 'mt-7', children: [_jsx(Typography, { type: "body", size: "medium", className: "font-semibold", color: "text-gray-400", children: "Didn't receive OTP?" }), _jsx(Button, { variant: 'link', size: 'small', className: "p-0 h-auto", onClick: resendOTP, children: "Resend Code" })] }), _jsx(Button, { label: "Continue", isFullWidth: true, variant: 'primary', className: "mt-7", onClick: () => validateOTP?.(otp), disabled: (otp?.length ?? 0) < 6 })] }));
 };
-export { EmailOTPVerify };
+export { VerifyEmailOTP };

package/build/src/components/{EmailOTPVerify → VerifyEmailOTP}/index.native.js

@@ -1,18 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { Dimensions, Platform, ScrollView, Text, TouchableOpacity, View } from "react-native";
 import { Layout } from "@ui-kitten/components";
 import { Header, Colors, CustomKeyboardAvoidingView } from "@truworth/twc-rn-common";
 import { ScreenLayout } from "../ScreenLayout";
 import { OTPStatusLabel } from "../OTPStatusLabel/index.native";
 import OTPInputView from "@twotalltotems/react-native-otp-input";
-const EmailOTPVerify = ({ status, validateOTP, resendOTP, resendOTPCounter, email }) => {
-    const [otp, setOTP] = useState('');
-    useEffect(() => {
-        if (otp && otp.length === 6) {
-            validateOTP?.(otp);
-        }
-    }, [otp]);
+const VerifyEmailOTP = ({ email, status, validateOTP, resendOTP, resendOTPCounter }) => {
     return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#fff' }, children: [_jsx(Header, {}), _jsxs(CustomKeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: Platform.OS === 'ios' ? 100 : 0, children: [_jsx(ScrollView, { showsVerticalScrollIndicator: false, children: _jsxs(ScreenLayout, { hideHeader: true, title: _jsxs(_Fragment, { children: ["OTP sent to ", '\n', _jsx(Text, { style: { fontSize: 20 }, children: email })] }), children: [_jsx(View, { style: { justifyContent: 'center', flexDirection: 'row', marginBottom: 30, position: 'relative' }, children: _jsx(OTPInputView, { pinCount: 6, autoFocusOnLoad: false, codeInputFieldStyle: {
                                             fontSize: 20, color: 'black',
                                             height: 45, width: 30,
@@ -20,7 +13,7 @@ const EmailOTPVerify = ({ status, validateOTP, resendOTP, resendOTPCounter, emai
                                         }, codeInputHighlightStyle: { borderColor: '#03DAC6' }, style: {
                                             height: 50,
                                             width: Dimensions.get('window').width - 100,
-                                        }, onCodeFilled: code => setOTP(code) }) }), resendOTPCounter < 3 &&
+                                        }, onCodeFilled: code => validateOTP(code) }) }), resendOTPCounter < 3 &&
                                     _jsxs(View, { style: { flexDirection: 'row', alignItems: 'center' }, children: [_jsxs(Text, { style: { fontSize: 14, fontWeight: '500', color: Colors.gray.gray_400, lineHeight: 20 }, children: ["Did not receive OTP?", ' '] }), _jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: resendOTP, children: _jsx(Text, { style: { fontSize: 14, fontWeight: '500', color: '#2cbaa4', lineHeight: 20 }, children: "Re-send OTP" }) })] })] }) }), _jsx(View, { style: { alignSelf: 'flex-end', width: '100%' }, children: _jsx(OTPStatusLabel, { status: status }) })] })] }));
 };
-export { EmailOTPVerify };
+export { VerifyEmailOTP };

package/build/src/components/{VerifyOTP → VerifyMobileOTP}/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Button, Flex, OTPInput, Typography } from "@truworth/twc-web-design";
-const OTPVerify = ({ validateOTP, timer, resendOTP, phone, status, resendTextClassName }) => {
+const VerifyMobileOTP = ({ validateOTP, timer, resendOTP, phone, status, resendTextClassName }) => {
     const [otp, setOtp] = useState('');
     const [otpError, setOtpError] = useState(false);
     useEffect(() => {
@@ -20,4 +20,4 @@ const OTPVerify = ({ validateOTP, timer, resendOTP, phone, status, resendTextCla
                 :
                     _jsxs(Typography, { type: 'utility', size: 'medium', className: `mt-3 ${resendTextClassName}`, children: ["Resend Code in ", timer > 0 ? `${timer} seconds` : 'OTP expired'] }), _jsx(Button, { label: "Continue", isFullWidth: true, onClick: () => validateOTP?.(otp), disabled: otp ? otp?.length < 6 : true, className: "mt-6" })] }));
 };
-export { OTPVerify };
+export { VerifyMobileOTP };

package/build/src/components/{VerifyOTP → VerifyMobileOTP}/index.native.js

@@ -7,7 +7,7 @@ import { useAuthPackageContext } from '../../hooks/internal/useAuthPackageContex
 import { OTPStatusLabel } from '../OTPStatusLabel/index.native';
 import OTPInputView from '@twotalltotems/react-native-otp-input';
 const { gray } = Colors;
-const OTPVerify = ({ validateOTP, timer, status, resendOTP, phone }) => {
+const VerifyMobileOTP = ({ validateOTP, timer, status, resendOTP, phone }) => {
     const [otp, setOTP] = useState('');
     const { otpValue } = useAuthPackageContext();
     useEffect(() => {
@@ -35,4 +35,4 @@ const OTPVerify = ({ validateOTP, timer, status, resendOTP, phone }) => {
                                                 resendOTP();
                                             }, children: _jsx(Text, { style: { fontSize: 14, color: '#2cbaa4', fontWeight: '400', opacity: 1 }, children: "Re-send OTP" }) })] })] }), _jsx(View, { style: { width: '100%' }, children: _jsx(OTPStatusLabel, { status: status, timer: timer }) })] })] }));
 };
-export { OTPVerify };
+export { VerifyMobileOTP };

package/build/src/constants/defaultPolicy.js

@@ -0,0 +1,9 @@
+const defaultPolicy = {
+    minLength: 6,
+    maxLength: 30,
+    numbers: true,
+    uppercase: true,
+    lowercase: true,
+    specialCharacters: true,
+};
+export { defaultPolicy };

package/build/src/helpers/Network.js

@@ -77,7 +77,7 @@ export const createHttpClient = ({ token, onRefreshSession, onLogout }) => {
     const handleInvalidSession = async () => {
         try {
             await onLogout?.();
-            showMessage('Your session has expired. Please login again.');
+            showMessage({ message: 'Your session has expired. Please login again.' });
         }
         catch (err) {
             console.error('Error logging out:', err);

package/build/src/helpers/show-message/index.js

@@ -1,5 +1,5 @@
 import { showNotification } from "@truworth/twc-web-design";
-const showMessage = (message) => {
+const showMessage = ({ message, type }) => {
     if (message == null)
         return;
     const text = typeof message === 'string'
@@ -10,7 +10,7 @@ const showMessage = (message) => {
                 ? String(message.message)
                 : String(message);
     showNotification({
-        type: 'error',
+        type: type ?? 'error',
         title: text,
         showIcon: false,
         duration: 3000,

package/build/src/helpers/show-message/index.native.js

@@ -1,5 +1,5 @@
 import { Snackbar } from "@truworth/twc-rn-common";
-const showMessage = (message, leftIcon = 'warning') => {
+const showMessage = ({ message, leftIcon = 'warning' }) => {
     if (message == null)
         return;
     const text = typeof message === 'string'

package/build/src/hooks/useRequest.js

@@ -32,7 +32,7 @@ const useRequest = () => {
                 onFailure(err);
             }
             if (err?.response?.status >= 500) {
-                showMessage("Something went wrong");
+                showMessage({ message: "Something went wrong" });
             }
         }
     };

package/build/src/navigator/index.native.js

@@ -9,8 +9,11 @@ import CreatePassword from '../screens/CreatePassword/index.native';
 import UserConsent from '../screens/UserConsent/index.native';
 import VerifyMobile from '../screens/VerifyMobile/index.native';
 import VerifyEmail from '../screens/VerifyEmail/index.native';
+import LoginWithEmailOTP from '../screens/LoginWithEmailOTP/index.native';
+import VerifyResetPasswordOTP from '../screens/VerifyResetPasswordOTP/index.native';
+import ResetPassword from '../screens/ResetPassword/index.native';
 const { Navigator, Screen } = createNativeStackNavigator();
 const AuthNavigator = () => {
-    return (_jsxs(Navigator, { screenOptions: { headerShown: false }, children: [_jsx(Screen, { name: "Welcome", component: Welcome }), _jsx(Screen, { name: "EnterEmail", component: EnterEmail }), _jsx(Screen, { name: "EnterPassword", component: EnterPassword }), _jsx(Screen, { name: "SignUp", component: SignUp }), _jsx(Screen, { name: "CountryCode", component: CountryCode }), _jsx(Screen, { name: "CreatePassword", component: CreatePassword }), _jsx(Screen, { name: "UserConsent", component: UserConsent }), _jsx(Screen, { name: "VerifyMobile", component: VerifyMobile }), _jsx(Screen, { name: "VerifyEmail", component: VerifyEmail })] }));
+    return (_jsxs(Navigator, { screenOptions: { headerShown: false }, children: [_jsx(Screen, { name: "Welcome", component: Welcome }), _jsx(Screen, { name: "EnterEmail", component: EnterEmail }), _jsx(Screen, { name: "EnterPassword", component: EnterPassword }), _jsx(Screen, { name: "SignUp", component: SignUp }), _jsx(Screen, { name: "CountryCode", component: CountryCode }), _jsx(Screen, { name: "CreatePassword", component: CreatePassword }), _jsx(Screen, { name: "UserConsent", component: UserConsent }), _jsx(Screen, { name: "VerifyMobile", component: VerifyMobile }), _jsx(Screen, { name: "VerifyEmail", component: VerifyEmail }), _jsx(Screen, { name: "LoginWithEmailOTP", component: LoginWithEmailOTP }), _jsx(Screen, { name: "VerifyResetPasswordOTP", component: VerifyResetPasswordOTP }), _jsx(Screen, { name: "ResetPassword", component: ResetPassword })] }));
 };
 export { AuthNavigator };

package/build/src/screens/CreatePassword/hooks/internal/useCreatePassword.js

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { defaultPolicy } from "../../../../constants/defaultPolicy";
 /**
  * @internal
  * Internal hook for managing CreatePassword screen state and auth context integration.
@@ -10,13 +11,7 @@ const useCreatePassword = () => {
     const [password, setPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
     const [maxLength, setMaxLength] = useState(defaultPolicy.maxLength);
-    const [criteria, setCriteria] = useState({
-        numbers: false,
-        minLength: false,
-        uppercase: false,
-        lowercase: false,
-        specialCharacters: false,
-    });
+    const [criteria, setCriteria] = useState({});
     const handlePassword = (text) => {
         setPassword(text.replace(/\s/g, ''));
     };
@@ -42,11 +37,3 @@ const useCreatePassword = () => {
     };
 };
 export { useCreatePassword };
-const defaultPolicy = {
-    minLength: 6,
-    maxLength: 30,
-    numbers: true,
-    uppercase: true,
-    lowercase: true,
-    specialCharacters: true,
-};

package/build/src/screens/EnterEmail/hooks/internal/useEnterEmail.js

@@ -32,7 +32,7 @@ const useEnterEmail = () => {
             const code = Number(res.data.loginType);
             const isKnown = code === 1 || code === 2 || code === 3 || code === 4;
             if (!isKnown) {
-                showMessage('Unsupported login method. Please try again later.');
+                showMessage({ message: 'Unsupported login method. Please try again later.' });
                 return;
             }
             if (code !== 1) {
@@ -60,7 +60,7 @@ const useEnterEmail = () => {
                 onResult({ email, emailExist: false });
             }
             if (err?.response?.status >= 500) {
-                showMessage('Something went wrong');
+                showMessage({ message: 'Something went wrong' });
             }
         });
     };

package/build/src/screens/EnterPassword/index.js

@@ -1,22 +1,29 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form, PasswordInput, Typography, useForm } from '@truworth/twc-web-design';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Flex, Form, PasswordInput, ResponsiveModal, Typography, useForm } from '@truworth/twc-web-design';
 import { ScreenLayout } from "../../components/ScreenLayout";
 import { useEnterPassword } from './hooks/internal/useEnterPassword';
 import { SupportDetails } from '../../components/SupportDetails';
-const EnterPassword = ({ email, onPressBack }) => {
+import VerifyResetPasswordOTP from '../VerifyResetPasswordOTP';
+const EnterPassword = ({ email, onPressBack, onSignInWithEmailOTP, onVerifiedResetPasswordOTP }) => {
+    const [showResetPasswordOTPModal, setShowResetPasswordOTPModal] = useState(false);
     const { loading, password, isInvalidPassword, handleSubmit, onPassword, appName } = useEnterPassword();
     const form = useForm({ defaultValues: { password } });
-    return (_jsxs(_Fragment, { children: [_jsx(ScreenLayout, { title: `Hi, Welcome To ${appName}!`, subTitle: email, buttonProps: {
+    return (_jsxs(_Fragment, { children: [_jsxs(ScreenLayout, { title: `Hi, Welcome To ${appName}!`, subTitle: email, buttonProps: {
                     loading,
                     label: 'Continue',
                     onClick: () => { if (email)
                         handleSubmit({ email, source: 'web' }); },
                     disabled: !password || !email || loading,
-                }, onPressBack: onPressBack, children: _jsx(Form, { className: "w-full", form: form, onSubmit: () => { if (email)
-                        handleSubmit({ email, source: 'web' }); }, children: _jsx(Form.Item, { name: "password", label: "Password", description: isInvalidPassword &&
-                            _jsx(Typography, { type: "body", size: "small", className: "h-1", color: "text-utility-danger-main", children: "Email and password do not match!" }), children: _jsx(PasswordInput, { placeholder: "Enter your password", value: password, showStrengthIndicator: false, className: `border rounded-md px-3 py-2 
+                }, onPressBack: onPressBack, children: [_jsx(Form, { className: "w-full", form: form, onSubmit: () => { if (email)
+                            handleSubmit({ email, source: 'web' }); }, children: _jsx(Form.Item, { name: "password", label: "Password", description: isInvalidPassword &&
+                                _jsx(Typography, { type: "body", size: "small", className: "h-1", color: "text-utility-danger-main", children: "Email and password do not match!" }), children: _jsx(PasswordInput, { placeholder: "Enter your password", value: password, showStrengthIndicator: false, className: `border rounded-md px-3 py-2 
                                 ${isInvalidPassword ? "border-red-500" : "border-gray-300"}`, ...form.register('password', {
-                                onChange: (e) => onPassword(e.target.value)
-                            }) }) }) }) }), _jsx(SupportDetails, {})] }));
+                                    onChange: (e) => onPassword(e.target.value)
+                                }) }) }) }), _jsx(Button, { type: "button", size: 'small', variant: 'link', label: "Forgot Password?", className: "px-0 h-auto ml-auto block mt-4", onClick: () => setShowResetPasswordOTPModal(true) }), showResetPasswordOTPModal &&
+                        _jsx(VerifyResetPasswordOTPModal, { email: email, show: showResetPasswordOTPModal, hide: () => setShowResetPasswordOTPModal(false), onVerifiedOTP: onVerifiedResetPasswordOTP })] }), onSignInWithEmailOTP && (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", className: "mt-6 mb-6", 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: 'Sign In With OTP', variant: 'secondary', className: 'flex-none', isFullWidth: true, type: "button", onClick: onSignInWithEmailOTP })] })), _jsx(SupportDetails, {})] }));
+};
+const VerifyResetPasswordOTPModal = ({ show, hide, email, onVerifiedOTP }) => {
+    return (_jsx(ResponsiveModal, { title: "Reset Your Password", open: show, onClose: hide, maskClosable: false, showCloseButton: false, size: 'sm', children: _jsx(VerifyResetPasswordOTP, { email: email, onVerifiedOTP: onVerifiedOTP }) }));
 };
 export default EnterPassword;

package/build/src/screens/EnterPassword/index.native.js

@@ -1,23 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { View } from 'react-native';
-import { TextInputField } from '@truworth/twc-rn-common';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Platform, TouchableOpacity } from 'react-native';
+import { RoundedButton, TextInputField, Colors } from '@truworth/twc-rn-common';
 import { Layout } from '@ui-kitten/components';
 import { ScreenLayout } from '../../components/ScreenLayout/index.native';
 import { useEnterPassword } from './hooks/internal/useEnterPassword';
-const EnterPassword = ({ route }) => {
+const { primary } = Colors;
+const EnterPassword = ({ navigation, route }) => {
     const { email } = route.params;
     const { loading, password, isPasswordVisible, togglePasswordVisibility, isInvalidPassword, handleSubmit, onPassword } = useEnterPassword();
-    return (_jsx(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: _jsx(ScreenLayout, { title: "Enter Your Password", buttonProps: {
-                loading,
-                label: 'Continue',
-                onPress: () => { if (email)
-                    handleSubmit({ email, source: 'web' }); },
-                disabled: password.length == 0 || isInvalidPassword || loading,
-            }, children: _jsx(View, { style: { position: 'relative' }, children: _jsx(TextInputField, { placeholder: 'Enter password...', onChangeValue: onPassword, secureTextEntry: !isPasswordVisible, value: password, rightIcon2: isPasswordVisible
-                        ? 'eye-outline'
-                        : 'eye-off-outline', onPressRightIcon2: () => togglePasswordVisibility(), error: {
-                        show: isInvalidPassword,
-                        message: isInvalidPassword ? 'Email and password do not match!' : ''
-                    }, autoFocus: true }) }) }) }));
+    return (_jsxs(Layout, { style: { flex: 1, backgroundColor: '#FFFFFF' }, children: [_jsxs(ScreenLayout, { title: "Enter Your Password", buttonProps: {
+                    loading,
+                    label: 'Continue',
+                    onPress: () => { if (email)
+                        handleSubmit({ email, source: Platform.OS }); },
+                    disabled: password.length == 0 || isInvalidPassword || loading,
+                }, children: [_jsx(View, { style: { position: 'relative' }, children: _jsx(TextInputField, { placeholder: 'Enter password...', onChangeValue: onPassword, secureTextEntry: !isPasswordVisible, value: password, rightIcon2: isPasswordVisible
+                                ? 'eye-outline'
+                                : 'eye-off-outline', onPressRightIcon2: () => togglePasswordVisibility(), error: {
+                                show: isInvalidPassword,
+                                message: isInvalidPassword ? 'Email and password do not match!' : ''
+                            }, autoFocus: true }) }), _jsx(TouchableOpacity, { activeOpacity: 0.8, style: { marginTop: isInvalidPassword ? 0 : 10, alignSelf: 'flex-end' }, onPress: () => navigation.navigate('VerifyResetPasswordOTP', { email }), children: _jsx(Text, { style: {
+                                fontSize: 12, fontWeight: '600',
+                                color: primary.primary_main, lineHeight: 20,
+                            }, children: "Forgot Password?" }) })] }), _jsxs(View, { style: { paddingHorizontal: 16 }, children: [_jsxs(View, { style: {
+                            flexDirection: 'row', justifyContent: 'center',
+                            alignItems: 'center', marginBottom: 14, marginTop: 14,
+                        }, children: [_jsx(View, { style: { width: 12, height: 1, backgroundColor: '#7F7F7F' } }), _jsx(Text, { style: {
+                                    fontSize: 12, fontWeight: '600', color: '#7F7F7F',
+                                    lineHeight: 20, textAlign: 'center',
+                                    marginHorizontal: 6,
+                                }, children: "OR" }), _jsx(View, { style: { width: 12, height: 1, backgroundColor: '#7F7F7F' } })] }), email &&
+                        _jsx(RoundedButton, { type: "text", size: "medium", label: "Sign In With OTP", onPress: () => navigation.navigate('LoginWithEmailOTP', { email }) })] })] }));
 };
 export default EnterPassword;

package/build/src/screens/Login/components/LoginWebComponent/index.js

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { Flex } from '@truworth/twc-web-design';
+import { Flex, ResponsiveModal, Typography } from '@truworth/twc-web-design';
 import { useRouter } from 'next/router';
 import { AdvancedTransitionWrapper } from '../../../../components/AdvancedTransitionWrapper';
 import { useAuthPackageContext } from '../../../../hooks/internal/useAuthPackageContext';
 import EnterEmail from '../../../EnterEmail/index';
 import EnterPassword from '../../../EnterPassword/index';
+import LoginWithEmailOTP from '../../../LoginWithEmailOTP/index';
+import ResetPassword from '../../../ResetPassword/index';
 const LoginWebComponent = () => {
     const [email, setEmail] = useState('');
     const [loginState, setLoginState] = useState('EnterEmail');
+    const [showLoginWithEmailOTPModal, setShowLoginWithEmailOTPModal] = useState(false);
+    const [sessionToken, setSessionToken] = useState('');
     const { LogoComponent } = useAuthPackageContext();
     const router = useRouter();
     const onRedirectToPassword = (email) => {
@@ -33,12 +37,24 @@ const LoginWebComponent = () => {
                         }
                     } }));
             case 'EnterPassword':
-                return (_jsx(EnterPassword, { email: email, onPressBack: () => setLoginState('EnterEmail') }));
+                return (_jsx(EnterPassword, { email: email, onPressBack: () => setLoginState('EnterEmail'), onSignInWithEmailOTP: () => {
+                        if (email) {
+                            setShowLoginWithEmailOTPModal(true);
+                        }
+                    }, onVerifiedResetPasswordOTP: ({ sessionToken }) => {
+                        setSessionToken(sessionToken);
+                        setLoginState('ResetPassword');
+                    } }));
+            case 'ResetPassword':
+                return (_jsx(ResetPassword, { email: email, sessionToken: sessionToken, onContinue: () => setLoginState('EnterEmail'), onPressBack: () => setLoginState('EnterPassword') }));
             default:
                 return null;
         }
     };
     return (_jsx(AdvancedTransitionWrapper, { type: 'slide', duration: 0.5, children: _jsxs(Flex, { direction: 'column', justify: 'center', style: { width: '70%' }, className: `lg:w-[70%] lg:h-screen mx-auto h-full my-10`, children: [React.isValidElement(LogoComponent)
-                    && LogoComponent, renderStep()] }) }));
+                    && LogoComponent, renderStep(), _jsx(LoginWithEmailOTPModal, { show: showLoginWithEmailOTPModal, hide: () => setShowLoginWithEmailOTPModal(false), email: email })] }) }));
 };
 export { LoginWebComponent };
+const LoginWithEmailOTPModal = ({ show, hide, email }) => {
+    return (_jsx(ResponsiveModal, { open: show, onClose: hide, title: _jsx(Typography, { type: "heading", size: "h6", className: "text-center mb-0", children: "Verify Your Email" }), showCloseButton: false, maskClosable: false, size: 'sm', children: _jsx(LoginWithEmailOTP, { email: email }) }));
+};

package/build/src/screens/Login/components/LoginWebComponent/types.js

@@ -0,0 +1 @@
+export {};

package/build/src/screens/LoginWithEmailOTP/hooks/internal/useLoginWithEmailOTP.js

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { showMessage } from "../../../../helpers/show-message";
+import { useAuthPackageContext } from "../../../../hooks/internal/useAuthPackageContext";
+import { axiosClient } from "../../../../api/axiosClient";
+/**
+ * @internal
+ * Hook for handling Email OTP Login flow.
+ */
+const useLoginWithEmailOTP = ({ email, source }) => {
+    const [resendOTPCounter, setResendOTPCounter] = useState(0);
+    const [status, setStatus] = useState("idle");
+    const sessionTokenRef = useRef("");
+    const { onLogin } = useAuthPackageContext();
+    /**
+     * Sends an OTP to the provided email.
+     */
+    const sendOtp = useCallback(() => {
+        setStatus("loading");
+        axiosClient({
+            url: '/auth/login/email',
+            method: 'POST',
+            data: { email, source },
+        }).then((res) => {
+            setResendOTPCounter(prevCounter => prevCounter + 1);
+            sessionTokenRef.current = res.data.sessionToken;
+        }).catch((error) => {
+            console.error('Failed to send OTP:', error);
+            const message = error?.response?.data?.errors?.[0]?.message || "Failed to send OTP. Please try again.";
+            showMessage({ message });
+        }).finally(() => setStatus("idle"));
+    }, [email, source]);
+    /**
+     * Verifies the entered OTP and logs the user in.
+     */
+    const verifyOtp = useCallback(async (otp) => {
+        setStatus("loading");
+        axiosClient({
+            url: '/auth/login/email/verify-otp',
+            method: 'POST',
+            data: { otp, sessionToken: sessionTokenRef.current },
+        }).then((res) => {
+            setStatus('valid');
+            const { token, member } = res.data;
+            onLogin({ token, member });
+        }).catch((error) => {
+            const message = error?.response?.data?.errors?.[0]?.message ||
+                (error?.response?.status === 400
+                    ? "Invalid OTP. Please try again."
+                    : "Verification failed. Please try again.");
+            showMessage({ message });
+            setStatus(error?.response?.status === 400 ? "invalid" : "idle");
+            if (error?.response?.status === 400) {
+                setTimeout(() => setStatus("idle"), 5000);
+            }
+        });
+    }, [sessionTokenRef.current]);
+    /**
+     * Automatically sends OTP when email and source are provided.
+     */
+    useEffect(() => {
+        if (email && source) {
+            sendOtp();
+        }
+    }, [email, source, sendOtp]);
+    return {
+        sendOtp,
+        verifyOtp,
+        resendOTPCounter,
+        status,
+    };
+};
+export { useLoginWithEmailOTP };

package/build/src/screens/LoginWithEmailOTP/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLoginWithEmailOTP } from "./hooks/internal/useLoginWithEmailOTP";
+import { VerifyEmailOTP } from "../../components/VerifyEmailOTP";
+const LoginWithEmailOTP = ({ email }) => {
+    const { resendOTPCounter, status, verifyOtp, sendOtp, } = useLoginWithEmailOTP({ email, source: 'web' });
+    return (_jsx(VerifyEmailOTP, { email: email, validateOTP: verifyOtp, resendOTP: sendOtp, status: status, resendOTPCounter: resendOTPCounter }));
+};
+export default LoginWithEmailOTP;

package/build/src/screens/LoginWithEmailOTP/index.native.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform } from 'react-native';
+import { VerifyEmailOTP } from '../../components/VerifyEmailOTP';
+import { useLoginWithEmailOTP } from './hooks/internal/useLoginWithEmailOTP';
+const LoginWithEmailOTP = ({ route }) => {
+    const { email } = route.params;
+    const { resendOTPCounter, status, verifyOtp, sendOtp, } = useLoginWithEmailOTP({ email, source: Platform.OS });
+    return (_jsx(VerifyEmailOTP, { email: email, status: status, validateOTP: verifyOtp, resendOTP: sendOtp, resendOTPCounter: resendOTPCounter }));
+};
+export default LoginWithEmailOTP;

package/build/src/screens/ResetPassword/hooks/internal/useResetPassword.js

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { showMessage } from "../../../../helpers/show-message";
+import { axiosClient } from "../../../../api/axiosClient";
+import { defaultPolicy } from "../../../../constants/defaultPolicy";
+/**
+ * @internal
+ * Hook for managing ResetPassword screen state and auth context integration.
+ * This hook is not exposed to package consumers.
+ */
+const useResetPassword = ({ sessionToken }) => {
+    const [loading, setLoading] = useState(false);
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [maxLength, setMaxLength] = useState(defaultPolicy.maxLength);
+    const [criteria, setCriteria] = useState({});
+    const handlePassword = (text) => {
+        setPassword(text.replace(/\s/g, ''));
+    };
+    const handleConfirmPassword = (text) => {
+        setConfirmPassword(text.replace(/\s/g, ''));
+    };
+    const handleContinue = ({ onResult }) => {
+        setLoading(true);
+        axiosClient({
+            url: '/auth/reset-password',
+            method: 'POST',
+            data: { sessionToken, password },
+        }).then(() => {
+            showMessage({ message: 'Password updated successfully. Please login with your new credentials.', type: 'success' });
+            onResult();
+        }).catch((err) => {
+            console.log(err);
+            if (err?.response?.status === 401) {
+                showMessage({ message: 'Your session expired. Please request a new OTP.' });
+                return;
+            }
+            showMessage({ message: err?.response?.data?.errors?.[0]?.message || 'An unexpected error occurred' });
+        }).finally(() => setLoading(false));
+    };
+    return {
+        loading,
+        password, setPassword,
+        confirmPassword, setConfirmPassword,
+        passwordVisible, setPasswordVisible,
+        confirmPasswordVisible, setConfirmPasswordVisible,
+        maxLength, setMaxLength,
+        criteria, setCriteria,
+        handlePassword,
+        handleContinue,
+        handleConfirmPassword,
+    };
+};
+export { useResetPassword };

package/build/src/screens/ResetPassword/index.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Form, PasswordInput, useForm } from "@truworth/twc-web-design";
+import { useResetPassword } from "./hooks/internal/useResetPassword";
+import { ScreenLayout } from "../../components/ScreenLayout";
+import { PasswordCriteria } from "../../components/PasswordCriteria";
+const ResetPassword = ({ email, sessionToken, onPressBack, onContinue }) => {
+    const form = useForm({
+        defaultValues: {
+            password: '',
+            confirmPassword: '',
+        }
+    });
+    const { password, confirmPassword } = form.watch();
+    const { loading, criteria, setCriteria, maxLength, setMaxLength, handlePassword, handleConfirmPassword, handleContinue, } = useResetPassword({ sessionToken });
+    return (_jsx(ScreenLayout, { title: "Reset your Password", subTitle: "Use a password that\u2019s easy to remember and fulfills all the requirements listed below.", buttonProps: {
+            loading,
+            label: 'Continue',
+            onClick: () => handleContinue({ onResult: onContinue }),
+            disabled: !password || !confirmPassword || (password !== confirmPassword)
+        }, onPressBack: onPressBack, children: _jsx(Flex, { direction: "column", children: _jsxs(Form, { form: form, className: "w-full", children: [_jsx(Form.Item, { label: "Enter Password", normalize: (value) => value.replace(/\s/g, ''), rules: [
+                            {
+                                required: true,
+                                message: 'Please enter your password'
+                            }
+                        ], ...form.register('password', {
+                            onChange: (e) => handlePassword(e.target.value)
+                        }), children: _jsx(PasswordInput, { placeholder: "Enter password", value: password, maxLength: maxLength, showStrengthIndicator: false }) }), _jsx(PasswordCriteria, { email: email, password: password, criteria: criteria, onCriteriaChange: setCriteria, onMaxLengthChange: setMaxLength }), _jsx(Form.Item, { label: "Confirm Password", className: "mt-6", normalize: (value) => value.replace(/\s/g, ''), rules: [
+                            {
+                                required: true,
+                                message: 'Please confirm your password',
+                            },
+                            {
+                                validator: async (_, value) => {
+                                    const password = form.getValues('password');
+                                    if (!value)
+                                        return;
+                                    if (password !== value) {
+                                        throw new Error('Passwords don’t match');
+                                    }
+                                },
+                            },
+                        ], ...form.register('confirmPassword', {
+                            onChange: (e) => handleConfirmPassword(e.target.value)
+                        }), children: _jsx(PasswordInput, { className: "mb-6", value: confirmPassword, placeholder: "Re-enter password", maxLength: maxLength, showStrengthIndicator: false }) })] }) }) }));
+};
+export default ResetPassword;

package/build/src/screens/ResetPassword/index.native.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Colors, TextInputField } from '@truworth/twc-rn-common';
+import { Layout } from '@ui-kitten/components';
+import { ScreenLayout } from '../../components/ScreenLayout';
+import { useResetPassword } from './hooks/internal/useResetPassword';
+import { PasswordCriteria } from '../../components/PasswordCriteria/index.native';
+const { primary } = Colors;
+const ResetPassword = ({ navigation, route }) => {
+    const { sessionToken, email } = route.params || {};
+    const { loading, password, confirmPassword, passwordVisible, setPasswordVisible, confirmPasswordVisible, setConfirmPasswordVisible, maxLength, setMaxLength, criteria, setCriteria, handlePassword, handleContinue, handleConfirmPassword, } = useResetPassword({ sessionToken });
+    return (_jsx(Layout, { style: { flex: 1, backgroundColor: primary.white }, children: _jsxs(ScreenLayout, { title: "Reset your Password", subTitle: "Use a password that\u2019s easy to remember and fulfills all the requirements listed below.", buttonProps: {
+                loading,
+                label: 'Continue',
+                onPress: () => {
+                    handleContinue({
+                        onResult: () => navigation.navigate('EnterEmail')
+                    });
+                },
+                disabled: !Object.keys(criteria).every(c => criteria[c]) || (password !== confirmPassword),
+            }, children: [_jsx(TextInputField, { placeholder: "Enter password...", onChangeValue: handlePassword, secureTextEntry: !passwordVisible, value: password, rightIcon2: passwordVisible
+                        ? 'eye-outline'
+                        : 'eye-off-outline', onPressRightIcon2: () => setPasswordVisible(!passwordVisible), autoFocus: true, maxLength: maxLength }), _jsx(PasswordCriteria, { email: email, criteria: criteria, onCriteriaChange: setCriteria, onMaxLengthChange: setMaxLength, password: password }), _jsx(TextInputField, { placeholder: "Confirm password...", onChangeValue: handleConfirmPassword, secureTextEntry: !confirmPasswordVisible, value: confirmPassword, rightIcon2: confirmPasswordVisible
+                        ? 'eye-outline'
+                        : 'eye-off-outline', onPressRightIcon2: () => setConfirmPasswordVisible(!confirmPasswordVisible), maxLength: maxLength, containerStyle: { marginTop: 16 } })] }) }));
+};
+export default ResetPassword;

package/build/src/screens/ResetPassword/types.js

@@ -0,0 +1 @@
+export {};