authenticator setup
This commit is contained in:
Kyle Spearrin
parent
e345bbcae0
commit
09ef907673
2
jslib
2
jslib
|
|
@ -1 +1 @@
|
|||
Subproject commit 3cc759791e12b7692fc2d2b4be1a2b010eee1c8e
|
||||
Subproject commit ec505b8c5508e4c8f6191c946b042a804c73c501
|
||||
|
|
@ -42,6 +42,7 @@ import { OptionsComponent } from './settings/options.component';
|
|||
import { ProfileComponent } from './settings/profile.component';
|
||||
import { PurgeVaultComponent } from './settings/purge-vault.component';
|
||||
import { SettingsComponent } from './settings/settings.component';
|
||||
import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authenticator.component';
|
||||
import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
|
||||
|
||||
import { ExportComponent } from './tools/export.component';
|
||||
|
|
@ -143,6 +144,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
|
|||
StopPropDirective,
|
||||
ToolsComponent,
|
||||
TrueFalseValueDirective,
|
||||
TwoFactorAuthenticatorComponent,
|
||||
TwoFactorComponent,
|
||||
TwoFactorOptionsComponent,
|
||||
TwoFactorSetupComponent,
|
||||
|
|
@ -163,6 +165,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
|
|||
PasswordGeneratorHistoryComponent,
|
||||
PurgeVaultComponent,
|
||||
ShareComponent,
|
||||
TwoFactorAuthenticatorComponent,
|
||||
TwoFactorOptionsComponent,
|
||||
],
|
||||
providers: [],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<div class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">
|
||||
{{'twoStepLogin' | i18n}}
|
||||
<small>{{'authenticatorAppTitle' | i18n}}</small>
|
||||
</h2>
|
||||
<button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<form #authForm (ngSubmit)="auth()" [appApiAction]="authPromise" ngNativeValidate *ngIf="!authed">
|
||||
<div class="modal-body">
|
||||
<p>{{'twoStepLoginAuthDesc' | i18n}}</p>
|
||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
|
||||
appAutoFocus>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="authForm.loading">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
<span>{{'continue' | i18n}}</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
|
||||
</div>
|
||||
</form>
|
||||
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
|
||||
<div class="modal-body">
|
||||
<ng-container *ngIf="!enabled">
|
||||
<p>{{'twoStepAuthenticatorDesc' | i18n}}</p>
|
||||
<p>
|
||||
<strong>1. {{'twoStepAuthenticatorDownloadApp' | i18n}}</strong>
|
||||
</p>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="enabled">
|
||||
<app-callout type="success" title="{{'enabled' | i18n}}" icon="fa-check-circle">
|
||||
<p>{{'twoStepLoginProviderEnabled' | i18n}}</p>
|
||||
{{'twoStepAuthenticatorReaddDesc' | i18n}}
|
||||
</app-callout>
|
||||
<p>{{'twoStepAuthenticatorNeedApp' | i18n}}</p>
|
||||
</ng-container>
|
||||
<ul class="fa-ul">
|
||||
<li>
|
||||
<i class="fa-li fa fa-apple"></i>{{'iosDevices' | i18n}}:
|
||||
<a href="https://itunes.apple.com/us/app/authy/id494168017?mt=8" target="_blank" rel="noopener">Authy</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa-li fa fa-android"></i>{{'androidDevices' | i18n}}:
|
||||
<a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank" rel="noopener">Authy</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fa-li fa fa-windows"></i>{{'windowsDevices' | i18n}}:
|
||||
<a href="https://www.microsoft.com/p/authenticator/9wzdncrfj3rj" target="_blank" rel="noopener">Microsoft Authenticator</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>{{'twoStepAuthenticatorAppsRecommended' | i18n}}</p>
|
||||
<p *ngIf="!enabled">
|
||||
<strong>2. {{'twoStepAuthenticatorScanCode' | i18n}}</strong>
|
||||
</p>
|
||||
<hr *ngIf="enabled">
|
||||
<p class="text-center" [ngClass]="{'mb-0': enabled}">
|
||||
<img [src]="qr" width="160" height="160" alt="">
|
||||
<br>
|
||||
<code title="{{'key' | i18n}}">{{key}}</code>
|
||||
</p>
|
||||
<ng-container *ngIf="!enabled">
|
||||
<label for="token">3. {{'twoStepAuthenticatorEnterCode' | i18n}}</label>
|
||||
<input id="token" type="text" name="Token" class="form-control" [(ngModel)]="token" required>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
|
||||
<i class="fa fa-spinner fa-spin"></i>
|
||||
<span *ngIf="!enabled">{{'save' | i18n}}</span>
|
||||
<span *ngIf="enabled">{{'disable' | i18n}}</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Output,
|
||||
} from '@angular/core';
|
||||
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
import { Angulartics2 } from 'angulartics2';
|
||||
|
||||
import { ApiService } from 'jslib/abstractions/api.service';
|
||||
import { CryptoService } from 'jslib/abstractions/crypto.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
|
||||
import { UserService } from 'jslib/abstractions/user.service';
|
||||
|
||||
import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
|
||||
import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProviderRequest';
|
||||
import { UpdateTwoFactorAuthenticatorRequest } from 'jslib/models/request/updateTwoFactorAuthenticatorRequest';
|
||||
import { TwoFactorAuthenticatorResponse } from 'jslib/models/response/twoFactorAuthenticatorResponse';
|
||||
|
||||
import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
|
||||
|
||||
@Component({
|
||||
selector: 'app-two-factor-authenticator',
|
||||
templateUrl: 'two-factor-authenticator.component.html',
|
||||
})
|
||||
export class TwoFactorAuthenticatorComponent {
|
||||
@Output() onUpdated = new EventEmitter<boolean>();
|
||||
|
||||
enabled = false;
|
||||
authed = false;
|
||||
key: string;
|
||||
qr: string;
|
||||
token: string;
|
||||
masterPassword: string;
|
||||
|
||||
authPromise: Promise<any>;
|
||||
formPromise: Promise<any>;
|
||||
|
||||
private masterPasswordHash: string;
|
||||
|
||||
constructor(private apiService: ApiService, private i18nService: I18nService,
|
||||
private analytics: Angulartics2, private toasterService: ToasterService,
|
||||
private cryptoService: CryptoService, private userService: UserService,
|
||||
private platformUtilsService: PlatformUtilsService) { }
|
||||
|
||||
async auth() {
|
||||
if (this.masterPassword == null || this.masterPassword === '') {
|
||||
this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
|
||||
this.i18nService.t('masterPassRequired'));
|
||||
return;
|
||||
}
|
||||
|
||||
const request = new PasswordVerificationRequest();
|
||||
request.masterPasswordHash = this.masterPasswordHash =
|
||||
await this.cryptoService.hashPassword(this.masterPassword, null);
|
||||
try {
|
||||
this.authPromise = this.apiService.getTwoFactorAuthenticator(request);
|
||||
const response = await this.authPromise;
|
||||
this.authed = true;
|
||||
await this.processResponse(response);
|
||||
} catch { }
|
||||
}
|
||||
|
||||
async submit() {
|
||||
if (this.enabled) {
|
||||
this.disable();
|
||||
} else {
|
||||
this.enable();
|
||||
}
|
||||
}
|
||||
|
||||
private async enable() {
|
||||
const request = new UpdateTwoFactorAuthenticatorRequest();
|
||||
request.masterPasswordHash = this.masterPasswordHash;
|
||||
request.token = this.token;
|
||||
request.key = this.key;
|
||||
try {
|
||||
this.formPromise = this.apiService.putTwoFactorAuthenticator(request);
|
||||
const response = await this.formPromise;
|
||||
await this.processResponse(response);
|
||||
this.analytics.eventTrack.next({ action: 'Enabled Two-step Authenticator' });
|
||||
this.onUpdated.emit(true);
|
||||
} catch { }
|
||||
}
|
||||
|
||||
private async disable() {
|
||||
const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('twoStepDisableDesc'),
|
||||
this.i18nService.t('disable'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const request = new TwoFactorProviderRequest();
|
||||
request.masterPasswordHash = this.masterPasswordHash;
|
||||
request.type = TwoFactorProviderType.Authenticator;
|
||||
this.formPromise = this.apiService.putTwoFactorDisable(request);
|
||||
await this.formPromise;
|
||||
this.enabled = false;
|
||||
this.analytics.eventTrack.next({ action: 'Disabled Two-step Authenticator' });
|
||||
this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled'));
|
||||
this.onUpdated.emit(false);
|
||||
} catch { }
|
||||
}
|
||||
|
||||
private async processResponse(response: TwoFactorAuthenticatorResponse) {
|
||||
this.token = null;
|
||||
this.enabled = response.enabled;
|
||||
this.key = response.key;
|
||||
this.qr = 'https://chart.googleapis.com/chart?chs=160x160&chld=L|0&cht=qr&chl=otpauth://totp/' +
|
||||
'Bitwarden:' + encodeURIComponent(await this.userService.getEmail()) +
|
||||
'%3Fsecret=' + encodeURIComponent(this.key) +
|
||||
'%26issuer=Bitwarden';
|
||||
}
|
||||
}
|
||||
|
|
@ -27,9 +27,16 @@
|
|||
{{p.description}}
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" [disabled]="!premium && p.premium">
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" [disabled]="!premium && p.premium" (click)="manage(p.type)">
|
||||
{{'manage' | i18n}}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ng-template #authenticatorTemplate></ng-template>
|
||||
<ng-template #recoveryTemplate></ng-template>
|
||||
<ng-template #duoTemplate></ng-template>
|
||||
<ng-template #emailTemplate></ng-template>
|
||||
<ng-template #yubikeyTemplate></ng-template>
|
||||
<ng-template #u2fTemplate></ng-template>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,42 @@
|
|||
import {
|
||||
Component,
|
||||
ComponentFactoryResolver,
|
||||
OnInit,
|
||||
Type,
|
||||
ViewChild,
|
||||
ViewContainerRef,
|
||||
} from '@angular/core';
|
||||
|
||||
import { ToasterService } from 'angular2-toaster';
|
||||
import { Angulartics2 } from 'angulartics2';
|
||||
|
||||
import { ApiService } from 'jslib/abstractions/api.service';
|
||||
import { I18nService } from 'jslib/abstractions/i18n.service';
|
||||
import { TokenService } from 'jslib/abstractions/token.service';
|
||||
|
||||
import { TwoFactorProviders } from 'jslib/services/auth.service';
|
||||
|
||||
import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
|
||||
|
||||
import { ModalComponent } from '../modal.component';
|
||||
|
||||
import { TwoFactorAuthenticatorComponent } from './two-factor-authenticator.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-two-factor-setup',
|
||||
templateUrl: 'two-factor-setup.component.html',
|
||||
})
|
||||
export class TwoFactorSetupComponent implements OnInit {
|
||||
@ViewChild('recoveryTemplate', { read: ViewContainerRef }) recoveryModalRef: ViewContainerRef;
|
||||
@ViewChild('authenticatorTemplate', { read: ViewContainerRef }) authenticatorModalRef: ViewContainerRef;
|
||||
@ViewChild('yubikeyTemplate', { read: ViewContainerRef }) yubikeyModalRef: ViewContainerRef;
|
||||
@ViewChild('u2fTemplate', { read: ViewContainerRef }) u2fModalRef: ViewContainerRef;
|
||||
@ViewChild('duoTemplate', { read: ViewContainerRef }) duoModalRef: ViewContainerRef;
|
||||
|
||||
providers: any[] = [];
|
||||
premium: boolean;
|
||||
loading = true;
|
||||
|
||||
constructor(private apiService: ApiService, private i18nService: I18nService,
|
||||
private analytics: Angulartics2, private toasterService: ToasterService,
|
||||
private tokenService: TokenService) { }
|
||||
private modal: ModalComponent = null;
|
||||
|
||||
constructor(private apiService: ApiService, private tokenService: TokenService,
|
||||
private componentFactoryResolver: ComponentFactoryResolver) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.premium = this.tokenService.getPremium();
|
||||
|
|
@ -66,4 +77,43 @@ export class TwoFactorSetupComponent implements OnInit {
|
|||
});
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
manage(type: TwoFactorProviderType) {
|
||||
switch (type) {
|
||||
case TwoFactorProviderType.Authenticator:
|
||||
const component = this.openModal(this.authenticatorModalRef, TwoFactorAuthenticatorComponent);
|
||||
component.onUpdated.subscribe((enabled: boolean) => {
|
||||
this.updateStatus(enabled, TwoFactorProviderType.Authenticator)
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private openModal<T>(ref: ViewContainerRef, type: Type<T>): T {
|
||||
if (this.modal != null) {
|
||||
this.modal.close();
|
||||
}
|
||||
|
||||
const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
|
||||
this.modal = ref.createComponent(factory).instance;
|
||||
const childComponent = this.modal.show<T>(type, ref);
|
||||
|
||||
this.modal.onClosed.subscribe(() => {
|
||||
this.modal = null;
|
||||
});
|
||||
return childComponent;
|
||||
}
|
||||
|
||||
private updateStatus(enabled: boolean, type: TwoFactorProviderType) {
|
||||
if (!enabled && this.modal != null) {
|
||||
this.modal.close();
|
||||
}
|
||||
this.providers.forEach((p) => {
|
||||
if (p.type === type) {
|
||||
p.enabled = enabled;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -978,5 +978,53 @@
|
|||
},
|
||||
"manage": {
|
||||
"message": "Manage"
|
||||
},
|
||||
"disable": {
|
||||
"message": "Disable"
|
||||
},
|
||||
"twoStepLoginProviderEnabled": {
|
||||
"message": "This two-step login provider is enabled on your account."
|
||||
},
|
||||
"twoStepLoginAuthDesc": {
|
||||
"message": "Enter your master password to modify two-step login settings."
|
||||
},
|
||||
"twoStepAuthenticatorDesc": {
|
||||
"message": "Follow these steps to set up two-step login with an authenticator app:"
|
||||
},
|
||||
"twoStepAuthenticatorDownloadApp": {
|
||||
"message": "Download a two-step authenticator app"
|
||||
},
|
||||
"twoStepAuthenticatorNeedApp": {
|
||||
"message": "Need a two-step authenticator app? Download one of the following"
|
||||
},
|
||||
"iosDevices": {
|
||||
"message": "iOS devices"
|
||||
},
|
||||
"androidDevices": {
|
||||
"message": "Android devices"
|
||||
},
|
||||
"windowsDevices": {
|
||||
"message": "Windows devices"
|
||||
},
|
||||
"twoStepAuthenticatorAppsRecommended": {
|
||||
"message": "These apps are recommended, however, other authenticator apps will also work."
|
||||
},
|
||||
"twoStepAuthenticatorScanCode": {
|
||||
"message": "Scan this QR code with your authenticator app"
|
||||
},
|
||||
"key": {
|
||||
"message": "Key"
|
||||
},
|
||||
"twoStepAuthenticatorEnterCode": {
|
||||
"message": "Enter the resulting 6 digit verification code from the app"
|
||||
},
|
||||
"twoStepAuthenticatorReaddDesc": {
|
||||
"message": "In case you need to add it to another device, below is the QR code (or key) required by your authenticator app."
|
||||
},
|
||||
"twoStepDisableDesc": {
|
||||
"message": "Are you sure you want to disable this two-step login provider?"
|
||||
},
|
||||
"twoStepDisabled": {
|
||||
"message": "Two-step login provider disabled."
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue