yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #614 from outline/jori/billing-suspended

Browse Source 
Suspended accounts and settings changes
This commit is contained in:
Jori Lallo
2018-03-07 00:11:17 -08:00
committed by GitHub
parent 61dfd75ba3 983b8fe9a0
commit c7d50c4a78
31 changed files with 892 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/Auth.js
View File

@@ -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/ApiKeysStore';
import UsersStore from 'stores/UsersStore';
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(),
users: new UsersStore(),
documents: new DocumentsStore({
ui: stores.ui,
cache,

3
app/components/Layout/Layout.js
View File

@@ -17,6 +17,7 @@ import Sidebar from 'components/Sidebar';
import SettingsSidebar from 'components/Sidebar/Settings';
import Modals from 'components/Modals';
import Toasts from 'components/Toasts';
import ErrorSuspended from 'scenes/ErrorSuspended';
import AuthStore from 'stores/AuthStore';
import UiStore from 'stores/UiStore';
@@ -71,6 +72,8 @@ class Layout extends React.Component {
const { user, team } = auth;
const showSidebar = auth.authenticated && user && team;
if (auth.isSuspended) return <ErrorSuspended />;
return (
<Container column auto>
<Helmet>

4
app/components/Sidebar/Settings.js
View File

@@ -53,8 +53,8 @@ class SettingsSidebar extends Component {
</Section>
<Section>
<Header>Team</Header>
<SidebarLink to="/settings/members" icon={<UserIcon />}>
Members
<SidebarLink to="/settings/users" icon={<UserIcon />}>
Users
</SidebarLink>
<SidebarLink
to="/settings/integrations/slack"

4
app/index.js
View File

@@ -21,7 +21,7 @@ import Collection from 'scenes/Collection';
import Document from 'scenes/Document';
import Search from 'scenes/Search';
import Settings from 'scenes/Settings';
import Members from 'scenes/Settings/Members';
import Users from 'scenes/Settings/Users';
import Slack from 'scenes/Settings/Slack';
import Tokens from 'scenes/Settings/Tokens';
import SlackAuth from 'scenes/SlackAuth';
@@ -68,7 +68,7 @@ render(
<Route exact path="/starred" component={Starred} />
<Route exact path="/drafts" component={Drafts} />
<Route exact path="/settings" component={Settings} />
<Route exact path="/settings/members" component={Members} />
<Route exact path="/settings/users" component={Users} />
<Route exact path="/settings/tokens" component={Tokens} />
<Route
exact

29
app/scenes/ErrorSuspended/ErrorSuspended.js Normal file
View File

@@ -0,0 +1,29 @@
// @flow
import React from 'react';
import { inject, observer } from 'mobx-react';
import CenteredContent from 'components/CenteredContent';
import PageTitle from 'components/PageTitle';
import AuthStore from 'stores/AuthStore';
const ErrorSuspended = observer(({ auth }: { auth: AuthStore }) => {
return (
<CenteredContent>
<PageTitle title="Your account has been suspended" />
<h1>
<span role="img" aria-label="Warning sign">
⚠️
</span>{' '}
Your account has been suspended
</h1>
<p>
A team admin (<strong>{auth.suspendedContactEmail}</strong>) has
suspended your account. To re-activate your account, please reach out to
them directly.
</p>
</CenteredContent>
);
});
export default inject('auth')(ErrorSuspended);

3
app/scenes/ErrorSuspended/index.js Normal file
View File

@@ -0,0 +1,3 @@
// @flow
import ErrorSuspended from './ErrorSuspended';
export default ErrorSuspended;

95
app/scenes/Settings/Members.js
View File

@@ -1,95 +0,0 @@
// @flow
import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
import Flex from 'shared/components/Flex';
import Avatar from 'components/Avatar';
import { color } from 'shared/styles/constants';
import ErrorsStore from 'stores/ErrorsStore';
import SettingsStore from 'stores/SettingsStore';
import CenteredContent from 'components/CenteredContent';
import LoadingPlaceholder from 'components/LoadingPlaceholder';
import PageTitle from 'components/PageTitle';
@observer
class Members extends Component {
props: {
errors: ErrorsStore,
settings: SettingsStore,
};
@observable members;
@observable isLoaded: boolean = false;
@observable inviteEmails: string = '';
@observable isInviting: boolean = false;
componentDidMount() {
this.props.settings.fetchMembers();
}
render() {
return (
<CenteredContent>
<PageTitle title="Members" />
<h1>Members</h1>
{!this.props.settings.isFetching ? (
<Flex column>
{this.props.settings.members && (
<MemberList column>
{this.props.settings.members.map(member => (
<Member key={member.id} justify="space-between" auto>
<Flex>
<Avatar src={member.avatarUrl} />
<UserName>
{member.name} {member.email && `(${member.email})`}
{member.isAdmin && <AdminBadge>Admin</AdminBadge>}
</UserName>
</Flex>
</Member>
))}
</MemberList>
)}
</Flex>
) : (
<LoadingPlaceholder />
)}
</CenteredContent>
);
}
}
const MemberList = styled(Flex)`
border: 1px solid ${color.smoke};
border-radius: 4px;
margin-top: 20px;
margin-bottom: 40px;
`;
const Member = styled(Flex)`
padding: 10px;
border-bottom: 1px solid ${color.smoke};
font-size: 15px;
&:last-child {
border-bottom: none;
}
`;
const UserName = styled.span`
padding-left: 8px;
`;
const AdminBadge = styled.span`
margin-left: 10px;
color: #777;
font-size: 13px;
text-transform: uppercase;
font-weight: normal;
`;
export default inject('errors', 'settings')(Members);

20
app/scenes/Settings/Tokens.js
View File

@@ -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/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.fetchPage({ limit: 100 });
}
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.data.length > 0;
return (
<CenteredContent>
@@ -49,13 +49,13 @@ class Tokens extends Component {
<Subheading>Your tokens</Subheading>,
<Table>
<tbody>
{settings.apiKeys.map(key => (
{apiKeys.data.map(key => (
<ApiToken
id={key.id}
key={key.id}
name={key.name}
secret={key.secret}
onDelete={settings.deleteApiKey}
onDelete={apiKeys.deleteApiKey}
/>
))}
</tbody>
@@ -78,7 +78,7 @@ class Tokens extends Component {
<Button
type="submit"
value="Create Token"
disabled={settings.isSaving}
disabled={apiKeys.isSaving}
/>
</form>
</CenteredContent>
@@ -96,4 +96,4 @@ const Table = styled.table`
}
`;
export default inject('settings')(Tokens);
export default inject('apiKeys')(Tokens);

108
app/scenes/Settings/Users.js Normal file
View File

@@ -0,0 +1,108 @@
// @flow
import React, { Component } from 'react';
import invariant from 'invariant';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
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 UsersStore from 'stores/UsersStore';
import CenteredContent from 'components/CenteredContent';
import LoadingPlaceholder from 'components/LoadingPlaceholder';
import PageTitle from 'components/PageTitle';
import UserMenu from './components/UserMenu';
@observer
class Users extends Component {
props: {
auth: AuthStore,
errors: ErrorsStore,
users: UsersStore,
};
componentDidMount() {
this.props.users.fetchPage({ limit: 100 });
}
render() {
const currentUser = this.props.auth.user;
invariant(currentUser, 'User should exist');
return (
<CenteredContent>
<PageTitle title="Users" />
<h1>Users</h1>
{!this.props.users.isLoaded ? (
<Flex column>
{this.props.users.data && (
<UserList column>
{this.props.users.data.map(user => (
<User key={user.id} justify="space-between" auto>
<UserDetails suspended={user.isSuspended}>
<Avatar src={user.avatarUrl} />
<UserName>
{user.name} {user.email && `(${user.email})`}
{user.isAdmin && (
<Badge admin={user.isAdmin}>Admin</Badge>
)}
{user.isSuspended && <Badge>Suspended</Badge>}
</UserName>
</UserDetails>
<Flex>
{currentUser.id !== user.id && <UserMenu user={user} />}
</Flex>
</User>
))}
</UserList>
)}
</Flex>
) : (
<LoadingPlaceholder />
)}
</CenteredContent>
);
}
}
const UserList = styled(Flex)`
border: 1px solid ${color.smoke};
border-radius: 4px;
margin-top: 20px;
margin-bottom: 40px;
`;
const User = styled(Flex)`
padding: 10px;
border-bottom: 1px solid ${color.smoke};
font-size: 15px;
&:last-child {
border-bottom: none;
}
`;
const UserDetails = styled(Flex)`
opacity: ${({ suspended }) => (suspended ? 0.5 : 1)};
`;
const UserName = styled.span`
padding-left: 8px;
`;
const Badge = styled.span`
margin-left: 10px;
padding: 2px 6px 3px;
background-color: ${({ admin }) => (admin ? color.primary : color.smokeDark)};
color: ${({ admin }) => (admin ? color.white : color.text)};
border-radius: 2px;
font-size: 11px;
text-transform: uppercase;
font-weight: normal;
`;
export default inject('auth', 'errors', 'users')(Users);

93
app/scenes/Settings/components/UserMenu.js Normal file
View File

@@ -0,0 +1,93 @@
// @flow
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import UsersStore from 'stores/UsersStore';
import MoreIcon from 'components/Icon/MoreIcon';
import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
import type { User } from 'types';
type Props = {
user: User,
users: UsersStore,
};
@observer
class UserMenu extends Component {
props: Props;
handlePromote = (ev: SyntheticEvent) => {
ev.preventDefault();
const { user, users } = this.props;
if (
!window.confirm(
`Are you want to make ${
user.name
} an admin? Admins can modify team and billing information.`
)
) {
return;
}
users.promote(user);
};
handleDemote = (ev: SyntheticEvent) => {
ev.preventDefault();
const { user, users } = this.props;
if (!window.confirm(`Are you want to make ${user.name} a member?`)) {
return;
}
users.demote(user);
};
handleSuspend = (ev: SyntheticEvent) => {
ev.preventDefault();
const { user, users } = this.props;
if (
!window.confirm(
"Are you want to suspend this account? Suspended users won't be able to access Outline."
)
) {
return;
}
users.suspend(user);
};
handleActivate = (ev: SyntheticEvent) => {
ev.preventDefault();
const { user, users } = this.props;
users.activate(user);
};
render() {
const { user } = this.props;
return (
<span>
<DropdownMenu label={<MoreIcon />}>
{!user.isSuspended &&
(user.isAdmin ? (
<DropdownMenuItem onClick={this.handleDemote}>
Make {user.name} a member…
</DropdownMenuItem>
) : (
<DropdownMenuItem onClick={this.handlePromote}>
Make {user.name} an admin…
</DropdownMenuItem>
))}
{user.isSuspended ? (
<DropdownMenuItem onClick={this.handleActivate}>
Activate account
</DropdownMenuItem>
) : (
<DropdownMenuItem onClick={this.handleSuspend}>
Suspend account…
</DropdownMenuItem>
)}
</DropdownMenu>
</span>
);
}
}
export default inject('users')(UserMenu);

37
app/stores/SettingsStore.js → app/stores/ApiKeysStore.js
View File

@@ -2,25 +2,24 @@
import { observable, action, runInAction } from 'mobx';
import invariant from 'invariant';
import { client } from 'utils/ApiClient';
import type { ApiKey, User } from 'types';
import type { ApiKey, PaginationParams } from 'types';
class SettingsStore {
@observable apiKeys: ApiKey[] = [];
@observable members: User[] = [];
class ApiKeysStore {
@observable data: ApiKey[] = [];
@observable isFetching: boolean = false;
@observable isSaving: boolean = false;
@action
fetchApiKeys = async () => {
fetchPage = async (options: ?PaginationParams): Promise<*> => {
this.isFetching = true;
try {
const res = await client.post('/apiKeys.list');
const res = await client.post('/apiKeys.list', options);
invariant(res && res.data, 'Data should be available');
const { data } = res;
runInAction('fetchApiKeys', () => {
this.apiKeys = data;
this.data = data;
});
} catch (e) {
console.error('Something went wrong');
@@ -37,7 +36,7 @@ class SettingsStore {
invariant(res && res.data, 'Data should be available');
const { data } = res;
runInAction('createApiKey', () => {
this.apiKeys.push(data);
this.data.push(data);
});
} catch (e) {
console.error('Something went wrong');
@@ -50,30 +49,12 @@ class SettingsStore {
try {
await client.post('/apiKeys.delete', { id });
runInAction('deleteApiKey', () => {
this.fetchApiKeys();
this.fetchPage();
});
} catch (e) {
console.error('Something went wrong');
}
};
@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 SettingsStore;
export default ApiKeysStore;

8
app/stores/AuthStore.js
View File

@@ -14,6 +14,8 @@ class AuthStore {
@observable token: ?string;
@observable oauthState: string;
@observable isLoading: boolean = false;
@observable isSuspended: boolean = false;
@observable suspendedContactEmail: ?string;
/* Computed */
@@ -43,8 +45,10 @@ class AuthStore {
this.team = res.data.team;
});
} catch (err) {
// Failure to update user info is a non-fatal error.
console.error(err);
if (err.error.error === 'user_suspended') {
this.isSuspended = true;
this.suspendedContactEmail = err.error.data.adminEmail;
}
}
};

65
app/stores/UsersStore.js Normal file
View File

@@ -0,0 +1,65 @@
// @flow
import { observable, action, runInAction } from 'mobx';
import invariant from 'invariant';
import { client } from 'utils/ApiClient';
import type { User, PaginationParams } from 'types';
class UsersStore {
@observable data: User[] = [];
@observable isLoaded: boolean = false;
@observable isSaving: boolean = false;
@action
fetchPage = async (options: ?PaginationParams): Promise<*> => {
try {
const res = await client.post('/team.users', options);
invariant(res && res.data, 'Data should be available');
const { data } = res;
runInAction('fetchUsers', () => {
this.data = 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(`UsersStore#${action}`, () => {
this.data = this.data.map(user => (user.id === data.id ? data : user));
});
} catch (e) {
console.error('Something went wrong');
}
};
}
export default UsersStore;

2
app/types/index.js
View File

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

2
app/utils/ApiClient.js
View File

@@ -84,7 +84,7 @@ class ApiClient {
})
.catch(error => {
error.response.json().then(json => {
error.data = json;
error.error = json;
reject(error);
});
});