Auth

src/actions/actions.js

@@ -1,5 +1,6 @@
 import fetch from 'isomorphic-fetch';
 import { config } from '../config.js';
+import {browserHistory} from 'react-router';
 /*
  * action creators
  */
@@ -25,9 +26,10 @@ export function setPosts(posts) {
   };
 }
 
-export function postsFetchData(url) {
+export function postsFetchData() {
   return (dispatch) => {
     dispatch(postsIsLoading(true));
+    const url = config.url.posts;
 
     fetch(url)
       .then((response) => {
@@ -67,7 +69,8 @@ export function getFilteredPosts() {
           const title = post.title.toLowerCase();
           const body = post.body.toLowerCase();
           return (title.indexOf(searchedPhrase) >= 0 || body.indexOf(searchedPhrase) >= 0);
-        }
+        } else
+          return false;
       });
     }
 
@@ -84,10 +87,12 @@ export function changeSearchedPhrase(searchedPhrase) {
 
 export function deletePostAction(postId) {
   return (dispatch, getState) => {
-    const url = `${config.url}/${postId}`;
+    const url = `${config.url.posts}/${postId}`;
 
     fetch(url, {method: 'DELETE'})
       .then( () => {
+        postId = getState().postToDelete;
+
         const posts = getState().posts;
 
         posts.forEach((item, index) => {
@@ -98,13 +103,14 @@ export function deletePostAction(postId) {
 
         dispatch(postsFilter(posts));
         dispatch(setPosts(posts));
+        browserHistory.push('/');
       });
   }
 }
 
-export  function choosePostToDelete(postToDelete) {
+export function choosePostToDelete(postToDelete) {
   return {
     type: 'CHOOSE_POST_TO_DELETE',
     postToDelete
   };
-}
+}

src/actions/auth.js

@@ -0,0 +1,121 @@
+import {config} from "../config";
+
+export function setIsLogged(bool) {
+
+  return {
+    type: 'SET_IS_LOGGED',
+    isLogged: bool
+  };
+}
+
+export function setToken(token) {
+  return {
+    type: 'SET_TOKEN',
+    token
+  };
+}
+
+export function setUserData(userData) {
+  return {
+    type: 'SET_USER_DATA',
+    userData
+  };
+}
+
+export function signIn(login, password) {
+  return (dispatch) => {
+    dispatch(fetchSignIn(login,password));
+  }
+}
+
+export function fetchSignIn(login, password) {
+  return (dispatch, getState) => {
+    const data = {
+      login,
+      password
+    }
+
+    const myParams = Object.keys(data).map((key) => {
+      return `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`;
+    }).join('&');
+
+    const fetchData = {
+      method: 'POST',
+      body: myParams,
+      //credentials: 'include',
+      headers: {
+        //"Content-Type": "application/json"
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+        'Access-Control-Allow-Origin': 'http://localhost:3003'
+        }
+    }
+
+    const url = config.url.login;
+
+    fetch(url, fetchData)
+      .then((response) => {
+
+        if (!response.ok) {
+          throw Error(response.statusText);
+        }
+        return response;
+      })
+      .then( (response) => response.json() )
+      .then( (json) => {
+        dispatch(setToken(json.token));
+        dispatch(setIsLogged(true));
+        dispatch(fetchUserData(json.token));
+        localStorage.setItem('reactAppToken', json.token);
+      });
+
+  }
+}
+
+export function checkIfLogged() {
+  return (dispatch) => {
+    const token = localStorage.getItem('reactAppToken');
+
+    if (token !== 'null') {
+      dispatch(setIsLogged(true));
+      dispatch(setToken(token));
+      dispatch(fetchUserData(token))
+    } else {
+      dispatch(setIsLogged(false));
+    }
+  }
+}
+
+export function fetchUserData(token) {
+  return (dispatch) => {
+    const url = config.url.auth;
+
+    const fetchData = {
+      method: 'GET',
+      headers: {
+        authorization: token,
+      },
+    }
+
+    fetch(url, fetchData)
+      .then((response) => {
+        if (!response.ok) {
+
+          throw Error(response.statusText);
+        }
+        return response;
+      })
+      .then((response) => response.json())
+      .then((json) => {
+        dispatch(setUserData(json))
+      });
+  };
+}
+
+export function logOut() {
+  return (dispatch) => {
+    localStorage.removeItem('reactAppToken');
+    dispatch(setToken(''));
+    dispatch(setIsLogged(false));
+    dispatch(setUserData({}));
+  }
+}

src/actions/postPage.js

@@ -1,5 +1,6 @@
 import fetch from 'isomorphic-fetch';
 import { config } from '../config.js';
+import {browserHistory} from 'react-router';
 
 export function setPostTitle(title) {
   return {
@@ -24,7 +25,7 @@ export function setPostUser(user) {
 
 export  function getPostData(postId) {
   return (dispatch) => {
-    const url = `${config.url}/${postId}`;
+    const url = `${config.url.posts}/${postId}`;
     fetch(url)
       .then( (response) => response.json() )
       .then( (json) =>
@@ -46,7 +47,7 @@ export function setPostComments(comments) {
 
 export function getPostComments(postId) {
   return (dispatch) => {
-    const url = `${config.url}/${postId}/comments`;
+    const url = `${config.url.posts}/${postId}/comments`;
     fetch(url)
       .then( (response) => response.json() )
       .then( (json) =>
@@ -90,7 +91,7 @@ export function addPost() {
       }
     }
 
-    fetch(config.url, fetchData)
+    fetch(config.url.posts, fetchData)
       .then( (response) => response.json() )
       .then( (json) => {
         const posts = getState().posts;
@@ -101,7 +102,7 @@ export function addPost() {
         dispatch({ type: 'INCREMENT_LAST_POST_ID' })
 
         clearForm(dispatch);
-
+        browserHistory.push('/');
         //this.setState({info: `Post #${json.id} was saved.`})
       });
 
@@ -132,22 +133,57 @@ export function updatePost(postId) {
       }
     }
 
-    const url = `${config.url}/${postId}`;
+    const url = `${config.url.posts}/${postId}`;
 
     fetch(url, fetchData)
       .then( (response) => {
         let posts = getState().posts;
 
-        posts = posts.filter( (post) => {
-          if (post.id == postId) {
+        posts.filter( (post) => {
+          if (post.id === postId) {
             post.title = fetchData.body.title;
             post.body = fetchData.body.body;
             post.userId = fetchData.body.userId
             return true;
           }
+          else return false;
         });
+        browserHistory.push('/');
         //const info = (response.ok) ? 'Changes in post was saved.' : 'Error!'
         //this.setState({info})
       });
   }
 }
+
+export function setUsers(users) {
+  return {
+    type: 'SET_USERS',
+    users
+  }
+}
+
+export function fetchUsers() {
+  return (dispatch, getState) => {
+    const url = config.url.users;
+    const token = getState().token;
+
+    const fetchData = {
+      method: 'GET',
+      headers: {
+        authorization: token,
+      }
+    }
+
+    fetch(url, fetchData)
+      .then((response) => {
+        if (!response.ok) {
+          throw Error(response.statusText);
+        }
+        return response;
+      })
+      .then((response) => response.json())
+      .then((json) => {
+        dispatch(setUsers(json));
+      });
+  };
+}

src/actions/validation.js

@@ -0,0 +1,38 @@
+import { config } from "../config";
+import {
+
+} from './actions.js';
+
+export function setLoginFormValidation(formLoginIsValid, error) {
+  return {
+    type: 'SET_LOGIN_FORM_VALID',
+    formLoginIsValid
+  }
+}
+
+export function validateLoginForm(login, password) {
+  return (dispatch) => {
+    const errors = [];
+    let result = true;
+
+    const loginIsValid = validateInputText(login);
+    if (!loginIsValid) {
+      result = false;
+      errors.push(config.messages.empty_login);
+    }
+
+    const passwordIsValid = validateInputText(password);
+    if (!passwordIsValid) {
+      dispatch(setLoginFormValidation(passwordIsValid));
+      result = false;
+      errors.push(config.messages.empty_password);
+    }
+    //dispatch(setInfo(errors));
+    dispatch(setLoginFormValidation(true));
+    return result;
+  }
+}
+
+export function validateInputText(value) {
+  return !(value.length === 0);
+}

src/components/AuthComponent/AuthComponent.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { browserHistory } from 'react-router';
+import PropTypes from 'prop-types';
+import { checkIfLogged } from '../../actions/auth';
+
+export function requireAuthentication(Component) {
+
+  class AuthComponent extends React.Component {
+    static propTypes = {
+      isLogged: PropTypes.bool.isRequired,
+      checkIfLogged: PropTypes.func.isRequired
+    }
+
+    componentWillMount() {
+      this.props.checkIfLogged();
+      if (!this.props.isLogged) {
+        browserHistory.push('/login');
+      }
+    }
+
+    render() {
+      return (
+        this.props.isLogged && <Component  {...this.props} />
+      )
+    }
+  }
+
+  const mapStateToProps =
+    (state) => ({
+      token: state.token,
+      isLogged: state.isLogged
+    });
+
+  const mapDispatchToProps = (dispatch) => {
+    return {
+      checkIfLogged: () => dispatch(checkIfLogged())
+    };
+  }
+
+  return connect(mapStateToProps, mapDispatchToProps)(AuthComponent);
+}