feat: add i18n support

App.js

@@ -24,6 +24,7 @@ import {GestureHandlerRootView} from "react-native-gesture-handler";
 import {useMigrations} from "drizzle-orm/expo-sqlite/migrator";
 import {ActionSheetProvider} from "@expo/react-native-action-sheet";
 
+import "./i18n";
 import Header from "./Header";
 import NavigationBar from "./NavigationBar";
 import {db} from "./db/client";

CasdoorLoginPage.js

@@ -23,6 +23,7 @@ import EnterCasdoorSdkConfig from "./EnterCasdoorSdkConfig";
 import ScanQRCodeForLogin from "./ScanLogin";
 import useStore from "./useStorage";
 import DefaultCasdoorSdkConfig from "./DefaultCasdoorSdkConfig";
+import {useTranslation} from "react-i18next";
 
 let sdk = null;
 
@@ -33,6 +34,7 @@ function CasdoorLoginPage({onWebviewClose, initialMethod}) {
   };
 
   const {notify} = useNotifications();
+  const {t} = useTranslation();
   const [casdoorLoginURL, setCasdoorLoginURL] = useState("");
   const [currentView, setCurrentView] = useState(initialMethod === "scan" ? "scanner" : "config");
 
@@ -113,11 +115,21 @@ function CasdoorLoginPage({onWebviewClose, initialMethod}) {
       const userInfo = sdk.JwtDecode(accessToken);
       setToken(accessToken);
       setUserInfo(userInfo);
-      notify("success", {params: {title: "Success", description: "Logged in successfully!"}});
+      notify("success", {
+        params: {
+          title: t("common.success"),
+          description: t("casdoorLoginPage.Logged in successfully!"),
+        },
+      });
       setCurrentView("config");
       onWebviewClose();
     } catch (error) {
-      notify("error", {params: {title: "Error in login", description: error.message}});
+      notify("error", {
+        params: {
+          title: t("common.error"),
+          description: error.message,
+        },
+      });
     }
   };
 
@@ -139,20 +151,25 @@ function CasdoorLoginPage({onWebviewClose, initialMethod}) {
           }}
           onLogin={handleQRLogin}
           onError={(message) => {
-            notify("error", {params: {title: "Error", description: message}});
+            notify("error", {params: {title: t("common.error"), description: message}});
           }}
         />
       ),
       webview: casdoorLoginURL && !token && (
         <SafeAreaView style={styles.safeArea}>
           <TouchableOpacity style={styles.backButton} onPress={() => setCurrentView("config")}>
-            <Text style={styles.backButtonText}>Back to Config</Text>
+            <Text style={styles.backButtonText}>{t("casdoorLoginPage.Back to Config")}</Text>
           </TouchableOpacity>
           <WebView
             source={{uri: casdoorLoginURL}}
             onNavigationStateChange={onNavigationStateChange}
             onError={({nativeEvent}) => {
-              notify("error", {params: {title: "Error", description: nativeEvent.description}});
+              notify("error", {
+                params: {
+                  title: t("common.error"),
+                  description: nativeEvent.description,
+                },
+              });
               setCurrentView("config");
             }}
             style={styles.webview}
@@ -186,7 +203,6 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "white",
     paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
-
   },
 });
 

EditAccountDetails.js

@@ -16,6 +16,7 @@ import React, {useState} from "react";
 import {Text, TextInput, View} from "react-native";
 import {Button, IconButton} from "react-native-paper";
 import PropTypes from "prop-types";
