@umituz/react-native-auth 2.7.3 → 2.7.5

package/src/presentation/components/AuthLegalLinks.tsx

@@ -6,7 +6,7 @@
 import React from "react";
 import { View, StyleSheet, Linking } from "react-native";
 import { AtomicButton, AtomicText } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+
 import { useLocalization } from "@umituz/react-native-localization";
 
 export interface AuthLegalLinksProps {
@@ -39,22 +39,21 @@ export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
   onPrivacyPress,
   prefixText,
 }) => {
-  const tokens = useAppDesignTokens();
   const { t } = useLocalization();
 
-  const handleTermsPress = async () => {
+  const handleTermsPress = () => {
     if (onTermsPress) {
       onTermsPress();
     } else if (termsUrl) {
-      await Linking.openURL(termsUrl);
+      void Linking.openURL(termsUrl);
     }
   };
 
-  const handlePrivacyPress = async () => {
+  const handlePrivacyPress = () => {
     if (onPrivacyPress) {
       onPrivacyPress();
     } else if (privacyUrl) {
-      await Linking.openURL(privacyUrl);
+      void Linking.openURL(privacyUrl);
     }
   };
 
@@ -84,7 +83,7 @@ export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
             style={styles.linkButton}
           >
             <AtomicText type="bodySmall" color="primary">
-              {t("auth.termsOfService") || "Terms of Service"}
+              {t("auth.termsOfService")}
             </AtomicText>
           </AtomicButton>
         )}
@@ -100,7 +99,7 @@ export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
             style={styles.linkButton}
           >
             <AtomicText type="bodySmall" color="primary">
-              {t("auth.privacyPolicy") || "Privacy Policy"}
+              {t("auth.privacyPolicy")}
             </AtomicText>
           </AtomicButton>
         )}

package/src/presentation/components/EditProfileActions.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicButton } from "@umituz/react-native-design-system";
+
+export interface EditProfileActionsProps {
+    isSaving?: boolean;
+    onSave: () => void;
+    onCancel?: () => void;
+    labels: {
+        saveButton: string;
+        cancelButton: string;
+    };
+}
+
+export const EditProfileActions: React.FC<EditProfileActionsProps> = ({
+    isSaving,
+    onSave,
+    onCancel,
+    labels,
+}) => {
+    return (
+        <View style={styles.actions}>
+            <AtomicButton
+                variant="primary"
+                onPress={onSave}
+                disabled={isSaving}
+                fullWidth
+            >
+                {labels.saveButton}
+            </AtomicButton>
+
+            {onCancel && (
+                <AtomicButton
+                    variant="outline"
+                    onPress={onCancel}
+                    disabled={isSaving}
+                    fullWidth
+                >
+                    {labels.cancelButton}
+                </AtomicButton>
+            )}
+        </View>
+    );
+
+};
+
+const styles = StyleSheet.create({
+    actions: {
+        marginTop: 32,
+        gap: 12,
+    },
+});
+

package/src/presentation/components/EditProfileAvatar.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicAvatar } from "@umituz/react-native-design-system";
+
+export interface EditProfileAvatarProps {
+    photoURL: string | null;
+    displayName: string;
+    onPress?: () => void;
+}
+
+export const EditProfileAvatar: React.FC<EditProfileAvatarProps> = ({
+    photoURL,
+    displayName,
+}) => {
+    return (
+        <View style={styles.avatarContainer}>
+            <AtomicAvatar
+                source={photoURL ? { uri: photoURL } : undefined}
+                name={displayName}
+                size="xl"
+            />
+
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    avatarContainer: {
+        alignItems: "center",
+        marginBottom: 24,
+    },
+});
+

package/src/presentation/components/EditProfileForm.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicInput } from "@umituz/react-native-design-system";
+
+export interface EditProfileFormProps {
+    displayName: string;
+    email: string;
+    onChangeDisplayName: (value: string) => void;
+    onChangeEmail: (value: string) => void;
+    labels: {
+        displayNameLabel: string;
+        displayNamePlaceholder: string;
+        emailLabel: string;
+        emailPlaceholder: string;
+    };
+}
+
+export const EditProfileForm: React.FC<EditProfileFormProps> = ({
+    displayName,
+    email,
+    onChangeDisplayName,
+    onChangeEmail,
+    labels,
+}) => {
+    return (
+        <View>
+            <View style={styles.field}>
+                <AtomicInput
+                    label={labels.displayNameLabel}
+                    value={displayName}
+                    onChangeText={onChangeDisplayName}
+                    placeholder={labels.displayNamePlaceholder}
+                />
+            </View>
+
+            <View style={styles.field}>
+                <AtomicInput
+                    label={labels.emailLabel}
+                    value={email}
+                    onChangeText={onChangeEmail}
+                    placeholder={labels.emailPlaceholder}
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    field: {
+        marginBottom: 20,
+    },
+});
+

