diff --git a/client/constants.js b/client/constants.js index e9d79ac1..1e50f5b7 100644 --- a/client/constants.js +++ b/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'; diff --git a/client/modules/IDE/components/NewPasswordView.js b/client/modules/IDE/components/NewPasswordView.js index a76f8a30..2a0a83b2 100644 --- a/client/modules/IDE/components/NewPasswordView.js +++ b/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 ( -
+

Set a New Password

+

+ The password reset token is invalid or has expired. +

+ Close
); } @@ -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) { diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 93f99351..a31b3558 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/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 ( diff --git a/client/modules/User/actions.js b/client/modules/User/actions.js index 8c3f9d14..bd67e0c3 100644 --- a/client/modules/User/actions.js +++ b/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 diff --git a/client/modules/User/reducers.js b/client/modules/User/reducers.js index e75087e1..9e3b5b9c 100644 --- a/client/modules/User/reducers.js +++ b/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; } diff --git a/client/styles/components/_new-password.scss b/client/styles/components/_new-password.scss index d03e78df..a559c5c1 100644 --- a/client/styles/components/_new-password.scss +++ b/client/styles/components/_new-password.scss @@ -6,4 +6,26 @@ justify-content: center; 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; + } } \ No newline at end of file