diff --git a/app/components/Auth.js b/app/components/Auth.js index 90c9fd20..fa8ce301 100644 --- a/app/components/Auth.js +++ b/app/components/Auth.js @@ -2,7 +2,8 @@ import React from 'react'; import { Provider } from 'mobx-react'; import stores from 'stores'; -import SettingsStore from 'stores/SettingsStore'; +import ApiKeysStore from 'stores/settings/ApiKeysStore'; +import MembersStore from 'stores/settings/MembersStore'; import DocumentsStore from 'stores/DocumentsStore'; import CollectionsStore from 'stores/CollectionsStore'; import CacheStore from 'stores/CacheStore'; @@ -22,7 +23,8 @@ const Auth = ({ children }: Props) => { const { user, team } = stores.auth; const cache = new CacheStore(user.id); authenticatedStores = { - settings: new SettingsStore(), + apiKeys: new ApiKeysStore(), + members: new MembersStore(), documents: new DocumentsStore({ ui: stores.ui, cache, diff --git a/app/scenes/Settings/Members.js b/app/scenes/Settings/Members.js index 748b90f8..c0c1b1dd 100644 --- a/app/scenes/Settings/Members.js +++ b/app/scenes/Settings/Members.js @@ -1,5 +1,6 @@ // @flow import React, { Component } from 'react'; +import invariant from 'invariant'; import { observable } from 'mobx'; import { observer, inject } from 'mobx-react'; import styled from 'styled-components'; @@ -7,17 +8,20 @@ import Flex from 'shared/components/Flex'; import Avatar from 'components/Avatar'; import { color } from 'shared/styles/constants'; +import AuthStore from 'stores/AuthStore'; import ErrorsStore from 'stores/ErrorsStore'; -import SettingsStore from 'stores/SettingsStore'; +import MembersStore from 'stores/settings/MembersStore'; import CenteredContent from 'components/CenteredContent'; import LoadingPlaceholder from 'components/LoadingPlaceholder'; import PageTitle from 'components/PageTitle'; +import MemberMenu from './components/MemberMenu'; @observer class Members extends Component { props: { + auth: AuthStore, errors: ErrorsStore, - settings: SettingsStore, + members: MembersStore, }; @observable members; @@ -27,28 +31,37 @@ class Members extends Component { @observable isInviting: boolean = false; componentDidMount() { - this.props.settings.fetchMembers(); + this.props.members.fetchMembers(); } render() { + const user = this.props.auth.user; + invariant(user, 'User should exist'); + return (

Members

- {!this.props.settings.isFetching ? ( + {!this.props.members.isFetching ? ( - {this.props.settings.members && ( + {this.props.members.members && ( - {this.props.settings.members.map(member => ( + {this.props.members.members.map(member => ( {member.name} {member.email && `(${member.email})`} - {member.isAdmin && Admin} + {member.isAdmin && ( + Admin + )} + {member.isSuspended && Suspended} + + {user.id !== member.id && } + ))} @@ -84,12 +97,15 @@ const UserName = styled.span` padding-left: 8px; `; -const AdminBadge = styled.span` +const Badge = styled.span` margin-left: 10px; - color: #777; - font-size: 13px; + padding: 2px 6px; + background-color: ${({ admin }) => (admin ? color.primary : color.smokeDark)}; + color: ${({ admin }) => (admin ? color.white : color.text)}; + border-radius: 4px; + font-size: 11px; text-transform: uppercase; font-weight: normal; `; -export default inject('errors', 'settings')(Members); +export default inject('auth', 'errors', 'members')(Members); diff --git a/app/scenes/Settings/Tokens.js b/app/scenes/Settings/Tokens.js index c7c9ff51..3d8bdffc 100644 --- a/app/scenes/Settings/Tokens.js +++ b/app/scenes/Settings/Tokens.js @@ -5,7 +5,7 @@ import { observer, inject } from 'mobx-react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; import ApiToken from './components/ApiToken'; -import SettingsStore from 'stores/SettingsStore'; +import ApiKeysStore from 'stores/settings/ApiKeysStore'; import { color } from 'shared/styles/constants'; import Button from 'components/Button'; @@ -19,11 +19,11 @@ import Subheading from 'components/Subheading'; class Tokens extends Component { @observable name: string = ''; props: { - settings: SettingsStore, + apiKeys: ApiKeysStore, }; componentDidMount() { - this.props.settings.fetchApiKeys(); + this.props.apiKeys.fetchApiKeys(); } handleUpdate = (ev: SyntheticInputEvent) => { @@ -32,13 +32,13 @@ class Tokens extends Component { handleSubmit = async (ev: SyntheticEvent) => { ev.preventDefault(); - await this.props.settings.createApiKey(this.name); + await this.props.apiKeys.createApiKey(this.name); this.name = ''; }; render() { - const { settings } = this.props; - const hasApiKeys = settings.apiKeys.length > 0; + const { apiKeys } = this.props; + const hasApiKeys = apiKeys.apiKeys.length > 0; return ( @@ -49,13 +49,13 @@ class Tokens extends Component { Your tokens, - {settings.apiKeys.map(key => ( + {apiKeys.apiKeys.map(key => ( ))} @@ -78,7 +78,7 @@ class Tokens extends Component {