.babelrc

 {
     "presets":[
-        "react",
-        "flow"
+        "@babel/react",
+        "@babel/flow",
+        "@babel/preset-env"
     ],
     "plugins": [
-        "syntax-dynamic-import",
-        "transform-class-properties"
-    ]
-}
\ No newline at end of file
+        "@babel/syntax-dynamic-import",
+        "react-hot-loader/babel",
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-object-rest-spread"
+    ],
+    "env": {
+        "test": {
+            "presets":[
+                [   "@babel/preset-env",
+                    {
+                        "modules": "commonjs"
+                    }
+                ]
+            ],
+            "plugins": [
+                "@babel/plugin-proposal-class-properties"
+            ]
+        }
+    }
+}

.dockerignore

+cov.html
+data
+data-dev
+node_modules/
+*.Dockerfile

.flake8

+[flake8]
+max-line-length = 120
+exclude = .git, __pycache__, client/, .venv/, node_modules/  # no need to traverse these directories
+extend-ignore = E203,W503
\ No newline at end of file

.gitattributes

+zesje/_static_version.py export-subst
\ No newline at end of file

.gitignore

@@ -58,6 +58,9 @@ typings/
 yarn.lock
 package-lock.json
 
+# Yarn cache
+.yarn/cache
+
 # dotenv environment variables file
 .env
 
@@ -73,9 +76,39 @@ zesje/static/
 # Python temporary files
 __pycache__/
 *.pyc
+*.egg-info
+dist/
+build/
+
+# pytest temporary files
+.pytest_cache/
 
 # vscode folder
 .vscode
 
-# (test)database
-zesje/course.sqlite
+# Fish Virtualenv
+.venv
+
+# development data
+data-dev
+
+# test data
+tests/data/submissions
+
+# redis dump
+dump.rdb
+
+# webpack analyze data
+stats.json
+
+# JetBrains IDE folders
+.idea/
+
+# pytest coverage reports
+.coverage
+cov.xml
+cov.html/
+tests.xml
+
+#test output
+junit.xml

.gitlab-ci.yml

