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

style : added 12 & 6 to user and pass (login)

Browse Source
This commit is contained in:
MathewFrancis 2025-06-20 12:36:20 +05:30
parent 47bfdbe7a0
commit 273a28e450
7 changed files with 136 additions and 99 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

6
btc-ui-app-2/.angular/cache/20.0.3/btc-ui-app/vite/com.chrome.devtools.json vendored Normal file
View File

@ -0,0 +1,6 @@
{
"workspace": {
"root": "/home/btc/Desktop/horse-betting/btc-ui-app-2",
"uuid": "bb38f57c-38d4-4829-b806-7831b7eb4ed8"
}
}

18
btc-ui-app-2/.angular/cache/20.0.3/btc-ui-app/vite/deps/_metadata.json vendored
View File

@ -1,37 +1,37 @@
{
"hash": "70b30680",
"configHash": "47a48695",
"lockfileHash": "f769d007",
"browserHash": "f8601d4d",
"hash": "fdc6de62",
"configHash": "d9529696",
"lockfileHash": "96525434",
"browserHash": "65ecf150",
"optimized": {
"@angular/common": {
"src": "../../../../../../node_modules/@angular/common/fesm2022/common.mjs",
"file": "@angular_common.js",
"fileHash": "3bbc72ca",
"fileHash": "e49436cc",
"needsInterop": false
},
"@angular/core": {
"src": "../../../../../../node_modules/@angular/core/fesm2022/core.mjs",
"file": "@angular_core.js",
"fileHash": "7407ecdc",
"fileHash": "3148f944",
"needsInterop": false
},
"@angular/forms": {
"src": "../../../../../../node_modules/@angular/forms/fesm2022/forms.mjs",
"file": "@angular_forms.js",
"fileHash": "83e9ef2e",
"fileHash": "d850cf1d",
"needsInterop": false
},
"@angular/platform-browser": {
"src": "../../../../../../node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs",
"file": "@angular_platform-browser.js",
"fileHash": "cccee80f",
"fileHash": "047f5f91",
"needsInterop": false
},
"@angular/router": {
"src": "../../../../../../node_modules/@angular/router/fesm2022/router.mjs",
"file": "@angular_router.js",
"fileHash": "1bb4eb87",
"fileHash": "3d06ffd0",
"needsInterop": false
}
},

8
btc-ui-app-2/.angular/cache/20.0.3/btc-ui-app/vite/deps_ssr/_metadata.json vendored
View File

@ -1,8 +1,8 @@
{
"hash": "e6220c80",
"configHash": "fd041640",
"lockfileHash": "f769d007",
"browserHash": "80fc46d8",
"hash": "03bc282b",
"configHash": "064eeeed",
"lockfileHash": "96525434",
"browserHash": "9a6604ec",
"optimized": {},
"chunks": {}
}

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

@ -15,15 +15,30 @@ body {
padding: 0 20px;
font-size: 14px;
}
/* Main container */
.login-container {
/* Bottom bar */
.bottom-bar {
height: 40px;
background-color: orange;
color: white;
display: flex;
height: calc(100vh - 80px); /* minus top & bottom bar */
justify-content: flex;
align-items: center;
padding: 0 20px;
font-size: 14px;
}
/* Left image */
/* Container */
.login-container {
display: flex;
/* flex-wrap: wrap; */
height: calc(100vh - 80px);
}
/* Left panel */
.login-left {
flex: 2;
min-width: 300px;
}
.bg-image {
@ -32,9 +47,10 @@ body {
object-fit: cover;
}
/* Right side */
/* Right panel */
.login-right {
flex: 1;
min-width: 300px;
padding: 40px;
background-color: #f4f4f4;
display: flex;
@ -58,25 +74,40 @@ body {
}
.input-box {
width: 80%;
width: 75%;
padding: 10px;
margin-bottom: 20px;
margin-bottom: 15px;
font-size: 16px;
border: 1px solid #ccc;
text-align: center;
}
.input-box.ng-invalid.ng-touched {
border-color: red;
}
/* Error */
.error-message {
color: red;
font-size: 20px;
margin-bottom: 3px;
width: 80%;
text-align: center;
}
/* Button */
.login-btn {
width: 80%;
padding: 12px;
background-color: orange;
border: none;
color: white;
font-size: 16px;
font-size: 16px;
margin-bottom: 20px;
cursor: pointer;
}
/* Keypad styling */
/* Keypad */
.numpad {
width: 80%;
}
@ -88,7 +119,7 @@ body {
}
.row button {
flex: 1;
flex: 1 1 30%;
margin: 0 5px;
padding: 10px;
font-size: 16px;
@ -101,23 +132,16 @@ body {
background-color: #f9d3b4;
}
/* Bottom bar */
.bottom-bar {
height: 40px;
background-color: orange;
color: white;
display: flex;
justify-content: flex;
align-items: center;
padding: 0 20px;
font-size: 14px;
}
.error-message {
color: red;
font-size: 12px;
margin-bottom: 5px;
/* Responsive */
@media (max-width: 768px) {
.login-left{
display: none;
}
}
.input-box.ng-invalid.ng-touched {
border-color: red;
.form-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

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

@ -1,11 +1,10 @@
<!-- Top Bar -->
<div class="top-bar">
<span>TOTE BETTING CONSOLE v7.9.1</span>
<span>BANGALORE TURF CLUB LTD</span>
</div>
<!-- Main Login Container -->
<div class="login-container">
<!-- Left Image -->
<div class="login-left">
<img
@ -17,47 +16,44 @@
<!-- 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 class="logo">
<strong>BTC</strong>
<span>BANGALORE TURF CLUB LTD</span>
</div>
<!-- Email Input -->
<input
type="text"
placeholder="Enter Your Username"
class="input-box"
formControlName="email"
(focus)="setFocus('email')"
#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 class="form-wrapper" [formGroup]="loginForm">
<!-- Username Errors -->
<div class="error-message" *ngIf="loginForm.get('email')?.touched && loginForm.get('email')?.invalid">
<small *ngIf="loginForm.get('email')?.errors?.['required']">Username is required.</small>
<small *ngIf="loginForm.get('email')?.errors?.['pattern']">Must be exactly 12 digits.</small>
</div>
<input
type="text"
placeholder="Enter Your Username"
class="input-box"
(focus)="setFocus('email')"
#emailInput
[value]="formatUsernameDisplay(loginForm.get('email')?.value || '')"
readonly
/>
<!-- Password Errors -->
<div class="error-message" *ngIf="loginForm.get('password')?.touched && loginForm.get('password')?.invalid">
<small *ngIf="loginForm.get('password')?.errors?.['required']">Password is required.</small>
<small *ngIf="loginForm.get('password')?.errors?.['pattern']">Must be exactly 6 digits.</small>
</div>
<input
type="password"
placeholder="Enter Your Password"
class="input-box"
formControlName="password"
(focus)="setFocus('password')"
#passwordInput
/>
</div>
<!-- Password Input -->
<input
type="password"
placeholder="Enter Your Password"
class="input-box"
formControlName="password"
(focus)="setFocus('password')"
#passwordInput
/>
<!-- Login Button -->
<button class="login-btn" (click)="onSubmit()">LOGIN</button>
<!-- Numeric Keypad -->
<div class="numpad">
<div class="row">
<button (click)="onNumpadClick('0')">0</button>

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

@ -1,7 +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
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
@ -20,11 +20,11 @@ export class LoginComponent {
constructor(
private fb: FormBuilder,
private cdRef: ChangeDetectorRef,
private router: Router // <-- injected Router for navigation
private router: Router
) {
this.loginForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required]
email: ['', [Validators.required, Validators.pattern(/^\d{12}$/)]],
password: ['', [Validators.required, Validators.pattern(/^\d{6}$/)]]
});
}
@ -32,22 +32,32 @@ export class LoginComponent {
this.focusedField = field;
}
formatUsernameDisplay(rawValue: string): string {
return rawValue.replace(/(\d{4})(?=\d)/g, '$1-').slice(0, 14);
}
onNumpadClick(value: string): void {
if (!this.focusedField) return;
const control = this.loginForm.get(this.focusedField);
const current = control?.value || '';
const newValue = current + value;
const currentRaw = control?.value || '';
const maxLength = this.focusedField === 'email' ? 12 : 6;
control?.setValue(newValue);
if (currentRaw.length >= maxLength) return;
const newRawValue = currentRaw + value;
control?.setValue(newRawValue);
const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
inputRef.nativeElement.value = newValue;
const displayValue = this.focusedField === 'email'
? this.formatUsernameDisplay(newRawValue)
: newRawValue;
inputRef.nativeElement.value = displayValue;
setTimeout(() => {
const el = inputRef.nativeElement;
el.focus();
el.setSelectionRange(newValue.length, newValue.length);
inputRef.nativeElement.focus();
inputRef.nativeElement.setSelectionRange(displayValue.length, displayValue.length);
}, 0);
this.cdRef.detectChanges();
@ -57,18 +67,21 @@ export class LoginComponent {
if (!this.focusedField) return;
const control = this.loginForm.get(this.focusedField);
const current = control?.value || '';
const newValue = current.slice(0, -1);
const currentRaw = control?.value || '';
const newRawValue = currentRaw.slice(0, -1);
control?.setValue(newValue);
control?.setValue(newRawValue);
const inputRef = this.focusedField === 'email' ? this.emailInputRef : this.passwordInputRef;
inputRef.nativeElement.value = newValue;
const displayValue = this.focusedField === 'email'
? this.formatUsernameDisplay(newRawValue)
: newRawValue;
inputRef.nativeElement.value = displayValue;
setTimeout(() => {
const el = inputRef.nativeElement;
el.focus();
el.setSelectionRange(newValue.length, newValue.length);
inputRef.nativeElement.focus();
inputRef.nativeElement.setSelectionRange(displayValue.length, displayValue.length);
}, 0);
this.cdRef.detectChanges();
@ -76,13 +89,11 @@ export class LoginComponent {
onSubmit(): void {
if (this.loginForm.invalid) {
this.loginForm.markAllAsTouched(); // Show all validation errors
this.loginForm.markAllAsTouched();
return;
}
console.log('Login successful:', this.loginForm.value);
// Navigate to landing page
this.router.navigate(['/landing']);
}
}