request pw reset from ui

client/coral-framework/actions/auth.js

@@ -87,9 +87,9 @@ const forgotPassowordRequest = () => ({type: actions.FETCH_FORGOT_PASSWORD_REQUE
 const forgotPassowordSuccess = () => ({type: actions.FETCH_FORGOT_PASSWORD_SUCCESS});
 const forgotPassowordFailure = () => ({type: actions.FETCH_FORGOT_PASSWORD_FAILURE});
 
-export const fetchForgotPassword = () => dispatch => {
-  dispatch(forgotPassowordRequest());
-  fetch(`${base}/user/request-password-reset`, getInit('POST'))
+export const fetchForgotPassword = email => dispatch => {
+  dispatch(forgotPassowordRequest(email));
+  fetch(`${base}/user/request-password-reset`, getInit('POST', {email}))
     .then(handleResp)
     .then(() => dispatch(forgotPassowordSuccess()))
     .catch(error => dispatch(forgotPassowordFailure(error)));

client/coral-framework/reducers/auth.js

@@ -8,6 +8,8 @@ const initialState = Map({
   showSignInDialog: false,
   view: 'SIGNIN',
   error: '',
+  passwordRequestSuccess: null,
+  passwordRequestFailure: null,
   successSignUp: false
 });
 
@@ -22,6 +24,8 @@ export default function auth (state = initialState, action) {
       showSignInDialog: false,
       view: 'SIGNIN',
       error: '',
+      passwordRequestFailure: null,
+      passwordRequestSuccess: null,
       successSignUp: false
     }));
   case actions.CHANGE_VIEW :
@@ -70,6 +74,14 @@ export default function auth (state = initialState, action) {
   case actions.VALID_FORM:
     return state
       .set('error', '');
+  case actions.FETCH_FORGOT_PASSWORD_SUCCESS:
+    return state
+      .set('passwordRequestFailure', null)
+      .set('passwordRequestSuccess', 'If you have a registered account, a password reset link was sent to that email');
+  case actions.FETCH_FORGOT_PASSWORD_FAILURE:
+    return state
+      .set('passwordRequestFailure', 'There was an error sending your password reset email. Please try again soon!')
+      .set('passwordRequestSuccess', null);
   default :
     return state;
   }

client/coral-sign-in/components/ForgotContent.js

@@ -5,25 +5,56 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations';
 const lang = new I18n(translations);
 
-const ForgotContent = ({changeView, ...props}) => (
-  <div>
-    <div className={styles.header}>
-      <h1>{lang.t('signIn.recoverPassword')}</h1>
-    </div>
-    <form onSubmit={(e) => {e.preventDefault(); props.fetchForgotPassword();}}>
-      <div className={styles.formField}>
-        <label htmlFor="email">{lang.t('signIn.email')}</label>
-        <input type="text" id="email" />
+class ForgotContent extends React.Component {
+  constructor (props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit (e) {
+    e.preventDefault();
+    this.props.fetchForgotPassword(this.emailInput.value);
+  }
+
+  render () {
+    const {changeView, auth} = this.props;
+    const {passwordRequestSuccess, passwordRequestFailure} = auth;
+
+    return (
+      <div>
+        <div className={styles.header}>
+          <h1>{lang.t('signIn.recoverPassword')}</h1>
+        </div>
+        <form onSubmit={this.handleSubmit}>
+          <div className={styles.formField}>
+            <label htmlFor="email">{lang.t('signIn.email')}</label>
+            <input
+              ref={input => this.emailInput = input}
+              type="text"
+              id="email"
+              name="email" />
+          </div>
+          <Button type="submit" cStyle="black" className={styles.signInButton}>
+            {lang.t('signIn.recoverPassword')}
+          </Button>
+          {
+            passwordRequestSuccess
+            ? <p className={styles.passwordRequestSuccess}>{passwordRequestSuccess}</p>
+            : null
+          }
+          {
+            passwordRequestFailure
+            ? <p className={styles.attention}>{passwordRequestFailure}</p>
+            : null
+          }
+        </form>
+        <div className={styles.footer}>
+          <span>{lang.t('signIn.needAnAccount')} <a onClick={() => changeView('SIGNUP')}>{lang.t('signIn.register')}</a></span>
+          <span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => changeView('SIGNIN')}>{lang.t('signIn.signIn')}</a></span>
+        </div>
       </div>
-      <Button type="submit" cStyle="black" className={styles.signInButton}>
-        {lang.t('signIn.recoverPassword')}
-      </Button>
-    </form>
-    <div className={styles.footer}>
-      <span>{lang.t('signIn.needAnAccount')} <a onClick={() => changeView('SIGNUP')}>{lang.t('signIn.register')}</a></span>
-      <span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => changeView('SIGNIN')}>{lang.t('signIn.signIn')}</a></span>
-    </div>
-  </div>
-);
+    );
+  }
+}
 
 export default ForgotContent;

client/coral-sign-in/components/styles.css

@@ -128,4 +128,16 @@ input.error{
 
 .action {
     margin-top: 15px;
-}
+}
+
+.passwordRequestSuccess {
+    border: 1px solid green;
+    background-color: lightgreen;
+    padding: 10px;
+}
+
+.passwordRequestFailure {
+    border: 1px solid orange;
+    background-color: 1px solid coral
+}
+

routes/api/user/index.js

@@ -100,7 +100,7 @@ router.post('/request-password-reset', (req, res, next) => {
   const {email} = req.body;
 
   if (!email) {
-    return next();
+    return next('you must submit an email when requesting a password.');
   }
 
   User