add login & register

src/components/layout/CardWithThumbnail.js

@@ -8,7 +8,9 @@ const CardWithThumbnail = props => {
 				<CardItem>
 					<Thumbnail
 						style={styles.avatarImg}
-						source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
+						source={{
+							uri: 'https://www.logistec.com/wp-content/uploads/2017/12/placeholder.png',
+						}}
 					/>
 				</CardItem>
 				{props.children}

src/components/layout/LoginCard.js

+import React from 'react';
+import { View, Text, Card, Button } from 'native-base';
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: 'center',
+		top: '10%',
+	},
+	cardStyle: {
+		width: '90%',
+		marginTop: 40,
+		borderRadius: 10,
+		paddingHorizontal: 20,
+		paddingTop: 20,
+		paddingBottom: 50,
+	},
+	submitBtn: { borderRadius: 30, marginTop: 30 },
+});
+
+const LoginCard = props => {
+	return (
+		<View style={styles.container}>
+			<Text style={{ fontSize: 36 }}>{props.title}</Text>
+			<Card style={styles.cardStyle}>
+				{props.children}
+				<Button danger full style={styles.submitBtn} onPress={props.continue}>
+					<Text>CONTINUE</Text>
+				</Button>
+			</Card>
+			{props.isLogin ? (
+				<Text style={{ color: 'grey', marginTop: 20 }}>
+					Don't have an account?{' '}
+					<Text style={{ color: 'firebrick' }} onPress={() => console.log('Register!')}>
+						Register
+					</Text>
+				</Text>
+			) : (
+				<View />
+			)}
+		</View>
+	);
+};
+export default LoginCard;

src/components/layout/SuccessModal.js

+import React from 'react';
+import { View, Text } from 'native-base';
+import { Modal, TouchableHighlight } from 'react-native';
+const SuccessModal = props => {
+	return (
+		<Modal
+			animationType="slide"
+			transparent={false}
+			visible={this.state.modalVisible}
+			onRequestClose={() => {
+				Alert.alert('Modal has been closed.');
+			}}>
+			<View style={{ marginTop: 22 }}>
+				<View>
+					<Text>Hello World!</Text>
+
+					<TouchableHighlight
+						onPress={() => {
+							this.setModalVisible(!this.state.modalVisible);
+						}}>
+						<Text>Hide Modal</Text>
+					</TouchableHighlight>
+				</View>
+			</View>
+		</Modal>
+	);
+};
+export default SuccessModal;

src/screens/public/login.js

+import React, { Component } from 'react';
+import { Container, Text, Input, CardItem, Radio, Form, Item, Label, Left, Right } from 'native-base';
+import LoginCard from '../../components/layout/LoginCard';
+export default class login extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isCheck: false,
+		};
+	}
+	render() {
+		return (
+			<Container style={{ backgroundColor: '#fbfbfb' }}>
+				<LoginCard title={'Login'} isLogin={true}>
+					<Form style={{ paddingRight: 10, marginBottom: 10 }}>
+						<Item floatingLabel>
+							<Label style={{ color: '#cacaca' }}>Username</Label>
+							<Input />
+						</Item>
+						<Item floatingLabel>
+							<Label style={{ color: '#cacaca' }}>Password</Label>
+							<Input secureTextEntry={true} />
+						</Item>
+					</Form>
+					<CardItem>
+						<Left>
+							<Radio
+								color={'#cacaca'}
+								selected={this.state.isCheck}
+								onPress={() =>
+									this.setState(() => {
+										return (this.state.isCheck = !this.state.isCheck);
+									})
+								}
+							/>
+							<Text style={{ color: '#cacaca' }}>Remember me</Text>
+						</Left>
+						<Right>
+							<Text style={{ color: '#cacaca' }} onPress={() => console.log('Forgot password!!')}>
+								Forgot password
+							</Text>
+						</Right>
+					</CardItem>
+				</LoginCard>
+			</Container>
+		);
+	}
+}

src/screens/public/register.js

+import React, { Component } from 'react';
+import { Container, Text, CardItem, CheckBox, Left, Form, Input, Label, Item, View } from 'native-base';
+import { Modal, TouchableHighlight } from 'react-native';
+import LoginCard from '../../components/layout/LoginCard';
+import SuccessModal from '../../components/layout/SuccessModal';
+
+export default class register extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isCheck: false,
+			modalVisible: false,
+		};
+	}
+	setModalVisible(visible) {
+		this.setState({ modalVisible: visible });
+	}
+	render() {
+		return (
+			<Container style={{ backgroundColor: '#fbfbfb' }}>
+				<Modal
+					animationType="fade"
+					transparent={true}
+					visible={this.state.modalVisible}
+					onRequestClose={() => {
+						Alert.alert('Modal has been closed.');
+					}}>
+					<View style={{ alignItems: 'center', top: '20%' }}>
+						<View style={{ backgroundColor: 'white', width: '90%', height: 100 }}>
+							<Text>test modal</Text>
+							<TouchableHighlight
+								onPress={() => {
+									this.setModalVisible(!this.state.modalVisible);
+								}}>
+								<Text>Hide Modal</Text>
+							</TouchableHighlight>
+						</View>
+					</View>
+				</Modal>
+				<LoginCard
+					title={'Register'}
+					continue={() => {
+						this.setModalVisible(true);
+					}}>
+					<Form style={{ paddingRight: 10, marginBottom: 10 }}>
+						<Item floatingLabel>
+							<Label style={{ color: '#cacaca' }}>Name</Label>
+							<Input />
+						</Item>
+						<Item floatingLabel>
+							<Label style={{ color: '#cacaca' }}>Surname</Label>
+							<Input />
+						</Item>
+						<Item floatingLabel>
+							<Label style={{ color: '#cacaca' }}>E-mail</Label>
+							<Input />
+						</Item>
+						<Item floatingLabel>
+							<Label style={{ color: '#cacaca' }}>Password</Label>
+							<Input secureTextEntry={true} />
+						</Item>
+						<Item floatingLabel>
+							<Label style={{ color: '#cacaca' }}>Confirm password</Label>
+							<Input secureTextEntry={true} />
+						</Item>
+						<Item floatingLabel>
+							<Label style={{ color: '#cacaca' }}>Phone no.</Label>
+							<Input />
+						</Item>
+					</Form>
+					<CardItem>
+						<Left>
+							<CheckBox
+								color={'#cacaca'}
+								checked={this.state.isCheck}
+								style={{ marginRight: 5 }}
+								onPress={() =>
+									this.setState(() => {
+										return (this.state.isCheck = !this.state.isCheck);
+									})
+								}
+							/>
+							<Text style={{ color: '#cacaca' }}>
+								I have read the{' '}
+								<Text
+									style={{ textDecorationLine: 'underline', color: 'grey' }}
+									onPress={() => console.log('Terms and Conditions')}>
+									Terms and Conditions
+								</Text>
+								.
+							</Text>
+						</Left>
+					</CardItem>
+				</LoginCard>
+			</Container>
+		);
+	}
+}