initial commit

src/App.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render } from 'react-dom';
+import {
+  HashRouter as Router,
+  Route,
+  Link,
+  Redirect
+} from 'react-router-dom';
+
+import api from './api';
+
+import About from './components/About';
+import Dashboard from './components/Dashboard';
+import Login from './components/Login';
+import Organizations from './components/Organizations';
+
+const AuthenticatedRoute = ({ component: Component, ...rest }) => (
+  <Route {...rest} render={props => (
+    api.isAuthenticated() ? (
+      <Component {...props}/>
+    ) : (
+      <Redirect to={{
+        pathname: '/login',
+        state: { from: props.location }
+      }}/>
+    )
+  )}/>
+)
+
+const App = () => (
+  <Router>
+    <div>
+      <Route path="/login" component={Login} />
+      <AuthenticatedRoute exact path="/" component={Dashboard} />
+      <AuthenticatedRoute exact path="/about" component={About} />
+      <AuthenticatedRoute exact path="/organizations" component={Organizations} />
+    </div>
+  </Router>
+);
+
+const el = document.getElementById('app');
+
+render(<App />, el);

src/api.js

@@ -0,0 +1,54 @@
+import axios from 'axios';
+
+const API_ROOT = '/api/';
+const API_LOGIN = `${API_ROOT}login/`;
+const API_V2 = `${API_ROOT}v2/`;
+const API_CONFIG = `${API_V2}config/`;
+const API_PROJECTS = `${API_V2}projects/`;
+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;
+  }
+  login(username, password, redirect = API_CONFIG) {
+    const un = encodeURIComponent(username);
+    const pw = encodeURIComponent(password);
+    const next = encodeURIComponent(redirect);
+
+    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 }))
+      .then(res => {
+        authenticated = true; // temporary
+
+        return res;
+      })
+  }
+
+  logout() {
+    return http.delete(API_LOGIN);
+  }
+
+  getProjects() {
+    return http.get(API_PROJECTS);
+  }
+
+  getOrganizations() {
+    return http.get(API_ORGANIZATIONS);
+  }
+};
+
+export default new APIClient();

src/components/About.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const About = () => (
+  <div>
+    <h2>About</h2>
+  </div>
+);
+
+export default About;

src/components/Dashboard.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Dashboard = () => (
+  <div>
+    <h2>Dashboard</h2>
+  </div>
+);
+
+export default Dashboard;

src/components/Login.jsx

@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { Button } from '@patternfly/react-core';
+
+import api from '../api';
+
+class Login extends Component {
+  state = {
+  	username: '',
+  	password: '',
+    redirect: false,	
+  };
+
+  handleChange = event => this.setState({ [event.target.name]: event.target.value });
+
+  handleSubmit = event => {
+  	const { username, password } = this.state;
+
+  	event.preventDefault();
+
+    api.login(username, password)
+    	.then(() => this.setState({ redirect: true }))
+    	.then(() => api.getProjects())
+    	.then(res => console.log(res));
+  };
+
+  render() {
+    const { username, password, redirect } = this.state;
+
+	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>
+    );
+  }
+}
+
+export default Login;

src/components/Organizations.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Organizations = () => (
+  <div>
+    <h2>Organizations</h2>
+  </div>
+);
+
+export default Organizations;

src/index.js

@@ -0,0 +1 @@
+import App from './App';