content: import React from 'react';
  import {Decorator as Cerebral} from 'cerebral-view-react';
  import styles from './styles.css';
  
  @Cerebral({
    users: 'admin.users',
    newUser: 'admin.newUser'
  })
  class Users extends React.Component {
    renderUsersList() {
      return this.props.users.map((user, index) => {
        return (
          <tr key={index}>
            <td>{user.id}</td>
            <td>{user.password}</td>
            <td>{user.isAdmin ? 'Ja' : 'Nei'}</td>
            <td>{user.userAccess ? user.userAccess.join(', ') : ''}</td>
            <td>
              {index > 0
              ? <button onClick={() => this.props.signals.admin.deleteUserClicked({id: user.id})}>Slett</button>
              : null}
            </td>
          </tr>
        );
      });
    }
    render() {
      return (
        <div className={styles.wrapper}>
          <h2>Brukere</h2>
          <table className={styles.usersTable}>
            <tbody>
              <tr>
                <th>Brukernavn</th>
                <th>Passord</th>
                <th>Admin-rettigheter</th>
                <th>Tilganger</th>
                <th>Slett bruker</th>
              </tr>
              {this.renderUsersList()}
            </tbody>
          </table>
          <div>
            <h4 className={styles.subTitle}>Opprett bruker</h4>
            <form className={styles.addUserForm} onSubmit={(e) => {
              this.props.signals.admin.addUserSubmitted();
              e.preventDefault();
            }}>
              <input
                value={this.props.newUser.id}
                onChange={(e) => this.props.signals.admin.newUserIdChanged({value: e.target.value})}
                placeholder="Brukernavn"
                required
                />
              <input
                value={this.props.newUser.password}
                onChange={(e) => this.props.signals.admin.newUserPasswordChanged({value: e.target.value})}
                placeholder="Passord"
                required
                />
              <div className={styles.checkboxWrapper}>
                <div>Admin</div>
                <input
                  onChange={(e) => this.props.signals.admin.newUserIsAdminChanged({value: e.target.checked})}
                  type="checkbox"
                  checked={this.props.newUser.isAdmin}
                  />
              </div>
              <button type="submit">Opprett</button>
            </form>
          </div>
        </div>
      );
    }
  }
  
  export default Users;
  