From d3b0d187a2a675f998ad9759c402b0fcda86f730 Mon Sep 17 00:00:00 2001
From: ganga satish kumar <skganga@bajajauto.co.in>
Date: Sat, 12 Mar 2022 23:51:33 +0530
Subject: [PATCH] login screen styling

---
 src/app/app.module.ts              |  4 ++++
 src/app/login/login.component.html | 16 ++++++++--------
 src/app/login/login.component.scss |  1 +
 src/app/login/login.component.ts   |  8 +-------
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2409445a1..607282f6b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,6 +8,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { LoginComponent } from './login/login.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @NgModule({
   declarations: [
@@ -21,6 +23,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     HttpClientModule,
     ReactiveFormsModule,
     BrowserAnimationsModule,
+    MatFormFieldModule,
+    MatInputModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index daf3df5b2..e54cb04b0 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -9,20 +9,20 @@
             </div>
             <div class="flex-row">
                 <div class="align-middle">
-                    <!-- <mat-form-field class="input-field" appearance="outline">
-                        <mat-label>Username</mat-label> -->
+                    <mat-form-field class="input-field" appearance="outline">
+                        <mat-label>Username</mat-label>
                         <input formControlName="usernameId" matInput placeholder="Username" value="">
-                        <!-- <mat-error class="error" *ngIf="loginForm.get('usernameId')?.hasError('required')">invalid username</mat-error>
-                    </mat-form-field> -->
+                        <mat-error class="error" *ngIf="loginForm.get('usernameId')?.hasError('required')">invalid username</mat-error>
+                    </mat-form-field> 
                 </div>
             </div>
             <div class="align-middle flex-row">
                 <div class="align-middle">
-                    <!-- <mat-form-field class="input-field" type="password" appearance="outline">
-                        <mat-label>Password</mat-label> -->
+                   <mat-form-field class="input-field" type="password" appearance="outline">
+                        <mat-label>Password</mat-label>
                         <input formControlName="passwwordId"  matInput placeholder="passwordId" value="" >
-                        <!-- <mat-error class="error" *ngIf="loginForm.get('passwwordId')?.hasError('required')">invalid password</mat-error>
-                    </mat-form-field> -->
+                        <mat-error class="error" *ngIf="loginForm.get('passwwordId')?.hasError('required')">invalid password</mat-error>
+                    </mat-form-field> 
                 </div>
             </div>
             <div class="align-middle flex-row">
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index 1631b2dcc..e6c30ef50 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -24,6 +24,7 @@
 	width: 100%;
 	background: #22138b 0 0 no-repeat padding-box !important;
 	margin: 2%;
+	height: 2.5rem;
 }
 #login-screen .flex-row {
 	flex-direction: row;
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 87df0a334..2635b428a 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -22,13 +22,6 @@ export class LoginComponent implements OnInit {
     this.initFormControls();
   }
 
-  // ngAfterViewInit(){
-  //   setTimeout(() => {
-  //     this.loginForm.controls['password'].markAsTouched();
-  //     this.loginForm.controls['username'].markAsTouched();
-  //   }, 0);
-  // }
-
   initFormControls(){
     this.loginForm = this.formBuilder.group({
       usernameId: ['',[Validators.required]],
@@ -39,6 +32,7 @@ export class LoginComponent implements OnInit {
   loginHandler(){
     this.username = this.loginForm?.get("usernameId")?.value;
     this.password = this.loginForm?.get("passwwordId")?.value;
+    
   }
 
   validateCredentials(){