member_webapp/@overflow/member/component/settings/totp/totp.component.ts

import {AfterContentInit, Component, OnInit} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Store, select } from '@ngrx/store';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

import * as TotpStore from '@overflow/member/store/totp';
import { AuthSelector } from '@overflow/member/store';
import { Member } from '@overflow/commons-typescript/model/member';

@Component({
  selector: 'of-settings-totp',
  templateUrl: './totp.component.html',
})
export class TotpComponent implements OnInit, AfterContentInit {
  member: Member;
  selectedItem: any;
  totpSettingDisplay = false;
  totpForm: FormGroup;
  headerItem: string;

  formErrors = {
    'code': '',
  };

  lists = [];

  constructor(private activatedRoute: ActivatedRoute,
              private router: Router,
              private store: Store<TotpStore.State>,
              private formBuilder: FormBuilder,
              ) { }

  ngOnInit() {
    this.totpForm = this.formBuilder.group({
      'code': [
        [
        ]
      ]
    });
  }

  ngAfterContentInit() {

    this.store.select(AuthSelector.select('member')).subscribe(
      (member: Member) => {
        this.member = member;
        this.lists = [
          {id: 1, name: 'Email', value: this.member.email, description: 'blabla', },
          {id: 2, name: 'Phone', value: this.member.phone, description: 'blabla', },
          {id: 3, name: 'Google 2factor', value: this.member.totpType, description: 'blabla', },
        ];
      },
      (error) => {
        console.log(error);
      }
    );
  }

  on2factorConfig(event: Event, item: any) {
    this.selectedItem = item;

    // server totp regist member info modify
    if (this.selectedItem.id === 3) {
      this.headerItem = '구글 인증기 설정하기';
      this.totpSettingDisplay = true;
    }
  }

  onTotpSettingClose() {
    this.totpSettingDisplay = false;
  }
}