karthik/horse-betting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : error message for login

Browse Source
This commit is contained in:
karthik 2025-06-20 11:24:08 +05:30
parent 6621298e81
commit 47bfdbe7a0
4 changed files with 61 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
btc-ui-app-2/.angular/cache/20.0.3/btc-ui-app/.tsbuildinfo vendored
View File

File diff suppressed because one or more lines are too long

9
btc-ui-app-2/src/app/login/login.css
View File

@ -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;
}

26
btc-ui-app-2/src/app/login/login.html
View File

@ -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 -->

22
btc-ui-app-2/src/app/login/login.ts
View File

@ -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']);
}
}