github.com/stampzilla/stampzilla-go@v2.0.0-rc9+incompatible/nodes/stampzilla-server/web/src/routes/security/index.js (about)

     1  import React, { Component } from 'react';
     2  import { connect } from 'react-redux';
     3  import Moment from 'react-moment';
     4  
     5  import { write } from '../../components/Websocket';
     6  import Card from '../../components/Card';
     7  
     8  const typeOrder = ['ca', 'server', 'client'];
     9  
    10  const sortPrio = usages =>
    11    usages
    12      .map(usage => typeOrder.indexOf(usage))
    13      .sort()
    14      .first();
    15  
    16  class Security extends Component {
    17    onClickNode = uuid => () => {
    18      const { history } = this.props;
    19      history.push(`/security/${uuid}`);
    20    };
    21  
    22    onClickAccept = connection => () => {
    23      write({
    24        type: 'accept-request',
    25        body: connection,
    26      });
    27    };
    28  
    29    onClickRevoke = serial => () => {
    30      write({
    31        type: 'revoke',
    32        body: serial,
    33      });
    34    };
    35  
    36    render() {
    37      const { certificates, requests, connections } = this.props;
    38  
    39      return (
    40        <React.Fragment>
    41          {requests.size > 0 && (
    42            <div className="row">
    43              <div className="col-md-12">
    44                <Card title="New node requests" bodyClassName="p-0">
    45                  <table className="table table-striped table-valign-middle">
    46                    <thead>
    47                      <tr>
    48                        <th>Requested identity</th>
    49                        <th>Type</th>
    50                        <th>Connecting from</th>
    51                        <th />
    52                      </tr>
    53                    </thead>
    54                    <tbody>
    55                      {requests
    56                        .map(n => (
    57                          <tr key={n.get('connection')}>
    58                            <td>
    59                              {n.get('identity').length !== 36 &&
    60                                n.get('identity')}
    61                              {n.get('identity').length === 36 &&
    62                                ((n.getIn(['subject', 'organizational_unit']) &&
    63                                  n
    64                                    .getIn(['subject', 'organizational_unit'])
    65                                    .join(' -> ')) ||
    66                                  n.get('identity'))}
    67                            </td>
    68                            <td>
    69                              {connections.getIn([n.get('connection'), 'type'])} (
    70                              {n.get('type')})
    71                            </td>
    72                            <td>
    73                              {connections.getIn([
    74                                n.get('connection'),
    75                                'remoteAddr',
    76                              ])}
    77                            </td>
    78                            <td className="text-right">
    79                              <button
    80                                className="btn btn-success"
    81                                onClick={this.onClickAccept(n.get('connection'))}
    82                              >
    83                                Accept
    84                              </button>
    85                            </td>
    86                          </tr>
    87                        ))
    88                        .toArray()}
    89                    </tbody>
    90                  </table>
    91                </Card>
    92              </div>
    93            </div>
    94          )}
    95  
    96          <div className="row">
    97            <div className="col-md-12">
    98              <Card title="Certificates" bodyClassName="p-0">
    99                <table className="table table-striped table-valign-middle">
   100                  <thead>
   101                    <tr>
   102                      <th>Serial</th>
   103                      <th>Common name</th>
   104                      <th>Type</th>
   105                      <th>Issued</th>
   106                      <th>Fingerprint (sha1)</th>
   107                      <th />
   108                    </tr>
   109                  </thead>
   110                  <tbody>
   111                    {certificates
   112                      .sort(
   113                        (a, b) =>
   114                          sortPrio(a.get('usage')) - sortPrio(b.get('usage')) ||
   115                          a.get('serial').localeCompare(b.get('serial')),
   116                      )
   117                      .map(n => (
   118                        <tr key={n.get('serial')}>
   119                          <td>{n.get('serial')}</td>
   120                          <td>
   121                            {n.get('commonName').length !== 36 &&
   122                              n.get('commonName')}
   123                            {n.get('commonName').length === 36 &&
   124                              ((n.getIn(['subject', 'organizational_unit']) &&
   125                                n
   126                                  .getIn(['subject', 'organizational_unit'])
   127                                  .join(' -> ')) ||
   128                                n.get('commonName'))}
   129                          </td>
   130                          <td>
   131                            {n
   132                              .get('usage')
   133                              .sort(
   134                                (a, b) =>
   135                                  typeOrder.indexOf(a) - typeOrder.indexOf(b),
   136                              )
   137                              .join(', ')}
   138                          </td>
   139                          <td>
   140                            <Moment fromNow withTitle>
   141                              {n.get('issued')}
   142                            </Moment>
   143                          </td>
   144                          <td>{n.getIn(['fingerprints', 'sha1'])}</td>
   145                          <td className="text-right">
   146                            <button
   147                              className="btn btn-danger"
   148                              onClick={this.onClickRevoke(n.get('serial'))}
   149                            >
   150                              Revoke
   151                            </button>
   152                          </td>
   153                        </tr>
   154                      ))
   155                      .toArray()}
   156                  </tbody>
   157                </table>
   158              </Card>
   159            </div>
   160          </div>
   161        </React.Fragment>
   162      );
   163    }
   164  }
   165  
   166  const mapToProps = state => ({
   167    certificates: state.getIn(['certificates', 'list']),
   168    requests: state.getIn(['requests', 'list']),
   169    connections: state.getIn(['connections', 'list']),
   170  });
   171  
   172  export default connect(mapToProps)(Security);