Merge pull request #32 from djenriquez/routing-refactor

Refactoring using proper react-router practices
djenriquez · Dec 23, 2016 · 61be12f · 61be12f
2 parents 581b49f + 4f2494e
commit 61be12f
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,9 @@ A beautiful way to manage your secrets in Vault
 Configuration is accessed by clicking on the configuration cog on the login page.
 ![Configuration](https://github.com/djenriquez/vault-ui/raw/master/images/Config.png)
 ### Vault Endpoint
-Users can enter in the full endpoint to Vault, including scheme.
+Users can enter in the full endpoint to Vault, including scheme.  When running the docker image, it is possible to
+set an environment variable `VAULT_DEFAULT_URL`, which will set the default endpoint for users without needing them
+to enter one in the UI.  This default can be overridden if the user fills out the endpoint manually.
 
 ## Authentication
 Currently supported authentication backends:

diff --git a/app/App.jsx b/app/App.jsx
@@ -1,11 +1,16 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom';
 import Login from './components/Login/Login.jsx';
-import Home from './components/Home/Home.jsx';
 import { Router, Route, Link, browserHistory } from 'react-router'
 import injectTapEventPlugin from 'react-tap-event-plugin';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import App from './components/App/App.jsx';
+import Secrets from './components/Secrets/Secrets.jsx';
+import Health from './components/Health/Health.jsx';
+import Policies from './components/Policies/Home.jsx';
+import Settings from './components/Settings/Settings.jsx';
+import ResponseWrapper from './components/ResponseWrapper/ResponseWrapper.jsx';
 
 injectTapEventPlugin();
 
@@ -41,8 +46,13 @@ ReactDOM.render((
     <MuiThemeProvider muiTheme={muiTheme}>
   <Router history={browserHistory}>
       <Route path="/login" component={Login}/>
-      <Route path="/" component={Home} onEnter={checkAccessToken}>
-          <Route path="*" component={Home}/>
+      <Route path="/" component={App} onEnter={checkAccessToken}>
+          <Route path="/secrets" component={Secrets}/>
+          <Route path="/health" component={Health}/>
+          <Route path="/secrets" component={Secrets}/>
+          <Route path="/settings" component={Settings}/>
+          <Route path="/responsewrapper" component={ResponseWrapper}/>
+          <Route path="/policies/:policy" component={Policies}/>
       </Route>
   </Router>
   </MuiThemeProvider>

diff --git a/app/components/Home/Home.jsx → app/components/App/App.jsx b/app/components/Home/Home.jsx → app/components/App/App.jsx
@@ -1,27 +1,19 @@
-import React, { PropTypes } from 'react'
-import Snackbar from 'material-ui/Snackbar';
-import { green500, red500, yellow500 } from 'material-ui/styles/colors.js'
-import axios from 'axios';
-
-import Header from '../shared/Header/Header.jsx';
+import React from 'react';
 import Menu from '../shared/Menu/Menu.jsx';
-import Secrets from '../Secrets/Secrets.jsx';
-import Health from '../Health/Health.jsx';
-import Policies from '../Policies/Home.jsx';
-import Settings from '../Settings/Settings.jsx';
-import ResponseWrapper from '../ResponseWrapper/ResponseWrapper.jsx';
-
-import styles from './home.css';
+import Header from '../shared/Header/Header.jsx';
+import Snackbar from 'material-ui/Snackbar';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import { browserHistory } from 'react-router';
+import { green500, red500, yellow500 } from 'material-ui/styles/colors.js'
+import styles from './app.css';
 
-var logoutCheck;
+let twoMinuteWarningTimeout;
+let logoutTimeout;
 
-export default class Home extends React.Component {
+export default class App extends React.Component {
     constructor(props) {
         super(props);
-        this.renderContent = this.renderContent.bind(this);
         this.renderLogoutDialog = this.renderLogoutDialog.bind(this);
         this.state = {
             snackbarMessage: '',
@@ -33,10 +25,6 @@ export default class Home extends React.Component {
         }
     }
 
-    componentWillUnmount() {
-        clearInterval(logoutCheck)
-    }
-
     componentDidMount() {
         if (!window.localStorage.getItem('showDeleteModal')) {
             window.localStorage.setItem('showDeleteModal', 'true');
@@ -49,20 +37,29 @@ export default class Home extends React.Component {
             });
         });
 
-        logoutCheck = window.setInterval(() => {
-            let tokenExpireDate = window.localStorage.getItem('vaultAccessTokenExpiration');
-            let TWO_MINUTES = 1000 * 60 * 2;
-            if (tokenExpireDate - TWO_MINUTES < Date.now()) {
-                if (!this.state.logoutPromptSeen) {
-                    this.setState({
-                        logoutOpen: true
-                    });
-                }
-            }
-            if (tokenExpireDate < Date.now()) {
-                browserHistory.push('/login');
+        let tokenExpireDate = window.localStorage.getItem('vaultAccessTokenExpiration');
+        let TWO_MINUTES = 1000 * 60 * 2;
+
+        let twoMinuteWarningTimeout = () => {
+            if (!this.state.logoutPromptSeen) {
+                this.setState({
+                    logoutOpen: true
+                });
             }
-        },1000*5);
+        }
+
+        let logoutTimeout = () => {
+            browserHistory.push('/login');
+        }
+        if (tokenExpireDate >= 0) {
+            setTimeout(logoutTimeout, tokenExpireDate);
+            setTimeout(twoMinuteWarningTimeout, tokenExpireDate - TWO_MINUTES);
+        }
+    }
+
+    componentWillUnmount() {
+        clearTimeout(logoutTimeout);
+        clearTimeout(twoMinuteWarningTimeout);
     }
 
     renderLogoutDialog() {
@@ -78,38 +75,19 @@ export default class Home extends React.Component {
                 open={this.state.logoutOpen}
                 onRequestClose={() => this.setState({ logoutOpen: false, logoutPromptSeen: true })}
                 >
-                <div className={styles.error}>Your token will expire in 2 minutes.  You'll want to finish up what you are working on!</div>
+                <div className={styles.error}>Your token will expire in 2 minutes.  You will want to finish up what you are working on!</div>
             </Dialog>
         );
     }
 
-    renderContent() {
-        switch (this.props.location.pathname) {
-            case '/secrets':
-                return <Secrets />
-            case '/health':
-                return <Health />
-            case '/settings':
-                return <Settings />
-            case '/responsewrapper':
-                return <ResponseWrapper />
-            case '/policies/manage':
-            case '/policies/github':
-            case '/policies/ec2':
-                let subPath = _.last(this.props.location.pathname.split('/'));
-                return <Policies subPath={subPath}/>
-            default:
-                return (
-                    <div>
-                        <h1 id={styles.welcomeHeadline}>Welcome to Vault UI.</h1>
-                        <p>From here you can manage your secrets, check the health of your Vault clusters, and more.
-                        Use the menu on the left to navigate around.</p>
-                    </div>
-                );
-        }
-    }
-
     render() {
+        let welcome = (
+            <div>
+                <h1 id={styles.welcomeHeadline}>Welcome to Vault UI.</h1>
+                <p>From here you can manage your secrets, check the health of your Vault clusters, and more.
+                Use the menu on the left to navigate around.</p>
+            </div>
+        );
         let messageStyle = { backgroundColor: green500 };
         if (this.state.snackbarType == 'warn') {
             messageStyle = { backgroundColor: yellow500 };
@@ -130,7 +108,7 @@ export default class Home extends React.Component {
             <Header />
             <Menu pathname={this.props.location.pathname} />
             <div id={styles.content}>
-                {this.renderContent()}
+                {this.props.children || welcome}
             </div>
 
         </div>;

diff --git a/app/components/Home/home.css → app/components/App/app.css b/app/components/Home/home.css → app/components/App/app.css
diff --git a/app/components/Login/Login.jsx b/app/components/Login/Login.jsx
@@ -135,7 +135,7 @@ export default class Login extends React.Component {
         let accessToken = _.get(resp, 'data.client_token');
         if (accessToken) {
             window.localStorage.setItem("vaultAccessToken", accessToken);
-            let leaseDuration = _.get(resp, 'data.lease_duration') === 0 ? 8640000000000000 : Date.now() + _.get(resp, 'data.lease_duration') * 1000
+            let leaseDuration = _.get(resp, 'data.lease_duration') === 0 ? -1 : _.get(resp, 'data.lease_duration') * 1000
             window.localStorage.setItem('vaultAccessTokenExpiration', leaseDuration)
             window.location.href = '/';
         } else {

diff --git a/app/components/Policies/Github.jsx b/app/components/Policies/Github.jsx
@@ -209,7 +209,7 @@ export default class Github extends React.Component {
                 {this.renderOrganizationDialog()}
                 <p>Here you can view, update, and delete policies assigned to teams in your Github org.</p>
                 <div className="row middle-xs" key="org">
-                    <p>Current Organization: <span className={styles.orgName}>{<FlatButton label={this.state.organization.toUpperCase()} primary={true} onTouchTap={() => this.setState({ requestOrganization: true })} />}</span></p>
+                    <p>Current Organization: <span className={styles.orgName}>{this.state.organization ? <FlatButton label={this.state.organization.toUpperCase()} primary={true} onTouchTap={() => this.setState({ requestOrganization: true })} /> : ""}</span></p>
 
                 </div>
                 <div className="row" key="team">

diff --git a/app/components/Policies/Home.jsx b/app/components/Policies/Home.jsx
@@ -70,7 +70,7 @@ export default class Home extends React.Component {
     }
 
     renderPolicyPage() {
-        switch (this.props.subPath) {
+        switch (this.props.params.policy) {
             case 'manage':
                 return <Manage />
             case 'github':