@oxyhq/services 5.4.3 → 5.4.4

package/lib/module/ui/screens/SignInScreen.js

@@ -1,17 +1,20 @@
 "use strict";
 
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { View, Text, TextInput, TouchableOpacity, StyleSheet, ActivityIndicator, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar } from 'react-native';
-import { useOxy } from "../context/OxyContext.js";
-import { useThemeColors, createCommonStyles } from "../styles/index.js";
-import Avatar from "../components/Avatar.js";
+import { View, Text, StyleSheet, Platform, KeyboardAvoidingView, ScrollView, Animated, StatusBar } from 'react-native';
+import { useOxy } from '../context/OxyContext';
+import { useThemeColors, createCommonStyles } from '../styles';
+import Avatar from '../components/Avatar';
 import { Ionicons } from '@expo/vector-icons';
-import Svg, { Path, Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
-import { toast } from "../../lib/sonner.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import HighFive from '../../assets/illustrations/HighFive';
+import { toast } from '../../lib/sonner';
+import GroupedPillButtons from '../components/internal/GroupedPillButtons';
+import TextField from '../components/internal/TextField';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SignInScreen = ({
   navigate,
   goBack,
+  onAuthenticated,
   theme
 }) => {
   // Form data states
@@ -266,42 +269,39 @@ const SignInScreen = ({
       animateTransition(currentStep - 1);
     }
   }, [currentStep, progressAnim, animateTransition]);
-  const handleUsernameNext = useCallback(() => {
+
+  // Custom next handlers for validation
+  const handleUsernameContinue = useCallback(() => {
     if (!username) {
-      toast.error('Please enter your username');
+      toast.error('Please enter your username.');
       return;
     }
-    if (validationStatus === 'invalid') {
-      // Don't show toast if we already have an error message displayed
-      if (!errorMessage) {
-        toast.error('Please enter a valid username');
-      }
+    if (validationStatus !== 'valid' || !userProfile) {
+      toast.error('Please enter a valid username.');
       return;
     }
-    if (validationStatus === 'validating') {
-      toast.error('Please wait while we validate your username');
+    setErrorMessage('');
+    nextStep();
+  }, [username, validationStatus, userProfile, setErrorMessage, nextStep]);
+  const handleSignIn = useCallback(async () => {
+    if (!password) {
+      toast.error('Please enter your password.');
       return;
     }
-    if (validationStatus === 'valid' && userProfile) {
-      setErrorMessage('');
-      nextStep();
-    } else {
-      toast.error('Please enter a valid username');
-    }
-  }, [username, validationStatus, userProfile, errorMessage, nextStep]);
-  const handleLogin = useCallback(async () => {
-    if (!username || !password) {
-      toast.error('Please enter both username and password');
+    if (!username || !userProfile) {
+      toast.error('Please enter a valid username first.');
       return;
     }
     try {
       setErrorMessage('');
-      await login(username, password);
-      // The authentication state change will be handled through context
+      const user = await login(username, password);
+      if (onAuthenticated) {
+        onAuthenticated(user);
+      }
     } catch (error) {
       toast.error(error.message || 'Login failed');
     }
-  }, [username, password, login]);
+  }, [username, password, login, onAuthenticated, setErrorMessage, userProfile]);
 
   // Memoized step components
   const renderUsernameStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
@@ -313,109 +313,16 @@ const SignInScreen = ({
         scale: scaleAnim
       }]
     }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.modernImageContainer,
-      children: /*#__PURE__*/_jsxs(Svg, {
-        width: 280,
-        height: 160,
-        viewBox: "0 0 280 160",
-        children: [/*#__PURE__*/_jsxs(Defs, {
-          children: [/*#__PURE__*/_jsxs(LinearGradient, {
-            id: "primaryGradient",
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "100%",
-            children: [/*#__PURE__*/_jsx(Stop, {
-              offset: "0%",
-              stopColor: colors.primary,
-              stopOpacity: "0.8"
-            }), /*#__PURE__*/_jsx(Stop, {
-              offset: "100%",
-              stopColor: colors.primary,
-              stopOpacity: "0.2"
-            })]
-          }), /*#__PURE__*/_jsxs(LinearGradient, {
-            id: "secondaryGradient",
-            x1: "0%",
-            y1: "0%",
-            x2: "100%",
-            y2: "100%",
-            children: [/*#__PURE__*/_jsx(Stop, {
-              offset: "0%",
-              stopColor: colors.primary,
-              stopOpacity: "0.1"
-            }), /*#__PURE__*/_jsx(Stop, {
-              offset: "100%",
-              stopColor: colors.primary,
-              stopOpacity: "0.3"
-            })]
-          })]
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "80",
-          cy: "80",
-          r: "45",
-          fill: "url(#primaryGradient)"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "200",
-          cy: "80",
-          r: "35",
-          fill: "url(#secondaryGradient)"
-        }), /*#__PURE__*/_jsx(Path, {
-          d: "M40 120 Q80 40 140 80 Q200 120 240 60",
-          stroke: colors.primary,
-          strokeWidth: "4",
-          fill: "none",
-          strokeLinecap: "round"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "60",
-          cy: "50",
-          r: "8",
-          fill: colors.primary,
-          opacity: "0.6"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "220",
-          cy: "120",
-          r: "6",
-          fill: colors.primary,
-          opacity: "0.4"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "250",
-          cy: "40",
-          r: "4",
-          fill: colors.primary,
-          opacity: "0.8"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "140",
-          cy: "80",
-          r: "25",
-          fill: colors.background,
-          opacity: "0.9"
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "135",
-          cy: "75",
-          r: "3",
-          fill: colors.primary
-        }), /*#__PURE__*/_jsx(Circle, {
-          cx: "145",
-          cy: "75",
-          r: "3",
-          fill: colors.primary
-        }), /*#__PURE__*/_jsx(Path, {
-          d: "M132 85 Q140 92 148 85",
-          stroke: colors.primary,
-          strokeWidth: "2",
-          fill: "none",
-          strokeLinecap: "round"
-        })]
-      })
+    children: [/*#__PURE__*/_jsx(HighFive, {
+      width: 100,
+      height: 100
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.modernHeader,
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.modernTitle, {
           color: colors.text
         }],
-        children: isAddAccountMode ? 'Add Account' : 'Welcome Back'
+        children: isAddAccountMode ? 'Add Another Account' : 'Sign In'
       }), /*#__PURE__*/_jsx(Text, {
         style: [styles.modernSubtitle, {
           color: colors.secondaryText
@@ -455,118 +362,129 @@ const SignInScreen = ({
         }],
         children: errorMessage
       })]
-    }) : null, /*#__PURE__*/_jsxs(Animated.View, {
+    }) : null, /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.modernInputContainer, {
         transform: [{
           scale: inputScaleAnim
         }]
       }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: [styles.inputWrapper, {
-          borderColor: validationStatus === 'valid' ? colors.success : validationStatus === 'invalid' ? colors.error : isInputFocused ? colors.primary : colors.border
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "person-outline",
-          size: 20,
-          color: isInputFocused ? colors.primary : colors.secondaryText,
-          style: styles.inputIcon
-        }), /*#__PURE__*/_jsx(TextInput, {
-          style: [styles.modernInput, {
-            color: colors.text
-          }],
-          placeholder: "Enter your username",
-          placeholderTextColor: colors.placeholder,
-          value: username,
-          onChangeText: handleUsernameChange,
-          onFocus: handleInputFocus,
-          onBlur: handleInputBlur,
-          autoCapitalize: "none",
-          testID: "username-input"
-        }), validationStatus === 'validating' && /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: colors.primary,
-          style: styles.validationIndicator
-        }), validationStatus === 'valid' && /*#__PURE__*/_jsx(Ionicons, {
-          name: "checkmark-circle",
-          size: 20,
-          color: colors.success,
-          style: styles.validationIndicator
-        }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/_jsx(Ionicons, {
-          name: "close-circle",
-          size: 20,
-          color: colors.error,
-          style: styles.validationIndicator
-        })]
-      }), validationStatus === 'valid' && userProfile && /*#__PURE__*/_jsxs(View, {
-        style: [styles.validationSuccessCard, {
-          backgroundColor: colors.success + '15'
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
+      children: /*#__PURE__*/_jsx(TextField, {
+        label: "Username",
+        icon: "person-outline",
+        value: username,
+        onChangeText: handleUsernameChange,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        testID: "username-input",
+        colors: colors,
+        variant: "filled",
+        error: validationStatus === 'invalid' && username.length >= 3 ? 'Username not found' : undefined,
+        loading: validationStatus === 'validating',
+        success: validationStatus === 'valid'
+      })
+    }), validationStatus === 'valid' && userProfile && /*#__PURE__*/_jsxs(View, {
+      style: [styles.validationSuccessCard, {
+        backgroundColor: colors.success + '10',
+        borderWidth: 1,
+        borderColor: colors.success + '30',
+        padding: 16
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          backgroundColor: colors.success + '20',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginRight: 12
+        },
+        children: /*#__PURE__*/_jsx(Ionicons, {
           name: "checkmark-circle",
           size: 16,
           color: colors.success
-        }), /*#__PURE__*/_jsxs(Text, {
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsxs(Text, {
           style: [styles.validationText, {
-            color: colors.success
+            color: colors.success,
+            fontWeight: '600',
+            marginBottom: 2
           }],
-          children: ["Found user: ", userProfile.displayName]
+          children: ["Welcome back, ", userProfile?.displayName || userProfile?.name || username, "!"]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.validationText, {
+            color: colors.secondaryText,
+            fontSize: 11,
+            opacity: 0.8
+          }],
+          children: "Ready to continue where you left off"
         })]
-      }), validationStatus === 'invalid' && username.length >= 3 && !errorMessage && /*#__PURE__*/_jsxs(View, {
-        style: [styles.validationErrorCard, {
-          backgroundColor: colors.error + '15'
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
+      })]
+    }), validationStatus === 'invalid' && username.length >= 3 && /*#__PURE__*/_jsxs(View, {
+      style: [styles.validationErrorCard, {
+        backgroundColor: colors.error + '10',
+        borderWidth: 1,
+        borderColor: colors.error + '30',
+        padding: 16
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: 16,
+          backgroundColor: colors.error + '20',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginRight: 12
+        },
+        children: /*#__PURE__*/_jsx(Ionicons, {
           name: "alert-circle",
           size: 16,
           color: colors.error
-        }), /*#__PURE__*/_jsx(Text, {
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.validationText, {
-            color: colors.error
+            color: colors.error,
+            fontWeight: '600',
+            marginBottom: 2
           }],
           children: "Username not found"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.validationText, {
+            color: colors.secondaryText,
+            fontSize: 11,
+            opacity: 0.8
+          }],
+          children: "Check spelling or sign up"
         })]
       })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.modernButton, {
-        backgroundColor: colors.primary,
-        opacity: !username || validationStatus !== 'valid' ? 0.5 : 1,
-        shadowColor: colors.primary
-      }],
-      onPress: handleUsernameNext,
-      disabled: !username || validationStatus !== 'valid' || isValidating,
-      testID: "username-next-button",
-      children: isValidating ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        color: "#FFFFFF",
-        size: "small"
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.modernButtonText,
-          children: "Continue"
-        }), /*#__PURE__*/_jsx(Ionicons, {
-          name: "arrow-forward",
-          size: 20,
-          color: "#FFFFFF",
-          style: styles.buttonIcon
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.footerTextContainer,
-      children: [/*#__PURE__*/_jsxs(Text, {
-        style: [styles.footerText, {
-          color: colors.secondaryText
-        }],
-        children: ["Don't have an account?", ' ']
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
+      buttons: [{
+        text: 'Sign Up',
         onPress: () => navigate('SignUp'),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.modernLinkText, {
-            color: colors.primary
-          }],
-          children: "Sign Up"
-        })
-      })]
+        icon: 'person-add',
+        variant: 'transparent'
+      }, {
+        text: 'Continue',
+        onPress: handleUsernameContinue,
+        icon: 'arrow-forward',
+        variant: 'primary',
+        loading: isValidating,
+        testID: 'username-next-button'
+      }],
+      colors: colors
     })]
