From fee270833480ad32187e61dab0b2c24e5fd52b88 Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Fri, 8 Feb 2019 11:14:16 -0600
Subject: [PATCH 1/2] Replace placeholder comment blocker with disabled
 markdown input and message

---
 .../client/components/MarkdownEditor/index.tsx    |  3 +++
 .../client/components/Proposal/Comments/index.tsx | 15 +++++++++++----
 .../components/Proposal/Comments/style.less       |  5 +++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/client/components/MarkdownEditor/index.tsx b/frontend/client/components/MarkdownEditor/index.tsx
index 22c97cc1..8dbd3d17 100644
--- a/frontend/client/components/MarkdownEditor/index.tsx
+++ b/frontend/client/components/MarkdownEditor/index.tsx
@@ -33,6 +33,7 @@ const commands: { [key in MARKDOWN_TYPE]: ReactMdeProps['commands'] } = {
 };
 
 interface Props {
+  readOnly?: boolean | null;
   type?: MARKDOWN_TYPE;
   initialMarkdown?: string;
   onChange(markdown: string): void;
@@ -62,6 +63,7 @@ export default class MarkdownEditor extends React.PureComponent<Props, State> {
 
   render() {
     const type = this.props.type || MARKDOWN_TYPE.FULL;
+    const { readOnly } = this.props;
     const { mdeState, randomKey } = this.state;
     return (
       <div
@@ -76,6 +78,7 @@ export default class MarkdownEditor extends React.PureComponent<Props, State> {
           editorState={mdeState as ReactMdeTypes.MdeState}
           generateMarkdownPreview={this.generatePreview}
           commands={commands[type]}
+          readOnly={!!readOnly}
           layout="tabbed"
         />
       </div>
diff --git a/frontend/client/components/Proposal/Comments/index.tsx b/frontend/client/components/Proposal/Comments/index.tsx
index 44b2451d..56df3e63 100644
--- a/frontend/client/components/Proposal/Comments/index.tsx
+++ b/frontend/client/components/Proposal/Comments/index.tsx
@@ -125,10 +125,17 @@ class ProposalComments extends React.Component<Props, State> {
               </Button>
             </>
           ) : (
-            <Placeholder
-              title="Your email is not verified"
-              subtitle="Please verify your email to post a comment."
-            />
+            <>
+              <h4 className="ProposalComments-verify">
+                Please verify your email to post a comment.
+              </h4>
+              <MarkdownEditor
+                ref={el => (this.editor = el)}
+                onChange={this.handleCommentChange}
+                type={MARKDOWN_TYPE.REDUCED}
+                readOnly={true}
+              />
+            </>
           )}
         </div>
         {content}
diff --git a/frontend/client/components/Proposal/Comments/style.less b/frontend/client/components/Proposal/Comments/style.less
index 54f6864b..1b1b5f84 100644
--- a/frontend/client/components/Proposal/Comments/style.less
+++ b/frontend/client/components/Proposal/Comments/style.less
@@ -3,4 +3,9 @@
     margin-bottom: 2rem;
     max-width: 780px;
   }
+  &-verify {
+    font-size: 1rem;
+    opacity: 0.7;
+    margin-bottom: 1rem;
+  }
 }

From 536a98694cf4f0a3210a948b418e16f4574d303c Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Sun, 10 Feb 2019 13:33:02 -0600
Subject: [PATCH 2/2] handle not signed in users

---
 .../components/Proposal/Comments/index.tsx    | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/frontend/client/components/Proposal/Comments/index.tsx b/frontend/client/components/Proposal/Comments/index.tsx
index 56df3e63..dcdfac15 100644
--- a/frontend/client/components/Proposal/Comments/index.tsx
+++ b/frontend/client/components/Proposal/Comments/index.tsx
@@ -9,7 +9,7 @@ import {
   getIsFetchingComments,
   getProposalComments,
 } from 'modules/proposals/selectors';
-import { getIsVerified } from 'modules/auth/selectors';
+import { getIsVerified, getIsSignedIn } from 'modules/auth/selectors';
 import Comments from 'components/Comments';
 import Placeholder from 'components/Placeholder';
 import Loader from 'components/Loader';
@@ -27,6 +27,7 @@ interface StateProps {
   isPostCommentPending: AppState['proposal']['isPostCommentPending'];
   postCommentError: AppState['proposal']['postCommentError'];
   isVerified: ReturnType<typeof getIsVerified>;
+  isSignedIn: ReturnType<typeof getIsSignedIn>;
 }
 
 interface DispatchProps {
@@ -79,6 +80,7 @@ class ProposalComments extends React.Component<Props, State> {
       commentsError,
       isPostCommentPending,
       isVerified,
+      isSignedIn,
     } = this.props;
     const { comment } = this.state;
     let content = null;
@@ -108,7 +110,7 @@ class ProposalComments extends React.Component<Props, State> {
     return (
       <div>
         <div className="ProposalComments-post">
-          {isVerified ? (
+          {isVerified && (
             <>
               <MarkdownEditor
                 ref={el => (this.editor = el)}
@@ -124,19 +126,20 @@ class ProposalComments extends React.Component<Props, State> {
                 Submit comment
               </Button>
             </>
-          ) : (
-            <>
-              <h4 className="ProposalComments-verify">
-                Please verify your email to post a comment.
-              </h4>
-              <MarkdownEditor
-                ref={el => (this.editor = el)}
-                onChange={this.handleCommentChange}
-                type={MARKDOWN_TYPE.REDUCED}
-                readOnly={true}
-              />
-            </>
           )}
+          {isSignedIn &&
+            !isVerified && (
+              <>
+                <h4 className="ProposalComments-verify">
+                  Please verify your email to post a comment.
+                </h4>
+                <MarkdownEditor
+                  onChange={this.handleCommentChange}
+                  type={MARKDOWN_TYPE.REDUCED}
+                  readOnly={true}
+                />
+              </>
+            )}
         </div>
         {content}
       </div>
@@ -160,6 +163,7 @@ export default connect<StateProps, DispatchProps, OwnProps, AppState>(
     isPostCommentPending: state.proposal.isPostCommentPending,
     postCommentError: state.proposal.postCommentError,
     isVerified: getIsVerified(state),
+    isSignedIn: getIsSignedIn(state),
   }),
   {
     fetchProposalComments,