Show DN when logged in

2 files changed, 16 insertions, 2 deletions

diff --git a/src/App.js b/src/App.js
index b5cb61b..0838d06 100644
--- a/src/App.js
+++ b/src/App.js
@@ -31,6 +31,11 @@ const MessageBox = styled('div', {
   fontWeight: 'bold',
   backgroundColor: '#ffff00',
 })
+const DnBox = styled('div', {
+  color: '#424242',
+  fontSize: '1.1em',
+  padding: '0.6em 0.75em',
+})
 
 function ButtonRow() {
   let auth = useAuth()
@@ -40,6 +45,8 @@ function ButtonRow() {
     <div style={{ display: 'flex' }}>
       {auth.isAuthenticated() ? (
         <>
+          {/* TODO: This should go to a profile page once one exists */}
+          <DnBox onClick={() => navigate('/zones')}>{auth.getDn()}</DnBox>
           <Button
             className="LoginButton"
             primary
diff --git a/src/hooks/useAuth.js b/src/hooks/useAuth.js
index ce68b48..221ba0f 100644
--- a/src/hooks/useAuth.js
+++ b/src/hooks/useAuth.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { isExpired } from 'react-jwt'
+import { isExpired, decodeToken } from 'react-jwt'
 import { Navigate, useLocation } from 'react-router-dom'
 
 let AuthContext = React.createContext()
@@ -23,7 +23,14 @@ export function AuthProvider({ children }) {
     return token != null && !isExpired(token)
   }
 
-  let value = { token, signin, signout, isAuthenticated }
+  let getDn = () => {
+    if (isAuthenticated()) {
+      return decodeToken(token)["dn"]
+    }
+    return ""
+  }
+
+  let value = { token, signin, signout, isAuthenticated, getDn }
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
 }