created helper functions in auth.ts

Author: akbuma

package.json

@@ -112,6 +112,7 @@
     "@material-ui/styles": "^4.9.6",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/js-cookie": "^2.2.6",
     "@types/prettier": "^1.19.0",
     "@types/prismjs": "^1.16.0",
     "@types/react": "^16.8.14",
@@ -137,6 +138,7 @@
     "electron-splashscreen": "^1.0.0",
     "enzyme": "^3.4.1",
     "enzyme-adapter-react-16": "^1.2.0",
+    "js-cookie": "^2.2.1",
     "konva": "^4.2.0",
     "localforage": "^1.7.2",
     "lodash.throttle": "^4.1.1",

src/components/login/SignIn.tsx

@@ -1,4 +1,4 @@
-import React, { Component, useState } from 'react';
+import React, { Component, useState, useEffect } from 'react';
 //import { connect } from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
 import { setLoginState } from '../../actions/actionCreators';
@@ -20,6 +20,8 @@ import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import { render } from 'enzyme';
 
+import Cookies from 'js-cookie';
+import { sessionIsCreated } from '../../helperFunctions/auth';
 /*
 const mapStateToProps = (store: any) => ({
   username: store.credentials.username,
@@ -75,15 +77,21 @@ const useStyles = makeStyles(theme => ({
 const SignIn: React.FC<LoginInt> = props => {
   const classes = useStyles();
   const s = useSelector(state => state);
+  const history = useHistory();
+
   const dispatch = useDispatch();
 
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
-
-  const history = useHistory();
-
   console.log('state on load: ', s.auth)
 
+  /*
+  useEffect(() => {
+    console.log('triggered')
+    if(s.auth) history.push('/signup'); // push to the main app
+  }, []);
+  */
+
   const handleChange = e => {
     let inputVal = e.target.value;
     switch (e.target.name) {
@@ -97,11 +105,18 @@ const SignIn: React.FC<LoginInt> = props => {
   };
 
   const handleLogin = e => {
+    e.preventDefault();
     console.log('click fired on handleLogin');
-    console.log('state: ', s);
-    dispatch(setLoginState());
+    sessionIsCreated(username, password).then(isLoggedIn => {
+      if(isLoggedIn) {
+        console.log('session created')
+        dispatch(setLoginState()); // changes login state to true
+        props.history.push('/signup');
+      } else {
+        console.log('invalid login')
+      }
+    });
     /*
-    e.preventDefault();
     const body = JSON.stringify({
       username,
       password
@@ -118,16 +133,18 @@ const SignIn: React.FC<LoginInt> = props => {
         return res.json();
       })
       .then(data => {
-        if (typeof data === 'string') {
-          alert(data);
+        console.log('the data', data);
+        if (data.sessionId && typeof data.sessionId === 'string') {
+          //alert(data); // these alerts cause the app to crash on mac
+          console.log('success')
+          dispatch(setLoginState()); // changes login state to true
+          props.history.push('/signup');
         } else {
-          props.history.push('/app');
-          alert('Login successful!');
-          //console.log('Data is', data);
+          console.log('err');
         }
       })
       .catch(err => console.log(err));
-    */
+      */
   };
 
   return (

src/helperFunctions/auth.ts

@@ -0,0 +1,36 @@
+import Cookies from 'js-cookie';
+
+// check for a cookie when and redirect to main app when first loaded
+export const hasValidSession = () => {
+  // Cookies.get('ssid');
+}
+
+export const sessionIsCreated = (username: string, password: string): Promise<boolean> => {
+  const body = JSON.stringify({
+    username,
+    password
+  });
+  const result = fetch('http://localhost:8080/login', {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body
+  })
+    .then(res => {
+      return res.json();
+    })
+    .then(data => {
+      console.log('the data', data);
+      if (data.sessionId && typeof data.sessionId === 'string') { // check that a session id was passed down
+        return true;
+      }
+      return false;
+    })
+    .catch(err => {
+      console.log(err);
+      return false
+    });
+  return result;
+}

src/index.js

@@ -1,13 +1,17 @@
 import 'babel-polyfill';
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import App from './components/App.tsx';
 import store from './store';
 
 import SignIn from './components/login/SignIn.tsx';
 import SignUp from './components/login/SignUp.tsx';
-import { HashRouter as Router, Route, Switch } from 'react-router-dom';
+import { 
+  HashRouter as Router, 
+  Route,
+  Redirect, 
+  Switch } from 'react-router-dom';
 
 /*
 ReactDOM.render(
@@ -24,15 +28,23 @@ If cookie is valid, send the user to app and set the login boolean to true
 If the cookie has expired, send the user back to login
 */
 
+const PrivateRoute = ({ component: Component, ...rest }) => (
+  <Route {...rest} render={(props) => (
+    false
+      ? <Component {...props} />
+      : <Redirect to='/login' />
+  )} />
+)
+
 ReactDOM.render(
   <Provider store={store}>
     <Router>
       <Switch>
         {/* change route to signin later for official release */}
-        <Route exact path="/" component={SignIn} />
+        <Route exact path="/login" component={SignIn} />
         <Route exact path="/signup" component={SignUp} />
-        <Route exact path="/app" component={App} />
-        {/* <PrivateRoute path='/protected' component={Protected} /> */}
+        {/* <Route exact path="/app" component={App} /> */}
+        <PrivateRoute path="/" component={App} />
       </Switch>
     </Router>
   </Provider>,