Try to use materialize for login popup.

This commit is contained in:
Alexis Lahouze 2017-10-06 23:57:44 +02:00
parent 3216be85ef
commit a283651eae
3 changed files with 41 additions and 40 deletions

View File

@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MaterializeModule } from 'ng2-materialize';
import { NgLoggerModule } from '@nsalaun/ng-logger';
@ -18,6 +19,7 @@ import { LoginModalComponent } from './loginModal.component';
HttpClientModule,
CommonModule,
ReactiveFormsModule,
MaterializeModule,
NgLoggerModule,
],
providers: [

View File

@ -6,7 +6,7 @@ import { Observable} from 'rxjs/Rx';
import * as base64 from 'base64util';
import { Logger } from '@nsalaun/ng-logger';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MzModalService } from 'ng2-materialize';
import { Token } from './token';
import { LoginModalComponent } from './loginModal.component';
@ -18,24 +18,25 @@ export class LoginService {
constructor(
private httpClient: HttpClient,
private logger: Logger,
private ngbModal: NgbModal,
private mzModalService: MzModalService,
) {}
public readonly url: string = '/api/user/login';
login(): Observable<Token> {
let modal = this.ngbModal.open(LoginModalComponent);
let modal = this.mzModalService.open(LoginModalComponent);
sessionStorage.clear();
let observable: Observable<any> = Observable.fromPromise(modal.result);
//let observable: Observable<any> = Observable.fromPromise(modal.result);
return observable.flatMap((login: Login) =>
this.doLogin(login)
).map((token: Token): Token => {
this.accessToken = token.access_token;
return token;
});
//return observable.flatMap((login: Login) =>
// this.doLogin(login)
//).map((token: Token): Token => {
// this.accessToken = token.access_token;
// return token;
//});
return null;
}
logout() {

View File

@ -1,7 +1,7 @@
// 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 { MzBaseModal } from 'ng2-materialize';
import { Login } from './login';
import { LoginFormComponent } from './loginForm.component';
@ -9,43 +9,41 @@ 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>
<mz-modal>
<mz-modal-header>
Authentification requise
</mz-modal-header>
<div class="modal-body" id="modal-body">
<login-form (submit)="submit()" #loginForm="loginForm"></login-form>
</div>
<mz-modal-content>
<login-form (submit)="submit()" #loginForm="loginForm"></login-form>
</mz-modal-content>
<div class="modal-footer">
<button class="btn btn-primary" [disabled]="!loginForm.form.valid" (click)="submit()">
Login
</button>
<mz-modal-footer>
<button class="btn btn-primary" [disabled]="!loginForm.form.valid" (click)="submit()">
Login
</button>
<button class="btn btn-default" (click)="cancel()">
Cancel
</button>
</div>
<button class="btn btn-default" (click)="cancel()">
Cancel
</button>
</mz-modal-footer>
</mz-modal>
`
})
export class LoginModalComponent {
export class LoginModalComponent extends MzBaseModal {
@ViewChild('loginForm') loginForm: LoginFormComponent;
constructor(private activeModal: NgbActiveModal) {
}
//submit(): void {
// let formModel = this.loginForm.form.value;
// let login: Login = new Login();
submit(): void {
let formModel = this.loginForm.form.value;
let login: Login = new Login();
// login.email = formModel.email;
// login.password = formModel.password;
login.email = formModel.email;
login.password = formModel.password;
// this.activeModal.close(login);
//}
this.activeModal.close(login);
}
cancel(): void {
this.activeModal.dismiss("closed");
}
//cancel(): void {
// this.activeModal.dismiss("closed");
//}
}