Streamline signin page

1. The username field is now autofocused.
2. Pressing enter in an input will submit the signin form.

Long term, we should switch the reusable UI `Form` element to use an
actual HTML `form` element, rather than a `div`. That way we get these
sorts of interactions for free.

Closes #1354
Closes #1355

ui/src/onboarding/containers/SigninPage.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {PureComponent, ChangeEvent} from 'react'
+import React, {PureComponent, ChangeEvent, KeyboardEvent} from 'react'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 
@@ -68,6 +68,8 @@ class SigninPage extends PureComponent<Props, State> {
                 value={username}
                 onChange={this.handleUsername}
                 size={ComponentSize.Medium}
+                onKeyPress={this.handleKeyPress}
+                autoFocus={true}
               />
             </Form.Element>
             <Form.Element
@@ -78,6 +80,7 @@ class SigninPage extends PureComponent<Props, State> {
               <Input
                 value={password}
                 onChange={this.handlePassword}
+                onKeyPress={this.handleKeyPress}
                 size={ComponentSize.Medium}
                 type={InputType.Password}
               />
@@ -105,6 +108,12 @@ class SigninPage extends PureComponent<Props, State> {
     this.setState({password})
   }
 
+  private handleKeyPress = (e: KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === 'Enter') {
+      this.handleSignIn()
+    }
+  }
+
   private handleSignIn = async (): Promise<void> => {
     const {links, notify, onSignInUser} = this.props
     const {username, password} = this.state