refactor(profile): refactor profile form

packages/components-faraday/src/components/UserProfile/AccountDetails.js

 import React from 'react'
 import styled from 'styled-components'
-import { reduxForm } from 'redux-form'
 import { withJournal } from 'xpub-journal'
-import { compose, withProps, withHandlers, withState } from 'recompose'
-import { onSubmitUser as onSubmit } from '../utils'
+import { compose, withHandlers, withState } from 'recompose'
 
 import AccountDetailsCard from './AccountDetailsCard'
 import AccountDetailsEdit from './AccountDetailsEdit'
 
-const AccountDetails = ({
-  user,
-  isEdit,
-  setEditMode,
-  journal,
-  handleSubmit,
-}) => (
+const AccountDetails = ({ user, isEdit, setEditMode, journal }) => (
   <Root>
     {isEdit ? (
-      <form onSubmit={handleSubmit}>
-        <AccountDetailsEdit
-          journal={journal}
-          setEditMode={setEditMode}
-          user={user}
-        />
-      </form>
+      <AccountDetailsEdit
+        journal={journal}
+        setEditMode={setEditMode}
+        user={user}
+      />
     ) : (
       <AccountDetailsCard
         journal={journal}
@@ -40,11 +30,6 @@ export default compose(
   withHandlers({
     setEditMode: ({ setEdit }) => value => setEdit(value),
   }),
-  withProps(({ user }) => ({ initialValues: user })),
-  reduxForm({
-    form: 'userManagement',
-    onSubmit,
-  }),
 )(AccountDetails)
 
 // #region styles

packages/components-faraday/src/components/UserProfile/AccountDetailsEdit.js

 import React from 'react'
 import styled from 'styled-components'
 import { Button, th } from '@pubsweet/ui'
+import { reduxForm } from 'redux-form'
+import { compose, withProps } from 'recompose'
+import { onSubmitUser as onSubmit } from '../utils'
 
 import EditUserForm from '../Admin/EditUserForm'
 
-const AccountDetailsEdit = ({ journal, user, setEditMode }) => (
-  <Root>
+const AccountDetailsEdit = ({ journal, user, setEditMode, handleSubmit }) => (
+  <Root onSubmit={handleSubmit}>
     <EditUserForm journal={journal} title="Edit account details" user={user} />
     <Row>
       <Button onClick={() => setEditMode(false)}>Cancel</Button>
@@ -16,10 +19,16 @@ const AccountDetailsEdit = ({ journal, user, setEditMode }) => (
   </Root>
 )
 
-export default AccountDetailsEdit
+export default compose(
+  withProps(({ user }) => ({ initialValues: user })),
+  reduxForm({
+    form: 'userManagement',
+    onSubmit,
+  }),
+)(AccountDetailsEdit)
 
 // #region styles
-const Root = styled.div`
+const Root = styled.form`
   background-color: ${th('colorBackground')};
   padding: ${th('gridUnit')};
   border: ${th('borderDefault')};