From 8179b51844bcbdcba6ec7d8fe203fa65dec1fb1e Mon Sep 17 00:00:00 2001 From: Clayton Wilson Date: Mon, 7 Oct 2019 20:24:23 -0400 Subject: [PATCH] Before finishing authentication --- twistter-frontend/src/App.js | 48 ++++++++----- twistter-frontend/src/Writing_Microblogs.js | 34 +++++---- twistter-frontend/src/pages/Register.js | 71 ++++++++++++++----- .../src/redux/actions/userActions.js | 38 ++++++++-- twistter-frontend/src/util/AuthRoute.js | 21 +++--- 5 files changed, 147 insertions(+), 65 deletions(-) diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js index 8e18621..8656ef0 100644 --- a/twistter-frontend/src/App.js +++ b/twistter-frontend/src/App.js @@ -2,8 +2,7 @@ import React, { Component } from "react"; import "./App.css"; -import { BrowserRouter as Router } from "react-router-dom"; -import Route from "react-router-dom/Route"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import Navbar from "./components/layout/NavBar"; import jwtDecode from "jwt-decode"; @@ -27,6 +26,7 @@ import userLine from "./Userline.js"; import AuthRoute from "./util/AuthRoute"; let authenticated; + const token = localStorage.FBIdToken; if (token) { const decodedToken = jwtDecode(token); @@ -43,25 +43,37 @@ const theme = createMuiTheme(themeObject); class App extends Component { render() { return ( - - -
- -
-
- - - - - - - -
+ + +
+ +
- +
+ + {/* */} + + + + + + + + + + {/* + + + + + */} + +
+ + + - ); } } diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js index 3bda6cc..b1570d8 100644 --- a/twistter-frontend/src/Writing_Microblogs.js +++ b/twistter-frontend/src/Writing_Microblogs.js @@ -34,21 +34,27 @@ class Writing_Microblogs extends Component { handleSubmit(event) { // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value); + const postData = { + body: this.state.value, + userHandle: "new user", + userImage: "bing-url", + microBlogTitle: this.state.title, + microBlogTopics: this.state.topics.split(', ') + } + const headers = { + headers: { 'Content-Type': 'application/json'} + } - const response = axios.post( - 'http://localhost:5001/twistter-e4649/us-central1/api/putPost', - { body: this.state.value, - userHandle: "new user", - userImage: "bing-url", - microBlogTitle: this.state.title, - microBlogTopics: this.state.topics.split(', ') - - }, - { headers: { 'Content-Type': 'application/json'} } - - ) - console.log(response.data); - alert('Post was shared successfully!'); + axios + .post('/putPost', postData, headers) + .then((res) =>{ + alert('Post was shared successfully!') + console.log(res.data); + }) + .catch((err) => { + alert('An error occured.'); + console.error(err); + }) event.preventDefault(); this.setState({value: '', title: '',characterCount: 250, topics: ''}) } diff --git a/twistter-frontend/src/pages/Register.js b/twistter-frontend/src/pages/Register.js index d168315..3ae9047 100644 --- a/twistter-frontend/src/pages/Register.js +++ b/twistter-frontend/src/pages/Register.js @@ -6,6 +6,30 @@ import axios from 'axios'; import TextField from '@material-ui/core/TextField'; import PropTypes from 'prop-types'; +// Redux Stuff +import {connect} from 'react-redux'; +import {signupUser, logoutUser} from '../redux/actions/userActions'; +import withStyles from '@material-ui/core/styles/withStyles'; + +const styles = { + form: { + textAlign: "center" + }, + textField: { + marginBottom: 30 + }, + pageTitle: { + // marginTop: 20, + marginBottom: 40 + }, + button: { + positon: "relative", + marginBottom: 30 + }, + progress: { + position: "absolute" + } +}; class Register extends Component { @@ -21,30 +45,28 @@ class Register extends Component { this.handleSubmit = this.handleSubmit.bind(this); this.handleChange = this.handleChange.bind(this); -}; + }; + componentWillReceiveProps(nextProps) { + if (nextProps.UI.errors) { + this.setState({ errors: nextProps.UI.errors }); + } + } + + handleSubmit = (event) => { + event.preventDefault(); + this.setState({ + loading: true + }); -handleSubmit = (event) => { const newUserData = { email: this.state.email, handle: this.state.handle, password: this.state.password, confirmPassword: this.state.confirmPassword }; - axios.post('http://localhost:5001/twistter-e4649/us-central1/api/signup', newUserData) - .then(res => { - console.log(res.data); - localStorage.setItem('firebaseIdToken', `Bearer ${res.data.token}`); - this.props.history.push('/'); - }) - .catch(err => { - this.setState({ - errors: err.response.data - }); - }); - alert("You successfully registered"); - event.preventDefault(); - this.setState({email: '', handle: '', password: '', confirmPassword: ''}); + + this.props.signupUser(newUserData, this.props.history); }; @@ -55,7 +77,7 @@ handleChange = (event) => { }; render() { - const { classes } = this.props; + const { classes, UI: { loading } } = this.props; const { errors } = this.state; return (
@@ -83,6 +105,9 @@ handleChange = (event) => { {errors.general}
) } + {/* { + loading && Loading... + } */} @@ -91,7 +116,15 @@ handleChange = (event) => { } Register.propTypes = { - classes: PropTypes.object.isRequired + classes: PropTypes.object.isRequired, + user: PropTypes.object.isRequired, + UI: PropTypes.object.isRequired, + signupUser: PropTypes.func.isRequired }; -export default Register; \ No newline at end of file +const mapStateToProps = (state) => ({ + user: state.user, + UI: state.UI +}); + +export default connect(mapStateToProps, {signupUser})(withStyles(styles)(Register)); \ No newline at end of file diff --git a/twistter-frontend/src/redux/actions/userActions.js b/twistter-frontend/src/redux/actions/userActions.js index cc6eb56..ddb159e 100644 --- a/twistter-frontend/src/redux/actions/userActions.js +++ b/twistter-frontend/src/redux/actions/userActions.js @@ -1,4 +1,4 @@ -import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI} from '../types'; +import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types'; import axios from 'axios'; @@ -19,9 +19,7 @@ export const loginUser = (loginData, history) => (dispatch) => { .post("/login", loginData) .then((res) => { // Save the login token - const FBIdToken = `Bearer ${res.data.token}`; - localStorage.setItem('FBIdToken', FBIdToken); - axios.defaults.headers.common['Authorization'] = FBIdToken; + setAuthorizationHeader(res.data.token); dispatch(getUserData()); dispatch({ type: CLEAR_ERRORS }) // Redirects to home page @@ -33,4 +31,36 @@ export const loginUser = (loginData, history) => (dispatch) => { payload: err.response.data, }) }); +}; + +export const signupUser = (newUserData, history) => (dispatch) => { + dispatch({ type: LOADING_UI }); + axios + .post("/signup", newUserData) + .then((res) => { + // Save the signup token + setAuthorizationHeader(res.data.token); + dispatch(getUserData()); + dispatch({ type: CLEAR_ERRORS }) + // Redirects to home page + history.push('/home'); + }) + .catch((err) => { + dispatch ({ + type: SET_ERRORS, + payload: err.response.data, + }) + }); +}; + +export const logoutUser = () => (dispatch) => { + localStorage.removeItem('FBIdToken'); + delete axios.defaults.headers.common['Authorization']; + dispatch({ type: SET_UNAUTHENTICATED }); +} + +const setAuthorizationHeader = (token) => { + const FBIdToken = `Bearer ${token}`; + localStorage.setItem('FBIdToken', FBIdToken); + axios.defaults.headers.common['Authorization'] = FBIdToken; } \ No newline at end of file diff --git a/twistter-frontend/src/util/AuthRoute.js b/twistter-frontend/src/util/AuthRoute.js index 309ccf0..f2d9bc2 100644 --- a/twistter-frontend/src/util/AuthRoute.js +++ b/twistter-frontend/src/util/AuthRoute.js @@ -1,22 +1,23 @@ -import React from 'react' -import { Route, Redirect} from 'react-router-dom'; +import React from 'react'; +import { Route, Redirect } from 'react-router-dom'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; const AuthRoute = ({ component: Component, authenticated, ...rest }) => ( - - authenticated === true ? : } - /> + render={(props) => + authenticated === true ? : + } + /> ); const mapStateToProps = (state) => ({ - authenticated: state.user.authenticated + authenticated: state.user.authenticated }); AuthRoute.propTypes = { - user: PropTypes.object -} + user: PropTypes.object +}; -export default connect(mapStateToProps)(AuthRoute); +export default connect(mapStateToProps)(AuthRoute); \ No newline at end of file