rendering settings options

2025-03-13 09:00:06 +00:00 · 2025-02-18 16:14:47 -08:00 · 2025-02-18 16:14:47 -08:00 · 22b34ffdce
commit 22b34ffdce
parent 680f0affb5
5 changed files with 177 additions and 22 deletions
--- a/app/client/mobile/ios/Databag.xcodeproj/project.pbxproj
+++ b/app/client/mobile/ios/Databag.xcodeproj/project.pbxproj
@ -648,7 +648,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@ -732,7 +735,10 @@
 					"-DFOLLY_CFG_NO_COROUTINES=1",
 					"-DFOLLY_HAVE_CLOCK_GETTIME=1",
 				);
-				OTHER_LDFLAGS = "$(inherited)  ";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					" ",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;
--- a/app/client/mobile/ios/Podfile.lock
+++ b/app/client/mobile/ios/Podfile.lock
@ -1684,17 +1684,17 @@ PODS:
    - React-Core
    - SDWebImage (~> 5.11.1)
    - SDWebImageWebPCoder (~> 0.8.4)
-  - RNFBApp (21.7.1):
+  - RNFBApp (21.8.0):
    - Firebase/CoreOnly (= 11.7.0)
    - React-Core
-  - RNFBMessaging (21.7.1):
+  - RNFBMessaging (21.8.0):
    - Firebase/Messaging (= 11.7.0)
    - FirebaseCoreExtension
    - React-Core
    - RNFBApp
  - RNFS (2.20.0):
    - React-Core
-  - RNGestureHandler (2.22.1):
+  - RNGestureHandler (2.23.0):
    - DoubleConversion
    - glog
    - hermes-engine
@ -2243,10 +2243,10 @@ SPEC CHECKSUMS:
  rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
  RNCClipboard: d7a8903d32692b0a1e71738c3825465a9acae10e
  RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
-  RNFBApp: e0a2811ca35292b19d390e327612ada2bd115d0a
-  RNFBMessaging: 3b4b92c33a2ad87105c5b6e2e7a3bb5d33a34320
+  RNFBApp: 86b7ecb1325c76ceb9da5d44000728276144c7a5
+  RNFBMessaging: b5a40363b54da45f228f291d1f5b6956d5aa14f0
  RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
-  RNGestureHandler: 5c734ddd9b406a5cd792add1fc01f0894ed8ec28
+  RNGestureHandler: 25f5da2bd31aaa1abc70bdf737eb2529b0546a2e
  RNImageCropPicker: 8e39c01f205e00d739c31e682f068aac315587bf
  RNReanimated: b7cac31ac5410cb266bab45e1e7c52a164e71d17
  RNScreens: 16b782596e80e475b7f3ec769c9a97d789d9b0ed
@ -2256,7 +2256,7 @@ SPEC CHECKSUMS:
  SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
  SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
  TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
-  Yoga: b05994d1933f507b0a28ceaa4fdb968dc18da178
+  Yoga: a9ef4f5c2cd79ad812110525ef61048be6a582a4

 PODFILE CHECKSUM: 9cf7373afef7b881c911fda82ff1f94eacee3e98

