Merge pull request #98 from Kajol-Kumari/add_login_page

Added login page UI
rajatkb · May 19, 2020 · 552c238 · 552c238
2 parents e23db99 + eae5cbc
commit 552c238
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 3 deletions.
diff --git a/User-App/src/app/app.module.ts b/User-App/src/app/app.module.ts
@@ -17,6 +17,7 @@ import { LoginComponent } from './login/login.component';
 import { SignupComponent } from './signup/signup.component';
 import { HomeComponent } from './home/home.component';
 import { SearchPageComponent } from './search-page/search-page.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -38,7 +39,9 @@ import { SearchPageComponent } from './search-page/search-page.component';
     MatProgressSpinnerModule,
     MatPaginatorModule,
     MatInputModule,
-    FlexLayoutModule
+    FlexLayoutModule,
+    FormsModule,
+    ReactiveFormsModule
     ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/User-App/src/app/login/login.component.css b/User-App/src/app/login/login.component.css
@@ -0,0 +1,24 @@
+.main {
+  text-align: center;
+  margin-top: 2%;
+}
+h2 {
+  font-size: 28px;
+  color: rgb(15, 15, 228);
+  font-weight: 600;
+  font-family: 'Courier New', Courier, monospace;
+}
+mat-card {
+  margin:2% 0% 6% 15%;
+  padding:4%;
+  width:60%;
+  background-color: rgb(241, 239, 239);
+  font-size: 18px;
+}
+mat-form-field {
+  width: 80%;
+  margin-left: 8%;
+}
+button{
+  margin-left: 50%;
+}
diff --git a/User-App/src/app/login/login.component.html b/User-App/src/app/login/login.component.html
@@ -1 +1,28 @@
-<p>Welcome to the login page :)</p>
+<div class="main">
+  <h2>LOGIN FORM</h2>
+</div>
+<mat-card>
+  <form (submit) = "OnLogin(logInForm)" #logInForm= "ngForm">
+    <mat-form-field>
+      <input type="email"
+        matInput name="email"
+        ngModel placeholder="Email ID"
+        #emailId="ngModel"
+        required email>
+      <mat-error *ngIf="emailId.invalid">Please Enter a valid Email ID!</mat-error>
+    </mat-form-field>
+    <mat-form-field>
+
+      <input type="password"
+      matInput
+      name = "password"
+      ngModel
+      placeholder="Password" #passwordentered="ngModel" required>
+     <mat-error *ngIf="passwordentered.invalid">Please Enter a valid Password!</mat-error>
+
+    </mat-form-field> <br>
+    <button mat-raised-button color="primary" type="submit">
+      Login
+     </button>
+  </form>
+</mat-card>
diff --git a/User-App/src/app/login/login.component.ts b/User-App/src/app/login/login.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-login',
@@ -11,5 +12,7 @@ export class LoginComponent implements OnInit {
 
   ngOnInit(): void {
   }
-
+  OnLogin(form: NgForm) {
+    console.log(form);
+  }
 }