@umituz/react-native-auth 3.5.8 → 3.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "3.5.8",
+  "version": "3.5.10",
   "description": "Authentication service for React Native apps - Secure, type-safe, and production-ready. Provider-agnostic design with dependency injection, configurable validation, and comprehensive error handling.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/infrastructure/utils/AuthValidation.ts

@@ -43,15 +43,21 @@ export function validatePasswordForRegister(
   config: PasswordConfig,
   validationConfig: ValidationConfig = DEFAULT_VAL_CONFIG
 ): PasswordStrengthResult {
+  /*
+   * Check for strict presence of characters regardless of configuration
+   * This ensures the UI reflects actual password content
+   */
   const req: PasswordRequirements = {
     hasMinLength: password.length >= config.minLength,
-    hasUppercase: !config.requireUppercase || validationConfig.uppercaseRegex.test(password),
-    hasLowercase: !config.requireLowercase || validationConfig.lowercaseRegex.test(password),
-    hasNumber: !config.requireNumber || validationConfig.numberRegex.test(password),
-    hasSpecialChar: !config.requireSpecialChar || validationConfig.specialCharRegex.test(password),
+    hasUppercase: validationConfig.uppercaseRegex.test(password),
+    hasLowercase: validationConfig.lowercaseRegex.test(password),
+    hasNumber: validationConfig.numberRegex.test(password),
+    hasSpecialChar: validationConfig.specialCharRegex.test(password),
   };
 
   if (!password) return { isValid: false, error: "auth.validation.passwordRequired", requirements: req };
+  
+  // Validation checks based on configuration
   if (!req.hasMinLength) return { isValid: false, error: "auth.validation.passwordTooShort", requirements: req };
   if (config.requireUppercase && !req.hasUppercase) return { isValid: false, error: "auth.validation.passwordRequireUppercase", requirements: req };
   if (config.requireLowercase && !req.hasLowercase) return { isValid: false, error: "auth.validation.passwordRequireLowercase", requirements: req };

package/src/presentation/components/AccountActions.tsx

@@ -93,11 +93,11 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
                     onPress={onChangePassword}
                     activeOpacity={0.7}
                 >
-                    <AtomicIcon name="key-outline" size="md" customColor={tokens.colors.textPrimary} />
-                    <AtomicText style={[styles.actionText, { color: tokens.colors.textPrimary }]}>
+                    <AtomicIcon name="key-outline" size="md" color="textPrimary" />
+                    <AtomicText style={styles.actionText} color="textPrimary">
                         {changePasswordText}
                     </AtomicText>
-                    <AtomicIcon name="chevron-forward" size="sm" color="secondary" />
+                    <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
                 </TouchableOpacity>
             )}
 
@@ -108,10 +108,10 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
                 activeOpacity={0.7}
             >
                 <AtomicIcon name="log-out-outline" size="md" color="error" />
-                <AtomicText style={[styles.actionText, { color: tokens.colors.error }]}>
+                <AtomicText style={styles.actionText} color="error">
                     {logoutText}
                 </AtomicText>
-                <AtomicIcon name="chevron-forward" size="sm" color="secondary" />
+                <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
             </TouchableOpacity>
 
             {/* Delete Account */}
@@ -121,10 +121,10 @@ export const AccountActions: React.FC<AccountActionsProps> = ({ config }) => {
                 activeOpacity={0.7}
             >
                 <AtomicIcon name="trash-outline" size="md" color="error" />
-                <AtomicText style={[styles.actionText, { color: tokens.colors.error }]}>
+                <AtomicText style={styles.actionText} color="error">
                     {deleteAccountText}
                 </AtomicText>
-                <AtomicIcon name="chevron-forward" size="sm" color="secondary" />
+                <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
             </TouchableOpacity>
         </View>
     );

package/src/presentation/components/AuthBottomSheet.tsx

@@ -93,7 +93,7 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
           accessibilityLabel={t("common.close")}
           accessibilityRole="button"
         >
-          <AtomicIcon name="close" size="md" color="secondary" />
+          <AtomicIcon name="close" size="md" color="textSecondary" />
         </TouchableOpacity>
 
         <ScrollView
