Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-21 11:35:34 +01:00
Code Issues Projects 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 230 additions and 360 deletions
Show Stats 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

2
bitwarden_license/bit-web/src/app/providers/clients/add-organization.component.html
View File

@ -23,7 +23,7 @@
<table class="table table-hover table-list">
<tr *ngFor="let o of organizations">
<td width="30">
<app-avatar [data]="o.name" size="25" [circle]="true" [fontSize]="14"></app-avatar>
<bit-avatar [text]="o.name" [id]="o.id" size="small"></bit-avatar>
</td>
<td>
{{ o.name }}

7
bitwarden_license/bit-web/src/app/providers/clients/clients.component.html
View File

@ -59,12 +59,7 @@
<tbody>
<tr *ngFor="let o of searchedClients">
<td width="30">
<app-avatar
[data]="o.organizationName"
size="25"
[circle]="true"
[fontSize]="14"
></app-avatar>
<bit-avatar [text]="o.organizationName" [id]="o.id" size="small"></bit-avatar>
</td>
<td>
<a [routerLink]="['/organizations', o.organizationId]">{{ o.organizationName }}</a>

9
bitwarden_license/bit-web/src/app/providers/manage/people.component.html
View File

@ -124,14 +124,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
bitwarden_license/bit-web/src/app/providers/providers-layout.component.html
View File

@ -3,7 +3,7 @@
<div class="container d-flex">
<div class="d-flex flex-column">
<div class="my-auto d-flex align-items-center pl-1">
<app-avatar [data]="provider.name" size="45" [circle]="true"></app-avatar>
<bit-avatar [text]="provider.name" [id]="provider.id"></bit-avatar>
<div class="org-name ml-3">
<span>{{ provider.name }}</span>
<small class="text-muted">{{ "provider" | i18n }}</small>

2
bitwarden_license/bit-web/src/app/providers/settings/account.component.html
View File

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

127
libs/angular/src/components/avatar.component.ts
View File

@ -1,127 +0,0 @@
import { Component, Input, OnChanges, OnInit } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { CryptoFunctionService } from "@bitwarden/common/abstractions/cryptoFunction.service";
import { StateService } from "@bitwarden/common/abstractions/state.service";
import { Utils } from "@bitwarden/common/misc/utils";
@Component({
selector: "app-avatar",
template:
'<img *ngIf="src" [src]="sanitizer.bypassSecurityTrustResourceUrl(src)" title="{{data}}" ' +
"[ngClass]=\"{'rounded-circle': circle}\">",
})
export class AvatarComponent implements OnChanges, OnInit {
@Input() data: string;
@Input() email: string;
@Input() size = 45;
@Input() charCount = 2;
@Input() textColor = "#ffffff";
@Input() fontSize = 20;
@Input() fontWeight = 300;
@Input() dynamic = false;
@Input() circle = false;
src: string;
constructor(
public sanitizer: DomSanitizer,
private cryptoFunctionService: CryptoFunctionService,
private stateService: StateService
) {}
ngOnInit() {
if (!this.dynamic) {
this.generate();
}
}
ngOnChanges() {
if (this.dynamic) {
this.generate();
}
}
private async generate() {
const enableGravatars = await this.stateService.getEnableGravitars();
if (enableGravatars && this.email != null) {
const hashBytes = await this.cryptoFunctionService.hash(
this.email.toLowerCase().trim(),
"md5"
);
const hash = Utils.fromBufferToHex(hashBytes).toLowerCase();
this.src = "https://www.gravatar.com/avatar/" + hash + "?s=" + this.size + "&r=pg&d=retro";
} else {
let chars: string = null;
const upperData = this.data.toUpperCase();
if (this.charCount > 1) {
chars = this.getFirstLetters(upperData, this.charCount);
}
if (chars == null) {
chars = this.unicodeSafeSubstring(upperData, this.charCount);
}
// If the chars contain an emoji, only show it.
if (chars.match(Utils.regexpEmojiPresentation)) {
chars = chars.match(Utils.regexpEmojiPresentation)[0];
}
const charObj = this.getCharText(chars);
const color = Utils.stringToColor(upperData);
const svg = this.getSvg(this.size, color);
svg.appendChild(charObj);
const html = window.document.createElement("div").appendChild(svg).outerHTML;
const svgHtml = window.btoa(unescape(encodeURIComponent(html)));
this.src = "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 getSvg(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 getCharText(character: 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", this.textColor);
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.fontWeight.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("") : "";
}
}

3
libs/angular/src/jslib.module.ts
View File

@ -2,7 +2,6 @@ import { CommonModule, DatePipe } from "@angular/common";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { AvatarComponent } from "./components/avatar.component";
import { CalloutComponent } from "./components/callout.component";
import { ExportScopeCalloutComponent } from "./components/export-scope-callout.component";
import { IconComponent } from "./components/icon.component";
@ -46,7 +45,6 @@ import { PasswordStrengthComponent } from "./shared/components/password-strength
A11yTitleDirective,
ApiActionDirective,
AutofocusDirective,
AvatarComponent,
BoxRowDirective,
CalloutComponent,
ColorPasswordCountPipe,
@ -74,7 +72,6 @@ import { PasswordStrengthComponent } from "./shared/components/password-strength
A11yTitleDirective,
ApiActionDirective,
AutofocusDirective,
AvatarComponent,
BitwardenToastModule,
BoxRowDirective,
CalloutComponent,

3
libs/common/spec/misc/logInStrategies/logIn.strategy.spec.ts
View File

