ing

@overflow/member/component/member-confirm-reset-password.component.html

@@ -1,3 +1,32 @@
-<div>
+<div class="ui-g" *ngIf="emailAuth$ | async">
-  Your email has been verified. When you click the link button below, it goes to the password change screen.
+  <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>

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

@overflow/member/component/member-confirm-signup.component.html

@@ -1,3 +1,33 @@
-<div>
+<div class="ui-g" *ngIf="emailAuth$ | async">
-  Your email has been verified. Go to signin when you click the link button below.
+  <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>

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

@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>
-
+</ng-template>
-<div class="ui-g" *ngIf="!member">
+<div class="ui-g" *ngIf="member$ | async as member; else complete">
-  Password Modify 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>

@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 { 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;
+  member$: Observable<Member>;
-  @Input() member: 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() {

@overflow/member/component/member-reset-password.component.html

@@ -1,45 +1,86 @@
-<div class="ui-g" *ngIf="!member">
+<ng-template #complete>
-    <div class="ui-g-12">
+  <div class="ui-g">
-        <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPasswordSubmit()">
+      <div class="ui-g-12">
-            <table class="login-table">
+          <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPasswordSubmit()">
-                <tr>
+              <table class="login-table">
-                    <td>
+                  <tr>
-                        <div class="login-panel ui-fluid">
+                      <td>
-                            <div class="ui-g">
+                          <div class="login-panel ui-fluid">
-                                <div class="ui-g-12">
+                              <div class="ui-g">
-                                    <!--img src="assets/layout/images/logo-ultima.svg" -->
+                                  <div class="ui-g-12">
-                                    <img src="assets/layout/images/overFlow_CI_blue_185.png">
+                                      <!--img src="assets/layout/images/logo-ultima.svg" -->
-                                </div>
+                                      <img src="assets/layout/images/overFlow_CI_blue_185.png">
-                                <div class="ui-g-12">
+                                  </div>
-                                    <span class="md-inputfield">
+                                  <div class="ui-g-12">
-                                        <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 class="md-inputfield">
-                                    </span>
+                                          <input
-                                    <div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
+                                            type="email"
-                                      Invalid email
+                                            id="email"
-                                    </div>
+                                            autocomplete="off"
-                                </div>
+                                            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
+                                      </div>
+                                  </div>
 
-                                <div class="ui-g-12">
+                                  <div class="ui-g-12">
-                                    <button
+                                      <button
-                                      [disabled]="!resetPasswordForm.valid"
+                                        type="submit"
-                                            type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
+                                        [disabled]="!resetPasswordForm.valid"
-                                        <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-cached"></span>
+                                        class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
-                                        <span class="ui-button-text ui-c">Reset Password</span>
+                                          <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-cached"></span>
-                                    </button>
+                                          <span class="ui-button-text ui-c">Reset Password</span>
+                                      </button>
 
-                                    <a style="cursor: pointer" (click)="onSignin()">Sign In</a>
+                                      <a style="cursor: pointer" (click)="onSignin()">Sign In</a>
-                                    |
+                                      |
-                                    <a style="cursor: pointer" (click)="onSignup()">Sign Up</a>
+                                      <a style="cursor: pointer" (click)="onSignup()">Sign Up</a>
-                                </div>
+                                  </div>
-                            </div>
+                              </div>
-                        </div>
+                          </div>
-                    </td>
+                      </td>
-                </tr>
+                  </tr>
-            </table>
+              </table>
-        </form>
+          </form>
-    </div>
+      </div>
 
-</div>
+  </div>
-<div class="ui-g" *ngIf="member">
+</ng-template>
-  I sent an authentication mail to the mail address you registered. Please check and change your password.
+<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>

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

@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$ | async as member; else complete">
-<div class="ui-g" *ngIf="member">
   <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>

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

@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>-->

@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>-->

@overflow/member/container/member-modify-password-container.component.html

@@ -1,7 +1,7 @@
-<of-member-modify-password
+<!--<of-member-modify-password-->
-  [token]="token"
+  <!--[token]="token"-->
-  (modifyPassword)="modifyPassword($event)"
+  <!--(modifyPassword)="modifyPassword($event)"-->
-  (signin)="onSignin()"
+  <!--(signin)="onSignin()"-->
-  [member]="member$ | async"
+  <!--[member]="member$ | async"-->
->
+<!--&gt;-->
-</of-member-modify-password>
+<!--</of-member-modify-password>-->

@overflow/member/container/member-reset-password-container.component.html

@@ -1,7 +1,7 @@
-<of-member-reset-password
+<!--<of-member-reset-password-->
-  (resetPassword)="resetPassword($event)"
+  <!--(resetPassword)="resetPassword($event)"-->
-  (signin)="onSignin()"
+  <!--(signin)="onSignin()"-->
-  (signup)="onSignup()"
+  <!--(signup)="onSignup()"-->
-  [member]="member$ | async"
+  <!--[member]="member$ | async"-->
->
+<!--&gt;-->
-</of-member-reset-password>
+<!--</of-member-reset-password>-->

@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>-->

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

@overflow/member/service/index.ts

@@ -1,7 +1,9 @@
 import { MemberService } from './member.service';
-import {MemberTotpService} from './member-totp.service';
+import { MemberTotpService } from './member-totp.service';
+import { EmailAuthService } from './email-auth.service';
 
 export const SERVICES = [
   MemberService,
   MemberTotpService,
+  EmailAuthService,
 ];

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

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

@overflow/member/store/container/email-auth/index.ts

@@ -0,0 +1,3 @@
+export * from './email-auth.reducer';
+export * from './email-auth.state';
+

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

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

@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 = {

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">

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">

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">

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() {

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">

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">

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