@@ -103,10 +103,10 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
         >
 
         <View style={styles.header}>
-          <AtomicText type="headlineLarge" color="primary" style={styles.title}>
+          <AtomicText type="headlineLarge" color="textPrimary" style={styles.title}>
             {mode === "login" ? t("auth.signIn") : t("auth.createAccount")}
           </AtomicText>
-          <AtomicText type="bodyLarge" color="secondary" style={styles.subtitle}>
+          <AtomicText type="bodyLarge" color="textSecondary" style={styles.subtitle}>
             {mode === "login" ? t("auth.signInSubtitle") : t("auth.createAccountSubtitle")}
           </AtomicText>
         </View>

package/src/presentation/components/AuthHeader.tsx

@@ -21,7 +21,7 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
     <View style={[styles.header, { marginBottom: tokens.spacing.xl, paddingHorizontal: tokens.spacing.md }]}>
       <AtomicText
         type="headlineLarge"
-        color="onPrimary"
+        color="textPrimary"
         style={{ textAlign: "center" }}
       >
         {title}
@@ -29,7 +29,7 @@ export const AuthHeader: React.FC<AuthHeaderProps> = ({ title, subtitle }) => {
       {(subtitle || t("auth.subtitle")) && (
         <AtomicText
           type="bodyMedium"
-          color="textInverse"
+          color="textSecondary"
           style={{
             textAlign: "center",
             marginTop: tokens.spacing.xs,

package/src/presentation/components/AuthLegalLinks.tsx

@@ -69,7 +69,7 @@ export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
       {prefixText && (
         <AtomicText
           type="bodySmall"
-          color="secondary"
+          color="textSecondary"
           style={styles.prefixText}
         >
           {prefixText}
@@ -86,7 +86,7 @@ export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
           />
         )}
         {hasTerms && hasPrivacy && (
-          <AtomicText type="bodySmall" color="secondary" style={styles.separator}>
+          <AtomicText type="bodySmall" color="textSecondary" style={styles.separator}>
             {" • "}
           </AtomicText>
         )}

package/src/presentation/components/AuthLink.tsx

@@ -26,7 +26,7 @@ export const AuthLink: React.FC<AuthLinkProps> = ({
     <View style={[styles.container, { marginTop: tokens.spacing.xs, paddingTop: tokens.spacing.xs }]}>
       <AtomicText
         type="bodyMedium"
-        style={{ color: tokens.colors.textSecondary }}
+        color="textSecondary"
       >
         {text}{" "}
       </AtomicText>

package/src/presentation/components/PasswordStrengthIndicator.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, type ColorVariant } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { PasswordRequirements } from "../../infrastructure/utils/AuthValidation";
 
@@ -12,8 +12,8 @@ export interface PasswordStrengthIndicatorProps {
 interface RequirementDotProps {
   label: string;
   isValid: boolean;
-  successColor: string;
-  pendingColor: string;
+  successColor: ColorVariant;
+  pendingColor: ColorVariant;
 }
 
 const RequirementDot: React.FC<RequirementDotProps> = ({
@@ -22,12 +22,20 @@ const RequirementDot: React.FC<RequirementDotProps> = ({
   successColor,
   pendingColor,
 }) => {
-  const color = isValid ? successColor : pendingColor;
+  const tokens = useAppDesignTokens();
+  const colorKey = isValid ? successColor : pendingColor;
+  
+  // Resolve the color value from the token key for the View background
+  // We use type assertion since we know these are valid specific keys passed from parent
+  // but tokens.colors index signature might be limited
+  const dotColor = (tokens.colors as Record<string, string>)[colorKey] || tokens.colors.textTertiary;
 
   return (
     <View style={styles.requirement}>
-      <View style={[styles.dot, { backgroundColor: color }]} />
-      <AtomicText type="labelSmall" style={{ color }}>{label}</AtomicText>
+      <View style={[styles.dot, { backgroundColor: dotColor }]} />
+      <AtomicText type="labelSmall" color={colorKey}>
+        {label}
+      </AtomicText>
     </View>
   );
 };
@@ -37,8 +45,9 @@ export const PasswordStrengthIndicator: React.FC<
 > = ({ requirements, showLabels = true }) => {
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
-  const successColor = tokens.colors.success;
-  const pendingColor = tokens.colors.textTertiary;
+  
+  const successColor: ColorVariant = "success";
+  const pendingColor: ColorVariant = "textTertiary";
 
   const items = [
     { key: "minLength", label: t("auth.passwordReq.minLength"), isValid: requirements.hasMinLength },
@@ -51,17 +60,20 @@ export const PasswordStrengthIndicator: React.FC<
   if (!showLabels) {
     return (
       <View style={styles.dotsOnly}>
-        {items.map((item) => (
-          <View
-            key={item.key}
-            style={[
-              styles.dotOnly,
-              {
-                backgroundColor: item.isValid ? successColor : pendingColor,
-              },
-            ]}
-          />
-        ))}
+        {items.map((item) => {
+           const colorKey = item.isValid ? successColor : pendingColor;
+           const dotColor = (tokens.colors as Record<string, string>)[colorKey] || tokens.colors.textTertiary;
+           
+           return (
+            <View
+              key={item.key}
+              style={[
+                styles.dotOnly,
+                { backgroundColor: dotColor },
+              ]}
+            />
+          );
+        })}
       </View>
     );
   }

package/src/presentation/components/ProfileBenefitsList.tsx

@@ -20,7 +20,7 @@ export const ProfileBenefitsList: React.FC<ProfileBenefitsListProps> = ({ benefi
                     <AtomicIcon name="checkmark-circle" size="sm" color="primary" />
                     <AtomicText
                         type="bodyMedium"
-                        color="secondary"
+                        color="textSecondary"
                         style={styles.benefitText}
                     >
                         {benefit}

package/src/presentation/components/ProfileSection.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { useAppDesignTokens, AtomicText, AtomicIcon, Avatar } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicIcon, AtomicAvatar } from "@umituz/react-native-design-system";
 import { ProfileBenefitsList } from "./ProfileBenefitsList";
 
 export interface ProfileSectionConfig {
@@ -51,11 +51,10 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
         >
             <View style={styles.content}>
                 <View style={styles.avatarContainer}>
-                    <Avatar
-                        uri={profile.avatarUrl}
+                    <AtomicAvatar
+                        source={profile.avatarUrl ? { uri: profile.avatarUrl } : undefined}
                         name={profile.displayName || (profile.isAnonymous ? anonymousText : signInText)}
                         size="md"
-                        shape="circle"
                     />
                 </View>
 
@@ -71,7 +70,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
                     {profile.userId && (
                         <AtomicText
                             type="bodySmall"
-                            color="secondary"
+                            color="textSecondary"
                             numberOfLines={1}
                         >
                             {profile.userId}
@@ -80,7 +79,7 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
                 </View>
 
                 {onPress && !profile.isAnonymous && (
-                    <AtomicIcon name="chevron-forward" size="sm" color="secondary" />
+                    <AtomicIcon name="chevron-forward" size="sm" color="textSecondary" />
                 )}
             </View>
 

package/src/presentation/components/AuthDivider.tsx

@@ -1,63 +0,0 @@
-/**
- * Auth Divider Component
- * Divider with "OR" text for auth screens
- */
-
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-
-export const AuthDivider: React.FC = () => {
-  const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-
-  return (
-    <View style={[styles.divider, { marginVertical: tokens.spacing.md }]}>
-      <View
-        style={[
-          styles.dividerLine,
-          { backgroundColor: tokens.colors.borderLight },
-        ]}
-      />
-      <AtomicText
-        style={{
-          color: tokens.colors.textSecondary,
-          marginHorizontal: tokens.spacing.sm,
-          textTransform: "uppercase",
-          letterSpacing: 0.5,
-        }}
-      >
-        {t("general.or")}
-      </AtomicText>
-      <View
-        style={[
-          styles.dividerLine,
-          { backgroundColor: tokens.colors.borderLight },
-        ]}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  divider: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  dividerLine: {
-    flex: 1,
-    height: 1,
-  },
-});
-
-
-
-
-
-
-
-
-
-
-