feat: 197 - header and footer components (#216)

* feat: 197 - header and footer components * remove header and footer from login page
bcgov · Mar 13, 2024 · de6b1dd · de6b1dd
1 parent 90a27ca
commit de6b1dd
Show file tree

Hide file tree

Showing 11 changed files with 316 additions and 40 deletions.
diff --git a/django/api/keycloak_authentication.py b/django/api/keycloak_authentication.py
@@ -49,20 +49,6 @@ def authenticate(self, request):
             options=options
         )
 
-        # Get the user from the keycloak server based on the token
-        print(
-            "identity_provider: {identity_provider}, idir_username: {idir_username}, email: {email}, preferred_username: {preferred_username}".format(
-                identity_provider=token_info.get(
-                    "identity_provider", "no identity_provider"
-                ),
-                idir_username=token_info.get("idir_username", "no idir_username"),
-                email=token_info.get("email", "no email"),
-                preferred_username=token_info.get(
-                    "preferred_username", "no preferred_username"
-                ),
-            )
-        )
-
         user_info = keycloak_openid.userinfo(token)
         if user_info.get('user_id') != token_info.get('user_id'):
             raise exceptions.AuthenticationFailed(

diff --git a/react/src/App.js b/react/src/App.js
@@ -12,6 +12,7 @@ import UploadRouter from './uploads/router';
 import DashboardContainer from './dashboard/DashboardContainer';
 import useKeycloak from './app/utilities/useKeycloak'
 import Login from './Login';
+import Layout from './app/components/Layout'
 
 const { ENABLE_KEYCLOAK } = settings;
 
@@ -23,26 +24,21 @@ const App = () => {
     return <Login redirectUri={redirectUri}/>
   }
   return (
-    <div className="App">
-      <header className="App-header">
-        <div className="container">
-          <a href="/">
-            <div className="logo" />
-          </a>
+    <Layout>
+      <div className="App">
+        <div className="App-body">
+          <Router>
+            <Switch>
+              {IcbcDataRouter()}
+              {UploadRouter()}
+              <Route>
+                <DashboardContainer />
+              </Route>
+            </Switch>
+          </Router>
         </div>
-      </header>
-      <div className="App-body">
-        <Router>
-          <Switch>
-            {IcbcDataRouter()}
-            {UploadRouter()}
-            <Route>
-              <DashboardContainer />
-            </Route>
-          </Switch>
-        </Router>
       </div>
-    </div>
+    </Layout>
   );
 };
 

