translating access screens

balzack · Oct 4, 2023 · 9c3c50c · 9c3c50c
1 parent 7e2ec8a
commit 9c3c50c
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 78 deletions.
diff --git a/app/mobile/src/access/admin/Admin.jsx b/app/mobile/src/access/admin/Admin.jsx
@@ -16,8 +16,8 @@ export function Admin() {
     }
     catch (err) {
       Alert.alert(
-        "Access Failed",
-        "Please check your server and token.",
+        state.strings.error,
+        state.strings.tryAgain,
       );
     }
   }
@@ -32,20 +32,21 @@ export function Admin() {
         </View>
         <Text style={styles.title}>Databag</Text>
         <View style={styles.spacemid}>
-          <Text style={styles.header}>Admin Acess</Text>
+          <Text style={styles.header}>{ state.strings.adminAccess }</Text>
         </View>
         <View style={styles.spacetop}>
           <View style={styles.inputwrapper}>
             <Ionicons style={styles.icon} name="database" size={18} color="#aaaaaa" />
             <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
-                autoCorrect={false} autoCapitalize="none" placeholder="server" placeholderTextColor={Colors.grey} />
+                autoCorrect={false} autoCapitalize="none" placeholder={state.strings.server}
+                placeholderTextColor={Colors.inputPlaceholder} />
             <View style={styles.space} />
           </View>
           <View style={styles.inputwrapper}>
             <Ionicons style={styles.icon} name="key" size={18} color="#aaaaaa" />
             <TextInput style={styles.inputfield} value={state.token} onChangeText={actions.setToken}
-                secureTextEntry={!state.plainText} autoCapitalize="none" placeholder="token"
-                placeholderTextColor={Colors.grey} />
+                secureTextEntry={!state.plainText} autoCapitalize="none" placeholder={state.strings.token}
+                placeholderTextColor={Colors.inputPlaceholder} />
             <TouchableOpacity>
               { state.plainText && (
                 <Ionicons style={styles.icon} name="eye" size={18} color="#aaaaaa" onPress={actions.hidePass}/>
@@ -59,7 +60,7 @@ export function Admin() {
           { Platform.OS !== 'ios' && (
             <View style={styles.tos}>
               <TouchableOpacity style={styles.viewterms} onPress={actions.showTerms}>
-                <Text style={styles.viewtermstext}>View Terms of Service</Text>
+                <Text style={styles.viewtermstext}>{ state.strings.terms }</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.agreeterms} onPress={() => actions.agree(!state.agree)}>
                 { state.agree && (
@@ -68,7 +69,7 @@ export function Admin() {
                 { !state.agree && (
                   <MatIcons name={'checkbox-blank-outline'} size={20} color={Colors.primary} />
                 )}
-                <Text style={styles.agreetermstext}>I agree to Terms of Service</Text>
+                <Text style={styles.agreetermstext}>{ state.strings.agree }</Text>
               </TouchableOpacity>
             </View>
           )}
@@ -85,15 +86,15 @@ export function Admin() {
           )}
           { (!state.enabled || (Platform.OS !== 'ios' && !state.agree)) && (
             <View style={styles.noreset}>
-              <Text style={styles.noresettext}>Access</Text>
+              <Text style={styles.noresettext}>{ state.strings.access }</Text>
             </View>
           )}
         </View>      
         <View style={styles.version}>
           <Text style={styles.versiontext}>v{ state.version }</Text>
         </View>
       </View>
-            <Modal
+      <Modal
         animationType="fade"
         transparent={true}
         visible={state.showTerms}
@@ -102,11 +103,11 @@ export function Admin() {
       >
         <View style={styles.modalContainer}>
           <ScrollView style={styles.terms} persistentScrollbar={true}>
-            <Text style={styles.termsheader}>Terms of Use and User Policy</Text>
-            <Text numberOfLines={0}>{ tos.message }</Text>
+            <Text style={styles.termsheader}>{ state.strings.policy }</Text>
+            <Text numberOfLines={0}>{ tos[state.strings.languageCode] }</Text>
           </ScrollView>
           <TouchableOpacity style={styles.done} onPress={actions.hideTerms}>
-            <Text style={styles.donetext}>Done</Text>
+            <Text style={styles.donetext}>{ state.strings.close }</Text>
           </TouchableOpacity>
         </View>
       </Modal>

diff --git a/app/mobile/src/access/create/Create.jsx b/app/mobile/src/access/create/Create.jsx
@@ -16,8 +16,8 @@ export function Create() {
     }
     catch (err) {
       Alert.alert(
-        "Create Failed",
-        "Please check your server and token.",
+        state.strings.error,
+        state.strings.tryAgain,
       );
     }
   }
@@ -36,13 +36,14 @@ export function Create() {
         </View>
         <Text style={styles.title}>Databag</Text>
         <View style={styles.spacemid}>
-          <Text style={styles.header}>Create Account</Text>
+          <Text style={styles.header}>{ state.strings.createAccount }</Text>
         </View>
         <ScrollView style={styles.spacetop}>
           <View style={styles.inputwrapper}>
-            <Ionicons style={styles.icon} name="database" size={18} color="#888888" />
+            <Ionicons style={styles.icon} name="database" size={18} color={Colors.inputPlaceholder} />
             <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
-                autoCorrect={false} autoCapitalize="none" placeholder="server" placeholderTextColor={Colors.grey} />
+                autoCorrect={false} autoCapitalize="none" placeholder={state.strings.server}
+                placeholderTextColor={Colors.inputPlaceholder} />
             { (!state.server || !state.serverChecked) && (
               <View style={styles.required}>
                 <Text style={styles.requiredtest}>✻</Text>
@@ -58,9 +59,10 @@ export function Create() {
           <View style={styles.token}>
             { state.tokenRequired && (
               <View style={styles.inputwrapper}>
-                <Ionicons style={styles.icon} name="key" size={18} color="#888888" />
+                <Ionicons style={styles.icon} name="key" size={18} color={Colors.inputPlaceholder} />
                 <TextInput style={styles.inputfield} value={state.token} onChangeText={actions.setToken}
-                    autoCorrect={false} autoCapitalize="none" placeholder="token" placeholderTextColor={Colors.grey} />
+                    autoCorrect={false} autoCapitalize="none" placeholder={state.strings.token}
+                    placeholderTextColor={Colors.inputPlaceholder} />
                 <View style={styles.space}>
                   { (!validServer || !state.token || !state.tokenChecked) && (
                     <Text style={styles.required}>✻</Text>
@@ -76,14 +78,15 @@ export function Create() {
             )}
             { !state.tokenRequired && state.server === 'databag.coredb.org' && (
               <View style={styles.demo}>
-                <Text style={styles.demoText}>The default public server is to test out the system. Use a private server otherwise.</Text>
+                <Text style={styles.demoText}>{state.strings.defaultPublic}</Text>
               </View>
             )}
           </View>
           <View style={styles.inputwrapper}>
-            <Ionicons style={styles.icon} name="user" size={18} color="#888888" />
+            <Ionicons style={styles.icon} name="user" size={18} color={Colors.inputPlaceholder} />
             <TextInput style={styles.inputfield} value={state.username} onChangeText={actions.setUsername}
-                autoCorrect={false} autoCapitalize="none" placeholder="username" placeholderTextColor={Colors.grey} />
+                autoCorrect={false} autoCapitalize="none" placeholder={state.strings.username}
+                placeholderTextColor={Colors.inputPlaceholder} />
             { (!validServer || !validToken || !state.username || !state.usernameChecked) && (
               <Text style={styles.required}>✻</Text>
             )}
@@ -96,52 +99,53 @@ export function Create() {
           </View>
           { state.showPassword && (
             <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
+              <Ionicons style={styles.icon} name="lock" size={18} color={Colors.inputPlaceholder} />
               <TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
-                  autoCorrect={false} autoCapitalize="none" placeholder="password" placeholderTextColor={Colors.grey} />
+                  autoCorrect={false} autoCapitalize="none" placeholder={state.strings.password}
+                  placeholderTextColor={Colors.inputPlaceholder} />
               <TouchableOpacity onPress={actions.hidePassword}>
-                <Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
+                <Ionicons style={styles.icon} name="eye" size={18} color={Colors.inputPlaceholder} />
               </TouchableOpacity>
             </View>
           )}
           { !state.showPassword && (
             <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
+              <Ionicons style={styles.icon} name="lock" size={18} color={Colors.inputPlaceholder} />
               <TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
-                  autoCorrect={false} secureTextEntry={true} autoCapitalize="none" placeholder="password" 
-                  placeholderTextColor={Colors.grey} />
+                  autoCorrect={false} secureTextEntry={true} autoCapitalize="none" placeholder={state.strings.password} 
+                  placeholderTextColor={Colors.inputPlaceholder} />
               <TouchableOpacity onPress={actions.showPassword}>
-                <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
+                <Ionicons style={styles.icon} name="eyeo" size={18} color={Colors.inputPlaceholder} />
               </TouchableOpacity>
             </View>
           )}
           { state.showConfirm && (
             <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
+              <Ionicons style={styles.icon} name="lock" size={18} color={Colors.inputPlaceholder} />
               <TextInput style={styles.inputfield} value={state.confirm} onChangeText={actions.setConfirm}
-                  autoCorrect={false} autoCapitalize="none" placeholder="confirm password"
-                  placeholderTextColor={Colors.grey} />
+                  autoCorrect={false} autoCapitalize="none" placeholder={state.strings.confirmPassword}
+                  placeholderTextColor={Colors.inputPlaceholder} />
               <TouchableOpacity onPress={actions.hideConfirm}>
-                <Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
+                <Ionicons style={styles.icon} name="eye" size={18} color={Colors.inputPlaceholder} />
               </TouchableOpacity>
             </View>
           )}
           { !state.showConfirm && (
             <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
+              <Ionicons style={styles.icon} name="lock" size={18} color={Colors.inputPlaceholder} />
               <TextInput style={styles.inputfield} value={state.confirm} onChangeText={actions.setConfirm}
-                  autoCorrect={false} secureTextEntry={true} autoCapitalize="none" placeholder="confirm password"
-                  placeholderTextColor={Colors.grey} />
+                  autoCorrect={false} secureTextEntry={true} autoCapitalize="none" placeholder={state.strings.confirmPassword}
+                  placeholderTextColor={Colors.inputPlaceholder} />
               <TouchableOpacity onPress={actions.showConfirm}>
-                <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
+                <Ionicons style={styles.icon} name="eyeo" size={18} color={Colors.inputPlaceholder} />
               </TouchableOpacity>
             </View>
           )}
 
           { Platform.OS !== 'ios' && (
             <View style={styles.tos}>
               <TouchableOpacity style={styles.viewterms} onPress={actions.showTerms}>
-                <Text style={styles.viewtermstext}>View Terms of Service</Text>
+                <Text style={styles.viewtermstext}>{ state.strings.terms }</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.agreeterms} onPress={() => actions.agree(!state.agree)}>
                 { state.agree && (
@@ -150,7 +154,7 @@ export function Create() {
                 { !state.agree && (
                   <MatIcons name={'checkbox-blank-outline'} size={20} color={Colors.primary} />
                 )}
-                <Text style={styles.agreetermstext}>I agree to Terms of Service</Text>
+                <Text style={styles.agreetermstext}>{ state.strings.agree }</Text>
               </TouchableOpacity>
             </View>
           )}
@@ -162,17 +166,17 @@ export function Create() {
                   <ActivityIndicator size="small" color="#ffffff" />
                 )}
                 { !state.busy && (
-                  <Text style={styles.createtext}>Create Account</Text>
+                  <Text style={styles.createtext}>{ state.strings.create }</Text>
                 )}
               </TouchableOpacity>
             )}
             { (!state.enabled || (Platform.OS !== 'ios' && !state.agree)) && (
               <View style={styles.nocreate}>
-                <Text style={styles.nocreatetext}>Create Account</Text>
+                <Text style={styles.nocreatetext}>{ state.strings.create }</Text>
               </View>
             )}
             <TouchableOpacity style={styles.login} onPress={actions.login}>
-              <Text style={styles.logintext}>Account Login</Text>
+              <Text style={styles.logintext}>{ state.strings.accountLogin }</Text>
             </TouchableOpacity>
           </View>
         </ScrollView>      
@@ -186,11 +190,11 @@ export function Create() {
       >
         <View style={styles.modalContainer}>
           <ScrollView style={styles.terms} persistentScrollbar={true}>
-            <Text style={styles.termsheader}>Terms of Use and User Policy</Text>
-            <Text numberOfLines={0}>{ tos.message }</Text>
+            <Text style={styles.termsheader}>{ state.strings.policy }</Text>
+            <Text numberOfLines={0}>{ tos[state.strings.languageCode] }</Text>
           </ScrollView>
           <TouchableOpacity style={styles.done} onPress={actions.hideTerms}>
-            <Text style={styles.donetext}>Done</Text>
+            <Text style={styles.donetext}>{ state.strings.close }</Text>
           </TouchableOpacity>
         </View>
       </Modal>

diff --git a/app/mobile/src/access/login/Login.jsx b/app/mobile/src/access/login/Login.jsx
@@ -120,7 +120,7 @@ export function Login() {
             <Text numberOfLines={0}>{ tos[state.strings.languageCode] }</Text>
           </ScrollView>
           <TouchableOpacity style={styles.done} onPress={actions.hideTerms}>
-            <Text style={styles.donetext}>{ state.strings.done }</Text>
+            <Text style={styles.donetext}>{ state.strings.close }</Text>
           </TouchableOpacity>
         </View>
       </Modal>

diff --git a/app/mobile/src/access/reset/Reset.jsx b/app/mobile/src/access/reset/Reset.jsx
@@ -16,8 +16,8 @@ export function Reset() {
     }
     catch (err) {
       Alert.alert(
-        "Access Failed",
-        "Please check your server and token.",
+        state.strings.error,
+        state.strings.tryAgain,
       );
     }
   }
@@ -32,26 +32,26 @@ export function Reset() {
         </View>
         <Text style={styles.title}>Databag</Text>
         <View style={styles.spacemid}>
-          <Text style={styles.header}>Access Account</Text>
+          <Text style={styles.header}>{ state.strings.accessAccount }</Text>
         </View>
         <View style={styles.spacetop}>
           <View style={styles.inputwrapper}>
             <Ionicons style={styles.icon} name="database" size={18} color="#aaaaaa" />
             <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
-                autoCapitalize="none" placeholder="server" placeholderTextColor={Colors.grey} />
+                autoCapitalize="none" placeholder={state.strings.server} placeholderTextColor={Colors.inputPlaceholder} />
             <View style={styles.space} />
           </View>
           <View style={styles.inputwrapper}>
             <Ionicons style={styles.icon} name="key" size={18} color="#aaaaaa" />
             <TextInput style={styles.inputfield} value={state.token} onChangeText={actions.setToken}
-                autoCapitalize="none" placeholder="token" placeholderTextColor={Colors.grey} />
+                autoCapitalize="none" placeholder={state.strings.token} placeholderTextColor={Colors.inputPlaceholder} />
             <View style={styles.space} />
           </View>
 
           { Platform.OS !== 'ios' && (
             <View style={styles.tos}>
               <TouchableOpacity style={styles.viewterms} onPress={actions.showTerms}>
-                <Text style={styles.viewtermstext}>View Terms of Service</Text>
+                <Text style={styles.viewtermstext}>{ state.strings.terms }</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.agreeterms} onPress={() => actions.agree(!state.agree)}>
                 { state.agree && (
@@ -60,7 +60,7 @@ export function Reset() {
                 { !state.agree && (
                   <MatIcons name={'checkbox-blank-outline'} size={20} color={Colors.primary} />
                 )}
-                <Text style={styles.agreetermstext}>I agree to Terms of Service</Text>
+                <Text style={styles.agreetermstext}>{state.string.agree}</Text>
               </TouchableOpacity>
             </View>
           )}
@@ -71,17 +71,17 @@ export function Reset() {
                 <ActivityIndicator size="small" color="#ffffff" />
               )}
               { !state.busy && (
-                <Text style={styles.resettext}>Access</Text>
+                <Text style={styles.resettext}>{ state.strings.access }</Text>
               )}
             </TouchableOpacity>
           )}
           { (!state.enabled || (Platform.OS !== 'ios' && !state.agree)) && (
             <View style={styles.noreset}>
-              <Text style={styles.noresettext}>Access</Text>
+              <Text style={styles.noresettext}>{ state.strings.access }</Text>
             </View>
           )}
           <TouchableOpacity style={styles.login} onPress={actions.login}>
-            <Text style={styles.logintext}>Account Login</Text>
+            <Text style={styles.logintext}>{ state.strings.accountLogin }</Text>
           </TouchableOpacity>
         </View>      
       </View>
@@ -94,11 +94,11 @@ export function Reset() {
       >
         <View style={styles.modalContainer}>
           <ScrollView style={styles.terms} persistentScrollbar={true}>
-            <Text style={styles.termsheader}>Terms of Use and User Policy</Text>
-            <Text numberOfLines={0}>{ tos.message }</Text>
+            <Text style={styles.termsheader}>{ state.strings.policy }</Text>
+            <Text numberOfLines={0}>{ tos[state.strings.languageCode] }</Text>
           </ScrollView>
-          <TouchableOpacity style={styles.done} onPress={actions.hideTerms}>
-            <Text style={styles.donetext}>Done</Text>
+          <TouchableOpacity style={styles.close} onPress={actions.hideTerms}>
+            <Text style={styles.donetext}>{ state.strings.done }</Text>
           </TouchableOpacity>
         </View>
       </Modal>

diff --git a/app/mobile/src/access/reset/useReset.hook.js b/app/mobile/src/access/reset/useReset.hook.js
@@ -10,7 +10,7 @@ export function useReset() {
   const app = useContext(AppContext);
 
   const [state, setState] = useState({
-    stirngs: getLanguageStrings(),
+    strings: getLanguageStrings(),
     busy: false,
     enabled: false,
     server: null,