From 5e5880d9eacb8d54f815cd0c80520673b83d6ca9 Mon Sep 17 00:00:00 2001 From: ganga satish kumar Date: Mon, 28 Feb 2022 16:57:27 +0530 Subject: [PATCH] login screen --- src/app/app-routing.module.ts | 5 +- src/app/app.module.ts | 4 +- src/app/login/login.component.html | 35 ++++++++++++++ src/app/login/login.component.scss | 68 +++++++++++++++++++++++++++ src/app/login/login.component.spec.ts | 25 ++++++++++ src/app/login/login.component.ts | 30 ++++++++++++ 6 files changed, 164 insertions(+), 3 deletions(-) create mode 100644 src/app/login/login.component.html create mode 100644 src/app/login/login.component.scss create mode 100644 src/app/login/login.component.spec.ts create mode 100644 src/app/login/login.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 92476e0f..0c4b92c7 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index effb0f41..deea2c60 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html new file mode 100644 index 00000000..1d803f55 --- /dev/null +++ b/src/app/login/login.component.html @@ -0,0 +1,35 @@ +
+
+
+
+ +
+
+
+ EKAM +
+
+
+
+ + Username + + +
+
+
+
+ + Password + + +
+
+
+ + +
+
+
+
\ No newline at end of file diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss new file mode 100644 index 00000000..8f23e80b --- /dev/null +++ b/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; +// } \ No newline at end of file diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts new file mode 100644 index 00000000..d2c0e6c8 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LoginComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts new file mode 100644 index 00000000..f7a54cc1 --- /dev/null +++ b/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(){ + + } +}