@oxyhq/services 5.7.5 → 5.8.1

package/src/ui/screens/internal/SignUpSecurityStep.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useCallback, useEffect } from 'react';
 import { View, Text, Animated, TextInput } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
 import TextField from '../../components/internal/TextField';
 
@@ -78,7 +79,7 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
             </View>
             <TextField
                 ref={passwordRef}
-                icon="lock-closed-outline"
+                leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
                 label="Password"
                 value={formData.password}
                 onChangeText={text => updateField('password', text)}
@@ -86,7 +87,6 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
                 autoCapitalize="none"
                 autoCorrect={false}
                 testID="password-input"
-                colors={colors}
                 variant="filled"
                 error={formData.password && typeof formData.password === 'string' && !validatePassword(formData.password) ? `Password must be at least ${PASSWORD_MIN_LENGTH} characters` : undefined}
                 onSubmitEditing={() => confirmPasswordRef.current?.focus()}
@@ -95,7 +95,7 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
             <Text style={[styles.passwordHint, { color: colors.secondaryText }]}>Password must be at least {PASSWORD_MIN_LENGTH} characters long</Text>
             <TextField
                 ref={confirmPasswordRef}
-                icon="lock-closed-outline"
+                leading={<Ionicons name="lock-closed-outline" size={24} color={colors.secondaryText} />}
                 label="Confirm Password"
                 value={formData.confirmPassword}
                 onChangeText={text => updateField('confirmPassword', text)}
