add username to the signout button

- also rename unused `cognitoUser` to `user`
- clarified some of the auth functions use and when they happen

dev-portal/src/components/NavBar.jsx

@@ -22,6 +22,7 @@ import { fragments } from 'services/get-fragments'
 
 // components
 import MenuLink from 'components/MenuLink'
+import { store } from 'services/state'
 
 function getCognitoUrl (type) {
   const redirectUri = getLoginRedirectUrl()
@@ -31,6 +32,7 @@ function getCognitoUrl (type) {
 export const NavBar = observer(
   class NavBar extends React.Component {
     render () {
+      const email = store.user && store.user.email
       return <Menu inverted borderless attached style={{ flex: '0 0 auto' }} stackable>
         <MenuLink to='/'>
           <Image size='mini' src='/custom-content/nav-logo.png' style={{ paddingRight: '10px' }} />
@@ -44,7 +46,16 @@ export const NavBar = observer(
           {isAuthenticated() ? <>
             {isAdmin() && <MenuLink to='/admin/apis'>Admin Panel</MenuLink>}
             {isRegistered() && <MenuLink to='/dashboard'>My Dashboard</MenuLink>}
-            <MenuLink onClick={logout}>Sign Out</MenuLink>
+            <MenuLink onClick={logout}>
+              <div style={{ display: 'flex', flexDirection: 'column', textAlign: 'center' }}>
+                {email && <span style={{ marginBottom: '.5rem' }}>
+                  {email}
+                </span>}
+                <span>
+                  Sign out
+                </span>
+              </div>
+            </MenuLink>
           </> : <>
             <MenuLink to={getCognitoUrl('login')}>Sign In</MenuLink>
             <MenuLink to={getCognitoUrl('signup')}>Register</MenuLink>

dev-portal/src/services/self.js

@@ -39,6 +39,9 @@ function getRemainingSessionTime (idToken) {
   return jwtDecode(idToken).exp * 1000 - Date.now()
 }
 
+/**
+ * On page load, look for an active cookie. If it exists and isn't expired, great, use it. Otherwise, clear everything and make sure we're not logged in.
+ */
 export function init () {
   // attempt to refresh credentials from active session
 
@@ -62,6 +65,9 @@ export function init () {
   }
 }
 
+/**
+ * Gets triggered by the callback from the cognito user pool. Pretty much all it does is grab and store the idToken.
+ */
 export function login () {
   return new Promise((resolve, reject) => {
     let idToken
@@ -123,6 +129,7 @@ function setCredentials () {
       }
 
       initApiGatewayClient(AWS.config.credentials)
+      store.user = { email: jwtDecode(store.idToken).email }
       updateAllUserData()
 
       return apiGatewayClient()
@@ -131,6 +138,9 @@ function setCredentials () {
   })
 }
 
+/**
+ * Callback for the Cognito User Pool's logout just to make sure we clean up everything.
+ */
 export function logout () {
   clearTimeout(logoutTimer)
   logoutTimer = undefined

dev-portal/src/services/state.js

@@ -21,7 +21,8 @@ function storeDefaults () {
       generic: []
     },
 
-    cognitoUser: undefined,
+    user: undefined,
+    idToken: undefined,
 
     usagePlans: [],
 
@@ -67,7 +68,7 @@ export const store = observable({
   },
 
   resetUserData () {
-    this.reset('apiKey', 'cognitoUser', 'subscriptions')
+    this.reset('apiKey', 'user', 'subscriptions')
   }
 })