Display warning when accessing API page with no credentials;

Author: Leandro Diato

dev-portal/src/components/NavBar.jsx

@@ -9,11 +9,9 @@ import {
   isAuthenticated,
   isRegistered,
   logout,
-  getLoginRedirectUrl
+  getCognitoUrl
 } from 'services/self'
 
-import { cognitoDomain, cognitoClientId } from '../services/api'
-
 // mobx
 import { observer } from 'mobx-react'
 
@@ -24,14 +22,10 @@ import { fragments } from 'services/get-fragments'
 import MenuLink from 'components/MenuLink'
 import { store } from 'services/state'
 
-function getCognitoUrl (type) {
-  const redirectUri = getLoginRedirectUrl()
-  return `${cognitoDomain}/${type}?response_type=token&client_id=${cognitoClientId}&redirect_uri=${redirectUri}`
-}
 
 export const NavBar = observer(
   class NavBar extends React.Component {
-    render () {
+    render() {
       const email = store.user && store.user.email
       return <Menu inverted borderless attached style={{ flex: '0 0 auto' }} stackable>
         <MenuLink to='/'>
@@ -57,9 +51,9 @@ export const NavBar = observer(
               </div>
             </MenuLink>
           </> : <>
-            <MenuLink to={getCognitoUrl('login')}>Sign In</MenuLink>
-            <MenuLink to={getCognitoUrl('signup')}>Register</MenuLink>
-          </>}
+              <MenuLink to={getCognitoUrl('login')}>Sign In</MenuLink>
+              <MenuLink to={getCognitoUrl('signup')}>Register</MenuLink>
+            </>}
         </Menu.Menu>
       </Menu>
     }

dev-portal/src/pages/Apis.jsx

@@ -8,10 +8,10 @@ import SwaggerUI from 'swagger-ui'
 import 'swagger-ui/dist/swagger-ui.css'
 
 // semantic-ui
-import { Container, Header, Icon } from 'semantic-ui-react'
+import { Segment, Button, Container, Header, Icon } from 'semantic-ui-react'
 
 // services
-import { isRegistered } from 'services/self'
+import { isRegistered, getCognitoUrl } from 'services/self'
 import { updateUsagePlansAndApisList, getApi } from 'services/api-catalog'
 
 // components
@@ -27,11 +27,11 @@ export default observer(class ApisPage extends React.Component {
   containerRef = React.createRef()
   hasRoot = false
 
-  componentDidMount () { this.updateApi(true) }
-  componentDidUpdate () { this.updateApi(false) }
-  componentWillUnmount () { this.containerRef = null }
+  componentDidMount() { this.updateApi(true) }
+  componentDidUpdate() { this.updateApi(false) }
+  componentWillUnmount() { this.containerRef = null }
 
-  updateApi (isInitial) {
+  updateApi(isInitial) {
     return getApi(this.props.match.params.apiId || 'ANY', true, this.props.match.params.stage, isInitial)
       .then(api => {
         if (this.containerRef == null) return
@@ -72,10 +72,26 @@ export default observer(class ApisPage extends React.Component {
       })
   }
 
-  render () {
+  signIn() {
+    window.location = getCognitoUrl('login');
+  }
+
+  render() {
     let errorHeader
     let errorBody
 
+    if (!store.apiKey) {
+      return (
+        <Segment placeholder style={{ margin: '5em' }}>
+          <Header icon>
+            <Icon name='sign-in' />
+            Please sign-in to access the available APIs
+          </Header>
+          <Button positive onClick={this.signIn}>Sign In</Button>
+        </Segment>
+      )
+    }
+
     if (store.apiList.loaded) {
       if (!store.apiList.apiGateway.length && !store.apiList.generic.length) {
         errorHeader = 'No APIs Published'

dev-portal/src/services/self.js

@@ -155,3 +155,8 @@ export function logout () {
     }
   }
 }
+
+export function getCognitoUrl(type) {
+  const redirectUri = getLoginRedirectUrl()
+  return `${cognitoDomain}/${type}?response_type=token&client_id=${cognitoClientId}&redirect_uri=${redirectUri}`
+}