Migrate to Auth0 as Identity Provider

This pull request removes the hard dependency on Google for 
authenticating users and migrates to Auth0 as Identity Provider for OpenDC. 
This has as benefit that we can authenticate users without having to manage 
user data ourselves and do not have a dependency on Google accounts anymore. 

- Frontend cleanup:
   - Use CSS modules everywhere to encapsulate the styling of React components.
   - Perform all communication in the frontend via the REST API (as opposed to WebSockets).
      The original approach was aimed at collaborative editing, but made normal operations 
      harder to implement and debug. If we want to implement collaborative editing in the 
      future, we can expose only a small WebSocket API specifically for collaborative editing.
   - Move to FontAwesome 5 (using the official React libraries)
   - Use Reactstrap where possible. Previously, we mixed raw Bootstrap classes with 
      Reactstrap, which is confusing.
   - Reduce the scope of the Redux state. Some state in the frontend application can be 
      kept locally and does not need to be managed by Redux.
   - Migrate from Create React App (CRA) to Next.js since it allows us to pre-render
      multiple pages as well as opt-in to Server Side Rendering.
   - Remove the Google login and use Auth0 for authentication now.
   - Use Node 16
- Backend cleanup:
   - Remove Socket.IO endpoint from backend, since it is not needed by the frontend 
      anymore. Removing it reduces the attack surface of OpenDC as well as the maintenance efforts.
   - Use Auth0 JWT token for authorizing API accesses
   - Refactor API endpoints to use Flask Restful as opposed to our custom in-house 
      routing logic. Previously, this was needed to support the Socket.IO endpoint, 
      but increases maintenance effort.
   - Expose Swagger UI from API
   - Use Python 3.9 and uwsgi to host Flask application
- Actualize OpenAPI schema and update to version 3.0.

**Breaking API Changes**

* This pull request removes the users collection from the database table. Instead, we now use the user identifier passed by Auth0 to identify the data that belongs to a user.

9 files changed, 91 insertions, 99 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js b/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
deleted file mode 100644
index 664f9b46..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterButton.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const FilterButton = ({ active, children, onClick }) => (
-    <button
-        className={classNames('btn btn-secondary', { active: active })}
-        onClick={() => {
-            if (!active) {
-                onClick()
-            }
-        }}
-    >
-        {children}
-    </button>
-)
-
-FilterButton.propTypes = {
-    active: PropTypes.bool.isRequired,
-    children: PropTypes.node.isRequired,
-    onClick: PropTypes.func.isRequired,
-}
-
-export default FilterButton
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
index 2b9795d0..5129c013 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js
@@ -1,13 +1,28 @@
 import React from 'react'