+# This base image can be found in 'test.Dockerfile'
+image: $TEST_IMAGE
+
+stages:
+  - build-env
+  - build
+  - test
+
+variables:
+  TEST_IMAGE: ${CI_REGISTRY_IMAGE}/test
+
+build-image:
+  stage: build-env
+  when: manual
+  image:
+    name: gcr.io/kaniko-project/executor:v1.17.0-debug
+    entrypoint: [""]
+  before_script:
+    - mkdir -p /kaniko/.docker
+    - echo "{\"auths\":{\"$CI_REGISTRY\":{\"username\":\"$CI_REGISTRY_USER\",\"password\":\"$CI_REGISTRY_PASSWORD\"}}}" > /kaniko/.docker/config.json
+  script:
+    - mkdir docker
+    - cp test.Dockerfile docker/
+    - cp environment.yml docker/
+    - cp package.json docker/
+    - /kaniko/executor
+      --context $CI_PROJECT_DIR/docker
+      --dockerfile $CI_PROJECT_DIR/docker/test.Dockerfile
+      --destination $TEST_IMAGE
+      --cache=true
+
+.conda-env: &conda-env
+  before_script:
+    - ln -s /yarn/* ./
+    - if [[ $CI_JOB_NAME != *"py"* ]]; then yarn install; fi
+
+build:
+  <<: *conda-env
+  stage: build
+  script:
+    - python3 -m compileall zesje
+    - yarn build
+  artifacts:
+    paths:
+      - zesje/static
+    expire_in: 1 week
+
+# test_js:
+#   <<: *conda-env
+#   stage: test
+#   script:
+#     - yarn test:js
+#   artifacts:
+#     reports:
+#       junit: junit.xml
+
+lint_js:
+  <<: *conda-env
+  stage: test
+  allow_failure: true
+  script:
+    - yarn lint:js
+
+lint_py:
+  <<: *conda-env
+  stage: test
+  allow_failure: true
+  script:
+    - yarn lint:py
+
+test_py:
+  <<: *conda-env
+  stage: test
+  services:
+    - mysql:8.0
+  variables:
+    MYSQL_DATABASE: "course_test"
+    MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
+  script:
+    - echo -e "\nMYSQL_HOST = 'mysql'\nMYSQL_USER = 'root'\nMYSQL_PASSWORD = None" >> zesje_test_cfg.py
+    - yarn test:py:cov
+  artifacts:
+    paths:
+      - cov.html/
+    reports:
+      coverage_report:
+        coverage_format: cobertura
+        path: cov.xml
+      junit: tests.xml
+    expire_in: 1 week
+
+include:
+  template: Jobs/SAST.gitlab-ci.yml

.mailmap

+Hidde Leistra <hleistra@gmail.com>
+Stefan Hugtenburg <s.hugtenburg@gmail.com>
+Robin Bijl <r.a.bijl@student.tudelft.nl>
+Richard van de Kuilen <richardvdk@live.nl>
+<richardvdk@live.nl> <rvdk>
+Thomas Roos <thomasroos@live.nl>
+Timotei Jugariu <timotei96@gmail.com>

AUTHORS.md

+# Zesje authors
+
+* Anton Akhmerov
+* Joseph Weston
+* Thomas Roos
+* Justin van der Krieken
+* Jamy Mahabier
+* Nick Cleintuar
+* Hugo Kerstens
+* Stefan Hugtenburg
+* Hidde Leistra
+* Pim Otte
+* Luc Enthoven
+* Otto Kaaij
+* Lucas Holten
+* Robin Bijl
+* Ruben Young On
+* Timotei Jugariu
+* Richard van de Kuilen
+
+<!--
+Execute
+git shortlog -s | grep -v "\[bot\]" | sed -e "s/^ *[0-9\t ]*//"| xargs -i sh -c 'grep -q "{}" AUTHORS.md || echo "{}"'
+
+To check if any authors are missing from this list.
+
+If you add any new authors that do not specify a correct name
+in their commits, please add them to the `.mailmap` file.
+
+ -->

Dockerfile

+# A Dockerfile containing the production deployment for Zesje
+
+FROM mambaorg/micromamba:1.5-jammy
+
+USER root
+
+RUN apt-get update && \
+    apt-get install -y libdmtx-dev && \
+    apt-get install -y git supervisor nginx cron
+
+COPY --chown=$MAMBA_USER:$MAMBA_USER environment.yml /tmp/env.yaml
+USER $MAMBA_USER
+RUN micromamba install -y -n base -f /tmp/env.yaml && \
+    micromamba clean --all --yes
+
+ARG MAMBA_DOCKERFILE_ACTIVATE=1
+USER root
+WORKDIR /app
+ADD . .
+RUN yarn install
+RUN yarn build
+
+RUN rm -rf node_modules
+
+ENTRYPOINT ["/usr/local/bin/_entrypoint.sh", "/usr/bin/bash"]

MANIFEST.in

+include LICENSE
+recursive-include zesje/static *

README.md

