Team details settings page

app/components/Input/Input.js

@@ -30,7 +30,9 @@ const RealInput = styled.input`
   }
 `;
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  max-width: ${props => (props.short ? '350px' : '100%')};
+`;
 
 export const Outline = styled(Flex)`
   display: flex;
@@ -58,18 +60,20 @@ export type Props = {
   value?: string,
   label?: string,
   className?: string,
+  short?: boolean,
 };
 
 export default function Input({
   type = 'text',
   label,
   className,
+  short,
   ...rest
 }: Props) {
   const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
 
   return (
-    <Wrapper className={className}>
+    <Wrapper className={className} short={short}>
       <label>
         {label && <LabelText>{label}</LabelText>}
         <Outline>

app/index.js

@@ -21,6 +21,7 @@ import Collection from 'scenes/Collection';
 import Document from 'scenes/Document';
 import Search from 'scenes/Search';
 import Settings from 'scenes/Settings';
+import Details from 'scenes/Settings/Details';
 import Members from 'scenes/Settings/Members';
 import Slack from 'scenes/Settings/Slack';
 import Shares from 'scenes/Settings/Shares';
@@ -67,6 +68,11 @@ if (element) {
                       <Route exact path="/starred" component={Starred} />
                       <Route exact path="/drafts" component={Drafts} />
                       <Route exact path="/settings" component={Settings} />
+                      <Route
+                        exact
+                        path="/settings/details"
+                        component={Details}
+                      />
                       <Route
                         exact
                         path="/settings/members"

app/menus/ShareMenu.js

@@ -12,7 +12,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 type Props = {
   label?: React.Node,
   onOpen?: () => *,
-  onClose?: () => *,
+  onClose: () => *,
   history: Object,
   shares: SharesStore,
   share: Share,

app/scenes/Settings/Details.js

@@ -0,0 +1,145 @@
+// @flow
+import * as React from 'react';
+import { observable } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import styled from 'styled-components';
+import { color, size } from 'shared/styles/constants';
+
+import AuthStore from 'stores/AuthStore';
+import UiStore from 'stores/UiStore';
+import ImageUpload from './components/ImageUpload';
+import Input, { LabelText } from 'components/Input';
+import Button from 'components/Button';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+import Flex from 'shared/components/Flex';
+
+type Props = {
+  auth: AuthStore,
+  ui: UiStore,
+};
+
+@observer
+class Details extends React.Component<Props> {
+  timeout: TimeoutID;
+  form: ?HTMLFormElement;
+
+  @observable name: string;
+  @observable avatarUrl: ?string;
+
+  componentDidMount() {
+    if (this.props.auth.team) {
+      this.name = this.props.auth.team.name;
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  handleSubmit = async (ev: SyntheticEvent<*>) => {
+    ev.preventDefault();
+
+    await this.props.auth.updateTeam({
+      name: this.name,
+      avatarUrl: this.avatarUrl,
+    });
+    this.props.ui.showToast('Details saved', 'success');
+  };
+
+  handleNameChange = (ev: SyntheticInputEvent<*>) => {
+    this.name = ev.target.value;
+  };
+
+  handleAvatarUpload = (avatarUrl: string) => {
+    this.avatarUrl = avatarUrl;
+  };
+
+  handleAvatarError = (error: ?string) => {
+    this.props.ui.showToast(error || 'Unable to upload new avatar');
+  };
+
+  get isValid() {
+    return this.form && this.form.checkValidity();
+  }
+
+  render() {
+    const { team, isSaving } = this.props.auth;
+    if (!team) return null;
+    const avatarUrl = this.avatarUrl || team.avatarUrl;
+
+    return (
+      <CenteredContent>
+        <PageTitle title="Details" />
+        <h1>Details</h1>
+        <ProfilePicture column>
+          <LabelText>Logo</LabelText>
+          <AvatarContainer>
+            <ImageUpload
+              onSuccess={this.handleAvatarUpload}
+              onError={this.handleAvatarError}
+            >
+              <Avatar src={avatarUrl} />
+              <Flex auto align="center" justify="center">
+                Upload
+              </Flex>
+            </ImageUpload>
+          </AvatarContainer>
+        </ProfilePicture>
+        <form onSubmit={this.handleSubmit} ref={ref => (this.form = ref)}>
+          <Input
+            label="Name"
+            value={this.name}
+            onChange={this.handleNameChange}
+            required
+            short
+          />
+          <Button type="submit" disabled={isSaving || !this.isValid}>
+            {isSaving ? 'Saving…' : 'Save'}
+          </Button>
+        </form>
+      </CenteredContent>
+    );
+  }
+}
+
+const ProfilePicture = styled(Flex)`
+  margin-bottom: ${size.huge};
+`;
+
+const avatarStyles = `
+  width: 80px;
+  height: 80px;
+  border-radius: 8px;
+`;
+
+const AvatarContainer = styled(Flex)`
+  ${avatarStyles};
+  position: relative;
+  box-shadow: 0 0 0 1px #dae1e9;
+  background: ${color.white};
+
+  div div {
+    ${avatarStyles};
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+    transition: all 250ms;
+  }
+
+  &:hover div {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.75);
+    color: ${color.white};
+  }
+`;
+
+const Avatar = styled.img`
+  ${avatarStyles};
+`;
+
+export default inject('auth', 'ui')(Details);

app/scenes/Settings/Profile.js

@@ -22,6 +22,7 @@ type Props = {
 @observer
 class Profile extends React.Component<Props> {
   timeout: TimeoutID;
+  form: ?HTMLFormElement;
 
   @observable name: string;
   @observable avatarUrl: ?string;
@@ -58,6 +59,10 @@ class Profile extends React.Component<Props> {
     this.props.ui.showToast(error || 'Unable to upload new avatar');
   };
 
+  get isValid() {
+    return this.form && this.form.checkValidity();
+  }
+
   render() {
     const { user, isSaving } = this.props.auth;
     if (!user) return null;
@@ -81,14 +86,15 @@ class Profile extends React.Component<Props> {
             </ImageUpload>
           </AvatarContainer>
         </ProfilePicture>
-        <form onSubmit={this.handleSubmit}>
-          <StyledInput
+        <form onSubmit={this.handleSubmit} ref={ref => (this.form = ref)}>
+          <Input
             label="Name"
             value={this.name}
             onChange={this.handleNameChange}
             required
+            short
           />
-          <Button type="submit" disabled={isSaving || !this.name}>
+          <Button type="submit" disabled={isSaving || !this.isValid}>
             {isSaving ? 'Saving…' : 'Save'}
           </Button>
         </form>
@@ -134,8 +140,4 @@ const Avatar = styled.img`
   ${avatarStyles};
 `;
 
-const StyledInput = styled(Input)`
-  max-width: 350px;
-`;
-
 export default inject('auth', 'ui')(Profile);

app/stores/AuthStore.js

@@ -66,6 +66,22 @@ class AuthStore {
     }
   };
 
+  @action
+  updateTeam = async (params: { name: string, avatarUrl: ?string }) => {
+    this.isSaving = true;
+
+    try {
+      const res = await client.post(`/team.update`, params);
+      invariant(res && res.data, 'Team response not available');
+
+      runInAction('AuthStore#updateTeam', () => {
+        this.team = res.data;
+      });
+    } finally {
+      this.isSaving = false;
+    }
+  };
+
   @action
   logout = async () => {
     this.user = null;

package.json

@@ -8,7 +8,7 @@
     "build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json > stats.json",
     "build": "npm run clean && npm run build:webpack",
     "start": "NODE_ENV=production node index.js",
-    "dev": "NODE_ENV=development node index.js",
+    "dev": "NODE_ENV=development nodemon --watch server index.js",
     "lint": "npm run lint:flow && npm run lint:js",
     "lint:js": "eslint app server",
     "lint:flow": "flow",

server/api/team.js

@@ -1,13 +1,33 @@
 // @flow
 import Router from 'koa-router';
-import { User } from '../models';
+import { User, Team } from '../models';
+import { publicS3Endpoint } from '../utils/s3';
 
 import auth from '../middlewares/authentication';
 import pagination from './middlewares/pagination';
-import { presentUser } from '../presenters';
+import { presentUser, presentTeam } from '../presenters';
+import policy from '../policies';
 
+const { authorize } = policy;
 const router = new Router();
 
+router.post('team.update', auth(), async ctx => {
+  const { name, avatarUrl } = ctx.body;
+  const endpoint = publicS3Endpoint();
+
+  const user = ctx.state.user;
+  const team = await Team.findById(user.teamId);
+  authorize(user, 'update', team);
+
+  if (name) team.name = name;
+  if (avatarUrl && avatarUrl.startsWith(`${endpoint}/uploads/${user.id}`)) {
+    team.avatarUrl = avatarUrl;
+  }
+  await team.save();
+
+  ctx.body = { data: await presentTeam(ctx, team) };
+});
+
 router.post('team.users', auth(), pagination(), async ctx => {
   const user = ctx.state.user;
 

server/api/user.js

@@ -21,11 +21,10 @@ router.post('user.update', auth(), async ctx => {
   const endpoint = publicS3Endpoint();
 
   if (name) user.name = name;
-  if (
-    avatarUrl &&
-    avatarUrl.startsWith(`${endpoint}/uploads/${ctx.state.user.id}`)
-  )
+  if (avatarUrl && avatarUrl.startsWith(`${endpoint}/uploads/${user.id}`)) {
     user.avatarUrl = avatarUrl;
+  }
+
   await user.save();
 
   ctx.body = { data: await presentUser(ctx, user) };

server/policies/collection.js

@@ -17,5 +17,6 @@ allow(
 allow(User, 'delete', Collection, (user, collection) => {
   if (!collection || user.teamId !== collection.teamId) return false;
   if (user.id === collection.creatorId) return true;
-  if (!user.isAdmin) throw new AdminRequiredError();
+  if (user.isAdmin) return true;
+  throw new AdminRequiredError();
 });

server/policies/index.js

@@ -6,5 +6,6 @@ import './document';
 import './integration';
 import './share';
 import './user';
+import './team';
 
 export default policy;

server/policies/team.js

@@ -0,0 +1,14 @@
+// @flow
+import policy from './policy';
+import { Team, User } from '../models';
+import { AdminRequiredError } from '../errors';
+
+const { allow } = policy;
+
+allow(User, 'read', Team, (user, team) => team && user.teamId === team.id);
+
+allow(User, 'update', Team, (user, team) => {
+  if (!team || user.teamId !== team.id) return false;
+  if (user.isAdmin) return true;
+  throw new AdminRequiredError();
+});