-import FilterLink from '../../containers/projects/FilterLink'
-import './FilterPanel.sass'
-
-const FilterPanel = () => (
-    <div className="btn-group filter-panel mb-2">
-        <FilterLink filter="SHOW_ALL">All Projects</FilterLink>
-        <FilterLink filter="SHOW_OWN">My Projects</FilterLink>
-        <FilterLink filter="SHOW_SHARED">Shared with me</FilterLink>
-    </div>
+import PropTypes from 'prop-types'
+import { Button, ButtonGroup } from 'reactstrap'
+import { filterPanel } from './FilterPanel.module.scss'
+
+export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' }
+
+const FilterPanel = ({ onSelect, activeFilter = 'SHOW_ALL' }) => (
+    <ButtonGroup className={`${filterPanel} mb-2`}>
+        {Object.keys(FILTERS).map((filter) => (
+            <Button
+                color="secondary"
+                key={filter}
+                onClick={() => activeFilter === filter || onSelect(filter)}
+                active={activeFilter === filter}
+            >
+                {FILTERS[filter]}
+            </Button>
+        ))}
+    </ButtonGroup>
 )
 
+FilterPanel.propTypes = {
+    onSelect: PropTypes.func.isRequired,
+    activeFilter: PropTypes.string,
+}
+
 export default FilterPanel
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
new file mode 100644
index 00000000..79cdf81a
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss
@@ -0,0 +1,7 @@
+.filterPanel {
+    display: flex;
+
+    button {
+        flex: 1 !important;
+    }
+}
diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
deleted file mode 100644
index f71cf6c8..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.sass
+++ /dev/null
@@ -1,5 +0,0 @@
-.filter-panel
-    display: flex
-
-    button
-        flex: 1 !important
diff --git a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js b/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
deleted file mode 100644
index 312671c6..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/NewProjectButtonComponent.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const NewProjectButtonComponent = ({ onClick }) => (
-    <div className="bottom-btn-container">
-        <div className="btn btn-primary float-right" onClick={onClick}>
-            <span className="fa fa-plus mr-2" />
-            New Project
-        </div>
-    </div>
-)
-
-NewProjectButtonComponent.propTypes = {
-    onClick: PropTypes.func.isRequired,
-}
-
-export default NewProjectButtonComponent
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
index 1c76cc7f..0725e42b 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectActionButtons.js
@@ -1,22 +1,31 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
+import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlay, faUsers, faTrash } from '@fortawesome/free-solid-svg-icons'
 
 const ProjectActionButtons = ({ projectId, onViewUsers, onDelete }) => (
     <td className="text-right">
-        <Link to={'/projects/' + projectId} className="btn btn-outline-primary btn-sm mr-2" title="Open this project">
-            <span className="fa fa-play" />
+        <Link href={`/projects/${projectId}`}>
+            <Button color="primary" outline size="sm" className="mr-2" title="Open this project">
+                <FontAwesomeIcon icon={faPlay} />
+            </Button>
         </Link>
-        <div
-            className="btn btn-outline-success btn-sm disabled mr-2"
+        <Button
+            color="success"
+            outline
+            size="sm"
+            disabled
+            className="mr-2"
             title="View and edit collaborators (not supported currently)"
             onClick={() => onViewUsers(projectId)}
         >
-            <span className="fa fa-users" />
-        </div>
-        <div className="btn btn-outline-danger btn-sm" title="Delete this project" onClick={() => onDelete(projectId)}>
-            <span className="fa fa-trash" />
-        </div>
+            <FontAwesomeIcon icon={faUsers} />
+        </Button>
+        <Button color="danger" outline size="sm" title="Delete this project" onClick={() => onDelete(projectId)}>
+            <FontAwesomeIcon icon={faTrash} />
+        </Button>
     </td>
 )
 
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
deleted file mode 100644
index 3f904061..00000000
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthRow.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-import ProjectActions from '../../containers/projects/ProjectActions'
-import Shapes from '../../shapes/index'
-import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
-import { parseAndFormatDateTime } from '../../util/date-time'
-
-const ProjectAuthRow = ({ projectAuth }) => (
-    <tr>
-        <td className="pt-3">{projectAuth.project.name}</td>
-        <td className="pt-3">{parseAndFormatDateTime(projectAuth.project.datetimeLastEdited)}</td>
-        <td className="pt-3">
-            <span className={classNames('fa', 'fa-' + AUTH_ICON_MAP[projectAuth.authorizationLevel], 'mr-2')} />
-            {AUTH_DESCRIPTION_MAP[projectAuth.authorizationLevel]}
-        </td>
-        <ProjectActions projectId={projectAuth.project._id} />
-    </tr>
-)
-
-ProjectAuthRow.propTypes = {
-    projectAuth: Shapes.Authorization.isRequired,
-}
-
-export default ProjectAuthRow
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
index 8eb4f93b..dc3f85ec 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectAuthList.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectList.js
@@ -1,14 +1,16 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import Shapes from '../../shapes/index'
-import ProjectAuthRow from './ProjectAuthRow'
+import { Project } from '../../shapes'
+import ProjectRow from './ProjectRow'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons'
 
-const ProjectAuthList = ({ authorizations }) => {
+const ProjectList = ({ projects }) => {
     return (
         <div className="vertically-expanding-container">
-            {authorizations.length === 0 ? (
+            {projects.length === 0 ? (
                 <div className="alert alert-info">
-                    <span className="info-icon fa fa-question-circle mr-2" />
+                    <FontAwesomeIcon icon={faQuestionCircle} className="info-icon mr-2" />
                     <strong>No projects here yet...</strong> Add some with the 'New Project' button!
                 </div>
             ) : (
@@ -22,8 +24,8 @@ const ProjectAuthList = ({ authorizations }) => {
                         </tr>
                     </thead>
                     <tbody>
-                        {authorizations.map((authorization) => (
-                            <ProjectAuthRow projectAuth={authorization} key={authorization.project._id} />
+                        {projects.map((project) => (
+                            <ProjectRow project={project} key={project._id} />
                         ))}
                     </tbody>
                 </table>
@@ -32,8 +34,8 @@ const ProjectAuthList = ({ authorizations }) => {
     )
 }
 
-ProjectAuthList.propTypes = {
-    authorizations: PropTypes.arrayOf(Shapes.Authorization).isRequired,
+ProjectList.propTypes = {
+    projects: PropTypes.arrayOf(Project).isRequired,
 }
 
-export default ProjectAuthList
+export default ProjectList
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
new file mode 100644
index 00000000..91368de8
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectRow.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import ProjectActions from '../../containers/projects/ProjectActions'
+import { Project } from '../../shapes'
+import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP } from '../../util/authorizations'
+import { parseAndFormatDateTime } from '../../util/date-time'
+import { useAuth } from '../../auth'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+const ProjectRow = ({ project }) => {
+    const { user } = useAuth()
+    const { level } = project.authorizations.find((auth) => auth.userId === user.sub)
+    return (
+        <tr>
+            <td className="pt-3">{project.name}</td>
+            <td className="pt-3">{parseAndFormatDateTime(project.datetimeLastEdited)}</td>
+            <td className="pt-3">
+                <FontAwesomeIcon icon={AUTH_ICON_MAP[level]} className="mr-2" />
+                {AUTH_DESCRIPTION_MAP[level]}
+            </td>
+            <ProjectActions projectId={project._id} />
+        </tr>
+    )
+}
+
+ProjectRow.propTypes = {
+    project: Project.isRequired,
+}
+
+export default ProjectRow