+[![coverage report](https://gitlab.kwant-project.org/zesje/zesje/badges/master/coverage.svg)](https://gitlab.kwant-project.org/zesje/zesje/commits/master)
+
 # Welcome to Zesje
 
 Zesje is an online grading system for written exams.
 
+## Running Zesje
+
+### Running Zesje using Docker
+Running Zesje using Docker is the easiest method to run Zesje
+yourself with minimal technical knowledge required. For this approach
+we assume that you already have [Docker](https://www.docker.com/)
+installed, cloned the Zesje repository and entered its directory.
+
+First create a volume to store the data:
+
+    docker volume create zesje
+
+Then build the Docker image using the following below. Anytime you
+update Zesje by pulling the repository you have to run this command again.
+
+    docker build -f auto.Dockerfile . -t zesje:auto
+
+Finally, you can run the container to start Zesje using:
+
+    docker run -p 8881:80 --volume zesje:/app/data-dev -it zesje:auto
+
+Zesje should be available at http://127.0.0.1:8881. If you get
+the error `502 - Bad Gateway` it means that Zesje is still starting.
+
 ## Development
 
 ### Setting up a development environment
-Make sure you have `yarn` (installable via your local package manager), and Python 3.5 installed.
+*Zesje currently doesn't support native Windows, but WSL works.*
 
-Install the necessary `yarn` dependencies:
+We recommend using the Conda tool for managing your development
+environment. If you already have Anaconda or Miniconda installed,
+you may skip this step.
+
+Install Miniconda by following the instructions on this page:
+
+https://conda.io/miniconda.html
+
+Make sure you cloned this repository and enter its directory. Then
+create a Conda environment that will automatically install all
+of zesje's Python dependencies:
+
+    conda env create  # Creates an environment from environment.yml
+
+Then, *activate* the conda environment:
+
+    conda activate zesje-dev
+
+You should see `(zesje-dev)` inserted into your shell prompt.
+This tells you that the environment is activated.
+
+Install all of the Javascript dependencies:
 
     yarn install
 
-We will keep the Python dependencies in a virtual environment:
+Unfortunately there is also another dependency that must be installed
+manually for now (we are working to bring this dependency into the
+Conda ecosystem). You can install this dependency in the following way
+on different platforms:
 
-    virtualenv venv
-    source venv/bin/activate
-    pip install -r requirements.txt
-    
-### Adding dependencies
+| OS             | Command                   |
+| -------------- | ------------------------- |
+| macOS          | `brew install libdmtx`    |
+| Debian, Ubuntu | `apt install libdmtx-dev` |
+| Arch           | `pacman -S libdmtx`       |
+| Fedora         | `dnf install libdmtx`     |
+| openSUSE       | `zypper install libdmtx0` |
+
+
+#### Setting up MySQL server
+
+If this is the first time that you will run Zesje with MySQL in
+development, then run the following command from the Zesje
+repository directory:
+
+    yarn dev:mysql-init
+
+That's all it needs to create the MySQL files in the data directory,
+migrate the database to the last schema and move all your previous data.
 
-#### Server-side
-If you start using a new Python library, be sure to add it to `requirements.txt`
 
-#### Client side
-Yarn keeps track of all the client-side dependancies in `config.json` when you install new packages with `yarn add ...`
-    
 ### Running a development server
-run
+Activate your zesje development environment and run
 
-    `yarn start`
+    yarn dev
 
-to start the development server, which you can access on http://127.0.0.1:5000.
+to start the development server, which you can access on http://127.0.0.1:8881.
 It will automatically reload whenever you change any source files in `client/`
 or `zesje/`.
+
+### Running Oauth2 Mock Server
+By default, login is disabled during development but it can be enabled by setting `LOGIN_DISABLED = False` in
+the [development configuration file](./zesje_dev_cfg.py). You can see the set of supported login providers in
+[constants.py](./zesje/constants.py) but take into account that for GitLab and Surf Conext you will need to request
+for a valid `CLIENT_ID` and `CLIENT_SECRET`.
+
+In case you only want to test the flow, you can set the provider to `mock` and start the
+[mock oauth server](./mock_oauth_server.py) in a different terminal from where you
+started the development server by running `yarn dev:oauth`.
+
+### Generate sample data
+
+The script `example_data.py` can be used to create a sample exam that mimics the appearance and behavior of a typical grading process in Zesje. The prototype exam consist on 3 open answer questions per page and 1 multiple choice question per page (excluding the first one). The script partially solves those questions and assigns random feedback to the answered questions while the not answered questions are processed as blank.
+
+The script is called from the command line with the following parameters:
+ - `-d, --delete`  If specified, removes any existing data and creates a new empty database. Otherwise, new exams are added without deleting previous data.
+ - `--exams (int)` the number of exams to add, default is 1.
+ - `--pages (int)` the number of pages per exam, default is 3.
+ - `--students (int)` the number of students per exam, default is 30
+ - `--graders (int)` the number of graders to add, default is 4.
+ - `--solve (float)` between 0 and 100, indicates the percentage of questions to answer (including MCQ), default is 90%.
+ - `--grade (float)` between 0 and 100, indicate the percentage of solved questions to grade (that is, excluding blank answers), default is 60%.
+ - `--skip-processing` if specified, fakes the pdf processing to reduce time. As a drawback, blanks will not be detected.
+ - `--multiple-copies (float)` between 0 and 100, indicates how much of the students submit multiple copies, default is 5%
+
+
+The actual processing of the exam takes a while, specially when the number of students is large.
+
+### Running the tests
+
+You can run the tests by running
+
+    yarn test
+
+#### Viewing test coverage
+
+As a test coverage tool for Python tests, `pytest-cov` is used.
+
+To view test coverage, run
+
+    yarn test:py:cov
+
+A coverage report is now generated in the terminal, as an XML file, and in HTML format.
+The HTML file shows an overview of untested code in red.
+
+##### Viewing coverage in Visual Studio Code
+
+There is a plugin called Coverage Gutter that will highlight which lines of code are covered.
+Simply install Coverage Gutter, after which a watch button appears in the colored box at the bottom of your IDE.
+When you click watch, green and red lines appear next to the line numbers indicating if the code is covered.
+
+Coverage Gutter uses the XML which is produced by `yarn test:py:cov`, called `cov.xml`. This file should be located in the main folder.
+
+##### Viewing coverage in PyCharm
+To view test coverage in PyCharm, run `yarn test:py:cov` to generate the coverage report XML file `cov.xml` if it is not present already.
+
+Next, open up PyCharm and in the top bar go to **Run -> Show Code Coverage Data** (Ctrl + Alt + F6).
+
+Press **+** and add the file `cov.xml` that is in the main project directory.
+A code coverage report should now appear in the side bar on the right.
+
+#### Policy errors
+
+If you encounter PolicyErrors related to ImageMagick in any of the previous steps, please
+try the instructions listed
+[here](https://alexvanderbist.com/posts/2018/fixing-imagick-error-unauthorized) as
+a first resort.
+
+### Database modifications
+
+Zesje uses Flask-Migrate and Alembic for database versioning and migration. Flask-Migrate is an extension that handles SQLAlchemy database migrations for Flask applications using Alembic.
+
+To change something in the database schema, simply add this change to `zesje/database.py`. After that run the following command to prepare a new migration:
+
+    yarn dev:prepare-migration
+
+This uses Flask-Migrate to make a new migration script in `migrations/versions` which needs to be reviewed and edited. Please suffix the name of this file with something distinctive and add a short description at the top of the file. To apply the database migration run:
+
+    yarn dev:mysql-migrate # (for the development database)
+    yarn migrate # (for the production database, MySQL must be running)
+
+### Building and running the production version
+
+### Code style
+
+#### Python
+Adhere to [PEP8](https://www.python.org/dev/peps/pep-0008/), but use a column width of 120 characters (instead of 79).
+
+If you followed the instructions above, the linter `flake8` and the formatter `black` are installed in your virtual environment. If you use Visual Studio Code, install the [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python) extension and add the following lines to your workspace settings:
+
+    "python.linting.pylintEnabled": false,
+    "python.linting.flake8Enabled": true,
+    "[python]": {
+        "editor.rulers": [120],
+        "editor.defaultFormatter": "ms-python.black-formatter",
+        "editor.formatOnSave": true
+    },
+    "black-formatter.args": [
+        "--line-length=120"
+    ]
+
+If you use Atom, install the [linter-flake8](https://atom.io/packages/linter-flake8) plugin and add the following lines to your config:
+
+    ".source.python":
+      "editor":
+        "preferredLineLength": 120
+
+#### Javascript
+Adhere to [StandardJS](https://standardjs.com/).
+
+If you use Visual Studio Code, install the [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) plugin.
+
+If you use Atom, install the [linter-eslint](https://atom.io/packages/linter-eslint) plugin.
+
+### Adding dependencies
+
+#### Server-side
+If you start using a new Python library, be sure to add it to `environment.yml`.
+The packages can be installed and updated in your environment by `conda` using
+
+    conda env update
+
+#### Client-side
+Yarn keeps track of all the client-side dependancies in `package.json` when you install new packages with `yarn add [packageName]`. Yarn will install and update your packages if your run
+
+    yarn install
+
+## License
+Zesje is licensed under AGPLv3, which can be found in `LICENSE`. An summary of this license with it's permissions, conditions and limitations can be found [here](https://choosealicense.com/licenses/agpl-3.0/).

auto.Dockerfile

+# A Dockerfile containing everything to run Zesje automatically
+
+FROM continuumio/miniconda3
+
+RUN apt-get update -y && apt-get install -y libdmtx-dev nginx sudo
+
+RUN echo "server { listen 80; location / { proxy_pass http://127.0.0.1:5000; } }" > /etc/nginx/sites-enabled/proxy.conf
+RUN rm /etc/nginx/sites-enabled/default
+
+RUN groupadd -r zesje && useradd --no-log-init -r -g zesje zesje
+RUN echo 'zesje ALL= NOPASSWD: /usr/sbin/service nginx restart,/bin/chown -R zesje\:zesje /app/data-dev' | sudo EDITOR='tee -a' visudo
+
+WORKDIR /app
+COPY . /app
+
+RUN conda env create -n zesje-dev
+ENV PATH /opt/conda/envs/zesje-dev/bin:$PATH
+
+RUN yarn install
+RUN yarn build
+
+USER zesje
+VOLUME /app/data-dev
+EXPOSE 80
+
+CMD sudo service nginx restart && \
+    sudo chown -R zesje:zesje /app/data-dev && \
+    yarn dev:mysql-init && yarn dev:backend

barcode_example_generator.py

+import sys
+import os
+from io import BytesIO
+
+from reportlab.pdfgen import canvas
+from wand.image import Image
+from wand.color import Color
+
+sys.path.append(os.getcwd())
+
+from zesje.pdf_generation import generate_datamatrix  # noqa: E402
+from zesje.database import token_length  # noqa: E402
+
+
+exam_token = "A" * token_length
+copy_num = 1559
+page_num = 0
+
+fontsize = 12
+datamatrix_x = 0
+datamatrix_y = fontsize
+
+datamatrix = generate_datamatrix(exam_token, page_num, copy_num)
+imagesize = (datamatrix.width, fontsize + datamatrix.height)
+
+result_pdf = BytesIO()
+canv = canvas.Canvas(result_pdf, pagesize=imagesize)
+
+canv.drawInlineImage(datamatrix, datamatrix_x, datamatrix_y)
+
+canv.setFont("Helvetica", fontsize)
+canv.drawString(datamatrix_x, datamatrix_y - (fontsize * 0.66), f" # {copy_num}")
+
+canv.showPage()
+canv.save()
+
+result_pdf.seek(0)
+
+# From https://stackoverflow.com/questions/27826854/python-wand-convert-pdf-to-png-disable-transparent-alpha-channel
+with Image(file=result_pdf, resolution=72) as img:
+    with Image(width=imagesize[0], height=imagesize[1], background=Color("white")) as bg:
+        bg.composite(img, 0, 0)
+        bg.save(filename="client/components/barcode_example.png")

client/App.jsx

+import React from 'react'
+import loadable from '@loadable/component'
+import { hot } from 'react-hot-loader'
+import { BrowserRouter as Router, Route, Routes, Navigate, Outlet, useLocation } from 'react-router-dom'
+
+import './App.scss'
+
+import * as api from './api.jsx'
+
+import NavBar from './components/NavBar.jsx'
+import ExamRouter from './components/ExamRouter.jsx'
+import Footer from './components/Footer.jsx'
+import Loading from './views/Loading.jsx'
+import HelpModal, { HELP_PAGES } from './components/modals/HelpModal.jsx'
+
+const Login = loadable(() => import('./views/Login.jsx'), { fallback: <Loading /> })
+const Home = loadable(() => import('./views/Home.jsx'), { fallback: <Loading /> })
+const AddExam = loadable(() => import('./views/AddExam.jsx'), { fallback: <Loading /> })
+const Graders = loadable(() => import('./views/Graders.jsx'), { fallback: <Loading /> })
+const Fail = loadable(() => import('./views/Fail.jsx'), { fallback: <Loading /> })
+
+const NavBarView = (props) => {
+  const location = useLocation()
+
+  return props.grader == null
+    ? <Navigate to={{ pathname: '/login', search: `from=${location.pathname}` }} state={{ from: location }} replace />
+    : <div>
+      <NavBar
+        logout={props.logout}
+        ref={props.menu}
+        grader={props.grader}
+        examID={props.examID}
+        setHelpPage={props.setHelpPage} />
+      <section className='section'>
+        <div className='container is-fluid'>
+          <Outlet />
+        </div>
+      </section>
+      <HelpModal
+        page={HELP_PAGES[props.helpPage] || { content: null, title: null }}
+        closeHelp={() => props.setHelpPage({ helpPage: null })}
+      />
+      <Footer />
+    </div>
+}
+
+class App extends React.Component {
+  state = {
+    examID: null,
+    /*
+    * The id of the current user. An undefined user means that the App has not check the backend for the registrered
+    * user yet, hence wait for the response before going to the desired url by showing a Home/Welcome screen.
+    * Instead, a null user means that is not logged in, then go to the Home page through the router.
+    */
+    grader: undefined,
+    helpPage: null
+  }
+
+  constructor (props) {
+    super(props)
+    this.menu = React.createRef()
+  }
+
+  componentDidMount = () => {
+    api.get('oauth/status').then(status => {
+      this.setState({
+        grader: status.grader,
+        loginProvider: status.provider
+      })
+    }).catch(err => {
+      if (err.status === 401) {
+        this.setState({
+          grader: null,
+          loginProvider: err.provider
+        })
+      } else {
+        console.log(err)
+      }
+    })
+  }
+
+  selectExam = (id) => this.setState({ examID: parseInt(id) })
+  logout = () => api.get('oauth/logout').then(() => this.setState({ grader: null }))
+  setHelpPage = (helpPage) => this.setState({ helpPage })
+
+  updateExamList = () => {
+    if (this.menu.current) {
+      this.menu.current.updateExamList()
+    }
+  }
+
+  render () {
+    if (this.state.grader === undefined) return <Loading />
+
+    return (
+      <Router>
+        <Routes>
+          <Route path='login' element={
+            <Login provider={this.state.loginProvider} grader={this.state.grader} />
+          } />
+          <Route path='unauthorized' element={
+              <Fail message='Your account is not authorized to access this instance of Zesje.' />
+          }/>
+          <Route path='*' element={<Fail message="404. Could not find that page :'(" />}/>
+          <Route path='/' element={
+            <NavBarView
+              logout={this.logout}
+              menu={this.menu}
+              grader={this.state.grader}
+              examID={this.state.examID}
+              setHelpPage={this.setHelpPage}
+              helpPage={this.state.helpPage} />
+          }>
+            <Route index element={<Home />} />
+            <Route path='exams' element={<Outlet />}>
+              <Route index element={<AddExam updateExamList={this.updateExamList}/>} />
+              <Route path=':examID/*' element={
+                <ExamRouter
+                  selectExam={this.selectExam}
+                  updateExamList={this.updateExamList}
+                  setHelpPage={this.setHelpPage}
+                />}
+              />
+            </Route>
+            <Route path='graders' element={<Graders />} />
+          </Route>
+        </Routes>
+      </Router>
+    )
+  }
+}
+
+export default hot(module)(App)

client/App.scss

+@charset "utf-8";
+
+/* Bulma Switch Control */
+@import "~bulma-switch-control/bulma-switch-control";
+@import 'bulma-popover/bulma-popover';
+
+@import "bulma/bulma";
+
+$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/solid";
+
+@import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';
+
+.dropzone {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border-width: 2px;
+  border-radius: 2px;
+  border-color: $info;
+  border-style: dashed;
+  background-color: #fafafa;
+  color: $info;
+  outline: none;
+  transition: border .24s ease-in-out;
+}
+
+.dropzone:focus {
+  border-color: #2196f3;
+}
+
+.dropzone.disabled {
+  border-color: #eeeeee;
+  color: #bdbdbd;
+  opacity: 0.6;
+}
+
+.tag.is-circular {
+  border-radius: 50%;
+  border-color: $link;
+}
+
+.tag.is-circular.is-danger {
+  border-radius: 50%;
+  border-color: $danger;
+}
+
+.tag.is-squared {
+  border-radius: 2px;
+  border-color: $link;
+}
+
+// close navbar dropdown automatically
+// extracted from: https://github.com/jgthms/bulma/issues/2514#issuecomment-510451361
+@media screen and (min-width: 1025px) {
+    .navbar-item.is-hoverable:hover .navbar-dropdown {
+        display: block !important;
+    }
+    .navbar-item.is-hoverable:focus-within .navbar-dropdown {
+        display: none;
+    }
+}
+
+.has-tooltip-hidden {
+    &:after, &:before {
+		opacity: 0 !important;
+		display: none !important;
+  }
+}
+
+/* Class that manually sets the z-index of sticky objects with a modal as a child.
+   Required since the model will inherit the z-index of sticky parents. */
+.is-sticky.has-modal {
+  z-index: 40;
+}

client/api.js

-// Javascript does not have built-in functionality to do proper typechecking
-// https://stackoverflow.com/questions/7893776/the-most-accurate-way-to-check-js-objects-type
-function _typeof(a) {
-    return Object.prototype.toString.call(a).slice(8, -1)
-}
-
-
-function _fetch(method) {
-    return (endpoint, data) => {
-        var headers = new Headers()
-        if (_typeof(data) == "Object") {
-            headers.append('Content-Type', 'application/json',)
-            data = JSON.stringify(data)
-        }
-
-        return fetch('/api/'+endpoint, {
-            method: method,
-            credentials: 'same-origin',
-            body: data,
-            headers: headers,
-        })
-        .catch(error =>
-            console.error('Error in', method, endpoint, 'with data', data))
-        .then(resp => {
-            if (! resp.ok) {
-                throw resp
-            } else {
-                return resp
-            }
-        })
-        // valid responses always return JSON
-        .then(r => r.json())
-   }
-
-}
-
-const get = _fetch('GET')
-const post = _fetch('POST')
-const put = _fetch('PUT')
-
-export {get, post, put}

client/api.jsx

+// Javascript does not have built-in functionality to do proper typechecking
+// https://stackoverflow.com/questions/7893776/the-most-accurate-way-to-check-js-objects-type
+
+function _typeof (a) {
+  return Object.prototype.toString.call(a).slice(8, -1)
+}
+
+function _fetch (method) {
+  return (endpoint, data) => {
+    const headers = new window.Headers()
+    if (_typeof(data) === 'Object') {
+      headers.append('Content-Type', 'application/json')
+      data = JSON.stringify(data)
+    }
+
+    return window.fetch('/api/' + endpoint, {
+      method,
+      credentials: 'same-origin',
+      body: data,
+      headers
+    })
+      .catch(error => console.error('Error: ', error, ' in', method, endpoint, 'with data', data))
+      .then(resp => {
+        if (!resp.json) throw resp
+
+        return resp.json().then(json => {
+          if (resp.ok) {
+            return json
+          } else {
+            console.error(json)
+            return Promise.reject(json)
+          }
+        })
+      })
+  }
+}
+
+const get = _fetch('GET')
+const post = _fetch('POST')
+const put = _fetch('PUT')
+const patch = _fetch('PATCH')
+const del = _fetch('DELETE')
+
+export { get, post, put, patch, del }

client/components/ColorInput.jsx

+import React from 'react'
+
+class ColorInput extends React.Component {
+  state = {
+    editing: true
+  }
+
+  onStartEditing = () => this.setState({ editing: true })
+  onFinishEditing = () => this.setState({ editing: false })
+
+  inputColor = (value) => {
+    if (this.state.editing) {
+      return ''
+    } else if (value) {
+      return 'is-success'
+    } else {
+      return 'is-danger'
+    }
+  }
+
+  render () {
+    return (
+      <input
+        className={'input ' + this.inputColor(this.props.value)}
+        onFocus={this.onStartEditing}
+        onBlur={this.onFinishEditing}
+        {...this.props}
+      />
+    )
+  }
+}
+
+export default ColorInput

client/components/ExamRouter.jsx

+import React from 'react'
+import { Route, Routes, Outlet } from 'react-router-dom'
+import loadable from '@loadable/component'
+import withRouter from './RouterBinder.jsx'
+
+import * as api from '../api.jsx'
+
+import Loading from '../views/Loading.jsx'
+
+const Exam = loadable(() => import('../views/Exam.jsx'), { fallback: <Loading /> })
+const Scans = loadable(() => import('../views/Scans.jsx'), { fallback: <Loading /> })
+const Students = loadable(() => import('../views/Students.jsx'), { fallback: <Loading /> })
+const Grade = loadable(() => import('../views/Grade.jsx'), { fallback: <Loading /> })
+const Overview = loadable(() => import('../views/Overview.jsx'), { fallback: <Loading /> })
+const Email = loadable(() => import('../views/Email.jsx'), { fallback: <Loading /> })
+const Fail = loadable(() => import('../views/Fail.jsx'), { fallback: <Loading /> })
+
+class ExamRouter extends React.PureComponent {
+  componentDidMount = () => {
+    this.props.selectExam(this.props.router.params.examID)
+  }
+
+  componentDidUpdate = (prevProps, prevState) => {
+    const { examID } = this.props.router.params
+    if (prevProps.router.params.examID !== examID) {
+      // sends the selected exam to the navbar
+      this.props.selectExam(examID)
+    }
+  }
+
+  deleteExam = (examID) => {
+    return api
+      .del('exams/' + examID)
+      .then(() => {
+        this.props.updateExamList()
+        this.props.router.navigate('/', { replace: true })
+      })
+  }
+
+  render = () => {
+    const { examID } = this.props.router.params
+
+    if (!examID || isNaN(examID)) {
+      return <Fail message='Invalid exam' />
+    }
+
+    return (
+      <Routes>
+        <Route
+          path='scans' element={<Scans examID={examID} />}
+        />
+        <Route
+          path='students' element={<Students examID={examID} />}
+        >
+          <Route path=':copyNumber' element={<Outlet />} />
+        </Route>
+        <Route
+          path='grade' element={<Grade examID={examID} />}
+        >
+          <Route path=':submissionID' element={<Outlet />} />
+          <Route path=':submissionID/:problemID' element={<Outlet />} />
+        </Route>
+        <Route
+          path='overview' element={<Overview examID={examID} />}
+        />
+        <Route
+          path='email' element={<Email examID={examID} />}
+        />
+        <Route
+          path='/' element={
+            <Exam
+              examID={examID}
+              updateExamList={this.props.updateExamList}
+              deleteExam={this.deleteExam}
+              setHelpPage={this.props.setHelpPage}
+            />}
+        />
+      </Routes>
+    )
+  }
+}
+
+export default withRouter(ExamRouter)