From 951f7f52079eff5f7d03a13dabcc6ecd928fb0b0 Mon Sep 17 00:00:00 2001 From: geek Date: Wed, 14 Mar 2018 17:51:48 +0900 Subject: [PATCH] member totp component modify & store added --- .../settings/member/member-page.module.ts | 4 +- .../member/component/totp/totp.component.html | 40 ++++++++- .../member/component/totp/totp.component.ts | 10 ++- .../member/member-totp-store.module.ts | 24 ++++++ .../settings/member/member-totp.constant.ts | 3 + ...member.module.ts => member-totp.module.ts} | 13 ++- src/packages/settings/member/service/index.ts | 2 +- .../member/service/member-totp.service.ts | 6 +- src/packages/settings/member/store/index.ts | 31 +++++++ .../settings/member/store/totp/index.ts | 6 +- .../settings/member/store/totp/totp.action.ts | 5 +- .../member/store/totp/totp.effect.spec.ts | 15 ++++ .../settings/member/store/totp/totp.effect.ts | 81 +++++++++++++++++++ .../member/store/totp/totp.reducer.ts | 71 ++++++++++++++++ .../settings/member/store/totp/totp.state.ts | 15 ++++ 15 files changed, 307 insertions(+), 19 deletions(-) create mode 100644 src/packages/settings/member/member-totp-store.module.ts create mode 100644 src/packages/settings/member/member-totp.constant.ts rename src/packages/settings/member/{member.module.ts => member-totp.module.ts} (59%) create mode 100644 src/packages/settings/member/store/index.ts diff --git a/src/app/pages/settings/member/member-page.module.ts b/src/app/pages/settings/member/member-page.module.ts index eee5950..e5fb821 100644 --- a/src/app/pages/settings/member/member-page.module.ts +++ b/src/app/pages/settings/member/member-page.module.ts @@ -3,14 +3,14 @@ import { CommonModule } from '@angular/common'; import { MaterialModule } from 'app/commons/ui/material/material.module'; import { MemberPageComponent } from './member-page.component'; import { MemberPageRoutingModule } from './member-page-routing.module'; -import { MemberModule } from 'packages/settings/member/member.module'; +import { MemberTotpModule } from 'packages/settings/member/member-totp.module'; @NgModule({ imports: [ CommonModule, MaterialModule, MemberPageRoutingModule, - MemberModule, + MemberTotpModule, ], declarations: [ MemberPageComponent diff --git a/src/packages/settings/member/component/totp/totp.component.html b/src/packages/settings/member/component/totp/totp.component.html index 641b455..bb08dbb 100644 --- a/src/packages/settings/member/component/totp/totp.component.html +++ b/src/packages/settings/member/component/totp/totp.component.html @@ -1,3 +1,39 @@ -
- + +
+
+ + + + QR Code + + + +
+ +
+ + + +
+ +
+ + + + Secret Code + X6AWAK573M5372NM + + +
+ + + + + + +
+ + +
diff --git a/src/packages/settings/member/component/totp/totp.component.ts b/src/packages/settings/member/component/totp/totp.component.ts index c499a07..118aaa1 100644 --- a/src/packages/settings/member/component/totp/totp.component.ts +++ b/src/packages/settings/member/component/totp/totp.component.ts @@ -1,4 +1,8 @@ import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import * as TotpStore from '../../store/totp'; +import { Store } from '@ngrx/store'; +import {FormBuilder} from '@angular/forms'; @Component({ selector: 'of-totp', @@ -7,7 +11,11 @@ import { Component, OnInit } from '@angular/core'; }) export class TotpComponent implements OnInit { - constructor() { } + constructor(private activatedRoute: ActivatedRoute, + private router: Router, + private store: Store, + private formBuilder: FormBuilder, + ) { } ngOnInit() { } diff --git a/src/packages/settings/member/member-totp-store.module.ts b/src/packages/settings/member/member-totp-store.module.ts new file mode 100644 index 0000000..aa83d9e --- /dev/null +++ b/src/packages/settings/member/member-totp-store.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { StoreModule } from '@ngrx/store'; +import { StoreDevtoolsModule } from '@ngrx/store-devtools'; +import { + StoreRouterConnectingModule, + RouterStateSerializer, +} from '@ngrx/router-store'; +import { EffectsModule } from '@ngrx/effects'; +import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store'; + +import { + REDUCERS, + EFFECTS, +} from './store'; + +import { MODULE } from './member-totp.constant'; + +@NgModule({ + imports: [ + StoreModule.forFeature(MODULE.name, REDUCERS), + EffectsModule.forFeature(EFFECTS), + ], +}) +export class MemberTotpStoreModule { } diff --git a/src/packages/settings/member/member-totp.constant.ts b/src/packages/settings/member/member-totp.constant.ts new file mode 100644 index 0000000..f0800c0 --- /dev/null +++ b/src/packages/settings/member/member-totp.constant.ts @@ -0,0 +1,3 @@ +export const MODULE = { + name: 'member-totp' +}; diff --git a/src/packages/settings/member/member.module.ts b/src/packages/settings/member/member-totp.module.ts similarity index 59% rename from src/packages/settings/member/member.module.ts rename to src/packages/settings/member/member-totp.module.ts index df1f0e0..759975b 100644 --- a/src/packages/settings/member/member.module.ts +++ b/src/packages/settings/member/member-totp.module.ts @@ -1,18 +1,23 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import {FormsModule} from '@angular/forms'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import { MaterialModule } from 'app/commons/ui/material/material.module'; import { QRCodeModule } from 'angularx-qrcode'; import { COMPONENTS } from './component'; -import {SERVICES} from "../../probe/service"; +import { SERVICES } from '../../settings/member/service' +import { MemberTotpStoreModule } from './member-totp-store.module'; + @NgModule({ imports: [ CommonModule, FormsModule, MaterialModule, - QRCodeModule + FormsModule, + ReactiveFormsModule, + QRCodeModule, + MemberTotpStoreModule ], exports: [ COMPONENTS, @@ -24,4 +29,4 @@ import {SERVICES} from "../../probe/service"; SERVICES, ], }) -export class MemberModule { } +export class MemberTotpModule{ } diff --git a/src/packages/settings/member/service/index.ts b/src/packages/settings/member/service/index.ts index 0c73f8e..4a051ca 100644 --- a/src/packages/settings/member/service/index.ts +++ b/src/packages/settings/member/service/index.ts @@ -1,4 +1,4 @@ -import {MemberTotpService} from './member-totp.service'; +import { MemberTotpService } from './member-totp.service'; export const SERVICES = [ MemberTotpService, diff --git a/src/packages/settings/member/service/member-totp.service.ts b/src/packages/settings/member/service/member-totp.service.ts index 407f557..5ef440a 100644 --- a/src/packages/settings/member/service/member-totp.service.ts +++ b/src/packages/settings/member/service/member-totp.service.ts @@ -13,15 +13,15 @@ export class MemberTotpService { } - public createTotp(): Observable { + public createTotp(member: Member): Observable { // Todo Store get member object return this.rpcClient.call('MemberTotpService.createTotp', {id: '1'}); } - public regist(): Observable { + public regist(member: Member, secretCode: string, code: string): Observable { const param = { - Member: {id: 1,}, + Member: {id: 1, }, MemberTotp: {id: 1, secretCode: 'dkdkdkdk'}, code: '123123' }; diff --git a/src/packages/settings/member/store/index.ts b/src/packages/settings/member/store/index.ts new file mode 100644 index 0000000..5bc587a --- /dev/null +++ b/src/packages/settings/member/store/index.ts @@ -0,0 +1,31 @@ +import { + createSelector, + createFeatureSelector, + ActionReducerMap, +} from '@ngrx/store'; + +import { StateSelector } from 'packages/core/ngrx/store'; + +import { MODULE } from '../member-totp.constant'; + +import * as TotpStore from './totp'; + +export interface State { + totp: TotpStore.State; +} + +export const REDUCERS = { + totp: TotpStore.reducer, +}; + +export const EFFECTS = [ + TotpStore.Effects, +]; + +export const selectMemberTotpState = createFeatureSelector(MODULE.name); + +export const AuthSelector = new StateSelector(createSelector( + selectMemberTotpState, + (state: State) => state.totp +)); + diff --git a/src/packages/settings/member/store/totp/index.ts b/src/packages/settings/member/store/totp/index.ts index 297fc8b..d32dabd 100644 --- a/src/packages/settings/member/store/totp/index.ts +++ b/src/packages/settings/member/store/totp/index.ts @@ -1,4 +1,4 @@ export * from './totp.action'; -// export * from './totp.effect'; -// export * from './totp.reducer'; -// export * from './totp.state'; +export * from './totp.effect'; +export * from './totp.reducer'; +export * from './totp.state'; diff --git a/src/packages/settings/member/store/totp/totp.action.ts b/src/packages/settings/member/store/totp/totp.action.ts index 3b9ae8a..aa50259 100644 --- a/src/packages/settings/member/store/totp/totp.action.ts +++ b/src/packages/settings/member/store/totp/totp.action.ts @@ -2,8 +2,7 @@ import { Action } from '@ngrx/store'; import { RESTError } from 'packages/core/rest/error'; -import { DomainMember } from 'packages/domain/model'; -import {Member} from "../../../../member/model"; +import { Member } from '../../../../member/model'; export enum ActionType { CreateTotp = '[member.totp] CreateTotp', @@ -18,7 +17,7 @@ export enum ActionType { export class CreateTotp implements Action { readonly type = ActionType.CreateTotp; - constructor(public payload: {key: string, uri: string}) {} + constructor(public payload: {member: Member}) {} } export class CreateTotpSuccess implements Action { diff --git a/src/packages/settings/member/store/totp/totp.effect.spec.ts b/src/packages/settings/member/store/totp/totp.effect.spec.ts index e69de29..30746b8 100644 --- a/src/packages/settings/member/store/totp/totp.effect.spec.ts +++ b/src/packages/settings/member/store/totp/totp.effect.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { Effects } from './totp.effect'; + +describe('ProbeList.Effects', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [Effects] + }); + }); + + it('should be created', inject([Effects], (effects: Effects) => { + expect(effects).toBeTruthy(); + })); +}); diff --git a/src/packages/settings/member/store/totp/totp.effect.ts b/src/packages/settings/member/store/totp/totp.effect.ts index e69de29..792f8ee 100644 --- a/src/packages/settings/member/store/totp/totp.effect.ts +++ b/src/packages/settings/member/store/totp/totp.effect.ts @@ -0,0 +1,81 @@ +import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Effect, Actions, ofType } from '@ngrx/effects'; +import { Action } from '@ngrx/store'; + +import { Observable } from 'rxjs/Observable'; +import { of } from 'rxjs/observable/of'; + +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/exhaustMap'; +import 'rxjs/add/operator/switchMap'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/take'; + +import { RESTError } from 'packages/core/rest/error'; +import { MemberTotpService } from '../../service/member-totp.service'; + +import { + CreateTotp, + CreateTotpSuccess, + CreateTotpFailure, + + Regist, + RegistSuccess, + RegistFailure, + + ActionType, +} from './totp.action'; + +@Injectable() +export class Effects { + private _returnURL: any; + + constructor( + private actions$: Actions, + private memberTotpService: MemberTotpService, + private router: Router + ) { } + + @Effect() + createTotp$: Observable = this.actions$ + .ofType(ActionType.CreateTotp) + .map((action: CreateTotp) => action.payload) + .switchMap(payload => { + // this._returnURL = payload.returnURL; + return this.memberTotpService.createTotp(payload.member); + }) + .map((result: any) => { + const key = result['key']; + const uri = result['uri']; + return new CreateTotpSuccess({key: key, uri: uri}); + }) + .catch((error: RESTError) => { + return of(new CreateTotpFailure(error)); + }); + + @Effect({ dispatch: false }) + createTotpSuccess$ = this.actions$ + .ofType(ActionType.CreateTotpSuccess) + .do(() => { + // Todo TOTP View Print + this.router.navigateByUrl(this._returnURL); + }); + + @Effect() + regist: Observable = this.actions$ + .ofType(ActionType.Regist) + .map((action: Regist) => action.payload) + .switchMap((payload) => { + // this._returnURL = payload.returnURL; + return this.memberTotpService.regist(payload.member, payload.secretCode, payload.code); + }) + .map((result: any) => { + return new RegistSuccess(result); + }) + .catch((error: RESTError) => { + return of(new RegistFailure(error)); + }); +} diff --git a/src/packages/settings/member/store/totp/totp.reducer.ts b/src/packages/settings/member/store/totp/totp.reducer.ts index e69de29..9df9ace 100644 --- a/src/packages/settings/member/store/totp/totp.reducer.ts +++ b/src/packages/settings/member/store/totp/totp.reducer.ts @@ -0,0 +1,71 @@ +import { + Actions, + ActionType, +} from './totp.action'; + +import { + State, + initialState, +} from './totp.state'; + +export function reducer(state = initialState, action: Actions): State { + switch (action.type) { + case ActionType.CreateTotp: { + return { + ...state, + error: null, + pending: true, + }; + } + + case ActionType.CreateTotpSuccess: { + const secretKey = action.payload.key; + const keyURI = action.payload.uri; + return { + ...state, + error: null, + pending: false, + secretKey: secretKey, + keyURI: keyURI, + }; + } + + case ActionType.CreateTotpFailure: { + return { + ...state, + error: action.payload, + pending: false, + secretKey: null, + keyURI: null, + }; + } + + case ActionType.Regist: { + return { + ...state, + error: null, + pending: true, + }; + } + + case ActionType.RegistSuccess: { + return { + ...state, + error: null, + pending: false, + }; + } + + case ActionType.RegistFailure: { + return { + ...state, + error: action.payload, + pending: false, + }; + } + + default: { + return state; + } + } +} diff --git a/src/packages/settings/member/store/totp/totp.state.ts b/src/packages/settings/member/store/totp/totp.state.ts index e69de29..fe28ff5 100644 --- a/src/packages/settings/member/store/totp/totp.state.ts +++ b/src/packages/settings/member/store/totp/totp.state.ts @@ -0,0 +1,15 @@ +import { RESTError } from 'packages/core/rest/error'; + +export interface State { + secretKey: string; + keyURI: string; + error: RESTError | null; + pending: boolean; +} + +export const initialState: State = { + secretKey: null, + keyURI: null, + error: null, + pending: false, +};