diff --git a/src/app/commons/component/layout/profile/app.profile.component.html b/src/app/commons/component/layout/profile/app.profile.component.html index c9b65e2..9301a5f 100644 --- a/src/app/commons/component/layout/profile/app.profile.component.html +++ b/src/app/commons/component/layout/profile/app.profile.component.html @@ -20,7 +20,7 @@
  • - + settings_application Settings diff --git a/src/app/pages/account/settings/settings-page.component.html b/src/app/pages/account/settings/settings-page.component.html index 86a475d..a23c6bd 100644 --- a/src/app/pages/account/settings/settings-page.component.html +++ b/src/app/pages/account/settings/settings-page.component.html @@ -2,8 +2,9 @@
    -

    Alert

    +

    totp

    +
    - \ No newline at end of file + diff --git a/src/packages/member/component/index.ts b/src/packages/member/component/index.ts index b506afe..caef3ef 100644 --- a/src/packages/member/component/index.ts +++ b/src/packages/member/component/index.ts @@ -2,10 +2,12 @@ import { ProfileComponent } from './profile/profile.component'; import { SigninComponent } from './signin/signin.component'; import { SignupComponent } from './signup/signup.component'; import { ResetPasswordComponent } from './reset-password/reset-password.component'; +import {SETTINGS_COMPONENTS} from './settings'; export const COMPONENTS = [ ProfileComponent, SigninComponent, SignupComponent, ResetPasswordComponent, + SETTINGS_COMPONENTS, ]; diff --git a/src/packages/member/component/settings/index.ts b/src/packages/member/component/settings/index.ts new file mode 100644 index 0000000..18391ee --- /dev/null +++ b/src/packages/member/component/settings/index.ts @@ -0,0 +1,7 @@ +import { TotpComponent } from './totp/totp.component'; +import { ConfigSettingComponent } from './totp/config/config-setting.component'; + +export const SETTINGS_COMPONENTS = [ + TotpComponent, + ConfigSettingComponent, +]; diff --git a/src/packages/member/component/settings/totp/config/config-setting.component.html b/src/packages/member/component/settings/totp/config/config-setting.component.html new file mode 100644 index 0000000..82ed1a8 --- /dev/null +++ b/src/packages/member/component/settings/totp/config/config-setting.component.html @@ -0,0 +1,79 @@ +
    +
    + 구글 인증기(OTP)는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다. + 연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다. +
    +
    +
    +
    + IOS 회원은 App Store에서 "Authenticator" 검색 후 다운로드 해주세요. + 안드로이드 회원은 구글 플레이 스토어 또는 핸드폰 브라우저를 통해 "구글 인증기(OTP)" 검색 후 다운로드 해주세요. +
    +
    +
    + + +
    +
    +

    Key & Backup Code

    + + +
    +
    + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/packages/settings/member/component/totp/totp.component.scss b/src/packages/member/component/settings/totp/config/config-setting.component.scss similarity index 100% rename from src/packages/settings/member/component/totp/totp.component.scss rename to src/packages/member/component/settings/totp/config/config-setting.component.scss diff --git a/src/packages/member/component/settings/totp/config/config-setting.component.ts b/src/packages/member/component/settings/totp/config/config-setting.component.ts new file mode 100644 index 0000000..4603f69 --- /dev/null +++ b/src/packages/member/component/settings/totp/config/config-setting.component.ts @@ -0,0 +1,48 @@ +import { + AfterContentInit, + Component, + EventEmitter, + Input, + OnInit, + Output +} 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 '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 'packages/member/model/MemberTotp'; + +@Component({ + selector: 'of-config-setting', + templateUrl: './config-setting.component.html', + styleUrls: ['./config-setting.component.scss'] +}) +export class ConfigSettingComponent implements OnInit, AfterContentInit { + member: Member; + @Input() selectedItem: any; + @Input() totpVO: MemberTotp; + @Output() close = new EventEmitter(); + @Input() totpSettingDisplay; + + constructor(private activatedRoute: ActivatedRoute, + private router: Router, + private store: Store, + private formBuilder: FormBuilder, + ) { } + + ngOnInit() { + + } + + ngAfterContentInit() { + + } + + onCancel() { + this.close.emit(); + } +} diff --git a/src/packages/member/component/settings/totp/totp.component.html b/src/packages/member/component/settings/totp/totp.component.html new file mode 100644 index 0000000..68c312d --- /dev/null +++ b/src/packages/member/component/settings/totp/totp.component.html @@ -0,0 +1,28 @@ + + + + + + 이중보안 + + +
    + + +
    +
    +
    {{item.name }}
    +
    {{item.value }}
    +
    {{item.description }}
    +
    +
    + +
    + + + +
    +
    +     +     + diff --git a/src/packages/settings/member/model/index.ts b/src/packages/member/component/settings/totp/totp.component.scss similarity index 100% rename from src/packages/settings/member/model/index.ts rename to src/packages/member/component/settings/totp/totp.component.scss diff --git a/src/packages/settings/member/component/totp/totp.component.spec.ts b/src/packages/member/component/settings/totp/totp.component.spec.ts similarity index 100% rename from src/packages/settings/member/component/totp/totp.component.spec.ts rename to src/packages/member/component/settings/totp/totp.component.spec.ts diff --git a/src/packages/member/component/settings/totp/totp.component.ts b/src/packages/member/component/settings/totp/totp.component.ts new file mode 100644 index 0000000..b0e7d3e --- /dev/null +++ b/src/packages/member/component/settings/totp/totp.component.ts @@ -0,0 +1,112 @@ +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 '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', + templateUrl: './totp.component.html', + styleUrls: ['./totp.component.scss'] +}) +export class TotpComponent implements OnInit, AfterContentInit { + member: Member; + selectedItem: any; + totpSettingDisplay = false; + errorMessage: string | null; + totpForm: FormGroup; + headerItem: string; + totpVO: MemberTotp; + + formErrors = { + 'code': '', + }; + + lists = []; + + constructor(private activatedRoute: ActivatedRoute, + private router: Router, + private store: Store, + 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); + } + ); + + // 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) { + this.selectedItem = item; + + // server totp regist member info modify + 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); + } + ); + } +} diff --git a/src/packages/member/member.module.ts b/src/packages/member/member.module.ts index 0dd42fc..9450e94 100644 --- a/src/packages/member/member.module.ts +++ b/src/packages/member/member.module.ts @@ -8,6 +8,7 @@ import { MemberRESTModule } from './member-rest.module'; import { COMPONENTS } from './component'; import { SERVICES } from './service'; import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module'; +import { QRCodeModule } from 'angularx-qrcode'; @NgModule({ imports: [ @@ -17,7 +18,8 @@ import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module'; ReactiveFormsModule, MemberStoreModule, MemberRESTModule, - PrimeNGModules + PrimeNGModules, + QRCodeModule, ], declarations: [ COMPONENTS, diff --git a/src/packages/member/model/Member.ts b/src/packages/member/model/Member.ts index c1de12a..eeed391 100644 --- a/src/packages/member/model/Member.ts +++ b/src/packages/member/model/Member.ts @@ -8,5 +8,6 @@ export interface Member { phone?: string; companyName?: string; createDate?: Date; + totpType?: boolean; status?: MetaMemberStatus; } diff --git a/src/packages/settings/member/model/MemberTotp.ts b/src/packages/member/model/MemberTotp.ts similarity index 100% rename from src/packages/settings/member/model/MemberTotp.ts rename to src/packages/member/model/MemberTotp.ts diff --git a/src/packages/member/service/index.ts b/src/packages/member/service/index.ts index 6528855..60b23b3 100644 --- a/src/packages/member/service/index.ts +++ b/src/packages/member/service/index.ts @@ -1,5 +1,7 @@ import { MemberService } from './member.service'; +import {MemberTotpService} from './member-totp.service'; export const SERVICES = [ MemberService, + MemberTotpService, ]; diff --git a/src/packages/settings/member/service/member-totp.service.spec.ts b/src/packages/member/service/member-totp.service.spec.ts similarity index 100% rename from src/packages/settings/member/service/member-totp.service.spec.ts rename to src/packages/member/service/member-totp.service.spec.ts diff --git a/src/packages/settings/member/service/member-totp.service.ts b/src/packages/member/service/member-totp.service.ts similarity index 95% rename from src/packages/settings/member/service/member-totp.service.ts rename to src/packages/member/service/member-totp.service.ts index 504ca48..d1afbb0 100644 --- a/src/packages/settings/member/service/member-totp.service.ts +++ b/src/packages/member/service/member-totp.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { RPCService } from '@loafer/ng-rpc/service'; import { Observable } from 'rxjs/Observable'; import { MemberTotp } from '../model/MemberTotp'; -import { Member } from '../../../member/model'; +import { Member } from '../model'; @Injectable() export class MemberTotpService { diff --git a/src/packages/member/store/index.ts b/src/packages/member/store/index.ts index 4ab9499..abcb025 100644 --- a/src/packages/member/store/index.ts +++ b/src/packages/member/store/index.ts @@ -11,20 +11,24 @@ import { MODULE } from '../member.constant'; import * as AuthStore from './auth'; import * as SignupStore from './signup'; +import * as TotpStore from './totp'; export interface State { auth: AuthStore.State; signup: SignupStore.Signup; + totp: TotpStore.State; } export const REDUCERS = { auth: AuthStore.reducer, signup: SignupStore.reducer, + totp: TotpStore.reducer, }; export const EFFECTS = [ AuthStore.Effects, SignupStore.Effects, + TotpStore.Effects, ]; export const selectMemberState = createFeatureSelector(MODULE.name); @@ -38,3 +42,8 @@ export const SignupSelector = new StateSelector(createSelect selectMemberState, (state: State) => state.signup )); + +export const TotpSelector = new StateSelector(createSelector( + selectMemberState, + (state: State) => state.totp +)); diff --git a/src/packages/settings/member/store/totp/index.ts b/src/packages/member/store/totp/index.ts similarity index 100% rename from src/packages/settings/member/store/totp/index.ts rename to src/packages/member/store/totp/index.ts diff --git a/src/packages/settings/member/store/totp/totp.action.ts b/src/packages/member/store/totp/totp.action.ts similarity index 98% rename from src/packages/settings/member/store/totp/totp.action.ts rename to src/packages/member/store/totp/totp.action.ts index 4e84c6d..b4a7407 100644 --- a/src/packages/settings/member/store/totp/totp.action.ts +++ b/src/packages/member/store/totp/totp.action.ts @@ -2,7 +2,7 @@ import { Action } from '@ngrx/store'; import { RESTClientError } from '@loafer/ng-rest/protocol'; -import { Member } from '../../../../member/model'; +import { Member } from '../../model'; export enum ActionType { CreateTotp = '[member.totp] CreateTotp', diff --git a/src/packages/settings/member/store/totp/totp.effect.spec.ts b/src/packages/member/store/totp/totp.effect.spec.ts similarity index 100% rename from src/packages/settings/member/store/totp/totp.effect.spec.ts rename to src/packages/member/store/totp/totp.effect.spec.ts diff --git a/src/packages/settings/member/store/totp/totp.effect.ts b/src/packages/member/store/totp/totp.effect.ts similarity index 100% rename from src/packages/settings/member/store/totp/totp.effect.ts rename to src/packages/member/store/totp/totp.effect.ts diff --git a/src/packages/settings/member/store/totp/totp.reducer.ts b/src/packages/member/store/totp/totp.reducer.ts similarity index 100% rename from src/packages/settings/member/store/totp/totp.reducer.ts rename to src/packages/member/store/totp/totp.reducer.ts diff --git a/src/packages/settings/member/store/totp/totp.state.ts b/src/packages/member/store/totp/totp.state.ts similarity index 100% rename from src/packages/settings/member/store/totp/totp.state.ts rename to src/packages/member/store/totp/totp.state.ts diff --git a/src/packages/settings/member/component/index.ts b/src/packages/settings/member/component/index.ts deleted file mode 100644 index 4710813..0000000 --- a/src/packages/settings/member/component/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { TotpComponent } from './totp/totp.component'; - -export const COMPONENTS = [ - TotpComponent -]; diff --git a/src/packages/settings/member/component/totp/totp.component.html b/src/packages/settings/member/component/totp/totp.component.html deleted file mode 100644 index 755421c..0000000 --- a/src/packages/settings/member/component/totp/totp.component.html +++ /dev/null @@ -1,39 +0,0 @@ - -
    -
    - - - - QR Code - - - -
    - -
    -     -     - -
    - -
    - - - - Secret Code - X6AWAK573M5372NM - - -
    - - - - - - -
    -     -     - -
    diff --git a/src/packages/settings/member/component/totp/totp.component.ts b/src/packages/settings/member/component/totp/totp.component.ts deleted file mode 100644 index 98adae1..0000000 --- a/src/packages/settings/member/component/totp/totp.component.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import * as TotpStore from '../../store/totp'; -import { Store, select } from '@ngrx/store'; -import { FormGroup, FormBuilder, Validators } from '@angular/forms'; - -import { AuthSelector } from 'packages/member/store'; - - -import { TotpSelector } from '../../store'; -import { Member } from 'packages/member/model/Member'; - -@Component({ - selector: 'of-totp', - templateUrl: './totp.component.html', - 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, - private formBuilder: FormBuilder, - ) { } - - 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; - } - }); - } - - // ngAfterContentInit() { - // - // 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); - // } - // ); - // - // } - 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); - } - ); - } -} diff --git a/src/packages/settings/member/member-totp-store.module.ts b/src/packages/settings/member/member-totp-store.module.ts deleted file mode 100644 index aa83d9e..0000000 --- a/src/packages/settings/member/member-totp-store.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { NgModule } from '@angular/core'; -import { StoreModule } from '@ngrx/store'; -import { StoreDevtoolsModule } from '@ngrx/store-devtools'; -import { - StoreRouterConnectingModule, - RouterStateSerializer, -} from '@ngrx/router-store'; -import { EffectsModule } from '@ngrx/effects'; -import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store'; - -import { - REDUCERS, - EFFECTS, -} from './store'; - -import { MODULE } from './member-totp.constant'; - -@NgModule({ - imports: [ - StoreModule.forFeature(MODULE.name, REDUCERS), - EffectsModule.forFeature(EFFECTS), - ], -}) -export class MemberTotpStoreModule { } diff --git a/src/packages/settings/member/member-totp.constant.ts b/src/packages/settings/member/member-totp.constant.ts deleted file mode 100644 index f0800c0..0000000 --- a/src/packages/settings/member/member-totp.constant.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const MODULE = { - name: 'member-totp' -}; diff --git a/src/packages/settings/member/member-totp.module.ts b/src/packages/settings/member/member-totp.module.ts deleted file mode 100644 index 6d854fc..0000000 --- a/src/packages/settings/member/member-totp.module.ts +++ /dev/null @@ -1,32 +0,0 @@ -// import { NgModule } from '@angular/core'; -// import { CommonModule } from '@angular/common'; -// import {FormsModule, ReactiveFormsModule} from '@angular/forms'; - -// import { MaterialModule } from 'packages/commons/material/material.module'; -// import { QRCodeModule } from 'angularx-qrcode'; - -// import { COMPONENTS } from './component'; -// import { SERVICES } from '../../settings/member/service'; -// import { MemberTotpStoreModule } from './member-totp-store.module'; - -// @NgModule({ -// imports: [ -// CommonModule, -// FormsModule, -// MaterialModule, -// FormsModule, -// ReactiveFormsModule, -// QRCodeModule, -// MemberTotpStoreModule -// ], -// exports: [ -// COMPONENTS, -// ], -// declarations: [ -// COMPONENTS, -// ], -// providers: [ -// SERVICES, -// ], -// }) -// export class MemberTotpModule { } diff --git a/src/packages/settings/member/service/index.ts b/src/packages/settings/member/service/index.ts deleted file mode 100644 index 4a051ca..0000000 --- a/src/packages/settings/member/service/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { MemberTotpService } from './member-totp.service'; - -export const SERVICES = [ - MemberTotpService, -]; diff --git a/src/packages/settings/member/store/index.ts b/src/packages/settings/member/store/index.ts deleted file mode 100644 index 2a0dcbd..0000000 --- a/src/packages/settings/member/store/index.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { - createSelector, - createFeatureSelector, - ActionReducerMap, -} from '@ngrx/store'; - -import { StateSelector } from 'packages/core/ngrx/store'; - -import { MODULE } from '../member-totp.constant'; - -import * as TotpStore from './totp'; - -export interface State { - totp: TotpStore.State; -} - -export const REDUCERS = { - totp: TotpStore.reducer, -}; - -export const EFFECTS = [ - TotpStore.Effects, -]; - -export const selectMemberTotpState = createFeatureSelector(MODULE.name); - -export const TotpSelector = new StateSelector(createSelector( - selectMemberTotpState, - (state: State) => state.totp -)); -