outline · tommoor · Aug 19, 2018 · Aug 19, 2018 · Aug 19, 2018 · Aug 19, 2018
diff --git a/app/components/Checkbox.js b/app/components/Checkbox.js
@@ -0,0 +1,45 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import HelpText from 'components/HelpText';
+
+export type Props = {
+  checked?: boolean,
+  label?: string,
+  className?: string,
+  note?: string,
+};
+
+const LabelText = styled.span`
+  font-weight: 500;
+  margin-left: 10px;
+`;
+
+const Wrapper = styled.div`
+  padding-bottom: 8px;
+`;
+
+const Label = styled.label`
+  display: flex;
+  align-items: center;
+`;
+
+export default function Checkbox({
+  label,
+  note,
+  className,
+  short,
+  ...rest
+}: Props) {
+  return (
+    <React.Fragment>
+      <Wrapper>
+        <Label>
+          <input type="checkbox" {...rest} />
+          {label && <LabelText>{label}</LabelText>}
+        </Label>
+        {note && <HelpText small>{note}</HelpText>}
+      </Wrapper>
+    </React.Fragment>
+  );
+}
diff --git a/app/components/HelpText/HelpText.js b/app/components/HelpText/HelpText.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 const HelpText = styled.p`
   margin-top: 0;
   color: ${props => props.theme.slateDark};
+  font-size: ${props => (props.small ? '13px' : 'auto')};
 `;
 
 export default HelpText;
diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js
@@ -5,6 +5,7 @@ import {
   DocumentIcon,
   ProfileIcon,
   SettingsIcon,
+  PadlockIcon,
   CodeIcon,
   UserIcon,
   LinkIcon,
@@ -61,6 +62,11 @@ class SettingsSidebar extends React.Component<Props> {
                   Details
                 </SidebarLink>
               )}
+              {user.isAdmin && (
+                <SidebarLink to="/settings/security" icon={<PadlockIcon />}>
+                  Security
+                </SidebarLink>
+              )}
               <SidebarLink to="/settings/people" icon={<UserIcon />}>
                 People
               </SidebarLink>

