signup ui connected with backend

Author: mangeshpotdar1999

src/app/app-routing.module.ts

@@ -8,11 +8,11 @@ import { RegisterComponent } from './register/register.component';
 
 
 const routes: Routes = [
- { path: "login", component: LoginComponent },
- { path: "register", component: RegisterComponent },
- { path: "dashboard", component: DashboardComponent },
- { path: "", component: HomeComponent },
- { path: "app", component: AppComponent }
+ { path: "login", component: LoginComponent, pathMatch: "full" },
+ { path: "register", component: RegisterComponent, pathMatch: "full" },
+ { path: "dashboard", component: DashboardComponent, pathMatch: "full" },
+ { path: "", component: HomeComponent, pathMatch: "full" },
+ { path: "app", component: AppComponent, pathMatch: "full" }
 ];
 
 @NgModule({

src/app/app.component.html

@@ -11,6 +11,9 @@
  <li class="nav-item active">
  <a class="nav-link text-white" routerLink="login">Login / Signup <span class="sr-only">(current)</span></a>
  </li>
+ <li class="nav-item">
+ <a class="nav-link text-white" routerLink="register">Signup <span class="sr-only">(current)</span></a>
+ </li>
  <!-- <li class="nav-item">
  <a class="nav-link" routerLink="course">Course</a>
  </li>

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { FooterComponent } from './footer/footer.component';
 import { HomeComponent } from './home/home.component';
 import { CardComponent } from './card/card.component';
+import { HttpClientModule } from '@angular/common/http';
 
 
 @NgModule({
@@ -57,6 +58,7 @@ import { CardComponent } from './card/card.component';
  FormsModule,
  MatExpansionModule,
  CdkAccordionModule,
+ HttpClientModule
  // FlexLayoutModule
 
  ],

src/app/login/login.component.html

@@ -4,7 +4,7 @@
  <mat-tab-group mat-stretch-tabs class="example-stretched-tabs">
  <mat-tab label="Login">
  <mat-card-content>
- <form action="">
+ <form>
  <mat-form-field>
  <input
  matInput
@@ -51,7 +51,7 @@
  class="login-button">
  Login with Google
  </button>
- <p class="login-button">Do not have account ! please <a routerLink="/register" >Register</a></p>
+ <p class="login-button">Do not have account ! please  <a routerLink="register" >Register</a></p>
  </form>
  </mat-card-content>
  </mat-tab>

src/app/register/register.component.html

@@ -1,16 +1,29 @@
-<div class="login-page">
+<div class="container-fluid login-page">
  <mat-card class="mat-elevation-z12">
  <mat-card-title style="text-align:center;">Sign Up</mat-card-title>
  <mat-tab-group mat-stretch-tabs class="example-stretched-tabs">
  <mat-tab label="Sign Up">
  <mat-card-content>
- <form action="">
+ <form (ngSubmit)="registerNow()">
+ <mat-form-field>
+ <input
+ matInput
+ placeholder="Email"
+ required
+ name="email"
+ [(ngModel)]="user.email"
+ ngModel
+ #email="ngModel">
+ <mat-error *ngIf="email.invalid">Email is required</mat-error>
+ <!-- <mat-icon matSuffix>email</mat-icon> -->
+ </mat-form-field>
  <mat-form-field>
  <input
  matInput
  placeholder="User Name"
  required
- name="username"
+ name="name"
+ [(ngModel)]="user.name"
  ngModel
  #username="ngModel">
  <!-- <mat-icon matSuffix>perm_identity</mat-icon> -->
@@ -20,17 +33,7 @@
  </mat-error>
 
  </mat-form-field>
- <mat-form-field>
- <input
- matInput
- placeholder="Email"
- required
- name="email"
- ngModel
- #email="ngModel">
- <mat-error *ngIf="email.invalid">Email is required</mat-error>
- <!-- <mat-icon matSuffix>email</mat-icon> -->
- </mat-form-field>
+ 
  <mat-form-field>
  <input
  matInput
@@ -39,6 +42,7 @@
  required
  minlength="6"
  name="password"
+ [(ngModel)]="user.password"
  ngModel
  #password="ngModel">
  <mat-error
@@ -71,9 +75,13 @@
  <button
  mat-raised-button
  color="primary"
- class="login-button">
+ class="login-button"
+ type="submit"
+ >
+ 
  Sign Up
  </button>
+ <!-- <p>{{user | json }}</p> -->
  </form>
  </mat-card-content>
  </mat-tab>

src/app/register/register.component.ts

@@ -1,13 +1,39 @@
 import { Component, OnInit } from '@angular/core';
+import { UserServiceService } from '../user-service.service';
+import { User } from '../user';
 @Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
 })
 export class RegisterComponent implements OnInit {
 
- constructor() { }
+ // u = {
+ // email: "",
+ // name: "",
+ // password: ""
+ // }
+ user = new User("", "", "");
+
+ // m: any
+
+
+ constructor(private service: UserServiceService) {
+
+ }
  ngOnInit(): void {
  }
 
+ public registerNow() {
+ console.log(this.user);
+
+ this.service.doRegistration(this.user).subscribe(
+ data => console.log("Response Received", data),
+ error => console.log("Exception Occured")
+ )
+
+
+
+ }
+
 }

src/app/user-service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserServiceService } from './user-service.service';
+
+describe('UserServiceService', () => {
+ let service: UserServiceService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(UserServiceService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});

src/app/user-service.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { User } from './user';
+import { Observable } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class UserServiceService {
+
+ constructor(private http: HttpClient) { }
+ public doRegistration(user: User): Observable<any> {
+ return this.http.post<any>("https://global-rest-api.herokuapp.com/userAuth/register", user);
+ }
+
+}

src/app/user.ts

@@ -0,0 +1,16 @@
+export class User {
+ email: string;
+ name: string;
+ password: string;
+ constructor(
+ email: string,
+ name: string,
+ password: string
+ ) {
+ this.email = email,
+ this.name = name,
+ this.password = password
+
+
+ }
+}