outline/app/scenes/Invite.js

// @flow
import * as React from 'react';
import { Link, withRouter, type RouterHistory } from 'react-router-dom';
import { observable, action } from 'mobx';
import { inject, observer } from 'mobx-react';
import { CloseIcon } from 'outline-icons';
import styled from 'styled-components';
import Flex from 'shared/components/Flex';
import Button from 'components/Button';
import Input from 'components/Input';
import CopyToClipboard from 'components/CopyToClipboard';
import Checkbox from 'components/Checkbox';
import HelpText from 'components/HelpText';
import Tooltip from 'components/Tooltip';
import NudeButton from 'components/NudeButton';

import UiStore from 'stores/UiStore';
import AuthStore from 'stores/AuthStore';
import UsersStore from 'stores/UsersStore';
import PoliciesStore from 'stores/PoliciesStore';

const MAX_INVITES = 20;

type Props = {
  auth: AuthStore,
  users: UsersStore,
  history: RouterHistory,
  policies: PoliciesStore,
  ui: UiStore,
  onSubmit: () => void,
};

type InviteRequest = {
  email: string,
  name: string,
  guest: boolean,
};

@observer
class Invite extends React.Component<Props> {
  @observable isSaving: boolean;
  @observable linkCopied: boolean = false;
  @observable
  invites: InviteRequest[] = [
    { email: '', name: '', guest: false },
    { email: '', name: '', guest: false },
    { email: '', name: '', guest: false },
  ];

  handleSubmit = async (ev: SyntheticEvent<>) => {
    ev.preventDefault();
    this.isSaving = true;

    try {
      await this.props.users.invite(this.invites);
      this.props.onSubmit();
      this.props.ui.showToast('We sent out your invites!');
    } catch (err) {
      this.props.ui.showToast(err.message);
    } finally {
      this.isSaving = false;
    }
  };

  @action
  handleChange = (ev, index) => {
    this.invites[index][ev.target.name] = ev.target.value;
  };

  @action
  handleGuestChange = (ev, index) => {
    this.invites[index][ev.target.name] = ev.target.checked;
  };

  @action
  handleAdd = () => {
    if (this.invites.length >= MAX_INVITES) {
      this.props.ui.showToast(
        `Sorry, you can only send ${MAX_INVITES} invites at a time`
      );
    }

    this.invites.push({ email: '', name: '', guest: false });
  };

  @action
  handleRemove = (ev: SyntheticEvent<>, index: number) => {
    ev.preventDefault();
    this.invites.splice(index, 1);
  };

  handleCopy = () => {
    this.linkCopied = true;
    this.props.ui.showToast('A link was copied to your clipboard');
  };

  render() {
    const { team, user } = this.props.auth;
    if (!team || !user) return null;

    const predictedDomain = user.email.split('@')[1];
    const can = this.props.policies.abilities(team.id);

    return (
      <form onSubmit={this.handleSubmit}>
        {team.guestSignin ? (
          <HelpText>
            Invite team members or guests to join your knowledge base. Team
            members can sign in with {team.signinMethods} and guests can use
            their email address.
          </HelpText>
        ) : (
          <HelpText>
            Invite team members to join your knowledge base. They will need to
            sign in with {team.signinMethods}.{' '}
            {can.update && (
              <React.Fragment>
                As an admin you can also{' '}
                <Link to="/settings/security">enable guest invites</Link>.
              </React.Fragment>
            )}
          </HelpText>
        )}
        {team.subdomain && (
          <CopyBlock>
            Want a link to share directly with your team?
            <Flex>
              <Input type="text" value={team.url} readOnly flex />&nbsp;&nbsp;
              <CopyToClipboard text={team.url} onCopy={this.handleCopy}>
                <Button type="button" neutral>
                  {this.linkCopied ? 'Link copied' : 'Copy link'}
                </Button>
              </CopyToClipboard>
            </Flex>
          </CopyBlock>
        )}
        {this.invites.map((invite, index) => (
          <Flex key={index}>
            <Input
              type="email"
              name="email"
              label="Email"
              labelHidden={index !== 0}
              onChange={ev => this.handleChange(ev, index)}
              placeholder={`example@${predictedDomain}`}
              value={invite.email}
              required={index === 0}
              autoFocus={index === 0}
              flex
            />
            &nbsp;&nbsp;
            <Input
              type="text"
              name="name"
              label="Full name"
              labelHidden={index !== 0}
              onChange={ev => this.handleChange(ev, index)}
              value={invite.name}
              required={!!invite.email}
              flex
            />
            {team.guestSignin && (
              <React.Fragment>
                &nbsp;&nbsp;
                <Tooltip
                  tooltip={
                    <span>
                      Guests can sign in with email and <br />do not require{' '}
                      {team.signinMethods} accounts
                    </span>
                  }
                  placement="top"
                >
                  <Guest>
                    <Checkbox
                      name="guest"
                      label="Guest"
                      onChange={ev => this.handleGuestChange(ev, index)}
                      checked={invite.guest}
                    />
                  </Guest>
                </Tooltip>
              </React.Fragment>
            )}
            {index !== 0 && (
              <Remove>
                <Tooltip tooltip="Remove invite" placement="top">
                  <NudeButton onClick={ev => this.handleRemove(ev, index)}>
                    <CloseIcon />
                  </NudeButton>
                </Tooltip>
              </Remove>
            )}
          </Flex>
        ))}

        <Flex justify="space-between">
          {this.invites.length <= MAX_INVITES ? (
            <Button type="button" onClick={this.handleAdd} neutral>
              Add another…
            </Button>
          ) : (
            <span />
          )}

          <Button
            type="submit"
            disabled={this.isSaving}
            data-on="click"
            data-event-category="invite"
            data-event-action="sendInvites"
          >
            {this.isSaving ? 'Inviting…' : 'Send Invites'}
          </Button>
        </Flex>
        <br />
      </form>
    );
  }
}

const CopyBlock = styled('div')`
  font-size: 14px;
  background: ${props => props.theme.secondaryBackground};
  padding: 8px 16px 4px;
  border-radius: 8px;
  margin-bottom: 24px;

  input {
    background: ${props => props.theme.background};
    border-radius: 4px;
  }
`;

const Guest = styled('div')`
  padding-top: 4px;
  margin: 0 4px 16px;
  align-self: flex-end;
`;

const Remove = styled('div')`
  margin-top: 6px;
  position: absolute;
  right: -32px;
`;

export default inject('auth', 'users', 'policies', 'ui')(withRouter(Invite));