conjur-asset-ui 1.4.2 → 1.6.0

data/app/src/components/audit/table.js

@@ -0,0 +1,64 @@
+var React = require('react'),
+    update = require('react/lib/update');
+
+import {sortByOrder} from 'lodash';
+
+var AuditEntry = require('./entry'),
+    AuditTableHeader = require('./table_header'),
+    Refresh = require('../refresh/refresh');
+
+export default React.createClass({
+    displayName: 'AuditTable',
+
+    propTypes: {
+        caption: React.PropTypes.string,
+        compact: React.PropTypes.bool,
+        events: React.PropTypes.array,
+        isLoading: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            caption: 'Audit',
+            compact: false,
+            events: [],
+            isLoading: false
+        };
+    },
+
+    render() {
+        var entries = sortByOrder(this.props.events, ['id'], [false]).map((event) => {
+            // new way to clone objects, custom clone$ does not work no more as expected
+            var args = update(event, {
+                $merge: {
+                    key: event.id,
+                    compact: this.props.compact
+                }
+            });
+
+            return (
+              <AuditEntry {...args} />
+            );
+        });
+
+        var title;
+
+        if (this.props.caption !== '') {
+            title = (
+              <h3>{this.props.caption}<Refresh show={this.props.isLoading} /></h3>
+            );
+        }
+
+        return (
+          <section className="audit">
+            {title}
+            <table className="audit-table">
+              <AuditTableHeader key="thead" compact={this.props.compact} />
+              <tbody key="tbody">
+                {entries}
+              </tbody>
+            </table>
+          </section>
+        );
+    }
+});

data/app/src/components/audit/table_header.js

@@ -0,0 +1,37 @@
+var React = require('react');
+
+import {map} from 'lodash';
+
+var FieldsMixin = require('./fields_mixin');
+
+export default React.createClass({
+    displayName: 'AuditTableHeader',
+
+    mixins: [FieldsMixin],
+
+    propTypes: {
+        compact: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            compact: false
+        };
+    },
+
+    render() {
+        var items = map(this.fields(), (field) => {
+            return (
+              <th key={field}>{field.replace('auditview_', '').replace('_', ' ')}</th>
+            );
+        });
+
+        return (
+          <thead>
+            <tr>
+              {items}
+            </tr>
+          </thead>
+        );
+    }
+});

data/app/src/components/audit/timestamp.js

@@ -0,0 +1,28 @@
+var React = require('react'),
+    moment = require('moment');
+
+export default React.createClass({
+    displayName: 'AuditTimestamp',
+
+    propTypes: {
+        time: React.PropTypes.string
+    },
+
+    getDefaultProps() {
+        return {
+            time: '1970-01-01T00:00:00.000Z'
+        };
+    },
+
+    render() {
+        var ts = moment(this.props.time);
+
+        return (
+          <time className="timestamp"
+                dateTime={ts.format()}
+                title={ts.calendar()}>
+            {ts.fromNow()}
+          </time>
+        );
+    }
+});

data/app/src/components/auth/login.js