@ -37,9 +37,11 @@ const kdf = 0;
const kdfIterations = 10000;
const userId = Utils.newGuid();
const masterPasswordHash = "MASTER_PASSWORD_HASH";
const name = "NAME";
const decodedToken = {
sub: userId,
name: name,
email: email,
premium: false,
};
@ -122,6 +124,7 @@ describe("LogInStrategy", () => {
...new AccountProfile(),
...{
userId: userId,
name: name,
email: email,
hasPremiumPersonally: false,
kdfIterations: kdfIterations,

2
libs/common/src/abstractions/state.service.ts
View File

@ -173,8 +173,6 @@ export abstract class StateService<T extends Account = Account> {
) => Promise<void>;
getEnableFullWidth: (options?: StorageOptions) => Promise<boolean>;
setEnableFullWidth: (value: boolean, options?: StorageOptions) => Promise<void>;
getEnableGravitars: (options?: StorageOptions) => Promise<boolean>;
setEnableGravitars: (value: boolean, options?: StorageOptions) => Promise<void>;
getEnableMinimizeToTray: (options?: StorageOptions) => Promise<boolean>;
setEnableMinimizeToTray: (value: boolean, options?: StorageOptions) => Promise<void>;
getEnableStartToTray: (options?: StorageOptions) => Promise<boolean>;

1
libs/common/src/misc/logInStrategies/logIn.strategy.ts
View File

@ -105,6 +105,7 @@ export abstract class LogInStrategy {
...new AccountProfile(),
...{
userId: accountInformation.sub,
name: accountInformation.name,
email: accountInformation.email,
hasPremiumPersonally: accountInformation.premium,
kdfIterations: tokenResponse.kdfIterations,

2
libs/common/src/models/domain/account.ts
View File

@ -175,6 +175,7 @@ export class AccountProfile {
apiKeyClientId?: string;
authenticationStatus?: AuthenticationStatus;
convertAccountToKeyConnector?: boolean;
name?: string;
email?: string;
emailVerified?: boolean;
entityId?: string;
@ -219,7 +220,6 @@ export class AccountSettings {
enableAutoFillOnPageLoad?: boolean;
enableBiometric?: boolean;
enableFullWidth?: boolean;
enableGravitars?: boolean;
environmentUrls: EnvironmentUrls = new EnvironmentUrls();
equivalentDomains?: any;
minimizeOnCopyToClipboard?: boolean;

21
libs/common/src/services/state.service.ts
View File

@ -1228,27 +1228,6 @@ export class StateService<
);
}
async getEnableGravitars(options?: StorageOptions): Promise<boolean> {
return (
(
await this.getAccount(
this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
)
)?.settings?.enableGravitars ?? false
);
}
async setEnableGravitars(value: boolean, options?: StorageOptions): Promise<void> {
const account = await this.getAccount(
this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
);
account.settings.enableGravitars = value;
await this.saveAccount(
account,
this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
);
}
async getEnableMinimizeToTray(options?: StorageOptions): Promise<boolean> {
return (
(await this.getGlobals(this.reconcileOptions(options, await this.defaultOnDiskOptions())))

4
libs/common/src/services/stateMigration.service.ts
View File

@ -61,7 +61,6 @@ const v1Keys: { [key: string]: string } = {
enableBrowserIntegrationFingerprint: "enableBrowserIntegrationFingerprint",
enableCloseToTray: "enableCloseToTray",
enableFullWidth: "enableFullWidth",
enableGravatars: "enableGravatars",
enableMinimizeToTray: "enableMinimizeToTray",
enableStartToTray: "enableStartToTrayKey",
enableTray: "enableTray",
@ -305,9 +304,6 @@ export class StateMigrationService<
enableFullWidth:
(await this.get<boolean>(v1Keys.enableFullWidth)) ??
defaultAccount.settings.enableFullWidth,
enableGravitars:
(await this.get<boolean>(v1Keys.enableGravatars)) ??
defaultAccount.settings.enableGravitars,
environmentUrls: globals.environmentUrls ?? defaultAccount.settings.environmentUrls,
equivalentDomains:
(await this.get<any>(v1Keys.equivalentDomains)) ??

12
libs/components/src/avatar/avatar.component.ts
View File

@ -17,9 +17,9 @@ const SizeClasses: Record<SizeTypes, string[]> = {
})
export class AvatarComponent implements OnChanges {
@Input() border = false;
@Input() color: string;
@Input() id: number;
@Input() text: string;
@Input() color?: string;
@Input() id?: string;
@Input() text?: string;
@Input() size: SizeTypes = "default";
private svgCharCount = 2;
@ -42,7 +42,7 @@ export class AvatarComponent implements OnChanges {
private generate() {
let chars: string = null;
const upperCaseText = this.text.toUpperCase();
const upperCaseText = this.text?.toUpperCase() ?? "";
chars = this.getFirstLetters(upperCaseText, this.svgCharCount);
@ -58,9 +58,9 @@ export class AvatarComponent implements OnChanges {
let svg: HTMLElement;
let hexColor = this.color;
if (this.color != null) {
if (!Utils.isNullOrWhitespace(this.color)) {
svg = this.createSvgElement(this.svgSize, hexColor);
} else if (this.id != null) {
} else if (!Utils.isNullOrWhitespace(this.id)) {
hexColor = Utils.stringToColor(this.id.toString());
svg = this.createSvgElement(this.svgSize, hexColor);
} else {

7
libs/components/src/index.ts
View File

@ -1,15 +1,16 @@
export * from "./async-actions";
export * from "./avatar";
export * from "./badge";
export * from "./banner";
export * from "./button";
export * from "./callout";
export * from "./dialog";
export * from "./form-field";
export * from "./icon";
export * from "./icon-button";
export * from "./icon";
export * from "./link";
export * from "./menu";
export * from "./multi-select";
export * from "./dialog";
export * from "./link";
export * from "./tabs";
export * from "./toggle-group";
export * from "./utils/i18n-mock.service";