Improve profile editor

app/gabsocial/features/forms/index.js

@@ -48,6 +48,7 @@ export class Checkbox extends ImmutablePureComponent {
 
   static propTypes = {
     label: PropTypes.string,
+    name: PropTypes.string,
     checked: PropTypes.bool,
     onChange: PropTypes.func,
   }
@@ -57,7 +58,7 @@ export class Checkbox extends ImmutablePureComponent {
   }
 
   render() {
-    const { label, checked, onChange } = this.props;
+    const { label, name, checked, onChange } = this.props;
     const id = uuidv4();
 
     return (
@@ -70,6 +71,7 @@ export class Checkbox extends ImmutablePureComponent {
             <label className='checkbox'>
               <input
                 id={id}
+                name={name}
                 className='boolean optional'
                 type='checkbox'
                 checked={checked}
@@ -189,27 +191,25 @@ export class TextInput extends ImmutablePureComponent {
 
   static propTypes = {
     label: PropTypes.string,
-    name: PropTypes.string,
-    defaultValue: PropTypes.string,
     maxLength: PropTypes.number,
   }
 
   render() {
-    const { label, name, defaultValue, maxLength } = this.props;
+    const { label, maxLength, ...props } = this.props;
+    const id = uuidv4();
 
     return (
       <div className='input with_label string optional'>
         <div className='label_input'>
-          <label className='string optional' htmlFor={name}>{label}</label>
+          <label className='string optional' htmlFor={id}>{label}</label>
           <div className='label_input__wrapper'>
             <input
               maxlength={maxLength}
               className='string optional'
               size={maxLength}
               type='text'
-              defaultValue={defaultValue}
-              name={name}
-              id={name}
+              id={id}
+              {...props}
             />
           </div>
         </div>