Merge pull request #369 from cadecairos/reset-message

display success message on a successful password reset

6 files changed, 154 insertions, 40 deletions

diff --git a/templates/components/password-reset-success.jsx b/templates/components/password-reset-success.jsx
new file mode 100644
index 0000000..c4e688d
--- /dev/null
+++ b/templates/components/password-reset-success.jsx
@@ -0,0 +1,33 @@
+var React = require('react');
+var IconText = require('./icontext.jsx');
+
+var PasswordResetSuccess = React.createClass({
+  render: function() {
+    var message = (
+      <p>Sign in with your password below</p>
+    );
+
+    if (this.props.android) {
+      message = (
+        <p>
+          <span>
+            If you are not automatically sent back to webmaker
+            <a href="webmaker://login?mode=sign-in"> click here</a>
+          </span>
+        </p>
+      );
+    }
+
+    return (
+      <IconText
+        iconClass="passwordResetIcon fa fa-check"
+        className="passwordResetSuccess"
+        header="Success! Your password has been reset."
+        headerClass="passwordResetHeader">
+          {message}
+      </IconText>
+    );
+  }
+});
+
+module.exports = PasswordResetSuccess;
diff --git a/templates/less/components/form.less b/templates/less/components/form.less
index df99711..bea00c9 100644
--- a/templates/less/components/form.less
+++ b/templates/less/components/form.less
@@ -142,6 +142,14 @@ div[role=form] {
   }
 }
 
+.largeWrapper {
+  height: 500px;
+}
+
+.smallWrapper {
+  height: 140px;
+}
+
 @media (min-width : 451px) {
   .centerDiv {
     position: absolute;
@@ -151,5 +159,6 @@ div[role=form] {
     right: 0px;
     margin: auto;
     width: 400px;
+    height: 245px;
   }
 }
diff --git a/templates/less/mixins.less b/templates/less/mixins.less
index 0d504a1..02d590b 100644
--- a/templates/less/mixins.less
+++ b/templates/less/mixins.less
@@ -11,3 +11,28 @@
   display: block;
   font-size: 18px;
 }
+
+.flex() {
+  display: -webkit-flex;
+  display:         flex;
+}
+
+.flex-shrink(@num) {
+  -webkit-flex-shrink: @num;
+          flex-shrink: @num;
+}
+
+.align-items(@alignment) {
+  -webkit-align-items: @alignment;
+          align-items: @alignment;
+}
+
+.flex-dir(@direction) {
+  -webkit-direction: @direction;
+     flex-direction: @direction;
+}
+
+.flex-order(@ord) {
+  -webkit-order: @ord;
+          order: @ord;
+}
diff --git a/templates/less/pages/reset-password.less b/templates/less/pages/reset-password.less
index 200d60b..88e9b96 100644
--- a/templates/less/pages/reset-password.less
+++ b/templates/less/pages/reset-password.less
@@ -13,25 +13,28 @@
   background-color: #FFFFFF;
 }
 
