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.

10 files changed, 0 insertions, 322 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js
deleted file mode 100644
index 33b2612f..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteMachineModal.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeDeleteMachineModal } from '../../actions/modals/topology'
-import { deleteMachine } from '../../actions/topology/machine'
-import ConfirmationModal from '../../components/modals/ConfirmationModal'
-
-const DeleteMachineModal = () => {
-    const dispatch = useDispatch()
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteMachine())
-        }
-        dispatch(closeDeleteMachineModal())
-    }
-    const visible = useSelector((state) => state.modals.deleteMachineModalVisible)
-    return (
-        <ConfirmationModal
-            title="Delete this machine"
-            message="Are you sure you want to delete this machine?"
-            show={visible}
-            callback={callback}
-        />
-    )
-}
-
-export default DeleteMachineModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
deleted file mode 100644
index 93a38642..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteProfileModal.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeDeleteProfileModal } from '../../actions/modals/profile'
-import { deleteCurrentUser } from '../../actions/users'
-import ConfirmationModal from '../../components/modals/ConfirmationModal'
-
-const DeleteProfileModal = () => {
-    const visible = useSelector((state) => state.modals.deleteProfileModalVisible)
-
-    const dispatch = useDispatch()
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteCurrentUser())
-        }
-        dispatch(closeDeleteProfileModal())
-    }
-    return (
-        <ConfirmationModal
-            title="Delete my account"
-            message="Are you sure you want to delete your OpenDC account?"
-            show={visible}
-            callback={callback}
-        />
-    )
-}
-
-export default DeleteProfileModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js
deleted file mode 100644
index ca76fd04..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRackModal.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeDeleteRackModal } from '../../actions/modals/topology'
-import { deleteRack } from '../../actions/topology/rack'
-import ConfirmationModal from '../../components/modals/ConfirmationModal'
-
-const DeleteRackModal = (props) => {
-    const visible = useSelector((state) => state.modals.deleteRackModalVisible)
-    const dispatch = useDispatch()
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRack())
-        }
-        dispatch(closeDeleteRackModal())
-    }
-    return (
-        <ConfirmationModal
-            title="Delete this rack"
-            message="Are you sure you want to delete this rack?"
-            show={visible}
-            callback={callback}
-            {...props}
-        />
-    )
-}
-
-export default DeleteRackModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js b/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js
deleted file mode 100644
index 9a7be6a6..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/DeleteRoomModal.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeDeleteRoomModal } from '../../actions/modals/topology'
-import { deleteRoom } from '../../actions/topology/room'
-import ConfirmationModal from '../../components/modals/ConfirmationModal'
-
-const DeleteRoomModal = (props) => {
-    const visible = useSelector((state) => state.modals.deleteRoomModalVisible)
-
-    const dispatch = useDispatch()
-    const callback = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteRoom())
-        }
-        dispatch(closeDeleteRoomModal())
-    }
-    return (
-        <ConfirmationModal
-            title="Delete this room"
-            message="Are you sure you want to delete this room?"
-            show={visible}
-            callback={callback}
-            {...props}
-        />
-    )
-}
-
-export default DeleteRoomModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js b/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js
deleted file mode 100644
index edb57217..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/EditRackNameModal.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeEditRackNameModal } from '../../actions/modals/topology'
-import { editRackName } from '../../actions/topology/rack'
-import TextInputModal from '../../components/modals/TextInputModal'
-
-const EditRackNameModal = (props) => {
-    const { visible, previousName } = useSelector((state) => {
-        return {
-            visible: state.modals.editRackNameModalVisible,
-            previousName:
-                state.interactionLevel.mode === 'RACK'
-                    ? state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name
-                    : '',
-        }
-    })
-
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRackName(name))
-        }
-        dispatch(closeEditRackNameModal())
-    }
-    return (
-        <TextInputModal
-            title="Edit rack name"
-            label="Rack name"
-            show={visible}
-            initialValue={previousName}
-            callback={callback}
-            {...props}
-        />
-    )
-}
-
-export default EditRackNameModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js b/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js
deleted file mode 100644
index a804c0b0..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/EditRoomNameModal.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeEditRoomNameModal } from '../../actions/modals/topology'
-import { editRoomName } from '../../actions/topology/room'
-import TextInputModal from '../../components/modals/TextInputModal'
-
-const EditRoomNameModal = (props) => {
-    const visible = useSelector((state) => state.modals.editRoomNameModalVisible)
-    const previousName = useSelector((state) =>
-        state.interactionLevel.mode === 'ROOM' ? state.objects.room[state.interactionLevel.roomId].name : ''
-    )
-
-    const dispatch = useDispatch()
-    const callback = (name) => {
-        if (name) {
-            dispatch(editRoomName(name))
-        }
-        dispatch(closeEditRoomNameModal())
-    }
-    return (
-        <TextInputModal
-            title="Edit room name"
-            label="Room name"
-            show={visible}
-            initialValue={previousName}
-            callback={callback}
-            {...props}
-        />
-    )
-}
-export default EditRoomNameModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
deleted file mode 100644
index b364ed4c..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewPortfolioModal.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeNewPortfolioModal } from '../../actions/modals/portfolios'
-import NewPortfolioModalComponent from '../../components/modals/custom-components/NewPortfolioModalComponent'
-import { addPortfolio } from '../../actions/portfolios'
-
-const NewPortfolioModal = (props) => {
-    const show = useSelector((state) => state.modals.newPortfolioModalVisible)
-    const dispatch = useDispatch()
-    const callback = (name, targets) => {
-        if (name) {
-            dispatch(
-                addPortfolio({
-                    name,
-                    targets,
-                })
-            )
-        }
-        dispatch(closeNewPortfolioModal())
-    }
-    return <NewPortfolioModalComponent {...props} callback={callback} show={show} />
-}
-
-export default NewPortfolioModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js
deleted file mode 100644
index e63ba76b..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewProjectModal.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { closeNewProjectModal } from '../../actions/modals/projects'
-import { addProject } from '../../actions/projects'
-import TextInputModal from '../../components/modals/TextInputModal'
-
-const NewProjectModal = (props) => {
-    const visible = useSelector((state) => state.modals.newProjectModalVisible)
-    const dispatch = useDispatch()
-    const callback = (text) => {
-        if (text) {
-            dispatch(addProject(text))
-        }
-        dispatch(closeNewProjectModal())
-    }
-    return <TextInputModal title="New Project" label="Project title" show={visible} callback={callback} {...props} />
-}
-
-export default NewProjectModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
deleted file mode 100644
index b588b4bc..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewScenarioModal.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NewScenarioModalComponent from '../../components/modals/custom-components/NewScenarioModalComponent'
-import { addScenario } from '../../actions/scenarios'
-import { closeNewScenarioModal } from '../../actions/modals/scenarios'
-
-const NewScenarioModal = (props) => {
-    const topologies = useSelector(({ currentProjectId, objects }) => {
-        console.log(currentProjectId, objects)
-
-        if (currentProjectId === '-1' || !objects.project[currentProjectId]) {
-            return []
-        }
-
-        const topologies = objects.project[currentProjectId].topologyIds.map((t) => objects.topology[t])
-
-        if (topologies.filter((t) => !t).length > 0) {
-            return []
-        }
-
-        return topologies
-    })
-    const state = useSelector((state) => {
-        return {
-            show: state.modals.newScenarioModalVisible,
-            currentPortfolioId: state.currentPortfolioId,
-            currentPortfolioScenarioIds:
-                state.currentPortfolioId !== '-1' && state.objects.portfolio[state.currentPortfolioId]
-                    ? state.objects.portfolio[state.currentPortfolioId].scenarioIds
-                    : [],
-            traces: Object.values(state.objects.trace),
-            schedulers: Object.values(state.objects.scheduler),
-        }
-    })
-
-    const dispatch = useDispatch()
-    const callback = (name, portfolioId, trace, topology, operational) => {
-        if (name) {
-            dispatch(
-                addScenario({
-                    portfolioId,
-                    name,
-                    trace,
-                    topology,
-                    operational,
-                })
-            )
-        }
-        dispatch(closeNewScenarioModal())
-    }
-
-    return <NewScenarioModalComponent {...props} {...state} topologies={topologies} callback={callback} />
-}
-
-export default NewScenarioModal
diff --git a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js b/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
deleted file mode 100644
index 2f81706e..00000000
--- a/opendc-web/opendc-web-ui/src/containers/modals/NewTopologyModal.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import NewTopologyModalComponent from '../../components/modals/custom-components/NewTopologyModalComponent'
-import { closeNewTopologyModal } from '../../actions/modals/topology'
-import { addTopology } from '../../actions/topologies'
-
-const NewTopologyModal = () => {
-    const show = useSelector((state) => state.modals.changeTopologyModalVisible)
-    const topologies = useSelector((state) => {
-        let topologies = state.objects.project[state.currentProjectId]
-            ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t])
-            : []
-        if (topologies.filter((t) => !t).length > 0) {
-            topologies = []
-        }
-
-        return topologies
-    })
-
-    const dispatch = useDispatch()
-    const onCreateTopology = (name) => {
-        if (name) {
-            dispatch(addTopology(name, undefined))
-        }
-        dispatch(closeNewTopologyModal())
-    }
-    const onDuplicateTopology = (name, id) => {
-        if (name) {
-            dispatch(addTopology(name, id))
-        }
-        dispatch(closeNewTopologyModal())
-    }
-    const onCancel = () => {
-        dispatch(closeNewTopologyModal())
-    }
-
-    return (
-        <NewTopologyModalComponent
-            show={show}
-            topologies={topologies}
-            onCreateTopology={onCreateTopology}
-            onDuplicateTopology={onDuplicateTopology}
-            onCancel={onCancel}
-        />
-    )
-}
-
-export default NewTopologyModal