modify ing

src/app/pages/auth/auth-page-routing.module.ts

@@ -5,6 +5,7 @@ import { AuthPageComponent } from './auth-page.component';
 import { SigninPageComponent } from './signin/signin-page.component';
 import { SignupPageComponent } from './signup/signup-page.component';
 import { ResetPasswordPageComponent } from './reset-password/reset-password-page.component';
+import { ModifyPasswordPageComponent } from './reset-password/modify-password-page.component';
 
 const routes: Routes = [
   {
@@ -15,6 +16,7 @@ const routes: Routes = [
       { path: 'signin', component: SigninPageComponent },
       { path: 'signup', component: SignupPageComponent },
       { path: 'reset-password', component: ResetPasswordPageComponent },
+      { path: 'modify-password', component: ModifyPasswordPageComponent }
     ]
   }
 ];

src/app/pages/auth/auth-page.module.ts

@@ -9,12 +9,14 @@ import { AuthPageRoutingModule } from './auth-page-routing.module';
 import { SigninPageComponent } from './signin/signin-page.component';
 import { SignupPageComponent } from './signup/signup-page.component';
 import { ResetPasswordPageComponent } from './reset-password/reset-password-page.component';
+import {ModifyPasswordPageComponent} from './reset-password/modify-password-page.component';
 
 export const COMPONENTS = [
   AuthPageComponent,
   SigninPageComponent,
   SignupPageComponent,
   ResetPasswordPageComponent,
+  ModifyPasswordPageComponent,
 ];
 
 @NgModule({

src/app/pages/auth/reset-password/modify-password-page.component.html

@@ -0,0 +1 @@
+<of-member-modify-password></of-member-modify-password>

src/app/pages/auth/reset-password/modify-password-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModifyPasswordPageComponent } from './modify-password-page.component';
+
+describe('ModifyPasswordPageComponent', () => {
+  let component: ModifyPasswordPageComponent;
+  let fixture: ComponentFixture<ModifyPasswordPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModifyPasswordPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModifyPasswordPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/auth/reset-password/modify-password-page.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Form, FormBuilder, FormGroup, FormGroupDirective, FormControl, NgForm, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'of-pages-modify-password',
+  templateUrl: './modify-password-page.component.html',
+})
+export class ModifyPasswordPageComponent implements OnInit {
+  toenURL: string;
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+  ) { }
+
+  ngOnInit() {
+    this.toenURL = this.activatedRoute.snapshot.queryParams['token'];
+  }
+
+}

src/app/pages/auth/signin/signin-page.component.ts

