From 37b340be5fe7583f1b8881ca70b07125976a1787 Mon Sep 17 00:00:00 2001
From: Weronika Tomaszewska <veratomaszewska@gmail.com>
Date: Sun, 17 Dec 2023 22:06:29 -0500
Subject: [PATCH] feature/CPF-34 hardcode email display, remove scaffold layout

---
 web/src/Routes.tsx                            |  9 ++--
 web/src/components/Navigation/Navigation.tsx  | 17 +++++---
 .../AuthenticatedLayout.tsx                   | 42 +++++++++++++++++--
 .../layouts/ScaffoldLayout/ScaffoldLayout.tsx | 17 --------
 web/src/pages/LoginPage/LoginPage.stories.tsx | 13 ++++++
 web/src/pages/LoginPage/LoginPage.test.tsx    | 14 +++++++
 web/src/pages/LoginPage/LoginPage.tsx         | 23 ++++++++++
 7 files changed, 104 insertions(+), 31 deletions(-)
 delete mode 100644 web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx
 create mode 100644 web/src/pages/LoginPage/LoginPage.stories.tsx
 create mode 100644 web/src/pages/LoginPage/LoginPage.test.tsx
 create mode 100644 web/src/pages/LoginPage/LoginPage.tsx

diff --git a/web/src/Routes.tsx b/web/src/Routes.tsx
index 014c3f8c..8e5a09ee 100644
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@@ -7,9 +7,7 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Set, Router, Route } from '@redwoodjs/router'
-
-// import ScaffoldLayout from 'src/layouts/ScaffoldLayout'
+import { PrivateSet, Router, Route } from '@redwoodjs/router'
 
 import { useAuth } from './auth'
 import AuthenticatedLayout from './layouts/AuthenticatedLayout/AuthenticatedLayout'
