bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 17:53:39 +00:00
Code Issues Releases Wiki Activity

[SM-251] Migrate to new avatar component (#3600)

Browse Source
This commit is contained in:
Oscar Hinton
2022-10-27 14:38:34 +02:00
committed by GitHub
parent 7fa0231616
commit 5f6f4bad82
37 changed files with 230 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
apps/desktop/src/app/components/avatar.component.ts Normal file
View File

@@ -0,0 +1,128 @@
import { Component, Input, OnChanges, OnInit } from "@angular/core";
import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
import { Utils } from "@bitwarden/common/misc/utils";
@Component({
selector: "app-avatar",
template: `<img
*ngIf="src"
[src]="src"
title="{{ data }}"
[ngClass]="{ 'rounded-circle': circle }"
/>`,
})
export class AvatarComponent implements OnChanges, OnInit {
@Input() size = 45;
@Input() charCount = 2;
@Input() fontSize = 20;
@Input() dynamic = false;
@Input() circle = false;
@Input() color?: string;
@Input() id?: number;
@Input() text?: string;
private svgCharCount = 2;
private svgFontWeight = 300;
src: SafeResourceUrl;
constructor(public sanitizer: DomSanitizer) {}
ngOnInit() {
if (!this.dynamic) {
this.generate();
}
}
ngOnChanges() {
if (this.dynamic) {
this.generate();
}
}
private async generate() {
let chars: string = null;
const upperCaseText = this.text?.toUpperCase() ?? "";
chars = this.getFirstLetters(upperCaseText, this.svgCharCount);
if (chars == null) {
chars = this.unicodeSafeSubstring(upperCaseText, this.svgCharCount);
}
// If the chars contain an emoji, only show it.
if (chars.match(Utils.regexpEmojiPresentation)) {
chars = chars.match(Utils.regexpEmojiPresentation)[0];
}
let svg: HTMLElement;
let hexColor = this.color;
if (this.color != null) {
svg = this.createSvgElement(this.size, hexColor);
} else if (this.id != null) {
hexColor = Utils.stringToColor(this.id.toString());
svg = this.createSvgElement(this.size, hexColor);
} else {
hexColor = Utils.stringToColor(upperCaseText);
svg = this.createSvgElement(this.size, hexColor);
}
const charObj = this.createTextElement(chars, hexColor);
svg.appendChild(charObj);
const html = window.document.createElement("div").appendChild(svg).outerHTML;
const svgHtml = window.btoa(unescape(encodeURIComponent(html)));
this.src = this.sanitizer.bypassSecurityTrustResourceUrl(
"data:image/svg+xml;base64," + svgHtml
);
}
private getFirstLetters(data: string, count: number): string {
const parts = data.split(" ");
if (parts.length > 1) {
let text = "";
for (let i = 0; i < count; i++) {
text += this.unicodeSafeSubstring(parts[i], 1);
}
return text;
}
return null;
}
private createSvgElement(size: number, color: string): HTMLElement {
const svgTag = window.document.createElement("svg");
svgTag.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svgTag.setAttribute("pointer-events", "none");
svgTag.setAttribute("width", size.toString());
svgTag.setAttribute("height", size.toString());
svgTag.style.backgroundColor = color;
svgTag.style.width = size + "px";
svgTag.style.height = size + "px";
return svgTag;
}
private createTextElement(character: string, color: string): HTMLElement {
const textTag = window.document.createElement("text");
textTag.setAttribute("text-anchor", "middle");
textTag.setAttribute("y", "50%");
textTag.setAttribute("x", "50%");
textTag.setAttribute("dy", "0.35em");
textTag.setAttribute("pointer-events", "auto");
textTag.setAttribute("fill", Utils.pickTextColorBasedOnBgColor(color, 135, true));
textTag.setAttribute(
"font-family",
'"Open Sans","Helvetica Neue",Helvetica,Arial,' +
'sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
);
textTag.textContent = character;
textTag.style.fontWeight = this.svgFontWeight.toString();
textTag.style.fontSize = this.fontSize + "px";
return textTag;
}
private unicodeSafeSubstring(str: string, count: number) {
const characters = str.match(/./gu);
return characters != null ? characters.slice(0, count).join("") : "";
}
}

14
apps/desktop/src/app/layout/account-switcher.component.html
View File

@@ -8,17 +8,18 @@
aria-controls="cdk-overlay-container"
[attr.aria-expanded]="isOpen"
>
<ng-container *ngIf="activeAccountEmail != null; else noActiveAccount">
<ng-container *ngIf="activeAccount?.email != null; else noActiveAccount">
<app-avatar
[data]="activeAccountEmail"
[text]="activeAccount.name"
[id]="activeAccount.id"
size="25"
[circle]="true"
[fontSize]="14"
[dynamic]="true"
*ngIf="activeAccountEmail != null"
*ngIf="activeAccount.email != null"
aria-hidden="true"
></app-avatar>
<span>{{ activeAccountEmail }}</span>
<span>{{ activeAccount.email }}</span>
</ng-container>
<ng-template #noActiveAccount>
<span>{{ "switchAccount" | i18n }}</span>
@@ -58,7 +59,8 @@
attr.aria-label="{{ 'switchAccount' | i18n }}"
>
<app-avatar
[data]="a.value.profile.email"
[text]="a.value.profile.name ?? a.value.profile.email"
[id]="a.value.profile.userId"
size="25"
[circle]="true"
[fontSize]="14"
@@ -85,7 +87,7 @@
></i>
</button>
</div>
<ng-container *ngIf="activeAccountEmail != null">
<ng-container *ngIf="activeAccount?.email != null">
<div class="border" *ngIf="numberOfAccounts > 0"></div>
<ng-container *ngIf="numberOfAccounts < 4">
<button type="button" class="add" routerLink="/login" (click)="addAccount()">

59
apps/desktop/src/app/layout/account-switcher.component.ts
View File

@@ -1,14 +1,22 @@
import { animate, state, style, transition, trigger } from "@angular/animations";
import { ConnectedPosition } from "@angular/cdk/overlay";
import { Component, OnInit } from "@angular/core";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { concatMap, Subject, takeUntil } from "rxjs";
import { AuthService } from "@bitwarden/common/abstractions/auth.service";
import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
import { StateService } from "@bitwarden/common/abstractions/state.service";
import { TokenService } from "@bitwarden/common/abstractions/token.service";
import { AuthenticationStatus } from "@bitwarden/common/enums/authenticationStatus";
import { Utils } from "@bitwarden/common/misc/utils";
import { Account } from "@bitwarden/common/models/domain/account";
type ActiveAccount = {
id: string;
name: string;
email: string;
};
export class SwitcherAccount extends Account {
get serverUrl() {
return this.removeWebProtocolFromString(
@@ -48,11 +56,12 @@ export class SwitcherAccount extends Account {
]),
],
})
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
export class AccountSwitcherComponent implements OnInit {
export class AccountSwitcherComponent implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
isOpen = false;
accounts: { [userId: string]: SwitcherAccount } = {};
activeAccountEmail: string;
activeAccount?: ActiveAccount;
serverUrl: string;
authStatus = AuthenticationStatus;
overlayPostition: ConnectedPosition[] = [
@@ -65,7 +74,7 @@ export class AccountSwitcherComponent implements OnInit {
];
get showSwitcher() {
const userIsInAVault = !Utils.isNullOrWhitespace(this.activeAccountEmail);
const userIsInAVault = !Utils.isNullOrWhitespace(this.activeAccount?.email);
const userIsAddingAnAdditionalAccount = Object.keys(this.accounts).length > 0;
return userIsInAVault || userIsAddingAnAdditionalAccount;
}
@@ -81,21 +90,39 @@ export class AccountSwitcherComponent implements OnInit {
constructor(
private stateService: StateService,
private authService: AuthService,
private messagingService: MessagingService
private messagingService: MessagingService,
private tokenService: TokenService
) {}
async ngOnInit(): Promise<void> {
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
this.stateService.accounts.subscribe(async (accounts: { [userId: string]: Account }) => {
for (const userId in accounts) {
accounts[userId].profile.authenticationStatus = await this.authService.getAuthStatus(
userId
);
}
this.stateService.accounts
.pipe(
concatMap(async (accounts: { [userId: string]: Account }) => {
for (const userId in accounts) {
accounts[userId].profile.authenticationStatus = await this.authService.getAuthStatus(
userId
);
}
this.accounts = await this.createSwitcherAccounts(accounts);
this.activeAccountEmail = await this.stateService.getEmail();
});
this.accounts = await this.createSwitcherAccounts(accounts);
try {
this.activeAccount = {
id: await this.tokenService.getUserId(),
name: (await this.tokenService.getName()) ?? (await this.tokenService.getEmail()),
email: await this.tokenService.getEmail(),
};
} catch {
this.activeAccount = undefined;
}
}),
takeUntil(this.destroy$)
)
.subscribe();
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
toggle() {

3
apps/desktop/src/app/shared/shared.module.ts
View File

@@ -10,6 +10,7 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { AvatarComponent } from "../components/avatar.component";
import { ServicesModule } from "../services/services.module";
@NgModule({
@@ -25,6 +26,7 @@ import { ServicesModule } from "../services/services.module";
ScrollingModule,
ServicesModule,
],
declarations: [AvatarComponent],
exports: [
A11yModule,
BrowserAnimationsModule,
@@ -37,6 +39,7 @@ import { ServicesModule } from "../services/services.module";
ReactiveFormsModule,
ScrollingModule,
ServicesModule,
AvatarComponent,
],
providers: [DatePipe],
})

7
apps/web/src/app/components/organization-switcher.component.html
View File

@@ -6,12 +6,7 @@
[appA11yTitle]="'organizationPicker' | i18n"
[bitMenuTriggerFor]="orgPickerMenu"
>
<app-avatar
[data]="activeOrganization.name"
size="45"
[circle]="true"
[dynamic]="true"
></app-avatar>
<bit-avatar [text]="activeOrganization.name" [id]="activeOrganization.id"></bit-avatar>
<div class="tw-flex">
<div class="org-name tw-ml-3">
<span>{{ activeOrganization.name }}</span>

8
apps/web/src/app/layouts/navbar.component.html
View File

@@ -54,13 +54,7 @@
*ngIf="name"
appStopProp
>
<app-avatar
[data]="name"
[email]="email"
size="25"
fontSize="14"
[circle]="true"
></app-avatar>
<bit-avatar [text]="name" [id]="userId" size="small"></bit-avatar>
<div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
<span>{{ "loggedInAs" | i18n }}</span>
<small class="tw-block tw-overflow-hidden tw-whitespace-nowrap tw-text-muted">{{

2
apps/web/src/app/layouts/navbar.component.ts
View File

@@ -24,6 +24,7 @@ export class NavbarComponent implements OnInit {
name: string;
email: string;
providers: Provider[] = [];
userId: string;
organizations$: Observable<Organization[]>;
constructor(
@@ -41,6 +42,7 @@ export class NavbarComponent implements OnInit {
async ngOnInit() {
this.name = await this.tokenService.getName();
this.email = await this.tokenService.getEmail();
this.userId = await this.tokenService.getUserId();
if (this.name == null || this.name.trim() === "") {
this.name = this.email;
}

27
apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
View File

@@ -41,14 +41,7 @@
</thead>
<tr *ngFor="let user of filteredUsers">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}
@@ -60,14 +53,7 @@
</tr>
<tr *ngFor="let user of excludedUsers">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}
@@ -89,14 +75,7 @@
</thead>
<tr *ngFor="let user of filteredUsers">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}

18
apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
View File

@@ -33,14 +33,7 @@
</thead>
<tr *ngFor="let user of users">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}
@@ -59,14 +52,7 @@
</thead>
<tr *ngFor="let user of users">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}

18
apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
View File

@@ -33,14 +33,7 @@
</thead>
<tr *ngFor="let user of users">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}
@@ -59,14 +52,7 @@
</thead>
<tr *ngFor="let user of users">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}

12
apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
View File

@@ -28,13 +28,11 @@
</thead>
<tr *ngFor="let item of users">
<td width="30">
<app-avatar
[data]="item.user | userName"
[email]="item.user.email"
size="25"
[circle]="true"
[fontSize]="14"
></app-avatar>
<bit-avatar
[text]="item.user | userName"
[id]="item.user.id"
size="small"
></bit-avatar>
</td>
<td>
{{ item.user.email }}

9
apps/web/src/app/organizations/manage/entity-users.component.html
View File

@@ -101,14 +101,7 @@
/>
</td>
<td width="30" (click)="check(u)">
<app-avatar
[data]="u | userName"
[email]="u.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="u | userName" [id]="u.id" size="small"></bit-avatar>
</td>
<td>
{{ u.email }}

9
apps/web/src/app/organizations/manage/people.component.html
View File

@@ -141,14 +141,7 @@
<input type="checkbox" [(ngModel)]="u.checked" appStopProp />
</td>
<td width="30">
<app-avatar
[data]="u | userName"
[email]="u.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="u | userName" [id]="u.userId" size="small"></bit-avatar>
</td>
<td>
<a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>

2
apps/web/src/app/organizations/settings/account.component.html
View File

@@ -63,7 +63,7 @@
</div>
</div>
<div class="col-6">
<app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
<bit-avatar [text]="org.name" [id]="org.id" size="large"></bit-avatar>
</div>
</div>
<button type="submit" buttonType="primary" bitButton [loading]="form.loading">

2
apps/web/src/app/providers/providers.component.html
View File

@@ -12,7 +12,7 @@
<tbody>
<tr *ngFor="let p of providers">
<td width="30">
<app-avatar [data]="p.name" size="25" [circle]="true" [fontSize]="14"></app-avatar>
<bit-avatar [text]="p.name" [id]="p.id" size="small"></bit-avatar>
</td>
<td>
<a href="#" [routerLink]="['/providers', p.id]">{{ p.name }}</a>

18
apps/web/src/app/settings/emergency-access.component.html
View File

@@ -34,14 +34,7 @@
<tbody>
<tr *ngFor="let c of trustedContacts; let i = index">
<td width="30">
<app-avatar
[data]="c | userName"
[email]="c.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="c | userName" [id]="c.granteeId" size="small"></bit-avatar>
</td>
<td>
<a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
@@ -149,14 +142,7 @@
<tbody>
<tr *ngFor="let c of grantedContacts; let i = index">
<td width="30">
<app-avatar
[data]="c | userName"
[email]="c.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="c | userName" [id]="c.grantorId" size="small"></bit-avatar>
</td>
<td>
<span>{{ c.email }}</span>

23
apps/web/src/app/settings/preferences.component.html
View File

@@ -90,29 +90,6 @@
</div>
<small class="form-text text-muted">{{ "faviconDesc" | i18n }}</small>
</div>
<div class="form-group">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="enableGravatars"
name="enableGravatars"
[(ngModel)]="enableGravatars"
/>
<label class="form-check-label" for="enableGravatars">
{{ "enableGravatars" | i18n }}
</label>
<a
href="https://gravatar.com/"
target="_blank"
rel="noopener"
appA11yTitle="{{ 'learnMore' | i18n }}"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</div>
<small class="form-text text-muted">{{ "enableGravatarsDesc" | i18n }}</small>
</div>
<div class="form-group">
<div class="form-check">
<input

3
apps/web/src/app/settings/preferences.component.ts
View File

@@ -17,7 +17,6 @@ import { Utils } from "@bitwarden/common/misc/utils";
export class PreferencesComponent implements OnInit {
vaultTimeoutAction = "lock";
enableFavicons: boolean;
enableGravatars: boolean;
enableFullWidth: boolean;
theme: ThemeType;
locale: string;
@@ -73,7 +72,6 @@ export class PreferencesComponent implements OnInit {
this.vaultTimeout.setValue(await this.vaultTimeoutSettingsService.getVaultTimeout());
this.vaultTimeoutAction = await this.stateService.getVaultTimeoutAction();
this.enableFavicons = !(await this.stateService.getDisableFavicon());
this.enableGravatars = await this.stateService.getEnableGravitars();
this.enableFullWidth = await this.stateService.getEnableFullWidth();
this.locale = (await this.stateService.getLocale()) ?? null;
@@ -98,7 +96,6 @@ export class PreferencesComponent implements OnInit {
this.vaultTimeoutAction
);
await this.stateService.setDisableFavicon(!this.enableFavicons);
await this.stateService.setEnableGravitars(this.enableGravatars);
await this.stateService.setEnableFullWidth(this.enableFullWidth);
this.messagingService.send("setFullWidth");
if (this.theme !== this.startingTheme) {

9
apps/web/src/app/settings/profile.component.html
View File

@@ -33,14 +33,7 @@
</div>
<div class="col-6">
<div class="mb-3">
<app-avatar
data="{{ profile | userName }}"
[email]="profile.email"
dynamic="true"
size="75"
fontSize="35"
>
</app-avatar>
<bit-avatar [text]="profile | userName" [id]="profile.id" size="large"></bit-avatar>
</div>
<hr />
<p *ngIf="fingerprint">

7
apps/web/src/app/shared/shared.module.ts
View File

@@ -8,13 +8,14 @@ import { ToastrModule } from "ngx-toastr";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
AsyncActionsModule,
AvatarModule,
BadgeModule,
ButtonModule,
CalloutModule,
FormFieldModule,
MenuModule,
IconModule,
AsyncActionsModule,
MenuModule,
} from "@bitwarden/components";
// Register the locales for the application
@@ -45,6 +46,7 @@ import "./locales";
MenuModule,
FormFieldModule,
IconModule,
AvatarModule,
],
exports: [
CommonModule,
@@ -64,6 +66,7 @@ import "./locales";
MenuModule,
FormFieldModule,
IconModule,
AvatarModule,
],
providers: [DatePipe],
bootstrap: [],

7
apps/web/src/locales/en/messages.json
View File

@@ -1235,13 +1235,6 @@
"faviconDesc": {
"message": "Show a recognizable image next to each login."
},
"enableGravatars": {
"message": "Show Gravatars",
"description": "Use avatar images loaded from gravatar.com."
},
"enableGravatarsDesc": {
"message": "Use avatar images loaded from gravatar.com."
},
"enableFullWidth": {
"message": "Display full width layout",
"description": "Allows scaling the web vault UI's width"

1
apps/web/webpack.config.js
View File

@@ -243,7 +243,6 @@ const devServer =
https://www.paypalobjects.com
https://q.stripe.com
https://haveibeenpwned.com
https://www.gravatar.com
;child-src
'self'
https://js.stripe.com