mirror of
https://github.com/bitwarden/browser
synced 2026-02-07 12:13:45 +00:00
64eb9b56d7
* PM-17737 - feat(anon-layout-width) - consolidate width setting to control title, subtitle, and content together for a unified UX. Removes all titleAreaMaxWidth usages and the titleAreaMaxWidth property entirely. * PM-17737 - AnonLayout - consolidate stories into playground (w/ the exception of default icon story b/c I can't figure how to omit the icon conditionally). * PM-17737 - AnonLayoutStories - show secondary content by default * PM-17737 - Per PR feedback, adjust maxWidthClass logic to remove string concatenation as it can result in tailwind classes not being compiled and available at run time. * PM-17737 - Per PR feedback, refactor stories to use configuration to generate all the scenarios so we can still track them via snapshots * PM-17737 - Fix anon layout mdx reference * PM-17737 - Make AnonLayoutMaxWidths singular * PM-17737 - When inside of a max width container, the icon container needs explicit width to be able to scale viewbox icons that don't have defined heights / widths
96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
// FIXME: Update this file to be type safe and remove this and next line
|
|
// @ts-strict-ignore
|
|
import { CommonModule } from "@angular/common";
|
|
import { Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
|
|
import { RouterModule } from "@angular/router";
|
|
import { firstValueFrom } from "rxjs";
|
|
|
|
import { ClientType } from "@bitwarden/common/enums";
|
|
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
|
|
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
|
|
|
import { IconModule, Icon } from "../icon";
|
|
import { BitwardenLogo, BitwardenShield } from "../icon/icons";
|
|
import { SharedModule } from "../shared";
|
|
import { TypographyModule } from "../typography";
|
|
|
|
export type AnonLayoutMaxWidth = "md" | "lg" | "xl" | "2xl" | "3xl";
|
|
|
|
@Component({
|
|
selector: "auth-anon-layout",
|
|
templateUrl: "./anon-layout.component.html",
|
|
imports: [IconModule, CommonModule, TypographyModule, SharedModule, RouterModule],
|
|
})
|
|
export class AnonLayoutComponent implements OnInit, OnChanges {
|
|
@HostBinding("class")
|
|
get classList() {
|
|
// AnonLayout should take up full height of parent container for proper footer placement.
|
|
return ["tw-h-full"];
|
|
}
|
|
|
|
@Input() title: string;
|
|
@Input() subtitle: string;
|
|
@Input() icon: Icon;
|
|
@Input() showReadonlyHostname: boolean;
|
|
@Input() hideLogo: boolean = false;
|
|
@Input() hideFooter: boolean = false;
|
|
@Input() hideIcon: boolean = false;
|
|
@Input() hideCardWrapper: boolean = false;
|
|
|
|
/**
|
|
* Max width of the anon layout title, subtitle, and content areas.
|
|
*
|
|
* @default 'md'
|
|
*/
|
|
@Input() maxWidth: AnonLayoutMaxWidth = "md";
|
|
|
|
protected logo = BitwardenLogo;
|
|
protected year: string;
|
|
protected clientType: ClientType;
|
|
protected hostname: string;
|
|
protected version: string;
|
|
|
|
protected hideYearAndVersion = false;
|
|
|
|
get maxWidthClass(): string {
|
|
switch (this.maxWidth) {
|
|
case "md":
|
|
return "tw-max-w-md";
|
|
case "lg":
|
|
return "tw-max-w-lg";
|
|
case "xl":
|
|
return "tw-max-w-xl";
|
|
case "2xl":
|
|
return "tw-max-w-2xl";
|
|
case "3xl":
|
|
return "tw-max-w-3xl";
|
|
}
|
|
}
|
|
|
|
constructor(
|
|
private environmentService: EnvironmentService,
|
|
private platformUtilsService: PlatformUtilsService,
|
|
) {
|
|
this.year = new Date().getFullYear().toString();
|
|
this.clientType = this.platformUtilsService.getClientType();
|
|
this.hideYearAndVersion = this.clientType !== ClientType.Web;
|
|
}
|
|
|
|
async ngOnInit() {
|
|
this.maxWidth = this.maxWidth ?? "md";
|
|
this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
|
|
this.version = await this.platformUtilsService.getApplicationVersion();
|
|
|
|
// If there is no icon input, then use the default icon
|
|
if (this.icon == null) {
|
|
this.icon = BitwardenShield;
|
|
}
|
|
}
|
|
|
|
async ngOnChanges(changes: SimpleChanges) {
|
|
if (changes.maxWidth) {
|
|
this.maxWidth = changes.maxWidth.currentValue ?? "md";
|
|
}
|
|
}
|
|
}
|