Add Landing components to Staging Area (#4402)

* move input components to sub folder

* Add Header/Footer/Logo

* Implement soft landing page

* replace initializing text with loading bar

* whitespace

* Linting

Author: LocalNewsTV

api-rework/client/src/activities/form-viewer/FormViewer.tsx

@@ -1,8 +1,8 @@
-import Fieldset from 'common-components/Fieldset';
-import TextInput from 'common-components/TextInput';
-import TextField from 'common-components/TextField';
+import Fieldset from 'common-components/inputs/Fieldset';
+import TextInput from 'common-components/inputs/TextInput';
+import TextField from 'common-components/inputs/TextField';
 import './formViewer.css';
-import Spacer from 'common-components/Spacer';
+import Spacer from 'common-components/inputs/Spacer';
 import TerrestrialObservation from 'activities/subtypes/TerrestrialObservation';
 import AquaticObservation from 'activities/subtypes/AquaticObservation';
 

api-rework/client/src/activities/subtypes/AquaticObservation.tsx

@@ -1,7 +1,7 @@
-import ChitList from 'common-components/ChitList';
-import Fieldset from 'common-components/Fieldset';
-import Spacer from 'common-components/Spacer';
-import TextInput from 'common-components/TextInput';
+import ChitList from 'common-components/inputs/ChitList';
+import Fieldset from 'common-components/inputs/Fieldset';
+import Spacer from 'common-components/inputs/Spacer';
+import TextInput from 'common-components/inputs/TextInput';
 import { SubtypeData } from 'constants';
 
 const AquaticObservation = ({ subtypeData }: SubtypeData) => {

api-rework/client/src/activities/subtypes/TerrestrialObservation.tsx

@@ -1,5 +1,5 @@
-import Fieldset from 'common-components/Fieldset';
-import TextInput from 'common-components/TextInput';
+import Fieldset from 'common-components/inputs/Fieldset';
+import TextInput from 'common-components/inputs/TextInput';
 import { SubtypeData } from 'constants';
 
 const TerrestrialObservation = ({ subtypeData }: SubtypeData) => {

api-rework/client/src/client.css

@@ -0,0 +1,27 @@
+:root {
+  --header-height: 40px;
+  --footer-height: 35px;
+}
+
+.main {
+  height: auto;
+  overflow-y: auto;
+  margin-top: calc(var(--header-height) + 5px);
+  margin-bottom: calc(var(--footer-height) + 5px);
+  box-sizing: border-box;
+}
+
+.landing {
+  font-size: 18px;
+  text-align: center;
+  font-family: Calibri, sans-serif;
+
+  p:not(:first-child) {
+    margin-top: 0;
+  }
+
+  .logo {
+    height: 45vh;
+    width: 45vh;
+  }
+}

api-rework/client/src/client.tsx

@@ -4,6 +4,11 @@ import { BrowserRouter, Route, Routes } from 'react-router';
 import ActivitiesDetail from 'activities/detail';
 import Keycloak from 'keycloak-js';
 import { produce } from 'immer';
+import Header from 'common-components/header/Header';
+import Footer from 'common-components/footer/Footer';
+import Logo from 'common-components/logo/Logo';
+import './client.css';
+import EndlessLoadingBar from 'common-components/endless-loading-bar/EndlessLoadingBar';
 
 const MIN_FRESHNESS = 60;
 
@@ -142,6 +147,8 @@ const Client: React.FC = () => {
       });
   }, []);
 
