totp ing

src/packages/member/component/settings/totp/config/config-setting.component.html

@@ -16,7 +16,13 @@
 </div>
 <div>
   <p>Key & Backup Code</p>
-
+  <div>{{totpMap.key}}</div>
+  <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="totpRegistClick()">
+    <input type="text"
+           id="code" class="input"
+           placeholder="Please enter your code"
+           formControlName="code" required matInput>
+  </form>
   <!--QR Code print & Key Print-->
 </div>
 <div class="ui-top-space-10" dir="rtl">

src/packages/member/component/settings/totp/config/config-setting.component.ts

@@ -15,6 +15,7 @@ import { AuthSelector } from 'packages/member/store';
 import { TotpSelector } from 'packages/member/store';
 import { Member } from 'packages/member/model/Member';
 import { MemberTotp } from 'packages/member/model/MemberTotp';
+import {RPCClientError} from '../../../../../../@loafer/ng-rpc/protocol';
 
 @Component({
   selector: 'of-config-setting',
@@ -23,8 +24,11 @@ import { MemberTotp } from 'packages/member/model/MemberTotp';
 })
 export class ConfigSettingComponent implements OnInit, AfterContentInit {
   member: Member;
+  totpState$ = this.store.pipe(select(TotpSelector.select('totp')));
+  totpMap: any;
+  totpForm: FormGroup;
+
   @Input()  selectedItem: any;
-  @Input()  totpVO: MemberTotp;
   @Output() close = new EventEmitter();
   @Input()  totpSettingDisplay;
 
@@ -35,11 +39,45 @@ export class ConfigSettingComponent implements OnInit, AfterContentInit {
               ) { }
 
   ngOnInit() {
-
+    this.totpState$.subscribe(
+      (m: any) => {
+        if (m != null) {
+          this.totpMap = m;
+        }
+      },
+      (error: RPCClientError) => {
+        console.log(error.response.message);
+      }
+    );
   }
 
   ngAfterContentInit() {
 
+    this.store.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        this.member = member;
+        this.store.dispatch(new TotpStore.CreateTotp(this.member));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+
+  }
+
+
+  totpRegistClick() {
+    const code = this.totpForm.value['code'];
+    const secretCode = 'X6AWAK573M5372NM';
+
+    this.store.select(AuthSelector.select('member')).subscribe(
+      (member: Member) => {
+        this.store.dispatch(new TotpStore.Regist({ member, secretCode, code }));
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
   }
 
   onCancel() {

src/packages/member/component/settings/totp/totp.component.html

@@ -1,5 +1,5 @@
 <p-dialog header="{{headerItem}}" [modal]="true" [width]="1200" [(visible)]="totpSettingDisplay" [showHeader]="true" [closeOnEscape]="false">
-  <of-config-setting [selectedItem]="selectedItem" [totpVO]="totpVO" (close)="onTotpSettingClose()"></of-config-setting>
+  <of-config-setting [selectedItem]="selectedItem" (close)="onTotpSettingClose()"></of-config-setting>
 </p-dialog>
 
 <p-dataView [value]="lists" [paginator]="false" [rows]="5">

src/packages/member/component/settings/totp/totp.component.ts

@@ -5,9 +5,7 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 import * as TotpStore from 'packages/member/store/totp';
 import { AuthSelector } from 'packages/member/store';
-import { TotpSelector } from 'packages/member/store';
 import { Member } from 'packages/member/model/Member';
-import {MemberTotp} from '../../../model/MemberTotp';
 
 @Component({
   selector: 'of-settings-totp',
@@ -18,10 +16,8 @@ export class TotpComponent implements OnInit, AfterContentInit {
   member: Member;
   selectedItem: any;
   totpSettingDisplay = false;
-  errorMessage: string | null;
   totpForm: FormGroup;
   headerItem: string;
-  totpVO: MemberTotp;
 
   formErrors = {
     'code': '',
@@ -59,27 +55,6 @@ export class TotpComponent implements OnInit, AfterContentInit {
         console.log(error);
       }
     );
-
-    // this.listStore.select(AuthSelector.select('member')).subscribe(
-    //   (member: Member) => {
-    //     this.store.dispatch(new TotpRegistStore.createTotp(member));
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   }
-    // );
-    //
-    // this.probes$.subscribe(
-    //   (probes: boo) => {
-    //     console.log(probes);
-    //     this.dataSource = new MatTableDataSource(probes);
-    //     this.dataSource.sort = this.sort;
-    //   },
-    //   (error: RPCError) => {
-    //     console.log(error.response.message);
-    //   }
-    // );
-
   }
 
   on2factorConfig(event: Event, item: any) {
@@ -89,24 +64,10 @@ export class TotpComponent implements OnInit, AfterContentInit {
     if (this.selectedItem.id === 3) {
       this.headerItem = '구글 인증기 설정하기';
       this.totpSettingDisplay = true;
-      // dispatch
     }
   }
 
   onTotpSettingClose() {
     this.totpSettingDisplay = false;
   }
-  registClick() {
-    const code = this.totpForm.value['code'];
-    const secretCode = 'X6AWAK573M5372NM';
-
-    this.store.select(AuthSelector.select('member')).subscribe(
-      (member: Member) => {
-        this.store.dispatch(new TotpStore.Regist({ member, secretCode, code }));
-      },
-      (error) => {
-        console.log(error);
-      }
-    );
-  }
 }

src/packages/member/service/member-totp.service.ts

@@ -16,7 +16,7 @@ export class MemberTotpService {
   public createTotp(member: Member): Observable<MemberTotp[]> {
     // Todo Store get member object
 
-    return this.rpcService.call<MemberTotp[]>('MemberTotpService.createTotp', {Member: member});
+    return this.rpcService.call<MemberTotp[]>('MemberTotpService.createTotp', member);
   }
 
   public regist(member: Member, secretCode: string, code: string): Observable<boolean> {

src/packages/member/store/totp/totp.action.ts

@@ -21,7 +21,7 @@ export enum ActionType {
 export class CreateTotp implements Action {
   readonly type = ActionType.CreateTotp;
 
-  constructor(public payload: {member: Member}) {}
+  constructor(public payload: Member) {}
 }
 
 export class CreateTotpSuccess implements Action {

src/packages/member/store/totp/totp.effect.ts

@@ -49,7 +49,7 @@ export class Effects {
     .map((action: CreateTotp) => action.payload)
     .switchMap(payload => {
       // this._returnURL = payload.returnURL;
-      return this.memberTotpService.createTotp(payload.member);
+      return this.memberTotpService.createTotp(payload);
     })
     .map((result: any) => {
       const key = result['key'];