Clear register & login forms after submit

packages/client/src/login/LoginConnector.tsx

@@ -27,6 +27,7 @@ export class LoginConnector extends Connector {
       }),
       dispatch => ({
         onSubmit: bindActionCreators(this.loginActions.logIn, dispatch),
+        clearOnSuccess: true,
       }),
       withForm(LoginForm, defaultCredentials),
     )

packages/client/src/login/LoginForm.test.tsx

@@ -33,7 +33,8 @@ describe('LoginForm', () => {
         data,
       }, {id: 123})
 
-      node = t.render({onSuccess}).node
+      const r = t.render({onSuccess})
+      node = r.node
       T.Simulate.change(
         node.querySelector('input[name="username"]')!,
         {target: {value: 'user'}} as any,
@@ -44,7 +45,7 @@ describe('LoginForm', () => {
       )
     })
 
-    it('should submit a form', async () => {
+    it('should submit a form and clear it', async () => {
       T.Simulate.submit(node)
       const {req} = await http.wait()
       expect(req).toEqual({
@@ -53,6 +54,16 @@ describe('LoginForm', () => {
         data,
       })
       expect(onSuccess.mock.calls.length).toBe(1)
+      expect(
+        (node.querySelector('input[name="username"]') as HTMLInputElement)
+        .value,
+      )
+      .toEqual('')
+      expect(
+        (node.querySelector('input[name="password"]') as HTMLInputElement)
+        .value,
+      )
+      .toEqual('')
     })
 
     it('sets the error message on failure', async () => {

packages/client/src/login/RegisterConnector.tsx

@@ -26,6 +26,7 @@ export class RegisterConnector extends Connector {
       }),
       dispatch => ({
         onSubmit: bindActionCreators(this.loginActions.register, dispatch),
+        clearOnSuccess: true,
       }),
       withForm(RegisterForm, defaultCredentials),
     )

packages/client/src/login/withForm.tsx

@@ -13,6 +13,7 @@ export interface IFormHOCProps<Data> {
   // TODO figure out what would happen if the underlying child component
   // would have the same required property as the HOC, like onSuccess?
   onSuccess?: () => void
+  clearOnSuccess?: boolean
 }
 
 export function withForm<Data, Props extends IComponentProps<Data>>(
@@ -30,9 +31,12 @@ export function withForm<Data, Props extends IComponentProps<Data>>(
       this.state = initialState
     }
     handleSubmit = async (e: React.FormEvent) => {
-      const {onSuccess} = this.props
+      const {clearOnSuccess, onSuccess} = this.props
       e.preventDefault()
       await this.props.onSubmit(this.state)
+      if (clearOnSuccess) {
+        this.setState(initialState)
+      }
       if (onSuccess) {
         onSuccess()
       }