From a17b76ac75f506f5da6fe8adf9c36632b60d4226 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 26 Sep 2020 14:56:02 +0200
Subject: refactor to use app-rooted js imports

---
 frontend/app/common/app.css                        | 428 +++++++++++++++++++++
 .../app/common/copyToClipboardButton.component.js  |  24 ++
 frontend/app/common/fonts.css                      |  55 +++
 frontend/app/common/form.component.js              | 220 +++++++++++
 frontend/app/common/form.css                       | 323 ++++++++++++++++
 frontend/app/common/header.component.js            |  41 ++
 frontend/app/common/imageCrop.component.js         |  41 ++
 frontend/app/common/index.js                       |  32 ++
 frontend/app/common/loader.component.js            |  16 +
 frontend/app/common/loader.css                     | 125 ++++++
 frontend/app/common/menubutton.component.js        | 128 ++++++
 frontend/app/common/miscellaneous.component.js     |  71 ++++
 frontend/app/common/miscellaneous.css              |  18 +
 frontend/app/common/modal.component.js             |   9 +
 frontend/app/common/modal.css                      |  20 +
 frontend/app/common/slider.component.js            | 120 ++++++
 frontend/app/common/table.component.js             | 128 ++++++
 frontend/app/common/table.css                      |  96 +++++
 frontend/app/common/tableIndex.component.js        | 129 +++++++
 frontend/app/common/upload.css                     |  26 ++
 frontend/app/common/upload.helpers.js              | 174 +++++++++
 frontend/app/common/uploadImage.component.js       |  74 ++++
 22 files changed, 2298 insertions(+)
 create mode 100644 frontend/app/common/app.css
 create mode 100644 frontend/app/common/copyToClipboardButton.component.js
 create mode 100644 frontend/app/common/fonts.css
 create mode 100644 frontend/app/common/form.component.js
 create mode 100644 frontend/app/common/form.css
 create mode 100644 frontend/app/common/header.component.js
 create mode 100644 frontend/app/common/imageCrop.component.js
 create mode 100644 frontend/app/common/index.js
 create mode 100644 frontend/app/common/loader.component.js
 create mode 100644 frontend/app/common/loader.css
 create mode 100644 frontend/app/common/menubutton.component.js
 create mode 100644 frontend/app/common/miscellaneous.component.js
 create mode 100644 frontend/app/common/miscellaneous.css
 create mode 100644 frontend/app/common/modal.component.js
 create mode 100644 frontend/app/common/modal.css
 create mode 100644 frontend/app/common/slider.component.js
 create mode 100644 frontend/app/common/table.component.js
 create mode 100644 frontend/app/common/table.css
 create mode 100644 frontend/app/common/tableIndex.component.js
 create mode 100644 frontend/app/common/upload.css
 create mode 100644 frontend/app/common/upload.helpers.js
 create mode 100644 frontend/app/common/uploadImage.component.js

(limited to 'frontend/app/common')

