Svi modali/dijalozi: omogucen submit preko entera. Sredjen izgled modala.

2 files changed, 13 insertions, 4 deletions

diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html
index cea6bf39..79e11db8 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.html
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.html
@@ -6,12 +6,12 @@
               <mat-icon>close</mat-icon>
             </button>
             <h1 class="login-heading mt-5 mb-5">Prijava</h1>
-            <form>
+            <form (keydown)="doLoginWithEnterKey($event)">
                 <!-- Korisnicko ime -->
                 <div class="mb-3">
                     <mat-form-field appearance="fill">
                         <mat-label>Korisničko ime</mat-label>
-                        <input type="text" matInput [(ngModel)]="username" name="username" id="username">
+                        <input type="text" matInput [(ngModel)]="username" name="username" id="username" #usernameInput autofocus="true">
                         <mat-icon matSuffix></mat-icon>
                     </mat-form-field>
                 </div>
diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts
index ccd78509..33c17c31 100644
--- a/frontend/src/app/_modals/login-modal/login-modal.component.ts
+++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts
@@ -5,15 +5,17 @@ import { AuthService } from 'src/app/_services/auth.service';
 import { UserInfoService } from 'src/app/_services/user-info.service';
 import shared from '../../Shared';
 import {AfterViewInit, ElementRef} from '@angular/core';
+import { MatSelect } from '@angular/material/select';
 
 @Component({
   selector: 'app-login-modal',
   templateUrl: './login-modal.component.html',
   styleUrls: ['./login-modal.component.css']
 })
-export class LoginModalComponent implements OnInit {
+export class LoginModalComponent implements AfterViewInit {
 
   @ViewChild('closeButton') closeButton?: ElementRef;
+  @ViewChild('usernameInput') usernameInput!: ElementRef;
   @ViewChild('pass') passwordInput!: ElementRef;
 
   username: string = '';
@@ -30,7 +32,14 @@ export class LoginModalComponent implements OnInit {
     private userInfoService: UserInfoService
   ) { }
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
+    //console.log(this.usernameInput);
+    this.usernameInput.nativeElement.focus();
+  }
+
+  doLoginWithEnterKey(keyboardEvent: KeyboardEvent) {
+    if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") 
+      this.doLogin();
   }
 
   doLogin() {