@@ -0,0 +1,177 @@
+import React, {Component, PropTypes} from 'react';
+import {readCookie} from '../../utils';
+
+import './login.less';
+
+export class Login extends Component {
+    constructor() {
+        super();
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.onLoginSuccess = this.onLoginSuccess.bind(this);
+        this.onLoginError = this.onLoginError.bind(this);
+        this.state = {
+            error: false,
+            isSubmiting: false,
+            applianceUrl: readCookie('conjur_appliance_url') || document.location.origin,
+            username: readCookie('conjur_username') || '',
+            password: readCookie('conjur_password') || ''
+        };
+    }
+
+    componentDidMount() {
+        const rmanager = this.context.flux.actions.getRManager();
+
+        if (rmanager.isLogged) {
+            this.redirect();
+        }
+    }
+
+    onLoginSuccess() {
+        const rmanager = this.context.flux.actions.getRManager();
+
+        if (rmanager.isLogged) {
+            this.redirect();
+        }
+
+        this.setState({error: false, isSubmiting: false});
+    }
+
+    onLoginError() {
+        this.setState({error: true, isSubmiting: false});
+    }
+
+    handleChange(e) {
+        e.preventDefault();
+
+        this.setState({
+            username: this.refs.username.getDOMNode().value,
+            password: this.refs.password.getDOMNode().value
+        });
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+
+        if (!this.state.isSubmiting) {
+            const rmanager = this.context.flux.actions.getRManager();
+
+            rmanager
+                .login(
+                    this.state.applianceUrl,
+                    this.state.username,
+                    this.state.password
+                )
+                .then(
+                    (isSuccess) => {
+                        if (isSuccess) {
+                            this.onLoginSuccess();
+                        } else {
+                            this.onLoginError();
+                        }
+                    }
+                );
+            this.setState({isSubmiting: true});
+        }
+    }
+
+    redirect() {
+        let {router} = this.context,
+            returnTo = router.getCurrentQuery().returnTo || '/ui';
+
+        window.setTimeout(() => {
+            router.replaceWith(returnTo);
+        }, 1);
+    }
+
+    render() {
+        const error = this.state.error === true && (<p>Bad login information</p>);
+
+        return (
+          <div className="b-login">
+            <div className="b-login--row">
+              <div className="container-fluid b-login--grid">
+                <div className="row">
+                  <div className="col-sm-12">
+                    <div className="b-login--wrapper">
+                      <div className="b-login--inner-wrapper">
+                        <div className="b-login__box">
+                          <div className="b-login__title-box text-center">
+                            <h3 className="b-login__title">
+                              Sign in to Conjur
+                            </h3>
+                          </div>
+                          <div>
+                            <div className="b-login__fields">
+                              <div className="login-info">
+                              Login to <strong>{this.state.applianceUrl}</strong> server
+                              </div>
+                              <form role="form" autoComplete="off">
+                                <div className="form-group">
+                                  <div className="input-group input-group-lg">
+                                    <div className="input-group-addon">
+                                      <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
+                                    </div>
+                                    <input className="form-control"
+                                           type="text"
+                                           placeholder="user name"
+                                           ref="username"
+                                           onChange={this.handleChange}
+                                           value={this.state.username}
+                                           disabled={this.state.isSubmiting} />
+                                  </div>
+                                </div>
+                                <div className="form-group">
+                                  <div className="input-group input-group-lg">
+                                    <div className="input-group-addon">
+                                      <span className="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+                                    </div>
+                                    <input className="form-control"
+                                           type="password"
+                                           placeholder="password"
+                                           ref="password"
+                                           onChange={this.handleChange}
+                                           value={this.state.password}
+                                           disabled={this.state.isSubmiting} />
+                                  </div>
+                                </div>
+                                <div className="form-group">
+                                  <div className="container-fluid">
+                                    <div className="row">
+                                      <div className="col-xs-8">
+                                        {error}
+                                      </div>
+                                      <div className="col-xs-4 text-right"
+                                           style={{paddingRight: '0'}}>
+                                        <button role="button"
+                                                className="btn b-login__btn"
+                                                type="submit"
+                                                onClick={this.handleSubmit}
+                                                disabled={this.state.isSubmiting}>
+                                          Login
+                                        </button>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </form>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+    }
+}
+
+Login.displayName = 'AuthLogin';
+
+Login.contextTypes = {
+    flux: PropTypes.object,
+    router: PropTypes.func
+};

data/app/src/components/auth/login.less

@@ -0,0 +1,71 @@
+.b-login {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    overflow: auto;
+    position: fixed;
+    background: #43525A;
+}
+
+.b-login--row {
+    margin: 50px auto auto;
+}
+
+.b-login--grid {
+    width: 500px;
+}
+
+.b-login--wrapper {
+  position: relative;
+}
+
+.b-login--inner-wrapper {
+  background: #fff;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  margin-bottom: 25px;
+}
+
+.b-login__title-box {
+    color: white;
+    background: #4A90E2;
+}
+
+.b-login__box {
+    padding: 0;
+}
+
+.b-login__title {
+    margin: 0;
+    padding: 25px;
+}
+
+.b-login__fields {
+    padding: 25px;
+    paddingTop: 0;
+    paddingBottom: 0;
+    margin: auto;
+    marginBottom: 25px;
+    marginTop: 25px;
+}
+
+.b-login__btn {
+    color: #79B0EC;
+    background: 0 0;
+    line-height: 1.78571;
+    padding: 10px 25px;
+    border-radius: 20px;
+    border: 2px solid;
+    -webkit-transition: all .2s;
+    transition: all .2s;
+    text-transform: uppercase;
+    line-height: 1.78571;
+}
+
+.login-info {
+    padding-bottom: 25px;
+    font-size: 14px;
+}

data/app/src/components/auth/logout.js

@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+
+import './logout.less';
+
+export class Logout extends Component {
+    componentDidMount() {
+        this.context.flux.actions.getRManager().logout();
+    }
+
+    render() {
+        return (
+          <div className="container-fluid b-logout">
+            <div className="row b-logout--row">
+              <div className="col-md-12">
+                <div className="error-template">
+                  <h1>
+                    Goodbye!
+                  </h1>
+                  <h2>
+                    See you next time
+                  </h2>
+                  <div className="error-details">
+                    You have logged out from the Conjur. Feel free go to the login screen and signin again.
+                  </div>
+                  <div className="b-logout--actions">
+                    <a href="/ui" className="btn btn-primary btn-lg">
+                      <span className="glyphicon glyphicon-console"></span> Take me to the login screen again
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+    }
+}
+
+Logout.displayName = 'AuthLogout';
+
+Logout.contextTypes = {
+    flux: React.PropTypes.object
+};

data/app/src/components/auth/logout.less

@@ -0,0 +1,21 @@
+.b-logout {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    overflow: auto;
+    position: fixed;
+    background: #43525A;
+    color: white;
+}
+
+.b-logout--row {
+    margin: 50px auto auto;
+    margin-top: 70px;
+    margin-left: 70px !important;
+}
+
+.b-logout--actions {
+    margin-top: 10px;
+}