+import {useTranslation} from "react-i18next";
 
 export default function EnterAccountDetails({onClose, onEdit, placeholder}) {
   EnterAccountDetails.propTypes = {
@@ -24,6 +25,7 @@ export default function EnterAccountDetails({onClose, onEdit, placeholder}) {
     placeholder: PropTypes.string.isRequired,
   };
 
+  const {t} = useTranslation();
   const [accountName, setAccountName] = useState("");
 
   const handleConfirm = () => {
@@ -32,7 +34,7 @@ export default function EnterAccountDetails({onClose, onEdit, placeholder}) {
 
   return (
     <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
-      <Text style={{fontSize: 24, marginBottom: 5}}>Enter new account name</Text>
+      <Text style={{fontSize: 24, marginBottom: 5}}>{t("editAccount.Enter new account name")}</Text>
       <View style={{flexDirection: "row", alignItems: "center"}}>
         <IconButton icon="account-details" size={35} />
         <TextInput
@@ -55,7 +57,7 @@ export default function EnterAccountDetails({onClose, onEdit, placeholder}) {
         }}
         onPress={handleConfirm}
       >
-        <Text style={{fontSize: 18, width: 280}}>Confirm</Text>
+        <Text style={{fontSize: 18, width: 280}}>{t("common.confirm")}</Text>
       </Button>
       <IconButton icon={"close"} size={30} onPress={onClose} style={{position: "absolute", top: 5, right: 5}} />
     </View>

EnterAccountDetails.js

@@ -17,6 +17,7 @@ import {View} from "react-native";
 import {Button, IconButton, Menu, Text, TextInput} from "react-native-paper";
 import {useNotifications} from "react-native-notificated";
 import PropTypes from "prop-types";
+import {useTranslation} from "react-i18next";
 
 const EnterAccountDetails = ({onClose, onAdd, validateSecret}) => {
   EnterAccountDetails.propTypes = {
@@ -26,7 +27,7 @@ const EnterAccountDetails = ({onClose, onAdd, validateSecret}) => {
   };
 
   const {notify} = useNotifications();
-
+  const {t} = useTranslation();
   const [accountName, setAccountName] = useState("");
   const [secretKey, setSecretKey] = useState("");
   const [secretError, setSecretError] = useState("");
@@ -45,25 +46,25 @@ const EnterAccountDetails = ({onClose, onAdd, validateSecret}) => {
 
   const handleAddAccount = useCallback(() => {
     if (accountName.trim() === "") {
-      setAccountNameError("Account Name is required");
+      setAccountNameError(t("editAccount.Account Name is required"));
     }
 
     if (secretKey.trim() === "") {
-      setSecretError("Secret Key is required");
+      setSecretError(t("editAccount.Secret Key is required"));
     }
 
     if (accountName.trim() === "" || secretKey.trim() === "") {
       notify("error", {
-        title: "Error",
-        description: "Please fill in all the fields!",
+        title: t("common.error"),
+        description: t("editAccount.Please fill in all the fields!"),
       });
       return;
     }
 
     if (secretError) {
       notify("error", {
-        title: "Error",
-        description: "Invalid Secret Key",
+        title: t("common.error"),
+        description: t("editAccount.Invalid Secret Key"),
       });
       return;
     }
@@ -94,7 +95,7 @@ const EnterAccountDetails = ({onClose, onAdd, validateSecret}) => {
     <View style={styles.container}>
       <View style={styles.content}>
         <View style={styles.header}>
-          <Text style={styles.title}>Add Account</Text>
+          <Text style={styles.title}>{t("editAccount.Add Account")}</Text>
           <IconButton
             icon="close"
             size={24}
@@ -103,15 +104,15 @@ const EnterAccountDetails = ({onClose, onAdd, validateSecret}) => {
           />
         </View>
         <TextInput
-          label="Account Name"
+          label={t("editAccount.Account Name")}
           value={accountName}
           onChangeText={handleAccountNameChange}
           error={!!accountNameError}
           style={styles.input}
           mode="outlined"
         />
         <TextInput
-          label="Secret Key"
+          label={t("editAccount.Secret Key")}
           value={secretKey}
           onChangeText={handleSecretKeyChange}
           secureTextEntry={!showPassword}
@@ -137,21 +138,27 @@ const EnterAccountDetails = ({onClose, onAdd, validateSecret}) => {
                 contentStyle={styles.menuButtonContent}
                 style={styles.menuButton}
               >
-                {selectedItem}
+                {t(`editAccount.${selectedItem}`)}
               </Button>
             }
             contentStyle={styles.menuContent}
           >
-            <Menu.Item onPress={() => handleMenuItemPress("Time based")} title="Time based" />
-            <Menu.Item onPress={() => handleMenuItemPress("Counter based")} title="Counter based" />
+            <Menu.Item
+              onPress={() => handleMenuItemPress("Time based")}
+              title={t("editAccount.Time based")}
+            />
+            <Menu.Item
+              onPress={() => handleMenuItemPress("Counter based")}
+              title={t("editAccount.Counter based")}
+            />
           </Menu>
           <Button
             mode="contained"
             onPress={handleAddAccount}
             style={styles.addButton}
             labelStyle={styles.buttonLabel}
           >
-            Add Account
+            {t("editAccount.Add Account")}
           </Button>
         </View>
       </View>

EnterCasdoorSdkConfig.js

@@ -18,8 +18,10 @@ import {Button, Portal, TextInput} from "react-native-paper";
 import {useNotifications} from "react-native-notificated";
 import PropTypes from "prop-types";
 import useStore from "./useStorage";
+import {useTranslation} from "react-i18next";
 
 function EnterCasdoorSdkConfig({onClose, onWebviewClose, usePortal = true}) {
+  const {t} = useTranslation();
   const {
     serverUrl,
     clientId,
@@ -43,8 +45,8 @@ function EnterCasdoorSdkConfig({onClose, onWebviewClose, usePortal = true}) {
     if (!serverUrl || !clientId || !appName || !organizationName || !redirectPath) {
       notify("error", {
         params: {
-          title: "Error",
-          description: "Please fill in all the fields!",
+          title: t("common.error"),
+          description: t("enterCasdoorSDKConfig.Please fill in all the fields!"),
         },
       });
       return;
@@ -55,34 +57,34 @@ function EnterCasdoorSdkConfig({onClose, onWebviewClose, usePortal = true}) {
   const content = (
     <View style={styles.container}>
       <View style={styles.content}>
-        <Text style={styles.title}>Casdoor Configuration</Text>
+        <Text style={styles.title}>{t("enterCasdoorSDKConfig.Casdoor Configuration")}</Text>
         <View style={styles.formContainer}>
           <TextInput
-            label="Endpoint"
+            label={t("enterCasdoorSDKConfig.Server URL")}
             value={serverUrl}
             onChangeText={setServerUrl}
             autoCapitalize="none"
             style={styles.input}
             mode="outlined"
           />
           <TextInput
-            label="Client ID"
+            label={t("enterCasdoorSDKConfig.Client ID")}
             value={clientId}
             onChangeText={setClientId}
             autoCapitalize="none"
             style={styles.input}
             mode="outlined"
           />
           <TextInput
-            label="App Name"
+            label={t("enterCasdoorSDKConfig.Application Name")}
             value={appName}
             onChangeText={setAppName}
             autoCapitalize="none"
             style={styles.input}
             mode="outlined"
           />
           <TextInput
-            label="Organization Name"
+            label={t("enterCasdoorSDKConfig.Organization Name")}
             value={organizationName}
             onChangeText={setOrganizationName}
             autoCapitalize="none"
@@ -97,15 +99,15 @@ function EnterCasdoorSdkConfig({onClose, onWebviewClose, usePortal = true}) {
             style={styles.button}
             labelStyle={styles.buttonLabel}
           >
-            Cancel
+            {t("common.cancel")}
           </Button>
           <Button
             mode="contained"
             onPress={handleSave}
             style={styles.button}
             labelStyle={styles.buttonLabel}
           >
-            Confirm
+            {t("common.confirm")}
           </Button>
         </View>
       </View>

Header.js

@@ -21,6 +21,7 @@ import CasdoorLoginPage, {CasdoorLogout} from "./CasdoorLoginPage";
 import useStore from "./useStorage";
 import {useAccountSync} from "./useAccountStore";
 import LoginMethodSelector from "./LoginMethodSelector";
+import {useTranslation} from "react-i18next";
 
 const {width} = Dimensions.get("window");
 
@@ -31,7 +32,7 @@ const Header = () => {
   const [menuVisible, setMenuVisible] = React.useState(false);
   const [loginMethod, setLoginMethod] = React.useState(null);
   const {notify} = useNotifications();
-
+  const {t} = useTranslation();
   const openMenu = () => setMenuVisible(true);
   const closeMenu = () => setMenuVisible(false);
 
@@ -64,8 +65,8 @@ const Header = () => {
   const handleSyncErrorPress = () => {
     notify("error", {
       params: {
-        title: "Error",
-        description: syncError || "An unknown error occurred during synchronization.",
+        title: t("common.error"),
+        description: syncError || t("header.An unknown error occurred during synchronization"),
       },
     });
   };
@@ -75,7 +76,7 @@ const Header = () => {
       <Appbar.Content
         title={
           <View style={styles.titleContainer}>
-            <Text style={styles.titleTextCasdoor}>Casdoor</Text>
+            <Text style={styles.titleTextCasdoor}>{t("header.Casdoor")}</Text>
           </View>
         }
         style={styles.titleWrapper}
@@ -119,13 +120,13 @@ const Header = () => {
                   styles.buttonText,
                   userInfo === null && {marginLeft: 0},
                 ]}>
-                  {userInfo === null ? "Login" : userInfo.name}
+                  {userInfo === null ? t("common.login") : userInfo.name}
                 </Text>
               </View>
             </TouchableRipple>
           }
         >
-          <Menu.Item onPress={handleMenuLogoutClicked} title="Logout" />
+          <Menu.Item onPress={handleMenuLogoutClicked} title={t("common.logout")} />
         </Menu>
       </View>
       {showLoginPage && (