modify ing

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';
 
 

src/packages/member/component/reset-password/reset-password.component.html

@@ -15,14 +15,14 @@
             </div>
 
             <div class="ui-g-12">
-                <button  (click)="sendResetPassword()" type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                <button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
                     <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>
                     <span class="ui-button-text ui-c">Reset Password</span>
                 </button>
 
-                <a href="#" (click)="signinBtnClick()">Sign In</a>
+                <a href="/auth/signin" >Sign In</a>
                 |
-                <a href="#" (click)="signupBtnClick()">Sign Up</a>
+                <a href="/auth/signup" >Sign Up</a>
             </div>
         </div>
     </div>

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<ResetPasswordStore.State>,
     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);
+      }
+    );
   }
 }

src/packages/member/service/member.service.ts

@@ -48,4 +48,8 @@ export class MemberService {
   public modify(member: Member): Observable<Member> {
     return this.rpcService.call<Member>('MemberService.modify', member, '');
   }
+
+  public sendEmailResetPassword(email: string): Observable<Member> {
+    return this.rpcService.call<Member>('MemberService.sendEmailForPassword', email);
+  }
 }

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<State>(MODULE.name);
@@ -56,3 +58,9 @@ export const ModifySelector = new StateSelector<ModifyStore.State>(createSelecto
   selectMemberState,
   (state: State) => state.modify
 ));
+
+export const ResetPasswordSelector = new StateSelector<ResetPasswordStore.State>(createSelector(
+  selectMemberState,
+  (state: State) => state.resetPassword
+));
+

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';
+

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
+;

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();
+  }));
+});

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<Action> = 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(['/']));
+
+}

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;
+    }
+  }
+}

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,
+};