@@ -17,7 +15,7 @@ import AuthenticatedLayout from './layouts/AuthenticatedLayout/AuthenticatedLayo
 const Routes = () => {
   return (
     <Router useAuth={useAuth}>
-      <Set wrap={AuthenticatedLayout}>
+      <PrivateSet wrap={AuthenticatedLayout} unauthenticated="login">
         {/* Uploads */}
         <Route path="/" page={UploadUploadsPage} name="uploads" />
         <Route path="/uploads/new" page={UploadNewUploadPage} name="newUpload" />
@@ -36,7 +34,8 @@ const Routes = () => {
         <Route path="/organizations/{id:Int}/edit" page={OrganizationEditOrganizationPage} name="editOrganization" />
         <Route path="/organizations/{id:Int}" page={OrganizationOrganizationPage} name="organization" />
         <Route path="/organizations" page={OrganizationOrganizationsPage} name="organizations" />
-      </Set>
+      </PrivateSet>
+      <Route path="/login" page={LoginPage} name="login" />
       <Route notfound page={NotFoundPage} />
     </Router>
   )
diff --git a/web/src/components/Navigation/Navigation.tsx b/web/src/components/Navigation/Navigation.tsx
index 6f51d32b..aeab9736 100644
--- a/web/src/components/Navigation/Navigation.tsx
+++ b/web/src/components/Navigation/Navigation.tsx
@@ -25,23 +25,30 @@ const Navigation = () => {
           </NavLink>
         </Nav.Item>
         <Nav.Item>
+          <div className="nav-link disabled">Subrecipients</div>
+        </Nav.Item>
+        <Nav.Item>
+          <div className="nav-link disabled">Users</div>
+        </Nav.Item>
+        {/* TODO: Replace disabled tabs with the tabs below when Users and Subrecipients pages are ready */}
+        {/* <Nav.Item>
           <NavLink
-            to={routes.uploads()}
+            to={routes.subrecipients()}
             activeClassName="active"
             className="nav-link"
           >
             Subrecipients
           </NavLink>
-        </Nav.Item>
-        <Nav.Item>
+        </Nav.Item> */}
+        {/* <Nav.Item>
           <NavLink
-            to={routes.uploads()}
+            to={routes.users()}
             activeClassName="active"
             className="nav-link"
           >
             Users
           </NavLink>
-        </Nav.Item>
+        </Nav.Item> */}
         <Nav.Item>
           <NavLink
             to={routes.reportingPeriods()}
diff --git a/web/src/layouts/AuthenticatedLayout/AuthenticatedLayout.tsx b/web/src/layouts/AuthenticatedLayout/AuthenticatedLayout.tsx
index 87715c0f..40d0e9a8 100644
--- a/web/src/layouts/AuthenticatedLayout/AuthenticatedLayout.tsx
+++ b/web/src/layouts/AuthenticatedLayout/AuthenticatedLayout.tsx
@@ -1,3 +1,6 @@
+import Button from 'react-bootstrap/Button'
+import { useAuth } from 'web/src/auth'
+
 import { Link, routes } from '@redwoodjs/router'
 
 import Navigation from 'src/components/Navigation/Navigation'
@@ -7,12 +10,43 @@ type AuthenticatedLayoutProps = {
 }
 
 const AuthenticatedLayout = ({ children }: AuthenticatedLayoutProps) => {
+  const { isAuthenticated, currentUser, logOut } = useAuth()
+
   return (
     <div className="container-fluid" style={{ width: '90%' }}>
-      <nav className="row navbar navbar-light bg-light">
-        <Link to={routes.uploads()} className="navbar-brand">
-          CPF Reporter: USDR
-        </Link>
+      <nav className="row navbar navbar-light bg-light d-flex justify-content-between">
+        <div className="col">
+          <Link to={routes.uploads()} className="navbar-brand">
+            CPF Reporter: USDR
+          </Link>
+        </div>
+        <div className="col d-flex justify-content-end">
+          {/* Replace the code below when authentication is complete */}
+          <div className="navbar-text">email@email.com</div>
+          <Button
+            size="sm"
+            variant="link"
+            className="nav-link navbar-text mx-2"
+            onClick={logOut}
+          >
+            Logout
+          </Button>
+
+          {/* Use the code below for conditional currentUser logic */}
+          {/* {isAuthenticated && (
+            <>
+              <div className="navbar-text">{currentUser.email}</div>
+              <Button
+                size="sm"
+                variant="link"
+                className="nav-link navbar-text mx-2"
+                onClick={logOut}
+              >
+                Logout
+              </Button>
+            </>
+          )} */}
+        </div>
       </nav>
       <Navigation />
 
diff --git a/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx b/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx
deleted file mode 100644
index b27fb869..00000000
--- a/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Container from 'react-bootstrap/Container'
-
-type LayoutProps = {
-  title: string
-  titleTo: string
-  children: React.ReactNode
-}
-
-const ScaffoldLayout = ({ children }: LayoutProps) => {
-  return (
-    <Container fluid>
-      <main>{children}</main>
-    </Container>
-  )
-}
-
-export default ScaffoldLayout
diff --git a/web/src/pages/LoginPage/LoginPage.stories.tsx b/web/src/pages/LoginPage/LoginPage.stories.tsx
new file mode 100644
index 00000000..8557b433
--- /dev/null
+++ b/web/src/pages/LoginPage/LoginPage.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import LoginPage from './LoginPage'
+
+const meta: Meta<typeof LoginPage> = {
+  component: LoginPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof LoginPage>
+
+export const Primary: Story = {}
diff --git a/web/src/pages/LoginPage/LoginPage.test.tsx b/web/src/pages/LoginPage/LoginPage.test.tsx
new file mode 100644
index 00000000..7ac9b837
--- /dev/null
+++ b/web/src/pages/LoginPage/LoginPage.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import LoginPage from './LoginPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('LoginPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<LoginPage />)
+    }).not.toThrow()
+  })
+})
diff --git a/web/src/pages/LoginPage/LoginPage.tsx b/web/src/pages/LoginPage/LoginPage.tsx
new file mode 100644
index 00000000..56312fa8
--- /dev/null
+++ b/web/src/pages/LoginPage/LoginPage.tsx
@@ -0,0 +1,23 @@
+import { useAuth } from 'web/src/auth'
+
+import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
+
+const LoginPage = () => {
+  return (
+    <>
+      <MetaTags title="Login" description="Login page" />
+
+      <h1>LoginPage</h1>
+      <p>
+        Find me in <code>./web/src/pages/LoginPage/LoginPage.tsx</code>
+      </p>
+      <p>
+        My default route is named <code>login</code>, link to me with `
+        <Link to={routes.login()}>Login</Link>`
+      </p>
+    </>
+  )
+}
+
+export default LoginPage