Started fleshing out UI...

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/package-lock.json

@@ -25,10 +25,11 @@
         "moment-timezone": "^0.5.34",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-gravatar": "^2.6.3",
         "react-moment": "^1.1.1",
         "react-movable": "^3.0.4",
         "react-moveable": "^0.31.1",
-        "react-router-dom": "^6.2.1",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.0",
         "socket.io-client": "^4.4.1",
         "typeface-roboto": "^1.1.13",
@@ -5737,6 +5738,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -6113,6 +6122,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/crypto-random-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
@@ -9147,6 +9164,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
     "node_modules/is-callable": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
@@ -9322,6 +9344,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-retina": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-retina/-/is-retina-1.0.3.tgz",
+      "integrity": "sha1-10AbKGvqKuN/Ykd1iN5QTQuGR+M="
+    },
     "node_modules/is-root": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
@@ -11714,6 +11741,16 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "dependencies": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -13832,6 +13869,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/query-string": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "dependencies": {
+        "object-assign": "^4.1.0",
+        "strict-uri-encode": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -14091,6 +14140,19 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "node_modules/react-gravatar": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-gravatar/-/react-gravatar-2.6.3.tgz",
+      "integrity": "sha1-VAfrash+gw4qNN63YNKkxATrHaw=",
+      "dependencies": {
+        "is-retina": "^1.0.3",
+        "md5": "^2.1.0",
+        "query-string": "^4.2.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15152,6 +15214,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/strict-uri-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -21046,6 +21116,11 @@
       "resolved": "https://registry.npmjs.org/charcodes/-/charcodes-0.2.0.tgz",
       "integrity": "sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ=="
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -21335,6 +21410,11 @@
         "which": "^2.0.1"
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+    },
     "crypto-random-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
@@ -23534,6 +23614,11 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
     "is-callable": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
@@ -23640,6 +23725,11 @@
       "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
       "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk="
     },
+    "is-retina": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-retina/-/is-retina-1.0.3.tgz",
+      "integrity": "sha1-10AbKGvqKuN/Ykd1iN5QTQuGR+M="
+    },
     "is-root": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
@@ -25402,6 +25492,16 @@
         "tmpl": "1.0.5"
       }
     },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -26795,6 +26895,15 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
       "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw=="
     },
+    "query-string": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "requires": {
+        "object-assign": "^4.1.0",
+        "strict-uri-encode": "^1.0.0"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -26984,6 +27093,16 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
       "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
     },
+    "react-gravatar": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-gravatar/-/react-gravatar-2.6.3.tgz",
+      "integrity": "sha1-VAfrash+gw4qNN63YNKkxATrHaw=",
+      "requires": {
+        "is-retina": "^1.0.3",
+        "md5": "^2.1.0",
+        "query-string": "^4.2.2"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -27783,6 +27902,11 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
+    "strict-uri-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
+    },
     "string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",

client/package.json

@@ -21,10 +21,11 @@
     "moment-timezone": "^0.5.34",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-gravatar": "^2.6.3",
     "react-moment": "^1.1.1",
     "react-movable": "^3.0.4",
     "react-moveable": "^0.31.1",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "socket.io-client": "^4.4.1",
     "typeface-roboto": "^1.1.13",

client/src/App.css

@@ -36,3 +36,11 @@
     transform: rotate(360deg);
   }
 }
+
+.App .Content > .MuiPaper-root {
+  display: flex;
+  margin-top: 1rem;
+  padding: 0.5rem;
+  justify-content: stretch;
+  align-self: stretch;
+}

client/src/App.js

@@ -1,13 +1,40 @@
 import logo from './logo.svg';
+import React, { useState } from "react";
+import {
+  BrowserRouter,
+  Routes,
+  Route,
+} from "react-router-dom";
+
 import './App.css';
 import './fonts/index.css';
 import { GoodTimesBar } from "./GoodTimesBar.js";
+import { GlobalContext } from "./GlobalContext.js";
+import Container from '@mui/material/Container';
+import Paper from '@mui/material/Paper';
+import SignIn from "./SignIn.js";
+import SignUp from "./SignUp.js";
 
 function App() {
+  const [ user, setUser ] = useState(null);
+
   return (
     <div className="App">
+      <GlobalContext.Provider value={{user, setUser}}>
         <GoodTimesBar />
-      <div>Coming soon...</div>
+        <Container className="Content">
+          <Routes>
+            <Route path="/signin" element={<SignIn />}/>
+            <Route path="/signup" element={<SignUp />}/>
+            <Route path="/password" element={
+              <Paper>Not implemented... yet.</Paper>
+            }/>
+            <Route path="/" element={
+              <Paper>Coming soon...</Paper>
+            }/>
+          </Routes>
+        </Container>
+      </GlobalContext.Provider>
     </div>
   );
 }

client/src/GoodTimesBar.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -7,14 +7,43 @@ import Typography from '@mui/material/Typography';
 import Menu from '@mui/material/Menu';
 import MenuIcon from '@mui/icons-material/Menu';
 import Container from '@mui/material/Container';
-import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
+import { Link } from 'react-router-dom';
+import {
+  useParams,
+  useNavigate,
+  useLocation,
+} from "react-router-dom";
 
-const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
+import Gravatar from 'react-gravatar'
+
+import { GlobalContext } from "./GlobalContext.js";
 
 const GoodTimesBar = () => {
+  const { user } = useContext(GlobalContext);
+  const [ settings, setSettings ] = useState([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (user) {
+      setSettings(['Profile', 'Account', 'Dashboard', 'Logout']
+      .map((setting) => (
+        <MenuItem key={setting} onClick={handleCloseUserMenu}>
+          <Typography textAlign="center">{setting}</Typography>
+        </MenuItem>
+      )));
+    } else {
+      setSettings(['Login']
+        .map((setting) => (
+          <MenuItem key={setting} onClick={handleCloseUserMenu}>
+            <Typography textAlign="center">{setting}</Typography>
+          </MenuItem>
+        )));
+    }
+  }, [user, setSettings]);
+
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
@@ -83,15 +112,24 @@ const GoodTimesBar = () => {
             component="div"
             sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
           >
-            LOGO
+            GOODTIMES
           </Typography>
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
           </Box>
 
           <Box sx={{ flexGrow: 0 }}>
+            { !user && <>
+              <Tooltip title="Login">
+                <Button onClick={() => navigate("/signin")} color="inherit">
+                Login
+                </Button>
+              </Tooltip>
+            </>
+            }
+            { user && <>
               <Tooltip title="Open settings">
                 <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
+                  <Gravatar alt={user.name} md5={user.md5}/>
                 </IconButton>
               </Tooltip>
               <Menu
@@ -110,12 +148,9 @@ const GoodTimesBar = () => {
                 open={Boolean(anchorElUser)}
                 onClose={handleCloseUserMenu}
               >
-              {settings.map((setting) => (
+                {settings}
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">{setting}</Typography>
-                </MenuItem>
-              ))}
               </Menu>
+            </>}
           </Box>
         </Toolbar>
       </Container>

client/src/index.js

@@ -3,15 +3,18 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.render(
+  <BrowserRouter>
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
+  </BrowserRouter>,
   document.getElementById('root')
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals(console.log);