From 8df9a1e66e37b904fe90aa7ab04ae23b631c0a9f Mon Sep 17 00:00:00 2001 From: okbel Date: Mon, 30 Apr 2018 13:47:15 -0300 Subject: [PATCH] wip --- plugins/talk-plugin-auth/client/index.js | 4 +-- ...ialog.css => ChangeEmailContentDialog.css} | 0 ...lDialog.js => ChangeEmailContentDialog.js} | 22 ++++++------- ...og.css => ChangeUsernameContentDialog.css} | 11 ------- ...alog.js => ChangeUsernameContentDialog.js} | 18 +++++------ .../components/ConfirmChangesDialog.css | 10 ++++++ .../components/ConfirmChangesDialog.js | 22 +++++++++++++ .../{ChangeUsername.css => Profile.css} | 0 .../{ChangeUsername.js => Profile.js} | 31 +++++++++---------- .../{ChangeUsername.js => Profile.js} | 4 +-- 10 files changed, 67 insertions(+), 55 deletions(-) rename plugins/talk-plugin-auth/client/profile-settings/components/{ChangeEmailDialog.css => ChangeEmailContentDialog.css} (100%) rename plugins/talk-plugin-auth/client/profile-settings/components/{ChangeEmailDialog.js => ChangeEmailContentDialog.js} (83%) rename plugins/talk-plugin-auth/client/profile-settings/components/{ChangeUsernameDialog.css => ChangeUsernameContentDialog.css} (75%) rename plugins/talk-plugin-auth/client/profile-settings/components/{ChangeUsernameDialog.js => ChangeUsernameContentDialog.js} (86%) create mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ConfirmChangesDialog.css create mode 100644 plugins/talk-plugin-auth/client/profile-settings/components/ConfirmChangesDialog.js rename plugins/talk-plugin-auth/client/profile-settings/components/{ChangeUsername.css => Profile.css} (100%) rename plugins/talk-plugin-auth/client/profile-settings/components/{ChangeUsername.js => Profile.js} (90%) rename plugins/talk-plugin-auth/client/profile-settings/containers/{ChangeUsername.js => Profile.js} (85%) diff --git a/plugins/talk-plugin-auth/client/index.js b/plugins/talk-plugin-auth/client/index.js index 8fedb8033..6341dc7c9 100644 --- a/plugins/talk-plugin-auth/client/index.js +++ b/plugins/talk-plugin-auth/client/index.js @@ -5,7 +5,7 @@ import translations from './translations.yml'; import Login from './login/containers/Main'; import reducer from './login/reducer'; import ChangePassword from './profile-settings/containers/ChangePassword'; -import ChangeUsername from './profile-settings/containers/ChangeUsername'; +import Profile from './profile-settings/containers/Profile'; export default { reducer, @@ -13,7 +13,7 @@ export default { slots: { stream: [UserBox, SignInButton, SetUsernameDialog], login: [Login], - profileHeader: [ChangeUsername], + profileHeader: [Profile], profileSettings: [ChangePassword], }, }; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.css b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailContentDialog.css similarity index 100% rename from plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.css rename to plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailContentDialog.css diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailContentDialog.js similarity index 83% rename from plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.js rename to plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailContentDialog.js index 844b900e7..1bb8f7410 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailDialog.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeEmailContentDialog.js @@ -1,12 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import cn from 'classnames'; -import styles from './ChangeUsernameDialog.css'; +import styles from './ChangeEmailContentDialog.css'; import InputField from './InputField'; -import { Button, Dialog } from 'plugin-api/beta/client/components/ui'; +import { Button } from 'plugin-api/beta/client/components/ui'; import { t } from 'plugin-api/beta/client/services'; -class ChangeEmailDialog extends React.Component { +class ChangeEmailContentDialog extends React.Component { state = { showError: false, errors: { @@ -31,10 +30,7 @@ class ChangeEmailDialog extends React.Component { render() { return ( - +
× @@ -56,9 +52,9 @@ class ChangeEmailDialog extends React.Component {
-
+ ); } } -ChangeEmailDialog.propTypes = { +ChangeEmailContentDialog.propTypes = { saveChanges: PropTypes.func, closeDialog: PropTypes.func, showDialog: PropTypes.bool, @@ -95,4 +91,4 @@ ChangeEmailDialog.propTypes = { formData: PropTypes.object, }; -export default ChangeEmailDialog; +export default ChangeEmailContentDialog; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameContentDialog.css similarity index 75% rename from plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css rename to plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameContentDialog.css index af681d596..2f3cdd14d 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.css +++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameContentDialog.css @@ -1,14 +1,3 @@ -.dialog { - border: none; - box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); - width: 320px; - top: 10px; - font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif; - font-size: 14px; - border-radius: 4px; - padding: 12px 20px; -} - .close { font-size: 20px; line-height: 14px; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameContentDialog.js similarity index 86% rename from plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js rename to plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameContentDialog.js index 3ebf6ff02..4cf75a8a7 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameDialog.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsernameContentDialog.js @@ -1,12 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import cn from 'classnames'; -import styles from './ChangeUsernameDialog.css'; +import styles from './ChangeUsernameContentDialog.css'; import InputField from './InputField'; -import { Button, Dialog } from 'plugin-api/beta/client/components/ui'; +import { Button } from 'plugin-api/beta/client/components/ui'; import { t } from 'plugin-api/beta/client/services'; -class ChangeUsernameDialog extends React.Component { +class ChangeUsernameContentDialog extends React.Component { state = { showError: false, }; @@ -31,10 +30,7 @@ class ChangeUsernameDialog extends React.Component { render() { return ( - +
× @@ -89,12 +85,12 @@ class ChangeUsernameDialog extends React.Component {
- + ); } } -ChangeUsernameDialog.propTypes = { +ChangeUsernameContentDialog.propTypes = { saveChanges: PropTypes.func, closeDialog: PropTypes.func, showDialog: PropTypes.bool, @@ -103,4 +99,4 @@ ChangeUsernameDialog.propTypes = { formData: PropTypes.object, }; -export default ChangeUsernameDialog; +export default ChangeUsernameContentDialog; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ConfirmChangesDialog.css b/plugins/talk-plugin-auth/client/profile-settings/components/ConfirmChangesDialog.css new file mode 100644 index 000000000..daa884404 --- /dev/null +++ b/plugins/talk-plugin-auth/client/profile-settings/components/ConfirmChangesDialog.css @@ -0,0 +1,10 @@ +.dialog { + border: none; + box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2); + width: 320px; + top: 10px; + font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif; + font-size: 14px; + border-radius: 4px; + padding: 12px 20px; +} \ No newline at end of file diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ConfirmChangesDialog.js b/plugins/talk-plugin-auth/client/profile-settings/components/ConfirmChangesDialog.js new file mode 100644 index 000000000..4b6fa8221 --- /dev/null +++ b/plugins/talk-plugin-auth/client/profile-settings/components/ConfirmChangesDialog.js @@ -0,0 +1,22 @@ +import React from 'react'; +import cn from 'classnames'; +import styles from './ConfirmChangesDialog.css'; +import { Dialog } from 'plugin-api/beta/client/components/ui'; +import ChangeUsernameContentDialog from './ChangeUsernameContentDialog'; +import ChangeEmailContentDialog from './ChangeEmailContentDialog'; + +class ConfirmChangesDialog extends React.Component { + render() { + return ( + + + + + ); + } +} + +export default ConfirmChangesDialog; diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css b/plugins/talk-plugin-auth/client/profile-settings/components/Profile.css similarity index 100% rename from plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.css rename to plugins/talk-plugin-auth/client/profile-settings/components/Profile.css diff --git a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js b/plugins/talk-plugin-auth/client/profile-settings/components/Profile.js similarity index 90% rename from plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js rename to plugins/talk-plugin-auth/client/profile-settings/components/Profile.js index d9f020491..642917f00 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/components/ChangeUsername.js +++ b/plugins/talk-plugin-auth/client/profile-settings/components/Profile.js @@ -1,15 +1,14 @@ import React from 'react'; import cn from 'classnames'; import PropTypes from 'prop-types'; -import styles from './ChangeUsername.css'; +import styles from './Profile.css'; import { Button } from 'plugin-api/beta/client/components/ui'; -import ChangeUsernameDialog from './ChangeUsernameDialog'; -import ChangeEmailDialog from './ChangeEmailDialog'; import { t } from 'plugin-api/beta/client/services'; import InputField from './InputField'; import { getErrorMessages } from 'coral-framework/utils'; import validate from 'coral-framework/helpers/validate'; import errorMsj from 'coral-framework/helpers/error'; +import ConfirmChangesDialog from './ConfirmChangesDialog'; const initialState = { editing: false, @@ -18,7 +17,7 @@ const initialState = { errors: {}, }; -class ChangeUsername extends React.Component { +class Profile extends React.Component { state = initialState; clearForm = () => { @@ -89,6 +88,7 @@ class ChangeUsername extends React.Component { }; fieldValidation = (value, type, name) => { + console.log(value, type, name); if (!value.length) { this.addError({ [name]: t('talk-plugin-auth.change_password.required_field'), @@ -136,6 +136,13 @@ class ChangeUsername extends React.Component { this.state.formData.newEmail && this.state.formData.newEmail !== this.props.emailAddress; + // const res = !formHasErrors && (!!validUsername || !!validEmail); + // console.log('formHasErrors:', formHasErrors); + // console.log('validUsername:', validUsername); + // console.log('validEmail:', validEmail); + // console.log('res:', res); + // console.log(this.state.errors); + return !formHasErrors && (validUsername || validEmail); }; @@ -149,20 +156,12 @@ class ChangeUsername extends React.Component { [styles.editing]: editing, })} > - - - @@ -232,11 +231,11 @@ class ChangeUsername extends React.Component { } } -ChangeUsername.propTypes = { +Profile.propTypes = { changeUsername: PropTypes.func.isRequired, notify: PropTypes.func.isRequired, username: PropTypes.string, emailAddress: PropTypes.string, }; -export default ChangeUsername; +export default Profile; diff --git a/plugins/talk-plugin-auth/client/profile-settings/containers/ChangeUsername.js b/plugins/talk-plugin-auth/client/profile-settings/containers/Profile.js similarity index 85% rename from plugins/talk-plugin-auth/client/profile-settings/containers/ChangeUsername.js rename to plugins/talk-plugin-auth/client/profile-settings/containers/Profile.js index 87e1e18b5..5495888b0 100644 --- a/plugins/talk-plugin-auth/client/profile-settings/containers/ChangeUsername.js +++ b/plugins/talk-plugin-auth/client/profile-settings/containers/Profile.js @@ -1,12 +1,12 @@ import { compose } from 'react-apollo'; import { bindActionCreators } from 'redux'; import { connect } from 'plugin-api/beta/client/hocs'; -import ChangeUsername from '../components/ChangeUsername'; +import Profile from '../components/Profile'; import { notify } from 'coral-framework/actions/notification'; import { withChangeUsername } from 'plugin-api/beta/client/hocs'; const mapDispatchToProps = dispatch => bindActionCreators({ notify }, dispatch); export default compose(connect(null, mapDispatchToProps), withChangeUsername)( - ChangeUsername + Profile );