final refactor, done.

plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.css

@@ -13,22 +13,6 @@
   }
 }
 
-.detailItemContent {
-  min-width: 280px;
-}
-
-.detailItemMessage {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  padding-left: 2px;
-  padding-top: 16px;
-
-  .warningIcon, .checkIcon {
-    font-size: 17px;
-  }
-}
-
 .actions {
   position: absolute;
   top: 10px;
@@ -42,39 +26,6 @@
   color: #202020;
   margin: 0 0 20px;
 }
-  
-.detailList {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.detailLabel {
-  color: #4C4C4D;
-  font-size: 1em;
-  display: block;
-  margin-bottom: 4px;
-}
-
-.detailValue {
-  padding: 6px 2px;
-  border: solid 1px #979797;
-  display: block;
-  font-size: 1.1em;
-  border-radius: 2px;
-  background-color: #ffffff;
-  color: #979797;
-  box-sizing: border-box;
-  width: 100%;
-}
-  
-.detailItem {
-  margin-bottom: 12px;
-}
-
-.detailItemContainer {
-  display: flex;
-}
 
 .detailBottomBox {
   display: block;
@@ -92,20 +43,6 @@
   }
 }
 
-.checkIcon {
-  color: #00CD73;
-}
-
-.warningIcon {
-  color: #FA4643;
-}
-
-.errorMsg {
-  color: #FA4643;
-  padding-left: 4px;
-  font-size: 0.9em;
-}
-
 .button {
   border: 1px solid #787d80;
   background-color: transparent;
@@ -127,6 +64,16 @@
     background-color: #399ee2;
     color: white;
   }