-.emailSent {
-  display: block;
+.emailSent,
+.passwordResetSuccess {
+  .flex();
+  .flex-dir(row);
+  .align-items(center);
   height: 140px;
   width: 100%;
   max-width: 400px;
   background-color: #F9FDFF;
   padding: 32px 15px;
   color: #525659;
-  .emailSentIcon {
+  .emailSentIcon,
+  .passwordResetIcon {
     &:before {
       top: .5em;
       position: relative;
       font-size: 28px;
       color: #72AFDE;
     }
+    .flex-order(1);
+    .flex-shrink(0);
     text-align: center;
-    float: left;
-    display: inline-block;
-    vertical-align: bottom;
     border: 2px solid #72AFDE;
     margin-right: 1rem;
     width: 6rem;
@@ -39,15 +42,23 @@
     border-radius: 2.5em;
   }
   .text {
-    display: inline;
-    p {
-      font-size: 15px;
-    }
-    .emailSentHeader {
+    .flex-dir(column);
+    .flex-order(2);
+    .emailSentHeader,
+    .passwordResetHeader {
+      .flex-order(1);
       margin: 0;
       font-size: 20px;
       line-height: 30px;
       font-weight: lighter;
     }
+    p {
+      .flex-order(2);
+      font-size: 15px;
+    }
   }
 }
+
+.passwordResetSuccess {
+  margin-bottom: 15px;
+}
diff --git a/templates/pages/login.jsx b/templates/pages/login.jsx
index 33e3788..1868d5a 100644
--- a/templates/pages/login.jsx
+++ b/templates/pages/login.jsx
@@ -4,6 +4,7 @@ var Link = Router.Link;
 
 var Form = require('../components/form/form.jsx');
 var Header = require('../components/header/header.jsx');
+var PasswordResetSuccess = require('../components/password-reset-success.jsx');
 var WebmakerActions = require('../lib/webmaker-actions.jsx');
 var Url = require('url');
 var ga = require('react-ga');
@@ -53,21 +54,34 @@ var Login = React.createClass({
     // FIXME: totally not localized yet!
     var buttonText = "Log In";
     this.queryObj = Url.parse(window.location.href, true).query;
+
+    var wrapperClass = "centerDiv";
+
+    if (this.queryObj.passwordReset) {
+      wrapperClass += " largeWrapper"
+    }
+
     return (
       <div>
         <Header origin="Login" className="desktopHeader" redirectQuery={this.queryObj} />
         <Header origin="Login" className="mobileHeader" redirectLabel="Signup" redirectPage="signup" redirectQuery={this.queryObj} mobile />
 
-        <div className="loginPage innerForm centerDiv">
-          <Form ref="userform"
-                fields={fieldValues}
-                validators={fieldValidators}
-                origin="Login"
-                onInputBlur={this.handleBlur}
-                defaultUsername={this.queryObj.username}
-          />
-          <button onClick={this.processFormData} className="btn btn-awsm">{buttonText}</button>
-          <Link onClick={this.handleGA.bind(this, 'Forgot your password')} to="reset-password" query={this.queryObj} className="need-help">Forgot your password?</Link>
+        <div className={wrapperClass}>
+          {this.queryObj.passwordReset ?
+            <PasswordResetSuccess android={false}/> : false
+          }
+
+          <div className="loginPage innerForm">
+            <Form ref="userform"
+                  fields={fieldValues}
+                  validators={fieldValidators}
+                  origin="Login"
+                  onInputBlur={this.handleBlur}
+                  defaultUsername={this.queryObj.username}
+            />
+            <button onClick={this.processFormData} className="btn btn-awsm">{buttonText}</button>
+            <Link onClick={this.handleGA.bind(this, 'Forgot your password')} to="reset-password" query={this.queryObj} className="need-help">Forgot your password?</Link>
+          </div>
         </div>
       </div>
     );
diff --git a/templates/pages/reset-password.jsx b/templates/pages/reset-password.jsx
index c14f040..22741ea 100644
--- a/templates/pages/reset-password.jsx
+++ b/templates/pages/reset-password.jsx
@@ -4,6 +4,7 @@ var Header = require('../components/header/header.jsx');
 var IconText = require('../components/icontext.jsx');
 var ResetView = require('../components/reset-password-view.jsx');
 var RequestView = require('../components/request-reset-view.jsx');
+var PasswordResetSuccess = require('../components/password-reset-success.jsx');
 var Router = require('react-router');
 var cookiejs = require('cookie-js');
 
@@ -28,32 +29,47 @@ var ResetPassword = React.createClass({
   render: function() {
     var emailText = "We've emailed you instructions for creating a new password.";
     var linkQuery = {};
+    var content;
+
     linkQuery.client_id = this.state.queryObj.client_id;
     linkQuery.state = this.state.queryObj.state;
     linkQuery.scopes = this.state.queryObj.scopes;
     linkQuery.response_type = this.state.queryObj.response_type;
-    return (
-      <div>
-        <Header origin="Reset Password" className="desktopHeader" redirectQuery={linkQuery} />
-        <Header origin="Reset Password" className="mobileHeader" redirectLabel="Signup" redirectPage="signup" redirectQuery={linkQuery} mobile />
 
+    if (this.state.resetSuccess) {
+      content = (
+        <div className="centerDiv smallWrapper">
+          <PasswordResetSuccess android={true}/>
+        </div>
+      );
+    } else {
+      content = (
         <div className="resetPasswordPage">
-            {!this.state.submitForm && !this.state.email ?
-              <RequestView submitForm={this.handleResetPassword}/> : false
-            }
+          {!this.state.submitForm && !this.state.email ?
+            <RequestView submitForm={this.handleResetPassword}/> : false
+          }
+
+          {this.state.submitForm ?
+            <IconText
+              iconClass="emailSentIcon fa fa-envelope-o"
+              className="emailSent centerDiv"
+              headerClass="emailSentHeader"
+              header="Check your email">
+                <p>{emailText}</p>
+            </IconText> : false}
 
-            {this.state.submitForm ?
-              <IconText
-                iconClass="emailSentIcon fa fa-envelope-o"
-                className="emailSent centerDiv"
-                headerClass="emailSentHeader"
-                header="Check your email">
-                  <p>{emailText}</p>
-              </IconText> : false}
-            {this.state.email ?
-              <ResetView username={this.state.queryObj.uid} submitForm={this.handleRequestPassword}/> : false
-            }
+          {this.state.email ?
+            <ResetView username={this.state.queryObj.uid} submitForm={this.handleRequestPassword}/> : false
+          }
         </div>
+      );
+    }
+
+    return (
+      <div>
+        <Header origin="Reset Password" className="desktopHeader" redirectQuery={linkQuery} />
+        <Header origin="Reset Password" className="mobileHeader" redirectLabel="Signup" redirectPage="signup" redirectQuery={linkQuery} mobile />
+        {content}
       </div>
     );
   },
@@ -87,7 +103,12 @@ var ResetPassword = React.createClass({
         queryObj = Url.parse(window.location.href, true).query;
         ga.event({category: 'Reset Password', action: 'Successfully request new password'});
         if ( queryObj.android === 'true' ) {
-          window.location = "webmaker://login?mode=sign-in";
+          this.setState({
+            resetSuccess: true
+          });
+          window.setTimeout(function() {
+            window.location = "webmaker://login?mode=sign-in";
+          }, 5000);
           return;
         }
         redirectObj = Url.parse('/login', true);
@@ -96,6 +117,7 @@ var ResetPassword = React.createClass({
         redirectObj.query.uid = queryObj.username;
         redirectObj.query.response_type = queryObj.response_type;
         redirectObj.query.scopes = queryObj.scopes;
+        redirectObj.query.passwordReset = true;
         window.location = Url.format(redirectObj);
         return;
       }