Commit 7451ff69 by Tonk

add hide/show password

parent 0fe96d16
......@@ -12,10 +12,12 @@ const InputField = ({
placeholder,
errors, // this array prop is automatically passed down to this component from <Form />
isPass,
passVisible,
onPressEye,
}) => {
return (
<View>
<View>
<View style={theme.inputContainer}>
<TextInput
value={value && value}
onChangeText={onChangeText ? val => onChangeText(val) : null}
......@@ -23,16 +25,25 @@ const InputField = ({
placeholderTextColor={color.grey2}
disabled={disabled}
style={customStyle ? customStyle : {}}
secureTextEntry={isPass}
secureTextEntry={!passVisible}
/>
{errors &&
errors.length > 0 &&
errors.map((item, index) =>
item.field === name && item.error ? (
<Icon key={`${index}`} name="close" style={theme.inputErrIcon} />
) : null
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
{isPass && (
<Icon
onPress={onPressEye}
name={passVisible ? 'eye' : 'eye-off'}
style={[theme.inputPassVisible]}
/>
)}
{errors &&
errors.length > 0 &&
errors.map((item, index) =>
item.field === name && item.error ? (
<Icon key={`${index}`} name="close" style={theme.inputErrIcon} />
) : null
)}
</View>
</View>
{errors &&
errors.length > 0 &&
......
......@@ -26,10 +26,10 @@ export const theme = StyleSheet.create({
marginBottom: 10,
},
inputContainer: {
flex: 1,
borderBottomWidth: 1,
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'center',
justifyContent: 'space-between',
borderBottomColor: color.inputBorder,
},
container: {
flex: 1,
......@@ -49,9 +49,9 @@ export const theme = StyleSheet.create({
marginTop: 25,
paddingBottom: 5,
color: color.grey1,
borderBottomWidth: 1,
// borderBottomWidth: 1,
fontFamily: 'Avenir-Roman',
borderBottomColor: color.inputBorder,
// borderBottomColor: color.inputBorder,
},
inputErrText: {
bottom: -15,
......@@ -76,10 +76,14 @@ export const theme = StyleSheet.create({
alignItems: 'center',
},
inputErrIcon: {
right: 5,
bottom: 0,
marginBottom: 5,
marginLeft: 10,
fontSize: 20,
color: color.red1,
position: 'absolute',
},
inputPassVisible: {
marginBottom: 5,
fontSize: 20,
color: '#d8d8d8',
},
});
......@@ -29,6 +29,8 @@ const styles = StyleSheet.create({
export default class LoginScreen extends Component {
state = {
isCheck: false,
pass: '',
passVisible: false,
};
submitForm() {
......@@ -90,6 +92,8 @@ export default class LoginScreen extends Component {
customStyle={theme.input}
placeholder="Password"
isPass={true}
passVisible={this.state.passVisible}
onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
/>
</Form>
<Row style={{ marginTop: 30 }}>
......
......@@ -26,6 +26,8 @@ export default class RegisterScreen extends Component {
password: '',
cfPassword: '',
phoneNum: '',
passVisible: false,
cfPassVisible: false,
};
submitForm() {
......@@ -117,6 +119,8 @@ export default class RegisterScreen extends Component {
customStyle={theme.input}
placeholder="Password"
isPass={true}
passVisible={this.state.passVisible}
onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
/>
{/* ---cf password--- */}
<Field
......@@ -129,6 +133,8 @@ export default class RegisterScreen extends Component {
customStyle={theme.input}
placeholder="Confirm password"
isPass={true}
passVisible={this.state.cfPassVisible}
onPressEye={() => this.setState({ cfPassVisible: !this.state.cfPassVisible })}
/>
{/* ---phone no--- */}
<Field
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment