Merge branch 'auth-views' of github.com:coralproject/talk into auth-views

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

@@ -22,7 +22,6 @@ const App: StatelessComponent<AppProps> = props => {
       {view}
     </Flex>
   );
-  // return <div className={styles.root}>{view}</div>;
 };
 
 export default App;

src/core/client/stream/components/PostCommentForm.css

@@ -1,18 +1,28 @@
 .root {
   width: 100%;
+  padding-bottom: var(--spacing-unit);
 }
 
 .textarea {
   composes: bodyCopy from "talk-ui/shared/typography.css";
-
   display: block;
-  height: 100px;
+  height: 150px;
   width: 100%;
   box-sizing: border-box;
   margin-bottom: var(--spacing-unit);
+  padding: var(--spacing-unit);
+  border-radius: var(--round-corners);
+  resize: vertical;
 }
 
 .postButtonContainer {
   display: flex;
-  justify-content: flex-end;
+
+  &:first-child {
+    flex-grow: 1;
+  }
+
+  &:last-child {
+    flex-grow: 0;
+  }
 }

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

@@ -5,8 +5,8 @@ import { Field, Form } from "react-final-form";
 import PoweredBy from "./PoweredBy";
 import { OnSubmit } from "talk-framework/lib/form";
 import { required } from "talk-framework/lib/validation";
+import PoweredBy from "talk-stream/components/PoweredBy";
 import { Button, Typography } from "talk-ui/components";
-
 import * as styles from "./PostCommentForm.css";
 
 interface FormProps {
@@ -15,6 +15,7 @@ interface FormProps {
 
 export interface PostCommentFormProps {
   onSubmit: OnSubmit<FormProps>;
+  signedIn: boolean;
 }
 
 const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
@@ -29,6 +30,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
                 name={input.name}
                 onChange={input.onChange}
                 value={input.value}
+                placeholder="Post a comment"
               />
               {meta.touched &&
                 (meta.error || meta.submitError) && (
@@ -39,14 +41,26 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
             </div>
           )}
         </Field>
-        <div className={styles.postButtonContainer}>
-          <PoweredBy />
-          <Localized id="comments-postCommentForm-post">
-            <Button color="primary" variant="filled" disabled={submitting}>
-              Post
-            </Button>
-          </Localized>
-        </div>
+        {props.signedIn ? (
+          <div className={styles.postButtonContainer}>
+            <PoweredBy />
+            <Localized id="comments-postCommentForm-submit">
+              <Button color="primary" variant="filled" disabled={submitting}>
+                Submit
+              </Button>
+            </Localized>
+          </div>
+        ) : (
+          <Button
+            color="primary"
+            variant="filled"
+            disabled
+            fullWidth
+            size="large"
+          >
+            Sign In and join the conversation
+          </Button>
+        )}
       </form>
     )}
   </Form>

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

@@ -1,16 +1,11 @@
 import React, { StatelessComponent } from "react";
 import { Flex, Typography } from "talk-ui/components";
-import * as styles from "./PoweredBy.css";
 
-const PoweredBy: StatelessComponent = props => {
+const PoweredBy: StatelessComponent = () => {
   return (
     <Flex itemGutter="half">
-      <Typography className={styles.text} variant="bodyCopy">
-        Powered by
-      </Typography>
-      <Typography className={styles.text} variant="heading4">
-        The Coral Project
-      </Typography>
+      <Typography variant="bodyCopy">Powered by</Typography>
+      <Typography variant="heading4">The Coral Project</Typography>
     </Flex>
   );
 };

src/core/client/stream/components/UserBoxAuthenticated.css

@@ -0,0 +1,3 @@
+.child {
+  width: initial;
+}

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

@@ -0,0 +1,51 @@
+import { Localized } from "fluent-react/compat";
+import React, { StatelessComponent } from "react";
+
+import { Button, Flex, Typography } from "talk-ui/components";
+
+import MatchMedia from "talk-ui/components/MatchMedia";
+import * as styles from "./UserBoxAuthenticated.css";
+
+export interface UserBoxUnauthenticatedProps {
+  onSignOut: () => void;
+}
+
+const UserBoxAuthenticated: StatelessComponent<
+  UserBoxUnauthenticatedProps
+> = props => {
+  return (
+    <Flex itemGutter>
+      <Flex itemGutter="half" className={styles.child}>
+        <MatchMedia gteWidth="sm">
+          <Localized id="comments-userBoxAuthenticated-signedInAs">
+            <Typography variant="bodyCopy" component="span">
+              Signed in as
+            </Typography>
+          </Localized>
+          <Typography variant="bodyCopyBold" component="span">
+            okbel
+          </Typography>
+        </MatchMedia>
+      </Flex>
+      <Flex itemGutter="half" className={styles.child}>
+        <Localized id="comments-userBoxAuthenticated-notYou">
+          <Typography variant="bodyCopy" component="span">
+            Not you?
+          </Typography>
+        </Localized>
+        <Localized id="comments-userBoxAuthenticated-signOut">
+          <Button
+            color="primary"
+            size="small"
+            variant="underlined"
+            onClick={props.onSignOut}
+          >
+            Sign Out
+          </Button>
+        </Localized>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default UserBoxAuthenticated;

src/core/client/stream/components/UserBoxUnauthenticated.spec.1.tsx

@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import UserBoxUnauthenticated from "./UserBoxUnauthenticated";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof UserBoxUnauthenticated> = {
+    onSignIn: noop,
+    onRegister: noop,
+  };
+  const wrapper = shallow(<UserBoxUnauthenticated {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});