Display warning when accessing API page with no credentials;

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,10 +22,6 @@ 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 {

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
@@ -72,10 +72,26 @@ export default observer(class ApisPage extends React.Component {
       })
   }
 
+  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}`
+}