login screen

src/app/app-routing.module.ts

@@ -17,6 +17,7 @@ import { NoticesComponent } from './notices/notices.component';
 import { OdpnrComponent } from './odpnr/odpnr.component';
 import { PoliciesComponent } from './policies/policies.component';
 import { ScheduleAppointmentComponent } from './annual-health-checkup/schedule-appointment/schedule-appointment.component';
+import { LoginComponent } from './login/login.component';
 
 const routes: Routes = [
    {path:'', component: DashboardComponent},
@@ -34,8 +35,8 @@ const routes: Routes = [
     {path:'generateLetter', component:GenerateLetterComponent},
     {path:'scheduleAppointment', component:ScheduleAppointmentComponent},
     {path:'addDependants', component:AddDependantsComponent},
-    {path:'annualHealthCheck', component:AnnualHealthCheckupComponent}
-
+    {path:'annualHealthCheck', component:AnnualHealthCheckupComponent},
+    {path:'login', component:LoginComponent}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -78,6 +78,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { TokenInterceptor } from './shared/helpers/token.interceptor';
 import { ScheduleAppointmentService } from './annual-health-checkup/schedule-appointment/schedule-appointment.service';
 import { CookieService } from 'ngx-cookie-service';
+import { LoginComponent } from './login/login.component';
 
 @NgModule({
   declarations: [
@@ -99,7 +100,8 @@ import { CookieService } from 'ngx-cookie-service';
     GenerateLetterComponent,
     ScheduleAppointmentComponent,
     AddDependantsComponent,
-    AnnualHealthCheckupComponent
+    AnnualHealthCheckupComponent,
+    LoginComponent
   ],
   imports: [
     BrowserModule,

src/app/login/login.component.html

@@ -0,0 +1,35 @@
+<div class="page-container" id="login-screen">
+    <form id="create-enquiry-form" class="create-enquiry-form" [formGroup]="loginForm"
+        (submit)="loginHandler()">
+        <div class="content">
+            <div class="flex-row">
+                <img class="icon" style="text-align:center" [src]="logoPath" />
+            </div>
+            <div class="flex-row align-middle">
+                <div class="align-middle title">
+                        EKAM
+                </div>
+            </div>
+            <div class="flex-row">
+                <div class="align-middle">
+                    <mat-form-field class="input-field" appearance="outline">
+                        <mat-label>Username</mat-label>
+                        <input formControlName="usernameId" matInput placeholder="Username" value="">
+                    </mat-form-field>
+                </div>
+            </div>
+            <div class="align-middle flex-row">
+                <div class="align-middle">
+                    <mat-form-field class="input-field" appearance="outline">
+                        <mat-label>Password</mat-label>
+                        <input formControlName="passwwordId" matInput placeholder="passwordId" value="">
+                    </mat-form-field>
+                </div>
+            </div>
+            <div class="align-middle flex-row">
+                <button mat-raised-button color="primary" (click)="loginHandler()">Sign In</button>
+                <!-- downloadPDF -->
+            </div>
+        </div>
+    </form>
+</div>

src/app/login/login.component.scss

@@ -0,0 +1,68 @@
+#login-screen {
+    // background: rgb(250,250,250);
+    // background: linear-gradient(283deg, rgba(250,250,250,1) 0%, rgba(226,189,43,1) 1%, rgba(34,158,194,1) 81%, rgba(3,151,198,1) 100%);
+    //     background: rgb(34,193,195);
+    // background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
+
+    background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
+    .content{
+        padding:5%
+    }
+    .icon {
+        width: 70%;
+        height: 70%;
+        align-items: center;
+        justify-content: center;
+        margin: auto;
+        padding: 30% 5%;
+    }
+    button {
+        border-radius: 10px;
+        font-size: 15px;
+        width: 100%;
+        background: #22138B 0 0 no-repeat padding-box !important;
+        margin: 2%;
+      }
+      .flex-row {
+        flex-direction: row;
+        display: flex;
+        width: 100%;
+    }
+    
+      ::ng-deep .mat-form-field-outline-start {
+        border-radius: 0.5rem 0 0 0.5rem !important;
+        min-width: 0.5rem !important;
+      }
+      
+      ::ng-deep .mat-form-field-outline-end {
+        border-radius: 0 0.5rem 0.5rem 0 !important;
+      }
+
+      ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+        background-color: #E0E9F8;
+        border-radius: 0.5rem;
+      }
+    
+    .align-middle{
+       width: 100%;
+       text-align: center;
+    }
+    .title{
+        color:#ffffff;
+        font-weight: bold;
+        font-size: 1.563rem;
+        margin-bottom: 15%;
+    }
+   .input-field {
+        width: 100%;
+      }
+}
+
+
+// #login-screen ::ng-deep .mat-form-field-underline, #generateLetter ::ng-deep .mat-form-field-ripple{
+//     background-color: '#E0E9F8';
+// }
+
+// ::ng-deep .mat-form-field-underline, #addDependants ::ng-deep .mat-form-field-ripple {
+//     background-color: #E0E9F8 !important;
+//   }

src/app/login/login.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  logoPath:string = 'assets/images/bajaj_logo_ai.png';
+  loginForm!: FormGroup;
+
+  constructor( private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.initFormControls();
+  }
+
+  initFormControls(){
+    this.loginForm = this.formBuilder.group({
+      usernameId: [{ value: '', disabled: false }],
+      passwwordId: [{ value: '', disabled: false }]
+    });
+  }
+
+  loginHandler(){
+
+  }
+}