wip

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],
   },
 };

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 (
-      <Dialog
-        open={this.props.showDialog}
-        className={cn(styles.dialog, 'talk-plugin-auth--edit-profile-dialog')}
-      >
+      <div>
         <span className={styles.close} onClick={this.props.closeDialog}>
           ×
         </span>
@@ -56,9 +52,9 @@ class ChangeEmailDialog extends React.Component {
           </div>
           <form>
             <InputField
-              id="password"
+              id="confirmPassword"
               label={t('talk-plugin-auth.change_email.enter_password')}
-              name="password"
+              name="confirmPassword"
               type="password"
               onChange={this.props.onChange}
               defaultValue=""
@@ -81,12 +77,12 @@ class ChangeEmailDialog extends React.Component {
             </Button>
           </div>
         </div>
-      </Dialog>
+      </div>
     );
   }
 }
 
-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;

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;

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 (
-      <Dialog
-        open={this.props.showDialog}
-        className={cn(styles.dialog, 'talk-plugin-auth--edit-profile-dialog')}
-      >
+      <div>
         <span className={styles.close} onClick={this.props.closeDialog}>
           ×
         </span>
@@ -89,12 +85,12 @@ class ChangeUsernameDialog extends React.Component {
             </Button>
           </div>
         </div>
-      </Dialog>
+      </div>
     );
   }
 }
 
-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;

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;
+}

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 (
+      <Dialog
+        open={this.props.showDialog}
+        className={cn(styles.dialog, 'talk-plugin-auth--edit-profile-dialog')}
+      >
+        <ChangeUsernameContentDialog {...this.props} />
+        <ChangeEmailContentDialog {...this.props} />
+      </Dialog>
+    );
+  }
+}
+
+export default ConfirmChangesDialog;

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,
         })}
       >
-        <ChangeUsernameDialog
-          showDialog={this.state.showDialog}
-          onChange={this.onChange}
-          formData={this.state.formData}
-          username={username}
-          closeDialog={this.closeDialog}
-          saveChanges={this.saveChanges}
-        />
-
-        <ChangeEmailDialog
+        <ConfirmChangesDialog
           showDialog={this.state.showDialog}
           onChange={this.onChange}
           formData={this.state.formData}
           username={username}
+          emailAddress={emailAddress}
           closeDialog={this.closeDialog}
           saveChanges={this.saveChanges}
         />
@@ -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;

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
 );