member_webapp/@overflow/member/component/settings/totp/config/config-setting.component.html

97 lines
4.2 KiB
HTML
Raw Normal View History

2018-04-19 15:40:15 +00:00
<div class="ui-g">
<div class="ui-g-12">
<b>구글 인증기(OTP)</b>는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.
2018-04-19 12:35:11 +00:00
연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.
</div>
2018-04-19 15:40:15 +00:00
<div class="ui-g">
<div class="ui-g-6">
2018-04-20 09:46:36 +00:00
<p-card subtitle="IOS 회원">
<p>App Store에서 "Authenticator" 검색 후 다운로드 해주세요.<br><br></p>
2018-04-19 15:40:15 +00:00
<button type="button" pButton label="App Store" icon="fa-check"></button>
</p-card>
</div>
<div class="ui-g-6">
2018-04-20 09:46:36 +00:00
<p-card subtitle="안드로이드 회원">
<p>구글 플레이 스토어 또는 핸드폰 브라우저를 통해 "구글 인증기(OTP)" 검색 후 다운로드 해주세요.<br><br></p>
2018-04-19 15:40:15 +00:00
<button type="button" pButton label="Google Play" icon="fa-check"></button>
2018-04-20 08:35:36 +00:00
</p-card>
2018-04-19 15:40:15 +00:00
</div>
2018-04-19 12:35:11 +00:00
</div>
2018-04-19 15:40:15 +00:00
<div class="ui-g-12">
<h2>Key & Backup Code</h2>
2018-04-20 08:35:36 +00:00
<div class="ui-g-3" *ngIf="totp">
<qrcode [qrdata]="totp.uri" [size]="150" [level]="'M'"></qrcode>
2018-04-19 15:40:15 +00:00
</div>
2018-04-20 08:35:36 +00:00
<div class="ui-g-9">
<div style="height: 80px;"></div>
<div class="ui-bottom-space-10" *ngIf="totp">{{totp.key}}, {{totp.uri}}</div>
<span class="md-inputfield">
<input type="text" id="code" autocomplete="off" placeholder="Please enter your code" formControlName="code"
required class="ui-inputtext ui-corner-all ui-state-default ui-widget" [formGroup]="totpForm" (ngSubmit)="totpRegistClick()">
</span>
</div>
2018-04-19 15:40:15 +00:00
<!--QR Code print & Key Print-->
</div>
<div class="ui-g-12" dir="rtl">
2018-04-20 08:35:36 +00:00
<button type="button" class="ui-button-width-fit ui-button-secondary" pButton icon="fa-close" (click)="onCancel()" label="No"></button>
<button type="button" class="ui-button-width-fit" pButton icon="fa-check" (click)="totpSettingDisplay=false" label="Yes"></button>
2018-04-19 13:29:06 +00:00
</div>
2018-04-19 12:35:11 +00:00
</div>
<!--<p-panel>-->
<!--<p-header [style]="{'margin-bottom':'20px'}">-->
<!--<div>-->
<!--구글 인증기(OTP)는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.-->
<!--연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.-->
<!--</div>-->
<!--</p-header>-->
<!--구글 인증기(OTP)는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.-->
<!--연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.-->
<!--</p-panel>-->
<!--<p-panel>-->
<!--</p-panel>-->
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">-->
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">-->
<!--<mat-card class="example-card">-->
<!--<mat-card-header>-->
<!--<mat-card-title>QR Code</mat-card-title>-->
<!--&lt;!&ndash;<mat-card-subtitle>Select Target</mat-card-subtitle>&ndash;&gt;-->
<!--</mat-card-header>-->
<!--<mat-card-content>-->
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="left">-->
<!--<qrcode [qrdata]="'otpauth://totp/overFlow:geekdev@naver.com?secret=X6AWAK573M5372NM'" [size]="128" [level]="'M'"></qrcode>-->
<!--</div>-->
<!--</mat-card-content>-->
<!--</mat-card>-->
<!--</div>-->
<!--<div fxLayout="row" fxLayoutWrap fxLayoutAlign="center">-->
<!--<mat-card class="example-card">-->
<!--<mat-card-header>-->
<!--<mat-card-title>Secret Code</mat-card-title>-->
<!--<mat-card-subtitle>X6AWAK573M5372NM</mat-card-subtitle>-->
<!--</mat-card-header>-->
<!--<mat-card-content>-->
<!--<form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="registClick()">-->
<!--<mat-form-field class="full-width">-->
<!--<input type="text" id="code" class="input" placeholder="Please enter your code"-->
<!--formControlName="code" required matInput>-->
<!--</mat-form-field>-->
<!--&lt;!&ndash;<div *ngIf="formErrors.email" class="help is-danger">&ndash;&gt;-->
<!--&lt;!&ndash;{{ formErrors.email }}&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--</form>-->
<!--</mat-card-content>-->
<!--</mat-card>-->
<!--</div>-->