feature #12: login functionality

package.json

@@ -43,6 +43,7 @@
     "express": "^4.17.1",
     "file-loader": "3.0.1",
     "fs-extra": "7.0.1",
+    "history": "^4.9.0",
     "html-webpack-plugin": "4.0.0-beta.5",
     "identity-obj-proxy": "3.0.0",
     "immer": "^2.1.5",

src/api/authApi.js

@@ -1,12 +1,27 @@
 import { handleResponse, handleError } from "./apiUtils";
 const baseUrl = process.env.REACT_APP_API_URL + "/api/auth/";
 
-export function login(userName, password) {
+function login(username, password) {
 	const requestOptions = {
 		method: "POST",
 		headers: { "Content-Type": "application/json" },
-		body: JSON.stringify({ userName, password })
+		body: JSON.stringify({ username, password })
 	};
 
-	return fetch(requestOptions);
+	return fetch(baseUrl + "/auth/login", requestOptions)
+		.then(handleResponse)
+		.then(token => {
+			localStorage.setItem("trelloid_token", JSON.stringify(token));
+			return token;
+		})
+		.catch(handleError);
 }
+
+function logout() {
+	localStorage.removeItem("user");
+}
+
+export const auth = {
+	login,
+	logout
+};

src/components/auth/LoginForm.js

@@ -8,24 +8,6 @@ const LoginForm = ({ onChange, onSave, errors, user }) => (
 			<h2 className="card-heading">Registration</h2>
 			{errors.summary && <p className="error-message">{errors.summary}</p>}
 
-			<TextInput
-				name="firstName"
-				type="text"
-				label="First name"
-				value={user.firstName}
-				onChange={onChange}
-				error={errors.firstName}
-			/>
-
-			<TextInput
-				name="lastName"
-				type="text"
-				label="Last name"
-				value={user.lastName}
-				onChange={onChange}
-				error={errors.lastName}
-			/>
-
 			<TextInput
 				name="userName"
 				type="text"

src/components/auth/LoginPage.js

@@ -20,12 +20,11 @@ class LoginPage extends Component {
 	}
 
 	formIsValid() {
-		const { firstName, lastName, userName, password } = this.state.user;
+		const { userName, password } = this.state.user;
 		const errors = {};
 
-		if (!firstName) errors.firstName = "First name is required";
-		if (!lastName) errors.lastName = "Last name is required";
 		if (!userName) errors.userName = "User name is required";
+		if (!password) errors.password = "Password is required";
 
 		this.setState({ errors: errors });
 		return Object.keys(errors).length === 0;
@@ -43,10 +42,9 @@ class LoginPage extends Component {
 		if (!this.formIsValid()) return;
 		this.setState({ saving: true });
 		this.props.actions
-			.saveUser(this.state.user)
+			.login(this.state.user)
 			.then(() => {
-				toast.success("User saved");
-				this.props.history.push("/users");
+				this.props.history.push("/");
 			})
 			.catch(error => {
 				this.setState({
@@ -61,7 +59,13 @@ class LoginPage extends Component {
 	render() {
 		return (
 			<div>
-				<LoginForm></LoginForm>
+				<LoginForm
+					user={this.state.user}
+					onChange={this.handleChange}
+					onSave={this.handleSave}
+					saving={this.state.saving}
+					errors={this.state.errors}
+				></LoginForm>
 			</div>
 		);
 	}

src/redux/actions/actionTypes.js

@@ -2,7 +2,7 @@
 export const LOGIN_REQUEST = "LOGIN_REQUEST";
 export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
 export const LOGIN_FAILURE = "LOGIN_FAILURE";
-export const LOGOUT = "LOGOUT";
+export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS";
 
 // Card actions.
 export const CREATE_CARD_SUCCESS = "CREATE_CARD_SUCCESS";

src/redux/actions/authActions.js

@@ -1,4 +1,6 @@
 import * as actionTypes from "./actionTypes";
+import { beginApiCall } from "./apiStatusActions";
+import * as authApi from "../../api/authApi";
 
 export function loginFailure(user) {
 	return { type: actionTypes.LOGIN_FAILURE, user: user };
@@ -12,10 +14,28 @@ export function loginSuccess(user) {
 	return { type: actionTypes.LOGIN_SUCCESS, user: user };
 }
 
-export function logout(user) {
-	return { type: actionTypes.LOGOUT, user: user };
+export function logoutSuccess(user) {
+	return { type: actionTypes.LOGOUT_SUCCESS };
 }
 
 export function login(user) {
-	return;
+	return function(dispatch) {
+		dispatch(beginApiCall());
+		dispatch(loginRequest({ user }));
+		const { userName, password } = user;
+		return authApi
+			.login(userName, password)
+			.then(() => {
+				dispatch(loginSuccess(user));
+			})
+			.catch(err => {
+				dispatch(loginFailure(err));
+				throw err;
+			});
+	};
+}
+
+export function logout() {
+	localStorage.removeItem("trelloid_token");
+	return logoutSuccess();
 }

src/redux/reducers/authReducer.js

@@ -0,0 +1,11 @@
+import * as actionTypes from "../actions/actionTypes";
+import initialState from "./initialState";
+
+export default function authReducer(state = initialState.users, action) {
+	switch (action.type) {
+		case actionTypes.LOGIN_SUCCESS:
+			return action.user;
+		default:
+			return state;
+	}
+}

src/redux/reducers/index.js

@@ -1,10 +1,12 @@
 import { combineReducers } from "redux";
 import apiCallsInProgress from "./apiStatusReducer";
+import auth from "./authReducer";
 import cards from "./cardReducer";
 import users from "./userReducer";
 
 const rootReducer = combineReducers({
 	apiCallsInProgress,
+	auth,
 	cards,
 	users
 });

src/tools/apiServer.js

@@ -39,14 +39,16 @@ server.post("/users/", function(req, res, next) {
 
 server.post("/auth/login", function(req, res, next) {
 	const { userName, password } = req.body;
-	if (isAuthenticated(userName, password) === false) {
+	const user = isAuthenticated(userName, password);
+	if (user) {
+		const access_token = createToken({ userName, password });
+		res.status(200).json({ access_token, user });
+	} else {
 		const status = 401;
 		const message = "Incorrect email or password";
 		res.status(status).json({ status, message });
 		return;
 	}
-	const access_token = createToken({ userName, password });
-	res.status(200).json({ access_token });
 });
 
 router.db._.id = "_id";
@@ -105,11 +107,9 @@ function verifyToken(token) {
 }
 
 function isAuthenticated(userName, password) {
-	return (
-		users.findIndex(
-			user =>
-				user.userName === userName &&
-				bcrypt.compareSync(password, user.password)
-		) !== -1
+	const user = users.filter(
+		user =>
+			user.userName === userName && bcrypt.compareSync(password, user.password)
 	);
+	return user[0];
 }

src/tools/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from "history";
+
+export const history = createBrowserHistory();