wip

app/login.tsx

@@ -1,11 +1,13 @@
 import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
 import { AxiosError } from "axios";
 import { useAtom } from "jotai";
 import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Alert,
   KeyboardAvoidingView,
@@ -21,6 +23,7 @@ const CredentialsSchema = z.object({
 });
 
 const Login: React.FC = () => {
+  const { t, i18n } = useTranslation();
   const { setServer, login, removeServer } = useJellyfin();
   const [api] = useAtom(apiAtom);
 
@@ -72,7 +75,7 @@ const Login: React.FC = () => {
               <View className="mb-4">
                 <Text className="text-3xl font-bold mb-2">Streamyfin</Text>
                 <Text className="text-neutral-500 mb-2">
-                  Server: {api.basePath}
+                  {t("server.server_label", { serverURL: api.basePath })}
                 </Text>
                 <Button
                   color="black"
@@ -89,17 +92,17 @@ const Login: React.FC = () => {
                     />
                   }
                 >
-                  Change server
+                  {t("server.change_server")}
                 </Button>
               </View>
 
               <View className="flex flex-col space-y-2">
-                <Text className="text-2xl font-bold">Log in</Text>
+                <Text className="text-2xl font-bold">{t("login.login")}</Text>
                 <Text className="text-neutral-500">
-                  Log in to any user account
+                  {t("login.login_subtitle")}
                 </Text>
                 <Input
-                  placeholder="Username"
+                  placeholder={t("login.username_placeholder")}
                   onChangeText={(text) =>
                     setCredentials({ ...credentials, username: text })
                   }
@@ -116,7 +119,7 @@ const Login: React.FC = () => {
 
                 <Input
                   className="mb-2"
-                  placeholder="Password"
+                  placeholder={t("login.password_placeholder")}
                   onChangeText={(text) =>
                     setCredentials({ ...credentials, password: text })
                   }
@@ -139,7 +142,7 @@ const Login: React.FC = () => {
               loading={loading}
               className="mt-auto mb-2"
             >
-              Log in
+              {t("login.login_button")}
             </Button>
           </View>
         </KeyboardAvoidingView>
@@ -158,10 +161,10 @@ const Login: React.FC = () => {
           <View className="flex flex-col gap-y-2">
             <Text className="text-3xl font-bold">Streamyfin</Text>
             <Text className="text-neutral-500">
-              Connect to your Jellyfin server
+              {t("server.connect_to_server")}
             </Text>
             <Input
-              placeholder="Server URL"
+              placeholder={t("server.server_url_placeholder")}
               onChangeText={setServerURL}
               value={serverURL}
               keyboardType="url"
@@ -170,12 +173,11 @@ const Login: React.FC = () => {
               textContentType="URL"
               maxLength={500}
             />
-            <Text className="opacity-30">
-              Server URL requires http or https
-            </Text>
+            <Text className="opacity-30">{t("server.server_url_hint")}</Text>
+            <LanguageSwitcher />
           </View>
           <Button onPress={() => handleConnect(serverURL)} className="mb-2">
-            Connect
+            {t("server.connect_button")}
           </Button>
         </View>
       </KeyboardAvoidingView>