public/js/views/user.js in conjur-asset-ui-1.3.0 vs public/js/views/user.js in conjur-asset-ui-1.3.1
- old
+ new
@@ -1,68 +1,191 @@
/** @jsx React.DOM */
+/* global conjur, _, React, ReactBootstrap */
-//var ReactBootstrap=root.ReactBootstrap;
-var TabbedArea = ReactBootstrap.TabbedArea;
-var TabPane = ReactBootstrap.TabPane;
+(function(conjur, _, React, ReactBootstrap) {
+ 'use strict';
-var User = React.createClass({
- mixins: [conjur.views.mixins.Tab],
- render: function(){
- var user = this.props.data.user;
+ var TabbedArea = ReactBootstrap.TabbedArea,
+ TabPane = ReactBootstrap.TabPane,
+ Tab = conjur.views.mixins.Tab,
+ AuditBox = window.AuditBox,
+ RoleLink = conjur.views.RoleLink;
- // TODO: refactor
- // TODO: show public keys
- // TODO: actions menu (e.g. 'upload public key', 'add annotation')
- // TODO: memberships panel
- var overview_tab =
- <TabPane key="overview" tab="Overview">
+ var PubkeyItem = React.createClass({
+ render: function() {
+ return (
+ <div className="b-pubkey">
+ <div className="b-pubkey__logo">
+ <span className="badge">{this.props.pubkey[0]}</span>
+ </div>
+ <ul className="b-pubkey__list list-unstyled">
+ <li className="b-pubkey__name">
+ {this.props.pubkey[2]}
+ </li>
+ <li className="b-pubkey__fingerprint">
+ {/* TODO: key fingerprint */}
+ </li>
+ <li className="b-pubkey__info">
+ {/* TODO: When added, when last time used */}
+ </li>
+ </ul>
+ <div className="b-pubkeys__actions">
+ {/* TODO: Action buttons */}
+ </div>
+ </div>
+ );
+ }
+ });
+
+ var PubkeysList = React.createClass({
+ render: function() {
+ var login = this.props.login;
+
+ var pubkeysList = this.props.pubkeys.map(function(k, idx, coll) {
+ var tokens = k.split(' ');
+
+ console.log(arguments);
+
+ var className = 'b-pubkeys__item list-group-item list-group-item-noborder';
+
+ if (idx + 1 !== coll.length) {
+ className = className + ' b-pubkeys__item--headline';
+ }
+
+ return (
+ <li className={className}>
+ <PubkeyItem pubkey={tokens} />
+ </li>
+ );
+ });
+
+ return (
+ <div className="b-pubkeys">
+ <PubkeysHelp>
+ This is list of SSH public keys associated with user {login}.
+ </PubkeysHelp>
+ <ul className="b-pubkeys__list">
+ {pubkeysList}
+ </ul>
+ </div>
+ );
+ }
+ });
+
+ var PubkeysHelp = React.createClass({
+ render: function() {
+ var ret;
+
+ if (React.Children.count(this.props.children) > 0) {
+ ret = (
+ <p className="b-pubkeys__help">
+ {this.props.children}
+ </p>
+ );
+ } else {
+ var login = this.props.login;
+
+ ret = (
+ <p className="b-pubkeys__help">
+ User {login} have not any pubkey. Use follow command to create one:
+ <pre>$ conjur pubkeys add {login} @id_{login}.pub</pre>
+ </p>
+ );
+ }
+
+ return ret;
+ }
+ });
+
+ var PubkeysTabContent = React.createClass({
+ render: function() {
+ var body;
+
+ if (this.props.pubkeys.length > 0) {
+ body = (
+ <PubkeysList login={this.props.login} pubkeys={this.props.pubkeys} />
+ );
+ } else {
+ body = (
+ <div className="b-pubkeys">
+ <PubkeysHelp login={this.props.login} />
+ </div>
+ );
+ }
+
+ return body;
+ }
+ });
+
+ this.User = React.createClass({
+ mixins: [Tab],
+
+ render: function() {
+ var user = this.props.data.user;
+
+ // TODO: refactor
+ // TODO: show public keys
+ // TODO: actions menu (e.g. 'upload public key', 'add annotation')
+ // TODO: memberships panel
+ var overviewTab = (
+ <TabPane key="overview" tab="Overview">
<dl className="dl-horizontal">
<dt>Created by</dt>
<dd><RoleLink id={user.userid}/></dd>
<dt>Owner</dt>
<dd><RoleLink id={user.ownerid}/></dd>
<dt>Uidnumber</dt>
<dd>{user.uidnumber}</dd>
</dl>
- </TabPane>;
+ </TabPane>
+ );
- var audit_tab=
- <TabPane key="audit" tab="Recent Activity">
+ var auditTab = (
+ <TabPane key="audit" tab="Recent Activity">
<div className="audit auditUser">
- <AuditBox roles={[user.roleid]} resources={[user.resource_identifier]} tabview={true}/>
+ <AuditBox roles={[user.roleid]}
+ resources={[user.resource_identifier]}
+ tabview={true} />
</div>
- </TabPane>;
+ </TabPane>
+ );
- var pubkeys_list = this.props.data.pubkeys.map(function(k) {
- var tokens = k.split(" ");
- return <li className="list-group-item list-group-item-noborder">
- <span className="badge">{tokens[0]}</span>
- {tokens[tokens.length-1]}
- </li>
- });
- var pubkeys_tab = <TabPane key="pubkeys" tab={get_tabname("Public Keys", this.props.data.pubkeys)}>
- <div className="pubkeys pubkeysUser">
- <ul className="list-group">
- {pubkeys_list}
- </ul>
- </div>
- </TabPane>;
+ var pubkeysTab = (
+ <TabPane key="pubkeys"
+ tab={conjur.utils.getTabname('Public Keys', this.props.data.pubkeys)}>
+ <PubkeysTabContent login={user.login} pubkeys={this.props.data.pubkeys} />
+ </TabPane>
+ );
- var permissions_tab = this.permissions_tab(user.roleid);
- var memberships_tab = this.memberships_tab(user.roleid);
- var annotations_tab = this.annotations_tab();
- var owned_tab = this.owned_tab();
+ var permissionsTab = this.permissionsTab(user.roleid);
+ var membershipsTab = this.membershipsTab(user.roleid);
+ var annotationsTab = this.annotationsTab();
+ var ownedTab = this.ownedTab();
- var tabs=_.compact([overview_tab, owned_tab, memberships_tab,
- permissions_tab, annotations_tab, pubkeys_tab, audit_tab]);
+ var tabs = _.compact([
+ overviewTab,
+ ownedTab,
+ membershipsTab,
+ permissionsTab,
+ annotationsTab,
+ pubkeysTab,
+ auditTab
+ ]);
+ return (
+ <div className="user">
+ <h2>User {user.login}</h2>
+ <TabbedArea defaultActiveKey="overview">
+ {tabs}
+ </TabbedArea>
+ </div>
+ );
+ }
+ });
- return (
- <div className="user">
- <h2> User {user.login} </h2>
- <TabbedArea defaultActiveKey="overview">
- {tabs}
- </TabbedArea>
- </div>
- );
- }
-});
+}).bind(conjur.views)
+(
+ conjur,
+ _,
+ React,
+ ReactBootstrap
+);