From bd14f400b6e29d0703f380afd3c077b0733ea1bc Mon Sep 17 00:00:00 2001 From: geek Date: Thu, 3 May 2018 19:33:19 +0900 Subject: [PATCH] modify ing --- .../component/profile/profile.component.ts | 1 - .../reset-password.component.html | 10 ++-- .../reset-password.component.ts | 25 ++++++++++ src/packages/member/service/member.service.ts | 4 ++ src/packages/member/store/index.ts | 14 ++++-- .../member/store/reset-password/index.ts | 5 ++ .../reset-password/reset-password.action.ts | 35 +++++++++++++ .../reset-password.effect.spec.ts | 15 ++++++ .../reset-password/reset-password.effect.ts | 50 +++++++++++++++++++ .../reset-password/reset-password.reducer.ts | 43 ++++++++++++++++ .../reset-password/reset-password.state.ts | 15 ++++++ 11 files changed, 208 insertions(+), 9 deletions(-) create mode 100644 src/packages/member/store/reset-password/index.ts create mode 100644 src/packages/member/store/reset-password/reset-password.action.ts create mode 100644 src/packages/member/store/reset-password/reset-password.effect.spec.ts create mode 100644 src/packages/member/store/reset-password/reset-password.effect.ts create mode 100644 src/packages/member/store/reset-password/reset-password.reducer.ts create mode 100644 src/packages/member/store/reset-password/reset-password.state.ts diff --git a/src/packages/member/component/profile/profile.component.ts b/src/packages/member/component/profile/profile.component.ts index b8e7ac5..c695174 100644 --- a/src/packages/member/component/profile/profile.component.ts +++ b/src/packages/member/component/profile/profile.component.ts @@ -10,7 +10,6 @@ import { AuthSelector } from '../../store'; import { Store, select } from '@ngrx/store'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ModifySelector } from '../../store'; -import { Subscription } from 'rxjs/Subscription'; import { RPCClientError } from '@loafer/ng-rpc/protocol'; diff --git a/src/packages/member/component/reset-password/reset-password.component.html b/src/packages/member/component/reset-password/reset-password.component.html index 322f445..cc940ce 100644 --- a/src/packages/member/component/reset-password/reset-password.component.html +++ b/src/packages/member/component/reset-password/reset-password.component.html @@ -15,15 +15,15 @@
- - Sign In - | - Sign Up + Sign In + | + Sign Up
- \ No newline at end of file + diff --git a/src/packages/member/component/reset-password/reset-password.component.ts b/src/packages/member/component/reset-password/reset-password.component.ts index 15b6f8c..88a75b6 100644 --- a/src/packages/member/component/reset-password/reset-password.component.ts +++ b/src/packages/member/component/reset-password/reset-password.component.ts @@ -1,6 +1,11 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; +import * as ResetPasswordStore from '../../store/reset-password'; +import {select, Store} from '@ngrx/store'; +import { ResetPasswordSelector } from '../../store'; +import {RPCClientError} from '../../../../@loafer/ng-rpc/protocol'; +import {Member} from '@overflow/commons-typescript/model/member/index'; @Component({ selector: 'of-member-reset-password', @@ -8,12 +13,15 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms'; }) export class ResetPasswordComponent implements OnInit { + resetPassword$ = this.resetPasswordStore.pipe(select(ResetPasswordSelector.select('member'))); + resetPassword: FormGroup; formErrors = { 'email': '' }; constructor( + private resetPasswordStore: Store, private router: Router, private formBuilder: FormBuilder) { } @@ -28,6 +36,23 @@ export class ResetPasswordComponent implements OnInit { } sendResetPassword() { + const emailValue = Object.assign({}, this.resetPassword.value); + console.log(emailValue.email); + this.resetPasswordStore.dispatch(new ResetPasswordStore.ResetPassword(emailValue.email)); + const resetPasswordSubscription$ = this.resetPassword$.subscribe( + (m: Member) => { + if (m) { + console.log(m); + } + + if (resetPasswordSubscription$) { + resetPasswordSubscription$.unsubscribe(); + } + }, + (error: RPCClientError) => { + console.log(error.response.message); + } + ); } } diff --git a/src/packages/member/service/member.service.ts b/src/packages/member/service/member.service.ts index 1409839..d9f1685 100644 --- a/src/packages/member/service/member.service.ts +++ b/src/packages/member/service/member.service.ts @@ -48,4 +48,8 @@ export class MemberService { public modify(member: Member): Observable { return this.rpcService.call('MemberService.modify', member, ''); } + + public sendEmailResetPassword(email: string): Observable { + return this.rpcService.call('MemberService.sendEmailForPassword', email); + } } diff --git a/src/packages/member/store/index.ts b/src/packages/member/store/index.ts index 9238dc5..637e61d 100644 --- a/src/packages/member/store/index.ts +++ b/src/packages/member/store/index.ts @@ -1,8 +1,6 @@ import { createSelector, createFeatureSelector, - ActionReducerMap, - Selector, } from '@ngrx/store'; import { StateSelector } from 'packages/core/ngrx/store'; @@ -13,12 +11,14 @@ import * as AuthStore from './auth'; import * as SignupStore from './signup'; import * as TotpStore from './totp'; import * as ModifyStore from './modify'; +import * as ResetPasswordStore from './reset-password'; export interface State { auth: AuthStore.State; signup: SignupStore.State; totp: TotpStore.State; modify: ModifyStore.State; + resetPassword: ResetPasswordStore.State; } export const REDUCERS = { @@ -26,13 +26,15 @@ export const REDUCERS = { signup: SignupStore.reducer, totp: TotpStore.reducer, modify: ModifyStore.reducer, + resetPassword: ResetPasswordStore.reducer, }; export const EFFECTS = [ AuthStore.Effects, SignupStore.Effects, TotpStore.Effects, - ModifyStore.Effects + ModifyStore.Effects, + ResetPasswordStore.Effects, ]; export const selectMemberState = createFeatureSelector(MODULE.name); @@ -56,3 +58,9 @@ export const ModifySelector = new StateSelector(createSelecto selectMemberState, (state: State) => state.modify )); + +export const ResetPasswordSelector = new StateSelector(createSelector( + selectMemberState, + (state: State) => state.resetPassword +)); + diff --git a/src/packages/member/store/reset-password/index.ts b/src/packages/member/store/reset-password/index.ts new file mode 100644 index 0000000..ee04fbb --- /dev/null +++ b/src/packages/member/store/reset-password/index.ts @@ -0,0 +1,5 @@ +export * from './reset-password.action'; +export * from './reset-password.effect'; +export * from './reset-password.reducer'; +export * from './reset-password.state'; + diff --git a/src/packages/member/store/reset-password/reset-password.action.ts b/src/packages/member/store/reset-password/reset-password.action.ts new file mode 100644 index 0000000..67dd341 --- /dev/null +++ b/src/packages/member/store/reset-password/reset-password.action.ts @@ -0,0 +1,35 @@ +import { Action } from '@ngrx/store'; + +import { RESTClientError } from '@loafer/ng-rest/protocol'; + +import { Member } from '@overflow/commons-typescript/model/member'; + +export enum ActionType { + ResetPassword = '[member.resetPassword] ResetPassword', + ResetPasswordSuccess = '[member.resetPassword] ResetPasswordSuccess', + ResetPasswordFailure = '[member.resetPassword] ResetPasswordFailure', +} + +export class ResetPassword implements Action { + readonly type = ActionType.ResetPassword; + + constructor(public payload: string ) {} +} + +export class ResetPasswordSuccess implements Action { + readonly type = ActionType.ResetPasswordSuccess; + + constructor(public payload: Member) {} +} + +export class ResetPasswordFailure implements Action { + readonly type = ActionType.ResetPasswordFailure; + + constructor(public payload: RESTClientError) {} +} + +export type Actions = + | ResetPassword + | ResetPasswordSuccess + | ResetPasswordFailure +; diff --git a/src/packages/member/store/reset-password/reset-password.effect.spec.ts b/src/packages/member/store/reset-password/reset-password.effect.spec.ts new file mode 100644 index 0000000..59f5118 --- /dev/null +++ b/src/packages/member/store/reset-password/reset-password.effect.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { Effects } from './reset-password.effect'; + +describe('ResetPassword.Effects', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [Effects] + }); + }); + + it('should be created', inject([Effects], (effects: Effects) => { + expect(effects).toBeTruthy(); + })); +}); diff --git a/src/packages/member/store/reset-password/reset-password.effect.ts b/src/packages/member/store/reset-password/reset-password.effect.ts new file mode 100644 index 0000000..555b754 --- /dev/null +++ b/src/packages/member/store/reset-password/reset-password.effect.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; + +import { Effect, Actions } 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/map'; +import 'rxjs/add/operator/take'; + +import { MemberService } from '../../service/member.service'; + +import { + ResetPassword, + ResetPasswordSuccess, + ResetPasswordFailure, + ActionType +} from './reset-password.action'; + +@Injectable() +export class Effects { + + constructor( + private actions$: Actions, + private memberService: MemberService, + private router: Router + ) { } + + @Effect() + ResetPassword$: Observable = this.actions$ + .ofType(ActionType.ResetPassword) + .map((action: ResetPassword) => action.payload) + .exhaustMap(payload => + this.memberService + .sendEmailResetPassword(payload) + .map(_member => new ResetPasswordSuccess(_member)) + .catch(error => of(new ResetPasswordFailure(error))) + ); + + // @Effect({ dispatch: false }) + // ResetPasswordSuccess$ = this.actions$ + // .ofType(ActionType.ResetPasswordSuccess) + // .do(() => this.router.navigate(['/'])); + +} diff --git a/src/packages/member/store/reset-password/reset-password.reducer.ts b/src/packages/member/store/reset-password/reset-password.reducer.ts new file mode 100644 index 0000000..d027272 --- /dev/null +++ b/src/packages/member/store/reset-password/reset-password.reducer.ts @@ -0,0 +1,43 @@ +import { + Actions, + ActionType, +} from './reset-password.action'; + +import { + State, + initialState, +} from './reset-password.state'; + +export function reducer(state = initialState, action: Actions): State { + switch (action.type) { + case ActionType.ResetPassword: { + return { + ...state, + error: null, + pending: true, + }; + } + + case ActionType.ResetPasswordSuccess: { + return { + ...state, + error: null, + pending: false, + member: action.payload, + }; + } + + case ActionType.ResetPasswordFailure: { + return { + ...state, + error: action.payload, + pending: false, + member: null, + }; + } + + default: { + return state; + } + } +} diff --git a/src/packages/member/store/reset-password/reset-password.state.ts b/src/packages/member/store/reset-password/reset-password.state.ts new file mode 100644 index 0000000..e987617 --- /dev/null +++ b/src/packages/member/store/reset-password/reset-password.state.ts @@ -0,0 +1,15 @@ +import { RESTClientError } from '@loafer/ng-rest/protocol'; + +import { Member } from '@overflow/commons-typescript/model/member'; + +export interface State { + error: RESTClientError | null; + pending: boolean; + member: Member | null; +} + +export const initialState: State = { + error: null, + pending: false, + member: null, +};