add input focus on email auth form popup

frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.tsx

@@ -6,6 +6,7 @@ import { sendEmailVerificationRequest } from '@app/common/api';
 import { extractErrorMessageFromResponse } from '@app/utils/errorUtils';
 import { connect } from 'preact-redux';
 import { getHandleClickProps } from '@app/common/accessibility';
+import { sleep } from '@app/utils/sleep';
 
 const mapStateToProps = () => ({
   sendEmailVerification: sendEmailVerificationRequest,
@@ -46,6 +47,7 @@ export class EmailLoginForm extends Component<Props, State> {
       error: null,
     };
 
+    this.focus = this.focus.bind(this);
     this.onVerificationSubmit = this.onVerificationSubmit.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
     this.onUsernameChange = this.onUsernameChange.bind(this);
@@ -54,6 +56,15 @@ export class EmailLoginForm extends Component<Props, State> {
     this.goBack = this.goBack.bind(this);
   }
 
+  async focus() {
+    await sleep(100);
+    if (this.inputRef) {
+      this.inputRef.focus();
+      return;
+    }
+    this.tokenRef && this.tokenRef.select();
+  }
+
   async onVerificationSubmit(e: Event) {
     e.preventDefault();
     this.setState({ loading: true });
@@ -212,4 +223,9 @@ export class EmailLoginForm extends Component<Props, State> {
   }
 }
 
-export const EmailLoginFormConnected = connect(mapStateToProps)(EmailLoginForm);
+export const EmailLoginFormConnected = connect(
+  mapStateToProps,
+  null,
+  null,
+  { withRef: true }
+)(EmailLoginForm);

frontend/app/components/auth-panel/auth-panel.tsx

@@ -11,7 +11,7 @@ import Dropdown, { DropdownItem } from '@app/components/dropdown';
 import { Button } from '@app/components/button';
 import { UserID } from './__user-id';
 import { AnonymousLoginForm } from './__anonymous-login-form';
-import { EmailLoginFormConnected as EmailLoginForm } from './__email-login-form';
+import { EmailLoginForm, EmailLoginFormConnected } from './__email-login-form';
 import { StoreState } from '@app/store';
 
 export interface Props {
@@ -38,6 +38,8 @@ interface State {
 }
 
 export class AuthPanel extends Component<Props, State> {
+  emailLoginRef?: EmailLoginForm;
+
   constructor(props: Props) {
     super(props);
 
@@ -54,6 +56,11 @@ export class AuthPanel extends Component<Props, State> {
     this.handleAnonymousLoginFormSubmut = this.handleAnonymousLoginFormSubmut.bind(this);
     this.handleOAuthLogin = this.handleOAuthLogin.bind(this);
     this.toggleUserInfoVisibility = this.toggleUserInfoVisibility.bind(this);
+    this.onEmailTitleClick = this.onEmailTitleClick.bind(this);
+  }
+
+  onEmailTitleClick() {
+    this.emailLoginRef && this.emailLoginRef.focus();
   }
 
   onSortChange(e: Event) {
@@ -187,9 +194,11 @@ export class AuthPanel extends Component<Props, State> {
                       title={PROVIDER_NAMES[provider]}
                       titleClass="auth-panel__pseudo-link"
                       theme={this.props.theme}
+                      onTitleClick={this.onEmailTitleClick}
                     >
                       <DropdownItem>
-                        <EmailLoginForm
+                        <EmailLoginFormConnected
+                          ref={ref => (this.emailLoginRef = ref.getWrappedInstance())}
                           onSignIn={this.onEmailSignIn}
                           theme={this.props.theme}
                           className="auth-panel__email-login-form"