+
+  &:disabled {
+    border-color: #e0e0e0;
+
+    &:hover {
+      background-color: #e0e0e0;
+      color: #4f5c67;
+      cursor: default;
+    }
+  }
 }
 
 .cancelButton {

plugins/talk-plugin-auth/client/profile-settings/components/ChangePassword.js

@@ -2,11 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './ChangePassword.css';
-import { Button, Icon } from 'plugin-api/beta/client/components/ui';
+import { Button } from 'plugin-api/beta/client/components/ui';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
 import isEqual from 'lodash/isEqual';
 import { t } from 'plugin-api/beta/client/services';
+import Form from './Form';
+import InputField from './InputField';
 
 const initialState = {
   editing: false,
@@ -97,9 +99,9 @@ class ChangePassword extends React.Component {
     return formHasErrors || formIncomplete;
   };
 
-  clearForm() {
+  clearForm = () => {
     this.setState(initialState);
-  }
+  };
 
   onSave = async () => {
     const { oldPassword, newPassword } = this.state.formData;
@@ -119,10 +121,10 @@ class ChangePassword extends React.Component {
     });
   };
 
-  cancel() {
+  cancel = () => {
     this.clearForm();
     this.disableEditing();
-  }
+  };
 
   render() {
     const { editing, errors } = this.state;
@@ -137,7 +139,7 @@ class ChangePassword extends React.Component {
           {t('talk-plugin-auth.change_password.change_password')}
         </h3>
         {editing && (
-          <ul className={styles.detailList}>
+          <Form className="talk-plugin-auth--change-password-form">
             <InputField
               id="oldPassword"
               label="Old Password"
@@ -177,7 +179,7 @@ class ChangePassword extends React.Component {
               errorMsg={errors['confirmNewPassword']}
               showErrors
             />
-          </ul>
+          </Form>
         )}
         {editing ? (
           <div className={styles.actions}>
@@ -209,67 +211,4 @@ ChangePassword.propTypes = {
   changePassword: PropTypes.func,
 };
 
-const InputField = ({
-  id = '',
-  label = '',
-  type = 'text',
-  name = '',
-  onChange = () => {},
-  value = '',
-  showError = true,
-  hasError = false,
-  errorMsg = '',
-  children,
-}) => {
-  return (
-    <li className={styles.detailItem}>
-      <div className={styles.detailItemContainer}>
-        <div className={styles.detailItemContent}>
-          <label className={styles.detailLabel} id={id}>
-            {label}
-          </label>
-          <input
-            id={id}
-            type={type}
-            name={name}
-            className={styles.detailValue}
-            onChange={onChange}
-            value={value}
-          />
-        </div>
-        <div className={styles.detailItemMessage}>
-          {!hasError &&
-            value && <Icon className={styles.checkIcon} name="check_circle" />}
-          {hasError && showError && <ErrorMessage>{errorMsg}</ErrorMessage>}
-        </div>
-      </div>
-      {children}
-    </li>
-  );
-};
-
-InputField.propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-  showError: PropTypes.bool,
-  hasError: PropTypes.bool,
-  errorMsg: PropTypes.string,
-  children: PropTypes.node,
-};
-
-const ErrorMessage = ({ children }) => (
-  <div className={styles.errorMsg}>
-    <Icon className={styles.warningIcon} name="warning" />
-    <span>{children}</span>
-  </div>
-);
-
-ErrorMessage.propTypes = {
-  children: PropTypes.node,
-};
-
 export default ChangePassword;

plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.css

@@ -0,0 +1,9 @@
+.errorMsg {
+  color: #FA4643;
+  padding-left: 4px;
+  font-size: 0.9em;
+}
+
+.warningIcon {
+  color: #FA4643;
+}

plugins/talk-plugin-auth/client/profile-settings/components/ErrorMessage.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './ErrorMessage.css';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+
+const ErrorMessage = ({ children }) => (
+  <div className={styles.errorMsg}>
+    <Icon className={styles.warningIcon} name="warning" />
+    <span>{children}</span>
+  </div>
+);
+
+ErrorMessage.propTypes = {
+  children: PropTypes.node,
+};
+
+export default ErrorMessage;

plugins/talk-plugin-auth/client/profile-settings/components/Form.css

@@ -0,0 +1,5 @@
+.detailList {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}

plugins/talk-plugin-auth/client/profile-settings/components/Form.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './Form.css';
+import PropTypes from 'prop-types';
+
+const Form = ({ children, className = '' }) => (
+  <form className={className}>
+    <ul className={styles.detailList}>{children}</ul>
+  </form>
+);
+
+Form.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default Form;

plugins/talk-plugin-auth/client/profile-settings/components/InputField.css

@@ -0,0 +1,51 @@
+  
+.detailItem {
+  margin-bottom: 12px;
+}
+
+.detailItemContainer {
+  display: flex;
+}
+
+.detailItemContent {
+  min-width: 280px;
+}
+
+.detailLabel {
+  color: #4C4C4D;
+  font-size: 1em;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.detailValue {
+  padding: 6px 2px;
+  border: solid 1px #979797;
+  display: block;
+  font-size: 1.1em;
+  border-radius: 2px;
+  background-color: #ffffff;
+  color: #979797;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.detailItemMessage {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  padding-left: 2px;
+  padding-top: 16px;
+
+  .warningIcon, .checkIcon {
+    font-size: 17px;
+  }
+}
+
+.checkIcon {
+  color: #00CD73;
+}
+
+.warningIcon {
+  color: #FA4643;
+}

plugins/talk-plugin-auth/client/profile-settings/components/InputField.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './InputField.css';
+import ErrorMessage from './ErrorMessage';
+import { Icon } from 'plugin-api/beta/client/components/ui';
+
+const InputField = ({
+  id = '',
+  label = '',
+  type = 'text',
+  name = '',
+  onChange = () => {},
+  value = '',
+  showError = true,
+  hasError = false,
+  errorMsg = '',
+  children,
+}) => {
+  return (
+    <li className={styles.detailItem}>
+      <div className={styles.detailItemContainer}>
+        <div className={styles.detailItemContent}>
+          <label className={styles.detailLabel} id={id}>
+            {label}
+          </label>
+          <input
+            id={id}
+            type={type}
+            name={name}
+            className={styles.detailValue}
+            onChange={onChange}
+            value={value}
+            autoComplete="off"
+          />
+        </div>
+        <div className={styles.detailItemMessage}>
+          {!hasError &&
+            value && <Icon className={styles.checkIcon} name="check_circle" />}
+          {hasError && showError && <ErrorMessage>{errorMsg}</ErrorMessage>}
+        </div>
+      </div>
+      {children}
+    </li>
+  );
+};
+
+InputField.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  showError: PropTypes.bool,
+  hasError: PropTypes.bool,
+  errorMsg: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export default InputField;