Skip to content

S
safetcut-app
Commit cc55a818 by Tonk
Options

update style

parent 9a449b49
Showing with 83 additions and 28 deletions
src/constants/Styles.js
...@@ -32,6 +32,7 @@ export const theme = StyleSheet.create({ ...@@ -32,6 +32,7 @@ export const theme = StyleSheet.create({
marginLeft: 5, marginLeft: 5,
color: color.grey1, color: color.grey1,
marginTop: 30, marginTop: 30,
fontSize: 17
}, },
inputErrIcon: { inputErrIcon: {
color: color.red1, color: color.red1,
...@@ -51,5 +52,6 @@ export const theme = StyleSheet.create({ ...@@ -51,5 +52,6 @@ export const theme = StyleSheet.create({
alignItems: 'flex-end', alignItems: 'flex-end',
borderBottomColor: '#cfd7db', borderBottomColor: '#cfd7db',
borderBottomWidth: 1, borderBottomWidth: 1,
paddingBottom: 5
}, },
}); });
src/screens/public/login.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Text, Content, Input, Radio, Form, Item, Left, Right, Button, Row } from 'native-base'; import { Container, Text, Content, Input, Radio, Item, Left, Right, Button, Row, CheckBox } from 'native-base';
import { theme } from '../../constants/Styles'; import { theme } from '../../constants/Styles';
import { Actions } from 'react-native-router-flux'; import { Actions } from 'react-native-router-flux';
import { LinearGradient } from 'expo-linear-gradient'; import { LinearGradient } from 'expo-linear-gradient';
import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/layout/InputField'
const required = value => (value ? undefined : 'This is a required field.');
const minChar = value => (value && !/^.{6,}$/i.test(value) ? 'At least 6 characters' : undefined);
export default class login extends Component { export default class login extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -10,47 +15,82 @@ export default class login extends Component { ...@@ -10,47 +15,82 @@ export default class login extends Component {
isCheck: false, isCheck: false,
}; };
} }
submitForm() {
let submitResults = this.registerForm.validate();
let errors = [];
submitResults.forEach(item => {
errors.push({ field: item.fieldName, error: item.error });
});
this.setState({ errors: errors });
}
submitSuccess() {
console.log('Submit Success!');
Actions.HomePage();
}
submitFailed() {
console.log('Submit Failed!');
}
render() { render() {
return ( return (
<Container> <Container>
<Content style={theme.startContainer}> <Content style={theme.startContainer}>
<Text style={theme.startTitle}>Login</Text> <Text style={theme.startTitle}>Login</Text>
<Form style={theme.startFormContainer}> <Form
<Item> ref={ref => (this.registerForm = ref)}
<Input validate={true}
placeholder="Username" submit={this.submitSuccess.bind(this)}
placeholderTextColor={'#cacaca'} failed={this.submitFailed.bind(this)}
style={{ color: '#808080' }} errors={this.state.errors}
/> style={theme.startFormContainer}
</Item> >
<Item> {/* ---Username--- */}
<Input <Field
secureTextEntry={true} required
placeholder="Password" component={InputField}
placeholderTextColor={'#cacaca'} validations={[required]}
style={{ color: '#808080' }} name="Username"
/> value={this.state.username}
</Item> onChangeText={val => this.setState({ username: val })}
customStyle={theme.input}
placeholder="Username"
/>
{/* ---password--- */}
<Field
required
component={InputField}
validations={[required, minChar]}
name="password"
value={this.state.password}
onChangeText={val => this.setState({ password: val })}
customStyle={theme.input}
placeholder="Password"
isPass={true}
/>
</Form> </Form>
<Row style={{ marginTop: 30 }}> <Row style={{ marginTop: 30 }}>
<Left> <Left>
<Row> <Row style={{alignItems: 'center'}}>
<Radio <CheckBox
color={'#cacaca'} color={'#cacaca'}
selected={this.state.isCheck} checked={this.state.isCheck}
onPress={() => onPress={() =>
this.setState(() => { this.setState(() => {
return (this.state.isCheck = !this.state.isCheck); return (this.state.isCheck = !this.state.isCheck);
}) })
} }
/> />
<Text style={{ color: '#cacaca', marginLeft: 5 }}>Remember me</Text> <Text style={{ color: '#cacaca', marginLeft: 12, fontSize: 13 }}>Remember me</Text>
</Row> </Row>
</Left> </Left>
<Right> <Right>
<Text <Text
style={{ color: '#cacaca' }} style={{ color: '#cacaca',fontSize: 13, marginRight: 10 }}
onPress={() => { onPress={() => {
Actions.ForgotPass(); Actions.ForgotPass();
}} }}
...@@ -68,9 +108,7 @@ export default class login extends Component { ...@@ -68,9 +108,7 @@ export default class login extends Component {
<Button <Button
full full
transparent transparent
onPress={() => { onPress={this.submitForm.bind(this)}
Actions.HomePage();
}}
> >
<Text style={{ color: 'white' }}>LOGIN</Text> <Text style={{ color: 'white' }}>LOGIN</Text>
</Button> </Button>
......
src/screens/public/register.js
...@@ -5,6 +5,7 @@ import { Form, Field } from 'react-native-validate-form'; ...@@ -5,6 +5,7 @@ import { Form, Field } from 'react-native-validate-form';
import InputField from '../../components/layout/InputField'; import InputField from '../../components/layout/InputField';
import { LinearGradient } from 'expo-linear-gradient'; import { LinearGradient } from 'expo-linear-gradient';
import { Actions } from 'react-native-router-flux'; import { Actions } from 'react-native-router-flux';
import { Alert } from 'react-native'
// validations // validations
const required = value => (value ? undefined : 'This is a required field.'); const required = value => (value ? undefined : 'This is a required field.');
...@@ -43,6 +44,20 @@ export default class register extends Component { ...@@ -43,6 +44,20 @@ export default class register extends Component {
submitSuccess() { submitSuccess() {
console.log('Submit Success!'); console.log('Submit Success!');
Alert.alert(
'Completed!',
'You have completed your registration',
[
// {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
// {
// text: 'Cancel',
// onPress: () => console.log('Cancel Pressed'),
// style: 'cancel',
// },
{text: 'Go to Login', onPress: () => Actions.LoginPage()},
],
{cancelable: false},
);
// Actions.LoginPage(); // Actions.LoginPage();
} }
...@@ -142,9 +157,9 @@ export default class register extends Component { ...@@ -142,9 +157,9 @@ export default class register extends Component {
}) })
} }
/> />
<Text style={{ color: '#9ea0a5', marginLeft: 15 }}> <Text style={{ color: '#9ea0a5', marginLeft: 15, fontSize: 14 }}>
I have read the{' '} I have read the{' '}
<Text style={{ textDecorationLine: 'underline', color: '#56575a' }}> <Text style={{ textDecorationLine: 'underline', color: '#56575a', fontSize: 14 }}>
Terms and Conditions Terms and Conditions
</Text> </Text>
. .
......
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