style : error message for login

btc-ui-app-2/src/app/login/login.css

@@ -112,3 +112,12 @@ body {
   padding: 0 20px;
   font-size: 14px;
 }
+.error-message {
+  color: red;
+  font-size: 12px;
+  margin-bottom: 5px;
+}
+
+.input-box.ng-invalid.ng-touched {
+  border-color: red;
+}

btc-ui-app-2/src/app/login/login.html

@@ -5,15 +5,29 @@
 
 <!-- Main Login Container -->
 <div class="login-container">
+
   <!-- Left Image -->
   <div class="login-left">
-    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXNtvgCYhMqpZef92nycXTb2pKqA2MoGLOAw&s" alt="Horse Racing" class="bg-image" />
+    <img
+      src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXNtvgCYhMqpZef92nycXTb2pKqA2MoGLOAw&s"
+      alt="Horse Racing"
+      class="bg-image"
+    />
   </div>
 
   <!-- Right Panel -->
   <div class="login-right">
     <div class="logo">BTC <span>BANGALORE TURF CLUB LTD</span></div>
 
+    <!-- Email Error Message -->
+    <div
+      class="error-message"
+      *ngIf="loginForm.get('email')?.touched && loginForm.get('email')?.invalid"
+    >
+      <small *ngIf="loginForm.get('email')?.errors?.['required']">Email is required.</small>
+      <small *ngIf="loginForm.get('email')?.errors?.['email']">Invalid email format.</small>
+    </div>
+    <!-- Email Input -->
     <input
       type="text"
       placeholder="Enter Your Username"
@@ -23,6 +37,14 @@
       #emailInput
     />
 
+    <!-- Password Error Message -->
+    <div
+      class="error-message"
+      *ngIf="loginForm.get('password')?.touched && loginForm.get('password')?.invalid"
+    >
+      <small *ngIf="loginForm.get('password')?.errors?.['required']">Password is required.</small>
+    </div>
+    <!-- Password Input -->
     <input
       type="password"
       placeholder="Enter Your Password"
@@ -32,7 +54,7 @@
       #passwordInput
     />
 
-
+    <!-- Login Button -->
     <button class="login-btn" (click)="onSubmit()">LOGIN</button>
 
     <!-- Numeric Keypad -->

btc-ui-app-2/src/app/login/login.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { Router } from '@angular/router'; // <-- Router imported for navigation
 
 @Component({
   selector: 'app-login',
@@ -18,7 +19,8 @@ export class LoginComponent {
 
   constructor(
     private fb: FormBuilder,
-    private cdRef: ChangeDetectorRef
+    private cdRef: ChangeDetectorRef,
+    private router: Router // <-- injected Router for navigation
   ) {
     this.loginForm = this.fb.group({
       email: ['', [Validators.required, Validators.email]],
@@ -37,21 +39,17 @@ export class LoginComponent {
     const current = control?.value || '';
     const newValue = current + value;
 
-    // Update form control
     control?.setValue(newValue);
 
-    // Update input element directly
     const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
     inputRef.nativeElement.value = newValue;
 
-    // Focus and move cursor to the end
     setTimeout(() => {
       const el = inputRef.nativeElement;
       el.focus();
       el.setSelectionRange(newValue.length, newValue.length);
     }, 0);
 
-    // Trigger change detection
     this.cdRef.detectChanges();
   }
 
@@ -62,25 +60,29 @@ export class LoginComponent {
     const current = control?.value || '';
     const newValue = current.slice(0, -1);
 
-    // Update form control
     control?.setValue(newValue);
 
-    // Update input element directly
     const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
     inputRef.nativeElement.value = newValue;
 
-    // Focus and move cursor to the end
     setTimeout(() => {
       const el = inputRef.nativeElement;
       el.focus();
       el.setSelectionRange(newValue.length, newValue.length);
     }, 0);
 
-    // Trigger change detection
     this.cdRef.detectChanges();
   }
 
   onSubmit(): void {
-    console.log(this.loginForm.value);
+    if (this.loginForm.invalid) {
+      this.loginForm.markAllAsTouched(); // Show all validation errors
+      return;
+    }
+
+    console.log('Login successful:', this.loginForm.value);
+
+    // Navigate to landing page
+    this.router.navigate(['/landing']);
   }
 }