First view - Join the conversation

src/core/client/stream/components/Auth.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { StatelessComponent } from "react";
+
+import { Flex, Button, Popup, Typography } from "talk-ui/components";
+
+interface AuthProps {
+  open: boolean;
+  focus: boolean;
+  openPopup: () => void;
+  closePopup: () => void;
+  setFocus: (focus: boolean) => void;
+}
+
+const Auth: StatelessComponent<AuthProps> = props => {
+  return (
+    <div>
+      <Popup
+        href={"/static/js/src-core-client-ui-components-popup-popup.js"}
+        title="Coral Project"
+        features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
+        open={props.open}
+        focus={props.focus}
+        onFocus={() => props.setFocus(true)}
+        onBlur={() => props.setFocus(false)}
+        onClose={props.closePopup}
+      />
+      <Flex justifyContent="center">
+        <Typography>Join the conversation </Typography> |
+        <Button color="primary" onClick={props.openPopup} disabled={props.open}>
+          Sign In
+        </Button>
+        <Button
+          color="primary"
+          variant="outlined"
+          onClick={props.openPopup}
+          disabled={props.open}
+        >
+          Register
+        </Button>
+      </Flex>
+    </div>
+  );
+};
+
+export default Auth;

src/core/client/stream/components/Stream.tsx

@@ -7,6 +7,7 @@ import { Button, Flex } from "talk-ui/components";
 import CommentContainer from "../containers/CommentContainer";
 import PostCommentFormContainer from "../containers/PostCommentFormContainer";
 import ReplyListContainer from "../containers/ReplyListContainer";
+import AuthContainer from "../containers/AuthContainer";
 import * as styles from "./Stream.css";
 
 export interface StreamProps {
@@ -21,6 +22,7 @@ export interface StreamProps {
 const Stream: StatelessComponent<StreamProps> = props => {
   return (
     <div className={styles.root}>
+      <AuthContainer />
       <PostCommentFormContainer assetID={props.assetID} />
       <Flex
         direction="column"

src/core/client/stream/containers/AuthContainer.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import Auth from "../components/Auth";
+
+class AuthContainer extends React.Component {
+  state = {
+    open: false,
+    focus: false,
+  };
+
+  openPopup = () => {
+    this.setState({
+      open: true,
+    });
+  };
+
+  closePopup = () => {
+    this.setState({
+      open: false,
+    });
+  };
+
+  setFocus = (focus: boolean) => {
+    this.setState({
+      focus,
+    });
+  };
+
+  render() {
+    const { open, focus } = this.state;
+    return (
+      <Auth
+        open={open}
+        focus={focus}
+        openPopup={this.openPopup}
+        closePopup={this.closePopup}
+        setFocus={this.setFocus}
+      />
+    );
+  }
+}
+
+export default AuthContainer;