u2f support on 2fa page

This commit is contained in:
Kyle Spearrin 2018-04-04 16:29:43 -04:00
parent 167acd1929
commit a6b87bf501
6 changed files with 64 additions and 16 deletions

2
jslib

@ -1 +1 @@
Subproject commit f673bd62d7abb773fa5a6abfb5307b7c3feca59b
Subproject commit 013bf20a35c74383389337ac2c5ae9ac19a0bba7

View File

@ -1049,5 +1049,8 @@
"organization": {
"message": "Organization",
"description": "An entity of multiple related people (ex. a team or business organization)."
},
"loading": {
"message": "Loading..."
}
}

View File

@ -1,7 +1,7 @@
<form id="two-factor-page" #form (ngSubmit)="submit()" [appApiAction]="formPromise">
<header>
<div class="left">
<a routerLink="/login">{{'cancel' | i18n}}</a>
<a routerLink="/login">{{'back' | i18n}}</a>
</div>
<div class="center">
<span class="title">{{title}}</span>
@ -17,13 +17,15 @@
</header>
<ng-container *ngIf="selectedProviderType === providerType.Authenticator ||
selectedProviderType === providerType.Email">
<div class="content">
<p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p>
<p *ngIf="selectedProviderType === providerType.Email">
<div class="content text-center">
<span *ngIf="selectedProviderType === providerType.Authenticator">
{{'enterVerificationCodeApp' | i18n}}
</span>
<span *ngIf="selectedProviderType === providerType.Email">
{{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
</p>
</span>
</div>
<div class="box">
<div class="box first">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code">{{'verificationCode' | i18n}}</label>
@ -37,11 +39,11 @@
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<div class="content">
<div class="content text-center">
<p>{{'insertYubiKey' | i18n}}</p>
<img src="../images/yubikey.jpg" class="img-rounded img-responsive" alt="">
</div>
<div class="box">
<div class="box first">
<div class="box-content">
<div class="box-content-row" appBoxRow>
<label for="code" class="sr-only">{{'verificationCode' | i18n}}</label>
@ -54,6 +56,23 @@
</div>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.U2f">
<div class="content text-center">
<span *ngIf="!u2fReady">{{'loading' | i18n}}</span>
<div *ngIf="u2fReady">
<p>{{'insertU2f' | i18n}}</p>
<img src="../images/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
</div>
</div>
<div class="box first">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label>
<input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.Duo ||
selectedProviderType === providerType.OrganizationDuo">
<div id="duo-frame"><iframe id="duo_iframe"></iframe></div>
@ -66,18 +85,19 @@
</div>
</div>
</ng-container>
<div class="content" *ngIf="selectedProviderType == null">
<div class="content text-center" *ngIf="selectedProviderType == null">
<p>{{'noTwoStepProviders' | i18n}}</p>
<p>{{'noTwoStepProviders2' | i18n}}</p>
</div>
<div class="content">
<p class="text-center">
<div class="content no-vpad text-center" *ngIf="selectedProviderType != null">
<p>
<a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
</p>
<p class="text-center" *ngIf="selectedProviderType === providerType.Email">
<p *ngIf="selectedProviderType === providerType.Email">
<a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise">
{{'sendVerificationCodeEmailAgain' | i18n}}
</a>
</p>
</div>
</form>
<iframe id="u2f_iframe" hidden></iframe>

View File

@ -9,6 +9,7 @@ import { Angulartics2 } from 'angulartics2';
import { ApiService } from 'jslib/abstractions/api.service';
import { AuthService } from 'jslib/abstractions/auth.service';
import { EnvironmentService } from 'jslib/abstractions/environment.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { SyncService } from 'jslib/abstractions/sync.service';
@ -23,9 +24,10 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
constructor(authService: AuthService, router: Router,
analytics: Angulartics2, toasterService: ToasterService,
i18nService: I18nService, apiService: ApiService,
platformUtilsService: PlatformUtilsService, syncService: SyncService) {
platformUtilsService: PlatformUtilsService, syncService: SyncService,
environmentService: EnvironmentService) {
super(authService, router, analytics, toasterService, i18nService, apiService,
platformUtilsService, syncService);
platformUtilsService, syncService, window, environmentService);
}
anotherMethod() {

View File

@ -4,6 +4,10 @@
width: 100%;
margin: 10px 0;
&.first {
margin-top: 0;
}
.box-header {
margin: 0 10px 5px 10px;
color: $gray-light;

View File

@ -32,6 +32,16 @@ small {
margin: 0 !important;
}
.no-vmargin {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.no-vpad {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
[hidden] {
display: none !important;
}
@ -62,7 +72,16 @@ small {
}
#duo-frame {
// TODO
background: url('../popup2/images/loading.svg') 0 0 no-repeat;
width: 100%;
height: 470px;
margin-bottom: -10px;
iframe {
width: 100%;
height: 100%;
border: none;
}
}
app-root > #loading {