martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing layout of otp modal

Browse Source
This commit is contained in:
balzack 2024-05-18 00:32:16 -07:00
parent a1041fb225
commit caf46172c8
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/mobile/src/session/settings/Settings.jsx
View File

@ -234,7 +234,7 @@ export function Settings({ drawer }) {
<Text style={styles.optionText}>{ state.strings.mfaTitle }</Text> <Text style={styles.optionText}>{ state.strings.mfaTitle }</Text>
</TouchableOpacity> </TouchableOpacity>
<Switch value={state.mfaEnabled} style={Platform.OS==='ios' ? styles.notifications : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.idleFill} <Switch value={state.mfaEnabled} style={Platform.OS==='ios' ? styles.notifications : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.idleFill}
trackColor={styles.track} onValueChange={actions.toggleMFA} /> trackColor={styles.track} onValueChange={toggleMFA} />
</View> </View>
</TouchableOpacity> </TouchableOpacity>
@ -894,7 +894,7 @@ export function Settings({ drawer }) {
> >
<View> <View>
<BlurView style={styles.mfaOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" /> <BlurView style={styles.mfaOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<View style={styles.mfaBase}> <KeyboardAvoidingView style={styles.mfaBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.mfaContainer}> <View style={styles.mfaContainer}>
<Text style={styles.mfaTitle}>{ state.strings.mfaTitle }</Text> <Text style={styles.mfaTitle}>{ state.strings.mfaTitle }</Text>
<Text style={styles.mfaDescription}>{ state.strings.mfaSteps }</Text> <Text style={styles.mfaDescription}>{ state.strings.mfaSteps }</Text>
@ -935,7 +935,7 @@ export function Settings({ drawer }) {
)} )}
</View> </View>
</View> </View>
</View> </KeyboardAvoidingView>
</View> </View>
</Modal> </Modal>

8
app/mobile/src/utils/InputCode.jsx
View File

@ -1,13 +1,17 @@
import { TextInput, Text, View, TouchableOpacity } from 'react-native'; import { TextInput, Text, View, TouchableOpacity } from 'react-native';
import { useState } from 'react'; import { useState, useRef } from 'react';
export function InputCode({ onChangeText, style }) { export function InputCode({ onChangeText, style }) {
const [code, setCode] = useState(''); const [code, setCode] = useState('');
const ref = useRef();
const updateCode = (value) => { const updateCode = (value) => {
if (value.length >= 6) { if (value.length >= 6) {
onChangeText(value.slice(0, 6)); onChangeText(value.slice(0, 6));
if (ref.current) {
ref.current.blur();
}
} }
else { else {
onChangeText(''); onChangeText('');
@ -38,7 +42,7 @@ export function InputCode({ onChangeText, style }) {
<Text style={{ fontSize: 20 }}>{ code.charAt(5) }</Text> <Text style={{ fontSize: 20 }}>{ code.charAt(5) }</Text>
</View> </View>
</View> </View>
<TextInput style={{ width: '100%', height: '100%', opacity: 0, position: 'absolute', top: 0, left: 0 }} onChangeText={updateCode} autoCorrect={false} autoCapitalize="none" maxLength={6} /> <TextInput style={{ width: '100%', height: '100%', opacity: 0, position: 'absolute', top: 0, left: 0 }} keyboardType={Platform.OS === 'ios' ? 'numeric' : 'number-pad'} onChangeText={updateCode} autoCorrect={false} autoCapitalize="none" maxLength={6} ref={ref} />
</View> </View>
</View> </View>
); );