autofocus first field on login

2 files changed, 4 insertions, 1 deletions

diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 619150ade..267a2d857 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -13,7 +13,7 @@
         <label i18n for="username">User</label>
         <input
           type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
-          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
         >
         <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
           or create an account
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 7c0220885..4bae3ae5c 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -16,6 +16,7 @@ import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 })
 
 export class LoginComponent extends FormReactive implements OnInit {
+  @ViewChild('emailInput') input: ElementRef
   @ViewChild('forgotPasswordModal') forgotPasswordModal: ElementRef
   @ViewChild('forgotPasswordEmailInput') forgotPasswordEmailInput: ElementRef
 
@@ -47,6 +48,8 @@ export class LoginComponent extends FormReactive implements OnInit {
       username: this.loginValidatorsService.LOGIN_USERNAME,
       password: this.loginValidatorsService.LOGIN_PASSWORD
     })
+
+    this.input.nativeElement.focus()
   }
 
   login () {