bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-10 13:40:06 +00:00
Code Issues Releases Wiki Activity

Add ability to display achievement specific icons

Browse Source 
Ideally the name of the icon is present on the achievement configuration. Currently a iconMap is used to lookup the icon by achievementId
This commit is contained in:
Daniel James Smith
2025-03-20 23:03:06 +01:00
parent b4762aa148
commit d9edf1149c
14 changed files with 156 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/browser/src/tools/popup/achievements/achievements.component.ts
View File

@@ -7,7 +7,7 @@ import { AchievementsListComponent } from "@bitwarden/angular/tools/achievements
import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { AchievementHub } from "@bitwarden/common/tools/achievements/achievement-hub";
import { EventStoreAbstraction } from "@bitwarden/common/tools/achievements/event-store.abstraction.service";
import { VaultItems_10_Added_Achievement } from "@bitwarden/common/tools/achievements/examples/achievements";
import { LoginItems_50_Added_Achievement } from "@bitwarden/common/tools/achievements/examples/achievements/login-item-added";
import { AchievementEarnedEvent, AchievementId } from "@bitwarden/common/tools/achievements/types";
import { UserId } from "@bitwarden/common/types/guid";
import { ButtonModule, IconModule } from "@bitwarden/components";
@@ -38,7 +38,7 @@ export class AchievementsComponent implements OnInit {
constructor(
private eventStore: EventStoreAbstraction,
private accountService: AccountService,
private achievementHub: AchievementHub
private achievementHub: AchievementHub,
) {}
async ngOnInit() {
@@ -62,10 +62,10 @@ export class AchievementsComponent implements OnInit {
version: "2025.3.1-innovation-sprint",
},
user: { id: this.currentUserId },
achievement: { type: "earned", name: VaultItems_10_Added_Achievement.name as AchievementId },
achievement: { type: "earned", name: LoginItems_50_Added_Achievement.name as AchievementId },
};
// this.eventStore.addEvent(earnedAchievement);
this.achievementHub.addEvent(earnedAchievement);
this.eventStore.addEvent(earnedAchievement);
// this.achievementHub.addEvent(earnedAchievement);
}
}

2
libs/angular/src/tools/achievements/achievement-item.component.html
View File

@@ -1,7 +1,7 @@
<bit-item>
<button bit-item-content type="button">
<div slot="start" class="tw-justify-start tw-flex">
<bit-icon [icon]="icon" class="{{ iconStyle }}"></bit-icon>
<bit-icon [icon]="icon()" class="{{ iconStyle }}"></bit-icon>
</div>
<span>{{ title() }}</span>
<span slot="secondary">{{ description() }}</span>

2
libs/angular/src/tools/achievements/achievement-item.component.ts
View File

@@ -18,7 +18,7 @@ import { AchievementIcon } from "./icons/achievement.icon";
imports: [CommonModule, ItemModule, ButtonModule, IconModule, TypographyModule],
})
export class AchievementItem {
protected readonly icon: Icon = AchievementIcon;
icon = input<Icon>(AchievementIcon);
protected iconStyle: string = "tw-grayscale";
title = input.required<string>();

55
libs/angular/src/tools/achievements/achievement-notifier.service.ts
View File

@@ -4,10 +4,11 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { AchievementService } from "@bitwarden/common/tools/achievements/achievement.service.abstraction";
import { ToastService } from "@bitwarden/components";
import { Icon, ToastService } from "@bitwarden/components";
import { AchievementNotifierService as AchievementNotifierServiceAbstraction } from "./achievement-notifier.abstraction";
import { AchievementIcon } from "./icons/achievement.icon";
import { iconMap } from "./icons/iconMap";
export class AchievementNotifierService implements AchievementNotifierServiceAbstraction {
constructor(
@@ -32,30 +33,9 @@ export class AchievementNotifierService implements AchievementNotifierServiceAbs
* Invoke showing toast
*/
// FIXME getClientType browswer and achievementEarned.service.name.extension won't match
// const account = await firstValueFrom(this.accountService.activeAccount$);
// this.achievementService
// .achievementsEarned$(account.id)
// .pipe(
// // Removing filter for testing purposes
// // filter(achievementEarned => achievementEarned.service.name == this.platformUtilsService.getClientType())).pipe(
// switchMap((earned) => this.achievementService.achievementById$(earned.achievement.name)),
// tap((achievement) => {
// //eslint-disable-next-line no-console
// console.log(achievement);
// }),
// )
// .subscribe((achievement) => {
// this.toastService.showToast({
// variant: "info",
// title: achievement.name,
// message: achievement.description,
// icon: AchievementIcon,
// });
// });
// FIXME Migrate to use achievementHub.earned$() instead of achievementService.achievementsEarned$
const account = await firstValueFrom(this.accountService.activeAccount$);
this.achievementService
.earned$
.achievementsEarned$(account.id)
.pipe(
// Removing filter for testing purposes
// filter(achievementEarned => achievementEarned.service.name == this.platformUtilsService.getClientType())).pipe(
@@ -70,8 +50,33 @@ export class AchievementNotifierService implements AchievementNotifierServiceAbs
variant: "info",
title: achievement.name,
message: achievement.description,
icon: AchievementIcon,
icon: this.lookupIcon(achievement.achievement),
});
});
// FIXME Migrate to use achievementHub.earned$() instead of achievementService.achievementsEarned$
// this.achievementService
// .earned$
// .pipe(
// // Removing filter for testing purposes
// // filter(achievementEarned => achievementEarned.service.name == this.platformUtilsService.getClientType())).pipe(
// switchMap((earned) => this.achievementService.achievementById$(earned.achievement.name)),
// tap((achievement) => {
// //eslint-disable-next-line no-console
// console.log(achievement);
// }),
// )
// .subscribe((achievement) => {
// this.toastService.showToast({
// variant: "info",
// title: achievement.name,
// message: achievement.description,
// icon: this.lookupIcon(achievement.name),
// });
// });
}
lookupIcon(achievementName: string): Icon {
return (iconMap[achievementName] as Icon) ?? AchievementIcon;
}
}