@@ -103,7 +103,6 @@ const SignUpSecurityStep: React.FC<SignUpSecurityStepProps> = ({
                 autoCapitalize="none"
                 autoCorrect={false}
                 testID="confirm-password-input"
-                colors={colors}
                 variant="filled"
                 error={formData.confirmPassword && typeof formData.confirmPassword === 'string' && !validatePasswordsMatch(formData.password, formData.confirmPassword) ? 'Passwords do not match' : undefined}
                 onSubmitEditing={handleSecurityNext}

package/src/ui/stores/authStore.ts

@@ -26,19 +26,31 @@ export const useAuthStore = create<AuthState>((set: (state: Partial<AuthState>)
   fetchUser: async (oxyServices) => {
     set({ isLoading: true, error: null });
     try {
+      console.log('AuthStore: Fetching user data...');
       const user = await oxyServices.getCurrentUser();
+      console.log('AuthStore: Received user data:', {
+        hasUser: !!user,
+        userLinksMetadata: user?.linksMetadata,
+        userLinks: user?.links,
+        userWebsite: user?.website
+      });
       set({ user, isLoading: false, isAuthenticated: true });
     } catch (error: any) {
+      console.error('AuthStore: Error fetching user:', error);
       set({ error: error.message || 'Failed to fetch user', isLoading: false });
     }
   },
   updateUser: async (updates, oxyServices) => {
     set({ isLoading: true, error: null });
     try {
+      console.log('AuthStore: Updating user with:', updates);
       await oxyServices.updateProfile(updates);
+      console.log('AuthStore: Profile updated successfully');
       // Immediately fetch the latest user data after update
       await useAuthStore.getState().fetchUser(oxyServices);
+      console.log('AuthStore: User data refreshed');
     } catch (error: any) {
+      console.error('AuthStore: Error updating user:', error);
       set({ error: error.message || 'Failed to update user', isLoading: false });
     }
   },

package/src/ui/styles/authStyles.ts

@@ -0,0 +1,352 @@
+import { Platform, StyleSheet, TextStyle } from 'react-native';
+import { fontFamilies } from './fonts';
+
+export interface AuthThemeColors {
+  text: string;
+  background: string;
+  inputBackground: string;
+  placeholder: string;
+  primary: string;
+  border: string;
+  error: string;
+  success: string;
+  warning: string;
+  secondaryText: string;
+}
+
+export const createAuthStyles = (colors: AuthThemeColors, theme: string) => StyleSheet.create({
+  // Container styles
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingHorizontal: 24,
+    paddingTop: 4,
+    paddingBottom: 20,
+  },
+  stepContainer: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+
+  // Header styles
+  modernHeader: {
+    alignItems: 'flex-start',
+    width: '100%',
+    marginBottom: 24,
+  },
+  modernTitle: {
+    fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 62,
+    lineHeight: 74.4, // 62 * 1.2
+    marginBottom: 18,
+    textAlign: 'left',
+    letterSpacing: -1,
+  },
+  modernSubtitle: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    opacity: 0.8,
+  },
+  welcomeTitle: {
+    fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 50.4, // 42 * 1.2
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1,
+  },
+  stepTitle: {
+    fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    lineHeight: 50.4, // 42 * 1.2
+    marginBottom: 12,
+    textAlign: 'left',
+    letterSpacing: -1,
+  },
+
+  // Info and error cards
+  modernInfoCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 16,
+    marginBottom: 24,
+    gap: 12,
+    width: '100%',
+  },
+  modernInfoText: {
+    fontSize: 14,
+    flex: 1,
+  },
+  modernErrorCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 16,
+    marginBottom: 24,
+    gap: 12,
+    width: '100%',
+  },
+  errorText: {
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1,
+  },
+
+  // Input styles
+  modernInputContainer: {
+    width: '100%',
+    marginBottom: 24,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 56,
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    borderWidth: 2,
+    backgroundColor: colors.inputBackground,
+  },
+  premiumInputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 56,
+    borderRadius: 16,
+    paddingHorizontal: 20,
+    borderWidth: 2,
+    backgroundColor: colors.inputBackground,
+  },
+  inputIcon: {
+    marginRight: 12,
+  },
+  inputContent: {
+    flex: 1,
+  },
+  modernInput: {
+    flex: 1,
+    fontSize: 16,
+    height: '100%',
+  },
+  passwordToggle: {
+    padding: 4,
+  },
+
+  // Validation styles
+  validationIndicator: {
+    marginLeft: 8,
+  },
+  validationSuccessCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8,
+  },
+  validationErrorCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8,
+  },
+  validationCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 12,
+    marginTop: 8,
+    gap: 8,
+  },
+  validationText: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  belowInputMessage: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+    marginBottom: 0,
+    gap: 6,
+  },
+  belowInputText: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+
+  // Button styles
+  modernButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 18,
+    paddingHorizontal: 32,
+    borderRadius: 16,
+    marginVertical: 8,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 8,
+    elevation: 6,
+    gap: 8,
+    width: '100%',
+  },
+  modernButtonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: 0.5,
+  },
+  buttonIcon: {
+    marginLeft: 4,
+  },
+
+  // Label and link styles
+  modernLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 2,
+  },
+  modernLinkText: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '600',
+    textDecorationLine: 'underline',
+  },
+  footerTextContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16,
+  },
+  footerText: {
+    fontSize: 15,
+  },
+
+  // User profile styles
+  modernUserProfileContainer: {
+    alignItems: 'flex-start',
+    paddingVertical: 24,
+  },
+  avatarContainer: {
+    position: 'relative',
+    marginBottom: 20,
+  },
+  modernUserAvatar: {
+    borderWidth: 4,
+    borderColor: 'rgba(209, 105, 229, 0.2)',
+  },
+  statusIndicator: {
+    position: 'absolute',
+    bottom: 4,
+    right: 4,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 3,
+    borderColor: '#FFFFFF',
+  },
+  modernUserDisplayName: {
+    fontFamily: Platform.OS === 'web' ? 'Phudu' : 'Phudu-Bold',
+    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,
+    fontSize: 42,
+    marginBottom: 4,
+    textAlign: 'center',
+    letterSpacing: -0.5,
+  },
+  modernUsernameSubtext: {
+    fontSize: 20,
+    textAlign: 'left',
+    marginBottom: 16,
+    opacity: 0.7,
+  },
+  welcomeBackBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20,
+    gap: 6,
+  },
+  welcomeBackText: {
+    fontSize: 12,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+
+  // Navigation styles
+  modernNavigationButtons: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 16,
+    marginBottom: 8,
+    width: '100%',
+    gap: 8,
+  },
+  modernBackButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    borderWidth: 1,
+    gap: 8,
+  },
+  modernBackButtonText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+
+  // Security notice
+  securityNotice: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 20,
+    gap: 6,
+  },
+  securityText: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+
+  // Welcome image container
+  welcomeImageContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 20,
+  },
+  welcomeText: {
+    fontSize: 18,
+    lineHeight: 24,
+    textAlign: 'left',
+    opacity: 0.8,
+    marginBottom: 24,
+  },
+  
+  // Success styles
+  successCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderRadius: 16,
+    marginBottom: 24,
+    gap: 12,
+    width: '100%',
+  },
+  successText: {
+    fontSize: 14,
+    fontWeight: '500',
+    flex: 1,
+  },
+}); 

package/src/ui/styles/index.ts

@@ -1,2 +1,3 @@
 export * from './fonts';
 export * from './theme';
+export * from './authStyles';