package/src/presentation/components/LoginForm.tsx

@@ -64,7 +64,7 @@ export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) =>
       <View style={styles.buttonContainer}>
         <AtomicButton
           variant="primary"
-          onPress={handleSignIn}
+          onPress={() => { void handleSignIn(); }}
           disabled={loading || !email.trim() || !password.trim()}
           fullWidth
           style={styles.signInButton}

package/src/presentation/components/PasswordMatchIndicator.tsx

@@ -1,11 +1,6 @@
-/**
- * Password Match Indicator Component
- * Shows whether passwords match
- */
-
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 
 export interface PasswordMatchIndicatorProps {
@@ -20,13 +15,13 @@ export const PasswordMatchIndicator: React.FC<PasswordMatchIndicatorProps> = ({
 
   const color = isMatch ? tokens.colors.success : tokens.colors.error;
   const text = isMatch
-    ? t("auth.passwordsMatch", { defaultValue: "Passwords match" })
-    : t("auth.passwordsDontMatch", { defaultValue: "Passwords don't match" });
+    ? t("auth.passwordsMatch")
+    : t("auth.passwordsDontMatch");
 
   return (
     <View style={styles.container}>
       <View style={[styles.dot, { backgroundColor: color }]} />
-      <Text style={[styles.text, { color }]}>{text}</Text>
+      <AtomicText type="labelSmall" style={{ color }}>{text}</AtomicText>
     </View>
   );
 };
@@ -43,8 +38,5 @@ const styles = StyleSheet.create({
     height: 6,
     borderRadius: 3,
   },
-  text: {
-    fontSize: 12,
-    fontWeight: "500",
-  },
 });
+

package/src/presentation/components/PasswordStrengthIndicator.tsx

@@ -1,11 +1,7 @@
-/**
- * Password Strength Indicator Component
- * Shows password requirements with visual feedback
- */
-
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
 import type { PasswordRequirements } from "../../infrastructure/utils/AuthValidation";
 
 export interface PasswordStrengthIndicatorProps {
@@ -31,7 +27,7 @@ const RequirementDot: React.FC<RequirementDotProps> = ({
   return (
     <View style={styles.requirement}>
       <View style={[styles.dot, { backgroundColor: color }]} />
-      <Text style={[styles.label, { color }]}>{label}</Text>
+      <AtomicText type="labelSmall" style={{ color }}>{label}</AtomicText>
     </View>
   );
 };
@@ -40,15 +36,16 @@ export const PasswordStrengthIndicator: React.FC<
   PasswordStrengthIndicatorProps
 > = ({ requirements, showLabels = true }) => {
   const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
   const successColor = tokens.colors.success;
   const pendingColor = tokens.colors.textTertiary;
 
   const items = [
-    { key: "minLength", label: "8+", isValid: requirements.hasMinLength },
-    { key: "uppercase", label: "A-Z", isValid: requirements.hasUppercase },
-    { key: "lowercase", label: "a-z", isValid: requirements.hasLowercase },
-    { key: "number", label: "0-9", isValid: requirements.hasNumber },
-    { key: "special", label: "!@#", isValid: requirements.hasSpecialChar },
+    { key: "minLength", label: t("auth.passwordReq.minLength"), isValid: requirements.hasMinLength },
+    { key: "uppercase", label: t("auth.passwordReq.uppercase"), isValid: requirements.hasUppercase },
+    { key: "lowercase", label: t("auth.passwordReq.lowercase"), isValid: requirements.hasLowercase },
+    { key: "number", label: t("auth.passwordReq.number"), isValid: requirements.hasNumber },
+    { key: "special", label: t("auth.passwordReq.special"), isValid: requirements.hasSpecialChar },
   ];
 
   if (!showLabels) {
@@ -111,8 +108,5 @@ const styles = StyleSheet.create({
     height: 8,
     borderRadius: 4,
   },
-  label: {
-    fontSize: 11,
-    fontWeight: "500",
-  },
 });
+

package/src/presentation/components/ProfileBenefitsList.tsx

@@ -0,0 +1,47 @@
+/**
+ * Profile Benefits List Component
+ * Shows a list of benefits for anonymous users
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+
+export interface ProfileBenefitsListProps {
+    benefits: string[];
+}
+
+export const ProfileBenefitsList: React.FC<ProfileBenefitsListProps> = ({ benefits }) => {
+
+    return (
+        <View style={styles.benefitsContainer}>
+            {benefits.map((benefit, index) => (
+                <View key={index} style={styles.benefitItem}>
+                    <AtomicIcon name="check" size="sm" color="primary" />
+                    <AtomicText
+                        type="bodyMedium"
+                        color="secondary"
+                        style={styles.benefitText}
+                    >
+                        {benefit}
+                    </AtomicText>
+                </View>
+            ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    benefitsContainer: {
+        marginBottom: 16,
+        gap: 8,
+    },
+    benefitItem: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 8,
+    },
+    benefitText: {
+        flex: 1,
+    },
+});

package/src/presentation/components/ProfileSection.tsx

@@ -1,21 +1,20 @@
 /**
  * Profile Section Component
  * Generic user profile section for settings screens
- * Shows user info, sign in CTA for anonymous, or account navigation for signed in users
  */
 
 import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-import { Avatar } from "@umituz/react-native-design-system";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText, AtomicIcon, Avatar } from "@umituz/react-native-design-system";
+import { ProfileBenefitsList } from "./ProfileBenefitsList";
 
 export interface ProfileSectionConfig {
-    displayName: string;
+    displayName?: string;
     userId?: string;
     isAnonymous: boolean;
     avatarUrl?: string;
     accountSettingsRoute?: string;
-    benefits?: string[]; // App-specific benefits for anonymous users to encourage sign-in
+    benefits?: string[];
 }
 
 export interface ProfileSectionProps {
@@ -43,8 +42,6 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
         }
     };
 
-
-
     return (
         <TouchableOpacity
             style={[styles.container, { backgroundColor: tokens.colors.surface }]}
@@ -53,7 +50,6 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
             disabled={!onPress && !onSignIn}
         >
             <View style={styles.content}>
-                {/* Avatar */}
                 <View style={styles.avatarContainer}>
                     <Avatar
                         uri={profile.avatarUrl}
@@ -63,72 +59,43 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
                     />
                 </View>
 
-                {/* User Info */}
                 <View style={styles.info}>
-                    <Text
-                        style={[styles.displayName, { color: tokens.colors.textPrimary }]}
+                    <AtomicText
+                        type="titleMedium"
+                        color="textPrimary"
                         numberOfLines={1}
+                        style={styles.displayName}
                     >
                         {profile.displayName}
-                    </Text>
+                    </AtomicText>
                     {profile.userId && (
-                        <Text
-                            style={[styles.userId, { color: tokens.colors.textSecondary }]}
+                        <AtomicText
+                            type="bodySmall"
+                            color="secondary"
                             numberOfLines={1}
                         >
                             {profile.userId}
-                        </Text>
+                        </AtomicText>
                     )}
                 </View>
 
-                {/* Action Icon - only for authenticated users */}
                 {onPress && !profile.isAnonymous && (
-                    <Text style={[styles.chevron, { color: tokens.colors.textTertiary }]}>
-                        ›
-                    </Text>
+                    <AtomicIcon name="chevron-right" size="sm" color="secondary" />
                 )}
             </View>
 
-            {/* Sign In CTA for Anonymous Users */}
             {profile.isAnonymous && onSignIn && (
-                <View
-                    style={[
-                        styles.ctaContainer,
-                        { borderTopColor: tokens.colors.border },
-                    ]}
-                >
-                    {/* Benefits List */}
-                    {profile.benefits && profile.benefits.length > 0 && (
-                        <View style={styles.benefitsContainer}>
-                            {profile.benefits.map((benefit, index) => (
-                                <View key={index} style={styles.benefitItem}>
-                                    <Text style={[styles.benefitBullet, { color: tokens.colors.primary }]}>
-                                        ✓
-                                    </Text>
-                                    <Text style={[styles.benefitText, { color: tokens.colors.textSecondary }]}>
-                                        {benefit}
-                                    </Text>
-                                </View>
-                            ))}
-                        </View>
-                    )}
+                <View style={[styles.ctaContainer, { borderTopColor: tokens.colors.border }]}>
+                    {profile.benefits && <ProfileBenefitsList benefits={profile.benefits} />}
 
                     <TouchableOpacity
-                        style={[
-                            styles.ctaButton,
-                            { backgroundColor: tokens.colors.primary },
-                        ]}
+                        style={[styles.ctaButton, { backgroundColor: tokens.colors.primary }]}
                         onPress={onSignIn}
                         activeOpacity={0.8}
                     >
-                        <Text
-                            style={[
-                                styles.ctaText,
-                                { color: tokens.colors.onPrimary },
-                            ]}
-                        >
+                        <AtomicText type="labelLarge" style={{ color: tokens.colors.onPrimary }}>
                             {signInText}
-                        </Text>
+                        </AtomicText>
                     </TouchableOpacity>
                 </View>
             )}
@@ -153,48 +120,16 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     displayName: {
-        fontSize: 18,
-        fontWeight: "600",
         marginBottom: 2,
     },
-    userId: {
-        fontSize: 13,
-    },
-    chevron: {
-        fontSize: 24,
-        fontWeight: "400",
-    },
     ctaContainer: {
         marginTop: 12,
         paddingTop: 12,
         borderTopWidth: 1,
     },
-    benefitsContainer: {
-        marginBottom: 16,
-        gap: 8,
-    },
-    benefitItem: {
-        flexDirection: "row",
-        alignItems: "flex-start",
-        gap: 8,
-    },
-    benefitBullet: {
-        fontSize: 16,
-        fontWeight: "600",
-        marginTop: 2,
-    },
-    benefitText: {
-        flex: 1,
-        fontSize: 14,
-        lineHeight: 20,
-    },
     ctaButton: {
         paddingVertical: 12,
         borderRadius: 8,
         alignItems: "center",
     },
-    ctaText: {
-        fontSize: 15,
-        fontWeight: "600",
-    },
 });

package/src/presentation/components/RegisterForm.tsx

@@ -51,11 +51,11 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
     <>
       <View style={styles.inputContainer}>
         <AtomicInput
-          label={t("auth.displayName") || "Full Name"}
+          label={t("auth.displayName")}
           value={displayName}
           onChangeText={handleDisplayNameChange}
           placeholder={
-            t("auth.displayNamePlaceholder") || "Enter your full name"
+            t("auth.displayNamePlaceholder")
           }
           autoCapitalize="words"
           disabled={loading}
@@ -97,11 +97,11 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
       <View style={styles.inputContainer}>
         <AtomicInput
-          label={t("auth.confirmPassword") || "Confirm Password"}
+          label={t("auth.confirmPassword")}
           value={confirmPassword}
           onChangeText={handleConfirmPasswordChange}
           placeholder={
-            t("auth.confirmPasswordPlaceholder") || "Confirm your password"
+            t("auth.confirmPasswordPlaceholder")
           }
           secureTextEntry
           autoCapitalize="none"
@@ -119,7 +119,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
       <View style={styles.buttonContainer}>
         <AtomicButton
           variant="primary"
-          onPress={handleSignUp}
+          onPress={() => { void handleSignUp(); }}
           disabled={
             loading ||
             !email.trim() ||
@@ -145,7 +145,7 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
         privacyUrl={privacyUrl}
         onTermsPress={onTermsPress}
         onPrivacyPress={onPrivacyPress}
-        prefixText={t("auth.bySigningUp") || "By signing up, you agree to our"}
+        prefixText={t("auth.bySigningUp")}
       />
     </>
   );

package/src/presentation/components/SocialLoginButtons.tsx

@@ -1,16 +1,14 @@
 import React from "react";
 import {
   View,
-  Text,
   TouchableOpacity,
   StyleSheet,
   Platform,
   ActivityIndicator,
 } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
-import { AppleIconSvg, GoogleIconSvg } from "./icons";
 
 export interface SocialLoginButtonsProps {
   /** Enabled providers to display */
@@ -49,9 +47,9 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
     <View style={styles.container}>
       <View style={styles.dividerContainer}>
         <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
-        <Text style={[styles.dividerText, { color: tokens.colors.textSecondary }]}>
+        <AtomicText type="bodySmall" color="secondary" style={styles.dividerText}>
           {t("auth.orContinueWith")}
-        </Text>
+        </AtomicText>
         <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
       </View>
 
@@ -71,10 +69,10 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
               <ActivityIndicator size="small" color={tokens.colors.textPrimary} />
             ) : (
               <>
-                <GoogleIconSvg size={20} />
-                <Text style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
-                  Google
-                </Text>
+                <AtomicIcon name="google" size="sm" />
+                <AtomicText style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
+                  {t("auth.google")}
+                </AtomicText>
               </>
             )}
           </TouchableOpacity>
@@ -95,10 +93,10 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
               <ActivityIndicator size="small" color={tokens.colors.textPrimary} />
             ) : (
               <>
-                <AppleIconSvg size={20} color={tokens.colors.textPrimary} />
-                <Text style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
-                  Apple
-                </Text>
+                <AtomicIcon name="apple" size="sm" color="primary" />
+                <AtomicText style={[styles.buttonText, { color: tokens.colors.textPrimary }]}>
+                  {t("auth.apple")}
+                </AtomicText>
               </>
             )}
           </TouchableOpacity>
@@ -108,7 +106,6 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
   );
 };
 
-
 const styles = StyleSheet.create({
   container: {
     marginTop: 24,
@@ -124,7 +121,6 @@ const styles = StyleSheet.create({
   },
   dividerText: {
     marginHorizontal: 16,
-    fontSize: 14,
   },
   buttonsContainer: {
     flexDirection: "row",