@umituz/react-native-auth 3.6.44 → 3.6.45

package/src/presentation/hooks/useLoginForm.ts

@@ -1,15 +1,19 @@
-/**
- * useLoginForm Hook
- * Single Responsibility: Handle login form logic
- */
-
 import { useState, useCallback } from "react";
-import { useLocalization } from "@umituz/react-native-localization";
 import { useAuth } from "./useAuth";
 import { getAuthErrorLocalizationKey } from "../utils/getAuthErrorMessage";
 import { validateEmail, validatePasswordForLogin } from "../../infrastructure/utils/AuthValidation";
 import { alertService } from "@umituz/react-native-design-system";
 
+export interface LoginFormTranslations {
+  successTitle: string;
+  signInSuccess: string;
+  errors: Record<string, string>;
+}
+
+export interface UseLoginFormConfig {
+  translations: LoginFormTranslations;
+}
+
 export interface UseLoginFormResult {
   email: string;
   password: string;
@@ -24,9 +28,9 @@ export interface UseLoginFormResult {
   displayError: string | null;
 }
 
-export function useLoginForm(): UseLoginFormResult {
-  const { t } = useLocalization();
+export function useLoginForm(config?: UseLoginFormConfig): UseLoginFormResult {
   const { signIn, loading, error, continueAnonymously } = useAuth();
+  const translations = config?.translations;
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -34,6 +38,10 @@ export function useLoginForm(): UseLoginFormResult {
   const [passwordError, setPasswordError] = useState<string | null>(null);
   const [localError, setLocalError] = useState<string | null>(null);
 
+  const getErrorMessage = useCallback((key: string) => {
+    return translations?.errors?.[key] || key;
+  }, [translations]);
+
   const handleEmailChange = useCallback(
     (text: string) => {
       setEmail(text);
@@ -61,13 +69,13 @@ export function useLoginForm(): UseLoginFormResult {
 
     const emailResult = validateEmail(email.trim());
     if (!emailResult.isValid && emailResult.error) {
-      setEmailError(t(emailResult.error));
+      setEmailError(getErrorMessage(emailResult.error));
       hasError = true;
     }
 
     const passwordResult = validatePasswordForLogin(password);
     if (!passwordResult.isValid && passwordResult.error) {
-      setPasswordError(t(passwordResult.error));
+      setPasswordError(getErrorMessage(passwordResult.error));
       hasError = true;
     }
 
@@ -75,23 +83,25 @@ export function useLoginForm(): UseLoginFormResult {
 
     try {
       await signIn(email.trim(), password);
-      
-      alertService.success(
-        t("auth.successTitle"),
-        t("auth.signInSuccess")
-      );
+
+      if (translations) {
+        alertService.success(
+          translations.successTitle,
+          translations.signInSuccess
+        );
+      }
     } catch (err: unknown) {
       const localizationKey = getAuthErrorLocalizationKey(err);
-      const errorMessage = t(localizationKey);
+      const errorMessage = getErrorMessage(localizationKey);
       setLocalError(errorMessage);
     }
-  }, [email, password, t, signIn]);
+  }, [email, password, signIn, translations, getErrorMessage]);
 
   const handleContinueAnonymously = useCallback(async () => {
     try {
       await continueAnonymously();
     } catch {
-      // Silent fail - anonymous mode should always work
+      // Silent fail
     }
   }, [continueAnonymously]);
 

package/src/presentation/hooks/useRegisterForm.ts

@@ -1,10 +1,4 @@
-/**
- * useRegisterForm Hook
- * Single Responsibility: Handle register form logic
- */
-
 import { useState, useCallback, useMemo } from "react";
-import { useLocalization } from "@umituz/react-native-localization";
 import {
   validateEmail,
   validatePasswordForRegister,
@@ -16,6 +10,16 @@ import { getAuthErrorLocalizationKey } from "../utils/getAuthErrorMessage";
 import type { PasswordRequirements } from "../../infrastructure/utils/AuthValidation";
 import { alertService } from "@umituz/react-native-design-system";
 
+export interface RegisterFormTranslations {
+  successTitle: string;
+  signUpSuccess: string;
+  errors: Record<string, string>;
+}
+
+export interface UseRegisterFormConfig {
+  translations: RegisterFormTranslations;
+}
+
 export interface UseRegisterFormResult {
   displayName: string;
   email: string;
@@ -39,12 +43,9 @@ export interface UseRegisterFormResult {
   displayError: string | null;
 }
 
-/**
- * Hook for register form logic
- */
-export function useRegisterForm(): UseRegisterFormResult {
-  const { t } = useLocalization();
+export function useRegisterForm(config?: UseRegisterFormConfig): UseRegisterFormResult {
   const { signUp, loading, error } = useAuth();
+  const translations = config?.translations;
 
   const [displayName, setDisplayName] = useState("");
   const [email, setEmail] = useState("");
@@ -58,11 +59,13 @@ export function useRegisterForm(): UseRegisterFormResult {
     confirmPassword?: string;
   }>({});
 
+  const getErrorMessage = useCallback((key: string) => {
+    return translations?.errors?.[key] || key;
+  }, [translations]);
+
   const passwordRequirements = useMemo((): PasswordRequirements => {
     if (!password) {
-      return {
-        hasMinLength: false,
-      };
+      return { hasMinLength: false };
     }
     const result = validatePasswordForRegister(password, DEFAULT_PASSWORD_CONFIG);
     return result.requirements;
@@ -76,9 +79,7 @@ export function useRegisterForm(): UseRegisterFormResult {
     setDisplayName(text);
     setFieldErrors((prev) => {
       const next = { ...prev };
-      if (next.displayName) {
-        delete next.displayName;
-      }
+      if (next.displayName) delete next.displayName;
       return next;
     });
     setLocalError(null);
@@ -88,9 +89,7 @@ export function useRegisterForm(): UseRegisterFormResult {
     setEmail(text);
     setFieldErrors((prev) => {
       const next = { ...prev };
-      if (next.email) {
-        delete next.email;
-      }
+      if (next.email) delete next.email;
       return next;
     });
     setLocalError(null);
@@ -100,12 +99,8 @@ export function useRegisterForm(): UseRegisterFormResult {
     setPassword(text);
     setFieldErrors((prev) => {
       const next = { ...prev };
-      if (next.password) {
-        delete next.password;
-      }
-      if (next.confirmPassword) {
-        delete next.confirmPassword;
-      }
+      if (next.password) delete next.password;
+      if (next.confirmPassword) delete next.confirmPassword;
       return next;
     });
     setLocalError(null);
@@ -115,9 +110,7 @@ export function useRegisterForm(): UseRegisterFormResult {
     setConfirmPassword(text);
     setFieldErrors((prev) => {
       const next = { ...prev };
-      if (next.confirmPassword) {
-        delete next.confirmPassword;
-      }
+      if (next.confirmPassword) delete next.confirmPassword;
       return next;
     });
     setLocalError(null);
@@ -129,39 +122,34 @@ export function useRegisterForm(): UseRegisterFormResult {
 
     const emailResult = validateEmail(email.trim());
     if (!emailResult.isValid && emailResult.error) {
-      setFieldErrors((prev) => ({ ...prev, email: t(emailResult.error as string) }));
+      setFieldErrors((prev) => ({ ...prev, email: getErrorMessage(emailResult.error as string) }));
       return;
     }
 
     const passwordResult = validatePasswordForRegister(password, DEFAULT_PASSWORD_CONFIG);
     if (!passwordResult.isValid && passwordResult.error) {
-      setFieldErrors((prev) => ({ ...prev, password: t(passwordResult.error as string) }));
+      setFieldErrors((prev) => ({ ...prev, password: getErrorMessage(passwordResult.error as string) }));
       return;
     }
 
     const confirmResult = validatePasswordConfirmation(password, confirmPassword);
     if (!confirmResult.isValid && confirmResult.error) {
-      setFieldErrors((prev) => ({ ...prev, confirmPassword: t(confirmResult.error as string) }));
+      setFieldErrors((prev) => ({ ...prev, confirmPassword: getErrorMessage(confirmResult.error as string) }));
       return;
     }
 
     try {
-      await signUp(
-        email.trim(),
-        password,
-        displayName.trim() || undefined,
-      );
-      
-      alertService.success(
-        t("auth.successTitle"),
-        t("auth.signUpSuccess")
-      );
+      await signUp(email.trim(), password, displayName.trim() || undefined);
+
+      if (translations) {
+        alertService.success(translations.successTitle, translations.signUpSuccess);
+      }
     } catch (err: unknown) {
       const localizationKey = getAuthErrorLocalizationKey(err);
-      const errorMessage = t(localizationKey);
+      const errorMessage = getErrorMessage(localizationKey);
       setLocalError(errorMessage);
     }
-  }, [displayName, email, password, confirmPassword, signUp, t]);
+  }, [displayName, email, password, confirmPassword, signUp, translations, getErrorMessage]);
 
   const displayError = localError || error;
 
@@ -183,5 +171,3 @@ export function useRegisterForm(): UseRegisterFormResult {
     displayError,
   };
 }
-
-

package/src/presentation/navigation/AuthNavigator.tsx

@@ -1,8 +1,3 @@
-/**
- * Auth Navigator
- * Stack navigator for authentication screens (Login, Register)
- */
-
 import React, { useEffect, useState } from "react";
 import {
   StackNavigator,
@@ -12,8 +7,8 @@ import {
   type StackNavigatorConfig,
   type StackScreenProps,
 } from "@umituz/react-native-design-system";
-import { LoginScreen } from "../screens/LoginScreen";
-import { RegisterScreen } from "../screens/RegisterScreen";
+import { LoginScreen, type LoginScreenTranslations } from "../screens/LoginScreen";
+import { RegisterScreen, type RegisterScreenTranslations } from "../screens/RegisterScreen";
 
 export type AuthStackParamList = {
   Login: undefined;
@@ -22,26 +17,21 @@ export type AuthStackParamList = {
 
 const SHOW_REGISTER_KEY = "auth_show_register";
 
+export interface AuthNavigatorTranslations {
+  login: LoginScreenTranslations;
+  register: RegisterScreenTranslations;
+}
+
 export interface AuthNavigatorProps {
-  /**
-   * Terms of Service URL
-   */
+  translations: AuthNavigatorTranslations;
   termsUrl?: string;
-  /**
-   * Privacy Policy URL
-   */
   privacyUrl?: string;
-  /**
-   * Callback when Terms of Service is pressed
-   */
   onTermsPress?: () => void;
-  /**
-   * Callback when Privacy Policy is pressed
-   */
   onPrivacyPress?: () => void;
 }
 
 export const AuthNavigator: React.FC<AuthNavigatorProps> = ({
+  translations,
   termsUrl,
   privacyUrl,
   onTermsPress,
@@ -71,11 +61,21 @@ export const AuthNavigator: React.FC<AuthNavigatorProps> = ({
     return null;
   }
 
+  const LoginScreenWrapper = (
+    props: StackScreenProps<AuthStackParamList, "Login">
+  ) => (
+    <LoginScreen
+      {...props}
+      translations={translations.login}
+    />
+  );
+
   const RegisterScreenWrapper = (
     props: StackScreenProps<AuthStackParamList, "Register">
   ) => (
     <RegisterScreen
       {...props}
+      translations={translations.register}
       termsUrl={termsUrl}
       privacyUrl={privacyUrl}
       onTermsPress={onTermsPress}
@@ -90,7 +90,7 @@ export const AuthNavigator: React.FC<AuthNavigatorProps> = ({
       cardStyle: { backgroundColor: tokens.colors.backgroundPrimary },
     },
     screens: [
-      { name: "Login", component: LoginScreen },
+      { name: "Login", component: LoginScreenWrapper },
       { name: "Register", component: RegisterScreenWrapper },
     ],
   };

package/src/presentation/screens/ChangePasswordScreen.tsx

@@ -1,13 +1,3 @@
-/**
- * Change Password Screen
- * Screen for users to update their password
- *
- * Features:
- * - Current password validation via re-authentication
- * - New password validation (strength, match)
- * - Secure error handling
- */
-
 import React, { useState } from "react";
 import { View, StyleSheet, Alert } from "react-native";
 import {
@@ -18,23 +8,49 @@ import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
 import {
   updateUserPassword,
   reauthenticateWithPassword,
   getCurrentUserFromGlobal,
 } from "@umituz/react-native-firebase";
 
+export interface ChangePasswordTranslations {
+  title: string;
+  description: string;
+  currentPassword: string;
+  enterCurrentPassword: string;
+  newPassword: string;
+  enterNewPassword: string;
+  confirmPassword: string;
+  enterConfirmPassword: string;
+  requirements: string;
+  minLength: string;
+  uppercase: string;
+  lowercase: string;
+  number: string;
+  specialChar: string;
+  passwordsMatch: string;
+  changePassword: string;
+  changing: string;
+  cancel: string;
+  success: string;
+  error: string;
+  fillAllFields: string;
+  unauthorized: string;
+  signInFailed: string;
+}
+
 export interface ChangePasswordScreenProps {
+  translations: ChangePasswordTranslations;
   onSuccess?: () => void;
   onCancel?: () => void;
 }
 
 export const ChangePasswordScreen: React.FC<ChangePasswordScreenProps> = ({
+  translations,
   onSuccess,
   onCancel,
 }) => {
-  const { t } = useLocalization();
   const tokens = useAppDesignTokens();
 
   const [currentPassword, setCurrentPassword] = useState("");
@@ -43,12 +59,6 @@ export const ChangePasswordScreen: React.FC<ChangePasswordScreenProps> = ({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  /* Removed manual visibility states */
-  /* const [showCurrentPassword, setShowCurrentPassword] = useState(false); */
-  /* const [showNewPassword, setShowNewPassword] = useState(false); */
-  /* const [showConfirmPassword, setShowConfirmPassword] = useState(false); */
-
-  // Validation state
   const isLengthValid = newPassword.length >= 8;
   const hasUppercase = /[A-Z]/.test(newPassword);
   const hasLowercase = /[a-z]/.test(newPassword);
@@ -67,13 +77,13 @@ export const ChangePasswordScreen: React.FC<ChangePasswordScreenProps> = ({
 
   const handleChangePassword = async () => {
     if (!isValid) {
-        Alert.alert(t("common.error"), t("auth.passwordChange.fillAllFields"));
-        return;
+      Alert.alert("Error", translations.fillAllFields);
+      return;
     }
 
     const user = getCurrentUserFromGlobal();
     if (!user) {
-      setError(t("auth.errors.unauthorized"));
+      setError(translations.unauthorized);
       return;
     }
 
@@ -81,45 +91,29 @@ export const ChangePasswordScreen: React.FC<ChangePasswordScreenProps> = ({
     setError(null);
 
     try {
-      // 1. Re-authenticate
       const reauthResult = await reauthenticateWithPassword(user, currentPassword);
       if (!reauthResult.success) {
-        setError(reauthResult.error?.message || t("auth.alerts.error.signInFailed"));
+        setError(reauthResult.error?.message || translations.signInFailed);
         setLoading(false);
         return;
       }
 
-      // 2. Update Password
       const updateResult = await updateUserPassword(user, newPassword);
       if (updateResult.success) {
-        Alert.alert(t("common.success"), t("auth.passwordChange.success"), [
-            { text: "OK", onPress: onSuccess }
+        Alert.alert("Success", translations.success, [
+          { text: "OK", onPress: onSuccess }
         ]);
       } else {
-        setError(updateResult.error?.message || t("auth.passwordChange.error"));
+        setError(updateResult.error?.message || translations.error);
       }
     } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : t("auth.passwordChange.error");
+      const errorMessage = e instanceof Error ? e.message : translations.error;
       setError(errorMessage);
     } finally {
       setLoading(false);
     }
   };
 
-  const RequirementsList = () => (
-    <View style={[styles.requirementsContainer, { backgroundColor: tokens.colors.surfaceSecondary }]}>
-      <AtomicText type="labelMedium" style={{ color: tokens.colors.textSecondary, marginBottom: 8 }}>
-        {t("auth.passwordChange.requirements")}
-      </AtomicText>
-      <RequirementItem label={t("auth.passwordChange.minLength")} met={isLengthValid} />
-      <RequirementItem label={t("auth.passwordChange.uppercase")} met={hasUppercase} />
-      <RequirementItem label={t("auth.passwordChange.lowercase")} met={hasLowercase} />
-      <RequirementItem label={t("auth.passwordChange.number")} met={hasNumber} />
-      <RequirementItem label={t("auth.passwordChange.specialChar")} met={hasSpecialChar} />
-      <RequirementItem label={t("auth.passwordChange.passwordsMatch")} met={passwordsMatch} />
-    </View>
-  );
-
   const RequirementItem = ({ label, met }: { label: string; met: boolean }) => (
     <View style={styles.requirementItem}>
       <View
@@ -140,20 +134,19 @@ export const ChangePasswordScreen: React.FC<ChangePasswordScreenProps> = ({
   return (
     <ScreenLayout
       scrollable
-      header={<ScreenHeader title={t("auth.passwordChange.title")} />}
+      header={<ScreenHeader title={translations.title} />}
       backgroundColor={tokens.colors.backgroundPrimary}
       edges={["bottom"]}
     >
       <View style={styles.content}>
         <AtomicText type="bodyMedium" style={{ color: tokens.colors.textSecondary, marginBottom: 24 }}>
-          {t("auth.passwordChange.description")}
+          {translations.description}
         </AtomicText>
 
         <View style={styles.form}>
-           {/* Current Password */}
           <AtomicInput
-            label={t("auth.passwordChange.currentPassword")}
-            placeholder={t("auth.passwordChange.enterCurrentPassword")}
+            label={translations.currentPassword}
+            placeholder={translations.enterCurrentPassword}
             value={currentPassword}
             onChangeText={setCurrentPassword}
             secureTextEntry
@@ -161,10 +154,9 @@ export const ChangePasswordScreen: React.FC<ChangePasswordScreenProps> = ({
             variant="filled"
           />
 
-           {/* New Password */}
           <AtomicInput
-            label={t("auth.passwordChange.newPassword")}
-            placeholder={t("auth.passwordChange.enterNewPassword")}
+            label={translations.newPassword}
+            placeholder={translations.enterNewPassword}
             value={newPassword}
             onChangeText={setNewPassword}
             secureTextEntry
@@ -172,10 +164,9 @@ export const ChangePasswordScreen: React.FC<ChangePasswordScreenProps> = ({
             variant="filled"
           />
 
-           {/* Confirm Password */}
           <AtomicInput
-            label={t("auth.passwordChange.confirmPassword")}
-            placeholder={t("auth.passwordChange.enterConfirmPassword")}
+            label={translations.confirmPassword}
+            placeholder={translations.enterConfirmPassword}
             value={confirmPassword}
             onChangeText={setConfirmPassword}
             secureTextEntry
@@ -183,7 +174,17 @@ export const ChangePasswordScreen: React.FC<ChangePasswordScreenProps> = ({
             variant="filled"
           />
 
-          <RequirementsList />
+          <View style={[styles.requirementsContainer, { backgroundColor: tokens.colors.surfaceSecondary }]}>
+            <AtomicText type="labelMedium" style={{ color: tokens.colors.textSecondary, marginBottom: 8 }}>
+              {translations.requirements}
+            </AtomicText>
+            <RequirementItem label={translations.minLength} met={isLengthValid} />
+            <RequirementItem label={translations.uppercase} met={hasUppercase} />
+            <RequirementItem label={translations.lowercase} met={hasLowercase} />
+            <RequirementItem label={translations.number} met={hasNumber} />
+            <RequirementItem label={translations.specialChar} met={hasSpecialChar} />
+            <RequirementItem label={translations.passwordsMatch} met={passwordsMatch} />
+          </View>
 
           {error && (
             <AtomicText style={{ color: tokens.colors.error, marginTop: 16 }}>
@@ -192,14 +193,14 @@ export const ChangePasswordScreen: React.FC<ChangePasswordScreenProps> = ({
           )}
 
           <View style={styles.actions}>
-             <AtomicButton
-              title={t("common.cancel")}
+            <AtomicButton
+              title={translations.cancel}
               onPress={onCancel || (() => {})}
               variant="outline"
               style={{ flex: 1 }}
             />
             <AtomicButton
-              title={loading ? t("auth.passwordChange.changing") : t("auth.passwordChange.changePassword")}
+              title={loading ? translations.changing : translations.changePassword}
               onPress={() => { void handleChangePassword(); }}
               loading={loading}
               disabled={!isValid || loading}

package/src/presentation/screens/LoginScreen.tsx

@@ -1,16 +1,19 @@
-/**
- * Login Screen
- * Beautiful, production-ready login screen with email/password and guest mode
- */
-
 import React from "react";
 import { useAppNavigation, AtomicCard, ScreenLayout, useAppDesignTokens } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
 import { AuthHeader } from "../components/AuthHeader";
-import { LoginForm } from "../components/LoginForm";
+import { LoginForm, type LoginFormTranslations } from "../components/LoginForm";
+
+export interface LoginScreenTranslations {
+  title: string;
+  subtitle?: string;
+  form: LoginFormTranslations;
+}
 
-export const LoginScreen: React.FC = () => {
-  const { t } = useLocalization();
+export interface LoginScreenProps {
+  translations: LoginScreenTranslations;
+}
+
+export const LoginScreen: React.FC<LoginScreenProps> = ({ translations }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
@@ -26,11 +29,13 @@ export const LoginScreen: React.FC = () => {
       contentContainerStyle={{ justifyContent: "center" }}
       backgroundColor={tokens.colors.backgroundPrimary}
     >
-      <AuthHeader title={t("auth.title")} />
+      <AuthHeader title={translations.title} subtitle={translations.subtitle} />
       <AtomicCard variant="elevated" padding="lg">
-        <LoginForm onNavigateToRegister={handleNavigateToRegister} />
+        <LoginForm
+          translations={translations.form}
+          onNavigateToRegister={handleNavigateToRegister}
+        />
       </AtomicCard>
     </ScreenLayout>
   );
 };
-

package/src/presentation/screens/RegisterScreen.tsx

@@ -1,15 +1,16 @@
-/**
- * Register Screen
- * Beautiful, production-ready registration screen with validation
- */
-
 import React from "react";
 import { useAppNavigation, AtomicCard, ScreenLayout, useAppDesignTokens } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
 import { AuthHeader } from "../components/AuthHeader";
-import { RegisterForm } from "../components/RegisterForm";
+import { RegisterForm, type RegisterFormTranslations } from "../components/RegisterForm";
+
+export interface RegisterScreenTranslations {
+  title: string;
+  subtitle?: string;
+  form: RegisterFormTranslations;
+}
 
 export interface RegisterScreenProps {
+  translations: RegisterScreenTranslations;
   termsUrl?: string;
   privacyUrl?: string;
   onTermsPress?: () => void;
@@ -17,12 +18,12 @@ export interface RegisterScreenProps {
 }
 
 export const RegisterScreen: React.FC<RegisterScreenProps> = ({
+  translations,
   termsUrl,
   privacyUrl,
   onTermsPress,
   onPrivacyPress,
 }) => {
-  const { t } = useLocalization();
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
@@ -32,15 +33,16 @@ export const RegisterScreen: React.FC<RegisterScreenProps> = ({
 
   return (
     <ScreenLayout
-        scrollable
-        keyboardAvoiding
-        maxWidth={440}
-        contentContainerStyle={{ justifyContent: "center" }}
-        backgroundColor={tokens.colors.backgroundPrimary}
+      scrollable
+      keyboardAvoiding
+      maxWidth={440}
+      contentContainerStyle={{ justifyContent: "center" }}
+      backgroundColor={tokens.colors.backgroundPrimary}
     >
-      <AuthHeader title={t("auth.createAccount")} />
+      <AuthHeader title={translations.title} subtitle={translations.subtitle} />
       <AtomicCard variant="elevated" padding="lg">
         <RegisterForm
+          translations={translations.form}
           onNavigateToLogin={handleNavigateToLogin}
           termsUrl={termsUrl}
           privacyUrl={privacyUrl}
@@ -51,4 +53,3 @@ export const RegisterScreen: React.FC<RegisterScreenProps> = ({
     </ScreenLayout>
   );
 };
-