diff --git a/common/app/routes/Settings/Settings.jsx b/common/app/routes/Settings/Settings.jsx index d3bb42a66b..7adfd5d25e 100644 --- a/common/app/routes/Settings/Settings.jsx +++ b/common/app/routes/Settings/Settings.jsx @@ -4,7 +4,6 @@ import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { Button } from 'react-bootstrap'; -import ns from './ns.json'; import { FullWidthRow, Spacer, Loader } from '../../helperComponents'; import AboutSettings from './components/About-Settings.jsx'; import InternetSettings from './components/Internet-Settings.jsx'; @@ -53,7 +52,6 @@ const propTypes = { }; export class Settings extends React.Component { - componentWillMount() { this.props.updateTitle('Settings'); } @@ -73,7 +71,7 @@ export class Settings extends React.Component { return ; } return ( -
+
); } diff --git a/common/app/routes/Settings/Show.jsx b/common/app/routes/Settings/ShowSettings.jsx similarity index 77% rename from common/app/routes/Settings/Show.jsx rename to common/app/routes/Settings/ShowSettings.jsx index 7778df01b2..1bcd62c87b 100644 --- a/common/app/routes/Settings/Show.jsx +++ b/common/app/routes/Settings/ShowSettings.jsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; +import { Grid } from 'react-bootstrap'; import ns from './ns.json'; import { showUpdateEmailViewSelector } from './redux'; @@ -11,28 +12,30 @@ import ChildContainer from '../../Child-Container.jsx'; const mapStateToProps = state => ({ showUpdateEmailView: showUpdateEmailViewSelector(state) }); -const mapDispatchToProps = null; + const propTypes = { showUpdateEmailView: PropTypes.bool }; export function ShowSettings({ showUpdateEmailView }) { - let Comp = Settings; + let ChildComponent = Settings; + if (showUpdateEmailView) { - Comp = UpdateEmail; + ChildComponent = UpdateEmail; } + return ( -
- -
+ + +
); } + ShowSettings.displayName = 'ShowSettings'; ShowSettings.propTypes = propTypes; export default connect( - mapStateToProps, - mapDispatchToProps + mapStateToProps )(ShowSettings); diff --git a/common/app/routes/Settings/index.js b/common/app/routes/Settings/index.js index 2706328fa0..9ced24862f 100644 --- a/common/app/routes/Settings/index.js +++ b/common/app/routes/Settings/index.js @@ -1,6 +1,6 @@ import { types } from './redux'; -export { default } from './Show.jsx'; +export { default } from './ShowSettings.jsx'; export const routes = { [types.onRouteSettings]: '/settings', diff --git a/common/app/routes/Settings/routes/update-email/Update-Email.jsx b/common/app/routes/Settings/routes/update-email/Update-Email.jsx index 6c0e782a97..d241244722 100644 --- a/common/app/routes/Settings/routes/update-email/Update-Email.jsx +++ b/common/app/routes/Settings/routes/update-email/Update-Email.jsx @@ -27,26 +27,32 @@ const fields = [ ]; const validateFields = ({ email, duplicate }) => { const errors = {}; + if (!isEmail('' + email)) { errors.email = 'This email is invalid.'; } + if (duplicate && email !== duplicate) { errors.duplicate = 'This email does not match the one above.'; } + return errors; }; + const mapStateToProps = state => { const { app: { user: username }, entities: { user: userMap } } = state; const { email, emailVerified } = userMap[username] || {}; + return { initialValues: { email }, isEmailThere: !!email, isVerified: !!emailVerified }; }; + const propTypes = { fields: PropTypes.object.isRequired, handleSubmit: PropTypes.func.isRequired, @@ -61,6 +67,7 @@ export class UpdateEmail extends React.Component { super(...props); this.handleSubmit = this.handleSubmit.bind(this); } + handleSubmit(e) { e.preventDefault(); this.props.handleSubmit(({ email }) => this.props.updateMyEmail(email))(e); diff --git a/common/app/routes/Settings/settings.less b/common/app/routes/Settings/settings.less index bd75adc77a..a7f946bd89 100644 --- a/common/app/routes/Settings/settings.less +++ b/common/app/routes/Settings/settings.less @@ -28,11 +28,6 @@ } } -.offset-negative-row{ - margin-right: 15px; - margin-left: 15px; -} - .@{ns}-container { .center(@value: @container-xl, @padding: @grid-gutter-width);