memer totp code server communication test

src/app/pages/settings/member/member-page-routing.module.ts

@@ -1,16 +1,14 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MemberPageComponent } from './member-page.component';
-
+import { TotpComponent } from '../../../../packages/settings/member/component/totp/totp.component';
 const routes: Routes = [
   {
     path: '',
     component: MemberPageComponent,
-    // children: [
-    //   { path: '', component: ProbeListComponent },
-    //   { path: 'noauth', component: NoauthListComponent },
-    //   { path: 'download', component: DownloadComponent },
-    // ]
+    children: [
+      { path: '', component: TotpComponent },
+    ]
   }
 ];
 

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

@@ -24,9 +24,9 @@
         <mat-card-subtitle>X6AWAK573M5372NM</mat-card-subtitle>
       </mat-card-header>
       <mat-card-content>
-        <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="regist()">
+        <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="registClick()">
           <mat-form-field class="full-width">
-            <input type="number" id="code" class="input" placeholder="Please enter your code"
+            <input type="text" id="code" class="input" placeholder="Please enter your code"
                    formControlName="code" required matInput>
           </mat-form-field>
           <!--<div *ngIf="formErrors.email" class="help is-danger">-->

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

@@ -1,8 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import * as TotpStore from '../../store/totp';
-import { Store } from '@ngrx/store';
-import {FormBuilder} from '@angular/forms';
+import { Store, select } from '@ngrx/store';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { TotpSelector } from '../../store';
+import {AuthSelector} from "../../../../member/store/index";
+import {Member} from "../../../../member/model/Member";
 
 @Component({
   selector: 'of-totp',
@@ -10,7 +13,14 @@ import {FormBuilder} from '@angular/forms';
   styleUrls: ['./totp.component.scss']
 })
 export class TotpComponent implements OnInit {
+  pending$ = this.store.pipe(select(TotpSelector.select('pending')));
+  error$ = this.store.pipe(select(TotpSelector.select('error')));
 
+  errorMessage: string | null;
+  totpForm: FormGroup;
+  formErrors = {
+    'code': '',
+  };
   constructor(private activatedRoute: ActivatedRoute,
               private router: Router,
               private store: Store<TotpStore.State>,
@@ -18,6 +28,40 @@ export class TotpComponent implements OnInit {
               ) { }
 
   ngOnInit() {
+    this.totpForm = this.formBuilder.group({
+      'code': [
+        [
+        ]
+      ]
+    })
+    this.pending$.subscribe((pending: boolean) => {
+      if (pending) {
+        this.totpForm.disable();
+      } else {
+        this.totpForm.enable();
+      }
+    });
+
+    this.error$.subscribe((error) => {
+      if (error) {
+        this.errorMessage = error.exception;
+      } else {
+        this.errorMessage = null;
+      }
+    });
   }
 
+  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/settings/member/service/member-totp.service.ts

@@ -16,15 +16,15 @@ export class MemberTotpService {
   public createTotp(member: Member): Observable<MemberTotp[]> {
     // Todo Store get member object
 
-    return this.rpcClient.call<MemberTotp[]>('MemberTotpService.createTotp', {id: '1'});
+    return this.rpcClient.call<MemberTotp[]>('MemberTotpService.createTotp', {Member: {id:1}});
   }
 
   public regist(member: Member, secretCode: string, code: string): Observable<boolean> {
-    const param = {
-      Member: {id: 1, },
-      MemberTotp: {id: 1, secretCode: 'dkdkdkdk'},
-      code: '123123'
-    };
-    return this.rpcClient.call<boolean>('MemberTotpService.regist', param);
+    // const param = {
+    //   Member: {id: 1, },
+    //   MemberTotp: {id: 1, secretCode: 'dkdkdkdk'},
+    //   code: '123123'
+    // };
+    return this.rpcClient.call<boolean>('MemberTotpService.regist', member, secretCode, code);
   }
 }

src/packages/settings/member/store/index.ts

@@ -24,7 +24,7 @@ export const EFFECTS = [
 
 export const selectMemberTotpState = createFeatureSelector<State>(MODULE.name);
 
-export const AuthSelector = new StateSelector<TotpStore.State>(createSelector(
+export const TotpSelector = new StateSelector<TotpStore.State>(createSelector(
   selectMemberTotpState,
   (state: State) => state.totp
 ));

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

@@ -9,9 +9,9 @@ export enum ActionType {
   CreateTotpSuccess = '[member.totp] CreateTotpSuccess',
   CreateTotpFailure = '[member.totp] CreateTotpFailure',
 
-  Regist = '[member.auth] SigninCookie',
-  RegistSuccess = '[member.auth] SigninCookieSuccess',
-  RegistFailure = '[member.auth] SigninCookieFailure',
+  Regist = '[member.totp] Regist',
+  RegistSuccess = '[member.totp] RegistSuccess',
+  RegistFailure = '[member.totp] RegistFailure',
 }
 
 export class CreateTotp implements Action {