diff --git a/app/components/Toasts/components/Toast.js b/app/components/Toasts/components/Toast.js
@@ -49,7 +49,7 @@ const Container = styled.li`
   align-items: center;
   animation: ${fadeAndScaleIn} 100ms ease;
   margin: 8px 0;
-  padding: 8px;
+  padding: 10px 12px;
   color: ${props => props.theme.white};
   background: ${props => props.theme[props.type]};
   font-size: 15px;

diff --git a/app/menus/DocumentMenu.js b/app/menus/DocumentMenu.js
@@ -6,11 +6,13 @@ import { MoreIcon } from 'outline-icons';
 
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
+import AuthStore from 'stores/AuthStore';
 import { documentMoveUrl } from 'utils/routeHelpers';
 import { DropdownMenu, DropdownMenuItem } from '
5D32
components/DropdownMenu';
 
 type Props = {
   ui: UiStore,
+  auth: AuthStore,
   label?: React.Node,
   history: Object,
   document: Document,
@@ -69,7 +71,8 @@ class DocumentMenu extends React.Component<Props> {
   };
 
   render() {
-    const { document, label, className, showPrint } = this.props;
+    const { document, label, className, showPrint, auth } = this.props;
+    const canShareDocuments = auth.team && auth.team.sharing;
 
     return (
       <DropdownMenu label={label || <MoreIcon />} className={className}>
@@ -91,12 +94,14 @@ class DocumentMenu extends React.Component<Props> {
                 Star
               </DropdownMenuItem>
             )}
-            <DropdownMenuItem
-              >
-              title="Create a public share link"
-            >
-              Share link…
-            </DropdownMenuItem>
+            {canShareDocuments && (
+              <DropdownMenuItem
+                >
+                title="Create a public share link"
+              >
+                Share link…
+              </DropdownMenuItem>
+            )}
             <hr />
             <DropdownMenuItem
               >
@@ -123,4 +128,4 @@ class DocumentMenu extends React.Component<Props> {
   }
 }
 
-export default withRouter(inject('ui')(DocumentMenu));
+export default withRouter(inject('ui', 'auth')(DocumentMenu));
diff --git a/app/routes.js b/app/routes.js
@@ -11,6 +11,7 @@ import Document from 'scenes/Document';
 import Search from 'scenes/Search';
 import Settings from 'scenes/Settings';
 import Details from 'scenes/Settings/Details';
+import Security from 'scenes/Settings/Security';
 import People from 'scenes/Settings/People';
 import Slack from 'scenes/Settings/Slack';
 import Shares from 'scenes/Settings/Shares';
@@ -43,6 +44,7 @@ export default function Routes() {
             <Route exact path="/drafts" component={Drafts} />
             <Route exact path="/settings" component={Settings} />
             <Route exact path="/settings/details" component={Details} />
+            <Route exact path="/settings/security" component={Security} />
             <Route exact path="/settings/people" component={People} />
             <Route exact path="/settings/shares" component={Shares} />
             <Route exact path="/settings/tokens" component={Tokens} />

diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js
@@ -2,11 +2,12 @@
 import * as React from 'react';
 import { throttle } from 'lodash';
 import { observable } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import { NewDocumentIcon } from 'outline-icons';
 import Document from 'models/Document';
+import AuthStore from 'stores/AuthStore';
 import { documentEditUrl } from 'utils/routeHelpers';
 
 import Flex from 'shared/components/Flex';
@@ -32,6 +33,7 @@ type Props = {
     autosave?: boolean,
   }) => *,
   history: Object,
+  auth: AuthStore,
 };
 
 @observer
@@ -90,7 +92,9 @@ class Header extends React.Component<Props> {
       isPublishing,
       isSaving,
       savingIsDisabled,
+      auth,
     } = this.props;
+    const canShareDocuments = auth.team && auth.team.sharing;
 
     return (
       <Actions
@@ -134,7 +138,8 @@ class Header extends React.Component<Props> {
             </Action>
           )}
           {!isDraft &&
-            !isEditing && (
+            !isEditing &&
+            canShareDocuments && (
               <Action>
                 <Link  title="Share document">
                   Share
@@ -251,4 +256,4 @@ const Link = styled.a`
   cursor: ${props => (props.disabled ? 'default' : 'pointer')};
 `;
 
-export default Header;
+export default inject('auth')(Header);
diff --git a/app/scenes/Settings/Details.js b/app/scenes/Settings/Details.js
@@ -44,7 +44,7 @@ class Details extends React.Component<Props> {
       name: this.name,
       avatarUrl: this.avatarUrl,
     });
-    this.props.ui.showToast('Details saved', 'success');
+    this.props.ui.showToast('Settings saved', 'success');
   };
 
   handleNameChange = (ev: SyntheticInputEvent<*>) => {

diff --git a/app/scenes/Settings/Security.js b/app/scenes/Settings/Security.js
@@ -0,0 +1,80 @@
+// @flow
+import * as React from 'react';
+import { observable } from 'mobx';
+import { observer, inject } from 'mobx-react';
+
+import AuthStore from 'stores/AuthStore';
+import UiStore from 'stores/UiStore';
+import Checkbox from 'components/Checkbox';
+import Button from 'components/Button';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+import HelpText from 'components/HelpText';
+
+type Props = {
+  auth: AuthStore,
+  ui: UiStore,
+};
+
+@observer
+class Security extends React.Component<Props> {
+  form: ?HTMLFormElement;
+
+  @observable sharing: boolean;
+
+  componentDidMount() {
+    const { auth } = this.props;
+    if (auth.team) {
+      this.sharing = auth.team.sharing;
+    }
+  }
+
+  handleSubmit = async (ev: SyntheticEvent<*>) => {
+    ev.preventDefault();
+
+    await this.props.auth.updateTeam({
+      sharing: this.sharing,
+    });
+    this.props.ui.showToast('Settings saved', 'success');
+  };
+
+  handleChange = (ev: SyntheticInputEvent<*>) => {
+    if (ev.target.name === 'sharing') {
+      this.sharing = ev.target.checked;
+    }
+  };
+
+  get isValid() {
+    return this.form && this.form.checkValidity();
+  }
+
+  render() {
+    const { isSaving } = this.props.auth;
+
+    return (
+      <CenteredContent>
+        <PageTitle title="Security" />
+        <h1>Security</h1>
+        <HelpText>
+          Settings that impact the access, security and privacy of your
+          knowledgebase.
+        </HelpText>
+
+        <form  ref={ref => (this.form = ref)}>
+          <Checkbox
+            label="Allow sharing documents"
+            name="sharing"
+            checked={this.sharing}
+            >
+            note="When enabled documents can be shared publicly by any team member"
+          />
+          <Button type="submit" disabled={isSaving || !this.isValid}>
+            {isSaving ? 'Saving…' : 'Save'}
+          </Button>
+        </form>
+      </CenteredContent>
+    );
+  }
+}
+
+export default inject('auth', 'ui')(Security);
diff --git a/app/scenes/Settings/Shares.js b/app/scenes/Settings/Shares.js
@@ -1,7 +1,9 @@
 // @flow
 import * as React from 'react';
 import { observer, inject } from 'mobx-react';
+import { Link } from 'react-router-dom';
 import SharesStore from 'stores/SharesStore';
+import AuthStore from 'stores/AuthStore';
 
 import ShareListItem from './components/ShareListItem';
 import List from 'components/List';
@@ -11,6 +13,7 @@ import HelpText from 'components/HelpText';
 
 type Props = {
   shares: SharesStore,
+  auth: AuthStore,
 };
 
 @observer
@@ -20,7 +23,9 @@ class Shares extends React.Component<Props> {
   }
 
   render() {
-    const { shares } = this.props;
+    const { shares, auth } = this.props;
+    const { user } = auth;
+    const canShareDocuments = auth.team && auth.team.sharing;
 
     return (
       <CenteredContent>
@@ -31,7 +36,16 @@ class Shares extends React.Component<Props> {
           can access a read-only version of the document until the link has been
           revoked.
         </HelpText>
-
+        {user &&
+          user.isAdmin && (
+            <HelpText>
+              {!canShareDocuments && (
+                <strong>Sharing is currently disabled.</strong>
+              )}{' '}
+              You can turn {canShareDocuments ? 'off' : 'on'} public document
+              sharing in <Link to="/settings/security">security settings</Link>.
+            </HelpText>
+          )}
         <List>
           {shares.orderedData.map(share => (
             <ShareListItem key={share.id} share={share} />
@@ -42,4 +56,4 @@ class Shares extends React.Component<Props> {
   }
 }
 
-export default inject('shares')(Shares);
+export default inject('shares', 'auth')(Shares);
diff --git a/app/stores/AuthStore.js b/app/stores/AuthStore.js
@@ -78,7 +78,11 @@ class AuthStore {
   };
 
   @action
-  updateTeam = async (params: { name: string, avatarUrl: ?string }) => {
+  updateTeam = async (params: {
+    name?: string,
+    avatarUrl?: ?string,
+    sharing?: boolean,
+  }) => {
     this.isSaving = true;
 
     try {

diff --git a/app/types/index.js b/app/types/index.js
@@ -31,6 +31,7 @@ export type Team = {
   avatarUrl: string,
   slackConnected: boolean,
   googleConnected: boolean,
+  sharing: boolean,
 };
 
 export type NavigationNode = {