Register and Login functionality

Author: Vishwas Gopinath - I16165

ngApp/src/app/app.module.ts

@@ -1,24 +1,34 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
+import { AuthService } from './auth.service';
+import { EventsComponent } from './events/events.component';
+import { SpecialComponent } from './special-/special-.component';
+import { SpecialEventsComponent } from './special-events/special-events.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
-    RegisterComponent
+    RegisterComponent,
+    EventsComponent,
+    SpecialComponent,
+    SpecialEventsComponent
   ],
   imports: [
     BrowserModule,
+    FormsModule,
+    HttpClientModule,
     AppRoutingModule
   ],
-  providers: [],
+  providers: [AuthService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

ngApp/src/app/auth.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http'
+
+@Injectable()
+export class AuthService {
+
+  private _registerUrl = "/api/register";
+  private _loginUrl = "/api/login";
+
+  constructor(private http: HttpClient) { }
+
+  registerUser(user) {
+    return this.http.post(this._registerUrl, user, {responseType: 'text'})
+  }
+
+  loginUser(user) {
+    return this.http.post(this._loginUrl, user, {responseType: 'text'})
+  }
+}

ngApp/src/app/login/login.component.html

@@ -9,16 +9,16 @@
           <h3 class="mb-0">Login</h3>
         </div>
         <div class="card-body">
-          <form class="form" role="form" autocomplete="off" id="formLogin">
+          <form class="form">
             <div class="form-group">
               <label for="uname1">Username</label>
-              <input type="text" class="form-control rounded-0" name="uname1" id="uname1" required="">
+              <input type="text" class="form-control rounded-0" [(ngModel)]="loginUserData.email" name="email" required>
             </div>
             <div class="form-group">
               <label>Password</label>
-              <input type="password" class="form-control rounded-0" id="pwd1" required="" autocomplete="new-password">
+              <input type="password" class="form-control rounded-0" [(ngModel)]="loginUserData.password" name="password" required>
             </div>
-            <button type="button" class="btn btn-success float-right">Login</button>
+            <button type="button" (click)="loginUser()" class="btn btn-success float-right">Login</button>
           </form>
         </div>
         <!--/card-block-->

ngApp/src/app/login/login.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../auth.service';
 
 @Component({
   selector: 'app-login',
@@ -7,9 +8,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  loginUserData = {}
+
+  constructor(private _auth: AuthService) { }
 
   ngOnInit() {
   }
 
+  loginUser () {
+    this._auth.loginUser(this.loginUserData)
+    .subscribe(
+      res => console.log(res),
+      err => console.log(err)
+    ) 
+  }
+
 }

ngApp/src/app/register/register.component.html

@@ -9,16 +9,16 @@
             <h3 class="mb-0">Register</h3>
           </div>
           <div class="card-body">
-            <form class="form" role="form" autocomplete="off" id="formLogin">
+            <form class="form">
               <div class="form-group">
                 <label for="uname1">Username</label>
-                <input type="text" class="form-control rounded-0" name="uname1" id="uname1" required="">
+                <input type="text" [(ngModel)]="registerUserData.email" name="email" class="form-control rounded-0" required>
               </div>
               <div class="form-group">
                 <label>Password</label>
-                <input type="password" class="form-control rounded-0" id="pwd1" required="" autocomplete="new-password">
+                <input type="password" [(ngModel)]="registerUserData.password" name="password" class="form-control rounded-0"  required>
               </div>
-              <button type="button" class="btn btn-primary float-right">Register</button>
+              <button type="button" (click)="registerUser()" class="btn btn-primary float-right">Register</button>
             </form>
           </div>
           <!--/card-block-->

ngApp/src/app/register/register.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../auth.service';
 
 @Component({
   selector: 'app-register',
@@ -7,9 +8,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RegisterComponent implements OnInit {
 
-  constructor() { }
+  registerUserData = {}
+  constructor(private _auth: AuthService) { }
 
   ngOnInit() {
   }
 
+  registerUser() {
+    this._auth.registerUser(this.registerUserData)
+    .subscribe(
+      res => console.log(res),
+      err => console.log(err)
+    )      
+  }
+
+
 }