mirror of
https://github.com/bitwarden/browser
synced 2026-02-04 10:43:47 +00:00
0340a881ae
* saved WIP
* created at risk password callout service to hold state for callout data. wip
* update at-risk-password-callout to use states for tracking showing and dismissing success banner
* adding spec file for new serive
* update styles to match figma
* minor wording changes
* fix undefined lint error in at risk password callout
* moved service to libs
* added another route guard so when user clears all at risk items they are directed back to the vault page
* small cleanup in at risk callout component and at risk pw guard
* clean up code in at risk password callout component
* update state to memory
* refactor for readability at risk password callout component
* move state update logic from component to at risk password callout service
* fix: bypass router cache on back() in popout
* Revert "fix: bypass router cache on back() in popout"
This reverts commit 23f9312434.
* refactor updatePendingTasksState call
* refactor at risk password callout component and service. remove signals, implement logic through observables. Completed value for tasks utilized.
* clean up completedTasks in at risk password callout service
* add updated state value to prevent banner among diff clients
* move hasInteracted call to page component to avoid looping
* remove excess call in service
* update icon null logic in banner component
* update the callout to use a new banner
* fix classes
* updating banners in at risk password callout component
* anchor tag
* move at-risk callout to above nudges
* update `showCompletedTasksBanner$` variable naming
---------
Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>
Co-authored-by: Nick Krantz <nick@livefront.com>
69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import { CommonModule } from "@angular/common";
|
|
import { Component, OnInit, Output, EventEmitter, input, model } from "@angular/core";
|
|
|
|
import { I18nPipe } from "@bitwarden/ui-common";
|
|
|
|
import { IconButtonModule } from "../icon-button";
|
|
|
|
type BannerType = "premium" | "info" | "warning" | "danger";
|
|
|
|
const defaultIcon: Record<BannerType, string> = {
|
|
premium: "bwi-star",
|
|
info: "bwi-info-circle",
|
|
warning: "bwi-exclamation-triangle",
|
|
danger: "bwi-error",
|
|
};
|
|
/**
|
|
* Banners are used for important communication with the user that needs to be seen right away, but has
|
|
* little effect on the experience. Banners appear at the top of the user's screen on page load and
|
|
* persist across all pages a user navigates to.
|
|
|
|
* - They should always be dismissible and never use a timeout. If a user dismisses a banner, it should not reappear during that same active session.
|
|
* - Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their effectiveness may decrease if too many are used.
|
|
* - Avoid stacking multiple banners.
|
|
* - Banners can contain a button or anchor that uses the `bitLink` directive with `linkType="secondary"`.
|
|
*/
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
|
|
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
|
|
@Component({
|
|
selector: "bit-banner",
|
|
templateUrl: "./banner.component.html",
|
|
imports: [CommonModule, IconButtonModule, I18nPipe],
|
|
host: {
|
|
// Account for bit-layout's padding
|
|
class:
|
|
"tw-flex tw-flex-col [bit-layout_&]:-tw-mx-8 [bit-layout_&]:-tw-my-6 [bit-layout_&]:tw-pb-6",
|
|
},
|
|
})
|
|
export class BannerComponent implements OnInit {
|
|
readonly bannerType = input<BannerType>("info");
|
|
|
|
// passing `null` will remove the icon from element from the banner
|
|
readonly icon = model<string | null>();
|
|
readonly useAlertRole = input(true);
|
|
readonly showClose = input(true);
|
|
|
|
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
|
|
// eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
|
|
@Output() onClose = new EventEmitter<void>();
|
|
|
|
ngOnInit(): void {
|
|
if (!this.icon() && this.icon() !== null) {
|
|
this.icon.set(defaultIcon[this.bannerType()]);
|
|
}
|
|
}
|
|
|
|
get bannerClass() {
|
|
switch (this.bannerType()) {
|
|
case "danger":
|
|
return "tw-bg-danger-100 tw-border-b-danger-700";
|
|
case "info":
|
|
return "tw-bg-info-100 tw-border-b-info-700";
|
|
case "premium":
|
|
return "tw-bg-success-100 tw-border-b-success-700";
|
|
case "warning":
|
|
return "tw-bg-warning-100 tw-border-b-warning-700";
|
|
}
|
|
}
|
|
}
|