devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

callout component

This commit is contained in:
Kyle Spearrin 2018-06-25 20:49:49 -04:00
parent 1717960a8c
commit 03dfda7a17
11 changed files with 86 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@ -17,6 +17,7 @@ import { AppComponent } from './app.component';
import { ModalComponent } from './modal.component';
import { AvatarComponent } from './components/avatar.component';
import { CalloutComponent } from './components/callout.component';
import { FooterComponent } from './layouts/footer.component';
import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
@ -102,6 +103,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
BulkDeleteComponent,
BulkMoveComponent,
BulkShareComponent,
CalloutComponent,
ChangeEmailComponent,
ChangePasswordComponent,
CiphersComponent,

7
src/app/components/callout.component.html Normal file
View File

@ -0,0 +1,7 @@
<div class="callout callout-{{calloutStyle}}" role="alert">
<h3 class="callout-heading" *ngIf="title">
<i class="fa {{icon}}" *ngIf="icon"></i>
{{title}}
</h3>
<ng-content></ng-content>
</div>

53
src/app/components/callout.component.ts Normal file
View File

@ -0,0 +1,53 @@
import {
Component,
Input,
OnInit,
} from '@angular/core';
import { I18nService } from 'jslib/abstractions/i18n.service';
@Component({
selector: 'app-callout',
templateUrl: 'callout.component.html',
})
export class CalloutComponent implements OnInit {
@Input() type = 'info';
@Input() icon: string;
@Input() title: string;
calloutStyle: string;
constructor(private i18nService: I18nService) { }
ngOnInit() {
this.calloutStyle = this.type;
if (this.type === 'warning' || this.type === 'danger') {
if (this.type === 'danger') {
this.calloutStyle = 'danger';
}
if (this.title === undefined) {
this.title = this.i18nService.t('warning');
}
if (this.icon === undefined) {
this.icon = 'fa-warning';
}
} else if (this.type === 'error') {
this.calloutStyle = 'danger';
if (this.title === undefined) {
this.title = this.i18nService.t('error');
}
if (this.icon === undefined) {
this.icon = 'fa-bolt';
}
} else if (this.type === 'tip') {
this.calloutStyle = 'success';
if (this.title === undefined) {
this.title = this.i18nService.t('tip');
}
if (this.icon === undefined) {
this.icon = 'fa-lightbulb-o';
}
}
}
}

5
src/app/settings/change-email.component.html
View File

@ -15,10 +15,7 @@
<ng-container *ngIf="tokenSent">
<hr>
<p>{{'changeEmailDesc' | i18n : newEmail}}</p>
<div class="callout callout-warning" role="alert">
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
<p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
</div>
<app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
<div class="row">
<div class="col-6">
<div class="form-group">

5
src/app/settings/change-password.component.html
View File

@ -1,7 +1,4 @@
<div class="callout callout-warning" role="alert">
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
<p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
</div>
<app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
<div class="row">
<div class="col-6">

5
src/app/settings/deauthorize-sessions.component.html
View File

@ -9,10 +9,7 @@
</div>
<div class="modal-body">
<p>{{'deauthorizeSessionsDesc' | i18n}}</p>
<div class="callout callout-warning" role="alert">
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
<p class="mb-0">{{'deauthorizeSessionsWarning' | i18n}}</p>
</div>
<app-callout type="warning">{{'deauthorizeSessionsWarning' | i18n}}</app-callout>
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
appAutoFocus>

5
src/app/settings/delete-account.component.html
View File

@ -9,10 +9,7 @@
</div>
<div class="modal-body">
<p>{{'deleteAccountDesc' | i18n}}</p>
<div class="callout callout-warning" role="alert">
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
<p class="mb-0">{{'deleteAccountWarning' | i18n}}</p>
</div>
<app-callout type="warning">{{'deleteAccountWarning' | i18n}}</app-callout>
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
appAutofocus>

5
src/app/settings/purge-vault.component.html
View File

@ -9,10 +9,7 @@
</div>
<div class="modal-body">
<p>{{'purgeVaultDesc' | i18n}}</p>
<div class="callout callout-warning" role="alert">
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
<p class="mb-0">{{'purgeVaultWarning' | i18n}}</p>
</div>
<app-callout type="warning">{{'purgeVaultWarning' | i18n}}</app-callout>
<label for="masterPassword">{{'masterPass' | i18n}}</label>
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
appAutofocus>

5
src/app/tools/export.component.html
View File

@ -3,10 +3,7 @@
<h1>{{'exportVault' | i18n}}</h1>
</div>
<p>{{'exportMasterPassword' | i18n}}</p>
<div class="callout callout-warning" role="alert">
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
<p class="mb-0">{{'exportWarning' | i18n}}</p>
</div>
<app-callout type="warning">{{'exportWarning' | i18n}}</app-callout>
<div class="row">
<div class="form-group col-6">
<label for="masterPassword">{{'masterPass' | i18n}}</label>

35
src/app/tools/import.component.html
View File

@ -14,25 +14,22 @@
</div>
</div>
</div>
<div class="callout callout-info" role="alert" *ngIf="format">
<h3 class="callout-heading">{{'instructionsFor' | i18n : getFormatName()}}</h3>
<p class="mb-0">
<ng-container *ngIf="format === 'bitwardencsv'">
See detailed instructions on our help site at
<a target="_blank" href="https://help.bitwarden.com/article/export-your-data/">https://help.bitwarden.com/article/export-your-data/</a>
</ng-container>
<ng-container *ngIf="format === 'lastpasscsv'">
See detailed instructions on our help site at
<a target="_blank" href="https://help.bitwarden.com/article/import-from-lastpass/">https://help.bitwarden.com/article/import-from-lastpass/</a>
</ng-container>
<ng-container *ngIf="format === 'keepassxcsv'">
Using the KeePassX desktop application, navigate to "Database" &rarr; "Export to CSV file" and save the CSV file.
</ng-container>
<ng-container *ngIf="format === 'aviracsv'">
In the Avira web vault, go to "Settings" &rarr; "My Data" &rarr; "Export data" and save the CSV file.
</ng-container>
</p>
</div>
<app-callout type="info" title="{{getFormatInstructionTitle()}}" *ngIf="format">
<ng-container *ngIf="format === 'bitwardencsv'">
See detailed instructions on our help site at
<a target="_blank" href="https://help.bitwarden.com/article/export-your-data/">https://help.bitwarden.com/article/export-your-data/</a>
</ng-container>
<ng-container *ngIf="format === 'lastpasscsv'">
See detailed instructions on our help site at
<a target="_blank" href="https://help.bitwarden.com/article/import-from-lastpass/">https://help.bitwarden.com/article/import-from-lastpass/</a>
</ng-container>
<ng-container *ngIf="format === 'keepassxcsv'">
Using the KeePassX desktop application, navigate to "Database" &rarr; "Export to CSV file" and save the CSV file.
</ng-container>
<ng-container *ngIf="format === 'aviracsv'">
In the Avira web vault, go to "Settings" &rarr; "My Data" &rarr; "Export data" and save the CSV file.
</ng-container>
</app-callout>
<div class="row">
<div class="col-6">
<div class="form-group">

4
src/app/tools/import.component.ts
View File

@ -165,14 +165,14 @@ export class ImportComponent {
}
}
getFormatName() {
getFormatInstructionTitle() {
if (this.format == null) {
return null;
}
const results = this.featuredImportOptions.concat(this.importOptions).filter((o) => o.id === this.format);
if (results.length > 0) {
return results[0].name;
return this.i18nService.t('instructionsFor', results[0].name);
}
return null;
}