diff --git a/react/src/app/components/Footer.js b/react/src/app/components/Footer.js
@@ -0,0 +1,42 @@
+import React from 'react'
+
+const Footer = () => {
+    return (
+      <footer className="footer">
+        <div className="container">
+          <ul>
+            <li>
+              <a href="https://www.gov.bc.ca">Home</a>
+            </li>
+            <li>
+              <a href="https://www2.gov.bc.ca/gov/content/home/disclaimer">
+                Disclaimer
+              </a>
+            </li>
+            <li>
+              <a href="https://www2.gov.bc.ca/gov/content/home/privacy">
+                Privacy
+              </a>
+            </li>
+            <li>
+              <a href="https://www2.gov.bc.ca/gov/content/home/accessibility">
+                Accessibility
+              </a>
+            </li>
+            <li>
+              <a href="https://www2.gov.bc.ca/gov/content/home/copyright">
+                Copyright
+              </a>
+            </li>
+            <li>
+              <a href="https://www2.gov.bc.ca/gov/content/home/get-help-with-government-services">
+                Contact Us
+              </a>
+            </li>
+          </ul>
+        </div>
+      </footer>
+    );
+  };
+
+  export default Footer;
diff --git a/react/src/app/components/Header.js b/react/src/app/components/Header.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import logo from '../styles/images/BCID_H_rgb_rev.png';
+import Logout from './Logout'
+
+const Header = () => {
+    return (
+      <div className="page-header">
+        <div className='cthub-banner'>
+          <div className="left">
+            <a href="https://www.gov.bc.ca" rel="noopener noreferrer">
+              <img src={logo} alt="Government of B.C." />
+            </a>
+            <a href="/upload" rel="noopener noreferrer">
+              Clean Transportation DataHub
+            </a>
+          </div>
+          <div className="right">
+            <Logout />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+export default Header;
diff --git a/react/src/app/components/Layout.js b/react/src/app/components/Layout.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import Header from './Header'
+import Footer from './Footer'
+
+const Layout = ({ children }) => {
+  return (
+    <div className="layout">
+      <Header />
+        <main className="page-content">{children}</main>
+      <Footer />
+    </div>
+  )
+}
+
+export default Layout
diff --git a/react/src/app/components/Logout.js b/react/src/app/components/Logout.js
@@ -4,14 +4,19 @@ import useKeycloak from '../utilities/useKeycloak'
 const Logout = () => {
   const keycloak = useKeycloak();
   if (keycloak.authenticated) {
+    const kcToken = keycloak.tokenParsed;
     return (
-      <button
-        onClick={() => {
-          keycloak.logout()
-        }}
-      >
-        Log out
-      </button>
+      <div className='logout'>
+        <span>{'Logged in as: ' + kcToken.idir_username + ' |'}</span>
+        <button
+          className='logoutButton'
+          onClick={() => {
+            keycloak.logout()
+          }}
+        >
+          Log out
+        </button>
+      </div>
     )
   }
   return null

diff --git a/react/src/app/styles/App.scss b/react/src/app/styles/App.scss
@@ -96,4 +96,14 @@ h4 {
 .text-button {
   color: #1a5a96 !important;
   text-decoration: underline !important;
-}
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.page-content {
+  flex-grow: 1;
+}
diff --git a/react/src/app/styles/Footer.scss b/react/src/app/styles/Footer.scss
@@ -0,0 +1,66 @@
+footer {
+    position: relative;
+    width: 100%;
+    bottom: 0;
+    background-color: #036;
+    border-top: 2px solid #fcba19;
+    color: #fff;
+    font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif;
+    .container {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      text-align: center;
+      height: 46px;
+    }
+    ul {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin: 0;
+      color: #fff;
+      list-style: none;
+      align-items: center;
+      height: 100%;
+      li a {
+        font-size: 0.813em;
+        font-weight: normal; /* 400 */
+        color: #fff;
+        border-right: 1px solid #4b5e7e;
+        padding-left: 5px;
+        padding-right: 5px;
+        text-decoration: none;
+      }
+      a:hover {
+        color: #fff;
+        text-decoration: underline;
+      }
+      a:focus {
+        outline: 4px solid #3b99fc;
+        outline-offset: 1px;
+      }
+    }
+  }
+  @media (max-width: 600px) {
+    .footer {
+      .container {
+        ul li a {
+          font-size: 0.8rem;
+          line-height: 0.9rem;
+        }
+      }
+    }
+  }
+  @media (max-width: 485px) {
+    .footer {
+      height: 3.5rem;
+      .container {
+        justify-content: space-evenly;
+      }
+    }
+  }
+  @media (max-width: 282px) {
+    .footer {
+      height: 6rem;
+    }
+  }
diff --git a/react/src/app/styles/Header.scss b/react/src/app/styles/Header.scss
@@ -0,0 +1,108 @@
+.cthub-banner {
+    background-color: $banner-blue;
+    display: flex;
+    border-bottom: 3px solid $border-orange;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+
+  .cthub-banner .left,
+  .cthub-banner .right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 1.25rem;
+    a {
+      color: $white;
+      text-decoration: none;
+      font-weight: bold;
+    }
+    img {
+      height: 4.5rem;
+      width: auto;
+    }
+    .logout {
+      color: $white;
+      font-size: 1rem;
+      .logoutButton {
+        cursor: pointer;
+        border: none;
+        background: none;
+        font: inherit;
+        color: inherit;
+      }
+    }
+  }
+
+  .page-header {
+    background-color: $banner-blue;
+    width: 100%;
+    //height: 191px;
+
+    .title {
+      padding-left: 6rem;
+      h1 {
+        color: $white;
+      }
+    }
+  }
+
+  @media (max-width: 992px) {
+    .cthub-banner {
+      font-weight: normal;
+      flex-direction: column;
+      img {
+        margin-left: 1rem;
+        height: 3rem;
+      }
+      .logout {
+        font-size: 0.75rem;
+      }
+    }
+    .page-header {
+      width: 100%;
+      position: relative;
+      margin: 0;
+      height: 180px;
+      .title {
+        margin: 5px 0 0 1rem;
+        padding-left: 0;
+        h1 {
+          font-size: 2rem;
+        }
+      }
+    }
+  }
+  @media (max-width: 688px) {
+    .page-header {
+      .title {
+        h1 {
+          font-size: 1.75rem;
+        }
+      }
+    }
+  }
+  @media (max-width: 380px) {
+    .page-header {
+      a {
+        font-size: 10pt;
+      }
+      .title {
+        h1 {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  @media (max-width: 330px) {
+    .page-header {
+      .title {
+        h1 {
+          font-size: 1.2rem;
+        }
+      }
+    }
+  }
diff --git a/react/src/app/styles/index.scss b/react/src/app/styles/index.scss
@@ -1,6 +1,9 @@
+@import 'variables.scss';
 @import 'App.scss';
 @import 'Login.scss';
 @import 'ReactTable.scss';
 @import 'FileUpload.scss';
 @import 'Roboto.scss';
 @import 'Users.scss';
+@import 'Header.scss';
+@import 'Footer.scss';