Add logic to Login

src/app/app.module.ts

@@ -1,3 +1,5 @@
+import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -25,6 +27,8 @@ import { WebSocketService } from './websocket.service';
   ],
   imports: [
     BrowserModule,
+    FormsModule,
+    HttpClientModule,
     NgbModule.forRoot(),
     AceEditorModule,
   ],
@@ -32,6 +36,8 @@ import { WebSocketService } from './websocket.service';
     MarkdownService,
     WebSocketService
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [
+    AppComponent
+  ]
 })
 export class AppModule { }

src/app/login/login.component.html

@@ -1,5 +1,6 @@
 <div>
-  <form >
+  <h1>Login page</h1>
+  <form #loginForm="ngForm" (submit)="onSubmit()" [hidden]="submitted">
     <div class="form-group">
       <label for="email_input">Email:</label>
       <input
@@ -8,6 +9,7 @@
         type="email"
         name="email"
         placeholder="Enter email"
+        [(ngModel)]="model.email"
       >
     </div>
     <div class="form-group">
@@ -18,9 +20,17 @@
         type="password"
         name="password"
         placeholder="Password"
+        [(ngModel)]="model.password"
       >
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
+  <div [hidden]="!submitted">
+    <p>
+      Logged in as {{logged_in_email}}.
+      You <em><span *ngIf="!is_admin">don't </span>have</em> admin privileges.
+    </p>
+  </div>
+
 </div>
 

src/app/login/login.component.ts

@@ -1,4 +1,7 @@
+import { HttpClient } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Login } from './login';
 
 @Component({
   selector: 'app-login',
@@ -6,9 +9,26 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
-  constructor() { }
-
-  ngOnInit() {
+  model = new Login('', '');
+  submitted = false;
+  is_admin: boolean;
+  logged_in_email: string;
+  constructor(
+    private http: HttpClient
+  ) {}
+  onSubmit() {
+    this.postLogin(this.model).subscribe(
+      res => {
+        this.logged_in_email = res['email'];
+        this.is_admin = res['is_admin'];
+      }
+    );
+    this.submitted = true;
   }
 
+  postLogin(login: Login): Observable<any> {
+    return this.http.post<Login>('/login', login);
+  }
+
+  ngOnInit() {}
 }

src/app/login/login.ts

@@ -0,0 +1,8 @@
+export class Login {
+
+  constructor(
+    public email: string,
+    public password: string
+  ) {}
+
+}