Login

client/App.js

@@ -1,20 +1,22 @@
 import React from 'react';
-import {createStore, applyMiddleware} from 'redux';
-import {Provider} from 'react-redux';
-import reducer from './src/redux/reducer';
-import thunk from 'redux-thunk';
-import Dashboard from './src/components/Dashboard';
+import { createStore, applyMiddleware } from 'redux'
+import { Provider } from 'react-redux'
+import reducer from './src/redux/reducer'
+import thunk from 'redux-thunk'
+import Dashboard from './src/components/Dashboard'
+import Login from './src/components/Login'
 
 import NoteList from './src/components/NoteList';
 
-import {createAppContainer} from 'react-navigation';
-import {createStackNavigator} from 'react-navigation-stack';
+import { createAppContainer } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 
-import {View, StyleSheet, Text} from 'react-native';
+import { View, StyleSheet, Text } from 'react-native';
 
 const navigationStak = createStackNavigator({
-  Dashboard: {screen: Dashboard},
-  NoteList: {screen: NoteList},
+  Login: { screen: Login },
+  Dashboard: { screen: Dashboard },
+  NoteList: { screen: NoteList },
 });
 
 const store = createStore(reducer, applyMiddleware(thunk));

client/src/components/Dashboard/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { getAllCategories } from '../../redux/action'
+import { getAllCategories, logOut } from '../../redux/action'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
@@ -10,6 +10,8 @@ import {
   View,
   FlatList,
   Image,
+  Button,
+  TouchableOpacity
 } from 'react-native';
 
 class Dashboard extends React.Component {
@@ -18,32 +20,41 @@ class Dashboard extends React.Component {
     this.props.getAllCategories()
   }
   moveToList = () => {
-    // this should done after someye complete her work
-    // this.props.navigation.navigate('noteList')
+    this.props.navigation.navigate('NoteList')
+  }
+  logedOut = () => {
+    this.props.logOut()
+    this.props.navigation.navigate('Login')
   }
-  render() {
 
+  render() {
     return (
       <View>
+        {this.props.loading || !this.props.login ? <Text>loading
+        </Text>
+          :
+          (
 
-        {this.props.loading ? <Text>Loading</Text> : (
-          <>
-            <FlatList data={this.props.categories} renderItem={({ item, index }) =>
-              (
-                <View style={styles.photos_view}>
+            <>
+              <Button title={'logOut'} onPress={() => this.logedOut()} />
 
-                  <Image onClick={this.moveToList}
-                    style={styles.category_photo}
-                    source={{
-                      uri:
-                        item['image'],
-                    }}
-                  />
-                  <Text >{item["name"]}</Text>
-                </View>
-              )} />
-          </>
-        )
+              <FlatList data={this.props.categories} renderItem={({ item, index }) =>
+                (
+                  <View style={styles.photos_view}>
+                    <TouchableOpacity onPress={this.moveToList}>
+                      <Image
+                        style={styles.category_photo}
+                        source={{
+                          uri:
+                            item['image'],
+                        }}
+                      />
+                    </TouchableOpacity>
+                    <Text >{item["name"]}</Text>
+                  </View>
+                )} />
+            </>
+          )
         }
       </View>
 
@@ -69,13 +80,16 @@ const styles = StyleSheet.create({
 const mapStateToProps = (state) => {
   return {
     categories: state.categories,
-    loading: state.loading
+    loading: state.loading,
+    logout: state.logout,
+    login: state.login
 
   }
 }
 const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({
     getAllCategories,
+    logOut,
   }, dispatch)
 }
 

client/src/components/Login/index.js

@@ -0,0 +1,141 @@
+import React, { Component } from 'react'
+import axios from 'axios'
+import {
+  View,
+  Text,
+  Button,
+  TextInput,
+  StyleSheet,
+  Image,
+  TouchableOpacity
+} from 'react-native';
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { checkLogin } from '../../redux/action'
+
+class Login extends Component {
+  state = {
+    email: "",
+    password: "",
+    errorMsg: "",
+  };
+
+  handleInputEmail = email => {
+    this.setState({ email });
+  };
+
+  handleInputPassword = password => {
+    this.setState({ password });
+  };
+
+  logedIn = () => {
+    const { email, password } = this.state
+    this.props.checkLogin(email, password)
+    const { login } = this.props;
+    if (login || this.props.loading) {
+      this.props.navigation.push('Dashboard')
+    }
+    else {
+      alert('email or password is not correct')
+    }
+
+  };
+  signup = () => {
+    alert('in progress')
+    // this.props.navigation.push('Signup')
+  }
+  render() {
+
+
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Welcome to Notepad</Text>
+        <Image source={{ uri: 'https://cdn.dribbble.com/users/1355613/screenshots/7190094/media/50b564fe0f7e3cced8e5aeccb2bd1af0.jpg' }}
+          style={{ width: 250, height: 180 }} />
+        <TextInput style={styles.textBox} placeholder="email" keyboardType="email-address" onChangeText={this.handleInputEmail} autoCapitalize='none' />
+        <TextInput style={styles.textBox} secureTextEntry={true} placeholder="password" onChangeText={this.handleInputPassword} autoCapitalize='none' />
+        {/* <Button style={styles.loginBtn} title={'login'} onPress={() => this.logedIn()} /> */}
+
+        <TouchableOpacity style={styles.button} onPress={() => this.logedIn()}>
+          <Text style={styles.buttonText}>login</Text>
+        </TouchableOpacity>
+        <View style={styles.signupTextCont}>
+          <Text style={styles.signupText}>Do not have an account yet?</Text>
+          <TouchableOpacity onPress={this.signup}><Text style={styles.signupButton}> Signup</Text></TouchableOpacity>
+        </View>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 1,
+  },
+  title: {
+    textAlign: 'center',
+    fontStyle: "italic",
+    lineHeight: 25,
+  },
+  textBox: {
+    width: 250,
+    height: 40,
+    borderRadius: 25,
+    borderColor: "#E5E8E8",
+    borderWidth: 0.5,
+    paddingHorizontal: 16,
+    fontSize: 14,
+    marginVertical: 10
+  },
+  button: {
+    width: 120,
+    height: 40,
+    backgroundColor: '#fff',
+    borderColor: "#E5E8E8",
+    borderRadius: 50,
+    borderWidth: 0.5,
+    marginVertical: 10,
+    paddingVertical: 6
+
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: 'black',
+    textAlign: 'center',
+  },
+  signupTextCont: {
+    flexGrow: 1,
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    paddingVertical: 22,
+    flexDirection: 'row'
+  },
+  signupText: {
+    color: '#000',
+    fontSize: 14
+  },
+  signupButton: {
+    color: 'blue',
+    fontSize: 14,
+    fontWeight: '500'
+  },
+})
+
+
+const mapStateToProps = (state) => {
+  return {
+    login: state.login,
+    loading: state.loading,
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return bindActionCreators({
+    checkLogin,
+  }, dispatch)
+}
+export default connect(mapStateToProps, mapDispatchToProps)(Login)

client/src/components/NoteList/index.js

@@ -1,8 +1,8 @@
-import React, {Component} from 'react';
-import {Text, View, FlatList, StyleSheet,ScrollView} from 'react-native';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {getAllNotes} from '../../redux/action';
+import React, { Component } from 'react';
+import { Text, View, FlatList, StyleSheet, ScrollView } from 'react-native';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { getAllNotes } from '../../redux/action';
 
 class NoteList extends Component {
   componentDidMount = () => {
@@ -16,20 +16,20 @@ class NoteList extends Component {
         {this.props.loading ? (
           <Text>Loading</Text>
         ) : (
-          <>
-          <ScrollView>
-            <FlatList
-              data={this.props.notes}
-              renderItem={({item, index}) => (
-                <View style={styles.container}>
-                  <Text>{item['note_text']}</Text>
-                  <Text>{item['post_date']}</Text>
-                </View>
-              )}
-            />
-            </ScrollView>
-          </>
-        )}
+            <>
+              <ScrollView>
+                <FlatList
+                  data={this.props.notes}
+                  renderItem={({ item, index }) => (
+                    <View style={styles.container}>
+                      <Text>{item['note_text']}</Text>
+                      <Text>{item['post_date']}</Text>
+                    </View>
+                  )}
+                />
+              </ScrollView>
+            </>
+          )}
       </View>
     );
   }

client/src/redux/action.js

@@ -1,11 +1,19 @@
 //actions
-import axios from 'axios';
+import axios from 'axios'
+
+export const getAllCategories = () => async (dispatch) => {
+  dispatch({
+    type: 'LOADING',
+    loading: true
+
+  });
 
-export const getAllCategories = () => async dispatch => {
   try {
-    const response = await axios.get('http://192.168.13.70:4000/api/dashboard');
 
-    const data = response.data;
+
+    const response = await axios.get("http://192.168.13.248:4000/api/dashboard")
+
+    const data = response.data
 
     dispatch({
       type: 'GET_ALL_CATEGORIES',
@@ -21,7 +29,7 @@ export const getAllCategories = () => async dispatch => {
 export const getAllNotes = (category_id, user_id) => async dispatch => {
   try {
     const response = await axios.get(
-      `http://192.168.13.170:4000/api/dashboard/${category_id}/${user_id}/notes`,
+      `http://192.168.13.248:4000/api/dashboard/${category_id}/${user_id}/notes`,
     );
 
     const data = response.data;
@@ -37,4 +45,44 @@ export const getAllNotes = (category_id, user_id) => async dispatch => {
       type: 'LOADING',
     });
   }
-};
+
+}
+
+
+export const checkLogin = (email, password) => async (dispatch) => {
+  dispatch({
+    type: 'LOADING',
+    loading: true
+  })
+
+  try {
+
+    const data = await axios.post("http://192.168.13.248:4000/api/login", { email, password })
+    const login = data.data.msg
+
+    dispatch({
+      type: 'LOGIN',
+      login,
+      loading: false
+    })
+  }
+  catch {
+    dispatch({
+      type: 'LOADING',
+      loading: true,
+      login: false
+
+    })
+  }
+}
+
+export const logOut = () => async (dispatch) => {
+
+  const data = await axios.get("http://192.168.13.248:4000/api/logout")
+  const logout = data.data.message;
+  dispatch({
+    type: 'LOGOUT',
+    logout
+  })
+
+}