desktop login menu static data

mongodb · Sep 19, 2023 · 31b120b · 31b120b
1 parent 26f6a6e
commit 31b120b
Show file tree

Hide file tree

Showing 6 changed files with 480 additions and 42 deletions.
diff --git a/api/auth/[...nextauth].ts b/api/auth/[...nextauth].ts
@@ -0,0 +1,18 @@
+import NextAuth from 'next-auth';
+import Providers from 'next-auth/providers';
+
+const options = {
+  // Configure one or more authentication providers
+  providers: [
+    Providers.Okta({
+      clientId: process.env.OKTA_CLIENTID,
+      clientSecret: process.env.OKTA_CLIENTSECRET,
+      domain: process.env.OKTA_DOMAIN,
+    }),
+    // ...add more providers here
+  ],
+};
+
+const handler = (req, res) => NextAuth(req, res, options);
+
+export { handler as GET, handler as POST };
diff --git a/components/DesktopSignIn/DesktopSignIn.tsx b/components/DesktopSignIn/DesktopSignIn.tsx
@@ -0,0 +1,105 @@
+import styled from '@emotion/styled';
+import { signIn, useSession } from 'next-auth/client';
+
+import Button from '@leafygreen-ui/button';
+import Icon from '@leafygreen-ui/icon';
+import {
+  FocusableMenuItem,
+  Menu as LGMenu,
+  MenuItem,
+} from '@leafygreen-ui/menu';
+import { palette } from '@leafygreen-ui/palette';
+import { spacing } from '@leafygreen-ui/tokens';
+import { Body, Description } from '@leafygreen-ui/typography';
+
+const Container = styled('div')`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: ${spacing[4]}px;
+  z-index: 1;
+  // todo: remove
+  gap: 8px;
+`;
+
+const Menu = styled(LGMenu)`
+  padding: 0;
+  width: unset;
+  background-color: ${palette.gray.dark3};
+`;
+
+const UserMenuTrigger = styled(Button)``;
+
+const UserInfoContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  gap: ${spacing[4]}px;
+  padding: ${spacing[4]}px;
+`;
+
+const Avatar = styled('div')`
+  border-radius: 50%;
+  min-width: 36px;
+  min-height: 36px;
+  background-color: ${palette.gray.base};
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: capitalize;
+`;
+
+const LogOutMenuItem = styled(MenuItem)`
+  padding: 20px;
+`;
+
+const DesktopSignIn = () => {
+  const [session, loading] = useSession();
+
+  // todo: replace with real values
+  const user = {
+    firstName: 'Sean',
+    lastName: 'Park',
+    email: 's.park@mongodb.com',
+  };
+
+  return (
+    <Container>
+      <Button
+        variant="primaryOutline"
+        leftGlyph={<Icon glyph="LogIn" />}
+        onClick={signIn}
+      >
+        Log in
+      </Button>
+      <Menu
+        trigger={
+          <UserMenuTrigger rightGlyph={<Icon glyph="CaretDown" />}>
+            {user.firstName}
+          </UserMenuTrigger>
+        }
+      >
+        <FocusableMenuItem>
+          <UserInfoContainer>
+            <Avatar>{user.firstName[0]}</Avatar>
+            <div>
+              <Body darkMode>
+                {user.firstName} {user.lastName}
+              </Body>
+              <Description darkMode>{user.email}</Description>
+            </div>
+          </UserInfoContainer>
+        </FocusableMenuItem>
+        <LogOutMenuItem glyph={<Icon glyph="LogOut" />}>Log out</LogOutMenuItem>
+      </Menu>
+      {/* TODO: replace the above with this logic */}
+      {/* {session
+      ? <Menu trigger={<UserMenuTrigger rightGlyph={<Icon glyph="CaretDown" />}>{userName} </UserMenuTrigger>} />
+      : <Button variant="primaryOutline" leftGlyph={<Icon glyph="LogIn" />} onClick={signIn}>Log in</Button>
+    } */}
+    </Container>
+  );
+};
+
+export default DesktopSignIn;
diff --git a/layouts/BaseLayout.tsx b/layouts/BaseLayout.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { mq } from 'utils/mediaQuery';
 
+import SignIn from 'components/DesktopSignIn/DesktopSignIn';
 import { LayoutContext } from 'components/LayoutContext';
 import Navigation from 'components/navigation';
 
@@ -84,9 +85,11 @@ function BaseLayout({ children }: { children: React.ReactNode }) {
         <LayoutContext.Provider value={bodyContainerRef}>
           <div className={containerStyle}>
             <Navigation />
-
             <div className={layout} ref={setBodyContainerRef}>
-              <div className={childrenWrapper}>{children}</div>
+              <div className={childrenWrapper}>
+                <SignIn />
+                {children}
+              </div>
 
               <Footer />
             </div>

diff --git a/package.json b/package.json
@@ -107,6 +107,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "gray-matter": "4.0.3",
     "next": "^12.3.1",
+    "next-auth": "3.29.0",
     "pascalcase": "^2.0.0",
     "polished": "^4.1.3",
     "prettier": "^2.7.1",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -3,15 +3,14 @@ import { Global } from '@emotion/react';
 import { AppContextProvider } from 'contexts/AppContext';
 import BaseLayout from 'layouts/BaseLayout';
 import { NextPage } from 'next';
-import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { Provider as AuthProvider } from 'next-auth/client';
 import { globalStyles } from 'styles/globals';
 import {
   getComponents,
   getContentPageGroups,
 } from 'utils/ContentStack/getContentstackResources';
-import { ContentPageGroup } from 'utils/ContentStack/types';
 import getFullPageTitle from 'utils/getFullPageTitle';
 import * as ga from 'utils/googleAnalytics';
 
@@ -20,19 +19,7 @@ import ErrorBoundary from 'components/ErrorBoundary';
 export type NextPageWithLayout = NextPage & {
   getLayout?: (page: ReactElement) => ReactNode;
 };
-
-type AppPropsWithLayout = AppProps & {
-  Component: NextPageWithLayout;
-  components: any;
-  contentPageGroups: Array<ContentPageGroup>;
-};
-
-function MyApp({
-  Component,
-  pageProps,
-  components,
-  contentPageGroups,
-}: AppPropsWithLayout) {
+function MyApp({ Component, pageProps, components, contentPageGroups }) {
   const getLayout = Component.getLayout ?? (page => page);
   const router = useRouter();
 
@@ -52,22 +39,27 @@ function MyApp({
   }, [router.events]);
 
   return (
-    <AppContextProvider
-      components={components}
-      contentPageGroups={contentPageGroups}
-    >
-      <Head>
-        <title>{getFullPageTitle('Home')}</title>
-        <meta property="og:title" content={getFullPageTitle('Home')} />
+    <AuthProvider session={pageProps.session}>
+      <AppContextProvider
+        components={components}
+        contentPageGroups={contentPageGroups}
+      >
+        <Head>
+          <title>{getFullPageTitle('Home')}</title>
+          <meta property="og:title" content={getFullPageTitle('Home')} />
 
-        {/* Viewport meta tags should be in _app.tsx, not _document.tsx: https://nextjs.org/docs/messages/no-document-viewport-meta */}
-        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-      </Head>
-      <ErrorBoundary>
-        <Global styles={globalStyles} />
-        <BaseLayout>{getLayout(<Component {...pageProps} />)}</BaseLayout>
-      </ErrorBoundary>
-    </AppContextProvider>
+          {/* Viewport meta tags should be in _app.tsx, not _document.tsx: https://nextjs.org/docs/messages/no-document-viewport-meta */}
+          <meta
+            name="viewport"
+            content="initial-scale=1.0, width=device-width"
+          />
+        </Head>
+        <ErrorBoundary>
+          <Global styles={globalStyles} />
+          <BaseLayout>{getLayout(<Component {...pageProps} />)}</BaseLayout>
+        </ErrorBoundary>
+      </AppContextProvider>
+    </AuthProvider>
   );
 }