anncatton · Feb 16, 2021 · Jan 7, 2021 · Feb 4, 2021 · Feb 4, 2021 · Feb 4, 2021
diff --git a/components/Link.tsx b/components/Link.tsx
@@ -14,4 +14,26 @@ const StyledLink = styled('a')`
   `}
 `;
 
+export const StyledLinkAsButton = styled(StyledLink)`
+  ${({ theme }: { theme: typeof defaultTheme }) => css`
+    color: ${theme.colors.white};
+    background-color: ${theme.colors.accent};
+    ${theme.typography.subheading2};
+    line-height: 24px;
+    border-radius: 5px;
+    border: 1px solid ${theme.colors.accent};
+    padding: 6px 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    text-decoration: none;
+    &:hover {
+      background-color: ${theme.colors.accent_dark};
+      color: ${theme.colors.white};
+    }
+  `}
+`;
+
 export default StyledLink;
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -1,37 +1,14 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { css } from '@emotion/core';
 
 import UserDropdown from './UserDropdown';
 import defaultTheme from './theme';
 import { OvertureLogo } from './theme/icons';
-
-const LoginButton = ({ onClick }: { onClick?: () => any }) => {
-  return (
-    <button
-      onClick={onClick}
-      css={(theme: typeof defaultTheme) => css`
-        ${theme.typography.button};
-        background-color: ${theme.colors.accent};
-        color: ${theme.colors.white};
-        width: 73px;
-        height: 32px;
-        border: 1px solid ${theme.colors.accent};
-        border-radius: 5px;
-        margin: 0.5rem;
-        cursor: pointer;
-        &:hover {
-          ${theme.shadow.default};
-        }
-      `}
-    >
-      Login
-    </button>
-  );
-};
+import useAuthContext from '../global/hooks/useAuthContext';
+import { StyledLinkAsButton } from './Link';
 
 const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System', labIcon }) => {
-  // isLoggedIn state will be reimplemented with real auth state
-  const [isLoggedIn, setIsLoggedIn] = useState(true);
+  const { token } = useAuthContext();
   return (
     <div
       css={(theme: typeof defaultTheme) => css`
@@ -113,7 +90,7 @@ const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System',
             Data Explorer
           </a>
         </div>