1
libs/angular/src/tools/achievements/achievements-list.component.html
View File

@@ -9,6 +9,7 @@
<bit-item-group>
@for (achievement of allAchievementCards; track achievement.name) {
<achievement-item
[icon]="achievement.icon"
[title]="achievement.name"
[description]="achievement.description"
[earned]="achievement.earned"

40
libs/angular/src/tools/achievements/achievements-list.component.ts
View File

@@ -8,6 +8,8 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
import { AchievementService } from "@bitwarden/common/tools/achievements/achievement.service.abstraction";
import {
LoginItems_1_Added_Achievement,
LoginItems_10_Added_Achievement,
LoginItems_50_Added_Achievement,
VaultItems_10_Added_Achievement,
VaultItems_1_Added_Achievement,
VaultItems_50_Added_Achievement,
@@ -15,6 +17,7 @@ import {
import { UserId } from "@bitwarden/common/types/guid";
import {
ButtonModule,
Icon,
IconButtonModule,
ItemModule,
SectionComponent,
@@ -23,6 +26,13 @@ import {
} from "@bitwarden/components";
import { AchievementItem } from "./achievement-item.component";
import {
OneLoginItemCreatedIcon,
TenLoginItemsCreatedIcon,
FiftyLoginItemsCreatedIcon,
} from "./icons";
import { AchievementIcon } from "./icons/achievement.icon";
import { iconMap } from "./icons/iconMap";
@Component({
selector: "achievements-list",
@@ -52,13 +62,31 @@ export class AchievementsListComponent implements OnInit {
];
mockAchievements = [
{ ...VaultItems_1_Added_Achievement, earned: false, progress: 0, date: new Date(0) },
{ ...VaultItems_10_Added_Achievement, earned: false, progress: 1, date: new Date(0) },
{ ...VaultItems_50_Added_Achievement, earned: true, progress: 0, date: new Date(0) },
{
...LoginItems_1_Added_Achievement,
earned: false,
progress: 0,
date: new Date(0),
icon: OneLoginItemCreatedIcon,
},
{
...LoginItems_10_Added_Achievement,
earned: false,
progress: 1,
date: new Date(0),
icon: TenLoginItemsCreatedIcon,
},
{
...LoginItems_50_Added_Achievement,
earned: true,
progress: 0,
date: new Date(0),
icon: FiftyLoginItemsCreatedIcon,
},
];
//FIXME uses mockedData for AchievmentsList
allAchievementCards = this.mockAchievements;
// allAchievementCards = this.allAchievements.map(achievement => { return { ...achievement, earned: true, progress: 0, date: new Date(0) } });
// allAchievementCards = this.allAchievements.map(achievement => { return { ...achievement, earned: true, progress: 0, date: new Date(0), icon: this.lookupIcon(achievement.achievement) } });
constructor(
private achievementService: AchievementService,
@@ -86,4 +114,8 @@ export class AchievementsListComponent implements OnInit {
async ngOnInit() {
this.currentUserId = (await firstValueFrom(this.accountService.activeAccount$)).id;
}
lookupIcon(achievementName: string): Icon {
return (iconMap[achievementName] as Icon) ?? AchievementIcon;
}
}

0
libs/angular/src/tools/achievements/icons/card/index.ts Normal file
View File

15
libs/angular/src/tools/achievements/icons/iconMap.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Icon } from "@bitwarden/components";
import {
OneLoginItemCreatedIcon,
TenLoginItemsCreatedIcon,
FiftyLoginItemsCreatedIcon,
OneHundredLoginItemsCreatedIcon,
} from "./login";
export const iconMap: { [key: string]: Icon } = {
"login-item-created": OneLoginItemCreatedIcon,
"10-login-items-added": TenLoginItemsCreatedIcon,
"50-login-items-added": FiftyLoginItemsCreatedIcon,
"100-login-items-added": OneHundredLoginItemsCreatedIcon,
};

2
libs/angular/src/tools/achievements/icons/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from "./login";
// export * from "./card";

15
libs/angular/src/tools/achievements/icons/login/fifty-login-items-created.icon.ts Normal file
View File

@@ -0,0 +1,15 @@
import { svgIcon } from "@bitwarden/components";
export const FiftyLoginItemsCreatedIcon = svgIcon`<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30.0671" cy="29.5671" r="28.2671" fill="#99BAF4" stroke="#0E3781" stroke-width="2.6" stroke-linecap="round"/>
<circle cx="30.0671" cy="27.2927" r="12.3463" fill="white" stroke="#0E3781" stroke-width="2.6" stroke-linecap="round"/>
<mask id="path-4-inside-1_4026_790" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25269 49.5262C8.65259 49.052 9.06613 48.5898 9.49288 48.1401C12.344 45.136 15.7288 42.7531 19.4541 41.1273C23.1793 39.5015 27.1719 38.6647 31.2041 38.6647C35.2362 38.6647 39.2289 39.5015 42.9541 41.1273C46.6793 42.7531 50.0641 45.136 52.9153 48.1401C52.9438 48.1701 52.9722 48.2002 53.0005 48.2303C47.5789 54.8844 39.3192 59.1342 30.0669 59.1342C21.4302 59.1342 13.6585 55.4311 8.25269 49.5262Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25269 49.5262C8.65259 49.052 9.06613 48.5898 9.49288 48.1401C12.344 45.136 15.7288 42.7531 19.4541 41.1273C23.1793 39.5015 27.1719 38.6647 31.2041 38.6647C35.2362 38.6647 39.2289 39.5015 42.9541 41.1273C46.6793 42.7531 50.0641 45.136 52.9153 48.1401C52.9438 48.1701 52.9722 48.2002 53.0005 48.2303C47.5789 54.8844 39.3192 59.1342 30.0669 59.1342C21.4302 59.1342 13.6585 55.4311 8.25269 49.5262Z" fill="white"/>
<path d="M8.25269 49.5262L6.26519 47.8499L4.7921 49.5965L6.33493 51.2818L8.25269 49.5262ZM9.49288 48.1401L11.3787 49.93H11.3787L9.49288 48.1401ZM19.4541 41.1273L20.4941 43.5102L20.4941 43.5102L19.4541 41.1273ZM42.9541 41.1273L41.9141 43.5102L42.9541 41.1273ZM52.9153 48.1401L51.0294 49.93L51.0294 49.93L52.9153 48.1401ZM53.0005 48.2303L55.0162 49.8726L56.4552 48.1064L54.8934 46.4479L53.0005 48.2303ZM10.2402 51.2024C10.6075 50.767 10.9871 50.3426 11.3787 49.93L7.60702 46.3503C7.14515 46.8369 6.69772 47.3371 6.26519 47.8499L10.2402 51.2024ZM11.3787 49.93C13.9951 47.1733 17.0938 44.9942 20.4941 43.5102L18.4141 38.7443C14.3639 40.5119 10.693 43.0988 7.60702 46.3503L11.3787 49.93ZM20.4941 43.5102C23.894 42.0264 27.5328 41.2647 31.2041 41.2647V36.0647C26.8111 36.0647 22.4646 36.9765 18.4141 38.7443L20.4941 43.5102ZM31.2041 41.2647C34.8754 41.2647 38.5142 42.0264 41.9141 43.5102L43.9941 38.7443C39.9436 36.9765 35.5971 36.0647 31.2041 36.0647V41.2647ZM41.9141 43.5102C45.3144 44.9942 48.4131 47.1733 51.0294 49.93L54.8011 46.3503C51.7152 43.0988 48.0442 40.5119 43.9941 38.7443L41.9141 43.5102ZM51.0294 49.93C51.0555 49.9574 51.0816 49.985 51.1077 50.0128L54.8934 46.4479C54.8628 46.4154 54.832 46.3828 54.8011 46.3503L51.0294 49.93ZM50.9849 46.588C46.0359 52.6621 38.5046 56.5342 30.0669 56.5342V61.7342C40.1339 61.7342 49.122 57.1067 55.0162 49.8726L50.9849 46.588ZM30.0669 56.5342C22.1897 56.5342 15.1044 53.1602 10.1704 47.7705L6.33493 51.2818C12.2125 57.7021 20.6707 61.7342 30.0669 61.7342V56.5342Z" fill="#0E3781" mask="url(#path-4-inside-1_4026_790)"/>
<path d="M64.0001 49.3282C64.0001 57.2271 57.5967 63.6306 49.6977 63.6306C41.7987 63.6306 35.3953 57.2271 35.3953 49.3282C35.3953 41.4292 41.7987 35.0258 49.6977 35.0258C57.5967 35.0258 64.0001 41.4292 64.0001 49.3282Z" fill="#FFBF00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.6977 61.2468C56.2802 61.2468 61.6163 55.9107 61.6163 49.3282C61.6163 42.7457 56.2802 37.4095 49.6977 37.4095C43.1152 37.4095 37.779 42.7457 37.779 49.3282C37.779 55.9107 43.1152 61.2468 49.6977 61.2468ZM49.6977 63.6306C57.5967 63.6306 64.0001 57.2271 64.0001 49.3282C64.0001 41.4292 57.5967 35.0258 49.6977 35.0258C41.7987 35.0258 35.3953 41.4292 35.3953 49.3282C35.3953 57.2271 41.7987 63.6306 49.6977 63.6306Z" fill="#0E3781"/>
<path d="M52.9391 55.6144C51.9204 55.6144 51.0463 55.3539 50.317 54.8329C49.5876 54.3004 49.0204 53.5653 48.6152 52.6276C48.2216 51.6783 48.0248 50.5785 48.0248 49.3282C48.0248 48.0779 48.2216 46.9839 48.6152 46.0462C49.0204 45.0969 49.5876 44.3617 50.317 43.8408C51.0463 43.3083 51.9204 43.042 52.9391 43.042C53.9695 43.042 54.8435 43.3083 55.5613 43.8408C56.2906 44.3617 56.8521 45.0969 57.2457 46.0462C57.6393 46.9839 57.8361 48.0779 57.8361 49.3282C57.8361 50.5785 57.6393 51.6783 57.2457 52.6276C56.8521 53.5653 56.2906 54.3004 55.5613 54.8329C54.8435 55.3539 53.9695 55.6144 52.9391 55.6144ZM52.9391 54.0689C53.5411 54.0689 54.0736 53.8779 54.5367 53.4958C55.0114 53.1138 55.3818 52.5697 55.6481 51.8635C55.9259 51.1573 56.0649 50.3122 56.0649 49.3282C56.0649 48.3326 55.9259 47.4875 55.6481 46.7929C55.3818 46.0867 55.0114 45.5484 54.5367 45.1779C54.0736 44.7959 53.5411 44.6049 52.9391 44.6049C52.3371 44.6049 51.793 44.7959 51.3068 45.1779C50.8322 45.5484 50.4617 46.0867 50.1954 46.7929C49.9292 47.4875 49.796 48.3326 49.796 49.3282C49.796 50.3122 49.9292 51.1573 50.1954 51.8635C50.4617 52.5697 50.8322 53.1138 51.3068 53.4958C51.793 53.8779 52.3371 54.0689 52.9391 54.0689Z" fill="#0E3781"/>
<path d="M44.9627 55.4059C44.4735 55.4059 44.077 55.0094 44.077 54.5202V45.2125L42.4762 45.7424C42.0246 45.8919 41.5591 45.5556 41.5591 45.0799C41.5591 44.802 41.7241 44.5505 41.9791 44.4398L44.5415 43.3275C44.6589 43.2765 44.7856 43.2502 44.9136 43.2502C45.4298 43.2502 45.8483 43.6687 45.8483 44.1849V54.5202C45.8483 55.0094 45.4518 55.4059 44.9627 55.4059Z" fill="#0E3781"/>
</svg>`;

4
libs/angular/src/tools/achievements/icons/login/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export { OneLoginItemCreatedIcon } from "./one-login-item-created.icon";
export { TenLoginItemsCreatedIcon } from "./ten-login-items-created.icon";
export { FiftyLoginItemsCreatedIcon } from "./fifty-login-items-created.icon";
export { OneHundredLoginItemsCreatedIcon } from "./onehundred-login-items-created.icon";

14
libs/angular/src/tools/achievements/icons/login/one-login-item-created.icon.ts Normal file
View File

@@ -0,0 +1,14 @@
import { svgIcon } from "@bitwarden/components";
export const OneLoginItemCreatedIcon = svgIcon`<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="29.5671" cy="29.5671" r="28.2671" fill="#99BAF4" stroke="#0E3781" stroke-width="2.6" stroke-linecap="round"/>
<circle cx="29.5671" cy="27.2927" r="12.3463" fill="white" stroke="#0E3781" stroke-width="2.6" stroke-linecap="round"/>
<mask id="path-4-inside-1_4007_5566" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.7526 49.5261C8.15251 49.052 8.56605 48.5897 8.99279 48.1401C11.844 45.136 15.2288 42.753 18.954 41.1272C22.6792 39.5014 26.6719 38.6646 30.704 38.6646C34.7361 38.6646 38.7288 39.5014 42.454 41.1272C46.1792 42.753 49.564 45.136 52.4152 48.1401C52.4437 48.1701 52.4721 48.2002 52.5004 48.2303C47.0789 54.8844 38.8191 59.1342 29.5668 59.1342C20.9301 59.1342 13.1584 55.4311 7.7526 49.5261Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.7526 49.5261C8.15251 49.052 8.56605 48.5897 8.99279 48.1401C11.844 45.136 15.2288 42.753 18.954 41.1272C22.6792 39.5014 26.6719 38.6646 30.704 38.6646C34.7361 38.6646 38.7288 39.5014 42.454 41.1272C46.1792 42.753 49.564 45.136 52.4152 48.1401C52.4437 48.1701 52.4721 48.2002 52.5004 48.2303C47.0789 54.8844 38.8191 59.1342 29.5668 59.1342C20.9301 59.1342 13.1584 55.4311 7.7526 49.5261Z" fill="white"/>
<path d="M7.7526 49.5261L5.76511 47.8499L4.29202 49.5964L5.83485 51.2818L7.7526 49.5261ZM8.99279 48.1401L10.8786 49.93H10.8786L8.99279 48.1401ZM18.954 41.1272L19.994 43.5102L18.954 41.1272ZM42.454 41.1272L41.414 43.5102L42.454 41.1272ZM52.4152 48.1401L50.5293 49.9299L50.5294 49.93L52.4152 48.1401ZM52.5004 48.2303L54.5161 49.8726L55.9551 48.1064L54.3933 46.4478L52.5004 48.2303ZM9.74009 51.2024C10.1074 50.7669 10.487 50.3426 10.8786 49.93L7.10694 46.3503C6.64506 46.8369 6.19764 47.337 5.76511 47.8499L9.74009 51.2024ZM10.8786 49.93C13.495 47.1732 16.5937 44.9942 19.994 43.5102L17.914 38.7443C13.8638 40.5119 10.1929 43.0988 7.10694 46.3503L10.8786 49.93ZM19.994 43.5102C23.3939 42.0264 27.0327 41.2646 30.704 41.2646V36.0646C26.311 36.0646 21.9645 36.9765 17.914 38.7443L19.994 43.5102ZM30.704 41.2646C34.3753 41.2646 38.0141 42.0264 41.414 43.5102L43.494 38.7443C39.4435 36.9765 35.097 36.0646 30.704 36.0646V41.2646ZM41.414 43.5102C44.8143 44.9942 47.913 47.1732 50.5293 49.9299L54.3011 46.3503C51.2151 43.0988 47.5442 40.5119 43.494 38.7443L41.414 43.5102ZM50.5294 49.93C50.5554 49.9574 50.5815 49.985 50.6076 50.0127L54.3933 46.4478C54.3627 46.4153 54.3319 46.3828 54.301 46.3502L50.5294 49.93ZM50.4848 46.588C45.5358 52.6621 38.0045 56.5342 29.5668 56.5342V61.7342C39.6338 61.7342 48.622 57.1066 54.5161 49.8726L50.4848 46.588ZM29.5668 56.5342C21.6897 56.5342 14.6043 53.1601 9.67036 47.7705L5.83485 51.2818C11.7124 57.7021 20.1706 61.7342 29.5668 61.7342V56.5342Z" fill="#0E3781" mask="url(#path-4-inside-1_4007_5566)"/>
<path d="M64.0001 49.6964C64.0001 57.5954 57.5967 63.9988 49.6977 63.9988C41.7987 63.9988 35.3953 57.5954 35.3953 49.6964C35.3953 41.7974 41.7987 35.394 49.6977 35.394C57.5967 35.394 64.0001 41.7974 64.0001 49.6964Z" fill="#FFBF00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.6977 61.6151C56.2802 61.6151 61.6163 56.2789 61.6163 49.6964C61.6163 43.1139 56.2802 37.7778 49.6977 37.7778C43.1152 37.7778 37.779 43.1139 37.779 49.6964C37.779 56.2789 43.1152 61.6151 49.6977 61.6151ZM49.6977 63.9988C57.5967 63.9988 64.0001 57.5954 64.0001 49.6964C64.0001 41.7974 57.5967 35.394 49.6977 35.394C41.7987 35.394 35.3953 41.7974 35.3953 49.6964C35.3953 57.5954 41.7987 63.9988 49.6977 63.9988Z" fill="#0E3781"/>
<path d="M49.9248 57.9925C49.3726 57.9925 48.9248 57.5448 48.9248 56.9925V45.2071C48.9248 45.1419 48.8634 45.0941 48.8002 45.1102L47.2997 45.4915C46.7627 45.6279 46.2408 45.2221 46.2408 44.668C46.2408 44.3295 46.4417 44.0233 46.7522 43.8886L49.3579 42.7578C49.6092 42.6488 49.8802 42.5925 50.1541 42.5925H50.1688C50.7211 42.5925 51.1688 43.0402 51.1688 43.5925V56.9925C51.1688 57.5448 50.7211 57.9925 50.1688 57.9925H49.9248Z" fill="#0E3781"/>
</svg>`;

17
libs/angular/src/tools/achievements/icons/login/onehundred-login-items-created.icon.ts Normal file
View File

@@ -0,0 +1,17 @@
import { svgIcon } from "@bitwarden/components";
export const OneHundredLoginItemsCreatedIcon = svgIcon`<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30.0671" cy="29.5671" r="28.2671" fill="#99BAF4" stroke="#0E3781" stroke-width="2.6" stroke-linecap="round"/>
<circle cx="30.0671" cy="27.2927" r="12.3463" fill="white" stroke="#0E3781" stroke-width="2.6" stroke-linecap="round"/>
<mask id="path-4-inside-1_4026_822" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25269 49.5262C8.65259 49.052 9.06613 48.5898 9.49288 48.1401C12.344 45.136 15.7288 42.7531 19.4541 41.1273C23.1793 39.5015 27.1719 38.6647 31.2041 38.6647C35.2362 38.6647 39.2289 39.5015 42.9541 41.1273C46.6793 42.7531 50.0641 45.136 52.9153 48.1401C52.9438 48.1701 52.9722 48.2002 53.0005 48.2303C47.5789 54.8844 39.3192 59.1342 30.0669 59.1342C21.4302 59.1342 13.6585 55.4311 8.25269 49.5262Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25269 49.5262C8.65259 49.052 9.06613 48.5898 9.49288 48.1401C12.344 45.136 15.7288 42.7531 19.4541 41.1273C23.1793 39.5015 27.1719 38.6647 31.2041 38.6647C35.2362 38.6647 39.2289 39.5015 42.9541 41.1273C46.6793 42.7531 50.0641 45.136 52.9153 48.1401C52.9438 48.1701 52.9722 48.2002 53.0005 48.2303C47.5789 54.8844 39.3192 59.1342 30.0669 59.1342C21.4302 59.1342 13.6585 55.4311 8.25269 49.5262Z" fill="white"/>
<path d="M8.25269 49.5262L6.26519 47.8499L4.7921 49.5965L6.33493 51.2818L8.25269 49.5262ZM9.49288 48.1401L11.3787 49.93H11.3787L9.49288 48.1401ZM19.4541 41.1273L20.4941 43.5102L20.4941 43.5102L19.4541 41.1273ZM42.9541 41.1273L41.9141 43.5102L42.9541 41.1273ZM52.9153 48.1401L51.0294 49.93L51.0294 49.93L52.9153 48.1401ZM53.0005 48.2303L55.0162 49.8726L56.4552 48.1064L54.8934 46.4479L53.0005 48.2303ZM10.2402 51.2024C10.6075 50.767 10.9871 50.3426 11.3787 49.93L7.60702 46.3503C7.14515 46.8369 6.69772 47.3371 6.26519 47.8499L10.2402 51.2024ZM11.3787 49.93C13.9951 47.1733 17.0938 44.9942 20.4941 43.5102L18.4141 38.7443C14.3639 40.5119 10.693 43.0988 7.60702 46.3503L11.3787 49.93ZM20.4941 43.5102C23.894 42.0264 27.5328 41.2647 31.2041 41.2647V36.0647C26.8111 36.0647 22.4646 36.9765 18.4141 38.7443L20.4941 43.5102ZM31.2041 41.2647C34.8754 41.2647 38.5142 42.0264 41.9141 43.5102L43.9941 38.7443C39.9436 36.9765 35.5971 36.0647 31.2041 36.0647V41.2647ZM41.9141 43.5102C45.3144 44.9942 48.4131 47.1733 51.0294 49.93L54.8011 46.3503C51.7152 43.0988 48.0442 40.5119 43.9941 38.7443L41.9141 43.5102ZM51.0294 49.93C51.0555 49.9574 51.0816 49.985 51.1077 50.0128L54.8934 46.4479C54.8628 46.4154 54.832 46.3828 54.8011 46.3503L51.0294 49.93ZM50.9849 46.588C46.0359 52.6621 38.5046 56.5342 30.0669 56.5342V61.7342C40.1339 61.7342 49.122 57.1067 55.0162 49.8726L50.9849 46.588ZM30.0669 56.5342C22.1897 56.5342 15.1044 53.1602 10.1704 47.7705L6.33493 51.2818C12.2125 57.7021 20.6707 61.7342 30.0669 61.7342V56.5342Z" fill="#0E3781" mask="url(#path-4-inside-1_4026_822)"/>
<path d="M64.0001 49.3282C64.0001 57.2271 57.5967 63.6306 49.6977 63.6306C41.7987 63.6306 35.3953 57.2271 35.3953 49.3282C35.3953 41.4292 41.7987 35.0258 49.6977 35.0258C57.5967 35.0258 64.0001 41.4292 64.0001 49.3282Z" fill="#FFBF00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.6977 61.2468C56.2802 61.2468 61.6164 55.9107 61.6164 49.3282C61.6164 42.7457 56.2802 37.4095 49.6977 37.4095C43.1152 37.4095 37.7791 42.7457 37.7791 49.3282C37.7791 55.9107 43.1152 61.2468 49.6977 61.2468ZM49.6977 63.6306C57.5967 63.6306 64.0001 57.2271 64.0001 49.3282C64.0001 41.4292 57.5967 35.0258 49.6977 35.0258C41.7987 35.0258 35.3953 41.4292 35.3953 49.3282C35.3953 57.2271 41.7987 63.6306 49.6977 63.6306Z" fill="#0E3781"/>
<path d="M55.5463 53.6071C54.8159 53.6071 54.1893 53.4341 53.6666 53.0882C53.1438 52.7345 52.7401 52.2463 52.4557 51.6236C52.1789 50.9932 52.0405 50.2628 52.0405 49.4325C52.0405 48.6022 52.1789 47.8757 52.4557 47.2529C52.7401 46.6225 53.1438 46.1343 53.6666 45.7884C54.1893 45.4347 54.8159 45.2579 55.5463 45.2579C56.269 45.2579 56.8879 45.4347 57.403 45.7884C57.9258 46.1343 58.3255 46.6225 58.6023 47.2529C58.8868 47.8757 59.029 48.6022 59.029 49.4325C59.029 50.2628 58.8868 50.9932 58.6023 51.6236C58.3255 52.2463 57.9258 52.7345 57.403 53.0882C56.8879 53.4341 56.269 53.6071 55.5463 53.6071ZM55.5348 52.3617C55.9422 52.3617 56.3036 52.2463 56.6188 52.0157C56.934 51.7774 57.1762 51.4391 57.3453 51.0009C57.5221 50.5626 57.6105 50.0399 57.6105 49.4325C57.6105 48.8251 57.5221 48.3024 57.3453 47.8641C57.1762 47.4259 56.934 47.0915 56.6188 46.8608C56.3036 46.6225 55.9422 46.5033 55.5348 46.5033C55.1273 46.5033 54.766 46.6225 54.4507 46.8608C54.1355 47.0915 53.8895 47.4259 53.7127 47.8641C53.5435 48.3024 53.459 48.8251 53.459 49.4325C53.459 50.0399 53.5435 50.5626 53.7127 51.0009C53.8895 51.4391 54.1355 51.7774 54.4507 52.0157C54.766 52.2463 55.1273 52.3617 55.5348 52.3617Z" fill="#0E3781"/>
<path d="M47.7196 53.6071C46.9892 53.6071 46.3626 53.4341 45.8398 53.0882C45.317 52.7345 44.9134 52.2463 44.629 51.6236C44.3522 50.9932 44.2138 50.2628 44.2138 49.4325C44.2138 48.6022 44.3522 47.8757 44.629 47.2529C44.9134 46.6225 45.317 46.1343 45.8398 45.7884C46.3626 45.4347 46.9892 45.2579 47.7196 45.2579C48.4422 45.2579 49.0611 45.4347 49.5762 45.7884C50.099 46.1343 50.4988 46.6225 50.7756 47.2529C51.06 47.8757 51.2023 48.6022 51.2023 49.4325C51.2023 50.2628 51.06 50.9932 50.7756 51.6236C50.4988 52.2463 50.099 52.7345 49.5762 53.0882C49.0611 53.4341 48.4422 53.6071 47.7196 53.6071ZM47.708 52.3617C48.1155 52.3617 48.4768 52.2463 48.7921 52.0157C49.1073 51.7774 49.3494 51.4391 49.5186 51.0009C49.6954 50.5626 49.7838 50.0399 49.7838 49.4325C49.7838 48.8251 49.6954 48.3024 49.5186 47.8641C49.3494 47.4259 49.1073 47.0915 48.7921 46.8608C48.4768 46.6225 48.1155 46.5033 47.708 46.5033C47.3006 46.5033 46.9392 46.6225 46.624 46.8608C46.3088 47.0915 46.0628 47.4259 45.886 47.8641C45.7168 48.3024 45.6323 48.8251 45.6323 49.4325C45.6323 50.0399 45.7168 50.5626 45.886 51.0009C46.0628 51.4391 46.3088 51.7774 46.624 52.0157C46.9392 52.2463 47.3006 52.3617 47.708 52.3617Z" fill="#0E3781"/>
<path d="M42.3461 53.4687C41.9544 53.4687 41.6369 53.1511 41.6369 52.7594V46.9761L40.8971 47.167C40.5476 47.2572 40.2069 46.9933 40.2069 46.6323C40.2069 46.4137 40.3359 46.2156 40.5359 46.1272L42.0525 45.4571C42.1435 45.4169 42.2418 45.3962 42.3412 45.3962C42.7356 45.3962 43.0553 45.7159 43.0553 46.1103V52.7594C43.0553 53.1511 42.7378 53.4687 42.3461 53.4687Z" fill="#0E3781"/>
</svg>
`;

15
libs/angular/src/tools/achievements/icons/login/ten-login-items-created.icon.ts Normal file
View File

@@ -0,0 +1,15 @@
import { svgIcon } from "@bitwarden/components";
export const TenLoginItemsCreatedIcon = svgIcon`<svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30.0671" cy="29.5671" r="28.2671" fill="#99BAF4" stroke="#0E3781" stroke-width="2.6" stroke-linecap="round"/>
<circle cx="30.0671" cy="27.2927" r="12.3463" fill="white" stroke="#0E3781" stroke-width="2.6" stroke-linecap="round"/>
<mask id="path-4-inside-1_4026_806" fill="white">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25269 49.5262C8.65259 49.052 9.06613 48.5898 9.49288 48.1401C12.344 45.136 15.7288 42.7531 19.4541 41.1273C23.1793 39.5015 27.1719 38.6647 31.2041 38.6647C35.2362 38.6647 39.2289 39.5015 42.9541 41.1273C46.6793 42.7531 50.0641 45.136 52.9153 48.1401C52.9438 48.1701 52.9722 48.2002 53.0005 48.2303C47.5789 54.8844 39.3192 59.1342 30.0669 59.1342C21.4302 59.1342 13.6585 55.4311 8.25269 49.5262Z"/>
</mask>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25269 49.5262C8.65259 49.052 9.06613 48.5898 9.49288 48.1401C12.344 45.136 15.7288 42.7531 19.4541 41.1273C23.1793 39.5015 27.1719 38.6647 31.2041 38.6647C35.2362 38.6647 39.2289 39.5015 42.9541 41.1273C46.6793 42.7531 50.0641 45.136 52.9153 48.1401C52.9438 48.1701 52.9722 48.2002 53.0005 48.2303C47.5789 54.8844 39.3192 59.1342 30.0669 59.1342C21.4302 59.1342 13.6585 55.4311 8.25269 49.5262Z" fill="white"/>
<path d="M8.25269 49.5262L6.26519 47.8499L4.7921 49.5965L6.33493 51.2818L8.25269 49.5262ZM9.49288 48.1401L11.3787 49.93H11.3787L9.49288 48.1401ZM19.4541 41.1273L20.4941 43.5102L20.4941 43.5102L19.4541 41.1273ZM42.9541 41.1273L41.9141 43.5102L42.9541 41.1273ZM52.9153 48.1401L51.0294 49.93L51.0294 49.93L52.9153 48.1401ZM53.0005 48.2303L55.0162 49.8726L56.4552 48.1064L54.8934 46.4479L53.0005 48.2303ZM10.2402 51.2024C10.6075 50.767 10.9871 50.3426 11.3787 49.93L7.60702 46.3503C7.14515 46.8369 6.69772 47.3371 6.26519 47.8499L10.2402 51.2024ZM11.3787 49.93C13.9951 47.1733 17.0938 44.9942 20.4941 43.5102L18.4141 38.7443C14.3639 40.5119 10.693 43.0988 7.60702 46.3503L11.3787 49.93ZM20.4941 43.5102C23.894 42.0264 27.5328 41.2647 31.2041 41.2647V36.0647C26.8111 36.0647 22.4646 36.9765 18.4141 38.7443L20.4941 43.5102ZM31.2041 41.2647C34.8754 41.2647 38.5142 42.0264 41.9141 43.5102L43.9941 38.7443C39.9436 36.9765 35.5971 36.0647 31.2041 36.0647V41.2647ZM41.9141 43.5102C45.3144 44.9942 48.4131 47.1733 51.0294 49.93L54.8011 46.3503C51.7152 43.0988 48.0442 40.5119 43.9941 38.7443L41.9141 43.5102ZM51.0294 49.93C51.0555 49.9574 51.0816 49.985 51.1077 50.0128L54.8934 46.4479C54.8628 46.4154 54.832 46.3828 54.8011 46.3503L51.0294 49.93ZM50.9849 46.588C46.0359 52.6621 38.5046 56.5342 30.0669 56.5342V61.7342C40.1339 61.7342 49.122 57.1067 55.0162 49.8726L50.9849 46.588ZM30.0669 56.5342C22.1897 56.5342 15.1044 53.1602 10.1704 47.7705L6.33493 51.2818C12.2125 57.7021 20.6707 61.7342 30.0669 61.7342V56.5342Z" fill="#0E3781" mask="url(#path-4-inside-1_4026_806)"/>
<path d="M64.0001 49.6963C64.0001 57.5953 57.5967 63.9987 49.6977 63.9987C41.7987 63.9987 35.3953 57.5953 35.3953 49.6963C35.3953 41.7973 41.7987 35.3939 49.6977 35.3939C57.5967 35.3939 64.0001 41.7973 64.0001 49.6963Z" fill="#FFBF00"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.6977 61.615C56.2802 61.615 61.6163 56.2788 61.6163 49.6963C61.6163 43.1138 56.2802 37.7777 49.6977 37.7777C43.1152 37.7777 37.779 43.1138 37.779 49.6963C37.779 56.2788 43.1152 61.615 49.6977 61.615ZM49.6977 63.9987C57.5967 63.9987 64.0001 57.5953 64.0001 49.6963C64.0001 41.7973 57.5967 35.3939 49.6977 35.3939C41.7987 35.3939 35.3953 41.7973 35.3953 49.6963C35.3953 57.5953 41.7987 63.9987 49.6977 63.9987Z" fill="#0E3781"/>
<path d="M54.3318 55.9825C53.3131 55.9825 52.439 55.722 51.7097 55.2011C50.9803 54.6686 50.4131 53.9334 50.0079 52.9957C49.6143 52.0464 49.4175 50.9466 49.4175 49.6963C49.4175 48.4461 49.6143 47.352 50.0079 46.4143C50.4131 45.465 50.9803 44.7299 51.7097 44.209C52.439 43.6764 53.3131 43.4102 54.3318 43.4102C55.3622 43.4102 56.2362 43.6764 56.954 44.209C57.6833 44.7299 58.2448 45.465 58.6384 46.4143C59.032 47.352 59.2288 48.4461 59.2288 49.6963C59.2288 50.9466 59.032 52.0464 58.6384 52.9957C58.2448 53.9334 57.6833 54.6686 56.954 55.2011C56.2362 55.722 55.3622 55.9825 54.3318 55.9825ZM54.3318 54.437C54.9338 54.437 55.4663 54.246 55.9294 53.864C56.4041 53.4819 56.7745 52.9378 57.0408 52.2317C57.3186 51.5255 57.4575 50.6804 57.4575 49.6963C57.4575 48.7007 57.3186 47.8556 57.0408 47.161C56.7745 46.4548 56.4041 45.9165 55.9294 45.5461C55.4663 45.164 54.9338 44.973 54.3318 44.973C53.7298 44.973 53.1857 45.164 52.6995 45.5461C52.2248 45.9165 51.8544 46.4548 51.5881 47.161C51.3219 47.8556 51.1887 48.7007 51.1887 49.6963C51.1887 50.6804 51.3219 51.5255 51.5881 52.2317C51.8544 52.9378 52.2248 53.4819 52.6995 53.864C53.1857 54.246 53.7298 54.437 54.3318 54.437Z" fill="#0E3781"/>
<path d="M44.3516 55.9826C43.5297 55.9826 42.8119 55.8379 42.1983 55.5485C41.5964 55.2475 41.1217 54.8481 40.7744 54.3503C40.6129 54.1108 40.4822 53.8539 40.3823 53.5796C40.2041 53.0902 40.6209 52.6312 41.1417 52.6312C41.5553 52.6312 41.8957 52.932 42.0942 53.2949C42.2361 53.5542 42.4271 53.7845 42.6672 53.9856C43.0955 54.333 43.6628 54.5066 44.369 54.5066C44.8899 54.5066 45.3357 54.385 45.7061 54.1419C46.0766 53.8988 46.3602 53.5689 46.557 53.1521C46.7654 52.7238 46.8696 52.2433 46.8696 51.7108C46.8696 51.1783 46.7654 50.7152 46.557 50.3216C46.3602 49.9164 46.0824 49.6038 45.7235 49.3839C45.3646 49.1523 44.942 49.0366 44.4558 49.0366C43.8654 49.0366 43.3676 49.1581 42.9624 49.4012C42.7287 49.5348 42.524 49.6856 42.348 49.8538C42.1104 50.081 41.811 50.2521 41.4822 50.2521H41.4539C40.8469 50.2521 40.3799 49.7159 40.4634 49.1147L41.19 43.8774C41.2106 43.7291 41.3374 43.6187 41.4872 43.6187H47.1214C47.5386 43.6187 47.8768 43.9568 47.8768 44.374C47.8768 44.7912 47.5386 45.1294 47.1214 45.1294H42.5457L41.9726 48.6198C42.2504 48.3188 42.6209 48.0757 43.084 47.8905C43.547 47.6937 44.0796 47.5953 44.6816 47.5953C45.2951 47.5953 45.8392 47.7053 46.3139 47.9252C46.7885 48.1336 47.1937 48.4288 47.5295 48.8108C47.8652 49.1813 48.1141 49.6154 48.2762 50.1132C48.4498 50.611 48.5366 51.1378 48.5366 51.6934C48.5366 52.2954 48.4382 52.8569 48.2414 53.3779C48.0446 53.8872 47.761 54.3387 47.3905 54.7324C47.0316 55.126 46.5975 55.4327 46.0881 55.6527C45.5788 55.8727 44.9999 55.9826 44.3516 55.9826Z" fill="#0E3781"/>
</svg>`;