mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-25 16:59:17 +01:00
icon component
This commit is contained in:
parent
a781ba9096
commit
41797f5ce4
@ -8,6 +8,7 @@ import { NgModule } from '@angular/core';
|
||||
import { ServicesModule } from './services/services.module';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { IconComponent } from './vault/icon.component';
|
||||
import { LoginComponent } from './accounts/login.component';
|
||||
import { VaultComponent } from './vault/vault.component';
|
||||
|
||||
@ -20,6 +21,7 @@ import { VaultComponent } from './vault/vault.component';
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
IconComponent,
|
||||
LoginComponent,
|
||||
VaultComponent,
|
||||
],
|
||||
|
@ -97,6 +97,7 @@ environmentService.setUrlsFromStorage().then(() => {
|
||||
{ provide: CipherServiceAbstraction, useValue: cipherService },
|
||||
{ provide: FolderServiceAbstraction, useValue: folderService },
|
||||
{ provide: CollectionServiceAbstraction, useValue: collectionService },
|
||||
{ provide: EnvironmentServiceAbstraction, useValue: environmentService },
|
||||
],
|
||||
})
|
||||
export class ServicesModule {
|
||||
|
4
src/app/vault/icon.component.html
Normal file
4
src/app/vault/icon.component.html
Normal file
@ -0,0 +1,4 @@
|
||||
<div class="icon">
|
||||
<img [src]="image" *ngIf="imageEnabled && image" alt="" />
|
||||
<i class="fa fa-fw fa-lg {{icon}}" *ngIf="!imageEnabled || !image"></i>
|
||||
</div>
|
88
src/app/vault/icon.component.ts
Normal file
88
src/app/vault/icon.component.ts
Normal file
@ -0,0 +1,88 @@
|
||||
import * as template from './icon.component.html';
|
||||
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
OnChanges,
|
||||
} from '@angular/core';
|
||||
|
||||
import { CipherType } from 'jslib/enums/cipherType';
|
||||
|
||||
import { EnvironmentService } from 'jslib/abstractions/environment.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-vault-icon',
|
||||
template: template,
|
||||
})
|
||||
export class IconComponent implements OnChanges {
|
||||
@Input() cipher: any;
|
||||
icon: string;
|
||||
image: string;
|
||||
fallbackImage: string;
|
||||
imageEnabled: boolean;
|
||||
|
||||
private iconsUrl: string;
|
||||
|
||||
constructor(private environmentService: EnvironmentService) {
|
||||
this.imageEnabled = true; // TODO
|
||||
|
||||
this.iconsUrl = environmentService.iconsUrl;
|
||||
if (!this.iconsUrl) {
|
||||
if (environmentService.baseUrl) {
|
||||
this.iconsUrl = environmentService.baseUrl + '/icons';
|
||||
} else {
|
||||
this.iconsUrl = 'https://icons.bitwarden.com';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
switch (this.cipher.type) {
|
||||
case CipherType.Login:
|
||||
this.icon = 'fa-globe';
|
||||
this.setLoginIcon();
|
||||
break;
|
||||
case CipherType.SecureNote:
|
||||
this.icon = 'fa-sticky-note-o';
|
||||
break;
|
||||
case CipherType.Card:
|
||||
this.icon = 'fa-credit-card';
|
||||
break;
|
||||
case CipherType.Identity:
|
||||
this.icon = 'fa-id-card-o';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private setLoginIcon() {
|
||||
if (this.cipher.login.uri) {
|
||||
let hostnameUri = this.cipher.login.uri;
|
||||
let isWebsite = false;
|
||||
|
||||
if (hostnameUri.indexOf('androidapp://') === 0) {
|
||||
this.icon = 'fa-android';
|
||||
this.image = null;
|
||||
} else if (hostnameUri.indexOf('iosapp://') === 0) {
|
||||
this.icon = 'fa-apple';
|
||||
this.image = null;
|
||||
} else if (this.imageEnabled && hostnameUri.indexOf('://') === -1 && hostnameUri.indexOf('.') > -1) {
|
||||
hostnameUri = 'http://' + hostnameUri;
|
||||
isWebsite = true;
|
||||
} else if (this.imageEnabled) {
|
||||
isWebsite = hostnameUri.indexOf('http') === 0 && hostnameUri.indexOf('.') > -1;
|
||||
}
|
||||
|
||||
if (this.imageEnabled && isWebsite) {
|
||||
try {
|
||||
const url = new URL(hostnameUri);
|
||||
this.image = this.iconsUrl + '/' + url.hostname + '/icon.png';
|
||||
this.fallbackImage = '../images/fa-globe.png'; // TODO?
|
||||
} catch (e) { }
|
||||
}
|
||||
} else {
|
||||
this.image = null;
|
||||
}
|
||||
}
|
||||
}
|
@ -53,6 +53,7 @@
|
||||
<div class="list-section" style="padding-top: 0; padding-bottom: 0;">
|
||||
<a *ngFor="let cipher of vaultCiphers"
|
||||
href="#" class="list-section-item condensed" title="View Item">
|
||||
<app-vault-icon [cipher]="cipher"></app-vault-icon>
|
||||
<span class="text">
|
||||
{{cipher.name}}
|
||||
<i class="fa fa-share-alt text-muted" *ngIf="cipher.organizationId"></i>
|
||||
|
Loading…
Reference in New Issue
Block a user