invalid password reset token styling

client/constants.js

@@ -95,6 +95,6 @@ export const RESET_INFINITE_LOOPS = 'RESET_INFINITE_LOOPS';
 
 export const RESET_PASSWORD_INITIATE = 'RESET_PASSWORD_INITIATE';
 export const RESET_PASSWORD_RESET = 'RESET_PASSWORD_RESET';
-
+export const INVALID_RESET_PASSWORD_TOKEN = 'INVALID_RESET_PASSWORD_TOKEN';
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/components/NewPasswordView.js

@@ -3,6 +3,8 @@ import { reduxForm } from 'redux-form';
 import NewPasswordForm from './NewPasswordForm';
 import * as UserActions from '../../User/actions';
 import { bindActionCreators } from 'redux';
+import classNames from 'classnames';
+import { Link } from 'react-router';
 
 class NewPasswordView extends React.Component {
   componentDidMount() {
@@ -12,10 +14,20 @@ class NewPasswordView extends React.Component {
   }
 
   render() {
+    const newPasswordClass = classNames({
+      'new-password': true,
+      'new-password--invalid': this.props.user.resetPasswordInvalid
+    });
+    console.log(this.props.user);
+    console.log('rerendering!!');
     return (
-      <div className="new-password" ref="newPassword" tabIndex="0">
+      <div className={newPasswordClass} ref="newPassword" tabIndex="0">
         <h1>Set a New Password</h1>
         <NewPasswordForm {...this.props} />
+        <p className="new-password__invalid">
+          The password reset token is invalid or has expired.
+        </p>
+        <Link className="form__cancel-button" to="/">Close</Link>
       </div>
     );
   }
@@ -23,7 +35,10 @@ class NewPasswordView extends React.Component {
 
 NewPasswordView.propTypes = {
   token: PropTypes.string.isRequired,
-  validateResetPasswordToken: PropTypes.func.isRequired
+  validateResetPasswordToken: PropTypes.func.isRequired,
+  user: PropTypes.shape({
+    resetPasswordInvalid: PropTypes.bool
+  })
 };
 
 function validate(formProps) {

client/modules/IDE/pages/IDEView.js

@@ -422,7 +422,7 @@ class IDEView extends React.Component {
           }
         })()}
         {(() => { // eslint-disable-line
-          if (this.props.location.pathname.match(/\/reset-password\/[a-fA-F0-9]{40}/)) {
+          if (this.props.location.pathname.match(/\/reset-password\/[a-fA-F0-9]+/)) {
             return (
               <Overlay>
                 <NewPasswordView token={this.props.params.reset_password_token} />

client/modules/User/actions.js

@@ -131,7 +131,6 @@ export function validateResetPasswordToken(token) {
     axios.get(`${ROOT_URL}/reset-password/${token}`)
       .then(() => {
         // do nothing if the token is valid
-        // add the token to the state?
       })
       .catch(() => dispatch({
         type: ActionTypes.INVALID_RESET_PASSWORD_TOKEN

client/modules/User/reducers.js

@@ -14,9 +14,11 @@ const user = (state = { authenticated: false }, action) => {
         authenticated: false
       };
     case ActionTypes.RESET_PASSWORD_INITIATE:
-      return Object.assign(state, {}, { resetPasswordInitiate: true });
+      return Object.assign({}, state, { resetPasswordInitiate: true });
     case ActionTypes.RESET_PASSWORD_RESET:
-      return Object.assign(state, {}, { resetPasswordInitiate: false });
+      return Object.assign({}, state, { resetPasswordInitiate: false });
+    case ActionTypes.INVALID_RESET_PASSWORD_TOKEN:
+      return Object.assign({}, state, { resetPasswordInvalid: true });
     default:
       return state;
   }

client/styles/components/_new-password.scss

@@ -7,3 +7,25 @@
   padding: #{20 / $base-font-size}rem;
   align-items: center;
 }
+
+.new-password-form__password-input,
+.new-password-form__confirm-password-input {
+  width: #{300 / $base-font-size}rem;
+}
+
+.new-password-form__field {
+  margin: #{20 / $base-font-size}rem 0;
+}
+
+.new-password-form {
+  .new-password--invalid & {
+    display: none;
+  }
+}
+
+.new-password__invalid {
+  display: none;
+  .new-password--invalid & {
+    display: block;
+  }
+}