--- a/app/client/mobile/src/setup/Setup.styled.ts
+++ b/app/client/mobile/src/setup/Setup.styled.ts
@ -9,11 +9,13 @@ export const styles = StyleSheet.create({
    display: 'flex',
    flexDirection: 'column',
    minHeight: 0,
+    minWidth: 0,
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    flexGrow: 1,
+    minWidth: 0,
  },
  header: {
    display: 'flex',
@ -22,22 +24,32 @@ export const styles = StyleSheet.create({
    alignItems: 'center',
    width: '100%',
    height: 48,
+    paddingLeft: 8,
+    paddingRight: 8,
  },
  line: {
    width: '100%',
  },
+  divider: {
+    width: '100%',
+    marginTop: 8,
+    marginBottom: 8,
+  },
  form: {
    width: '100%',
    flexGrow: 1,
    flexShrink: 1,
    minHeight: 0,
    height: 100,
+    minWidth: 0,
+    position: 'relative',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
-    width: '100%',
+    paddingTop: 16,
+    minWidth: 0,
  },
  busy: {
    display: 'flex',
@ -48,19 +60,27 @@ export const styles = StyleSheet.create({
  },
  option: {
    width: '100%',
+    height: 32,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
-    paddingTop: 8,
-    paddingBottom: 8,
+    marginTop: 6,
+    marginBottom: 6,
+    paddingLeft: 16,
+    paddingRight: 16,
+    minWidth: 0,
  },
  label: {
-    fontSize: 16,
+    fontSize: 14,
+    flexShrink: 1,
+    minWidth: 0,
  },
  inputSurface: {
    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
    marginRight: 8,
-    marginLeft: 16,
+    marginLeft: 8,
    display: 'flex',
    borderRadius: 8,
  },
@ -70,11 +90,38 @@ export const styles = StyleSheet.create({
    paddingTop: 0,
    paddingBottom: 0,
    display: 'flex',
-    height: 40,
-    maxHeight: 40,
+    height: 32,
+    maxHeight: 32,
    borderRadius: 8,
+    minWidth: 0,
+    flexShrink: 1,
+    fontSize: 14,
  },
  inputUnderline: {
    display: 'none',
  },
+  radioSelect: {
+    display: 'flex',
+    flexDirection: 'row',
+    paddingLeft: 50,
+    height: 32,
+    gap: 24,
+  },
+  radio: {
+    padding: 0,
+    margin: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 72,
+  },
+  radioLabel: {
+    fontSize: 12,
+    position: 'absolute',
+    left: -36,
+    fontWeight: 'bold',
+  },
+  controlSwitch: {
+    transform: [{scaleX: 0.7}, {scaleY: 0.7}],
+  },
 });
--- a/app/client/mobile/src/setup/Setup.tsx
+++ b/app/client/mobile/src/setup/Setup.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import {SafeAreaView, Image, View, Pressable} from 'react-native';
-import {ActivityIndicator, Surface, Divider, TextInput, Text} from 'react-native-paper';
+import {ActivityIndicator, RadioButton, Switch, Surface, Divider, TextInput, Text} from 'react-native-paper';
 import {styles} from './Setup.styled';
 import {useSetup} from './useSetup.hook';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
@ -18,6 +18,8 @@ export function Setup() {
    },      
  };

+console.log(state.setup);
+
  return (
    <View style={styles.setup}>
      <View style={styles.header}>
@ -36,7 +38,36 @@ export function Setup() {
      <Divider style={styles.line} bold={true} />
      <KeyboardAwareScrollView enableOnAndroid={true} style={styles.form} contentContainerStyle={styles.content}>
        <View style={styles.option}>
-          <Text style={styles.label}>{ state.strings.federatedHost }</Text>
+          <Text style={styles.label}>{state.strings.keyType}:</Text>
+          <View style={styles.radioSelect}>
+            <View style={styles.radio}>
+              <Text style={styles.radioLabel}>RSA2048</Text>
+              <RadioButton.Item 
+                disabled={state.loading}
+                rippleColor="transparent"
+                style={styles.radioButton}
+                label=""
+                mode="android"
+                status={state.setup?.keyType === 'RSA_2048' ? 'checked' : 'unchecked'}
+                onPress={() => { actions.setKeyType('RSA_2048') }}
+              />
+            </View>
+            <View style={styles.radio}>
+              <Text style={styles.radioLabel}>RSA4096</Text>
+              <RadioButton.Item
+                disabled={state.loading}
+                rippleColor="transparent"
+                style={styles.radioButton}
+                label=""
+                mode="android"
+                status={state.setup?.keyType === 'RSA_4096' ? 'checked' : 'unchecked'}
+                onPress={() => { actions.setKeyType('RSA_4096') }}
+              />
+            </View>
+          </View>
+        </View>
+        <View style={styles.option}>
+          <Text style={styles.label}>{ state.strings.federatedHost }:</Text>
          <Surface mode="flat" elevation={5} style={styles.inputSurface}>
            <TextInput
              dense={true}
@ -54,7 +85,7 @@ export function Setup() {
          </Surface>
        </View>
        <View style={styles.option}>
-          <Text style={styles.label}>{ state.strings.storageLimit }</Text>
+          <Text style={styles.label}>{ state.strings.storageLimit }:</Text>
          <Surface mode="flat" elevation={5} style={styles.inputSurface}>
            <TextInput
              type="number"
@ -73,6 +104,38 @@ export function Setup() {
            />
          </Surface>
        </View>
+        <View style={styles.option}>
+          <Text style={styles.label}>{state.strings.accountCreation}:</Text>
+          <Switch style={styles.controlSwitch} value={state.setup?.enableOpenAccess} disabled={state.loading} onValueChange={()=>actions.setEnableOpenAccess(!state.setup?.enableOpenAccess)} />
+          { state.setup?.enableOpenAccess && (
+            <Surface mode="flat" elevation={5} style={styles.inputSurface}>
+              <TextInput
+                type="number"
+                dense={true}
+                style={styles.input}
+                keyboardType="numeric"
+                outlineColor="transparent"
+                activeOutlineColor="transparent"
+                autoCapitalize={false}
+                underlineStyle={styles.inputUnderline}
+                mode="outlined"
+                disabled={state.loading}
+                placeholder={state.strings.storageHint}
+                value={state.openAccessLimit}
+                onChangeText={value => actions.setOpenAccessLimit(value)}
+              />
+            </Surface>
+          )}
+        </View>
+        <View style={styles.option}>
+          <Text style={styles.label}>{state.strings.enableNotifications}:</Text>
+          <Switch style={styles.controlSwitch} value={state.setup?.pushSupported} disabled={state.loading} onValueChange={()=>actions.setPushSupported(!state.setup?.pushSupported)} />
+        </View>
+        <View style={styles.option}>
+          <Text style={styles.label}>{state.strings.allowUnsealed}:</Text>
+          <Switch style={styles.controlSwitch} value={state.setup?.allowUnsealed} disabled={state.loading} onValueChange={()=>actions.setAllowUnsealed(!state.setup?.allowUnsealed)} />
+        </View>
+        <Divider style={styles.divider} bold={false} />
      </KeyboardAwareScrollView>
      <Divider style={styles.line} bold={true} />
      <Confirm show={state.error} params={errorParams} />
--- a/app/client/mobile/src/setup/useSetup.hook.ts
+++ b/app/client/mobile/src/setup/useSetup.hook.ts
@ -90,11 +90,50 @@ export function useSetup() {
        save();
      }
    },
-    setAccountStorage: (accountStorage: number) => {
+    setAccountStorage: (accountStorage: string) => {
      if (setup.current) {
        const storage = parseInt(accountStorage) * 1073741824;
-        setup.current.accountStorage = storage;
-        updateState({ setup: setup.current, accountStorage });
+        if (storage >= 0) {
+          setup.current.accountStorage = storage;
+          updateState({ setup: setup.current, accountStorage });
+        } else {
+          setup.current.accountStorage = 0;
+          updateState({ setup: setup.current, accountStorage: 0 });
+        }
+        save();
+      }
+    },
+    setKeyType: (keyType: string) => {
+      if (setup.current) {
+        setup.current.keyType = keyType;
+        updateState({ setup: setup.current });
+        save();
+      }
+    },
+    setEnableOpenAccess: (enableOpenAccess: boolean) => {
+      if (setup.current) {
+        setup.current.enableOpenAccess = enableOpenAccess;
+        updateState({ setup: setup.current });
+        save();
+      }
+    },
+    setOpenAccessLimit: (openAccessLimit: string) => {
+      if (setup.current) {
+        const limit = parseInt(openAccessLimit);
+        if (limit >= 0) {
+          setup.current.openAccessLimit = limit;
+          updateState({ setup: setup.current, openAccessLimit });
+        } else {
+          setup.current.openAccessLimit = 0;
+          updateState({ setup: setup.current, openAccessLimit: 0 });
+        }
+        save();
+      }
+    },
+    setPushSupported: (pushSupported: boolean) => {
+      if (setup.current) {
+        setup.current.pushSupported = pushSupported;
+        updateState({ setup: setup.current });
        save();
      }
    },