@umituz/react-native-auth 3.6.44 → 3.6.45

package/src/presentation/components/AuthLegalLinks.tsx

@@ -1,103 +1,79 @@
-/**
- * Auth Legal Links Component
- * Display Terms of Service and Privacy Policy links
- */
-
 import React from "react";
 import { View, StyleSheet, Linking } from "react-native";
-import { AtomicButton, AtomicText } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicButton, useAppDesignTokens } from "@umituz/react-native-design-system";
 
-import { useLocalization } from "@umituz/react-native-localization";
+export interface AuthLegalLinksTranslations {
+  termsOfService: string;
+  privacyPolicy: string;
+}
 
 export interface AuthLegalLinksProps {
-  /**
-   * Terms of Service URL
-   */
+  translations: AuthLegalLinksTranslations;
   termsUrl?: string;
-  /**
-   * Privacy Policy URL
-   */
   privacyUrl?: string;
-  /**
-   * Callback when Terms of Service is pressed
-   */
   onTermsPress?: () => void;
-  /**
-   * Callback when Privacy Policy is pressed
-   */
   onPrivacyPress?: () => void;
-  /**
-   * Custom text before links
-   */
   prefixText?: string;
 }
 
 export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
+  translations,
   termsUrl,
   privacyUrl,
   onTermsPress,
   onPrivacyPress,
   prefixText,
 }) => {
-  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
 
-  const handleTermsPress = () => {
+  const handleTermsPress = async () => {
     if (onTermsPress) {
       onTermsPress();
     } else if (termsUrl) {
-      void Linking.openURL(termsUrl);
+      await Linking.openURL(termsUrl);
     }
   };
 
-  const handlePrivacyPress = () => {
+  const handlePrivacyPress = async () => {
     if (onPrivacyPress) {
       onPrivacyPress();
     } else if (privacyUrl) {
-      void Linking.openURL(privacyUrl);
+      await Linking.openURL(privacyUrl);
     }
   };
 
-  const hasTerms = termsUrl || onTermsPress;
-  const hasPrivacy = privacyUrl || onPrivacyPress;
-
-  if (!hasTerms && !hasPrivacy) {
+  if (!termsUrl && !privacyUrl && !onTermsPress && !onPrivacyPress) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { marginTop: tokens.spacing.lg }]}>
       {prefixText && (
-        <AtomicText
-          type="bodySmall"
-          color="textSecondary"
-          style={styles.prefixText}
-        >
+        <AtomicText type="bodySmall" color="textSecondary" style={styles.prefix}>
           {prefixText}
         </AtomicText>
       )}
-      <View style={styles.linksContainer}>
-        {hasTerms && (
+      <View style={styles.linksRow}>
+        {(termsUrl || onTermsPress) && (
           <AtomicButton
             variant="text"
             size="sm"
-            onPress={handleTermsPress}
-            style={styles.linkButton}
-            title={t("auth.termsOfService")}
-          />
+            onPress={() => { void handleTermsPress(); }}
+          >
+            {translations.termsOfService}
+          </AtomicButton>
         )}
-        {hasTerms && hasPrivacy && (
-          <AtomicText type="bodySmall" color="textSecondary" style={styles.separator}>
-            {" • "}
-          </AtomicText>
+        {(termsUrl || onTermsPress) && (privacyUrl || onPrivacyPress) && (
+          <AtomicText type="bodySmall" color="textSecondary"> & </AtomicText>
         )}
-        {hasPrivacy && (
+        {(privacyUrl || onPrivacyPress) && (
           <AtomicButton
             variant="text"
             size="sm"
-            onPress={handlePrivacyPress}
-            style={styles.linkButton}
-            title={t("auth.privacyPolicy")}
-          />
+            onPress={() => { void handlePrivacyPress(); }}
+          >
+            {translations.privacyPolicy}
+          </AtomicButton>
         )}
       </View>
     </View>
@@ -106,35 +82,13 @@ export const AuthLegalLinks: React.FC<AuthLegalLinksProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 16,
     alignItems: "center",
   },
-  prefixText: {
-    marginBottom: 8,
-    textAlign: "center",
+  prefix: {
+    marginBottom: 4,
   },
-  linksContainer: {
+  linksRow: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "center",
-    flexWrap: "wrap",
-  },
-  linkButton: {
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-  },
-  separator: {
-    marginHorizontal: 4,
   },
 });
-
-
-
-
-
-
-
-
-
-
-

package/src/presentation/components/LoginForm.tsx

@@ -1,24 +1,29 @@
-/**
- * Login Form Component
- * Single Responsibility: Render login form UI
- */
-
-import React, { useRef, useEffect } from "react";
+import React, { useRef } from "react";
 import { StyleSheet, TextInput } from "react-native";
 import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
 import { useLoginForm } from "../hooks/useLoginForm";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
 import { AuthLink } from "./AuthLink";
 
-declare const __DEV__: boolean;
+export interface LoginFormTranslations {
+  email: string;
+  emailPlaceholder: string;
+  password: string;
+  passwordPlaceholder: string;
+  signIn: string;
+  dontHaveAccount: string;
+  createAccount: string;
+}
 
-interface LoginFormProps {
+export interface LoginFormProps {
+  translations: LoginFormTranslations;
   onNavigateToRegister: () => void;
 }
 
-export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) => {
-  const { t } = useLocalization();
+export const LoginForm: React.FC<LoginFormProps> = ({
+  translations,
+  onNavigateToRegister,
+}) => {
   const passwordRef = useRef<React.ElementRef<typeof TextInput>>(null);
   const {
     email,
@@ -32,28 +37,13 @@ export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) =>
     displayError,
   } = useLoginForm();
 
-  useEffect(() => {
-    if (__DEV__) {
-      console.log("[LoginForm] Mounted/Updated:", {
-        hasEmail: !!email,
-        hasPassword: !!password,
-        loading,
-        hasError: !!displayError,
-      });
-    }
-  }, [email, password, loading, displayError]);
-
-  if (__DEV__) {
-    console.log("[LoginForm] Rendering...");
-  }
-
   return (
     <>
       <AtomicInput
-        label={t("auth.email")}
+        label={translations.email}
         value={email}
         onChangeText={handleEmailChange}
-        placeholder={t("auth.emailPlaceholder")}
+        placeholder={translations.emailPlaceholder}
         keyboardType="email-address"
         autoCapitalize="none"
         disabled={loading}
@@ -68,10 +58,10 @@ export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) =>
 
       <AtomicInput
         ref={passwordRef}
-        label={t("auth.password")}
+        label={translations.password}
         value={password}
         onChangeText={handlePasswordChange}
-        placeholder={t("auth.passwordPlaceholder")}
+        placeholder={translations.passwordPlaceholder}
         secureTextEntry
         showPasswordToggle
         autoCapitalize="none"
@@ -94,12 +84,12 @@ export const LoginForm: React.FC<LoginFormProps> = ({ onNavigateToRegister }) =>
         fullWidth
         style={styles.signInButton}
       >
-        {t("auth.signIn")}
+        {translations.signIn}
       </AtomicButton>
 
       <AuthLink
-        text={t("auth.dontHaveAccount")}
-        linkText={t("auth.createAccount")}
+        text={translations.dontHaveAccount}
+        linkText={translations.createAccount}
         onPress={onNavigateToRegister}
         disabled={loading}
       />

package/src/presentation/components/PasswordMatchIndicator.tsx

@@ -1,22 +1,24 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
+
+export interface PasswordMatchTranslations {
+  match: string;
+  noMatch: string;
+}
 
 export interface PasswordMatchIndicatorProps {
+  translations: PasswordMatchTranslations;
   isMatch: boolean;
 }
 
 export const PasswordMatchIndicator: React.FC<PasswordMatchIndicatorProps> = ({
+  translations,
   isMatch,
 }) => {
   const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-
   const color = isMatch ? tokens.colors.success : tokens.colors.error;
-  const text = isMatch
-    ? t("auth.passwordsMatch")
-    : t("auth.passwordsDontMatch");
+  const text = isMatch ? translations.match : translations.noMatch;
 
   return (
     <View style={styles.container}>
@@ -39,4 +41,3 @@ const styles = StyleSheet.create({
     borderRadius: 3,
   },
 });
-

package/src/presentation/components/PasswordStrengthIndicator.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
 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";
 
+export interface PasswordStrengthTranslations {
+  minLength: string;
+}
+
 export interface PasswordStrengthIndicatorProps {
+  translations: PasswordStrengthTranslations;
   requirements: PasswordRequirements;
   showLabels?: boolean;
 }
@@ -24,10 +28,6 @@ const RequirementDot: React.FC<RequirementDotProps> = ({
 }) => {
   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 (
@@ -40,33 +40,30 @@ const RequirementDot: React.FC<RequirementDotProps> = ({
   );
 };
 
-export const PasswordStrengthIndicator: React.FC<
-  PasswordStrengthIndicatorProps
-> = ({ requirements, showLabels = true }) => {
+export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps> = ({
+  translations,
+  requirements,
+  showLabels = true,
+}) => {
   const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-  
   const successColor: ColorVariant = "success";
   const pendingColor: ColorVariant = "textTertiary";
 
   const items = [
-    { key: "minLength", label: t("auth.passwordReq.minLength"), isValid: requirements.hasMinLength },
+    { key: "minLength", label: translations.minLength, isValid: requirements.hasMinLength },
   ];
 
   if (!showLabels) {
     return (
       <View style={styles.dotsOnly}>
         {items.map((item) => {
-           const colorKey = item.isValid ? successColor : pendingColor;
-           const dotColor = (tokens.colors as Record<string, string>)[colorKey] || tokens.colors.textTertiary;
-           
-           return (
+          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 },
-              ]}
+              style={[styles.dotOnly, { backgroundColor: dotColor }]}
             />
           );
         })}
@@ -116,4 +113,3 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
 });
-

package/src/presentation/components/RegisterForm.tsx

@@ -1,20 +1,33 @@
-/**
- * Register Form Component
- * Single Responsibility: Render register form UI
- */
-
 import React, { useRef } from "react";
 import { StyleSheet, TextInput } from "react-native";
 import { AtomicInput, AtomicButton } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
 import { useRegisterForm } from "../hooks/useRegisterForm";
 import { AuthErrorDisplay } from "./AuthErrorDisplay";
 import { AuthLink } from "./AuthLink";
-import { AuthLegalLinks } from "./AuthLegalLinks";
-import { PasswordStrengthIndicator } from "./PasswordStrengthIndicator";
-import { PasswordMatchIndicator } from "./PasswordMatchIndicator";
+import { AuthLegalLinks, type AuthLegalLinksTranslations } from "./AuthLegalLinks";
+import { PasswordStrengthIndicator, type PasswordStrengthTranslations } from "./PasswordStrengthIndicator";
+import { PasswordMatchIndicator, type PasswordMatchTranslations } from "./PasswordMatchIndicator";
+
+export interface RegisterFormTranslations {
+  displayName: string;
+  displayNamePlaceholder: string;
+  email: string;
+  emailPlaceholder: string;
+  password: string;
+  passwordPlaceholder: string;
+  confirmPassword: string;
+  confirmPasswordPlaceholder: string;
+  signUp: string;
+  alreadyHaveAccount: string;
+  signIn: string;
+  bySigningUp: string;
+  legal: AuthLegalLinksTranslations;
+  passwordStrength: PasswordStrengthTranslations;
+  passwordMatch: PasswordMatchTranslations;
+}
 
-interface RegisterFormProps {
+export interface RegisterFormProps {
+  translations: RegisterFormTranslations;
   onNavigateToLogin: () => void;
   termsUrl?: string;
   privacyUrl?: string;
@@ -23,13 +36,13 @@ interface RegisterFormProps {
 }
 
 export const RegisterForm: React.FC<RegisterFormProps> = ({
+  translations,
   onNavigateToLogin,
   termsUrl,
   privacyUrl,
   onTermsPress,
   onPrivacyPress,
 }) => {
-  const { t } = useLocalization();
   const emailRef = useRef<React.ElementRef<typeof TextInput>>(null);
   const passwordRef = useRef<React.ElementRef<typeof TextInput>>(null);
   const confirmPasswordRef = useRef<React.ElementRef<typeof TextInput>>(null);
@@ -54,12 +67,10 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
   return (
     <>
       <AtomicInput
-        label={t("auth.displayName")}
+        label={translations.displayName}
         value={displayName}
         onChangeText={handleDisplayNameChange}
-        placeholder={
-          t("auth.displayNamePlaceholder")
-        }
+        placeholder={translations.displayNamePlaceholder}
         autoCapitalize="words"
         disabled={loading}
         state={fieldErrors.displayName ? "error" : "default"}
@@ -72,10 +83,10 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
       <AtomicInput
         ref={emailRef}
-        label={t("auth.email")}
+        label={translations.email}
         value={email}
         onChangeText={handleEmailChange}
-        placeholder={t("auth.emailPlaceholder")}
+        placeholder={translations.emailPlaceholder}
         keyboardType="email-address"
         autoCapitalize="none"
         disabled={loading}
@@ -90,10 +101,10 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
       <AtomicInput
         ref={passwordRef}
-        label={t("auth.password")}
+        label={translations.password}
         value={password}
         onChangeText={handlePasswordChange}
-        placeholder={t("auth.passwordPlaceholder")}
+        placeholder={translations.passwordPlaceholder}
         secureTextEntry
         showPasswordToggle
         autoCapitalize="none"
@@ -108,15 +119,18 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
         style={styles.input}
       />
       {password.length > 0 && (
-        <PasswordStrengthIndicator requirements={passwordRequirements} />
+        <PasswordStrengthIndicator
+          translations={translations.passwordStrength}
+          requirements={passwordRequirements}
+        />
       )}
 
       <AtomicInput
         ref={confirmPasswordRef}
-        label={t("auth.confirmPassword")}
+        label={translations.confirmPassword}
         value={confirmPassword}
         onChangeText={handleConfirmPasswordChange}
-        placeholder={t("auth.confirmPasswordPlaceholder")}
+        placeholder={translations.confirmPasswordPlaceholder}
         secureTextEntry
         showPasswordToggle
         autoCapitalize="none"
@@ -130,7 +144,10 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
         style={styles.input}
       />
       {confirmPassword.length > 0 && (
-        <PasswordMatchIndicator isMatch={passwordsMatch} />
+        <PasswordMatchIndicator
+          translations={translations.passwordMatch}
+          isMatch={passwordsMatch}
+        />
       )}
 
       <AuthErrorDisplay error={displayError} />
@@ -147,22 +164,23 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
         fullWidth
         style={styles.signUpButton}
       >
-        {t("auth.signUp")}
+        {translations.signUp}
       </AtomicButton>
 
       <AuthLink
-        text={t("auth.alreadyHaveAccount")}
-        linkText={t("auth.signIn")}
+        text={translations.alreadyHaveAccount}
+        linkText={translations.signIn}
         onPress={onNavigateToLogin}
         disabled={loading}
       />
 
       <AuthLegalLinks
+        translations={translations.legal}
         termsUrl={termsUrl}
         privacyUrl={privacyUrl}
         onTermsPress={onTermsPress}
         onPrivacyPress={onPrivacyPress}
-        prefixText={t("auth.bySigningUp")}
+        prefixText={translations.bySigningUp}
       />
     </>
   );
@@ -178,4 +196,3 @@ const styles = StyleSheet.create({
     marginTop: 8,
   },
 });
-

package/src/presentation/components/SocialLoginButtons.tsx

@@ -1,76 +1,75 @@
 import React from "react";
-import {
-  View,
-  StyleSheet,
-  Platform,
-} from "react-native";
-import { Divider, AtomicButton } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, AtomicButton, useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { SocialAuthProvider } from "../../domain/value-objects/AuthConfig";
 
+export interface SocialLoginButtonsTranslations {
+  orContinueWith: string;
+  google: string;
+  apple: string;
+}
+
 export interface SocialLoginButtonsProps {
-  /** Enabled providers to display */
+  translations: SocialLoginButtonsTranslations;
   enabledProviders: SocialAuthProvider[];
-  /** Called when Google sign-in is pressed */
   onGooglePress?: () => void;
-  /** Called when Apple sign-in is pressed */
   onApplePress?: () => void;
-  /** Loading state for Google button */
   googleLoading?: boolean;
-  /** Loading state for Apple button */
   appleLoading?: boolean;
-  /** Disable all buttons */
-  disabled?: boolean;
 }
 
 export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
+  translations,
   enabledProviders,
   onGooglePress,
   onApplePress,
   googleLoading = false,
   appleLoading = false,
-  disabled = false,
 }) => {
-  const { t } = useLocalization();
-
-  const safeEnabledProviders = enabledProviders ?? [];
-  const showGoogle = safeEnabledProviders.includes("google");
-  const showApple = safeEnabledProviders.includes("apple") && Platform.OS === "ios";
+  const tokens = useAppDesignTokens();
+  const hasGoogle = enabledProviders.includes("google");
+  const hasApple = enabledProviders.includes("apple");
 
-  if (!showGoogle && !showApple) {
+  if (!hasGoogle && !hasApple) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
-      <Divider text={t("auth.orContinueWith")} spacing="large" />
+    <View style={[styles.container, { marginTop: tokens.spacing.lg }]}>
+      <View style={styles.dividerContainer}>
+        <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
+        <AtomicText type="bodySmall" color="textSecondary" style={styles.dividerText}>
+          {translations.orContinueWith}
+        </AtomicText>
+        <View style={[styles.divider, { backgroundColor: tokens.colors.border }]} />
+      </View>
 
       <View style={styles.buttonsContainer}>
-        {showGoogle && (
+        {hasGoogle && onGooglePress && (
           <AtomicButton
             variant="outline"
-            onPress={onGooglePress || (() => {})}
+            onPress={onGooglePress}
+            disabled={googleLoading || appleLoading}
             loading={googleLoading}
-            disabled={disabled}
-            icon="logo-google"
             fullWidth
             style={styles.socialButton}
+            leftIcon="logo-google"
           >
-            {t("auth.google")}
+            {translations.google}
           </AtomicButton>
         )}
 
-        {showApple && (
+        {hasApple && onApplePress && (
           <AtomicButton
             variant="outline"
-            onPress={onApplePress || (() => {})}
+            onPress={onApplePress}
+            disabled={googleLoading || appleLoading}
             loading={appleLoading}
-            disabled={disabled}
-            icon="logo-apple"
             fullWidth
             style={styles.socialButton}
+            leftIcon="logo-apple"
           >
-            {t("auth.apple")}
+            {translations.apple}
           </AtomicButton>
         )}
       </View>
@@ -79,16 +78,23 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    marginTop: 24,
+  container: {},
+  dividerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  divider: {
+    flex: 1,
+    height: 1,
+  },
+  dividerText: {
+    marginHorizontal: 16,
   },
   buttonsContainer: {
-    flexDirection: 'row',
-    marginTop: 8,
     gap: 12,
   },
   socialButton: {
-    flex: 1,
+    minHeight: 48,
   },
 });
-