Fix(mobile)/translate and general

Frontend/Mobile/app.json

@@ -62,7 +62,8 @@
           }
         }
       ],
-      "expo-image"
+      "expo-image",
+      "expo-localization"
     ],
     "experiments": {
       "typedRoutes": true,

Frontend/Mobile/package.json

@@ -18,6 +18,7 @@
     "expo-image-picker": "~56.0.18",
     "expo-linear-gradient": "^56.0.4",
     "expo-linking": "~56.0.14",
+    "expo-localization": "~56.0.6",
     "expo-location": "~56.0.18",
     "expo-notifications": "~56.0.18",
     "expo-router": "~56.2.11",
@@ -26,9 +27,11 @@
     "expo-symbols": "~56.0.6",
     "expo-system-ui": "~56.0.5",
     "expo-web-browser": "~56.0.5",
+    "i18next": "^26.3.4",
     "maplibre-gl": "^5.24.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "react-i18next": "^17.0.8",
     "react-native": "0.85.3",
     "react-native-gesture-handler": "~2.31.1",
     "react-native-keyboard-controller": "1.21.6",

Frontend/Mobile/src/app/(auth)/_layout.tsx

@@ -1,6 +1,6 @@
 import { useColorScheme } from "@/hooks/use-color-scheme";
 import { Stack, useRouter } from 'expo-router';
-import { Pressable } from "react-native";
+import { Pressable, Platform } from "react-native";
 import { Colors, Spacing } from '@/constants/theme';
 import CloseIcon from "@/assets/icons/svg/x.svg";
 
@@ -14,7 +14,7 @@ export default function AuthLayout() {
       <Stack.Screen
         name="index"
         options={{
-          headerShown: true,
+          headerShown: Platform.OS !== 'web',
           headerShadowVisible: false,
           headerStyle: {
             backgroundColor: theme.background,

Frontend/Mobile/src/app/(auth)/index.tsx

@@ -6,12 +6,14 @@ import { Colors, Spacing } from "@/constants/theme";
 import { Typography } from "@/constants/typography";
 import { KeyboardProvider } from 'react-native-keyboard-controller';
 import { useAuth } from "@/contexts/auth-context";
+import { useTranslation } from 'react-i18next';
 
 export default function LoginScreen() {
     const router = useRouter();
     const themeName = (useColorScheme() ?? "light") as keyof typeof Colors;
     const theme = Colors[themeName];
     const { login } = useAuth();
+    const { t } = useTranslation();
 
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
@@ -22,15 +24,15 @@ export default function LoginScreen() {
         const newErrors: { email?: string; password?: string } = {};
 
         if (!email) {
-            newErrors.email = "Email-ul este obligatoriu.";
+            newErrors.email = t('auth.emailRequired');
         } else if (!/\S+@\S+\.\S+/.test(email)) {
-            newErrors.email = "Formatul email-ului este invalid.";
+            newErrors.email = t('auth.emailInvalid');
         }
 
         if (!password) {
-            newErrors.password = "Parola este obligatorie.";
+            newErrors.password = t('auth.passwordRequired');
         } else if (password.length < 6) {
-            newErrors.password = "Parola trebuie să aibă cel puțin 6 caractere.";
+            newErrors.password = t('auth.passwordTooShort');
         }
 
         setErrors(newErrors);
@@ -47,7 +49,7 @@ export default function LoginScreen() {
         } catch (err: any) {
             setErrors(prev => ({
                 ...prev,
-                general: err.message || "Email-ul sau parola sunt incorecte."
+                general: err.message || t('auth.invalidCredentials')
             }));
         } finally {
             setSubmitting(false);
@@ -67,9 +69,9 @@ export default function LoginScreen() {
                 >
                     <View style={{ flex: 1, padding: Spacing.xxl }}>
                         <View style={{ marginBottom: Spacing.xl4 }}>
-                            <Text style={[Typography.Heading2, { color: theme.text }]}>Autentificare</Text>
+                            <Text style={[Typography.Heading2, { color: theme.text }]}>{t('auth.title')}</Text>
                             <Text style={[Typography.Paragraph2, { color: theme.textSecondary, marginTop: Spacing.xs }]}>
-                                Introdu datele pentru a intra în cont
+                                {t('auth.subtitle')}
                             </Text>
                         </View>
 
@@ -82,7 +84,7 @@ export default function LoginScreen() {
 
                             {/* Email Input */}
                             <View style={{ gap: Spacing.xs }}>
-                                <Text style={[Typography.Heading5, { color: theme.text }]}>Email</Text>
+                                <Text style={[Typography.Heading5, { color: theme.text }]}>{t('auth.email')}</Text>
                                 <TextInput
                                     value={email}
                                     onChangeText={(text) => {
@@ -113,7 +115,7 @@ export default function LoginScreen() {
 
                             {/* Password Input */}
                             <View style={{ gap: Spacing.xs }}>
-                                <Text style={[Typography.Heading5, { color: theme.text }]}>Parolă</Text>
+                                <Text style={[Typography.Heading5, { color: theme.text }]}>{t('auth.password')}</Text>
                                 <TextInput
                                     value={password}
                                     onChangeText={(text) => {
@@ -158,7 +160,7 @@ export default function LoginScreen() {
                                 {submitting ? (
                                     <ActivityIndicator color="white" />
                                 ) : (
-                                    <Text style={[Typography.Heading4, { color: 'white' }]}>Autentificare</Text>
+                                    <Text style={[Typography.Heading4, { color: 'white' }]}>{t('auth.login')}</Text>
                                 )}
                             </Pressable>
                         </View>