alahouze/accountant-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Try to use materialize for login popup.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/login/login.module.ts
View File

@ -5,6 +5,7 @@ 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 { MaterializeModule } from 'ng2-materialize';
import { NgLoggerModule } from '@nsalaun/ng-logger'; import { NgLoggerModule } from '@nsalaun/ng-logger';
@ -18,6 +19,7 @@ import { LoginModalComponent } from './loginModal.component';
HttpClientModule, HttpClientModule,
CommonModule, CommonModule,
ReactiveFormsModule, ReactiveFormsModule,
MaterializeModule,
NgLoggerModule, NgLoggerModule,
], ],
providers: [ providers: [

21
src/login/login.service.ts
View File

@ -6,7 +6,7 @@ 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 { MzModalService } from 'ng2-materialize';
import { Token } from './token'; import { Token } from './token';
import { LoginModalComponent } from './loginModal.component'; import { LoginModalComponent } from './loginModal.component';
@ -18,24 +18,25 @@ export class LoginService {
constructor( constructor(
private httpClient: HttpClient, private httpClient: HttpClient,
private logger: Logger, private logger: Logger,
private ngbModal: NgbModal, private mzModalService: MzModalService,
) {} ) {}
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 modal = this.mzModalService.open(LoginModalComponent);
sessionStorage.clear(); sessionStorage.clear();
let observable: Observable<any> = Observable.fromPromise(modal.result); //let observable: Observable<any> = Observable.fromPromise(modal.result);
return observable.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;
return token; // return token;
}); //});
return null;
} }
logout() { logout() {

58
src/login/loginModal.component.ts
View File

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