Add login button to header

frontend/src/app/shared-components/login/login.component.html

@@ -3,10 +3,19 @@
   <form [formGroup]="loginForm">
     <mat-form-field appearance="fill" style="width: 100%">
       <mat-label>Enter your code</mat-label>
-      <input matInput formControlName="code" type="text">
-      <mat-error *ngIf="formHasError()">
+      <input matInput formControlName="code" type="text" (keydown)="onKeyDown($event)">
+      <mat-error *ngIf="loginForm.get('code')?.errors?.['required']">
         Code is required
       </mat-error>
+      <mat-error *ngIf="loginForm.get('code')?.errors?.['minlength']">
+        Code must be 8 characters
+      </mat-error>
+      <mat-error *ngIf="loginForm.get('code')?.errors?.['maxlength']">
+        Code cannot exceed 8 characters
+      </mat-error>
+      <mat-error *ngIf="loginForm.get('code')?.errors?.['pattern']">
+        Code contains invalid characters
+      </mat-error>
     </mat-form-field>
   </form>
 </div>

frontend/src/app/shared-components/login/login.component.ts

@@ -65,7 +65,23 @@ export class LoginDialogComponent {
     });
   }
 
-  public formHasError() {
-    return this.loginForm.get('code')?.hasError('required');
+  onKeyDown(event: KeyboardEvent): void {
+    if (event.key.length === 1 && event.key >= 'a' && event.key <= 'z') {
+      event.preventDefault();
+      const input = event.target as HTMLInputElement;
+      const start = input.selectionStart || 0;
+      const end = input.selectionEnd || 0;
+
+      const value = this.loginForm.get('code')?.value || '';
+      const newValue =
+        value.substring(0, start) +
+        event.key.toUpperCase() +
+        value.substring(end);
+
+      this.loginForm.get('code')?.setValue(newValue);
+      setTimeout(() => {
+        input.setSelectionRange(start + 1, start + 1);
+      });
+    }
   }
 }