Migrate login module to material.

This commit is contained in:
Alexis Lahouze 2017-09-16 01:46:24 +02:00
parent 2236f317c6
commit a84a1f1c28
4 changed files with 42 additions and 49 deletions

View File

@ -5,6 +5,12 @@ import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { HTTP_INTERCEPTORS } 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'; import { NgLoggerModule } from '@nsalaun/ng-logger';
@ -19,6 +25,10 @@ import { LoginModalComponent } from './loginModal.component';
CommonModule, CommonModule,
ReactiveFormsModule, ReactiveFormsModule,
NgLoggerModule, NgLoggerModule,
MdButtonModule,
MdDialogModule,
MdInputModule,
MdListModule,
], ],
providers: [ providers: [
LoginService, LoginService,

View File

@ -1,12 +1,12 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'; import { HttpClient, HttpHeaders } from '@angular/common/http';
import { MdDialog } from '@angular/material';
import { Observable} from 'rxjs/Rx'; import { Observable} from 'rxjs/Rx';
import * as base64 from 'base64util'; import * as base64 from 'base64util';
import { Logger } from '@nsalaun/ng-logger'; import { Logger } from '@nsalaun/ng-logger';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Token } from './token'; import { Token } from './token';
import { LoginModalComponent } from './loginModal.component'; import { LoginModalComponent } from './loginModal.component';
@ -18,19 +18,17 @@ export class LoginService {
constructor( constructor(
private httpClient: HttpClient, private httpClient: HttpClient,
private logger: Logger, private logger: Logger,
private ngbModal: NgbModal, private mdDialog: MdDialog,
) {} ) {}
public readonly url: string = '/api/user/login'; public readonly url: string = '/api/user/login';
login(): Observable<Token> { login(): Observable<Token> {
let modal = this.ngbModal.open(LoginModalComponent); let dialogRef = this.mdDialog.open(LoginModalComponent);
sessionStorage.clear(); sessionStorage.clear();
let observable: Observable<any> = Observable.fromPromise(modal.result); return dialogRef.afterClosed().flatMap((login: Login) =>
return observable.flatMap((login: Login) =>
this.doLogin(login) this.doLogin(login)
).map((token: Token): Token => { ).map((token: Token): Token => {
this.accessToken = token.access_token; this.accessToken = token.access_token;

View File

@ -9,33 +9,25 @@ import { Login } from './login';
exportAs: 'loginForm', exportAs: 'loginForm',
template: ` template: `
<form novalidate (keyup.enter)="submit()" [formGroup]="form"> <form novalidate (keyup.enter)="submit()" [formGroup]="form">
<div class="form-group row"> <md-list>
<label for="email" class="col-sm-4 control-label">Adresse email</label> <md-list-item>
<md-form-field>
<div class="col-sm-8" <input mdInput type="text"
[class.has-danger]="email.errors">
<input type="text" class="form-control" id="email"
formControlName="email" placeholder="Nom d'utilisateur"> formControlName="email" placeholder="Nom d'utilisateur">
<div class="help-block text-danger" *ngIf="email.errors"> <md-error *ngIf="email.errors?.required">The email is required.</md-error>
<p *ngIf="email.errors.required">The email is required.</p> </md-form-field>
</div> </md-list-item>
</div>
</div>
<div class="form-group row"> <md-list-item>
<label for="password" class="col-sm-4 control-label">Mot de passe</label> <md-form-field>
<input mdInput type="password"
<div class="col-sm-8"
[class.has-danger]="password.errors">
<input type="password" class="form-control" id="password"
formControlName="password" placeholder="Mot de passe"> formControlName="password" placeholder="Mot de passe">
<div class="help-block text-danger" *ngIf="password.errors"> <md-error *ngIf="password.errors?.required">The password is required.</md-error>
<p *ngIf="password.errors.required">The password is required.</p> </md-form-field>
</div> </md-list-item>
</div> </md-list>
</div>
</form> </form>
` `
}) })

View File

@ -1,7 +1,6 @@
// vim: set tw=80 ts=2 sw=2 sts=2: // vim: set tw=80 ts=2 sw=2 sts=2:
import { Component, Input, ViewChild } from '@angular/core'; import { Component, Input, ViewChild } from '@angular/core';
import { MdDialogRef } from '@angular/material';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Login } from './login'; import { Login } from './login';
import { LoginFormComponent } from './loginForm.component'; import { LoginFormComponent } from './loginForm.component';
@ -9,31 +8,29 @@ import { LoginFormComponent } from './loginForm.component';
@Component({ @Component({
selector: 'login-modal', selector: 'login-modal',
template: ` template: `
<div class="modal-header"> <h2 md-dialog-title>Authentification requise</h2>
<h3 class="modal-title" id="modal-title">Authentification requise</h3>
</div>
<div class="modal-body" id="modal-body"> <md-dialog-content>
<login-form (submit)="submit()" #loginForm="loginForm"></login-form> <login-form (submit)="submit()" #loginForm="loginForm"></login-form>
</div> </md-dialog-content>
<div class="modal-footer"> <md-dialog-actions>
<button class="btn btn-primary" [disabled]="!loginForm.form.valid" (click)="submit()"> <button md-button [disabled]="!loginForm.form.valid" (click)="submit()">
Login Login
</button> </button>
<button class="btn btn-default" (click)="cancel()"> <button md-button md-dialog-close>
Cancel Cancel
</button> </button>
</div> </md-dialog-actions>
` `
}) })
export class LoginModalComponent { export class LoginModalComponent {
@ViewChild('loginForm') loginForm: LoginFormComponent; @ViewChild('loginForm') loginForm: LoginFormComponent;
constructor(private activeModal: NgbActiveModal) { constructor(
public dialogRef: MdDialogRef<LoginModalComponent>,
} ) {}
submit(): void { submit(): void {
let formModel = this.loginForm.form.value; let formModel = this.loginForm.form.value;
@ -42,10 +39,6 @@ export class LoginModalComponent {
login.email = formModel.email; login.email = formModel.email;
login.password = formModel.password; login.password = formModel.password;
this.activeModal.close(login); this.dialogRef.close(login);
}
cancel(): void {
this.activeModal.dismiss("closed");
} }
} }