@@ -9,7 +9,6 @@ import { Form, FormBuilder, FormGroup, FormGroupDirective, FormControl, NgForm,
 })
 export class SigninPageComponent implements OnInit {
 
-  signInForm: FormGroup;
   returnURL: string;
 
   constructor(
@@ -20,8 +19,4 @@ export class SigninPageComponent implements OnInit {
   ngOnInit() {
     this.returnURL = this.activatedRoute.snapshot.queryParams['returnURL'] || '/';
   }
-
-  initForm() {
-  }
-
 }

src/packages/member/component/index.ts

@@ -5,12 +5,14 @@ import { ResetPasswordComponent } from './reset-password/reset-password.componen
 import { SETTINGS_COMPONENTS } from './settings';
 import { PolicyComponent } from './policy/policy.component';
 import { TermsComponent } from './terms/terms.component';
+import { ModifyPasswordComponent } from './reset-password/modify-password.component';
 
 export const COMPONENTS = [
   ProfileComponent,
   SigninComponent,
   SignupComponent,
   ResetPasswordComponent,
+  ModifyPasswordComponent,
   PolicyComponent,
   TermsComponent,
   SETTINGS_COMPONENTS,

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

@@ -0,0 +1,46 @@
+<form [formGroup]="modifyPwForm" (ngSubmit)="modifyPw()">
+  <table class="login-table">
+    <tr>
+      <td>
+        <div class="card login-panel ui-fluid">
+          <div class="ui-g">
+            <div class="ui-g-12">
+              <img src="assets/layout/images/overFlow_CI_blue_185.png">
+            </div>
+            <div class="ui-g-12">
+              <span class="md-inputfield">
+                  <input type="password"
+                         id="pw"
+                         autocomplete="off" placeholder="password"
+                         formControlName="pw"
+                         required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+              </span>
+              <div *ngIf="formErrors.pw" class="help is-danger">
+                {{ formErrors.pw }}
+              </div>
+            </div>
+            <div class="ui-g-12">
+              <span class="md-inputfield">
+                  <input type="password"
+                         id="confirmPw"
+                         autocomplete="off" placeholder="confirm password"
+                         formControlName="confirmPw"
+                         required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+              </span>
+              <div *ngIf="formErrors.confirmPw" class="help is-danger">
+                {{ formErrors.confirmPw }}
+              </div>
+            </div>
+            <div class="ui-g-12">
+              <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">Confirm</span>
+              </button>
+              <a href="javascript:void(0)" (click)="signinBtn()">Signin</a>
+            </div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </table>
+</form>

src/packages/member/component/reset-password/modify-password.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModifyPasswordComponent } from './modify-password-page.component';
+
+describe('ModifyPasswordPageComponent', () => {
+  let component: ModifyPasswordComponent;
+  let fixture: ComponentFixture<ModifyPasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModifyPasswordComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModifyPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/packages/member/component/reset-password/modify-password.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators  } from '@angular/forms';
+import * as ModifyPasswordStore from '../../store/reset-password';
+import {select, Store} from '@ngrx/store';
+import { ResetPasswordSelector } from '../../store';
+
+@Component({
+  selector: 'of-member-modify-password',
+  templateUrl: './modify-password.component.html',
+})
+export class ModifyPasswordComponent implements OnInit {
+
+  modifyPwForm: FormGroup;
+  tokenURL: string;
+  formErrors = {
+    'pw': '',
+    'confirmPw': ''
+  };
+
+  constructor(
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private formBuilder: FormBuilder,
+    private modifyPasswordStore: Store<ModifyPasswordStore.State>,
+  ) { }
+
+  ngOnInit() {
+    this.tokenURL = this.activatedRoute.snapshot.queryParams['token'];
+    console.log(this.tokenURL);
+    this.initForm();
+  }
+
+  initForm() {
+    this.modifyPwForm = this.formBuilder.group({
+      'pw': [
+        '',
+        [
+          // Validators.required,
+        ]
+      ],
+      'confirmPw': [
+        '',
+        [
+          // Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
+          // Validators.minLength(6),
+          // Validators.maxLength(25)
+        ]
+      ],
+    });
+
+  }
+
+  modifyPw() {
+    const modifyPwValue = Object.assign({}, this.modifyPwForm.value);
+    const m = {token: this.tokenURL, pw: modifyPwValue.pw, confirmPw: modifyPwValue.confirmPw};
+    this.modifyPasswordStore.dispatch(new ModifyPasswordStore.ModifyPassword(m));
+  }
+
+  signinBtn() {
+    this.router.navigateByUrl('/auth/signin');
+  }
+}

src/packages/member/component/signin/signin.component.html

@@ -1,4 +1,3 @@
-
 <form [formGroup]="signinForm" (ngSubmit)="signin()">
     <table class="login-table">
         <tr>

src/packages/member/component/signin/signin.component.ts

@@ -88,4 +88,5 @@ export class SigninComponent implements OnInit {
     this.store.dispatch(new AuthStore.Signin(signinValue));
     console.log('signin component signin fnc');
   }
+
 }

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

@@ -50,6 +50,21 @@ export class MemberService {
   }
 
   public sendEmailResetPassword(email: string): Observable<Member> {
-    return this.rpcService.call<Member>('MemberService.sendEmailForPassword', email);
+    // return this.rpcService.call<Member>('MemberService.sendEmailForPassword', email);
+    return this.restService.request<Member>('post', '/account/send_email_pw', {
+      body: {
+        signinID: email,
+      },
+    });
+  }
+  public resetPassword(token: string, pw: string, confirmPw: string): Observable<Member> {
+    // return this.rpcService.call<Member>('MemberService.sendEmailForPassword', email);
+    return this.restService.request<Member>('post', '/account/reset_password', {
+      body: {
+        token: token,
+        pw: pw,
+        confirmPw: confirmPw,
+      },
+    });
   }
 }

src/packages/member/store/reset-password/reset-password.action.ts

@@ -32,4 +32,32 @@ export type Actions =
   | ResetPassword
   | ResetPasswordSuccess
   | ResetPasswordFailure
+  | ModifyPassword
+  | ModifyPasswordSuccess
+  | ModifyPasswordFailure
 ;
+
+
+export enum ActionType {
+  ModifyPassword = '[member.modifyPassword] ModifyPassword',
+  ModifyPasswordSuccess = '[member.modifyPassword] ModifyPasswordSuccess',
+  ModifyPasswordFailure = '[member.modifyPassword] ModifyPasswordFailure',
+}
+
+export class ModifyPassword implements Action {
+  readonly type = ActionType.ModifyPassword;
+
+  constructor(public payload: { token: string, pw: string, confirmPw: string } ) {}
+}
+
+export class ModifyPasswordSuccess implements Action {
+  readonly type = ActionType.ModifyPasswordSuccess;
+
+  constructor(public payload: Member) {}
+}
+
+export class ModifyPasswordFailure implements Action {
+  readonly type = ActionType.ModifyPasswordFailure;
+
+  constructor(public payload: RESTClientError) {}
+}

src/packages/member/store/reset-password/reset-password.effect.ts

@@ -19,6 +19,9 @@ import {
   ResetPassword,
   ResetPasswordSuccess,
   ResetPasswordFailure,
+  ModifyPassword,
+  ModifyPasswordSuccess,
+  ModifyPasswordFailure,
   ActionType
 } from './reset-password.action';
 
@@ -42,6 +45,17 @@ export class Effects {
         .catch(error => of(new ResetPasswordFailure(error)))
     );
 
+  @Effect()
+  ModifyPassword$: Observable<Action> = this.actions$
+    .ofType(ActionType.ModifyPassword)
+    .map((action: ModifyPassword) => action.payload)
+    .exhaustMap(payload =>
+      this.memberService
+        .resetPassword(payload.token, payload.pw, payload.confirmPw)
+        .map(_member => new ModifyPasswordSuccess(_member))
+        .catch(error => of(new ModifyPasswordFailure(error)))
+    );
+  //
   // @Effect({ dispatch: false })
   // ResetPasswordSuccess$ = this.actions$
   //   .ofType(ActionType.ResetPasswordSuccess)

src/packages/member/store/reset-password/reset-password.reducer.ts

@@ -36,8 +36,35 @@ export function reducer(state = initialState, action: Actions): State {
       };
     }
 
+    case ActionType.ModifyPassword: {
+      return {
+        ...state,
+        error: null,
+        pending: true,
+      };
+    }
+
+    case ActionType.ModifyPasswordSuccess: {
+      return {
+        ...state,
+        error: null,
+        pending: false,
+        member: action.payload,
+      };
+    }
+
+    case ActionType.ModifyPasswordFailure: {
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        member: null,
+      };
+    }
+
     default: {
       return state;
     }
   }
 }
+