-  }), [fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username, errorMessage, inputScaleAnim, isInputFocused, username, validationStatus, userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange, handleUsernameNext, navigate, styles]);
+  }), [fadeAnim, slideAnim, scaleAnim, colors, isAddAccountMode, user?.username, errorMessage, inputScaleAnim, isInputFocused, username, validationStatus, userProfile, isValidating, handleInputFocus, handleInputBlur, handleUsernameChange, handleUsernameContinue, navigate, styles]);
   const renderPasswordStep = useMemo(() => /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.stepContainer, {
       opacity: fadeAnim,
@@ -640,79 +558,36 @@ const SignInScreen = ({
           scale: inputScaleAnim
         }]
       }],
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [styles.inputWrapper, {
-          borderColor: isInputFocused ? colors.primary : colors.border
-        }],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "lock-closed-outline",
-          size: 20,
-          color: isInputFocused ? colors.primary : colors.secondaryText,
-          style: styles.inputIcon
-        }), /*#__PURE__*/_jsx(TextInput, {
-          style: [styles.modernInput, {
-            color: colors.text
-          }],
-          placeholder: "Enter your password",
-          placeholderTextColor: colors.placeholder,
-          value: password,
-          onChangeText: handlePasswordChange,
-          onFocus: handleInputFocus,
-          onBlur: handleInputBlur,
-          secureTextEntry: !showPassword,
-          autoCapitalize: "none",
-          testID: "password-input"
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.passwordToggle,
-          onPress: () => setShowPassword(!showPassword),
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: showPassword ? "eye-off" : "eye",
-            size: 20,
-            color: colors.secondaryText
-          })
-        })]
+      children: /*#__PURE__*/_jsx(TextField, {
+        label: "Password",
+        icon: "lock-closed-outline",
+        value: password,
+        onChangeText: handlePasswordChange,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        secureTextEntry: !showPassword,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        testID: "password-input",
+        colors: colors,
+        variant: "filled",
+        error: errorMessage
       })
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.modernButton, {
-        backgroundColor: colors.primary,
-        opacity: !password ? 0.5 : 1,
-        shadowColor: colors.primary
-      }],
-      onPress: handleLogin,
-      disabled: !password || isLoading,
-      testID: "login-button",
-      children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        color: "#FFFFFF",
-        size: "small"
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.modernButtonText,
-          children: "Sign In"
-        }), /*#__PURE__*/_jsx(Ionicons, {
-          name: "log-in",
-          size: 20,
-          color: "#FFFFFF",
-          style: styles.buttonIcon
-        })]
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.modernNavigationButtons,
-      children: /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.modernBackButton, {
-          borderColor: colors.border
-        }],
+    }), /*#__PURE__*/_jsx(GroupedPillButtons, {
+      buttons: [{
+        text: 'Back',
         onPress: prevStep,
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "arrow-back",
-          size: 18,
-          color: colors.text
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.modernBackButtonText, {
-            color: colors.text
-          }],
-          children: "Back"
-        })]
-      })
+        icon: 'arrow-back',
+        variant: 'transparent'
+      }, {
+        text: 'Sign In',
+        onPress: handleSignIn,
+        icon: 'log-in',
+        variant: 'primary',
+        loading: isLoading,
+        testID: 'login-button'
+      }],
+      colors: colors
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.securityNotice,
       children: [/*#__PURE__*/_jsx(Ionicons, {
@@ -726,7 +601,7 @@ const SignInScreen = ({
         children: "Your data is encrypted and secure"
       })]
     })]
