Flow, prettier, Login page

.flowconfig

@@ -0,0 +1,2 @@
+[options]
+module.name_mapper='^normandy\/\(.*\)$' -> '<PROJECT_ROOT>/src/normandy/\1'

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "parser": "flow",
+  "loglevel": "warn",
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.hover": false
+}

package.json

@@ -26,16 +26,13 @@
     "build": "react-app-rewired build",
     "test": "react-app-rewired test --env=jsdom",
     "eject": "react-scripts eject",
-    "precommit": "lint-staged"
+    "lint:flow": "flow --quiet",
-  },
+    "lint:prettier": "prettier **/**/*.js --write",
-  "lint-staged": {
+    "lint": "yarn run lint:flow && yarn run lint:prettier"
-    "*.{js,json,css,md,less}": ["prettier --write", "git add"]
   },
   "devDependencies": {
     "babel-plugin-import": "^1.6.5",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "flow-bin": "^0.66.0",
-    "husky": "^0.14.3",
-    "lint-staged": "^7.0.0",
     "prettier": "^1.10.2",
     "react-app-rewire-less": "^2.1.0",
     "react-app-rewired": "^1.4.1"

src/console/LoginPage.js

@@ -0,0 +1,58 @@
+/* @flow */
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+type Props = {
+  onAuth: Function,
+  history: ReactRouterHistory,
+  location: any,
+};
+type State = {};
+
+class LoginPage extends Component<Props, State> {
+  state = {};
+
+  onSubmit = evt => {
+    evt.preventDefault();
+    const form = evt.target;
+
+    let data = {};
+    let i = form.length - 1;
+    let input;
+    while (i >= 0) {
+      input = form[i];
+      if (input.name) {
+        data[input.name] = input.value;
+      }
+      i -= 1;
+    }
+
+    this.props.onAuth(
+      data.user,
+      Math.random()
+        .toString(36)
+        .slice(2),
+    );
+
+    // Route may have a `next` query param. If so, redirect to that page.
+    let query = this.props.location.search || '/';
+    query = query.replace('?next=', '');
+
+    this.props.history.push(query);
+  };
+
+  render() {
+    return (
+      <div className="LoginPage" onSubmit={this.onSubmit}>
+        <form>
+          <input type="text" name="user" placeholder="User" />
+          <input type="password" name="password" placeholder="Password" />
+
+          <button type="submit">Login</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default withRouter(LoginPage);

src/console/index.js

@@ -1,11 +1,50 @@
-import React, { Component } from "react";
+/* @flow */
-import logo from "./logo.svg";
+
-import "./App.css";
+import React, { Component } from 'react';
-import Normandy from "normandy/index.js";
+import logo from './logo.svg';
-import { BrowserRouter, Link } from "react-router-dom";
+import './App.css';
-import { Route } from "react-router";
+import LoginPage from './LoginPage';
+import { BrowserRouter, Link } from 'react-router-dom';
+import { Route, Redirect } from 'react-router';
+
+type AppProps = {};
+type AppState = {
+  authToken: ?string,
+  username: ?string,
+};
+
+const Homepage = props => (
+  <div>
+    <p>Welcome home!</p>
+    {props.authToken ? (
+      <p>
+        Go to the <Link to="/normandy">Normandy page</Link>.
+      </p>
+    ) : (
+      <p>
+        Go to the <Link to="/login">login page</Link>.
+      </p>
+    )}
+  </div>
+);
+
+const MockNormandy = props => (
+  <div>Normandy with auth token {props.authToken}</div>
+);
+
+class App extends Component<AppProps, AppState> {
+  state = {
+    authToken: null,
+    username: null,
+  };
+
+  onUserLogin = (username: string, authToken: string) => {
+    this.setState({
+      username,
+      authToken,
+    });
+  };
 
-class App extends Component {
   render() {
     return (
       <BrowserRouter>
@@ -14,17 +53,42 @@ class App extends Component {
             <img src={logo} className="App-logo" alt="logo" />
             <h1 className="App-title">Welcome to Delivery Console</h1>
           </header>
+          {this.state.username && (
+            <div>You are logged in as {this.state.username}.</div>
+          )}
           <div>
+            {/* Homepage */}
             <Route
+              exact
               path="/"
-              component={() => (
+              component={() => <Homepage authToken={this.state.authToken} />}
-                <div>
+            />
-                  <h1>Delivery Console</h1>
+
-                  <Link to="/normandy/">Normandy</Link>
+            {/* Login */}
-                </div>
+            <Route
-              )}
+              exact
+              path="/login/"
+              component={() =>
+                this.state.username ? (
+                  <Redirect to="/" />
+                ) : (
+                  <LoginPage onAuth={this.onUserLogin} />
+                )
+              }
+            />
+
+            {/* Normandy App */}
+            <Route
+              exact
+              path="/normandy/"
+              component={() =>
+                this.state.username ? (
+                  <MockNormandy authToken={this.state.authToken} />
+                ) : (
+                  <Redirect to="/login/?next=/normandy/" />
+                )
+              }
             />
-            <Route path="/normandy/" component={Normandy} />
           </div>
         </div>
       </BrowserRouter>

src/console/registerServiceWorker.js

@@ -1,117 +0,0 @@
-// In production, we register a service worker to serve assets from local cache.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
-// cached resources are updated in the background.
-
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Lets check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ'
-          );
-        });
-      } else {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the old content will have been purged and
-              // the fresh content will have been added to the cache.
-              // It's the perfect time to display a "New content is
-              // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.');
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      if (
-        response.status === 404 ||
-        response.headers.get('content-type').indexOf('javascript') === -1
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}

src/index.js

@@ -1,7 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import DevConsoleApp from "./console";
-// import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(<DevConsoleApp />, document.getElementById("root"));
-// registerServiceWorker();

yarn.lock

@@ -2930,7 +2930,13 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.1, fbjs@^0.8.15, fbjs@^0.8.16, fbjs@^0.8.9:
+fbemitter@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-2.1.1.tgz#523e14fdaf5248805bb02f62efc33be703f51865"
+  dependencies:
+    fbjs "^0.8.4"
+
+fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.15, fbjs@^0.8.16, fbjs@^0.8.4, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -3061,6 +3067,17 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+flow-bin@^0.66.0:
+  version "0.66.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.66.0.tgz#a96dde7015dc3343fd552a7b4963c02be705ca26"
+
+flux@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/flux/-/flux-3.1.3.tgz#d23bed515a79a22d933ab53ab4ada19d05b2f08a"
+  dependencies:
+    fbemitter "^2.0.0"
+    fbjs "^0.8.0"
+
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"