InputField refactor

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

@@ -7,6 +7,7 @@ import ChangeUsernameDialog from './ChangeUsernameDialog';
 import validate from 'coral-framework/helpers/validate';
 import errorMsj from 'coral-framework/helpers/error';
 import { t } from 'plugin-api/beta/client/services';
+import InputField from './InputField';
 
 const initialState = {
   editing: false,
@@ -139,34 +140,27 @@ class ChangeUsername extends React.Component {
         {editing ? (
           <div className={styles.content}>
             <ul className={styles.detailList}>
-              <li className={styles.detailItem}>
-                <label className={cn(styles.detailLabel)}>
-                  <Icon name="person" className={styles.detailLabelIcon} />
-                  <input
-                    name="newUsername"
-                    type="text"
-                    data-validation-type="username"
-                    className={styles.detailValue}
-                    onChange={this.onChange}
-                    defaultValue={username}
-                  />
-                </label>
+              <InputField
+                icon="person"
+                id="newUsername"
+                name="newUsername"
+                onChange={this.onChange}
+                defaultValue={username}
+                columnDisplay
+                validationType="username"
+              >
                 <span className={styles.bottomText}>
                   Usernames can be changed every 14 days
                 </span>
-              </li>
-              <li className={styles.detailItem}>
-                <label className={cn(styles.detailLabel, styles.disabled)}>
-                  <Icon name="email" className={styles.detailLabelIcon} />
-                  <input
-                    name="email"
-                    type="email"
-                    className={styles.detailValue}
-                    defaultValue={emailAddress}
-                    disabled={true}
-                  />
-                </label>
-              </li>
+              </InputField>
+              <InputField
+                icon="email"
+                id="email"
+                name="email"
+                value={emailAddress}
+                validationType="username"
+                disabled
+              />
             </ul>
           </div>
         ) : (

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

@@ -7,18 +7,18 @@ import { Button, Dialog } from 'plugin-api/beta/client/components/ui';
 
 class ChangeUsernameDialog extends React.Component {
   state = {
-    showErrors: false,
+    showError: false,
   };
 
-  showErrors = () => {
+  showError = () => {
     this.setState({
-      showErrors: true,
+      showError: true,
     });
   };
 
   confirmChanges = async () => {
     if (this.formHasError()) {
-      this.showErrors();
+      this.showError();
     } else {
       // await this.props.saveChanges
       this.props.closeDialog();
@@ -59,9 +59,9 @@ class ChangeUsernameDialog extends React.Component {
               type="text"
               onChange={this.props.onChange}
               value={this.props.formData.confirmNewUsername}
-              hasError={this.formHasError() && this.state.showErrors}
+              hasError={this.formHasError() && this.state.showError}
               errorMsg={'Username does not match'}
-              showErrors={this.state.showErrors}
+              showError={this.state.showError}
               columnDisplay
               showSuccess={false}
               validationType="username"

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

@@ -16,7 +16,24 @@
 }
 
 .detailItemContent {
-  min-width: 280px;
+  border: solid 1px #787D80;
+  border-radius: 2px;
+  background-color: white;
+  height: 30px;
+  display: inline-block;
+  width: 230px;
+  display: flex;  
+
+  > .detailIcon {
+    font-size: 1.2em;
+    padding: 0 5px;
+    color: #787D80;
+    line-height: 30px; 
+  }
+
+  &.disabled {
+    background-color: #E0E0E0;
+  }
 }
 
 .detailLabel {
@@ -27,19 +44,13 @@
 }
 
 .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%;
-
-  &.error {
-    border-color: #FA4643;
-  }
+  background: transparent;
+  border: none;
+  font-size: 1em;
+  color: #000;
+  height: 30px;
+  outline: none;
+  flex: 1;
 }
 
 .detailItemMessage {

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

@@ -11,35 +11,53 @@ const InputField = ({
   type = 'text',
   name = '',
   onChange = () => {},
-  value = '',
   showError = true,
   hasError = false,
   errorMsg = '',
   children,
   columnDisplay = false,
-  showSuccess = true,
+  showSuccess = false,
   validationType = '',
+  icon = '',
+  value = '',
+  defaultValue = '',
+  disabled = false,
 }) => {
+  const inputValue = {
+    ...(value ? { value } : {}),
+    ...(defaultValue ? { defaultValue } : {}),
+  };
+
   return (
-    <li className={styles.detailItem}>
+    <div className={styles.detailItem}>
       <div
         className={cn(styles.detailItemContainer, {
           [styles.columnDisplay]: columnDisplay,
         })}
       >
-        <div className={styles.detailItemContent}>
+        {label && (
           <label className={styles.detailLabel} id={id}>
             {label}
           </label>
+        )}
+        <div
+          className={cn(
+            styles.detailItemContent,
+            { [styles.error]: hasError },
+            { [styles.disabled]: disabled }
+          )}
+        >
+          {icon && <Icon name={icon} className={styles.detailIcon} />}
           <input
             id={id}
             type={type}
             name={name}
-            className={cn(styles.detailValue, { [styles.error]: hasError })}
+            className={styles.detailValue}
             onChange={onChange}
-            value={value}
             autoComplete="off"
             data-validation-type={validationType}
+            disabled={disabled}
+            {...inputValue}
           />
         </div>
         <div className={styles.detailItemMessage}>
@@ -50,17 +68,20 @@ const InputField = ({
         </div>
       </div>
       {children}
-    </li>
+    </div>
   );
 };
 
 InputField.propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  disabled: PropTypes.boolean,
+  label: PropTypes.string,
+  type: PropTypes.string,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   value: PropTypes.string,
+  defaultValue: PropTypes.string,
+  icon: PropTypes.string,
   showError: PropTypes.bool,
   hasError: PropTypes.bool,
   errorMsg: PropTypes.string,