login screen styling

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]

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

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;

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(){