Skip to content

N
new_excelso
Commit deaba70b authored by Trisno's avatar Trisno
Browse files
Options

update mockup design

parent 7a30f19f
Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 136 deletions
view/New_Register.js
View file @ deaba70b
...@@ -231,145 +231,173 @@ class NewRegister extends React.Component { ...@@ -231,145 +231,173 @@ class NewRegister extends React.Component {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView> <ScrollView>
<Spinner <Spinner
visible={this.state.spinner} visible={this.state.spinner}
textContent={'Loading...'} textContent={'Loading...'}
textStyle={styles.spinnerTextStyle} textStyle={styles.spinnerTextStyle}
/> />
<View style={styles.header}> <View style={styles.header}>
<StatusBar barStyle='dark-content' /> <StatusBar barStyle='dark-content' />
<Text style={styles.titleText}>{i18n.t('register')}</Text> {/* <Text style={styles.titleText}>{i18n.t('register')}</Text> */}
</View> <Text style={styles.titleText}>REGISTER</Text>
<View style={styles.body}>
<View style={styles.itemsRow}>
<View style={styles.items1}>
<Text>Email</Text>
</View>
<View style={styles.items2}>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
onChangeText={(email) => this.setState({ email })}
value={this.state.email}
keyboardType='email-address'
autoCapitalize="none"
// autoCompleteType="email"
/>
</View>
</View>
<View style={styles.itemsRow}>
<View style={styles.items1}>
<Text>{i18n.t('password')}</Text>
</View>
<View style={styles.items2}>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }}
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
secureTextEntry={true}
/>
</View>
</View> </View>
<View style={styles.itemsRow}> <View style={styles.body}>
<View style={styles.items1}>
<Text>{i18n.t('password2')}</Text> <View style={styles.itemsRow}>
</View> <View style={styles.items1}>
<View style={styles.items2}> <Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Email</Text>
<TextInput </View>
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }} <View style={styles.items2}>
onChangeText={(confirm_pass) => this.setState({ confirm_pass })} <TextInput
value={this.state.confirm_pass} style={styles.textInput}
secureTextEntry={true} onChangeText={(email) => this.setState({ email })}
/> value={this.state.email}
keyboardType='email-address'
autoCapitalize="none"
placeholder='Example@gmail.com'
placeholderTextColor='gray'
textAlign='center'
// autoCompleteType="email"
/>
</View>
</View> </View>
</View> <View style={styles.itemsRow}>
<View style={styles.itemsRow}> <View style={styles.items1}>
<View style={styles.items1}> {/* <Text>{i18n.t('password')}</Text> */}
<Text>{i18n.t('name')}</Text> <Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Password</Text>
</View>
<View style={styles.items2}>
<TextInput
style={styles.textInput}
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
secureTextEntry={true}
placeholder='******'
placeholderTextColor='gray'
textAlign='center'
/>
</View>
</View> </View>
<View style={styles.items2}> <View style={styles.itemsRow}>
<TextInput <View style={styles.items1}>
style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 10 }} {/* <Text>{i18n.t('password2')}</Text> */}
onChangeText={(full_name) => this.setState({ full_name })} <Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Confirm Password</Text>
value={this.state.full_name} </View>
/> <View style={styles.items2}>
<TextInput
style={styles.textInput}
onChangeText={(confirm_pass) => this.setState({ confirm_pass })}
value={this.state.confirm_pass}
secureTextEntry={true}
placeholder='******'
placeholderTextColor='gray'
textAlign='center'
/>
</View>
</View> </View>
</View> <View style={styles.itemsRow}>
<View style={styles.itemsRow}> <View style={styles.items1}>
<View style={styles.items1}> {/* <Text>{i18n.t('name')}</Text> */}
<Text>{i18n.t('dob')}</Text> <Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Name</Text>
</View>
<View style={styles.items2}>
<TextInput
style={styles.textInput}
onChangeText={(full_name) => this.setState({ full_name })}
value={this.state.full_name}
placeholder='Example'
placeholderTextColor='gray'
textAlign='center'
/>
</View>
</View> </View>
<View style={styles.itemsRow}>
<View style={styles.items1}>
{/* <Text>{i18n.t('dob')}</Text> */}
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Date Of Birth</Text>
</View>
<View style={styles.itemPicker}> <View style={styles.itemPicker}>
<View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1 }}> <View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker <Picker
mode="dropdown" mode="dropdown"
selectedValue={this.state.dob_day} selectedValue={this.state.dob_day}
style={{ height: 35, width: 100 }} style={{ height: 35, width: 100 }}
onValueChange={(itemValue, itemIndex) => this.setState({ dob_day: itemValue })}> onValueChange={(itemValue, itemIndex) => this.setState({ dob_day: itemValue })}>
{date.map((itemValue, itemIndex) => { {date.map((itemValue, itemIndex) => {
return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />) return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />)
})} })}
</Picker> </Picker>
</View> </View>
<View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1 }}> <View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker <Picker
mode="dropdown" mode="dropdown"
selectedValue={this.state.dob_month} selectedValue={this.state.dob_month}
style={{ height: 35, width: 100 }} style={{ height: 35, width: 100 }}
onValueChange={(itemValue, itemIndex) => onValueChange={(itemValue, itemIndex) =>
this.setState({ dob_month: itemValue }) this.setState({ dob_month: itemValue })
}> }>
{month.map((itemValue, itemIndex) => { {month.map((itemValue, itemIndex) => {
return (<Picker.Item label={itemValue} value={itemIndex} key={itemIndex} />) return (<Picker.Item label={itemValue} value={itemIndex} key={itemIndex} />)
})} })}
</Picker> </Picker>
</View>
<View style={{ height: 35, flex: 1, alignItems: 'center' }}>
<Picker
mode="dropdown"
selectedValue={this.state.dob_year}
style={{ height: 35, width: 100 }}
onValueChange={(itemValue, itemIndex) =>
this.setState({ dob_year: itemValue })
}>
{year.map((itemValue, itemIndex) => {
return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />)
})}
</Picker>
</View>
</View>
</View>
<View style={styles.itemsRow}>
<View style={styles.items1}>
{/* <Text>{i18n.t('gender')}</Text> */}
<Text style={{ textAlign: 'center', color: '#CFB368', fontWeight: 'bold' }}>Gender</Text>
</View> </View>
<View style={{ height: 35, flex: 1, borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1, borderRightWidth: 1 }}> <View style={styles.pickerGender}>
<Picker <Picker selectedValue={this.state.gender}
mode="dropdown" onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}>
selectedValue={this.state.dob_year} <Picker.Item label='Pilih' value='' />
style={{ height: 35, width: 100 }} {
onValueChange={(itemValue, itemIndex) => Object.entries(this.state.list_gender).map((item, key) =>
this.setState({ dob_year: itemValue }) <Picker.Item label={item[1]} key={key} value={item[0]}>
}> </Picker.Item>
{year.map((itemValue, itemIndex) => { )
return (<Picker.Item label={itemValue} value={itemValue} key={itemIndex} />) }
})}
</Picker> </Picker>
</View> </View>
</View> </View>
</View> {/* <View style={styles.button}>
<View style={styles.itemsRow}> <Button title={i18n.t('register')} onPress={() => this.validate()} />
<View style={styles.items1}>
<Text>{i18n.t('gender')}</Text>
</View> </View>
<View style={styles.items3}> <View style={styles.signin}>
<Picker selectedValue={this.state.gender} <TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}>
onValueChange={(itemValue, itemIndex) => this.setState({ gender: itemValue })}> <Text style={styles.textSignIn}>{i18n.t('signin')}</Text>
<Picker.Item label='Pilih' value='' /> </TouchableOpacity>
{ </View> */}
Object.entries(this.state.list_gender).map((item, key) => <TouchableOpacity onPress={() => this.validate()}>
<Picker.Item label={item[1]} key={key} value={item[0]}> <View style={styles.button}>
</Picker.Item> <Text style={{ color: 'white', fontWeight: 'bold', textAlign: 'center', fontSize: 22 }}>REGISTER</Text>
) </View>
} </TouchableOpacity>
</Picker>
</View>
</View>
<View style={styles.button}>
<Button title={i18n.t('register')} onPress={() => this.validate()} />
</View>
<View style={styles.signin}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}> <TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}>
<Text style={styles.textSignIn}>{i18n.t('signin')}</Text> <View style={styles.signin}>
<Text style={{ color: '#CFB368' }}>SIGN IN</Text>
</View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View>
</ScrollView> </ScrollView>
</View> </View>
) )
...@@ -384,23 +412,21 @@ const styles = StyleSheet.create({ ...@@ -384,23 +412,21 @@ const styles = StyleSheet.create({
backgroundColor: 'white' backgroundColor: 'white'
}, },
header: { header: {
flex: 0.2, flex: 0.1,
alignItems: 'center', backgroundColor: '#CFB368',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center'
}, },
body: { body: {
flex: 0.8, flex: 0.8,
flexDirection: 'column', flexDirection: 'column',
}, },
itemsRow: { itemsRow: {
flexDirection: 'row', // flexDirection: 'row',
marginTop: 25, marginTop: 25,
}, },
items1: { items1: {
marginLeft: 15, marginBottom: 10
width: 50,
justifyContent: 'center',
alignItems: 'center',
}, },
items2: { items2: {
flex: 1, flex: 1,
...@@ -420,23 +446,45 @@ const styles = StyleSheet.create({ ...@@ -420,23 +446,45 @@ const styles = StyleSheet.create({
itemPicker: { itemPicker: {
flexDirection: 'row', flexDirection: 'row',
flex: 1, flex: 1,
marginHorizontal: 15 marginLeft: 44,
marginRight: 44,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 10,
height: 40,
}, },
titleText: { titleText: {
margin:15, margin: 15,
fontSize: 26, fontSize: 26,
fontWeight: 'bold', fontWeight: 'bold',
color: 'white'
}, },
textInput: { textInput: {
height: 40,
borderColor: 'gray',
borderWidth: 1, borderWidth: 1,
borderColor: 'black', padding: 10,
height: 35, margin: 30,
alignItems: 'stretch' borderRadius: 10
},
pickerGender: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 10,
padding: 10,
paddingLeft: 170,
marginLeft: 44,
marginRight: 44,
alignItems: 'stretch',
justifyContent: 'center'
}, },
button: { button: {
backgroundColor: '#CFB368',
marginTop: 25, marginTop: 25,
marginHorizontal: 60, marginHorizontal: 150,
alignItems: 'stretch' borderRadius: 15,
paddingVertical: 5
}, },
signin: { signin: {
marginTop: 25, marginTop: 25,
......
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