callout component
This commit is contained in:
parent
1717960a8c
commit
03dfda7a17
|
@ -17,6 +17,7 @@ import { AppComponent } from './app.component';
|
||||||
import { ModalComponent } from './modal.component';
|
import { ModalComponent } from './modal.component';
|
||||||
|
|
||||||
import { AvatarComponent } from './components/avatar.component';
|
import { AvatarComponent } from './components/avatar.component';
|
||||||
|
import { CalloutComponent } from './components/callout.component';
|
||||||
|
|
||||||
import { FooterComponent } from './layouts/footer.component';
|
import { FooterComponent } from './layouts/footer.component';
|
||||||
import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
|
import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
|
||||||
|
@ -102,6 +103,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
|
||||||
BulkDeleteComponent,
|
BulkDeleteComponent,
|
||||||
BulkMoveComponent,
|
BulkMoveComponent,
|
||||||
BulkShareComponent,
|
BulkShareComponent,
|
||||||
|
CalloutComponent,
|
||||||
ChangeEmailComponent,
|
ChangeEmailComponent,
|
||||||
ChangePasswordComponent,
|
ChangePasswordComponent,
|
||||||
CiphersComponent,
|
CiphersComponent,
|
||||||
|
|
|
@ -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>
|
|
@ -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';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -15,10 +15,7 @@
|
||||||
<ng-container *ngIf="tokenSent">
|
<ng-container *ngIf="tokenSent">
|
||||||
<hr>
|
<hr>
|
||||||
<p>{{'changeEmailDesc' | i18n : newEmail}}</p>
|
<p>{{'changeEmailDesc' | i18n : newEmail}}</p>
|
||||||
<div class="callout callout-warning" role="alert">
|
<app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
|
||||||
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
|
|
||||||
<p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
|
@ -1,7 +1,4 @@
|
||||||
<div class="callout callout-warning" role="alert">
|
<app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
|
||||||
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
|
|
||||||
<p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
|
|
||||||
</div>
|
|
||||||
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
|
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
|
|
|
@ -9,10 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>{{'deauthorizeSessionsDesc' | i18n}}</p>
|
<p>{{'deauthorizeSessionsDesc' | i18n}}</p>
|
||||||
<div class="callout callout-warning" role="alert">
|
<app-callout type="warning">{{'deauthorizeSessionsWarning' | i18n}}</app-callout>
|
||||||
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
|
|
||||||
<p class="mb-0">{{'deauthorizeSessionsWarning' | i18n}}</p>
|
|
||||||
</div>
|
|
||||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||||
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
|
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
|
||||||
appAutoFocus>
|
appAutoFocus>
|
||||||
|
|
|
@ -9,10 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>{{'deleteAccountDesc' | i18n}}</p>
|
<p>{{'deleteAccountDesc' | i18n}}</p>
|
||||||
<div class="callout callout-warning" role="alert">
|
<app-callout type="warning">{{'deleteAccountWarning' | i18n}}</app-callout>
|
||||||
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
|
|
||||||
<p class="mb-0">{{'deleteAccountWarning' | i18n}}</p>
|
|
||||||
</div>
|
|
||||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||||
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
|
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
|
||||||
appAutofocus>
|
appAutofocus>
|
||||||
|
|
|
@ -9,10 +9,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>{{'purgeVaultDesc' | i18n}}</p>
|
<p>{{'purgeVaultDesc' | i18n}}</p>
|
||||||
<div class="callout callout-warning" role="alert">
|
<app-callout type="warning">{{'purgeVaultWarning' | i18n}}</app-callout>
|
||||||
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
|
|
||||||
<p class="mb-0">{{'purgeVaultWarning' | i18n}}</p>
|
|
||||||
</div>
|
|
||||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||||
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
|
<input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
|
||||||
appAutofocus>
|
appAutofocus>
|
||||||
|
|
|
@ -3,10 +3,7 @@
|
||||||
<h1>{{'exportVault' | i18n}}</h1>
|
<h1>{{'exportVault' | i18n}}</h1>
|
||||||
</div>
|
</div>
|
||||||
<p>{{'exportMasterPassword' | i18n}}</p>
|
<p>{{'exportMasterPassword' | i18n}}</p>
|
||||||
<div class="callout callout-warning" role="alert">
|
<app-callout type="warning">{{'exportWarning' | i18n}}</app-callout>
|
||||||
<h3 class="callout-heading">{{'warning' | i18n}}</h3>
|
|
||||||
<p class="mb-0">{{'exportWarning' | i18n}}</p>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="form-group col-6">
|
<div class="form-group col-6">
|
||||||
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
<label for="masterPassword">{{'masterPass' | i18n}}</label>
|
||||||
|
|
|
@ -14,9 +14,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="callout callout-info" role="alert" *ngIf="format">
|
<app-callout type="info" title="{{getFormatInstructionTitle()}}" *ngIf="format">
|
||||||
<h3 class="callout-heading">{{'instructionsFor' | i18n : getFormatName()}}</h3>
|
|
||||||
<p class="mb-0">
|
|
||||||
<ng-container *ngIf="format === 'bitwardencsv'">
|
<ng-container *ngIf="format === 'bitwardencsv'">
|
||||||
See detailed instructions on our help site at
|
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>
|
<a target="_blank" href="https://help.bitwarden.com/article/export-your-data/">https://help.bitwarden.com/article/export-your-data/</a>
|
||||||
|
@ -31,8 +29,7 @@
|
||||||
<ng-container *ngIf="format === 'aviracsv'">
|
<ng-container *ngIf="format === 'aviracsv'">
|
||||||
In the Avira web vault, go to "Settings" → "My Data" → "Export data" and save the CSV file.
|
In the Avira web vault, go to "Settings" → "My Data" → "Export data" and save the CSV file.
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</p>
|
</app-callout>
|
||||||
</div>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
|
@ -165,14 +165,14 @@ export class ImportComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
getFormatName() {
|
getFormatInstructionTitle() {
|
||||||
if (this.format == null) {
|
if (this.format == null) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const results = this.featuredImportOptions.concat(this.importOptions).filter((o) => o.id === this.format);
|
const results = this.featuredImportOptions.concat(this.importOptions).filter((o) => o.id === this.format);
|
||||||
if (results.length > 0) {
|
if (results.length > 0) {
|
||||||
return results[0].name;
|
return this.i18nService.t('instructionsFor', results[0].name);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue