ing

2018-05-31 19:20:14 +09:00 · 2018-05-31 19:20:14 +09:00 · 9b7a852d1c
commit 9b7a852d1c
parent dd21157d5c
30 changed files with 619 additions and 96 deletions
--- a/@overflow/member/component/member-confirm-reset-password.component.html
+++ b/@overflow/member/component/member-confirm-reset-password.component.html
@ -1,3 +1,32 @@
-<div>
-  Your email has been verified. When you click the link button below, it goes to the password change screen.
+<div class="ui-g" *ngIf="emailAuth$ | async">
+  <div class="ui-g-12">
+    <table class="login-table">
+      <tr>
+        <td>
+          <div class="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 ui-g-padding-15">
+                <strong>이메일 인증이 완료 되었습니다.</strong>
+              </div>
+              <div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
+                <p>패스워드 변경 화면으로 이동 후 패스워드 변경을 완료해주세요.</p>
+              </div>
+              <div class="ui-g-12 ui-g-padding-15">
+                <button
+                  type="button"
+                  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
+                  (click)="onModifyPassword()">
+                  <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
+                  <span class="ui-button-text ui-c">Go to Reset Password</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </div>
 </div>
--- a/@overflow/member/component/member-confirm-reset-password.component.ts
+++ b/@overflow/member/component/member-confirm-reset-password.component.ts
@ -1,11 +1,49 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+import {FormBuilder} from '@angular/forms';
+import {EmailAuthService} from '../service/email-auth.service';
+import {EmailAuth} from '@overflow/commons-typescript/model/email/EmailAuth';

@Component({
  selector: 'of-member-confirm-reset-password',
  templateUrl: './member-confirm-reset-password.component.html',
 })
 export class MemberConfirmResetPasswordComponent implements OnInit {
-  constructor() { }
+  emailAuth$: Observable<EmailAuth>;
+  pending$: Observable<boolean>;
+  error$: Observable<any>;
+
+  @Input() token: string;
+  @Output() signin = new EventEmitter();
+  @Output() modifyPassword = new EventEmitter();
+
+  constructor(
+    private store: Store<any>,
+    private formBuilder: FormBuilder,
+    private emailAuthService: EmailAuthService,
+  ) { }
  ngOnInit(): void {
+    this.emailAuthService.readByPwAuthKey(this.token)
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((emailAuth: EmailAuth) => {
+          this.emailAuth$ = of(emailAuth);
+        }),
+        catchError( err => {
+          this.error$ = of(err);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+      ).take(1).subscribe();
+  }
+
+  onModifyPassword() {
+    this.modifyPassword.emit();
  }
 }
--- a/@overflow/member/component/member-confirm-signup.component.html
+++ b/@overflow/member/component/member-confirm-signup.component.html
@ -1,3 +1,33 @@
-<div>
-  Your email has been verified. Go to signin when you click the link button below.
+<div class="ui-g" *ngIf="emailAuth$ | async">
+  <div class="ui-g-12">
+    <table class="login-table">
+      <tr>
+        <td>
+          <div class="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 ui-g-padding-15">
+                <strong>회원 가입이 완료 되었습니다.</strong>
+              </div>
+              <div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
+                <p>회원가입을 감사 드립니다.</p>
+                <p>아래 로그인 버튼 클릭 후 로그인을 이용하여 서비스를 이용해주세요.</p>
+              </div>
+              <div class="ui-g-12 ui-g-padding-15">
+                <button
+                  type="button"
+                  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
+                  (click)="onSignin()">
+                  <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
+                  <span class="ui-button-text ui-c">Go to Sign In</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </div>
 </div>
--- a/@overflow/member/component/member-confirm-signup.component.ts
+++ b/@overflow/member/component/member-confirm-signup.component.ts
@ -1,11 +1,48 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+import {FormBuilder} from '@angular/forms';
+import {EmailAuthService} from '../service/email-auth.service';
+import {EmailAuth} from '@overflow/commons-typescript/model/email/EmailAuth';

@Component({
  selector: 'of-member-confirm-signup',
  templateUrl: './member-confirm-signup.component.html',
 })
 export class MemberConfirmSignupComponent implements OnInit {
-  constructor() { }
+  @Input() token: string;
+  @Output() signin = new EventEmitter();
+
+  emailAuth$: Observable<EmailAuth>;
+  pending$: Observable<boolean>;
+  error$: Observable<any>;
+
+  constructor(
+    private store: Store<any>,
+    private formBuilder: FormBuilder,
+    private emailAuthService: EmailAuthService,
+  ) { }
  ngOnInit(): void {
+    this.emailAuthService.readBySignupAuthKey(this.token)
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((emailAuth: EmailAuth) => {
+          this.emailAuth$ = of(emailAuth);
+        }),
+        catchError( err => {
+          this.error$ = of(err);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+      ).take(1).subscribe();
+  }
+
+  onSignin() {
+    this.signin.emit();
  }
 }
--- a/@overflow/member/component/member-modify-password.component.html
+++ b/@overflow/member/component/member-modify-password.component.html
@ -1,3 +1,4 @@
+<ng-template #complete>
 <div class="ui-g" *ngIf="!member">
    <div class="ui-g-12">
        <form [formGroup]="modifyPasswordForm" (ngSubmit)="modifyPasswordFormSubmit()">
@ -51,7 +52,38 @@
          </form>
    </div>
 </div>
-
-<div class="ui-g" *ngIf="!member">
-  Password Modify Complete
+</ng-template>
+<div class="ui-g" *ngIf="member$ | async as member; else complete">
+  <div class="ui-g-12">
+    <table class="login-table">
+      <tr>
+        <td>
+          <div class="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 ui-g-padding-15">
+                <strong>패스워드 변경이 완료 되었습니다.</strong>
+              </div>
+              <div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
+                <p>입력하신 패스워드로 변경 되었으며,</p>
+                <p>로그인 페이지로 이동 후 변경된 패스워드로 로그인을 하시면 됩니다.</p>
+                <p>버튼 클릭 시 로그인 페이지로 이동 합니다.</p>
+              </div>
+              <div class="ui-g-12 ui-g-padding-15">
+                <button
+                  type="button"
+                  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
+                  (click)="onSignin()">
+                  <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
+                  <span class="ui-button-text ui-c">Go to Sign In</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </div>
 </div>
--- a/@overflow/member/component/member-modify-password.component.ts
+++ b/@overflow/member/component/member-modify-password.component.ts
@ -1,16 +1,26 @@
 import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
 import {FormGroup, FormBuilder, Validators, FormControl, ValidationErrors, AbstractControl} from '@angular/forms';
 import { Member } from '@overflow/commons-typescript/model/member';
+import { Store, select } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
+import { MemberService } from '../service/member.service';
+

@Component({
  selector: 'of-member-modify-password',
  templateUrl: './member-modify-password.component.html',
 })
 export class MemberModifyPasswordComponent implements OnInit {
-  @Input() token: string;
-  @Input() member: Member;
+  member$: Observable<Member>;
+  pending$: Observable<boolean>;
+  error$: Observable<any>;

-  @Output() modifyPassword = new EventEmitter<{token: string, password: string, confirmPassword: string}>();
+  @Input() token: string;
+  // @Input() member: Member;
+
+  // @Output() modifyPassword = new EventEmitter<{token: string, password: string, confirmPassword: string}>();
  @Output() signin = new EventEmitter();

  modifyPasswordForm: FormGroup;
@ -18,7 +28,9 @@ export class MemberModifyPasswordComponent implements OnInit {
  pwConfirm: AbstractControl;

  constructor(
+    private store: Store<any>,
    private formBuilder: FormBuilder,
+    private memberService: MemberService,
  ) { }

  ngOnInit() {
@ -63,7 +75,23 @@ export class MemberModifyPasswordComponent implements OnInit {

  modifyPasswordFormSubmit() {
    const formValue = Object.assign({}, this.modifyPasswordForm.value);
-    this.modifyPassword.emit({token: this.token, password: formValue.pw, confirmPassword: formValue.confirmPw});
+    // this.modifyPassword.emit({token: this.token, password: formValue.pw, confirmPassword: formValue.confirmPw});
+    this.memberService.resetPassword(this.token, formValue.password, formValue.pwConfirm)
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((rmember: Member) => {
+          this.member$ = of(rmember);
+        }),
+        catchError( err => {
+          this.error$ = of(err);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+      ).take(1).subscribe();
  }

  onSignin() {
--- a/@overflow/member/component/member-reset-password.component.html
+++ b/@overflow/member/component/member-reset-password.component.html
@ -1,4 +1,5 @@
-<div class="ui-g" *ngIf="!member">
+<ng-template #complete>
+  <div class="ui-g">
      <div class="ui-g-12">
          <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPasswordSubmit()">
              <table class="login-table">
@ -12,7 +13,14 @@
                                  </div>
                                  <div class="ui-g-12">
                                      <span class="md-inputfield">
-                                        <input type="email" id="email" autocomplete="off" placeholder="Please enter your email" formControlName="email" required class="ui-inputtext ui-corner-all ui-state-default ui-widget">
+                                          <input
+                                            type="email"
+                                            id="email"
+                                            autocomplete="off"
+                                            placeholder="Please enter your email"
+                                            formControlName="email"
+                                            required
+                                            class="ui-inputtext ui-corner-all ui-state-default ui-widget">
                                      </span>
                                      <div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
                                        Invalid email
@ -21,8 +29,9 @@

                                  <div class="ui-g-12">
                                      <button
+                                        type="submit"
                                        [disabled]="!resetPasswordForm.valid"
-                                            type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                                        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-cached"></span>
                                          <span class="ui-button-text ui-c">Reset Password</span>
                                      </button>
@ -40,6 +49,38 @@
      </div>

  </div>
-<div class="ui-g" *ngIf="member">
-  I sent an authentication mail to the mail address you registered. Please check and change your password.
+</ng-template>
+<div class="ui-g" *ngIf="member$ | async as member; else complete">
+  <div class="ui-g-12">
+    <table class="login-table">
+      <tr>
+        <td>
+          <div class="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 ui-g-padding-15">
+                <strong>패스워드 변경이 신청 되었습니다.</strong>
+              </div>
+              <div class="ui-g-12 ui-g-padding-15" style="text-align: left !important">
+                <p>입력하신 이메일로 인증 메일이 발송 되었습니다.</p>
+                <p>받으신 <strong>메일을 확인</strong> 하시고, <strong>인증을 완료</strong> 하시면 패스워드 변경페이지로 이동 후 변경이 가능합니다.</p>
+                <p>신청하신 이메일 주소는 <strong>{{member.email}}</strong> 입니다.</p>
+              </div>
+              <!--<div class="ui-g-12 ui-g-padding-15">-->
+                <!--<button-->
+                  <!--type="button"-->
+                  <!--class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"-->
+                  <!--(click)="onModifyPassword()">-->
+                  <!--<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>-->
+                  <!--<span class="ui-button-text ui-c">Go to Sign In</span>-->
+                <!--</button>-->
+              <!--</div>-->
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </div>
 </div>
--- a/@overflow/member/component/member-reset-password.component.ts
+++ b/@overflow/member/component/member-reset-password.component.ts
@ -10,24 +10,34 @@ import {
  Validators,
  AbstractControl
 } from '@angular/forms';
+import { Store, select } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+
 import {Member} from '@overflow/commons-typescript/model/member';
+import {MemberService} from '../service/member.service';

@Component({
  selector: 'of-member-reset-password',
  templateUrl: './member-reset-password.component.html',
 })
 export class MemberResetPasswordComponent implements OnInit {
-  @Output() resetPassword = new EventEmitter<string>();
+  // @Output() resetPassword = new EventEmitter<string>();
  @Output() signin = new EventEmitter();
  @Output() signup = new EventEmitter();

-  @Input() member: Member;
+  // @Input() member: Member;
+  member$: Observable<Member>;
+  pending$: Observable<boolean>;
+  error$: Observable<any>;

  resetPasswordForm: FormGroup;
  email: AbstractControl;

  constructor(
-    private formBuilder: FormBuilder
+    private store: Store<any>,
+    private formBuilder: FormBuilder,
+    private memberService: MemberService,
  ) {
  }

@ -45,7 +55,23 @@ export class MemberResetPasswordComponent implements OnInit {

  resetPasswordSubmit() {
    const formValue = Object.assign({}, this.resetPasswordForm.value);
-    this.resetPassword.emit(formValue.email);
+    // this.resetPassword.emit(formValue.email);
+    this.memberService.sendEmailResetPassword(formValue.email)
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((rmember: Member) => {
+          this.member$ = of(rmember);
+        }),
+        catchError( err => {
+          this.error$ = of(err);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+      ).take(1).subscribe();
  }

  onSignin() {
@ -55,4 +81,5 @@ export class MemberResetPasswordComponent implements OnInit {
  onSignup() {
    this.signup.emit();
  }
+
 }
--- a/@overflow/member/component/member-signup.component.html
+++ b/@overflow/member/component/member-signup.component.html
@ -17,7 +17,8 @@
  <of-member-policy (close)="policyDisplay = false"></of-member-policy>
 </p-dialog>

-<div class="ui-g" *ngIf="!member">
+<ng-template #complete>
+<div class="ui-g">
  <div class="ui-g-12">
    <form [formGroup]="signupForm" (ngSubmit)="signupFormSubmit()">
      <table class="login-table">
@ -165,9 +166,9 @@
    </form>
  </div>
 </div>
+</ng-template>

-
-<div class="ui-g" *ngIf="member">
+<div class="ui-g"  *ngIf="member$ | async as member; else complete">
  <div class="ui-g-12">
    <table class="login-table">
      <tr>
@ -186,7 +187,10 @@
                <p>신청하신 이메일 주소는 <strong>{{member.email}}</strong> 입니다.</p>
              </div>
              <div class="ui-g-12 ui-g-padding-15">
-                <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                <button
+                  type="button"
+                  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"
+                  (click)="onSignin()">
                  <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-home"></span>
                  <span class="ui-button-text ui-c">Go to Sign In</span>
                </button>
--- a/@overflow/member/component/member-signup.component.ts
+++ b/@overflow/member/component/member-signup.component.ts
@ -7,15 +7,22 @@ import {
 } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl, ValidationErrors } from '@angular/forms';
 import { Member } from '@overflow/commons-typescript/model/member';
+import { Store, select } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
+import {MemberService} from '../service/member.service';

@Component({
  selector: 'of-member-signup',
  templateUrl: './member-signup.component.html',
 })
 export class MemberSignupComponent implements OnInit, OnDestroy {
-  @Output() signup = new EventEmitter<{member: Member, password: string}>();
+  // @Output() signup = new EventEmitter<{member: Member, password: string}>();
+  @Output() signin = new EventEmitter();

-  @Input() member;
+  member$: Observable<Member>;
+  pending$: Observable<boolean>;
+  error$: Observable<any>;

  signupForm: FormGroup;
  email: AbstractControl;
@ -30,7 +37,9 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
  policyDisplay = false;

  constructor(
+    private store: Store<any>,
    private formBuilder: FormBuilder,
+    private memberService: MemberService,
  ) { }


@ -122,7 +131,22 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
      phone: signupValue.phone,
      companyName: signupValue.company,
    };
-    this.signup.emit({member: member, password: password});
+    this.memberService.signup(member, password)
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((rmember: Member) => {
+          this.member$ = of(rmember);
+        }),
+        catchError( err => {
+          this.error$ = of(err);
+          return of();
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+      ).take(1).subscribe();
  }

  termsDisplayOpen() {
@ -140,4 +164,8 @@ export class MemberSignupComponent implements OnInit, OnDestroy {
  onScriptError() {
    console.log('Something went long when loading the Google reCAPTCHA');
  }
+
+  onSignin() {
+    this.signin.emit();
+  }
 }
--- a/@overflow/member/container/member-confirm-reset-password-container.component.html
+++ b/@overflow/member/container/member-confirm-reset-password-container.component.html
@ -1 +1 @@
-<of-member-confirm-reset-password></of-member-confirm-reset-password>
+<!--<of-member-confirm-reset-password></of-member-confirm-reset-password>-->
--- a/@overflow/member/container/member-confirm-signup-container.component.html
+++ b/@overflow/member/container/member-confirm-signup-container.component.html
@ -1 +1 @@
-<of-member-confirm-signup></of-member-confirm-signup>
+<!--<of-member-confirm-signup></of-member-confirm-signup>-->
--- a/@overflow/member/container/member-modify-password-container.component.html
+++ b/@overflow/member/container/member-modify-password-container.component.html
@ -1,7 +1,7 @@
-<of-member-modify-password
-  [token]="token"
-  (modifyPassword)="modifyPassword($event)"
-  (signin)="onSignin()"
-  [member]="member$ | async"
->
-</of-member-modify-password>
+<!--<of-member-modify-password-->
+  <!--[token]="token"-->
+  <!--(modifyPassword)="modifyPassword($event)"-->
+  <!--(signin)="onSignin()"-->
+  <!--[member]="member$ | async"-->
+<!--&gt;-->
+<!--</of-member-modify-password>-->
--- a/@overflow/member/container/member-reset-password-container.component.html
+++ b/@overflow/member/container/member-reset-password-container.component.html
@ -1,7 +1,7 @@
-<of-member-reset-password
-  (resetPassword)="resetPassword($event)"
-  (signin)="onSignin()"
-  (signup)="onSignup()"
-  [member]="member$ | async"
->
-</of-member-reset-password>
+<!--<of-member-reset-password-->
+  <!--(resetPassword)="resetPassword($event)"-->
+  <!--(signin)="onSignin()"-->
+  <!--(signup)="onSignup()"-->
+  <!--[member]="member$ | async"-->
+<!--&gt;-->
+<!--</of-member-reset-password>-->
--- a/@overflow/member/container/member-signup-container.component.html
+++ b/@overflow/member/container/member-signup-container.component.html
@ -1 +1 @@
-<of-member-signup [member]="member$ | async" (signup)="onSignup($event)" ></of-member-signup>
+<!--<of-member-signup [member]="member$ | async" (signup)="onSignup($event)" ></of-member-signup>-->
--- a/@overflow/member/service/email-auth.service.ts
+++ b/@overflow/member/service/email-auth.service.ts
@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+
+import { RESTService } from '@loafer/ng-rest';
+
+@Injectable()
+export class EmailAuthService {
+
+  public constructor(
+    private restService: RESTService,
+  ) {}
+
+  public readBySignupAuthKey(token: string): Observable<any> {
+    return this.restService.request<any>('post', '/account/confirm_email', {
+      body: {
+        token: token,
+      },
+    });
+  }
+
+  public readByPwAuthKey(token: string): Observable<any> {
+    return this.restService.request<any>('post', '/account/confirm_reset_pw', {
+      body: {
+        token: token,
+      },
+    });
+  }
+}
--- a/@overflow/member/service/index.ts
+++ b/@overflow/member/service/index.ts
@ -1,7 +1,9 @@
 import { MemberService } from './member.service';
 import { MemberTotpService } from './member-totp.service';
+import { EmailAuthService } from './email-auth.service';

 export const SERVICES = [
  MemberService,
  MemberTotpService,
+  EmailAuthService,
 ];
--- a/@overflow/member/store/container/email-auth/email-auth.reducer.ts
+++ b/@overflow/member/store/container/email-auth/email-auth.reducer.ts
@ -0,0 +1,65 @@
+import {
+  Actions,
+  ActionType,
+} from '../../entity/member/member.action';
+
+import {
+  State,
+  initialState,
+} from './email-auth.state';
+
+export function reducer(state = initialState, action: Actions): State {
+  switch (action.type) {
+    case ActionType.ConfirmEmailForSignup: {
+      return {
+        emailAuth: null,
+        pending: true,
+        error: null,
+      };
+    }
+
+    case ActionType.ConfirmEmailForSignupSuccess: {
+      return {
+        emailAuth: action.payload,
+        pending: false,
+        error: null,
+      };
+    }
+
+    case ActionType.ConfirmEmailForSignupFailure: {
+      return {
+        emailAuth: null,
+        pending: false,
+        error: action.payload,
+      };
+    }
+
+    case ActionType.ConfirmEmailForPassword: {
+      return {
+        emailAuth: null,
+        pending: true,
+        error: null,
+      };
+    }
+
+    case ActionType.ConfirmEmailForPasswordSuccess: {
+      return {
+        emailAuth: action.payload,
+        pending: true,
+        error: null,
+      };
+    }
+
+    case ActionType.ConfirmEmailForPasswordFailure: {
+      return {
+        emailAuth: null,
+        pending: true,
+        error: action.payload,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+}
--- a/@overflow/member/store/container/email-auth/email-auth.state.ts
+++ b/@overflow/member/store/container/email-auth/email-auth.state.ts
@ -0,0 +1,23 @@
+import { Selector, createSelector } from '@ngrx/store';
+import { RESTClientError } from '@loafer/ng-rest';
+import { EmailAuth } from '@overflow/commons-typescript/model/email/EmailAuth';
+
+export interface State {
+  emailAuth: EmailAuth;
+  pending: boolean;
+  error: RESTClientError;
+}
+
+export const initialState: State = {
+  emailAuth: null,
+  pending: false,
+  error: null,
+};
+
+export function getSelectors(selector: Selector<any, State>) {
+  return {
+    selectEmailAuth: createSelector(selector, (state: State) => state.emailAuth),
+    selectPending: createSelector(selector, (state: State) => state.pending),
+    selectError: createSelector(selector, (state: State) => state.error),
+  };
+}
--- a/@overflow/member/store/container/email-auth/index.ts
+++ b/@overflow/member/store/container/email-auth/index.ts
@ -0,0 +1,3 @@
+export * from './email-auth.reducer';
+export * from './email-auth.state';
+
--- a/@overflow/member/store/entity/member/member.action.ts
+++ b/@overflow/member/store/entity/member/member.action.ts
@ -1,6 +1,7 @@
 import { Action } from '@ngrx/store';
 import { RESTClientError } from '@loafer/ng-rest';
 import { Member } from '@overflow/commons-typescript/model/member';
+import {EmailAuth} from '@overflow/commons-typescript/model/email/EmailAuth';

 export enum ActionType {
  Signin = '[member.member] Signin',
@ -21,6 +22,14 @@ export enum ActionType {
  ModifyPassword = '[member.member] ModifyPassword',
  ModifyPasswordSuccess = '[member.member] ModifyPasswordSuccess',
  ModifyPasswordFailure = '[member.member] ModifyPasswordFailure',
+
+  ConfirmEmailForSignup = '[member.member] ConfirmEmailForSignup',
+  ConfirmEmailForSignupSuccess = '[member.member] ConfirmEmailForSignupSuccess',
+  ConfirmEmailForSignupFailure = '[member.member] ConfirmEmailForSignupFailure',
+
+  ConfirmEmailForPassword = '[member.member] ConfirmEmailForPassword',
+  ConfirmEmailForPasswordSuccess = '[member.member] ConfirmEmailForPasswordSuccess',
+  ConfirmEmailForPasswordFailure = '[member.member] ConfirmEmailForPasswordFailure',
 }

 export class Signin implements Action {
@ -105,6 +114,42 @@ export class ModifyPasswordFailure implements Action {
  constructor(public payload: RESTClientError) {}
 }

+export class ConfirmEmailForSignup implements Action {
+  readonly type = ActionType.ConfirmEmailForSignup;
+
+  constructor(public payload: string ) {}
+}
+
+export class ConfirmEmailForSignupSuccess implements Action {
+  readonly type = ActionType.ConfirmEmailForSignupSuccess;
+
+  constructor(public payload: EmailAuth) {}
+}
+
+export class ConfirmEmailForSignupFailure implements Action {
+  readonly type = ActionType.ConfirmEmailForSignupFailure;
+
+  constructor(public payload: RESTClientError) {}
+}
+
+export class ConfirmEmailForPassword implements Action {
+  readonly type = ActionType.ConfirmEmailForPassword;
+
+  constructor(public payload: string) {}
+}
+
+export class ConfirmEmailForPasswordSuccess implements Action {
+  readonly type = ActionType.ConfirmEmailForPasswordSuccess;
+
+  constructor(public payload: EmailAuth) {}
+}
+
+export class ConfirmEmailForPasswordFailure implements Action {
+  readonly type = ActionType.ConfirmEmailForPasswordFailure;
+
+  constructor(public payload: RESTClientError) {}
+}
+
 export type Actions =
  | Signin
  | Signout
@ -120,4 +165,10 @@ export type Actions =
  | ModifyPassword
  | ModifyPasswordSuccess
  | ModifyPasswordFailure
+  | ConfirmEmailForSignup
+  | ConfirmEmailForSignupSuccess
+  | ConfirmEmailForSignupFailure
+  | ConfirmEmailForPassword
+  | ConfirmEmailForPasswordSuccess
+  | ConfirmEmailForPasswordFailure
  ;
--- a/@overflow/member/store/entity/member/member.effect.ts
+++ b/@overflow/member/store/entity/member/member.effect.ts
@ -22,6 +22,12 @@ import {
  ModifyPassword,
  ModifyPasswordSuccess,
  ModifyPasswordFailure,
+  ConfirmEmailForSignup,
+  ConfirmEmailForSignupSuccess,
+  ConfirmEmailForSignupFailure,
+  ConfirmEmailForPassword,
+  ConfirmEmailForPasswordSuccess,
+  ConfirmEmailForPasswordFailure,
  ActionType,
 } from './member.action';

@ -32,6 +38,8 @@ import {
  SigninCookieFailure,
 } from '@overflow/shared/auth/store/container/auth';
 import { DomainMember } from '@overflow/commons-typescript/model/domain';
+import { EmailAuthService } from '../../../service/email-auth.service';
+import {EmailAuth} from '@overflow/commons-typescript/model/email/EmailAuth';


@Injectable()
@ -40,6 +48,7 @@ export class Effects {
  constructor(
    private actions$: Actions,
    private memberService: MemberService,
+    private emailAuthService: EmailAuthService,
    private router: Router
  ) { }

@ -122,4 +131,36 @@ export class Effects {
        )
    )
  );
+
+  @Effect()
+  confirmEmailForSignup$ = this.actions$.pipe(
+    ofType(ActionType.ConfirmEmailForSignup),
+    map((action: ConfirmEmailForSignup) => action.payload),
+    exhaustMap(( token: string ) =>
+      this.emailAuthService
+        .readBySignupAuthKey(token)
+        .pipe(
+          map( (emailAuth: EmailAuth) => {
+            return new ConfirmEmailForSignupSuccess(emailAuth);
+          }),
+          catchError(error => of(new ConfirmEmailForSignupFailure(error)))
+        )
+    )
+  );
+
+  @Effect()
+  confirmEmailForPassword$ = this.actions$.pipe(
+    ofType(ActionType.ConfirmEmailForPassword),
+    map((action: ConfirmEmailForPassword) => action.payload),
+    exhaustMap(( token: string ) =>
+      this.emailAuthService
+        .readByPwAuthKey(token)
+        .pipe(
+          map( (emailAuth: EmailAuth) => {
+            return new ConfirmEmailForPasswordSuccess(emailAuth);
+          }),
+          catchError(error => of(new ConfirmEmailForPasswordFailure(error)))
+        )
+    )
+  );
 }
--- a/@overflow/member/store/index.ts
+++ b/@overflow/member/store/index.ts
@ -14,6 +14,7 @@ import * as MemberModifyPasswordContainerStore from './container/modify-password
 import * as MemberResetPasswordContainerStore from './container/reset-password';
 import * as MemberModifyContainerStore from './container/modify';
 import * as MemberSignoutContainerStore from './container/signout';
+import * as ConfirmEmailStore from './container/email-auth';


 export interface State {
@ -23,6 +24,7 @@ export interface State {
  member_reset_password_container: MemberResetPasswordContainerStore.State;
  member_modify_container: MemberModifyContainerStore.State;
  member_signout_container: MemberSignoutContainerStore.State;
+  confirm_email_container: ConfirmEmailStore.State;
 }

 export const REDUCERS = {
--- a/src/app/pages/auth/confirm/confirm-reset-password-page.component.html
+++ b/src/app/pages/auth/confirm/confirm-reset-password-page.component.html
@ -1,11 +1,11 @@
 <div class="ui-g">
  <div class="ui-g-12 ui-md-9 ui-lg-7">
    <!--<of-member-reset-password-container (signin)="onSignin()" (signup)="onSignup()"></of-member-reset-password-container>-->
-    <of-member-confirm-reset-password-container
+    <of-member-confirm-reset-password
      [token]="token"
      (signin)="onSignin()"
      (modifyPassword)="onModifyPassword()"
-    ></of-member-confirm-reset-password-container>
+    ></of-member-confirm-reset-password>
  </div>
  <div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
    <table class="login-table">
--- a/src/app/pages/auth/confirm/confirm-signup-page.component.html
+++ b/src/app/pages/auth/confirm/confirm-signup-page.component.html
@ -1,6 +1,6 @@
 <div class="ui-g">
  <div class="ui-g-12 ui-md-9 ui-lg-7">
-    <of-member-confirm-signup-container [token]="token" (signin)="onSignin()"></of-member-confirm-signup-container>
+    <of-member-confirm-signup [token]="token" (signin)="onSignin()"></of-member-confirm-signup>
  </div>
  <div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
    <table class="login-table">
--- a/src/app/pages/auth/reset-password/modify-password-page.component.html
+++ b/src/app/pages/auth/reset-password/modify-password-page.component.html
@ -1,6 +1,7 @@
 <div class="ui-g">
  <div class="ui-g-12 ui-md-9 ui-lg-7">
-    <of-member-modify-password-container (signin)="onSignin()"></of-member-modify-password-container>
+    <!--<of-member-modify-password-container (signin)="onSignin()"></of-member-modify-password-container>-->
+    <of-member-modify-password [token]="token" (signin)="onSignin()"></of-member-modify-password>
  </div>
  <div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
    <table class="login-table">
--- a/src/app/pages/auth/reset-password/modify-password-page.component.ts
+++ b/src/app/pages/auth/reset-password/modify-password-page.component.ts
@ -6,7 +6,7 @@ import {ActivatedRoute, Router} from '@angular/router';
  templateUrl: './modify-password-page.component.html',
 })
 export class ModifyPasswordPageComponent implements OnInit {
-  toenURL: string;
+  token: string;

  constructor(
    private router: Router,
@ -14,7 +14,11 @@ export class ModifyPasswordPageComponent implements OnInit {
  ) { }

  ngOnInit() {
-    this.toenURL = this.activatedRoute.snapshot.queryParams['token'];
+    this.token = this.activatedRoute.snapshot.queryParams['token'];
+    if (this.token === '' || this.token === null || this.token === undefined) {
+      // Todo Token Error Message Print
+      console.log('Error Token');
+    }
  }

  onSignin() {
--- a/src/app/pages/auth/reset-password/reset-password-page.component.html
+++ b/src/app/pages/auth/reset-password/reset-password-page.component.html
@ -1,6 +1,7 @@
 <div class="ui-g">
  <div class="ui-g-12 ui-md-9 ui-lg-7">
-    <of-member-reset-password-container (signin)="onSignin()" (signup)="onSignup()"></of-member-reset-password-container>
+    <!--<of-member-reset-password-container (signin)="onSignin()" (signup)="onSignup()"></of-member-reset-password-container>-->
+    <of-member-reset-password (signin)="onSignin()" (signup)="onSignup()"></of-member-reset-password>
  </div>
  <div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
    <table class="login-table">
--- a/src/app/pages/auth/signup/signup-page.component.html
+++ b/src/app/pages/auth/signup/signup-page.component.html
@ -1,6 +1,7 @@
 <div class="ui-g">
  <div class="ui-g-12 ui-md-9 ui-lg-7">
-    <of-member-signup-container ></of-member-signup-container>
+    <!--<of-member-signup-container ></of-member-signup-container>-->
+    <of-member-signup (signin)="onSignin()"></of-member-signup>
  </div>
  <div class="ui-g-12 ui-md-3 ui-lg-5 login-descript">
    <table class="login-table">
--- a/src/app/pages/auth/signup/signup-page.component.ts
+++ b/src/app/pages/auth/signup/signup-page.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';

@Component({
  selector: 'of-pages-auth-signup',
@ -10,6 +10,7 @@ export class SignupPageComponent implements OnInit {
  returnURL: string;

  constructor(
+    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) { }

@ -19,4 +20,8 @@ export class SignupPageComponent implements OnInit {

  initForm() {
  }
+
+  onSignin() {
+    this.router.navigate(['/auth/signin']);
+  }
 }