@umituz/react-native-auth 1.11.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Authentication service for React Native apps - Secure, type-safe, and production-ready. Provider-agnostic design supports Firebase Auth and can be adapted for Supabase or other providers.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -122,6 +122,10 @@ export { LoginForm } from './presentation/components/LoginForm';
 export { RegisterForm } from './presentation/components/RegisterForm';
 export { AuthLegalLinks } from './presentation/components/AuthLegalLinks';
 export type { AuthLegalLinksProps } from './presentation/components/AuthLegalLinks';
+export { PasswordStrengthIndicator } from './presentation/components/PasswordStrengthIndicator';
+export type { PasswordStrengthIndicatorProps } from './presentation/components/PasswordStrengthIndicator';
+export { PasswordMatchIndicator } from './presentation/components/PasswordMatchIndicator';
+export type { PasswordMatchIndicatorProps } from './presentation/components/PasswordMatchIndicator';
 
 // =============================================================================
 // PRESENTATION LAYER - Utilities

package/src/presentation/components/PasswordMatchIndicator.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+
+export interface PasswordMatchIndicatorProps {
+  isMatch: boolean;
+}
+
+export const PasswordMatchIndicator: React.FC<PasswordMatchIndicatorProps> = ({
+  isMatch,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  const color = isMatch ? tokens.colors.success : tokens.colors.error;
+  const text = isMatch
+    ? t("auth.passwordsMatch", "Passwords match")
+    : t("auth.passwordsDontMatch", "Passwords don't match");
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.dot, { backgroundColor: color }]} />
+      <Text style={[styles.text, { color }]}>{text}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginTop: 8,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+});

package/src/presentation/components/PasswordStrengthIndicator.tsx

@@ -0,0 +1,118 @@
+/**
+ * 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-theme";
+import type { PasswordRequirements } from "../../infrastructure/utils/AuthValidation";
+
+export interface PasswordStrengthIndicatorProps {
+  requirements: PasswordRequirements;
+  showLabels?: boolean;
+}
+
+interface RequirementDotProps {
+  label: string;
+  isValid: boolean;
+  successColor: string;
+  pendingColor: string;
+}
+
+const RequirementDot: React.FC<RequirementDotProps> = ({
+  label,
+  isValid,
+  successColor,
+  pendingColor,
+}) => {
+  const color = isValid ? successColor : pendingColor;
+
+  return (
+    <View style={styles.requirement}>
+      <View style={[styles.dot, { backgroundColor: color }]} />
+      <Text style={[styles.label, { color }]}>{label}</Text>
+    </View>
+  );
+};
+
+export const PasswordStrengthIndicator: React.FC<
+  PasswordStrengthIndicatorProps
+> = ({ requirements, showLabels = true }) => {
+  const tokens = useAppDesignTokens();
+  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 },
+  ];
+
+  if (!showLabels) {
+    return (
+      <View style={styles.dotsOnly}>
+        {items.map((item) => (
+          <View
+            key={item.key}
+            style={[
+              styles.dotOnly,
+              {
+                backgroundColor: item.isValid ? successColor : pendingColor,
+              },
+            ]}
+          />
+        ))}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {items.map((item) => (
+        <RequirementDot
+          key={item.key}
+          label={item.label}
+          isValid={item.isValid}
+          successColor={successColor}
+          pendingColor={pendingColor}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    marginTop: 8,
+  },
+  dotsOnly: {
+    flexDirection: "row",
+    gap: 6,
+    marginTop: 8,
+  },
+  requirement: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  dotOnly: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "500",
+  },
+});

package/src/presentation/components/RegisterForm.tsx

@@ -11,6 +11,8 @@ 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";
 
 interface RegisterFormProps {
   onNavigateToLogin: () => void;
@@ -35,6 +37,8 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
     confirmPassword,
     fieldErrors,
     loading,
+    passwordRequirements,
+    passwordsMatch,
     handleDisplayNameChange,
     handleEmailChange,
     handlePasswordChange,
@@ -86,6 +90,9 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
           state={fieldErrors.password ? "error" : "default"}
           helperText={fieldErrors.password || undefined}
         />
+        {password.length > 0 && (
+          <PasswordStrengthIndicator requirements={passwordRequirements} />
+        )}
       </View>
 
       <View style={styles.inputContainer}>
@@ -102,6 +109,9 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
           state={fieldErrors.confirmPassword ? "error" : "default"}
           helperText={fieldErrors.confirmPassword || undefined}
         />
+        {confirmPassword.length > 0 && (
+          <PasswordMatchIndicator isMatch={passwordsMatch} />
+        )}
       </View>
 
       <AuthErrorDisplay error={displayError} />

package/src/presentation/hooks/useRegisterForm.ts

@@ -3,7 +3,7 @@
  * Single Responsibility: Handle register form logic
  */
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { useLocalization } from "@umituz/react-native-localization";
 import { batchValidate } from "@umituz/react-native-validation";
 import {
@@ -14,6 +14,7 @@ import {
 import { DEFAULT_PASSWORD_CONFIG } from "../../domain/value-objects/AuthConfig";
 import { useAuth } from "./useAuth";
 import { getAuthErrorLocalizationKey } from "../utils/getAuthErrorMessage";
+import type { PasswordRequirements } from "../../infrastructure/utils/AuthValidation";
 
 export interface UseRegisterFormResult {
   displayName: string;
@@ -28,6 +29,8 @@ export interface UseRegisterFormResult {
   };
   localError: string | null;
   loading: boolean;
+  passwordRequirements: PasswordRequirements;
+  passwordsMatch: boolean;
   handleDisplayNameChange: (text: string) => void;
   handleEmailChange: (text: string) => void;
   handlePasswordChange: (text: string) => void;
@@ -55,6 +58,24 @@ export function useRegisterForm(): UseRegisterFormResult {
     confirmPassword?: string;
   }>({});
 
+  const passwordRequirements = useMemo((): PasswordRequirements => {
+    if (!password) {
+      return {
+        hasMinLength: false,
+        hasUppercase: false,
+        hasLowercase: false,
+        hasNumber: false,
+        hasSpecialChar: false,
+      };
+    }
+    const result = validatePasswordForRegister(password, DEFAULT_PASSWORD_CONFIG);
+    return result.requirements;
+  }, [password]);
+
+  const passwordsMatch = useMemo(() => {
+    return password.length > 0 && password === confirmPassword;
+  }, [password, confirmPassword]);
+
   const handleDisplayNameChange = useCallback((text: string) => {
     setDisplayName(text);
     setFieldErrors((prev) => {
@@ -153,6 +174,8 @@ export function useRegisterForm(): UseRegisterFormResult {
     fieldErrors,
     localError,
     loading,
+    passwordRequirements,
+    passwordsMatch,
     handleDisplayNameChange,
     handleEmailChange,
     handlePasswordChange,