feat: invites (#967)

* stub invite endpoint

* feat: First pass invite UI

* feat: allow removing invite rows

* First pass: sending logic

* fix: label accessibility

* fix: add button submits
incorrect permissions
middleware flow error

* 💚

* Error handling, email filtering, tests

* Flow

* Add Invite to people page
Remove old Tip

* Add copy link to subdomain

app/components/Input.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
 import styled from 'styled-components';
+import VisuallyHidden from 'components/VisuallyHidden';
 import Flex from 'shared/components/Flex';
 
 const RealTextarea = styled.textarea`
@@ -38,9 +39,10 @@ const RealInput = styled.input`
 `;
 
 const Wrapper = styled.div`
+  flex: ${props => (props.flex ? '1' : '0')};
   max-width: ${props => (props.short ? '350px' : '100%')};
   min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '0')};
-  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'auto')};
+  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'initial')};
 `;
 
 export const Outline = styled(Flex)`
@@ -70,6 +72,8 @@ export type Props = {
   value?: string,
   label?: string,
   className?: string,
+  labelHidden?: boolean,
+  flex?: boolean,
   short?: boolean,
 };
 
@@ -86,14 +90,28 @@ class Input extends React.Component<Props> {
   };
 
   render() {
-    const { type = 'text', label, className, short, ...rest } = this.props;
+    const {
+      type = 'text',
+      label,
+      className,
+      short,
+      flex,
+      labelHidden,
+      ...rest
+    } = this.props;
 
     const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
+    const wrappedLabel = <LabelText>{label}</LabelText>;
 
     return (
-      <Wrapper className={className} short={short}>
+      <Wrapper className={className} short={short} flex={flex}>
         <label>
-          {label && <LabelText>{label}</LabelText>}
+          {label &&
+            (labelHidden ? (
+              <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
+            ) : (
+              wrappedLabel
+            ))}
           <Outline focused={this.focused}>
             <InputComponent
               onBlur={this.handleBlur}