From a84a1f1c28fc1d5152c1637c16af795b1e3d2dad Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Sat, 16 Sep 2017 01:46:24 +0200
Subject: [PATCH] Migrate login module to material.

---
 src/login/login.module.ts         | 10 ++++++++
 src/login/login.service.ts        | 10 ++++----
 src/login/loginForm.component.ts  | 40 +++++++++++++------------------
 src/login/loginModal.component.ts | 31 ++++++++++--------------
 4 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/src/login/login.module.ts b/src/login/login.module.ts
index 8e4f4b9..372f297 100644
--- a/src/login/login.module.ts
+++ b/src/login/login.module.ts
@@ -5,6 +5,12 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import {
+  MdButtonModule,
+  MdDialogModule,
+  MdInputModule,
+  MdListModule,
+} from '@angular/material';
 
 import { NgLoggerModule } from '@nsalaun/ng-logger';
 
@@ -19,6 +25,10 @@ import { LoginModalComponent } from './loginModal.component';
     CommonModule,
     ReactiveFormsModule,
     NgLoggerModule,
+    MdButtonModule,
+    MdDialogModule,
+    MdInputModule,
+    MdListModule,
   ],
   providers: [
     LoginService,
diff --git a/src/login/login.service.ts b/src/login/login.service.ts
index 7418807..cff214a 100644
--- a/src/login/login.service.ts
+++ b/src/login/login.service.ts
@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { MdDialog } from '@angular/material';
 
 import { Observable} from 'rxjs/Rx';
 
 import * as base64 from 'base64util';
 
 import { Logger } from '@nsalaun/ng-logger';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { Token } from './token';
 import { LoginModalComponent } from './loginModal.component';
@@ -18,19 +18,17 @@ export class LoginService {
     constructor(
         private httpClient: HttpClient,
         private logger: Logger,
-        private ngbModal: NgbModal,
+        private mdDialog: MdDialog,
     ) {}
 
     public readonly url: string = '/api/user/login';
 
     login(): Observable<Token> {
-        let modal = this.ngbModal.open(LoginModalComponent);
+        let dialogRef = this.mdDialog.open(LoginModalComponent);
 
         sessionStorage.clear();
 
-        let observable: Observable<any> = Observable.fromPromise(modal.result);
-
-        return observable.flatMap((login: Login) =>
+        return dialogRef.afterClosed().flatMap((login: Login) =>
             this.doLogin(login)
         ).map((token: Token): Token => {
             this.accessToken = token.access_token;
diff --git a/src/login/loginForm.component.ts b/src/login/loginForm.component.ts
index 1dc2f3a..1b8fe22 100644
--- a/src/login/loginForm.component.ts
+++ b/src/login/loginForm.component.ts
@@ -9,33 +9,25 @@ import { Login } from './login';
   exportAs: 'loginForm',
   template: `
 <form novalidate (keyup.enter)="submit()" [formGroup]="form">
-  <div class="form-group row">
-    <label for="email" class="col-sm-4 control-label">Adresse email</label>
+  <md-list>
+    <md-list-item>
+      <md-form-field>
+        <input mdInput type="text"
+          formControlName="email" placeholder="Nom d'utilisateur">
 
-    <div class="col-sm-8"
-      [class.has-danger]="email.errors">
-      <input type="text" class="form-control" id="email"
-        formControlName="email" placeholder="Nom d'utilisateur">
+        <md-error *ngIf="email.errors?.required">The email is required.</md-error>
+      </md-form-field>
+    </md-list-item>
 
-      <div class="help-block text-danger" *ngIf="email.errors">
-        <p *ngIf="email.errors.required">The email is required.</p>
-      </div>
-    </div>
-  </div>
+    <md-list-item>
+      <md-form-field>
+        <input mdInput type="password"
+          formControlName="password" placeholder="Mot de passe">
 
-  <div class="form-group row">
-    <label for="password" class="col-sm-4 control-label">Mot de passe</label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="password.errors">
-      <input type="password" class="form-control" id="password"
-        formControlName="password" placeholder="Mot de passe">
-
-      <div class="help-block text-danger" *ngIf="password.errors">
-        <p *ngIf="password.errors.required">The password is required.</p>
-      </div>
-    </div>
-  </div>
+        <md-error *ngIf="password.errors?.required">The password is required.</md-error>
+      </md-form-field>
+    </md-list-item>
+  </md-list>
 </form>
   `
 })
diff --git a/src/login/loginModal.component.ts b/src/login/loginModal.component.ts
index 8ff7abd..3fc00e1 100644
--- a/src/login/loginModal.component.ts
+++ b/src/login/loginModal.component.ts
@@ -1,7 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
 import { Component, Input, ViewChild } from '@angular/core';
-
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { MdDialogRef } from '@angular/material';
 
 import { Login } from './login';
 import { LoginFormComponent } from './loginForm.component';
@@ -9,31 +8,29 @@ import { LoginFormComponent } from './loginForm.component';
 @Component({
   selector: 'login-modal',
   template: `
-<div class="modal-header">
-  <h3 class="modal-title" id="modal-title">Authentification requise</h3>
-</div>
+<h2 md-dialog-title>Authentification requise</h2>
 
-<div class="modal-body" id="modal-body">
+<md-dialog-content>
   <login-form (submit)="submit()" #loginForm="loginForm"></login-form>
-</div>
+</md-dialog-content>
 
-<div class="modal-footer">
-  <button class="btn btn-primary" [disabled]="!loginForm.form.valid" (click)="submit()">
+<md-dialog-actions>
+  <button md-button [disabled]="!loginForm.form.valid" (click)="submit()">
     Login
   </button>
 
-  <button class="btn btn-default" (click)="cancel()">
+  <button md-button md-dialog-close>
     Cancel
   </button>
-</div>
+</md-dialog-actions>
   `
 })
 export class LoginModalComponent {
   @ViewChild('loginForm') loginForm: LoginFormComponent;
 
-  constructor(private activeModal: NgbActiveModal) {
-    
-  }
+  constructor(
+    public dialogRef: MdDialogRef<LoginModalComponent>,
+  ) {}
 
   submit(): void {
     let formModel = this.loginForm.form.value;
@@ -42,10 +39,6 @@ export class LoginModalComponent {
     login.email = formModel.email;
     login.password = formModel.password;
 
-    this.activeModal.close(login);
-  }
-
-  cancel(): void {
-    this.activeModal.dismiss("closed");
+    this.dialogRef.close(login);
   }
 }