modify ing
This commit is contained in:
		
							parent
							
								
									da2c9e2830
								
							
						
					
					
						commit
						6a45d012b3
					
				| @ -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 } | ||||
|     ] | ||||
|   } | ||||
| ]; | ||||
|  | ||||
| @ -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({ | ||||
|  | ||||
| @ -0,0 +1 @@ | ||||
| <of-member-modify-password></of-member-modify-password> | ||||
| @ -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(); | ||||
|   }); | ||||
| }); | ||||
| @ -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']; | ||||
|   } | ||||
| 
 | ||||
| } | ||||
| @ -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() { | ||||
|   } | ||||
| 
 | ||||
| } | ||||
|  | ||||
| @ -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, | ||||
|  | ||||
| @ -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> | ||||
| @ -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(); | ||||
|   }); | ||||
| }); | ||||
| @ -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'); | ||||
|   } | ||||
| } | ||||
| @ -1,4 +1,3 @@ | ||||
| 
 | ||||
| <form [formGroup]="signinForm" (ngSubmit)="signin()"> | ||||
|     <table class="login-table"> | ||||
|         <tr> | ||||
|  | ||||
| @ -88,4 +88,5 @@ export class SigninComponent implements OnInit { | ||||
|     this.store.dispatch(new AuthStore.Signin(signinValue)); | ||||
|     console.log('signin component signin fnc'); | ||||
|   } | ||||
| 
 | ||||
| } | ||||
|  | ||||
| @ -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, | ||||
|       }, | ||||
|     }); | ||||
|   } | ||||
| } | ||||
|  | ||||
| @ -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) {} | ||||
| } | ||||
|  | ||||
| @ -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)
 | ||||
|  | ||||
| @ -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; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user