Merge pull request #395 from LD4P/editor-path-message

Adds a message if the user is not logged in andvisits the editor path

__tests__/components/Login.test.js

@@ -5,10 +5,23 @@ import { mount } from "enzyme"
 
 describe('Login', () => {
   it('should call the cognitoLogin function', () => {
-    const context = { state: 'fake' };
-    const wrapper = mount(<Login location={context}/>)
-    const spy = jest.spyOn(wrapper.instance(), 'cognitoLogin');
-    spy.mockImplementation(() => "mock");
+    const context = { state: {from: { pathname: '/fake'}}}
+    const wrapper = mount(<Login location={context} test={true}/>)
+    const spy = jest.spyOn(wrapper.instance(), 'cognitoLogin')
+    spy.mockImplementation(() => "mock")
     expect(wrapper.instance().cognitoLogin('url')).toEqual('mock')
   })
+
+  it('displays a message for the import path', () => {
+    const fromImport = {state: {from: { pathname: '/import'}}}
+    const wrapper = mount(<Login location={fromImport} test={true}/>)
+    expect(wrapper.find('div.alert-warning').text()).toMatch('You must be logged in to access the "import" path')
+  })
+
+  it('displays', () => {
+    const fromEditor = {state: {from: { pathname: '/editor'}}}
+    const wrapper = mount(<Login location={fromEditor} test={true}/>)
+    expect(wrapper.find('div.alert-warning').exists()).toBeFalsy()
+  })
+
 })

__tests__/components/editor/Editor.test.js

@@ -13,25 +13,45 @@ const props = {
 
 describe('<Editor />', () => {
   const handleGenerateLDFn = jest.fn()
-  const wrapper = shallow(<Editor.WrappedComponent {...props} handleGenerateLD={handleGenerateLDFn}/>)
-  it('has div with id "editor"', () => {
-    expect(wrapper.find('div#editor').length).toBe(1)
-  })
+  describe('any user', () => {
+    const wrapper = shallow(<Editor.WrappedComponent {...props}
+                                                     handleGenerateLD={handleGenerateLDFn}
+                                                     jwtAuth={{isAuthenticated: false}} />)
 
-  it('renders <ResourceTemplate /> component', () => {
-    expect(wrapper.find(ResourceTemplate).length).toBe(1)
-  })
+    it('has div with id "editor"', () => {
+      expect(wrapper.find('div#editor').length).toBe(1)
+    })
 
-  it('renders <StartingPoints /> component', () => {
-    expect(wrapper.find(StartingPoints).length).toBe(1)
-  })
+    it('renders <ResourceTemplate /> component', () => {
+      expect(wrapper.find(ResourceTemplate).length).toBe(1)
+    })
+
+    it('renders <StartingPoints /> component', () => {
+      expect(wrapper.find(StartingPoints).length).toBe(1)
+    })
+
+    it('renders <Header />', () => {
+      expect(wrapper.find(Header).length).toBe(1)
+    })
+
+    it('shows resource title', () => {
+      expect(wrapper.find('div#editor > h1').text()).toMatch('[Clone|Edit] title.of.resource')
+    })
+
+    it('displays an login warning message', () => {
+      expect(wrapper.find('div.alert-warning').text()).toMatch('Alert! No data can be saved unless you are logged in with group permissions.')
+    })
 
-  it('renders <Header />', () => {
-    expect(wrapper.find(Header).length).toBe(1)
   })
 
-  it('shows resource title', () => {
-    expect(wrapper.find('div#editor > h1').text()).toMatch('[Clone|Edit] title.of.resource')
+  describe('authenticated user', () => {
+    const wrapper = shallow(<Editor.WrappedComponent {...props}
+                                                     handleGenerateLD={handleGenerateLDFn}
+                                                     jwtAuth={{isAuthenticated: true}} />)
+
+    it('does not displays a login warning message', () => {
+      expect(wrapper.find('div.alert-warning').exists()).toBeFalsy()
+    })
   })
-  
+
 })

src/components/Login.jsx

@@ -12,23 +12,39 @@ class Login extends React.Component {
   }
 
   cognitoLogin = (url) => {
-    setTimeout(function(){
-      window.location.assign(url)
-    }, 500);
+    //TODO: find way to fix tests, which otherwise throw  "Error: Not implemented: navigation (except hash changes)", meaning that the tests cannot mutate and mock window.location
+    if(!this.props.test) {
+      setTimeout(function(){
+        window.location.assign(url)
+      }, 3000);
+    }
   }
 
   render() {
+    const pathName = JSON.stringify(this.props.location.state.from.pathname.slice(1))
+
+    let authenticationMessage = ''
+
+    if(pathName === '"import"') {
+      authenticationMessage = <div className="alert alert-warning alert-dismissible">
+        <a href="#" className="close" data-dismiss="alert" aria-label="close">&times;</a>
+        You must be logged in to access the {pathName} path
+        <p>Please wait to be directed to the login service...</p>
+      </div>;
+    }
+
     return (
       <div className="jumbotron center-block">
-        <p>Please wait to be directed to the login service...</p>
+        { authenticationMessage }
         {this.cognitoLogin(Config.awsCognitoLoginUrl)}
       </div>
     )
   }
 }
 
 Login.propTypes = {
-  location: PropTypes.object
+  location: PropTypes.object,
+  test: PropTypes.bool
 }
 
 export default Login

src/components/editor/Editor.jsx

@@ -2,7 +2,8 @@
 
 import React, {Component} from 'react'
 import { connect } from 'react-redux'
-import { removeAllItems } from '../../actions/index'
+import { removeAllItems, logIn } from '../../actions/index'
+import { Link } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import ResourceTemplate from './ResourceTemplate'
 import Header from './Header'
@@ -33,9 +34,24 @@ class Editor extends Component {
   }
 
   render() {
+    const user = this.props.jwtAuth
+
+    let authenticationMessage = <div className="alert alert-warning alert-dismissible">
+      <a href="#" className="close" data-dismiss="alert" aria-label="close">&times;</a>
+      Alert! No data can be saved unless you are logged in with group permissions.
+      Log in <Link to={{pathname: "/login", state: { from: this.props.location }}} ><span className="alert-link" href="/login">here</span>.</Link>
+    </div>;
+
+    if (user !== undefined) {
+      if (user.isAuthenticated) {
+        authenticationMessage = ''
+      }
+    }
+
     return(
       <div id="editor">
         <Header triggerEditorMenu={this.props.triggerHandleOffsetMenu}/>
+        { authenticationMessage }
         <h1>[Clone|Edit] title.of.resource</h1>
         <StartingPoints
           tempStateCallback={this.resetTempState}
@@ -55,12 +71,18 @@ class Editor extends Component {
 Editor.propTypes = {
   children: PropTypes.array,
   triggerHandleOffsetMenu: PropTypes.func,
-  resetStore: PropTypes.func
+  resetStore: PropTypes.func,
+  jwtAuth: PropTypes.object,
+  location: PropTypes.object
 }
 
 const mapDispatchToProps = dispatch => ({
   resetStore(){
-    dispatch(removeAllItems())}
+    dispatch(removeAllItems())
+  },
+  authenticate(jwt){
+    dispatch(logIn(jwt))
+  }
 })
 
 export default connect(null, mapDispatchToProps)(Editor)