-  }), [fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim, errorMessage, inputScaleAnim, isInputFocused, password, showPassword, handleInputFocus, handleInputBlur, handlePasswordChange, handleLogin, isLoading, prevStep, styles]);
+  }), [fadeAnim, slideAnim, scaleAnim, colors, userProfile, username, theme, logoAnim, errorMessage, inputScaleAnim, isInputFocused, password, showPassword, handleInputFocus, handleInputBlur, handlePasswordChange, handleSignIn, isLoading, prevStep, styles]);
   const renderCurrentStep = useCallback(() => {
     switch (currentStep) {
       case 0:
@@ -762,30 +637,25 @@ const createStyles = (colors, theme) => StyleSheet.create({
   scrollContent: {
     flexGrow: 1,
     paddingHorizontal: 24,
-    paddingTop: 40,
-    paddingBottom: 40
+    paddingTop: 4,
+    paddingBottom: 20
   },
   stepContainer: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minHeight: 600
-  },
-  modernImageContainer: {
-    alignItems: 'center',
-    marginBottom: 40
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
   },
   modernHeader: {
     alignItems: 'flex-start',
     width: '100%',
-    marginBottom: 32
+    marginBottom: 24
   },
   modernTitle: {
     fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
     fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
-    fontSize: 42,
+    fontSize: 62,
     lineHeight: 48,
-    marginBottom: 12,
+    marginBottom: 18,
     textAlign: 'left',
     letterSpacing: -1
   },
@@ -896,6 +766,12 @@ const createStyles = (colors, theme) => StyleSheet.create({
   buttonIcon: {
     marginLeft: 4
   },
+  // Enhanced Label Styles
+  modernLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 2
+  },
   modernLinkText: {
     fontSize: 14,
     lineHeight: 20,
@@ -905,7 +781,7 @@ const createStyles = (colors, theme) => StyleSheet.create({
   footerTextContainer: {
     flexDirection: 'row',
     justifyContent: 'center',
-    marginTop: 28
+    marginTop: 16
   },
   footerText: {
     fontSize: 15
@@ -965,8 +841,10 @@ const createStyles = (colors, theme) => StyleSheet.create({
   modernNavigationButtons: {
     flexDirection: 'row',
     justifyContent: 'center',
-    marginTop: 24,
-    marginBottom: 16
+    marginTop: 16,
+    marginBottom: 8,
+    width: '100%',
+    gap: 8
   },
   modernBackButton: {
     flexDirection: 'row',