Merge pull request #79 from oslabs-beta/aidanprior/credentialsToBackend

feat: Add credential submission and tracking

Author: SamLarivs

.dockerignore

@@ -6,7 +6,7 @@
 
 **/.classpath
 **/.dockerignore
-# **/.env
+**/.env
 **/.git
 **/.gitignore
 **/.project

client/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 
 import Navbar from './components/Navbar';
@@ -7,28 +7,64 @@ import Home from './pages/Home';
 import EventsDashboard from './pages/EventsDashboard';
 import Login from './pages/Login';
 import SignUp from './pages/SignUp';
+import { UserDetails } from './types';
 
 const App: React.FC = () => {
   const [isDarkMode, setIsDarkMode] = useState(false); // Dark mode state
-  const [user, setUser] = useState<Record<string, string> | null>(null);
+  const [user, setUser] = useState<UserDetails | null>(null);
 
   const toggleDarkMode = () => {
     setIsDarkMode((prev) => !prev);
     document.body.classList.toggle('dark-mode', !isDarkMode); // Toggle class based on state
   };
 
+  function checkLogin(component: ReactNode): ReactNode {
+    return user ? component : <p>You must login to see this page</p>;
+  }
+
+  function checkAWSCreds(component: ReactNode): ReactNode {
+    if (
+      user?.aws_access_key?.length &&
+      user?.aws_region?.length > 0 &&
+      user?.aws_secret_access_key?.length > 0
+    ) {
+      return component;
+    }
+    return (
+      <p>
+        You must enter your AWS credentials in the profile page to see any data
+        here.
+      </p>
+    );
+  }
+
   return (
     <Router>
-      <Navbar toggleDarkMode={toggleDarkMode} isDarkMode={isDarkMode} username={user?.username ?? null} setUser={setUser} />
+      <Navbar
+        toggleDarkMode={toggleDarkMode}
+        isDarkMode={isDarkMode}
+        username={user?.username ?? null}
+        setUser={setUser}
+      />
       <Routes>
         <Route path="/login" element={<Login setUser={setUser} />} />
         <Route path="/signup" element={<SignUp />} />
-        {/* {user !== null && <> */}
-          <Route path="/" element={<Home isDarkMode={isDarkMode} />} />
-        <Route path="/profile" element={<Profile isDarkMode={isDarkMode} user={user} />} />
+
+        <Route
+          path="/"
+          element={checkAWSCreds(checkLogin(<Home isDarkMode={isDarkMode} />))}
+        />
+        <Route
+          path="/profile"
+          element={checkLogin(
+            <Profile isDarkMode={isDarkMode} user={user} setUser={setUser} />
+          )}
+        />
         <Route
           path="/events-dashboard"
-          element={<EventsDashboard isDarkMode={isDarkMode} />}
+          element={checkAWSCreds(
+            checkLogin(<EventsDashboard isDarkMode={isDarkMode} />)
+          )}
         />
         {/* </>} */}
       </Routes>

client/src/components/IpAccessCombined.tsx

@@ -13,11 +13,13 @@ export default function IpAccessCombined({
 
   useEffect(() => {
     fetch('/events?countOn=source_ip&includeLocation=true')
-      .then((response) => response.json())
-      .then((data: (IPLocation & CountedEvent)[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setIpLocCounts(() => data as (IPLocation & CountedEvent)[]);
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
       })
+      .then((data: (IPLocation & CountedEvent)[] | { err: string }) =>
+        setIpLocCounts(() => data as (IPLocation & CountedEvent)[])
+      )
       .catch((error) =>
         console.warn('IpAccessCombined: fetch error: ' + error)
       );

client/src/components/Navbar.tsx

@@ -4,7 +4,12 @@ import { NavbarProps } from '../types';
 import LOGO from '../assets/RAILGUIDE.png';
 //import '../index.scss';
 
-const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode, username, setUser }) => {
+const Navbar: React.FC<NavbarProps> = ({
+  toggleDarkMode,
+  isDarkMode,
+  username,
+  setUser,
+}) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
@@ -16,12 +21,16 @@ const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode, username, s
   const handleLogout = () => {
     console.log('User logged out');
     setUser(null);
+    window.localStorage.removeItem('user');
     navigate('/login');
   };
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
         setDropdownOpen(false);
       }
     };
@@ -44,16 +53,17 @@ const Navbar: React.FC<NavbarProps> = ({ toggleDarkMode, isDarkMode, username, s
         <button onClick={toggleDarkMode} className="nav-button">
           {isDarkMode ? 'LIGHT MODE' : 'DARK MODE'}
         </button>
-        
-          <div
-            className="nav-button"
-            onClick={toggleDropdown}
-            aria-haspopup="true"
-            aria-expanded={dropdownOpen}
-          >
-            {username && typeof username === 'string' ? username.toUpperCase() : "USER"}
-          </div>
-        
+
+        <div
+          className="nav-button"
+          onClick={toggleDropdown}
+          aria-haspopup="true"
+          aria-expanded={dropdownOpen}
+        >
+          {username && typeof username === 'string'
+            ? username.toUpperCase()
+            : 'USER'}
+        </div>
       </div>
       {dropdownOpen && (
         <div className="dropdown" ref={dropdownRef}>

client/src/components/charts/EventSource.tsx

@@ -22,10 +22,12 @@ export default function EventSourceChart() {
   useEffect(() => {
     setLoading(true);
     fetch('/events?countOn=source')
-      .then((response) => response.json())
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
+      })
       .then((data: CountedEvent[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setEvents(data as CountedEvent[]);
+        setEvents(data as CountedEvent[]);
         setLoading(false);
       })
       .catch((error) =>

client/src/components/charts/EventType.tsx

@@ -22,15 +22,17 @@ export default function EventTypeChart() {
   useEffect(() => {
     setLoading(true);
     fetch('/events?countOn=type')
-      .then((response) => response.json())
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
+      })
       .then((data: CountedEvent[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setEvents(
-            (data as CountedEvent[]).map((event) => ({
-              ...event,
-              type: event.type.replace(/([A-Z])/g, ' $1'),
-            }))
-          );
+        setEvents(
+          (data as CountedEvent[]).map((event) => ({
+            ...event,
+            type: event.type.replace(/([A-Z])/g, ' $1'),
+          }))
+        );
         setLoading(false);
       })
       .catch((error) =>
@@ -64,7 +66,12 @@ export default function EventTypeChart() {
           angle={-30}
           textAnchor="end"
         />
-        <Bar dataKey="count" maxBarSize={35} minPointSize={5} style={{ cursor: 'pointer' }}>
+        <Bar
+          dataKey="count"
+          maxBarSize={35}
+          minPointSize={5}
+          style={{ cursor: 'pointer' }}
+        >
           {events.map((data, index) => (
             <Cell
               key={`cell-${index}`}

client/src/components/charts/HeatMap.tsx

@@ -25,11 +25,13 @@ const HeatMap: React.FC = () => {
       .catch((error) => console.error('Error fetching geoJSON:', error));
 
     fetch('/events?countOn=source_ip&includeLocation=true')
-      .then((response) => response.json())
-      .then((data: (IPLocation & CountedEvent)[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setIpData(() => data as (IPLocation & CountedEvent)[]);
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
       })
+      .then((data: (IPLocation & CountedEvent)[] | { err: string }) =>
+        setIpData(() => data as (IPLocation & CountedEvent)[])
+      )
       .catch((error) =>
         console.warn('Could not fetch event ip counts and locations: ', error)
       );

client/src/components/charts/IpAccessOverTime.tsx

@@ -13,10 +13,12 @@ export default function IpAccessOverTimeChart({
   useEffect(() => {
     setLoading(true); // Set loading to true before fetching data
     fetch('/events?countOn=time&groupTimeBy=minute')
-      .then((response) => response.json())
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
+      })
       .then((data: CountedEvent[] | { err: string }) => {
-        if (!Object.prototype.hasOwnProperty.call(Object, 'err'))
-          setIpTimes(() => data as CountedEvent[]);
+        setIpTimes(() => data as CountedEvent[]);
         setLoading(false); // Set loading to true before fetching data
       })
       .catch((error) =>

client/src/components/charts/UserActivity.tsx

@@ -1,22 +1,34 @@
 import React, { useState, useEffect } from 'react';
-import { CartesianGrid, XAxis, YAxis, AreaChart, Area, Tooltip } from 'recharts';
+import {
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  AreaChart,
+  Area,
+  Tooltip,
+} from 'recharts';
 import { SimplifiedEvent } from '../../types';
 
 const UserActivityChart: React.FC = () => {
   const [data, setData] = useState<SimplifiedEvent[]>([]);
 
   useEffect(() => {
     fetch('/events?countOn=time&groupTimeBy=minute')
-      .then((response) => response.json())
-      .then((data: { time: string; count: number }[]) => {
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
+      })
+      .then((data: { time: string; count: number }[]) =>
         setData(
-          data.map((event) => ({
+          (data as { time: string; count: number }[]).map((event) => ({
             localTime: new Date(event.time).toLocaleString(),
             count: event.count,
           }))
-        );
-      })
-      .catch((error) => console.warn('Could not fetch event time counts: ', error));
+        )
+      )
+      .catch((error) =>
+        console.warn('Could not fetch event time counts: ', error)
+      );
   }, []);
 
   // Format for the X-axis to display Mon, Tue, etc.

client/src/pages/EventsDashboard.tsx

@@ -11,13 +11,21 @@ const EventsDashboard: React.FC<EventsDashboardProps> = ({ isDarkMode }) => {
   const [selectedEvent, setSelectedEvent] = useState<TGEvent | null>(null);
   const [events, setEvents] = useState<TGEvent[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     fetch('/events')
-      .then((response) => response.json())
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error(response.status + ': ' + response.statusText);
+      })
       .then((data: TGEvent[]) => setEvents(() => data))
-      .catch((error) => console.warn('Could not fetch events: ', error));
+      .catch((error) => {
+        if (error === '403: Forbidden')
+          setError('Please enter AWS Credentials to view events');
+        else console.warn('Could not fetch events: ', error);
+      });
+
     setLoading(false);
   }, []);