UI work

app/components/Auth.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import { Provider } from 'mobx-react';
 import stores from 'stores';
-import ApiKeysStore from 'stores/settings/ApiKeysStore';
-import MembersStore from 'stores/settings/MembersStore';
+import ApiKeySettingsStore from 'stores/ApiKeySettingsStore';
+import MemberSettingsStore from 'stores/MemberSettingsStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import CollectionsStore from 'stores/CollectionsStore';
 import CacheStore from 'stores/CacheStore';
@@ -23,8 +23,8 @@ const Auth = ({ children }: Props) => {
       const { user, team } = stores.auth;
       const cache = new CacheStore(user.id);
       authenticatedStores = {
-        apiKeys: new ApiKeysStore(),
-        members: new MembersStore(),
+        apiKeys: new ApiKeySettingsStore(),
+        memberSettings: new MemberSettingsStore(),
         documents: new DocumentsStore({
           ui: stores.ui,
           cache,

app/scenes/Settings/Members.js

@@ -10,7 +10,7 @@ import { color } from 'shared/styles/constants';
 
 import AuthStore from 'stores/AuthStore';
 import ErrorsStore from 'stores/ErrorsStore';
-import MembersStore from 'stores/settings/MembersStore';
+import MemberSettingsStore from 'stores/MemberSettingsStore';
 import CenteredContent from 'components/CenteredContent';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import PageTitle from 'components/PageTitle';
@@ -21,7 +21,7 @@ class Members extends Component {
   props: {
     auth: AuthStore,
     errors: ErrorsStore,
-    members: MembersStore,
+    memberSettings: MemberSettingsStore,
   };
 
   @observable members;
@@ -31,7 +31,7 @@ class Members extends Component {
   @observable isInviting: boolean = false;
 
   componentDidMount() {
-    this.props.members.fetchMembers();
+    this.props.memberSettings.fetchUsers();
   }
 
   render() {
@@ -43,13 +43,13 @@ class Members extends Component {
         <PageTitle title="Members" />
         <h1>Members</h1>
 
-        {!this.props.members.isFetching ? (
+        {!this.props.memberSettings.isLoaded ? (
           <Flex column>
-            {this.props.members.members && (
+            {this.props.memberSettings.users && (
               <MemberList column>
-                {this.props.members.members.map(member => (
+                {this.props.memberSettings.users.map(member => (
                   <Member key={member.id} justify="space-between" auto>
-                    <Flex>
+                    <MemberDetails suspended={member.isSuspended}>
                       <Avatar src={member.avatarUrl} />
                       <UserName>
                         {member.name} {member.email && `(${member.email})`}
@@ -58,7 +58,7 @@ class Members extends Component {
                         )}
                         {member.isSuspended && <Badge>Suspended</Badge>}
                       </UserName>
-                    </Flex>
+                    </MemberDetails>
                     <Flex>
                       {user.id !== member.id && <MemberMenu user={member} />}
                     </Flex>
@@ -93,6 +93,10 @@ const Member = styled(Flex)`
   }
 `;
 
+const MemberDetails = styled(Flex)`
+  opacity: ${({ suspended }) => (suspended ? 0.5 : 1)};
+`;
+
 const UserName = styled.span`
   padding-left: 8px;
 `;
@@ -108,4 +112,4 @@ const Badge = styled.span`
   font-weight: normal;
 `;
 
-export default inject('auth', 'errors', 'members')(Members);
+export default inject('auth', 'errors', 'memberSettings')(Members);

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 ApiKeysStore from 'stores/settings/ApiKeysStore';
+import ApiKeySettingsStore from 'stores/ApiKeySettingsStore';
 import { color } from 'shared/styles/constants';
 
 import Button from 'components/Button';
@@ -19,7 +19,7 @@ import Subheading from 'components/Subheading';
 class Tokens extends Component {
   @observable name: string = '';
   props: {
-    apiKeys: ApiKeysStore,
+    apiKeys: ApiKeySettingsStore,
   };
 
   componentDidMount() {

app/scenes/Settings/components/MemberMenu.js

@@ -1,16 +1,15 @@
 // @flow
 import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import styled from 'styled-components';
 
-import MembersStore from 'stores/settings/MembersStore';
+import MemberSettingsStore from 'stores/MemberSettingsStore';
 import MoreIcon from 'components/Icon/MoreIcon';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 import type { User } from 'types';
 
 type Props = {
   user: User,
-  members: MembersStore,
+  memberSettings: MemberSettingsStore,
 };
 
 @observer
@@ -19,18 +18,45 @@ class MemberMenu extends Component {
 
   handlePromote = (ev: SyntheticEvent) => {
     ev.preventDefault();
+    const { user, memberSettings } = this.props;
+    if (
+      !window.confirm(
+        `Are you want to make ${
+          user.name
+        } an admin? Admins can modify team and billing information.`
+      )
+    ) {
+      return;
+    }
+    memberSettings.promote(user);
   };
 
   handleDemote = (ev: SyntheticEvent) => {
     ev.preventDefault();
+    const { user, memberSettings } = this.props;
+    if (!window.confirm(`Are you want to make ${user.name} a member?`)) {
+      return;
+    }
+    memberSettings.demote(user);
   };
 
   handleSuspend = (ev: SyntheticEvent) => {
     ev.preventDefault();
+    const { user, memberSettings } = this.props;
+    if (
+      !window.confirm(
+        "Are you want to suspend this account? Suspended users won't be able to access Outline."
+      )
+    ) {
+      return;
+    }
+    memberSettings.suspend(user);
   };
 
   handleActivate = (ev: SyntheticEvent) => {
     ev.preventDefault();
+    const { user, memberSettings } = this.props;
+    memberSettings.activate(user);
   };
 
   render() {
@@ -51,7 +77,7 @@ class MemberMenu extends Component {
             ))}
           {user.isSuspended ? (
             <DropdownMenuItem onClick={this.handleActivate}>
-              Activate account…
+              Activate account
             </DropdownMenuItem>
           ) : (
             <DropdownMenuItem onClick={this.handleSuspend}>
@@ -64,4 +90,4 @@ class MemberMenu extends Component {
   }
 }
 
-export default inject('members')(MemberMenu);
+export default inject('memberSettings')(MemberMenu);

app/stores/ApiKeySettingsStore.js

@@ -4,7 +4,7 @@ import invariant from 'invariant';
 import { client } from 'utils/ApiClient';
 import type { ApiKey } from 'types';
 
-class SettingsApiKeysStore {
+class SettingsApiKeySettingsStore {
   @observable apiKeys: ApiKey[] = [];
   @observable isFetching: boolean = false;
   @observable isSaving: boolean = false;
@@ -57,4 +57,4 @@ class SettingsApiKeysStore {
   };
 }
 
-export default SettingsApiKeysStore;
+export default SettingsApiKeySettingsStore;

app/stores/MemberSettingsStore.js

@@ -0,0 +1,67 @@
+// @flow
+import { observable, action, runInAction } from 'mobx';
+import invariant from 'invariant';
+import { client } from 'utils/ApiClient';
+import type { User } from 'types';
+
+class MemberSettingsStore {
+  @observable users: User[] = [];
+  @observable isLoaded: boolean = false;
+  @observable isSaving: boolean = false;
+
+  @action
+  fetchUsers = async () => {
+    try {
+      const res = await client.post('/team.users');
+      invariant(res && res.data, 'Data should be available');
+      const { data } = res;
+
+      runInAction('fetchUsers', () => {
+        this.users = data.reverse();
+      });
+    } catch (e) {
+      console.error('Something went wrong');
+    }
+    this.isLoaded = false;
+  };
+
+  @action
+  promote = async (user: User) => {
+    return this.actionOnUser('promote', user);
+  };
+
+  @action
+  demote = async (user: User) => {
+    return this.actionOnUser('demote', user);
+  };
+
+  @action
+  suspend = async (user: User) => {
+    return this.actionOnUser('suspend', user);
+  };
+
+  @action
+  activate = async (user: User) => {
+    return this.actionOnUser('activate', user);
+  };
+
+  actionOnUser = async (action: string, user: User) => {
+    try {
+      const res = await client.post(`/user.${action}`, {
+        id: user.id,
+      });
+      invariant(res && res.data, 'Data should be available');
+      const { data } = res;
+
+      runInAction(`MemberSettingsStore#${action}`, () => {
+        this.users = this.users.map(
+          user => (user.id === data.id ? data : user)
+        );
+      });
+    } catch (e) {
+      console.error('Something went wrong');
+    }
+  };
+}
+
+export default MemberSettingsStore;

app/stores/settings/MembersStore.js

@@ -1,31 +0,0 @@
-// @flow
-import { observable, action, runInAction } from 'mobx';
-import invariant from 'invariant';
-import { client } from 'utils/ApiClient';
-import type { User } from 'types';
-
-class SettingsUsersStore {
-  @observable members: User[] = [];
-  @observable isFetching: boolean = false;
-  @observable isSaving: boolean = false;
-
-  @action
-  fetchMembers = async () => {
-    this.isFetching = true;
-
-    try {
-      const res = await client.post('/team.users');
-      invariant(res && res.data, 'Data should be available');
-      const { data } = res;
-
-      runInAction('fetchMembers', () => {
-        this.members = data.reverse();
-      });
-    } catch (e) {
-      console.error('Something went wrong');
-    }
-    this.isFetching = false;
-  };
-}
-
-export default SettingsUsersStore;

app/types/index.js

@@ -5,6 +5,8 @@ export type User = {
   name: string,
   email: string,
   username: string,
+  isAdmin?: boolean,
+  isSuspended?: boolean,
 };
 
 export type Team = {