From 6c95502b4eca32af1c30b123b76fa533e49008f1 Mon Sep 17 00:00:00 2001
From: Lance Ruegger <lance@tune.com>
Date: Thu, 5 Oct 2017 17:36:38 -0700
Subject: [PATCH 1/5] Change DOM input to coral-ui TextField to inherit
 styling, add prop-types validation, convert from using ref to using state.

---
 .../client/components/ForgotContent.js        | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/plugins/talk-plugin-auth/client/components/ForgotContent.js b/plugins/talk-plugin-auth/client/components/ForgotContent.js
index 916c3f5b3..49692abbb 100644
--- a/plugins/talk-plugin-auth/client/components/ForgotContent.js
+++ b/plugins/talk-plugin-auth/client/components/ForgotContent.js
@@ -1,14 +1,27 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import styles from './styles.css';
-import {Button} from 'plugin-api/beta/client/components/ui';
+import {Button, TextField} from 'plugin-api/beta/client/components/ui';
 import t from 'coral-framework/services/i18n';
 
 class ForgotContent extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      value: '',
+    };
+  }
+
   handleSubmit = (e) => {
     e.preventDefault();
-    this.props.fetchForgotPassword(this.emailInput.value);
+    this.props.fetchForgotPassword(this.state.value);
   };
 
+  handleChangEmail = (e) => {
+    const {value} = e.target;
+    this.setState({value});
+  }
+
   render() {
     const {changeView, auth} = this.props;
     const {passwordRequestSuccess, passwordRequestFailure} = auth;
@@ -20,13 +33,13 @@ class ForgotContent extends React.Component {
         </div>
         <form onSubmit={this.handleSubmit}>
           <div className={styles.textField}>
-            <label htmlFor="email">{t('sign_in.email')}</label>
-            <input
-              ref={(input) => (this.emailInput = input)}
-              type="text"
+            <TextField
+              type="email"
               style={{fontSize: 16}}
               id="email"
               name="email"
+              label={t('sign_in.email')}
+              onChange={this.handleChangEmail}
             />
           </div>
           <Button
@@ -69,4 +82,10 @@ class ForgotContent extends React.Component {
   }
 }
 
+ForgotContent.propTypes = {
+  auth: PropTypes.object,
+  changeView: PropTypes.func,
+  fetchForgotPassword: PropTypes.func,
+};
+
 export default ForgotContent;

From 57f8a64cf4d18b6f080ab68adadab7ada2be09ec Mon Sep 17 00:00:00 2001
From: kamos1 <keji.amos@gmail.com>
Date: Fri, 6 Oct 2017 12:24:58 -0600
Subject: [PATCH 2/5] fix issue 1037

---
 client/talk-plugin-commentbox/CommentForm.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/talk-plugin-commentbox/CommentForm.js b/client/talk-plugin-commentbox/CommentForm.js
index f4bbbd139..347051a42 100644
--- a/client/talk-plugin-commentbox/CommentForm.js
+++ b/client/talk-plugin-commentbox/CommentForm.js
@@ -82,11 +82,16 @@ export class CommentForm extends React.Component {
     }
   }
 
