fix: update email settings

common/app/routes/Settings/components/Email-Settings.jsx

@@ -13,29 +13,13 @@ import {
 } from 'react-bootstrap';
 
 import TB from '../Toggle-Button';
-// import EmailForm from './EmailForm.jsx';
+import EmailForm from './EmailForm.jsx';
 import { Link } from '../../../Router';
-import { FullWidthRow } from '../../../helperComponents';
+import { FullWidthRow, Spacer } from '../../../helperComponents';
 import SectionHeader from './SectionHeader.jsx';
 import { userSelector } from '../../../redux';
 import { onRouteUpdateEmail, updateMyEmail, updateUserBackend } from '../redux';
 
-/**
-  Removed functionality until we can update auth0 at the same time
-
-  <FullWidthRow>
-    <UpdateEmailButton />
-  </FullWidthRow>
-
-
-  <FullWidthRow>
-    <EmailForm
-      initialValues={{ email, confrimEmail: ''}}
-    />
-  </FullWidthRow>
-  <Spacer />
- */
-
 const mapStateToProps = createSelector(
   userSelector,
   ({
@@ -117,8 +101,9 @@ class EmailSettings extends PureComponent {
               You do not have an email associated with this account.
             </p>
           </FullWidthRow>
-
-
+          <FullWidthRow>
+            <UpdateEmailButton />
+          </FullWidthRow>
         </div>
       );
     }
@@ -139,8 +124,13 @@ class EmailSettings extends PureComponent {
             </HelpBlock>
           </FullWidthRow>
         }
-
-
+        <FullWidthRow>
+          <EmailForm
+            email={ email }
+            initialValues={{ email, confirmEmail: '' }}
+          />
+        </FullWidthRow>
+        <Spacer />
         <FullWidthRow>
           <Row className='inline-form-field' key='sendQuincyEmail'>
             <Col sm={ 8 }>

common/app/routes/Settings/components/EmailForm.jsx

@@ -79,10 +79,20 @@ class EmailForm extends PureComponent {
 
     return (
       <form id='email-form' onSubmit={ handleSubmit(this.handleSubmit) }>
+        <Row className='inline-form-field'>
+          <Col sm={ 3 } xs={ 12 }>
+            Current Email
+          </Col>
+          <Col sm={ 9 } xs={ 12 }>
+            <h4>
+              { this.props.email }
+            </h4>
+          </Col>
+        </Row>
         <Row className='inline-form-field'>
             <Col sm={ 3 } xs={ 12 }>
               <ControlLabel htmlFor='email'>
-                Email
+                New Email
               </ControlLabel>
             </Col>
             <Col sm={ 9 } xs={ 12 }>
@@ -111,7 +121,7 @@ class EmailForm extends PureComponent {
           <Row className='inline-form-field'>
             <Col sm={ 3 } xs={ 12 }>
               <ControlLabel htmlFor='confirm-email'>
-                Confirm Email
+                Confirm New Email
               </ControlLabel>
             </Col>
             <Col sm={ 9 } xs={ 12 }>

common/app/routes/Settings/components/SectionHeader.jsx

@@ -13,7 +13,7 @@ const propTypes = {
 function SectionHeader({ children }) {
   return (
     <FullWidthRow>
-      <h2>{ children }</h2>
+      <h2 className='text-center'>{ children }</h2>
       <hr />
     </FullWidthRow>
   );