+  const handleLogin = () => dispatch({ type: 'do_authentication' });
+  const handleLogout = () => dispatch({ type: 'do_logout' });
   useEffect(() => {
     /* check every 5 seconds to see if we are going to expire */
     const id = setInterval(() => {
@@ -151,14 +158,27 @@ const Client: React.FC = () => {
   }, []);
 
   if (!auth.initialized) {
-    return <p>initializing</p>;
+    return <EndlessLoadingBar />;
   }
 
   if (!auth.authenticated) {
     return (
       <>
-        <p>Please authenticate to proceed</p>
-        <button onClick={() => dispatch({ type: 'do_authentication' })}>Authenticate</button>
+        <Header authenticated={auth.authenticated} handleLogout={handleLogout} handleLogin={handleLogin} />
+        <div className="main">
+          <div className="content landing">
+            <p>
+              Welcome to the staging area for the InvasivesBC Normalization work. In order to proceed, please
+              authenticate using your IDIR
+            </p>
+            <p>
+              If you arrived here searching for the official InvasivesBC application, please head to{' '}
+              <a href="https://invasivesbc.gov.bc.ca/">https://invasivesbc.gov.bc.ca/</a>
+            </p>
+            <Logo className="logo" />
+          </div>
+        </div>
+        <Footer />
       </>
     );
   }
@@ -167,18 +187,20 @@ const Client: React.FC = () => {
       value={{
         state: auth
       }}>
-      <pre>
-        Welcome, {auth.user_details?.given_name} [{keycloakInstance.idTokenParsed?.sub}] [
-        {keycloakInstance.idTokenParsed?.aud}]
-      </pre>
-      <button onClick={() => dispatch({ type: 'do_logout' })}>Logout</button>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<ActivitiesList />} />
-          <Route path="/activities" element={<ActivitiesList />} />
-          <Route path="/activities/:id" element={<ActivitiesDetail />} />
-        </Routes>
-      </BrowserRouter>
+      <Header authenticated={auth.authenticated} handleLogout={handleLogout} handleLogin={handleLogin} />
+      <div className="main">
+        <pre>
+          Welcome, {auth.user_details?.given_name} [{keycloakInstance.idTokenParsed?.sub}] [
+          {keycloakInstance.idTokenParsed?.aud}]
+        </pre>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<ActivitiesList />} />
+            <Route path="/activities" element={<ActivitiesList />} />
+            <Route path="/activities/:id" element={<ActivitiesDetail />} />
+          </Routes>
+        </BrowserRouter>
+      </div>
     </AuthContext>
   );
 };

api-rework/client/src/common-components/endless-loading-bar/EndlessLoadingBar.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import './endlessLoadingBar.css';
+
+const EndlessLoadingBar = () => {
+  const [count, setCount] = useState<number>(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCount((prev) => (prev + 1) % 20);
+    }, 400);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div id="loading-bar-main">
+      <p>Initializing Application</p>
+      <div className="bar">
+        {Array(count)
+          .fill(0)
+          .map(() => (
+            <div className="progress" />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default EndlessLoadingBar;

api-rework/client/src/common-components/endless-loading-bar/endlessLoadingBar.css

@@ -0,0 +1,41 @@
+#loading-bar-main {
+  position: absolute;
+  z-index: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  border: 1pt solid black;
+  color: white;
+  background-color: #036;
+  border-radius: 5px;
+  height: 100px;
+  width: 100%;
+  max-width: 300px;
+  align-items: center;
+
+  p {
+    font-family: Calibri, sans-serif;
+    font-size: 18px;
+  }
+
+  .bar {
+    display: flex;
+    height: 25px;
+    width: 211px;
+    border: 1pt solid white;
+    align-items: center;
+
+    & > * {
+      margin-left: 1px;
+    }
+  }
+
+  .progress {
+    display: flex;
+    height: 18px;
+    width: 10px;
+    background-color: #fcba19;
+  }
+}

api-rework/client/src/common-components/footer/Footer.tsx

@@ -0,0 +1,26 @@
+import sunriseLogo from './bcGovSunriseLogo.png';
+import './footer.css';
+
+const INFORMATIONAL_LINKS = [
+  { label: 'Copyright', url: 'https://www2.gov.bc.ca/gov/content/home/copyright ' },
+  { label: 'Disclaimer', url: 'https://www2.gov.bc.ca/gov/content/home/disclaimer ' },
+  { label: 'Privacy Statement', url: 'https://www2.gov.bc.ca/gov/content/home/privacy' },
+  { label: 'Accessibility', url: 'https://www2.gov.bc.ca/gov/content/home/accessible-government' }
+];
+
+const Footer = () => {
+  return (
+    <footer className="FooterBar">
+      <img alt="bcLogo" src={sunriseLogo} />
+      <nav>
+        {INFORMATIONAL_LINKS.map((link) => (
+          <a className={'footerLinks'} key={link.label} href={link.url} target="_blank" rel="noopener noreferrer">
+            {link.label}
+          </a>
+        ))}
+      </nav>
+    </footer>
+  );
+};
+
+export default Footer;

api-rework/client/src/common-components/footer/bcGovSunriseLogo.png

@@ -0,0 +1,31 @@
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  background-color: #036;
+  height: var(--footer-height);
+  align-items: center;
+  justify-content: flex-start;
+
+  nav {
+    display: flex;
+    width: 100%;
+    max-width: 1100px;
+    margin: 1rem;
+    justify-content: space-between;
+  }
+
+  img {
+    height: 33px;
+  }
+
+  a {
+    margin: 0 0.25rem;
+    color: white;
+    text-decoration: none;
+    font-family: Calibri, sans-serif;
+  }
+}