mirror of
https://github.com/bitwarden/desktop.git
synced 2024-12-25 16:47:55 +01:00
i18n placeholder support. 2fa options selection.
This commit is contained in:
parent
fd15c09406
commit
3e408c4ea7
28
src/app/accounts/two-factor-options.component.html
Normal file
28
src/app/accounts/two-factor-options.component.html
Normal file
@ -0,0 +1,28 @@
|
||||
<div class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
{{'twoStepOptions' | i18n}}
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<a href="#" appStopClick *ngFor="let p of providers" class="box-content-row"
|
||||
(click)="choose(p)">
|
||||
<img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="img-right">
|
||||
<span class="text">{{p.name}}</span>
|
||||
<span class="detail">{{p.description}}</span>
|
||||
</a>
|
||||
<a href="#" appStopClick class="box-content-row" (click)="recover()">
|
||||
<span class="text">{{'recoveryCodeTitle' | i18n}}</span>
|
||||
<span class="detail">{{'recoveryCodeDesc' | i18n}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
70
src/app/accounts/two-factor-options.component.ts
Normal file
70
src/app/accounts/two-factor-options.component.ts
Normal file
@ -0,0 +1,70 @@
|
||||
import * as template from './two-factor-options.component.html';
|
||||
|
||||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
} from '@angular/core';
|
||||
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Angulartics2 } from 'angulartics2';
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
|
||||
import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
|
||||
|
||||
import { AuthService } from 'jslib/abstractions/auth.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
||||
|
||||
import { TwoFactorProviders } from 'jslib/services/auth.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-two-factor-options',
|
||||
template: template,
|
||||
})
|
||||
export class TwoFactorOptionsComponent implements OnInit {
|
||||
@Output() onProviderSelected = new EventEmitter<TwoFactorProviderType>();
|
||||
@Output() onRecoverSelected = new EventEmitter();
|
||||
|
||||
providers: any[] = [];
|
||||
|
||||
constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
|
||||
private toasterService: ToasterService, private i18nService: I18nService,
|
||||
private platformUtilsService: PlatformUtilsService) { }
|
||||
|
||||
ngOnInit() {
|
||||
if (this.authService.twoFactorProviders.has(TwoFactorProviderType.Authenticator)) {
|
||||
this.providers.push(TwoFactorProviders[TwoFactorProviderType.Authenticator]);
|
||||
}
|
||||
|
||||
if (this.authService.twoFactorProviders.has(TwoFactorProviderType.Yubikey)) {
|
||||
this.providers.push(TwoFactorProviders[TwoFactorProviderType.Yubikey]);
|
||||
}
|
||||
|
||||
if (this.authService.twoFactorProviders.has(TwoFactorProviderType.Duo)) {
|
||||
this.providers.push(TwoFactorProviders[TwoFactorProviderType.Duo]);
|
||||
}
|
||||
|
||||
if (this.authService.twoFactorProviders.has(TwoFactorProviderType.U2f) &&
|
||||
this.platformUtilsService.supportsU2f(window)) {
|
||||
this.providers.push(TwoFactorProviders[TwoFactorProviderType.U2f]);
|
||||
}
|
||||
|
||||
if (this.authService.twoFactorProviders.has(TwoFactorProviderType.Email)) {
|
||||
this.providers.push(TwoFactorProviders[TwoFactorProviderType.Email]);
|
||||
}
|
||||
}
|
||||
|
||||
choose(p: any) {
|
||||
this.onProviderSelected.emit(p.type);
|
||||
}
|
||||
|
||||
recover() {
|
||||
this.analytics.eventTrack.next({ action: 'Selected Recover' });
|
||||
this.platformUtilsService.launchUri('https://help.bitwarden.com/article/lost-two-step-device/');
|
||||
this.onRecoverSelected.emit();
|
||||
}
|
||||
}
|
@ -2,7 +2,9 @@
|
||||
<div class="content">
|
||||
<h1>{{title}}</h1>
|
||||
<p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p>
|
||||
<p *ngIf="selectedProviderType === providerType.Email">{{'enterVerificationCodeEmail' | i18n}}</p>
|
||||
<p *ngIf="selectedProviderType === providerType.Email">
|
||||
{{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
|
||||
</p>
|
||||
<div class="box last"
|
||||
*ngIf="selectedProviderType === providerType.Email || selectedProviderType === providerType.Authenticator">
|
||||
<div class="box-content">
|
||||
@ -43,7 +45,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="box last" *ngIf="selectedProviderType === null">
|
||||
<div class="box last" *ngIf="!selectedProviderType">
|
||||
<div class="box-content">
|
||||
<div class="box-content-row">
|
||||
<p>{{'noTwoStepProviders' | i18n}}</p>
|
||||
@ -52,7 +54,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
|
||||
<button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick
|
||||
*ngIf="selectedProviderType && selectedProviderType !== providerType.Duo">
|
||||
<span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'continue' | i18n}}</span>
|
||||
<i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
|
||||
</button>
|
||||
@ -60,6 +63,11 @@
|
||||
</div>
|
||||
<div class="sub-options">
|
||||
<a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
|
||||
<a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise"
|
||||
*ngIf="selectedProviderType === providerType.Email">
|
||||
{{'sendVerificationCodeEmailAgain' | i18n}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<ng-template #twoFactorOptions></ng-template>
|
||||
|
@ -2,7 +2,10 @@ import * as template from './two-factor.component.html';
|
||||
|
||||
import {
|
||||
Component,
|
||||
ComponentFactoryResolver,
|
||||
OnInit,
|
||||
ViewChild,
|
||||
ViewContainerRef,
|
||||
} from '@angular/core';
|
||||
|
||||
import { Router } from '@angular/router';
|
||||
@ -10,6 +13,9 @@ import { Router } from '@angular/router';
|
||||
import { Angulartics2 } from 'angulartics2';
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
|
||||
import { TwoFactorOptionsComponent } from './two-factor-options.component';
|
||||
import { ModalComponent } from '../modal.component';
|
||||
|
||||
import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
|
||||
|
||||
import { TwoFactorEmailRequest } from 'jslib/models/request/twoFactorEmailRequest';
|
||||
@ -26,6 +32,8 @@ import { TwoFactorProviders } from 'jslib/services/auth.service';
|
||||
template: template,
|
||||
})
|
||||
export class TwoFactorComponent implements OnInit {
|
||||
@ViewChild('twoFactorOptions', { read: ViewContainerRef }) twoFactorOptionsModal: ViewContainerRef;
|
||||
|
||||
token: string = '';
|
||||
remember: boolean = false;
|
||||
u2fReady: boolean = false;
|
||||
@ -35,14 +43,14 @@ export class TwoFactorComponent implements OnInit {
|
||||
u2fSupported: boolean = false;
|
||||
u2f: any = null;
|
||||
title: string = '';
|
||||
useVerificationCode: boolean = false;
|
||||
twoFactorEmail: string = null;
|
||||
formPromise: Promise<any>;
|
||||
emailPromise: Promise<any>;
|
||||
|
||||
constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
|
||||
private toasterService: ToasterService, private i18nService: I18nService, private apiService: ApiService,
|
||||
private platformUtilsService: PlatformUtilsService) {
|
||||
private platformUtilsService: PlatformUtilsService,
|
||||
private componentFactoryResolver: ComponentFactoryResolver) {
|
||||
this.u2fSupported = this.platformUtilsService.supportsU2f(window);
|
||||
}
|
||||
|
||||
@ -58,10 +66,6 @@ export class TwoFactorComponent implements OnInit {
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.useVerificationCode = this.selectedProviderType === TwoFactorProviderType.Email ||
|
||||
this.selectedProviderType === TwoFactorProviderType.Authenticator ||
|
||||
this.selectedProviderType === TwoFactorProviderType.Yubikey;
|
||||
|
||||
if (this.selectedProviderType == null) {
|
||||
this.title = this.i18nService.t('loginUnavailable');
|
||||
return;
|
||||
@ -135,17 +139,36 @@ export class TwoFactorComponent implements OnInit {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.emailPromise != null) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = new TwoFactorEmailRequest(this.authService.email, this.authService.masterPasswordHash);
|
||||
this.emailPromise = this.apiService.postTwoFactorEmail(request);
|
||||
await this.emailPromise;
|
||||
if (doToast) {
|
||||
// TODO toast
|
||||
this.toasterService.popAsync('success', null,
|
||||
this.i18nService.t('verificationCodeEmailSent', this.twoFactorEmail));
|
||||
}
|
||||
} catch { }
|
||||
|
||||
this.emailPromise = null;
|
||||
}
|
||||
|
||||
anotherMethod() {
|
||||
// TODO
|
||||
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
||||
const modal = this.twoFactorOptionsModal.createComponent(factory).instance;
|
||||
const childComponent = modal.show<TwoFactorOptionsComponent>(TwoFactorOptionsComponent,
|
||||
this.twoFactorOptionsModal);
|
||||
|
||||
childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
|
||||
modal.close();
|
||||
this.selectedProviderType = provider;
|
||||
await this.init();
|
||||
});
|
||||
childComponent.onRecoverSelected.subscribe(() => {
|
||||
modal.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -32,6 +32,7 @@ import { SearchCiphersPipe } from './pipes/search-ciphers.pipe';
|
||||
import { StopClickDirective } from './directives/stop-click.directive';
|
||||
import { StopPropDirective } from './directives/stop-prop.directive';
|
||||
import { TwoFactorComponent } from './accounts/two-factor.component';
|
||||
import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
|
||||
import { VaultComponent } from './vault/vault.component';
|
||||
import { ViewComponent } from './vault/view.component';
|
||||
|
||||
@ -71,15 +72,16 @@ import { ViewComponent } from './vault/view.component';
|
||||
StopClickDirective,
|
||||
StopPropDirective,
|
||||
TwoFactorComponent,
|
||||
TwoFactorOptionsComponent,
|
||||
VaultComponent,
|
||||
ViewComponent,
|
||||
WebviewDirective,
|
||||
],
|
||||
entryComponents: [
|
||||
AttachmentsComponent,
|
||||
FolderAddEditComponent,
|
||||
ModalComponent,
|
||||
PasswordGeneratorComponent,
|
||||
TwoFactorOptionsComponent,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent],
|
||||
|
@ -9,10 +9,9 @@ import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
name: 'i18n',
|
||||
})
|
||||
export class I18nPipe implements PipeTransform {
|
||||
constructor(private i18nService: I18nService) {
|
||||
}
|
||||
constructor(private i18nService: I18nService) { }
|
||||
|
||||
transform(id: string): string {
|
||||
return this.i18nService.t(id);
|
||||
transform(id: string, p1?: string, p2?: string, p3?: string): string {
|
||||
return this.i18nService.t(id, p1, p2, p3);
|
||||
}
|
||||
}
|
||||
|
BIN
src/images/two-factor/0.png
Normal file
BIN
src/images/two-factor/0.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.9 KiB |
BIN
src/images/two-factor/1.png
Normal file
BIN
src/images/two-factor/1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.6 KiB |
BIN
src/images/two-factor/2.png
Normal file
BIN
src/images/two-factor/2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
BIN
src/images/two-factor/3.png
Normal file
BIN
src/images/two-factor/3.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
BIN
src/images/two-factor/4.png
Normal file
BIN
src/images/two-factor/4.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.7 KiB |
@ -459,7 +459,22 @@
|
||||
"message": "Enter the 6 digit verification code from your authenticator app."
|
||||
},
|
||||
"enterVerificationCodeEmail": {
|
||||
"message": "Enter the 6 digit verification code that was emailed to"
|
||||
"message": "Enter the 6 digit verification code that was emailed to $EMAIL$.",
|
||||
"placeholders": {
|
||||
"email": {
|
||||
"content": "$1",
|
||||
"example": "example@gmail.com"
|
||||
}
|
||||
}
|
||||
},
|
||||
"verificationCodeEmailSent": {
|
||||
"message": "Verification email sent to $EMAIL$.",
|
||||
"placeholders": {
|
||||
"email": {
|
||||
"content": "$1",
|
||||
"example": "example@gmail.com"
|
||||
}
|
||||
}
|
||||
},
|
||||
"rememberMe": {
|
||||
"message": "Remember me"
|
||||
@ -510,5 +525,17 @@
|
||||
},
|
||||
"emailDesc": {
|
||||
"message": "Verification codes will be emailed to you."
|
||||
},
|
||||
"loginUnavailable": {
|
||||
"message": "Login Unavailable"
|
||||
},
|
||||
"noTwoStepProviders": {
|
||||
"message": "This account has two-step login enabled, however, none of the configured two-step providers are supported by this device."
|
||||
},
|
||||
"noTwoStepProviders2": {
|
||||
"message": "Please add additional providers that are better supported across devices (such as an authenticator app)."
|
||||
},
|
||||
"twoStepOptions": {
|
||||
"message": "Two-step Login Options"
|
||||
}
|
||||
}
|
||||
|
@ -26,8 +26,6 @@
|
||||
padding: 10px 15px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-all;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
@ -73,6 +71,21 @@
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.text, .detail {
|
||||
display: block;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: $font-size-small;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.img-right {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.row-main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
@ -106,8 +106,8 @@
|
||||
|
||||
#duo-frame {
|
||||
background: url('../images/loading.svg') 0 0 no-repeat;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 330px;
|
||||
margin: 0 -150px 15px -150px;
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
@ -115,3 +115,13 @@
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
@ -78,6 +78,15 @@
|
||||
.sub-options {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.settings-icon {
|
||||
|
@ -41,17 +41,33 @@ export class I18nService implements I18nServiceAbstraction {
|
||||
}
|
||||
}
|
||||
|
||||
t(id: string): string {
|
||||
return this.translate(id);
|
||||
t(id: string, p1?: string, p2?: string, p3?: string): string {
|
||||
return this.translate(id, p1, p2, p3);
|
||||
}
|
||||
|
||||
translate(id: string): string {
|
||||
translate(id: string, p1?: string, p2?: string, p3?: string): string {
|
||||
let result: string;
|
||||
if (this.localeMessages.hasOwnProperty(id) && this.localeMessages[id]) {
|
||||
return this.localeMessages[id];
|
||||
result = this.localeMessages[id];
|
||||
} else if (this.defaultMessages.hasOwnProperty(id) && this.defaultMessages[id]) {
|
||||
return this.defaultMessages[id];
|
||||
result = this.defaultMessages[id];
|
||||
} else {
|
||||
result = '';
|
||||
}
|
||||
return '';
|
||||
|
||||
if (result !== '') {
|
||||
if (p1 != null) {
|
||||
result = result.split('__$1__').join(p1);
|
||||
}
|
||||
if (p2 != null) {
|
||||
result = result.split('__$2__').join(p2);
|
||||
}
|
||||
if (p3 != null) {
|
||||
result = result.split('__$3__').join(p3);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private loadMessages(locale: string, messagesObj: any): Promise<any> {
|
||||
@ -59,8 +75,25 @@ export class I18nService implements I18nServiceAbstraction {
|
||||
const filePath = path.join(__dirname, this.localesDirectory + '/' + formattedLocale + '/messages.json');
|
||||
const locales = (window as any).require(filePath);
|
||||
for (const prop in locales) {
|
||||
if (locales.hasOwnProperty(prop)) {
|
||||
messagesObj[prop] = locales[prop].message;
|
||||
if (!locales.hasOwnProperty(prop)) {
|
||||
continue;
|
||||
}
|
||||
messagesObj[prop] = locales[prop].message;
|
||||
|
||||
if (locales[prop].placeholders) {
|
||||
for (const placeProp in locales[prop].placeholders) {
|
||||
if (!locales[prop].placeholders.hasOwnProperty(placeProp) ||
|
||||
!locales[prop].placeholders[placeProp].content) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const replaceToken = '\\$' + placeProp.toUpperCase() + '\\$';
|
||||
let replaceContent = locales[prop].placeholders[placeProp].content;
|
||||
if (replaceContent === '$1' || replaceContent === '$2' || replaceContent === '$3') {
|
||||
replaceContent = '__' + replaceContent + '__';
|
||||
}
|
||||
messagesObj[prop] = messagesObj[prop].replace(new RegExp(replaceToken, 'g'), replaceContent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -76,6 +76,7 @@ const renderer = {
|
||||
},
|
||||
{
|
||||
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
exclude: /loading.svg/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
@ -95,7 +96,8 @@ const renderer = {
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
}
|
||||
]
|
||||
],
|
||||
publicPath: '../'
|
||||
})
|
||||
},
|
||||
]
|
||||
|
Loading…
Reference in New Issue
Block a user