-        {isLoggedIn ? (
+        {token ? (
           <div
             css={(theme) => css`
               width: 195px;
@@ -136,7 +113,16 @@ const NavBar: React.ComponentType<any> = ({ labName = 'Data Management System',
               justify-content: center;
             `}
           >
-            <LoginButton onClick={() => console.log('Logging in')} />
+            <StyledLinkAsButton
+              css={(theme) => css`
+                width: 70px;
+                ${theme.typography.button};
+                line-height: 20px;
+              `}
+              href="/login"
+            >
+              Log in
+            </StyledLinkAsButton>
           </div>
         )}
       </div>

diff --git a/components/Root.tsx b/components/Root.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 import defaultTheme from './theme';
 import Head from './Head';
+import { AuthProvider } from '../global/hooks/useAuthContext';
 
-const Root = ({ children }: { children: React.ReactElement }) => {
+const Root = ({ children, egoJwt }: { children: React.ReactElement; egoJwt?: string }) => {
   return (
     <>
       <style>
@@ -26,7 +27,9 @@ const Root = ({ children }: { children: React.ReactElement }) => {
       `}
       </style>
       <Head />
-      <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>
+      <AuthProvider egoJwt={egoJwt}>
+        <ThemeProvider theme={defaultTheme}>{children}</ThemeProvider>
+      </AuthProvider>
     </>
   );
 };

diff --git a/components/UserDropdown.tsx b/components/UserDropdown.tsx
@@ -5,6 +5,7 @@ import { useTheme } from 'emotion-theming';
 
 import defaultTheme from './theme';
 import { Avatar, ChevronDown } from './theme/icons';
+import useAuthContext from '../global/hooks/useAuthContext';
 
 const CurrentUser = ({ userName = 'TestUser' }: { userName?: string }) => (
   <div
@@ -41,6 +42,7 @@ text-decoration: none;
   background: (theme.colors.white)};
   padding: 6px 12px;
   color: ${theme.colors.black};
+  background-color: ${theme.colors.white};
   border: 1px solid ${theme.colors.grey_3};
   outline: none;
   font-size: 16px;
@@ -76,6 +78,7 @@ const UserDropdown = () => {
     };
   }, [open]);
   const theme: typeof defaultTheme = useTheme();
+  const { logout } = useAuthContext();
   return (
     <div
       ref={node}
@@ -134,9 +137,8 @@ const UserDropdown = () => {
           <li>
             <StyledListLink href="/user">Profile & Token</StyledListLink>
           </li>
-          {/* TODO: implement logout */}
           <li>
-            <StyledListLink>Logout</StyledListLink>
+            <StyledListLink onClick={() => logout()}>Logout</StyledListLink>
           </li>
         </ul>
       )}

diff --git a/components/pages/login/index.tsx b/components/pages/login/index.tsx
@@ -46,6 +46,9 @@ const LoginButton = ({
           border: 1px solid ${theme.colors.accent};
           cursor: ${disabled ? 'not-allowed' : 'pointer'};
           opacity: ${disabled ? 0.4 : 1};
+          &:hover {
+            border: 1px solid ${theme.colors.accent_dark};
+          }
         `}
       >
         <span
@@ -68,6 +71,11 @@ const LoginButton = ({
               background-color: ${theme.colors.accent};
               color: ${theme.colors.white};
               ${theme.typography.button}
+              border-radius: 0 3px 3px 0;
+              &:hover {
+                background-color: ${theme.colors.accent_dark};
+                color: ${theme.colors.white};
+              }
             `
           }
         >
@@ -87,9 +95,9 @@ type ProviderType = {
 const providers: ProviderType[] = [
   { name: 'Google', path: 'google', icon: GoogleLogo },
   { name: 'ORCiD', path: 'orcid', icon: OrcidLogo },
-  { name: 'GitHub', path: '', icon: GitHubLogo },
+  { name: 'GitHub', path: 'github', icon: GitHubLogo },
   { name: 'Facebook', path: '', icon: FacebookLogo },
-  { name: 'LinkedIn', path: '', icon: LinkedInLogo },
+  { name: 'LinkedIn', path: 'linkedin', icon: LinkedInLogo },
 ];
 
 const LoginPage = () => {

diff --git a/components/pages/user/index.tsx b/components/pages/user/index.tsx
@@ -1,6 +1,6 @@
 import { css, Global } from '@emotion/core';
 import React from 'react';
-import { capitalize, has, isEmpty, sample, set } from 'lodash';
+import { capitalize, has, isEmpty } from 'lodash';
 import { useTheme } from 'emotion-theming';
 
 import PageLayout from '../../PageLayout';
@@ -20,11 +20,31 @@ import Button from '../../Button';
 import StyledLink from '../../Link';
 import { Tooltip } from 'react-tippy';
 import styled from '@emotion/styled';
+import useAuthContext from '../../../global/hooks/useAuthContext';
 
-type ProviderType = 'GOOGLE' | 'FACEBOOK' | 'GITHUB' | 'LINKEDIN' | 'ORCID';
-type UserType = 'ADMIN' | 'USER';
-type UserStatus = 'APPROVED' | 'PENDING' | 'DISABLED' | 'REJECTED';
-type Language = 'English' | 'French' | 'Spanish';
+enum ProviderType {
+  GOOGLE = 'GOOGLE',
+  FACEBOOK = 'FACEBOOK',
+  GITHUB = 'GITHUB',
+  LINKEDIN = 'LINKEDIN',
+  ORCID = 'ORCID',
+}
+
+enum UserType {
+  ADMIN = 'ADMIN',
+  USER = 'USER',
+}
+enum UserStatus {
+  APPROVED = 'APPROVED',
+  PENDING = 'PENDING',
+  DISABLED = 'DISABLED',
+  REJECTED = 'REJECTED',
+}
+enum Language {
+  ENGLISH = 'English',
+  FRENCH = 'French',
+  SPANISH = 'Spanish',
+}
 
 interface ApiToken {
   expiryDate: string;
@@ -70,10 +90,10 @@ const sampleUser: User = {
   email: 'user@example.com',
   firstName: 'User',
   lastName: 'Example',
-  providerType: 'GOOGLE',
+  providerType: ProviderType.GOOGLE,
   providerSubjectId: 'prov-subj-id-0123',
-  status: 'APPROVED',
-  type: 'USER',
+  status: UserStatus.APPROVED,
+  type: UserType.ADMIN,
   createdAt: '2020-02-14T15:58:37.151+0000',
   lastLogin: '2020-02-14T15:58:37.151+0000',
 };
@@ -382,73 +402,76 @@ const StyledPageLayout = styled(PageLayout)`
 `;
 
 const User = () => {
+  const { token } = useAuthContext();
   return (
     <StyledPageLayout>
-      <div
-        css={() =>
-          css`
-            margin: 1rem 20rem;
-            display: flex;
-            flex-direction: column;
-          `
-        }
-      >
+      {/* checking token here because there is a flash of this page while localStorage is checked in _app.
+      possibly a better way to handle this for all non-public pages? (right now that's just user) */}
+      {token && (
         <div
           css={css`
+            margin: 1rem 20rem;
             display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            width: 800px;
-            margin-top: 1.5rem;
-            margin-bottom: 0.5rem;
-            padding-bottom: 2.5rem;
-            border-bottom: 1px solid ${theme.colors.grey_3};
+            flex-direction: column;
           `}
         >
           <div
             css={css`
               display: flex;
               flex-direction: row;
+              justify-content: space-between;
+              width: 800px;
+              margin-top: 1.5rem;
+              margin-bottom: 0.5rem;
+              padding-bottom: 2.5rem;
+              border-bottom: 1px solid ${theme.colors.grey_3};
             `}
           >
-            <OvertureUser width={75} height={84} />
             <div
               css={css`
-                margin-left: 1rem;
+                display: flex;
+                flex-direction: row;
               `}
             >
-              <h1
-                css={(theme) =>
-                  css`
-                    ${theme.typography.regular};
-                    font-size: 30px;
-                    line-height: 36px;
-                    color: ${theme.colors.accent_dark};
-                    margin-bottom: 0.5rem;
-                    margin-top: 0.1rem;
-                  `
-                }
-              >
-                {`${sampleUser.firstName} ${sampleUser.lastName}`}
-              </h1>
+              <OvertureUser width={75} height={84} />
               <div
-                css={(theme) =>
-                  css`
-                    ${theme.typography.subheading};
-                    color: ${theme.colors.accent_dark};
-                    font-weight: normal;
-                    padding-left: 0.2rem;
-                  `
-                }
+                css={css`
+                  margin-left: 1rem;
+                `}
               >
-                {sampleUser.email || ''}
+                <h1
+                  css={(theme) =>
+                    css`
+                      ${theme.typography.regular};
+                      font-size: 30px;
+                      line-height: 36px;
+                      color: ${theme.colors.accent_dark};
+                      margin-bottom: 0.5rem;
+                      margin-top: 0.1rem;
+                    `
+                  }
+                >
+                  {`${sampleUser.firstName} ${sampleUser.lastName}`}
+                </h1>
+                <div
+                  css={(theme) =>
+                    css`
+                      ${theme.typography.subheading};
+                      color: ${theme.colors.accent_dark};
+                      font-weight: normal;
+                      padding-left: 0.2rem;
+                    `
+                  }
+                >
+                  {sampleUser.email || ''}
+                </div>
               </div>
             </div>
+            <AuthenticatedBadge provider={sampleUser.providerType} />
           </div>
-          <AuthenticatedBadge provider={sampleUser.providerType} />
+          <ApiTokenInfo apiToken={sampleToken} />
         </div>
-        <ApiTokenInfo apiToken={sampleToken} />
-      </div>
+      )}
     </StyledPageLayout>
   );
 };

diff --git a/global/config.ts b/global/config.ts
@@ -6,7 +6,7 @@ export const getConfig = () => {
   return {
     NEXT_PUBLIC_EGO_API_ROOT: publicConfig.NEXT_PUBLIC_EGO_API_ROOT || 'http://localhost:8088',
     NEXT_PUBLIC_EGO_CLIENT_ID: publicConfig.NEXT_PUBLIC_EGO_CLIENT_ID || '',
-    EGO_PUBLIC_KEY:
+    NEXT_PUBLIC_EGO_PUBLIC_KEY:
       publicConfig.EGO_PUBLIC_KEY ||
       `-----BEGIN PUBLIC KEY-----\r\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0lOqMuPLCVusc6szklNXQL1FHhSkEgR7An+8BllBqTsRHM4bRYosseGFCbYPn8r8FsWuMDtxp0CwTyMQR2PCbJ740DdpbE1KC6jAfZxqcBete7gP0tooJtbvnA6X4vNpG4ukhtUoN9DzNOO0eqMU0Rgyy5HjERdYEWkwTNB30i9I+nHFOSj4MGLBSxNlnuo3keeomCRgtimCx+L/K3HNo0QHTG1J7RzLVAchfQT0lu3pUJ8kB+UM6/6NG+fVyysJyRZ9gadsr4gvHHckw8oUBp2tHvqBEkEdY+rt1Mf5jppt7JUV7HAPLB/qR5jhALY2FX/8MN+lPLmb/nLQQichVQIDAQAB\r\n-----END PUBLIC KEY-----`,
     NEXT_PUBLIC_ARRANGER_PROJECT_ID: publicConfig.NEXT_PUBLIC_ARRANGER_PROJECT_ID || '',
@@ -16,7 +16,7 @@ export const getConfig = () => {
   } as {
     NEXT_PUBLIC_EGO_API_ROOT: string;
     NEXT_PUBLIC_EGO_CLIENT_ID: string;
-    EGO_PUBLIC_KEY: string;
+    NEXT_PUBLIC_EGO_PUBLIC_KEY: string;
     NEXT_PUBLIC_ARRANGER_PROJECT_ID: string;
     NEXT_PUBLIC_ARRANGER_GRAPHQL_FIELD: string;
     NEXT_PUBLIC_ARRANGER_INDEX: string;