fix focux pass input

This commit is contained in:
ammarahm-ed
2020-05-03 22:57:17 +05:00
parent 1f2c0b360e
commit 2bdfe371fc
2 changed files with 38 additions and 34 deletions

View File

@@ -19,11 +19,12 @@ import {eCloseSideMenu, refreshNotesPage} from '../../services/events';
import {validatePass, validateUsername} from '../../services/validation';
import {db, DDS, ToastEvent, getElevation} from '../../utils/utils';
export const Login = ({navigation}) => {
const [state, dispatch] = useTracked();
const {colors, isLoginNavigator} = state;
const _email = createRef();
const _pass = createRef();
const [status, setStatus] = useState('Logging in...');
const _username = createRef();
const [loggingIn, setLoggingIn] = useState(false);
@@ -34,6 +35,9 @@ export const Login = ({navigation}) => {
const [username, setUsername] = useState(null);
const [invalidUsername, setInvalidUsername] = useState(false);
const [secureEntry, setSecureEntry] = useState(true);
const _email = createRef();
const _pass = createRef();
const _passContainer = createRef();
const isFocused = useIsFocused();
@@ -212,7 +216,7 @@ export const Login = ({navigation}) => {
}}
defaultValue={username}
onBlur={() => {
if (!validateUsername(username) && username.length > 0) {
if (!validateUsername(username) && username?.length > 0) {
setInvalidUsername(true);
_username.current.setNativeProps({
style: {
@@ -373,6 +377,7 @@ export const Login = ({navigation}) => {
</Text>
<View
ref={_passContainer}
style={{
borderWidth: 1.5,
@@ -381,13 +386,14 @@ export const Login = ({navigation}) => {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal:10,
marginHorizontal: 12,
}}>
<TextInput
ref={_pass}
onFocus={() => {
if (!invalidPassword) {
_pass.current.setNativeProps({
_passContainer.current?.setNativeProps({
style: {
borderColor: colors.accent,
},
@@ -401,12 +407,19 @@ export const Login = ({navigation}) => {
_pass.current.setNativeProps({
style: {
color: colors.errorText,
},
});
_passContainer.current?.setNativeProps({
style: {
borderColor: colors.errorText,
},
});
} else {
setInvalidPassword(false);
_pass.current.setNativeProps({
_passContainer.current?.setNativeProps({
style: {
borderColor: colors.nav,
},
@@ -420,9 +433,14 @@ export const Login = ({navigation}) => {
_pass.current.setNativeProps({
style: {
color: colors.pri,
},
});
_passContainer.current.setNativeProps({
style: {
borderColor: colors.accent,
},
});
}
}}
onSubmitEditing={() => {
@@ -436,7 +454,8 @@ export const Login = ({navigation}) => {
}
}}
style={{
padding:pv,
paddingVertical:pv,
paddingHorizontal:0,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
width: '85%',
@@ -455,34 +474,12 @@ export const Login = ({navigation}) => {
}}
style={{
width: 25,
marginRight:10
}}
color={secureEntry ? colors.icon : colors.accent}
/>
</View>
{/* <View
style={{
paddingHorizontal: 12,
alignItems: 'flex-end',
}}>
<TouchableOpacity
onPress={() => {
navigation.navigate('ForgotPassword');
}}
activeOpacity={opacity}
style={{}}>
<Text
style={{
fontSize: SIZE.xs,
fontFamily: WEIGHT.regular,
color: colors.accent,
height: 25,
}}>
Forgot password?
</Text>
</TouchableOpacity>
</View> */}
</View>
<TouchableOpacity
activeOpacity={opacity}

View File

@@ -31,6 +31,7 @@ const _email = createRef();
const _pass = createRef();
const _username = createRef();
const _passConfirm = createRef();
const _passContainer = createRef();
export const Signup = ({navigation}) => {
const [state, dispatch] = useTracked();
const {colors, isLoginNavigator} = state;
@@ -499,9 +500,11 @@ export const Signup = ({navigation}) => {
</Text>
<View
ref={_passContainer}
style={{
borderWidth: 1.5,
borderColor: colors.nav,
paddingHorizontal:10,
borderRadius: 5,
flexDirection: 'row',
justifyContent: 'space-between',
@@ -512,7 +515,7 @@ export const Signup = ({navigation}) => {
ref={_pass}
onFocus={() => {
if (!invalidPassword) {
_pass.current.setNativeProps({
_passContainer.current?.setNativeProps({
style: {
borderColor: colors.accent,
},
@@ -526,12 +529,17 @@ export const Signup = ({navigation}) => {
_pass.current.setNativeProps({
style: {
color: colors.errorText,
},
});
_passContainer.current?.setNativeProps({
style: {
borderColor: colors.errorText,
},
});
} else {
setInvalidPassword(false);
_pass.current.setNativeProps({
_passContainer.current?.setNativeProps({
style: {
borderColor: colors.nav,
},
@@ -545,7 +553,6 @@ export const Signup = ({navigation}) => {
_pass.current.setNativeProps({
style: {
color: colors.pri,
borderColor: colors.accent,
},
});
}
@@ -561,7 +568,8 @@ export const Signup = ({navigation}) => {
}
}}
style={{
padding:pv,
paddingVertical:pv,
paddingHorizontal:0,
fontSize: SIZE.sm,
fontFamily: WEIGHT.regular,
width: '85%',
@@ -580,7 +588,6 @@ export const Signup = ({navigation}) => {
}}
style={{
width: 25,
marginRight:10
}}
color={secureEntry ? colors.icon : colors.accent}
/>