Kamu UI 436 minor ux mouse less experience in login with password form (

#440)

CHANGELOG.md

@@ -8,7 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 ### Added
 - Added `Share query` button to the Data tab
-
+### Fixed
+- Added autofocus to the login field on the login page
 
 ## [0.26.4] - 2024-09-13
 ### Added

src/app/app.module.ts

@@ -73,6 +73,7 @@ import { AccountComponent } from "./account/account.component";
 import { DatasetsTabComponent } from "./account/additional-components/datasets-tab/datasets-tab.component";
 import { AccessTokensTabComponent } from "./auth/settings/tabs/access-tokens-tab/access-tokens-tab.component";
 import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { AutofocusDirective } from "./common/directives/autofocus.directive";
 
 const Services = [
     {
@@ -204,6 +205,7 @@ const MatModules = [
         AdminDashboardComponent,
         AccessTokensTabComponent,
         AccountFlowsTabComponent,
+        AutofocusDirective,
     ],
     imports: [
         AppRoutingModule,

src/app/auth/login/login.component.html

@@ -43,8 +43,8 @@ <h1 class="text-center text-muted mt-4">Login to Kamu</h1>
                 class="form-control d-inline"
                 id="login"
                 data-test-id="input-login"
-                required
-                (keyup)="resetPasswordLoginError()"
+                (keyup)="onChangeInputField($event)"
+                appAutofocus
                 [class.error-border-color]="passwordLoginError$ | async"
             />
             <div *ngIf="loginControl?.invalid && (loginControl?.touched || loginControl?.dirty)">
@@ -65,8 +65,7 @@ <h1 class="text-center text-muted mt-4">Login to Kamu</h1>
                 class="form-control d-inline"
                 id="password"
                 data-test-id="input-password"
-                required
-                (keyup)="resetPasswordLoginError()"
+                (keyup)="onChangeInputField($event)"
                 [class.error-border-color]="passwordLoginError$ | async"
             />
             <div *ngIf="passwordControl?.invalid && (passwordControl?.touched || passwordControl?.dirty)">

src/app/auth/login/login.component.ts

@@ -78,4 +78,10 @@ export class LoginComponent extends BaseComponent implements OnInit {
     public resetPasswordLoginError(): void {
         this.loginService.resetPasswordLoginError();
     }
+
+    public onChangeInputField(event: KeyboardEvent): void {
+        if (event.key !== "Enter") {
+            this.resetPasswordLoginError();
+        }
+    }
 }

src/app/common/directives/autofocus.directive.ts

@@ -0,0 +1,14 @@
+import { AfterViewInit, Directive, ElementRef, inject } from "@angular/core";
+
+@Directive({
+    selector: "[appAutofocus]",
+})
+export class AutofocusDirective implements AfterViewInit {
+    private elementRef = inject(ElementRef);
+
+    ngAfterViewInit(): void {
+        setTimeout(() => {
+            (this.elementRef.nativeElement as HTMLElement).focus();
+        });
+    }
+}