diff --git a/frontend/app/common/app.css b/frontend/app/common/app.css
new file mode 100644
index 0000000..d9f9946
--- /dev/null
+++ b/frontend/app/common/app.css
@@ -0,0 +1,428 @@
+* { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+body {
+  background: #000;
+  color: #ddd;
+  overflow: hidden;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  height: 100%;
+  width: 100%;
+}
+.gray {
+  color: #888;
+}
+
+/* layout */
+
+.container {
+  height: 100%;
+  width: 100%;
+}
+.app {
+  /*display: flex;*/
+  height: 100%;
+  width: 100%;
+}
+.app > div {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.app .body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.row > div {
+  margin-right: 1.5rem;
+}
+.row > div:last-child {
+  margin-right: 0;
+}
+
+
+.row.menubar {
+  justify-content: flex-end;
+}
+.menubar > :first-child {
+  flex: 1;
+}
+
+/* lists */
+
+ul {
+  margin: 0.75rem 0;
+}
+li {
+  line-height: 1.5;
+}
+
+/* header */
+
+header {
+  height: 3.125rem;
+  font-size: 0.875rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(16,32,64,0.5);
+  color: white;
+  z-index: 50;
+}
+header b {
+  font-weight: 900;
+}
+header a {
+  color: rgba(255,255,255,0.95);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+header > div:first-child {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 1.5rem;
+}
+header > div:last-child {
+  padding-right: 1.5rem;
+}
+header > div > button {
+  padding: 0.25rem;
+  margin: 0 0 0 0.5rem;
+  background: #000;
+  border-color: #888;
+  color: #888;
+}
+header > div > button:hover {
+  border-color: #fff;
+  color: #fff;
+}
+header .vcat-btn {
+  font-size: 0.875rem;
+  padding-left: 0.5rem;
+  letter-spacing: 0.0625rem;
+}
+header > div:last-child a {
+  padding: 0.5rem;
+}
+header .btn-link:focus,
+header .btn-link:hover,
+header .btn-link:active,
+header a:focus,
+header a:hover,
+header a:active {
+  text-decoration: none;
+  color: white;
+}
+header a:focus,
+header a:hover,
+header a:active {
+  color: white;
+}
+.menuToggle {
+  width: 1.625rem;
+  height: 1.625rem;
+  cursor: pointer;
+  line-height: 1;
+}
+header a.navbar-brand {
+  font-size: .8rem;
+}
+
+header .username {
+  cursor: pointer;
+}
+
+/* headings */
+
+h1 {
+  color: #eee;
+  margin-bottom: 1.25rem;
+  font-size: 1.5rem;
+  font-weight: normal;
+}
+div:first-child > h1:first-child,
+.menuButtons + div > h1:first-child {
+  margin-top: 0;
+}
+h2 {
+  color: #eee;
+  font-size: 1.25rem;
+  font-weight: normal;
+}
+h3 {
+  color: #eee;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  font-size: 1.0rem;
+  font-weight: normal;
+}
+p {
+  margin: 1.25rem 0;
+  line-height: 1.5;
+}
+.byline {
+  color: #888;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  margin-bottom: 1.25rem;
+}
+
+/* links */
+
+b {
+  color: #fff;
+}
+a {
+  text-decoration: underline;
+  color: #8df;
+}
+
+/* menu button */
+
+.menuButtons {
+  width: 2.5rem;
+  min-height: 18rem;
+}
+.menuButton {
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 0.625rem;
+  color: #333;
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 2.5rem;
+  margin-bottom: 0.75rem;
+}
+.menuButton .icon {
+  background-color: #fff;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid;
+  border-color: #888;
+  margin-bottom: 0.3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: border-color 0.1s;
+  border-radius: 0.125rem;
+}
+.menuButton svg {
+  width: 80%;
+  fill: #888;
+}
+.menuButton:hover .icon {
+  background-color: #eef;
+  border-color: #000;
+}
+.menuButton:hover svg {
+  fill: #000;
+}
+
+.menuButton.small {
+  width: 2.0rem;
+  margin-bottom: 0;
+  margin-right: 0.1875rem;
+}
+.menuButton.small .icon {
+  border: 0;
+  border-color: #888;
+  margin-bottom: 0;
+  width: 2.0rem;
+  height: 2.0rem;
+  border-radius: 0.0625rem;
+}
+.menuButton.small svg {
+  fill: #888;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.menuButton.small .icon:hover {
+  border-color: #11f;
+  background-color: #11f;
+}
+.menuButton.small:hover svg {
+  fill: #fff;
+}
+.results.th .menuButton.small {
+  width: 1.5rem;
+}
+.results.th .menuButton.small .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.results.th .menuButton.small svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.menuButton.small.active .icon {
+  border-color: #11f;
+  background-color: #11f;
+}
+.menuButton.small.active svg {
+  fill: #fff;
+}
+.menuButton.small.active:hover .icon {
+  border-color: #fff;
+  background-color: #11f;
+}
+.menuButton.small.active:hover svg {
+  fill: #fff;
+}
+
+/* rows - like a table */
+
+.rows {
+  width: 100%;
+}
+.rows .row {
+  width: 100%;
+}
+.rows .row:nth-of-type(2n+1) {
+  background: #f8f8f8;
+}
+.rows .row:nth-of-type(2n+2) {
+  background: #eeeeee;
+}
+.rows .row:hover {
+  background: #d8d8d8;
+}
+.rows .row > div,
+.rows .row a > div {
+  padding: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+.rows .row div.title {
+  width: 10rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rows .row div.string,
+.rows .row div.str {
+  min-width: 6rem;
+}
+.rows .row div.bool {
+  width: 4rem;
+  overflow: visible;
+  text-align: center;
+}
+.rows .row div.color {
+  width: 4rem;
+  overflow: visible;
+  text-align: center;
+}
+.rows .row div.date {
+  min-width: 10rem;
+}
+.rows .row div.int,
+.rows .row div.float {
+  text-align: right;
+  min-width: 6rem;
+}
+.rows .row.heading div.int,
+.rows .row.heading div.float {
+  text-align: center;
+}
+.rows .row div.text {
+  flex: 1;
+  max-width: 20rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rows .row.heading div {
+  text-transform: capitalize;
+  font-weight: bold;
+  background: #f8f8f8;
+}
+.rows .row.heading:hover {
+  background: #f8f8f8;
+}
+
+/* misc ui */
+
+pre, code, .license {
+  font-family: Menlo, monospace;
+  font-size: 0.75rem;
+  line-height: 2;
+}
+.swatch {
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 1px solid #333;
+}
+.dot {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+}
+.light {
+  color: #888;
+}
+.pill {
+  display: inline-block;
+  padding: 0.125rem;
+  width: 2.5rem;
+  text-align: center;
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+.pill.yes {
+  background: #11f;
+  color: #fff;
+}
+.pill.no {
+  color: #ccc;
+  border: 1px solid;
+}
+
+/* columns (of tags) */
+
+.form .columnCells {
+  padding-top: 0.25rem
+}
+.columnCells .column {
+  margin-top: 0.25rem;
+}
+.columnCells .column > div {
+  max-width: 100%;
+  padding: 0 0.375rem 0.375rem 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.columnCells .selected {
+  color: #11f;
+}
\ No newline at end of file
diff --git a/frontend/app/common/copyToClipboardButton.component.js b/frontend/app/common/copyToClipboardButton.component.js
new file mode 100644
index 0000000..0defba5
--- /dev/null
+++ b/frontend/app/common/copyToClipboardButton.component.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { writeToClipboard } from 'app/utils'
+
+export default class CopyToClipboardButton extends Component {
+  state = {
+    copied: false,
+  }
+
+  handleClick() {
+    writeToClipboard(this.props.data)
+    this.setState({ copied: true })
+  }
+
+  render() {
+    return (
+      <button
+        className={this.state.copied ? 'copyButton copied' : 'copyButton'}
+        onClick={this.handleClick.bind(this)}
+      >
+        {this.state.copied ? 'Copied!' : 'Copy'}
+      </button>
+    )
+  }
+}
diff --git a/frontend/app/common/fonts.css b/frontend/app/common/fonts.css
new file mode 100644
index 0000000..c782885
--- /dev/null
+++ b/frontend/app/common/fonts.css
@@ -0,0 +1,55 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+/*
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Light.ttf') format('truetype');
+  font-weight: 100;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-LightItalic.ttf') format('truetype');
+  font-weight: 100;
+}
+*/
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Medium.ttf') format('truetype');
+  font-weight: 300;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-MediumItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: 300;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Italic.ttf') format('truetype');
+  font-style: italic;
+}
+/*
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-Thin.ttf') format('truetype');
+  font-weight: 100;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('/static/fonts/Roboto-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+}
+*/
\ No newline at end of file
diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
new file mode 100644
index 0000000..cf3e466
--- /dev/null
+++ b/frontend/app/common/form.component.js
@@ -0,0 +1,220 @@
+import React, { Component } from 'react';
+import { courtesyS } from 'app/utils'
+
+export const TextInput = props => (
+  <label className={props.error ? 'error' : 'text'}>
+    {props.title && <span>{props.title}</span>}
+    <input
+      type="text"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+      placeholder={props.placeholder}
+      autoComplete={props.autoComplete}
+    />
+  </label>
+)
+
+export const LabelDescription = props => (
+  <label className={'text description'}>
+    <span>{props.title}</span>
+    <span>{props.children}</span>
+  </label>
+)
+
+export const NumberInput = props => (
+  <label className={props.error ? 'error' : 'text'}>
+    <span>{props.title}</span>
+    <input
+      type="number"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+      min={props.min}
+      max={props.max}
+      step={props.step || 1}
+    />
+  </label>
+)
+
+export const ColorInput = props => (
+  <label className={props.error ? 'error color' : 'text color'}>
+    <span>{props.title}</span>
+    <input
+      type="color"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+    <input
+      type="text"
+      required={props.required}
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+  </label>
+)
+
+export const TextArea = props => (
+  <label className={props.error ? 'textarea error' : 'textarea'}>
+    {props.title && <span>{props.title}</span>}
+    <textarea
+      onChange={props.onChange}
+      name={props.name}
+      value={props.data[props.name]}
+    />
+  </label>
+)
+
+export const Checkbox = props => (
+  <label className="checkbox">
+    <input
+      type="checkbox"
+      name={props.name}
+      value={1}
+      checked={props.checked}
+      onChange={(e) => props.onChange(props.name, e.target.checked)}
+    />
+    <span>{props.label}</span>
+  </label>
+)
+
+export const Radio = props => {
+  return (
+    <label className="radio">
+      <input
+        type="radio"
+        name={props.name}
+        value={props.value}
+        checked={props.value === props.currentValue}
+        onChange={() => props.onChange(props.name, props.value)}
+      />
+      <span>{props.label}</span>
+    </label>
+  )
+}
+
+export class Select extends Component {
+  state = {
+    focused: false,
+  }
+
+  render() {
+    const { name, selected, options, defaultOption, title, loading, onChange, className } = this.props
+    if (loading) {
+      return <label className='select'><div>Loading...</div></label>
+    }
+    const { focused } = this.state
+    return (
+      <label>
+        {title && <span>{title}</span>}
+        <div className={(focused ? 'select focus' : 'select') + " " + (className || "")}>
+          <div>{(options.find(opt => opt.name === selected) || {label: defaultOption}).label}</div>
+          <select
+            onFocus={() => this.setState({ focused: true })}
+            onBlur={() => this.setState({ focused: false })}
+            onChange={e => {
+              onChange(name, e.target.value)
+              // this.setState({ focused: false })
+            }}
+            value={selected || "__default__"}
+          >
+            {!selected && defaultOption && <option value="__default__">{defaultOption}</option>}
+            {options.map((option, i) => (
+              <option
+                key={option.name}
+                value={option.name}
+                disabled={option.disabled}
+              >{option.label}</option>
+            ))}
+          </select>
+        </div>
+      </label>
+    )
+  }
+}
+
+export class FileInputField extends Component {
+  state = {
+    count: 0,
+  }
+
+  handleChange(files) {
+    const { multiple, onChange } = this.props
+    if (!files) {
+      this.setState({ count: 0 })
+    } else {
+      this.setState({ count: multiple ? files.length : 0 })
+    }
+    onChange(files)
+  }
+  
+  render() {
+    const { error, title, label, required, multiple, mime, name } = this.props
+    return (
+      <label className={error ? 'error' : 'text fileInput'}>
+        <span>{title}</span>
+        <div className="row">
+          <button>
+            {label || "Choose files"}
+            <FileInput
+              mime={mime}
+              multiple={multiple}
+              onChange={this.handleChange.bind(this)}
+            />
+          </button>
+          {!!this.state.count && <span>{courtesyS(this.state.count, "file")}{" selected"}</span>}
+        </div>
+      </label>
+    )
+  }
+}
+
+export class FileInput extends Component {
+  handleChange(e) {
+    let { multiple, mime } = this.props
+    if (!mime) {
+      mime = "image/"
+    }
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    let file, selectedFiles = []
+    for (i = 0; i < files.length; i++) {
+      file = files[i]
+      if (file && file.type.indexOf(mime) === 0) {
+        if (multiple) {
+          selectedFiles.push(file)
+        } else {
+          break
+        }
+      }
+    }
+    if (multiple && selectedFiles.length) {
+      this.props.onChange(selectedFiles)
+    } else if (!multiple && file) {
+      this.props.onChange(file)
+    } else {
+      this.props.onChange()
+    }
+  }
+
+  render() {
+    return (
+      <input type="file" multiple={!!this.props.multiple} onChange={this.handleChange.bind(this)} />
+    )
+  }
+}
+
+export const SubmitButton = (props) => (
+  <label>
+    <span></span>
+    <button
+      className={props.className ? "submit " + props.className : "submit"}
+      onClick={props.onClick}
+    >{props.title}</button>
+  </label>
+)
diff --git a/frontend/app/common/form.css b/frontend/app/common/form.css
new file mode 100644
index 0000000..dbfa01f
--- /dev/null
+++ b/frontend/app/common/form.css
@@ -0,0 +1,323 @@
+/* label */
+
+label {
+  display: flex;
+  min-width: 10rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+
+.label {
+  display: flex;
+  min-width: 10rem;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  cursor: pointer;
+}
+
+/* form (stock forms) */
+
+form label,
+form .label {
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+form label span,
+form .label > span {
+  display: inline-block;
+  min-width: 8rem;
+  padding: 0.5rem 0;
+}
+form label.textarea {
+  align-items: flex-start;
+}
+form input[type="checkbox"] {
+  margin: -0.0625rem 0.625rem 0 8rem;
+}
+
+/* form errors */
+
+form .error span {
+  color: #f11;
+}
+form .error input[type=text],
+form .error input[type=number],
+form .error input[type=password] {
+  border-color: #f11;
+}
+
+/* form field descriptions */
+
+form label.description {
+  cursor: normal;
+  font-size: small;
+  color: #ddd;
+}
+form label.description span {
+  padding-top: 0;
+}
+
+/* text input */
+
+input[type=text],
+input[type=number],
+input[type=password] {
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  color: #fff;
+  background: #111;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  width: 15rem;
+  border-radius: 0.125rem;
+}
+
+input[type=text]:focus,
+input[type=number]:focus,
+input[type=password]:focus {
+  border: 1px solid #84f;
+  background: #000;
+}
+
+textarea {
+  width: 20rem;
+  height: 10rem;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  font-family: 'Roboto', sans-serif;
+  background: #111;
+  color: #fff;
+  font-size: 0.875rem;
+  border-radius: 0.125rem;
+}
+textarea:focus {
+  border: 1px solid #84f;
+  background: #000;
+}
+
+/* checkbox */
+
+input[type=checkbox] {
+  position: relative;
+  display: block;
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-right: 0.625rem;
+  cursor: pointer;
+  outline: 0;
+}
+input[type=checkbox] + span {
+  font-size: 0.825rem;
+  text-transform: uppercase;
+  color: #444;
+}
+input[type=checkbox]:hover + span {
+  color: #000;
+}
+input[type=checkbox]:focus + span {
+  color: #84f;
+}
+input[type="checkbox"]:checked + span {
+  color: #000;
+}
+input[type="checkbox"]:focus:checked + span {
+  color: #84f;
+}
+
+input[type="checkbox"]:after {
+  position: relative;
+  display: block;
+  left: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 0.0625rem solid #ddd;
+  content: "";
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  transition: background-color 0.1s;
+  border-radius: 0.125rem;
+}
+input[type=checkbox]:focus:after {
+  border-color: #84f;
+}
+input[type="checkbox"]:checked:after {
+  border-color: #84f;
+  background-color: #84f;
+  background-image: url(/static/img/check.svg);
+  background-size: cover;
+}
+
+/* select */
+
+.select {
+  position: relative;
+  width: 9rem;
+  min-width: auto;
+  background: #111;
+  border-radius: 0.125rem;
+  border: 1px solid #ddd;
+  padding: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 1.25rem;
+  cursor: pointer;
+}
+.select select {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.select:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0.375rem;
+  transform: translateY(-0.125rem);
+  width: 0; 
+  height: 0; 
+  border-left: 0.375rem solid transparent;
+  border-right: 0.375rem solid transparent;
+  border-top: 0.375rem solid #ddd;
+}
+.select.focus {
+  border-color: #84f;
+  background: #000;
+}
+.select.focus:after {
+  border-top-color: #84f;
+}
+.select:hover {
+  background-color: #000;
+}
+.select div {
+  width: calc(100% - 1.025rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select.wide {
+  width: 20rem;
+}
+
+/* button */
+
+button {
+  position: relative;
+  background: #333;
+  border-radius: 0.125rem;
+  color: #ddd;
+  border: 1px solid;
+  padding: 0.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  cursor: pointer;
+  /*text-transform: uppercase;*/
+  transition: all 0.1s;
+}
+button:hover {
+  background-color: #000;
+  border-color: #fff;
+}
+button.process {
+  padding-left: 1.5rem;
+}
+button.process:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0.625rem;
+  transform: translateY(-0.375rem);
+  width: 0; 
+  height: 0; 
+  border-top: 0.375rem solid transparent;
+  border-bottom: 0.375rem solid transparent;
+  border-left: 0.375rem solid #888;
+}
+button.process:focus:after {
+  border-left-color: #84f;
+}
+button:focus {
+  background: #000;
+  border-color: #fff;
+  color: #fff;
+  outline: 0;
+}
+button:disabled {
+  background: #eee;
+  color: #888;
+  border-color: #bbb;
+  pointer-events: none;  
+}
+button:disabled:after {
+  border-left-color: #aaa;
+}
+.buttons button {
+  margin-right: 0.75rem;
+}
+button.submit {
+  border-color: #d8f;
+  color: #fff;
+  background: #111;
+}
+button.submit:focus,
+button.submit:hover {
+  border-color: #fff;
+  color: #fff;
+  background: #222;
+}
+button.submit.destroy {
+  background-color: rgba(16,16,16,0.5);
+  border-color: #b11;
+  color: #d11;
+}
+button.submit.destroy:focus,
+button.submit.destroy:hover {
+  background: #000;
+  border-color: #f33;
+  color: #f33;
+}
+
+/* file upload, should always be inside a container */
+
+input[type=file] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+::-webkit-file-upload-button { cursor: pointer; }
+.fileInput > .row {
+  align-items: center;
+}
+.fileInput > .row > span {
+  padding-left: 1rem;
+}
+
+/* copy button */
+
+.copyButton {
+  border-color: transparent;
+  color: #84f;
+  font-size: 0.675rem;
+  padding: 0.25rem;
+  margin-left: 0.25rem;
+}
+.desktop .copyButton:hover {
+  border-color: #84f;
+}
+.copyButton.copied {
+  color: #84f;
+}
\ No newline at end of file
diff --git a/frontend/app/common/header.component.js b/frontend/app/common/header.component.js
new file mode 100644
index 0000000..115c9b4
--- /dev/null
+++ b/frontend/app/common/header.component.js
@@ -0,0 +1,41 @@
+import React from 'react'
+// import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
+import { session } from 'app/session'
+
+function Header(props) {
+  return (
+    <header>
+      <div>
+        <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
+      </div>
+      <div>
+        <span className='username' onClick={() => changeUsername()}>
+          {' → '}{props.username}
+        </span>
+      </div>
+    </header>
+  )
+}
+
+const changeUsername = () => {
+  const username = prompt("Please enter your username:", session('username'))
+  if (username && username.length) {
+    session.set('username', username)
+    document.querySelector('Header div span').innerText = ' → ' + username // very naughty
+  }
+}
+
+
+const mapStateToProps = (state) => ({
+  // auth: state.auth,
+  site: state.site,
+  username: session.get('username'),
+  // isAuthenticated: state.auth.isAuthenticated,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header) 
diff --git a/frontend/app/common/imageCrop.component.js b/frontend/app/common/imageCrop.component.js
new file mode 100644
index 0000000..f687d90
--- /dev/null
+++ b/frontend/app/common/imageCrop.component.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { cropImage } from 'app/utils'
+
+export default class ImageCrop extends Component {
+  state = {
+    cropURL: null
+  }
+
+  componentDidMount() {
+    const { url, crop } = this.props
+    this.crop(url, crop)
+  }
+
+  componentDidUpdate(prevProps) {
+    const { url, crop } = this.props
+    if (this.props.crop !== prevProps.crop) {
+      cropImage(url, crop).then(canvas =>{
+        const cropURL = canvas.toDataURL('image/jpeg', 0.8)
+        this.setState({ cropURL })
+      })
+    }
+  }
+
+  crop(url, crop) {
+    cropImage(url, crop).then(canvas =>{
+      const cropURL = canvas.toDataURL('image/jpeg', 0.8)
+      this.setState({ cropURL })
+    })
+  }
+
+
+  render() {
+    const { cropURL } = this.state
+    if (!cropURL) {
+      return null
+    }
+    return (
+      <img src={cropURL} className='preview' />
+    )
+  }
+}
diff --git a/frontend/app/common/index.js b/frontend/app/common/index.js
new file mode 100644
index 0000000..5c0dc50
--- /dev/null
+++ b/frontend/app/common/index.js
@@ -0,0 +1,32 @@
+export { default as Header } from './header.component'
+export {
+  MenuButton, SmallMenuButton, MenuRoute,
+} from './menubutton.component'
+export {
+  Select, Checkbox, Radio, FileInput, FileInputField,
+  TextInput, NumberInput, TextArea, SubmitButton,
+  LabelDescription, ColorInput,
+} from './form.component'
+export {
+  Swatch, Dot, Columns, Statistic, Detections, Progress
+} from './miscellaneous.component'
+export { default as TableIndex } from './tableIndex.component'
+export { Loader } from './loader.component'
+export {
+  TableObject, TableArray, TableTuples,
+  TableRow, TableCell
+} from './table.component'
+export { default as CopyToClipboardButton } from './copyToClipboardButton.component'
+export { default as ImageCrop } from './imageCrop.component'
+export { Modal } from './modal.component'
+export { default as UploadImage } from './uploadImage.component'
+export { default as Slider } from './slider.component'
+
+import './fonts.css'
+import './app.css'
+import './form.css'
+import './loader.css'
+import './table.css'
+import './modal.css'
+import './miscellaneous.css'
+import './upload.css'
diff --git a/frontend/app/common/loader.component.js b/frontend/app/common/loader.component.js
new file mode 100644
index 0000000..f0a0c69
--- /dev/null
+++ b/frontend/app/common/loader.component.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+
+import './loader.css'
+
+const Loader = () => (
+  <div>
+    <div className='circular-loader color'>
+      <div className="stroke">
+        <div className="stroke-left"></div>
+        <div className="stroke-right"></div>
+      </div>
+    </div>
+  </div>
+)
+
+export { Loader }
diff --git a/frontend/app/common/loader.css b/frontend/app/common/loader.css
new file mode 100644
index 0000000..f047e8e
--- /dev/null
+++ b/frontend/app/common/loader.css
@@ -0,0 +1,125 @@
+
+@keyframes L_circle_rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes L_stroke_rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(1080deg);
+  }
+}
+@keyframes L_stroke_fix {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(135deg);
+  }
+  100% {
+    transform: rotate(270deg);
+  }
+}
+@keyframes L_stroke_left_grow {
+  0% {
+    transform: rotate(-5deg);
+  }
+  50% {
+    transform: rotate(-140deg);
+  }
+  100% {
+    transform: rotate(-5deg);
+  }
+}
+@keyframes L_stroke_right_grow {
+  0% {
+    transform: rotate(5deg);
+  }
+  50% {
+    transform: rotate(140deg);
+  }
+  100% {
+    transform: rotate(5deg);
+  }
+}
+.circular-loader .stroke::before, .circular-loader .stroke-right::before, .circular-loader .stroke-left::before {
+  content: "";
+  display: block;
+}
+
+.circular-loader, .circular-loader .stroke, .circular-loader .stroke::before, .circular-loader .stroke-right, .circular-loader .stroke-right::before, .circular-loader .stroke-left, .circular-loader .stroke-left::before {
+  width: 2em;
+  height: 2em;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+
+.circular-loader .stroke::before, .circular-loader .stroke-right::before, .circular-loader .stroke-left::before {
+  border-style: solid;
+  border-width: 0.21429em;
+  border-color: #778;
+}
+
+.circular-loader .stroke-right, .circular-loader .stroke-left::before {
+  position: absolute;
+  clip: rect(0 2em 2em 1em);
+}
+.circular-loader .stroke-right::before, .circular-loader .stroke-left {
+  position: absolute;
+  clip: rect(0 1em 2em 0);
+}
+.circular-loader .stroke::before {
+  position: absolute;
+  clip: rect(0 1.05em 1em 0.95em);
+}
+
+/**/
+.circular-loader {
+  animation: L_circle_rotate 1568.23529ms linear infinite both;
+}
+.circular-loader .stroke::before,
+.circular-loader .stroke-right, .circular-loader .stroke-left {
+  animation: L_stroke_fix 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+.circular-loader .stroke {
+  animation: L_stroke_rotate 5332ms steps(4) infinite both;
+}
+.circular-loader .stroke-right::before {
+  animation: L_stroke_right_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+.circular-loader .stroke-left::before {
+  animation: L_stroke_left_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+@keyframes color_K {
+  0%, 15% {
+    border-color: #44444f;
+  }
+  25%, 40% {
+    border-color: #bbbbc7;
+  }
+  50%, 65% {
+    border-color: #66666f;
+  }
+  75%, 90% {
+    border-color: #ccccd4;
+  }
+  100% {
+    border-color: #44444f;
+  }
+}
+.circular-loader.color .stroke::before {
+  animation: L_stroke_fix 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both;
+}
+.circular-loader.color .stroke-right::before {
+  animation: L_stroke_right_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both;
+}
+.circular-loader.color .stroke-left::before {
+  animation: L_stroke_left_grow 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, color_K 5332ms linear infinite both;
+}
+
diff --git a/frontend/app/common/menubutton.component.js b/frontend/app/common/menubutton.component.js
new file mode 100644
index 0000000..5fd8e2f
--- /dev/null
+++ b/frontend/app/common/menubutton.component.js
@@ -0,0 +1,128 @@
+import React, { Component } from 'react'
+import { Route, Link } from 'react-router-dom'
+import { history } from 'app/store'
+
+const icons = {
+  upload: {
+    title: 'Upload',
+    image: '/static/img/add.svg',
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>,
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z" /></svg>
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"/><path d="M19,12v7H5v-7H3v7c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7H19z M11,6.83L8.41,9.41L7,8l5-5l5,5l-1.41,1.41L13,6.83v9.67h-2 V6.83z"/></svg>,
+  },
+  new: {
+    title: 'New',
+    image: '/static/img/add.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>,
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg>,
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z" /></svg>
+  },
+  save: {
+    title: 'Export',
+    image: '/static/img/save.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z"/></svg>,
+  },
+  saved: {
+    title: 'Saved',
+    image: '/static/img/folder.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>,
+  },
+  recent: {
+    title: 'Recent',
+    image: '/static/img/history.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z"/></svg>,
+  },
+  random: {
+    title: 'Random',
+    image: '/static/img/random.svg',
+    // svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>,
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/><circle cx="7.5" cy="16.5" r="1.5"/><circle cx="7.5" cy="7.5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="16.5" cy="16.5" r="1.5"/><circle cx="16.5" cy="7.5" r="1.5"/></svg>
+  },
+  menu: {
+    title: 'Menu',
+    image: '/static/img/menu.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>,
+  },
+  list: {
+    title: 'List',
+    image: '/static/img/view_list.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path d="M3 5v14h17V5H3zm4 2v2H5V7h2zm-2 6v-2h2v2H5zm0 2h2v2H5v-2zm13 2H9v-2h9v2zm0-4H9v-2h9v2zm0-4H9V7h9v2z"/></svg>,
+  },
+  edit: {
+    title: 'Edit',
+    image: '/static/img/edit.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>
+  },
+  delete: {
+    title: 'Delete',
+    image: '/static/img/delete.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/></svg>
+  },
+  back: {
+    title: 'Back',
+    image: '/static/img/back.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/></svg>,
+  },
+  image_search: {
+    title: 'Search',
+    image: '/static/img/image_search.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M18 13v7H4V6h5.02c.05-.71.22-1.38.48-2H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5l-2-2zm-1.5 5h-11l2.75-3.53 1.96 2.36 2.75-3.54zm2.8-9.11c.44-.7.7-1.51.7-2.39C20 4.01 17.99 2 15.5 2S11 4.01 11 6.5s2.01 4.5 4.49 4.5c.88 0 1.7-.26 2.39-.7L21 13.42 22.42 12 19.3 8.89zM15.5 9C14.12 9 13 7.88 13 6.5S14.12 4 15.5 4 18 5.12 18 6.5 16.88 9 15.5 9z"/><path fill="none" d="M0 0h24v24H0z"/></svg>,
+  },
+  search: {
+    title: 'Search',
+    image: '/static/img/search.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>,
+  },
+  open_in_new: {
+    title: 'Open',
+    image: '/static/img/open_in_new.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>,
+  },
+  test: {
+    title: 'Test',
+    image: '/static/img/fastfood.svg',
+    svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.06 22.99h1.66c.84 0 1.53-.64 1.63-1.46L23 5.05h-5V1h-1.97v4.05h-4.97l.3 2.34c1.71.47 3.31 1.32 4.27 2.26 1.44 1.42 2.43 2.89 2.43 5.29v8.05zM1 21.99V21h15.03v.99c0 .55-.45 1-1.01 1H2.01c-.56 0-1.01-.45-1.01-1zm15.03-7c0-8-15.03-8-15.03 0h15.03zM1.02 17h15v2h-15z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
+  },
+  // export: {
+  //   title: 'Export',
+  //   image: '/static/img/export.svg',
+  //   svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"/><path d="M19,12v7H5v-7H3v7c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-7H19z M11,6.83L8.41,9.41L7,8l5-5l5,5l-1.41,1.41L13,6.83v9.67h-2 V6.83z"/></svg>,
+  // },
+}
+
+const goBack = () => history.goBack()
+
+export const MenuButton = ({ name, href, onClick, label, children, className }) => {
+  const { svg, title } = icons[name]
+  if (name === 'back') {
+    onClick = goBack
+  }
+  if (href) {
+    return (
+      <Link to={href} className={className || 'menuButton'}>
+        <div className='icon'>{svg}</div>
+        {label === false ? "" : title}
+        {children}
+      </Link>
+    )
+  } else {
+    return (
+      <div className={className || 'menuButton'} onClick={onClick}>
+        <div className='icon'>{svg}</div>
+        {label === false ? "" : title}
+        {children}
+      </div>
+    )
+  }
+}
+
+export const SmallMenuButton = (props) => (
+  <MenuButton {...props} label={false} className={props.active ? 'menuButton small active' : 'menuButton small'} />
+)
+
+export const MenuRoute = ({ component: Component, props, ...rest }) => (
+  <Route {...rest} render={routeProps => (
+    <Component {...routeProps} {...props} />
+  )}/>
+)
diff --git a/frontend/app/common/miscellaneous.component.js b/frontend/app/common/miscellaneous.component.js
new file mode 100644
index 0000000..bf2c266
--- /dev/null
+++ b/frontend/app/common/miscellaneous.component.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { clamp, percent } from 'app/utils'
+
+export const Swatch = ({ color }) => (
+  <div
+    className='swatch'
+    style={{ backgroundColor: color ? 'rgb(' + color.join(',') + ')' : 'transparent' }}
+  />
+)
+
+export const Dot = ({ color }) => (
+  <div
+    className='dot'
+    style={{ backgroundColor: color }}
+  />
+)
+
+export const Columns = ({ count, margin, width, object, children, className }) => {
+  if (!object || !object.length) object = children
+  if (!object || !object.length) return null
+  margin = margin || 380
+  width = width || 250
+  count = count || Math.floor((window.innerWidth - margin) / width)
+  let columns = []
+  let len = object.length
+  let j = 0
+  for (let i = 0; i < count; i++) {
+    let column_len = len * (i + 1) / count
+    let column = []
+    for (; j < column_len; j++) {
+      column.push(<div key={j}>{object[j]}</div>)
+    }
+    columns.push(<div key={"col_" + i + "_" + j} className='column' style={{ width }}>{column}</div>)
+    if (j >= len) break
+  }
+  return (
+    <div className={'row columnCells ' + className}>
+      {columns}
+    </div>
+  )
+}
+
+export const Statistic = ({ name, value, link }) => (
+  <div className='statistic row'>
+    <div className='title'>{link ? <Link to={link}>{name}</Link> : name}</div>
+    <div className='int'>{value}</div>
+  </div>
+)
+
+export const Detections = ({ detections, labels }) => (
+  (detections || []).map(({ label, rect }, i) => (
+    <div
+    className='rect'
+      key={i}
+      style={{
+        left: percent(clamp(rect.x1)),
+        width: percent(clamp(rect.x2 - rect.x1, 0, Math.min(1.0, 1.0 - rect.x1))),
+        top: percent(clamp(rect.y1)),
+        height: percent(clamp(rect.y2 - rect.y1, 0, Math.min(1.0, 1.0 - rect.y1))),
+      }}>
+      {labels && <span>{label.replace(/_/g, ' ')}</span>}
+    </div>
+  )
+))
+
+export const Progress = ({ current, total }) => (
+  <div className='progress'>
+    <div className='bar' style={{ width: Math.round(100 * current / total) + '%' }} />
+  </div>
+)
diff --git a/frontend/app/common/miscellaneous.css b/frontend/app/common/miscellaneous.css
new file mode 100644
index 0000000..32c3e7b
--- /dev/null
+++ b/frontend/app/common/miscellaneous.css
@@ -0,0 +1,18 @@
+
+/* Progress bar */
+
+.progress {
+  background: #f8f8f8;
+  margin: 0.25rem 0;
+  height: 0.25rem;
+  width: 20rem;
+  position: relative;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  margin-bottom: 0.2rem;
+}
+.progress .bar {
+  position: absolute;
+  top: 0; left: 0;
+  height: 100%;
+  background: #11f;
+}
diff --git a/frontend/app/common/modal.component.js b/frontend/app/common/modal.component.js
new file mode 100644
index 0000000..75c479c
--- /dev/null
+++ b/frontend/app/common/modal.component.js
@@ -0,0 +1,9 @@
+import React, { Component } from 'react'
+
+export const Modal = ({ visible, children }) => (
+  <div className={visible ? "modal visible" : "modal"}>
+    <div>
+      {children}
+    </div>
+  </div>
+)
diff --git a/frontend/app/common/modal.css b/frontend/app/common/modal.css
new file mode 100644
index 0000000..5e95a09
--- /dev/null
+++ b/frontend/app/common/modal.css
@@ -0,0 +1,20 @@
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background: rgba(0,0,0,0.2);
+  display: none;
+}
+.modal.visible {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal > div {
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+}
diff --git a/frontend/app/common/slider.component.js b/frontend/app/common/slider.component.js
new file mode 100644
index 0000000..9d96b1e
--- /dev/null
+++ b/frontend/app/common/slider.component.js
@@ -0,0 +1,120 @@
+import React, { Component } from 'react'
+import { default as throttle } from 'lodash.throttle'
+
+const SLIDER_THROTTLE_TIME = 1000 / 30
+
+export default class Slider extends Component {
+  state = {
+    value: 0
+  }
+
+  constructor(props){
+    super(props)
+    this.timeout = 0
+    this.handleInput = this.handleInput.bind(this)
+    this.handleRange = this.handleRange.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+    this.onChange = throttle(props.onChange, SLIDER_THROTTLE_TIME)
+  }
+  componentDidMount() {
+    let { value } = this.props
+    if (this.props.type === 'int') {
+      value = parseInt(value)
+    }
+    this.setState({ value })
+  }
+  componentDidUpdate(prevProps) {
+    let { value } = this.props
+    if (prevProps.value !== value) {
+      if (this.props.type === 'int') {
+        value = parseInt(value)
+      }
+      this.setState({ value })
+    }
+  }
+  handleInput(e){
+    let { name } = this.props
+    let new_value = e.target.value
+    if (new_value === '') {
+      new_value = this.props.defaultValue || (this.props.max - this.props.min) / 2
+    }
+    else if (this.props.type === 'int') {
+      new_value = parseInt(new_value)
+    }
+    else if (this.props.type === 'odd') {
+      new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
+    }
+    else {
+      new_value = parseFloat(new_value)
+    }
+    if (this.state.value !== new_value) {
+      this.setState({ value: new_value })
+      this.props.onChange(this.props.name, new_value)
+    }
+  }
+  handleKeyDown(e) {
+    console.log(e.keyCode)
+  }
+  handleRange(e){
+    let { value: new_value } = e.target
+    if (this.props.type === 'int') {
+      new_value = parseInt(new_value)
+    }
+    else if (this.props.type === 'odd') {
+      new_value = parseInt(Math.floor(new_value / 2) * 2 + 1)
+    }
+    else if (this.props.type === 'list') {
+      new_value = this.props.options[new_value] || this.props.options[0]
+    }
+    else {
+      new_value = parseFloat(new_value)
+    }
+    this.setState({ value: new_value })
+    this.onChange(this.props.name, new_value)
+  }
+  render(){
+    let { name, title } = this.props
+    let value = this.state.value
+    if (typeof value === 'undefined') {
+      value = this.props.min
+    }
+    let text_value = value
+    let step;
+    let min = this.props.min || 0
+    let max = this.props.max || 0
+    if (this.props.type === 'int') {
+      step = 1
+    } else if (this.props.type === 'list') {
+      min = 0
+      max = this.props.options.length - 1
+      step = 1
+      value = this.props.options.indexOf(value)
+    } else {
+      step = (this.props.max - this.props.min) / 100
+      text_value = parseFloat(value).toFixed(2)
+    }
+    return (
+      <label className={this.props.error ? 'slider error' : 'slider'}>
+        <span>{title}</span>
+        <input
+          type='number'
+          min={min}
+          max={max}
+          step={step}
+          value={text_value}
+          onKeyDown={this.handleKeyDown}
+          onChange={this.handleInput}
+          onBlur={this.handleInput}
+        />
+        <input
+          type='range'
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={this.handleRange}
+        />
+      </label>
+    )
+  }
+}
diff --git a/frontend/app/common/table.component.js b/frontend/app/common/table.component.js
new file mode 100644
index 0000000..b26dcba
--- /dev/null
+++ b/frontend/app/common/table.component.js
@@ -0,0 +1,128 @@
+import React from 'react'
+
+import { formatName } from 'app/utils'
+
+const __HR__ = '__HR__'
+
+export function TableObject({ tag, object, order, summary }) {
+  if (!object) return null
+  if (object === 'loading') {
+    return <div className='tableObject loading'>{tag}{': Loading'}</div>
+  }
+  if (object.err) {
+    return <div className='tableObject error'>{tag}{' Error: '}{object.err}</div>
+  }
+  let objects = Object.keys(object)
+  if (order) {
+    const grouped = objects.reduce((a, b) => {
+      const index = order.indexOf(b)
+      if (index !== -1) {
+        a.order.push([index, b])
+      } else {
+        a.alpha.push(b)
+      }
+      return a
+    }, { order: [], alpha: [] })
+    objects = grouped.order
+      .sort((a, b) => a[0] - b[0])
+      .map(([i, s]) => s)
+    if (!summary) {
+      objects = objects
+        // .concat([__HR__])
+        .concat(grouped.alpha.sort())
+    }
+  } else {
+    objects = objects.sort()
+  }
+  return (
+    <div>
+      {tag && <h3 className='tt'>{tag}</h3>}
+      <table className={'tableObject ' + tag}>
+        <tbody>
+          {objects.map((key, i) => (
+            <TableRow key={key + '_' + i} name={key} value={object[key]} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function TableArray({ tag, list }) {
+  if (!list) return null
+  return (
+    <div>
+      {tag && <h3>{tag}</h3>}
+      <table className={'tableArray ' + tag}>
+        <tbody>
+          {list.map((value, i) => (
+            <tr key={tag + '_' + i}>
+              <TableCell value={value} />
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function TableTuples({ tag, list }) {
+  if (!list) return null
+  return (
+    <div>
+      {tag && <h3>{tag}</h3>}
+      <table className={'tableTuples ' + tag}>
+        <tbody>
+          {list.map(([key, ...values], i) => (
+            <tr key={tag + '_' + i}>
+              <th>{formatName(key)}</th>
+              {values.map((value, j) => (
+                <TableCell key={i + '_' + j} value={value} />
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function TableRow({ name, value }) {
+  if (name === __HR__) {
+    return (
+      <tr>
+        <th className='tr'>
+          <hr />
+        </th>
+      </tr>
+    )
+  }
+  return (
+    <tr>
+      <th>{formatName(name)}</th>
+      <TableCell name={name} value={value} />
+    </tr>
+  )
+}
+
+export function TableCell({ value }) {
+  if (value && typeof value === 'object') {
+    if (value._raw) {
+      value = value.value
+    } else if (value.length) {
+      value = <TableArray nested tag={''} list={value} />
+    } else {
+      value = <TableObject nested tag={''} object={value} />
+    }
+  }
+  if (typeof value === 'boolean') {
+    return <td>{value ? <Pill type='yes' /> : <Pill type='no' />}</td>
+  }
+  return (
+    <td>{value}</td>
+  )
+}
+
+export const Pill = ({ color, type }) => (
+  <div className={'pill ' + type} style={{ backgroundColor: color }}>{type}</div>
+)
\ No newline at end of file
diff --git a/frontend/app/common/table.css b/frontend/app/common/table.css
new file mode 100644
index 0000000..4752e21
--- /dev/null
+++ b/frontend/app/common/table.css
@@ -0,0 +1,96 @@
+/* tables on metadata pages */
+
+h3.tt {
+  margin: 1.5rem 0 0.25rem 0;
+  font-size: 1.25rem;
+}
+table {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  border-spacing: 0;
+  line-height: 1.5;
+  color: #666;
+}
+.tableObject td,
+.tableObject th {
+  padding: 0.1875rem;
+  vertical-align: top;
+}
+.tableObject hr {
+  width: 100%;
+  color: transparent;
+  border: 0;
+  border-bottom: 1px solid #bbb;
+  align: left;
+  margin: 3px 0;
+  padding: 0;
+}
+.tableObject th,
+.tableTuples th {
+  min-width: 8rem;
+  text-align: left;
+  text-transform: capitalize;
+  padding-left: 0;
+  padding-right: 0.625rem;
+  font-weight: 300;
+  color: #333;
+}
+.tableTuples td {
+  text-align: right;
+}
+.tableObject td {
+  font-weight: normal;
+  color: #000;
+}
+.tableObject .tableObject {
+  border: 0.0625rem solid #ddd;
+}
+.tableArray {
+  border: 0.0625rem solid #ddd;
+  border-spacing: 0;
+}
+.tableArray td {
+  border-bottom: 0.0625rem solid #ddd;
+}
+
+.rows .tableRow {
+  flex-wrap: wrap;
+}
+.rows .row > div.galleryRow {
+  padding: 0 0.75rem 0.75rem 0.75rem;
+}
+.rows .row > div.galleryRow > div {
+  display: flex;
+  flex-direction: row;
+  max-height: 100px;
+  flex-wrap: wrap;
+  max-width: 100%;
+  overflow: hidden;
+}
+.galleryRow .thumbnail {
+  height: 100px;
+  margin-right: 0.75rem;
+}
+/*
+.gray {
+  font-size: 12px;
+  color: #888;
+  display: block;
+}
+.sha256.heading {
+  margin: 20px 0 0px;
+}
+.gray span {
+  padding-right: 5px;
+}
+.gray {
+  margin-bottom: 10px;
+}
+.gray a {
+  color: #666;
+}
+*/
+.tableIndex {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/frontend/app/common/tableIndex.component.js b/frontend/app/common/tableIndex.component.js
new file mode 100644
index 0000000..c58fc35
--- /dev/null
+++ b/frontend/app/common/tableIndex.component.js
@@ -0,0 +1,129 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+
+import { formatDateTime } from 'app/utils'
+import { Loader, Swatch, Dot } from 'app/common'
+
+/*
+  <TableIndex
+    title="Collections"
+    actions={actions.collection}
+    data={data.collection.index}
+    fields={[
+      { name: 'title', type: 'title', link: row => '/collection/' + row.id + '/show/' },
+      { name: 'username', type: 'string' },
+      { name: 'date', type: 'date' },
+      { name: 'notes', type: 'text' },
+    ]}
+  />
+*/
+
+export default class TableIndex extends Component {
+  componentDidMount() {
+    this.props.actions && this.props.actions.index()
+  }
+
+  render() {
+    const { data, els, title, fields, noHeadings, notFoundMessage } = this.props
+    if (data.loading) {
+      return <Loader />
+    }
+    if (!els && (!data.lookup || !data.order.length)) {
+      return (
+        <div>
+          <h1>{title}</h1>
+          <p className='gray'>
+            {notFoundMessage || ("No " + title)}
+          </p>
+        </div>
+      )
+    }
+    return (
+      <div className='tableIndex'>
+        <h1>{title}</h1>
+        <div className='rows'>
+        {!noHeadings && <RowHeadings fields={fields} />}
+        {els
+          ? els.map(el => <Row key={el.id} row={el} fields={fields} />)
+          : data.order.map(id => <Row key={id} row={data.lookup[id]} fields={fields} />)
+        }
+        </div>
+      </div>
+    )
+  }
+}
+
+const RowHeadings = ({fields}) => {
+  return (
+    <div className='row heading'>
+      {fields.map(field => {
+        if (field.type === 'gallery') return
+        let css = {}
+        if (field.width) {
+          css = { width: field.width, maxWidth: 'none', flex: 'none', }
+        }
+        if (field.flex) {
+          css.flex = field.flex
+        }
+        return <div key={field.name} className={field.type} style={css}>{(field.title || field.name).replace(/_/g, ' ')}</div>
+      })}
+    </div>
+  )
+}
+
+const Row = ({ row, fields }) => {
+  return (
+    <div className='row tableRow'>
+      {fields.map(field => {
+        let value = field.valueFn ? field.valueFn(row) : row[field.name]
+        let css = {}
+        if (field.type === 'date' && (row.updated_at || row.created_at || value)) {
+          // value = (value || "").split('.')[0]
+          value = formatDateTime(row.updated_at || row.created_at || value)
+        } else if (field.type === 'text') {
+          value = String(value || "").trim().split('\n')[0].replace(/^#+/, '').substr(0, 100)          
+        } else if (field.type === 'color') {
+          value = <Swatch color={value} />
+        } else if (field.type === 'bool') {
+          value = <Dot color={value ? '#11f' : '#fff'} />
+        } else if (field.type === 'str') {
+          value = String(value || "").replace(/_/g, ' ')
+        } else if (field.type === 'gallery') {
+          return <GalleryRow key={field.name} media={value} />
+        }
+        if (field.width) {
+          css = { width: field.width, maxWidth: 'none', flex: 'none', }
+        }
+        if (field.flex) {
+          css.flex = field.flex
+        }
+        let className
+        if (field.style) {
+          className = field.type + ' ' + field.style
+        } else {
+          className = field.type
+        }
+        value = <div title={value} key={field.name} className={className} style={css}>{value}</div>
+        if (field.link) {
+          return <Link key={field.name} to={field.link(row)}>{value}</Link>
+        }
+        return value
+      })}
+    </div>
+  )
+}
+
+const GalleryRow = ({ media }) => {
+  return (
+    <div className='galleryRow'>
+      <div>
+        {media.map(img => (
+          <Link to={"/media/id/" + img.id + "/"} key={img.url}>
+            <img src={img.url} className='thumbnail' />
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/app/common/upload.css b/frontend/app/common/upload.css
new file mode 100644
index 0000000..719f98c
--- /dev/null
+++ b/frontend/app/common/upload.css
@@ -0,0 +1,26 @@
+/* drag-and-drop */
+
+.dragCurtain {
+  display: none;
+  pointer-events: none;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  z-index: 1;
+}
+.dragCurtain div {
+  color: #11f;
+  background: white;
+  border: 2px solid #11f;
+  padding: 2rem;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+.dragging .dragCurtain {
+  display: flex;
+}
diff --git a/frontend/app/common/upload.helpers.js b/frontend/app/common/upload.helpers.js
new file mode 100644
index 0000000..f26e2cc
--- /dev/null
+++ b/frontend/app/common/upload.helpers.js
@@ -0,0 +1,174 @@
+import ExifReader from 'exifreader'
+
+function base64ToUint8Array(string, start, finish) {
+  start = start || 0
+  finish = finish || string.length
+  // atob that shit
+  const binary = atob(string)
+  const buffer = new Uint8Array(binary.length)
+  for (let i = start; i < finish; i++) {
+    buffer[i] = binary.charCodeAt(i)
+  }
+  return buffer
+}
+
+function getOrientation(uri) {
+  // Split off the base64 data
+  const base64String = uri.split(',')[1]
+  // Read off first 128KB, which is all we need to
+  // get the EXIF data
+  const arr = base64ToUint8Array(base64String, 0, 2 ** 17)
+  try {
+    const tags = ExifReader.load(arr.buffer)
+    // console.log(tags)
+    if (typeof tags.Orientation == 'number') {
+      return tags.Orientation
+    }
+    return tags.Orientation.value
+  } catch (err) {
+    return 1
+  }
+}
+
+function applyRotation(canvas, ctx, deg) {
+  const radians = deg * (Math.PI / 180)
+  if (deg === 90) {
+    ctx.translate(canvas.width, 0)
+  } else if (deg === 180) {
+    ctx.translate(canvas.width, canvas.height)
+  } else if (deg === 270) {
+    ctx.translate(0, canvas.height)
+  }
+  ctx.rotate(radians)
+}
+
+/**
+ * Mapping from EXIF orientation values to data
+ * regarding the rotation and mirroring necessary to
+ * render the canvas correctly
+ * Derived from:
+ * http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/
+ */
+const orientationToTransform = {
+  1: { rotation: 0, mirror: false },
+  2: { rotation: 0, mirror: true },
+  3: { rotation: 180, mirror: false },
+  4: { rotation: 180, mirror: true },
+  5: { rotation: 90, mirror: true },
+  6: { rotation: 90, mirror: false },
+  7: { rotation: 270, mirror: true },
+  8: { rotation: 270, mirror: false }
+}
+
+function applyOrientationCorrection(canvas, ctx, uri) {
+  const orientation = getOrientation(uri)
+  // Only apply transform if there is some non-normal orientation
+  if (orientation && orientation !== 1) {
+    console.log(orientation)
+    const transform = orientationToTransform[orientation]
+    const { rotation } = transform
+    const flipAspect = rotation === 90 || rotation === 270
+    if (flipAspect) {
+      // Fancy schmancy swap algo
+      canvas.width = canvas.height + canvas.width
+      canvas.height = canvas.width - canvas.height
+      canvas.width -= canvas.height
+    }
+    if (rotation > 0) {
+      applyRotation(canvas, ctx, rotation)
+    }
+  }
+}
+
+function getScale(width, height, viewportWidth, viewportHeight, fillViewport) {
+  function fitHorizontal() {
+    return viewportWidth / width
+  }
+  function fitVertical() {
+    return viewportHeight / height
+  }
+  fillViewport = !!fillViewport
+  const landscape = (width / height) > (viewportWidth / viewportHeight)
+  if (landscape) {
+    if (fillViewport) {
+      return fitVertical()
+    }
+    if (width > viewportWidth) {
+      return fitHorizontal()
+    }
+  } else {
+    if (fillViewport) {
+      return fitHorizontal()
+    }
+    if (height > viewportHeight) {
+      return fitVertical()
+    }
+  }
+  return 1
+}
+
+export function renderToCanvas(img, options) {
+  if (!img) return null
+  options = options || {}
+
+  // Canvas max size for any side
+  const maxSide = options.maxSide || 0
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  const initialScale = options.scale || 1
+  /*
+  // constrain
+  // Scale to needed to constrain canvas to max size
+  let scale = getScale(img.naturalWidth * initialScale, img.naturalHeight * initialScale, maxSide, maxSide, true)
+  // console.log(scale)
+  // Still need to apply the user defined scale
+  scale *= initialScale
+  canvas.width = Math.round(img.naturalWidth * scale)
+  canvas.height = Math.round(img.naturalHeight * scale)
+  */
+  const { naturalWidth, naturalHeight } = img
+  if (maxSide > 0) {
+    if (naturalWidth > naturalHeight) {
+      canvas.width = Math.min(maxSide, naturalWidth)
+      canvas.height = naturalHeight * canvas.width / naturalWidth
+    } else {
+      canvas.height = Math.min(maxSide, naturalHeight)
+      canvas.width = naturalWidth * canvas.height / naturalHeight
+    }
+  } else {
+    canvas.width = naturalWidth
+    canvas.height = naturalHeight
+  }
+  const { correctOrientation } = options
+  const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i)
+  const hasDataURI = !!img.src.match(/^data:/)
+
+  ctx.save()
+
+  // Can only correct orientation on JPEGs represented as dataURIs
+  // for the time being
+  if (correctOrientation && jpeg && hasDataURI) {
+    applyOrientationCorrection(canvas, ctx, img.src)
+  }
+  // Resize image if too large
+  // if (scale !== 1) {
+  //   ctx.scale(scale, scale)
+  // }
+
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+  ctx.restore()
+
+  return canvas
+}
+
+export function renderThumbnail(img) {
+  const resized = renderToCanvas(img, { correctOrientation: true })
+  // const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas')
+  // const ctx = canvas.getContext('2d')
+  // ctx.fillStyle = 'black'
+  // ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE)
+  // const xOffset = (MAX_SIDE - resized.width) / 2
+  // const yOffset = (MAX_SIDE - resized.height) / 2
+  // ctx.drawImage(resized, xOffset, yOffset, resized.width, resized.height)
+  return resized
+}
diff --git a/frontend/app/common/uploadImage.component.js b/frontend/app/common/uploadImage.component.js
new file mode 100644
index 0000000..3ae41c8
--- /dev/null
+++ b/frontend/app/common/uploadImage.component.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react'
+
+import { renderThumbnail } from './upload.helpers'
+
+export default class UploadImageComponent extends Component {
+  constructor(props) {
+    super(props)
+    document.body.addEventListener("dragover", this.dragOver.bind(this))
+    document.body.addEventListener("dragleave", this.dragLeave.bind(this))
+    document.body.addEventListener("drop", this.upload.bind(this))
+  }
+  
+  dragOver(e) {
+    e.stopPropagation()
+    e.preventDefault()
+    document.body.className = 'dragging'
+  }
+
+  dragLeave(e) {
+    e.stopPropagation()
+    e.preventDefault()
+    document.body.className = ''
+  }
+
+  upload(e) {
+    e.preventDefault()
+    document.body.className = ''
+    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
+    let i
+    let file
+    for (i = 0; i < files.length; i++) {
+      file = files[i]
+      if (file && file.type.match('image.*')) break
+    }
+    if (!file) {
+      console.log('No file specified')
+      return
+    }
+    const fr = new FileReader()
+    fr.onload = fileReaderEvent => {
+      fr.onload = null
+      const img = new Image()
+      img.onload = () => {
+        img.onload = null
+        this.resizeAndUpload(file, img)
+      }
+      img.src = fileReaderEvent.target.result
+    }
+    fr.readAsDataURL(file)
+  }
+
+  resizeAndUpload(file, img) {
+    const canvas = renderThumbnail(img, this.props)
+    canvas.toBlob(blob => {
+      this.props.onUpload({ file, img, canvas, blob, freshen: true })
+    }, 'image/jpeg', this.props.quality || 80)
+  }
+
+  render() {
+    return (
+      <div className='uploadButton'>
+        <input
+          type="file"
+          accept="image/*"
+          onChange={this.upload.bind(this)}
+          required
+        />
+        <div className='dragCurtain'>
+          <div className='dragLabel'>Drop image here</div>
+        </div>
+      </div>
+    )
+  }
+}
-- 
cgit v1.2.3-70-g09d2