+  removeNewLine = (string) => {
+    return string.replace(/\n/g, '');
+  }
+
   render() {
     const {maxCharCount, submitEnabled, cancelButtonClassName, submitButtonClassName, charCountEnable, body, loadingState} = this.props;
 
-    const length = body.length;
-    const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount;
+    const cleanedBody = this.removeNewLine(body);
+    const length = cleanedBody.length;
+    const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount; 
     const disableSubmitButton = !length || isRespectingMaxCount(length) || !submitEnabled({body}) || loadingState === 'loading';
     const disableCancelButton = loadingState === 'loading';
     const disableTextArea = loadingState === 'loading';

From 8ab31d70093bca77739b57cba7e89b859efbf3f1 Mon Sep 17 00:00:00 2001
From: kamos1 <keji.amos@gmail.com>
Date: Fri, 6 Oct 2017 13:19:37 -0600
Subject: [PATCH 3/5] add trim to prevent empty spaces, tabs and other
 whitespace characters

---
 client/talk-plugin-commentbox/CommentForm.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/talk-plugin-commentbox/CommentForm.js b/client/talk-plugin-commentbox/CommentForm.js
index 347051a42..5093e3f1c 100644
--- a/client/talk-plugin-commentbox/CommentForm.js
+++ b/client/talk-plugin-commentbox/CommentForm.js
@@ -90,7 +90,7 @@ export class CommentForm extends React.Component {
     const {maxCharCount, submitEnabled, cancelButtonClassName, submitButtonClassName, charCountEnable, body, loadingState} = this.props;
 
     const cleanedBody = this.removeNewLine(body);
-    const length = cleanedBody.length;
+    const length = cleanedBody.trim().length;
     const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount; 
     const disableSubmitButton = !length || isRespectingMaxCount(length) || !submitEnabled({body}) || loadingState === 'loading';
     const disableCancelButton = loadingState === 'loading';

From e95e0381c2157e96d6b40d683c93b7371e9970d0 Mon Sep 17 00:00:00 2001
From: kamos1 <keji.amos@gmail.com>
Date: Fri, 6 Oct 2017 13:25:32 -0600
Subject: [PATCH 4/5] remove removeNewLine and add .trim to length variable

---
 client/talk-plugin-commentbox/CommentForm.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/client/talk-plugin-commentbox/CommentForm.js b/client/talk-plugin-commentbox/CommentForm.js
index 5093e3f1c..55d248994 100644
--- a/client/talk-plugin-commentbox/CommentForm.js
+++ b/client/talk-plugin-commentbox/CommentForm.js
@@ -82,15 +82,10 @@ export class CommentForm extends React.Component {
     }
   }
 
-  removeNewLine = (string) => {
-    return string.replace(/\n/g, '');
-  }
-
   render() {
     const {maxCharCount, submitEnabled, cancelButtonClassName, submitButtonClassName, charCountEnable, body, loadingState} = this.props;
 
-    const cleanedBody = this.removeNewLine(body);
-    const length = cleanedBody.trim().length;
+    const length = body.trim().length;
     const isRespectingMaxCount = (length) => charCountEnable && maxCharCount && length > maxCharCount; 
     const disableSubmitButton = !length || isRespectingMaxCount(length) || !submitEnabled({body}) || loadingState === 'loading';
     const disableCancelButton = loadingState === 'loading';

From 252ec8f6ac3aced465ed53de262b150fe7ac6d3a Mon Sep 17 00:00:00 2001
From: Lance Ruegger <lance@tune.com>
Date: Fri, 6 Oct 2017 12:26:03 -0700
Subject: [PATCH 5/5] Change full constructor to use class property, fix typo
 in handleChangeEmail, pass value to TextField to ensure they stay in sync.

---
 .../client/components/ForgotContent.js              | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/plugins/talk-plugin-auth/client/components/ForgotContent.js b/plugins/talk-plugin-auth/client/components/ForgotContent.js
index 49692abbb..d8ae2fab0 100644
--- a/plugins/talk-plugin-auth/client/components/ForgotContent.js
+++ b/plugins/talk-plugin-auth/client/components/ForgotContent.js
@@ -5,19 +5,15 @@ import {Button, TextField} from 'plugin-api/beta/client/components/ui';
 import t from 'coral-framework/services/i18n';
 
 class ForgotContent extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      value: '',
-    };
-  }
+  
+  state = {value: ''};
 
   handleSubmit = (e) => {
     e.preventDefault();
     this.props.fetchForgotPassword(this.state.value);
   };
 
-  handleChangEmail = (e) => {
+  handleChangeEmail = (e) => {
     const {value} = e.target;
     this.setState({value});
   }
@@ -39,7 +35,8 @@ class ForgotContent extends React.Component {
               id="email"
               name="email"
               label={t('sign_in.email')}
-              onChange={this.handleChangEmail}
+              onChange={this.handleChangeEmail}
+              value={this.state.value}
             />
           </div>
           <Button