lint

.eslintrc

@@ -0,0 +1,49 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "modules": true
+    }
+  },
+  "extends": [
+    "airbnb",
+  ],
+  "settings": {
+    "react": {
+      "version": "16.5.2"
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "window": true,
+  },
+  "rules": {
+    "arrow-parens": "off",
+    "comma-dangle": "off",    
+    "indent": ["error", 2, {
+      "SwitchCase": 1
+    }],
+    "max-len": ['error', {
+      "code": 100,
+      "ignoreStrings": true,
+      "ignoreTemplateLiterals": true,
+    }],
+    "no-continue": "off",
+    "no-debugger": "off",
+    "no-mixed-operators": "off",
+    "no-param-reassign": "off",
+    "no-plusplus": "off",
+    "no-underscore-dangle": "off",
+    "no-use-before-define": "off",
+    "no-multiple-empty-lines": ["error", { max: 1 }],
+    "object-curly-newline": "off",
+    "space-before-function-paren": ["error", "always"],
+    "no-trailing-spaces": ["error"],
+  }
+}

package.json

@@ -5,16 +5,23 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server --config ./webpack.config.js --mode development",
-    "test": "echo \"No test specified\" && exit 0"
+    "test": "echo \"No test specified\" && exit 0",
+    "lint": "./node_modules/eslint/bin/eslint.js src/**/*.js src/**/*.jsx"
   },
   "keywords": [],
   "author": "",
   "license": "Apache",
   "devDependencies": {
     "babel-core": "^6.26.3",
+    "babel-eslint": "^10.0.0",
     "babel-loader": "^7.1.5",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
+    "eslint": "^5.6.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.11.1",
     "react-hot-loader": "^4.3.3",
     "webpack": "^4.15.1",
     "webpack-cli": "^3.0.8",

src/api.js

@@ -10,18 +10,20 @@ const API_ORGANIZATIONS = `${API_V2}organizations/`;
 const CSRF_COOKIE_NAME = 'csrftoken';
 const CSRF_HEADER_NAME = 'X-CSRFToken';
 
-const http = axios.create({
-  xsrfCookieName: CSRF_COOKIE_NAME,
-  xsrfHeaderName: CSRF_HEADER_NAME,
-});
-
-let authenticated = false; // temporary
-
 class APIClient {
-  isAuthenticated() {
-    return authenticated;
+  constructor () {
+    this.authenticated = false; // temporary
+    this.http = axios.create({
+      xsrfCookieName: CSRF_COOKIE_NAME,
+      xsrfHeaderName: CSRF_HEADER_NAME,
+    });
   }
-  login(username, password, redirect = API_CONFIG) {
+
+  isAuthenticated () {
+    return this.authenticated;
+  }
+
+  login (username, password, redirect = API_CONFIG) {
     const un = encodeURIComponent(username);
     const pw = encodeURIComponent(password);
     const next = encodeURIComponent(redirect);
@@ -29,26 +31,26 @@ class APIClient {
     const data = `username=${un}&password=${pw}&next=${next}`;
     const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
 
-    return http.get(API_LOGIN, { headers })
-      .then(() => http.post(API_LOGIN, data, { headers }))
+    return this.http.get(API_LOGIN, { headers })
+      .then(() => this.http.post(API_LOGIN, data, { headers }))
       .then(res => {
-        authenticated = true; // temporary
+        this.authenticated = true; // temporary
 
         return res;
-      })
+      });
   }
 
-  logout() {
-    return http.delete(API_LOGIN);
+  logout () {
+    return this.http.delete(API_LOGIN);
   }
 
-  getProjects() {
-    return http.get(API_PROJECTS);
+  getProjects () {
+    return this.http.get(API_PROJECTS);
   }
 
-  getOrganizations() {
-    return http.get(API_ORGANIZATIONS);
+  getOrganizations () {
+    return this.http.get(API_ORGANIZATIONS);
   }
-};
+}
 
 export default new APIClient();

src/components/Login.jsx

@@ -7,67 +7,59 @@ import api from '../api';
 
 class Login extends Component {
   state = {
-  	username: '',
-  	password: '',
-    redirect: false,	
+    username: '',
+    password: '',
+    redirect: false,
   };
 
   handleChange = event => this.setState({ [event.target.name]: event.target.value });
 
   handleSubmit = event => {
-  	const { username, password } = this.state;
+    const { username, password } = this.state;
 
-  	event.preventDefault();
+    event.preventDefault();
 
     api.login(username, password)
-    	.then(() => this.setState({ redirect: true }))
-    	.then(() => api.getProjects())
-    	.then(res => console.log(res));
-  };
+      .then(() => this.setState({ redirect: true }));
+  }
 
-  render() {
+  render () {
     const { username, password, redirect } = this.state;
 
-	if (redirect) {
-		return (<Redirect to={'/'} />);
-	}
-  
+    if (redirect) {
+      return (<Redirect to="/" />);
+    }
+
     return (
-      <div className='column'>
-        <form onSubmit={this.handleSubmit}>
-          <div className='field'>
-            <label className='label'>Username</label>
-            <div className='control'>
-              <input
-                className='input'
-                type='text'
-                name='username'
-                onChange={this.handleChange}
-                value={username}
-                required
-              />
-            </div>
-          </div>
-          <div className='field'>
-            <label className='label'>Password</label>
-            <div className='control'>
-              <input
-                className='input'
-                type='password'
-                name='password'
-                onChange={this.handleChange}
-                value={password}
-                required
-              />
-            </div>
-          </div>
-          <div className='control'>
-            <Button type='submit'>
-              Login
-            </Button>
-          </div>
-        </form>
-      </div>
+      <form onSubmit={this.handleSubmit}>
+        <div className="field">
+          <label htmlFor="username">
+            Username
+            <input
+              id="username"
+              name="username"
+              type="text"
+              onChange={this.handleChange}
+              value={username}
+            />
+          </label>
+        </div>
+        <div>
+          <label htmlFor="password">
+            Password
+            <input
+              id="password"
+              name="password"
+              type="password"
+              onChange={this.handleChange}
+              value={password}
+            />
+          </label>
+        </div>
+        <Button type="submit">
+          Login
+        </Button>
+      </form>
     );
   }
 }

src/index.js

@@ -1 +1,3 @@
 import App from './App';
+
+export default App;