mirror of
https://github.com/bitwarden/browser
synced 2025-12-06 00:13:28 +00:00
[CL-850] Remove anon layout default icon and require either icon or no icon (#16433)
This commit is contained in:
Vicki League
GitHub
18
libs/assets/src/svg/svgs/account-warning.icon.ts
Normal file
18
libs/assets/src/svg/svgs/account-warning.icon.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { svgIcon } from "../icon-service";
|
||||
|
||||
export const AccountWarning = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 12.75 96 72">
|
||||
<path class="tw-fill-illustration-bg-primary" d="M0 18.512a5.76 5.76 0 0 1 5.76-5.76h54.48a5.76 5.76 0 0 1 5.76 5.76v38.48a5.76 5.76 0 0 1-5.76 5.76H5.76A5.76 5.76 0 0 1 0 56.992v-38.48Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M60.24 14.672H5.76a3.84 3.84 0 0 0-3.84 3.84v38.48a3.84 3.84 0 0 0 3.84 3.84h54.48a3.84 3.84 0 0 0 3.84-3.84v-38.48a3.84 3.84 0 0 0-3.84-3.84Zm-54.48-1.92A5.76 5.76 0 0 0 0 18.512v38.48a5.76 5.76 0 0 0 5.76 5.76h54.48a5.76 5.76 0 0 0 5.76-5.76v-38.48a5.76 5.76 0 0 0-5.76-5.76H5.76Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M65 24.712H1v-1.92h64v1.92Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-outline" d="M62 18.752a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM56 18.752a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM50 18.752a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
|
||||
<path class="tw-fill-illustration-tertiary" d="M21.099 48.635c1.515-2.606 5.28-2.606 6.795 0l10.053 17.29c1.523 2.62-.367 5.906-3.398 5.906H14.444c-3.03 0-4.92-3.285-3.398-5.905L21.1 48.636Z"/>
|
||||
<path class="tw-fill-illustration-outline" d="M20.373 48.213c1.839-3.163 6.408-3.163 8.247 0l10.053 17.29c1.849 3.18-.446 7.168-4.124 7.168H14.444c-3.678 0-5.973-3.987-4.124-7.167l10.053-17.29Zm6.795.844c-1.192-2.049-4.152-2.049-5.343 0L11.773 66.349c-1.198 2.06.288 4.643 2.671 4.643h20.105c2.383 0 3.869-2.583 2.671-4.643l-10.052-17.29Z"/>
|
||||
<circle class="tw-fill-illustration-outline" cx="24.496" cy="66.428" r="1.351" />
|
||||
<path class="tw-fill-illustration-outline" d="M22.517 54.707a.393.393 0 0 1 .39-.434h3.178c.234 0 .416.202.391.434l-.929 8.67a.393.393 0 0 1-.39.35h-1.32c-.201 0-.37-.151-.391-.35L22.977 59l-.46-4.293Z"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M82 42.752c0 7.732-6.268 14-14 14s-14-6.268-14-14 6.268-14 14-14 14 6.268 14 14Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M68 54.832c6.671 0 12.08-5.408 12.08-12.08S74.67 30.672 68 30.672c-6.672 0-12.08 5.408-12.08 12.08s5.408 12.08 12.08 12.08Zm0 1.92c7.732 0 14-6.268 14-14s-6.268-14-14-14-14 6.268-14 14 6.268 14 14 14Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M93.907 72.728A27.5 27.5 0 0 1 96 83.252a1.5 1.5 0 0 1-1.5 1.5h-52a1.5 1.5 0 0 1-1.5-1.5 27.5 27.5 0 0 1 52.907-10.524Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M94.076 82.832a25.58 25.58 0 0 0-51.153 0h51.153Zm1.924.42a27.5 27.5 0 1 0-55 0 1.5 1.5 0 0 0 1.5 1.5h52a1.5 1.5 0 0 0 1.5-1.5Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
`;
|
||||
32
libs/assets/src/svg/svgs/business-welcome.icon.ts
Normal file
32
libs/assets/src/svg/svgs/business-welcome.icon.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { svgIcon } from "../icon-service";
|
||||
|
||||
export const BusinessWelcome = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4.17 0.75 91.67 95.83">
|
||||
<path class="tw-fill-illustration-bg-secondary" d="M56.25 9.085A8.333 8.333 0 0 1 64.583.752h8.334a8.333 8.333 0 0 1 8.333 8.333v4.167h-25V9.085Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M72.917 2.835h-8.334a6.25 6.25 0 0 0-6.25 6.25v2.084h20.834V9.085a6.25 6.25 0 0 0-6.25-6.25ZM64.583.752a8.333 8.333 0 0 0-8.333 8.333v4.167h25V9.085A8.333 8.333 0 0 0 72.917.752h-8.334Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-secondary" d="M48.959 17.418a8.333 8.333 0 0 1 8.333-8.333h22.916a8.333 8.333 0 0 1 8.334 8.333v6.25H48.958v-6.25Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M80.209 11.168H57.291a6.25 6.25 0 0 0-6.25 6.25v4.167h35.416v-4.167a6.25 6.25 0 0 0-6.25-6.25ZM57.291 9.085a8.333 8.333 0 0 0-8.334 8.333v6.25h39.584v-6.25a8.333 8.333 0 0 0-8.334-8.333H57.293Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-secondary" d="M41.666 27.835A8.333 8.333 0 0 1 50 19.502h37.5a8.333 8.333 0 0 1 8.333 8.333v66.667c0 1.15-.933 2.083-2.083 2.083H41.666v-68.75Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M87.5 21.585H50a6.25 6.25 0 0 0-6.25 6.25v66.667h50V27.835a6.25 6.25 0 0 0-6.25-6.25ZM50 19.502a8.333 8.333 0 0 0-8.334 8.333v68.75H93.75c1.15 0 2.083-.932 2.083-2.083V27.835a8.333 8.333 0 0 0-8.333-8.333H50Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-primary"" d="M4.167 46.585a8.333 8.333 0 0 1 8.333-8.333h39.583a8.333 8.333 0 0 1 8.334 8.333v47.917c0 1.15-.933 2.083-2.084 2.083H6.25a2.083 2.083 0 0 1-2.083-2.083V46.585Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M52.083 40.335H12.5a6.25 6.25 0 0 0-6.25 6.25v47.917h52.083V46.585a6.25 6.25 0 0 0-6.25-6.25ZM12.5 38.252a8.333 8.333 0 0 0-8.334 8.333v47.917c0 1.15.933 2.083 2.084 2.083h52.083c1.15 0 2.084-.932 2.084-2.083V46.585a8.333 8.333 0 0 0-8.334-8.333H12.5Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-tertiary" d="M21.875 84.085a8.333 8.333 0 0 1 8.333-8.333h4.167a8.333 8.333 0 0 1 8.333 8.333v12.5H21.875v-12.5Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M34.375 77.835h-4.167a6.25 6.25 0 0 0-6.25 6.25v10.417h16.667V84.085a6.25 6.25 0 0 0-6.25-6.25Zm-4.167-2.083a8.333 8.333 0 0 0-8.333 8.333v12.5h20.833v-12.5a8.333 8.333 0 0 0-8.333-8.333h-4.167Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M23.959 85.127a8.333 8.333 0 0 0-8.334-8.333h-1.041c-.576 0-1.042.466-1.042 1.042v18.75h10.417V85.127Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M15.625 94.502V78.877a6.25 6.25 0 0 1 6.25 6.25v9.375h-6.25Zm0-17.708a8.333 8.333 0 0 1 8.334 8.333v11.459H13.542v-18.75c0-.576.466-1.042 1.042-1.042h1.041Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M40.625 85.127a8.333 8.333 0 0 1 8.333-8.333H50c.575 0 1.042.466 1.042 1.042v18.75H40.625V85.127Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M48.958 94.502V78.877a6.25 6.25 0 0 0-6.25 6.25v9.375h6.25Zm0-17.708a8.333 8.333 0 0 0-8.333 8.333v11.459h10.417v-18.75c0-.576-.467-1.042-1.042-1.042h-1.042Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M13.541 48.669c0-.576.467-1.042 1.042-1.042h8.333c.576 0 1.042.466 1.042 1.042v8.333c0 .575-.466 1.042-1.041 1.042h-8.334a1.042 1.042 0 0 1-1.042-1.042v-8.333Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M15.625 49.71v6.25h6.25v-6.25h-6.25Zm-1.042-2.083c-.575 0-1.042.466-1.042 1.042v8.333c0 .575.467 1.042 1.042 1.042h8.333c.576 0 1.042-.467 1.042-1.042v-8.333c0-.576-.466-1.042-1.041-1.042h-8.334Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M13.541 62.21c0-.575.467-1.041 1.042-1.041h8.333c.576 0 1.042.466 1.042 1.042v8.333c0 .575-.466 1.042-1.041 1.042h-8.334a1.042 1.042 0 0 1-1.042-1.042V62.21Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M15.625 63.252v6.25h6.25v-6.25h-6.25Zm-1.042-2.083c-.575 0-1.042.466-1.042 1.042v8.333c0 .575.467 1.042 1.042 1.042h8.333c.576 0 1.042-.467 1.042-1.042V62.21c0-.576-.466-1.042-1.041-1.042h-8.334Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M27.084 48.669c0-.576.466-1.042 1.041-1.042h8.334c.575 0 1.041.466 1.041 1.042v8.333c0 .575-.466 1.042-1.041 1.042h-8.334a1.042 1.042 0 0 1-1.041-1.042v-8.333Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M29.167 49.71v6.25h6.25v-6.25h-6.25Zm-1.042-2.083c-.575 0-1.041.466-1.041 1.042v8.333c0 .575.466 1.042 1.041 1.042h8.334c.575 0 1.041-.467 1.041-1.042v-8.333c0-.576-.466-1.042-1.041-1.042h-8.334Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M27.084 62.21c0-.575.466-1.041 1.041-1.041h8.334c.575 0 1.041.466 1.041 1.042v8.333c0 .575-.466 1.042-1.041 1.042h-8.334a1.042 1.042 0 0 1-1.041-1.042V62.21Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M29.167 63.252v6.25h6.25v-6.25h-6.25Zm-1.042-2.083c-.575 0-1.041.466-1.041 1.042v8.333c0 .575.466 1.042 1.041 1.042h8.334c.575 0 1.041-.467 1.041-1.042V62.21c0-.576-.466-1.042-1.041-1.042h-8.334Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M40.625 48.669c0-.576.466-1.042 1.042-1.042H50c.575 0 1.042.466 1.042 1.042v8.333c0 .575-.467 1.042-1.042 1.042h-8.333a1.042 1.042 0 0 1-1.042-1.042v-8.333Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M42.708 49.71v6.25h6.25v-6.25h-6.25Zm-1.041-2.083c-.576 0-1.042.466-1.042 1.042v8.333c0 .575.466 1.042 1.042 1.042H50c.575 0 1.042-.467 1.042-1.042v-8.333c0-.576-.467-1.042-1.042-1.042h-8.333ZM48.959 28.877c0-.576.466-1.042 1.041-1.042h6.25a1.042 1.042 0 1 1 0 2.083H50a1.042 1.042 0 0 1-1.041-1.041Zm11.458-1.042a1.042 1.042 0 1 0 0 2.083h6.25a1.042 1.042 0 0 0 0-2.083h-6.25Zm9.375 1.042c0-.576.466-1.042 1.041-1.042h6.25a1.042 1.042 0 1 1 0 2.083h-6.25a1.042 1.042 0 0 1-1.041-1.041Zm10.416 0c0-.576.467-1.042 1.042-1.042h6.25a1.042 1.042 0 1 1 0 2.083h-6.25a1.042 1.042 0 0 1-1.041-1.041Zm0 6.25c0-.576.467-1.042 1.042-1.042h6.25a1.042 1.042 0 1 1 0 2.083h-6.25a1.042 1.042 0 0 1-1.041-1.041Zm1.042 5.208a1.042 1.042 0 1 0 0 2.083h6.25a1.042 1.042 0 0 0 0-2.083h-6.25Zm-1.041 7.292c0-.576.466-1.042 1.041-1.042h6.25a1.042 1.042 0 1 1 0 2.083h-6.25a1.042 1.042 0 0 1-1.041-1.041Zm1.041 5.208a1.042 1.042 0 1 0 0 2.083h6.25a1.042 1.042 0 0 0 0-2.083h-6.25Zm-10.416-18.75a1.042 1.042 0 1 0 0 2.083h6.25a1.042 1.042 0 0 0 0-2.083h-6.25Zm-1.042 7.292c0-.576.466-1.042 1.041-1.042h6.25a1.042 1.042 0 1 1 0 2.083h-6.25a1.042 1.042 0 0 1-1.041-1.041Zm1.041 5.208a1.042 1.042 0 1 0 0 2.083h6.25a1.042 1.042 0 0 0 0-2.083h-6.25Zm-1.041 7.292c0-.576.466-1.042 1.041-1.042h6.25a1.042 1.042 0 1 1 0 2.083h-6.25a1.042 1.042 0 0 1-1.041-1.041Zm-9.375-19.792a1.042 1.042 0 1 0 0 2.083h6.25a1.042 1.042 0 0 0 0-2.083h-6.25Zm-11.459 1.042c0-.576.467-1.042 1.042-1.042h6.25a1.042 1.042 0 1 1 0 2.083H50a1.042 1.042 0 0 1-1.041-1.041Zm11.459 5.208a1.042 1.042 0 1 0 0 2.083h6.25a1.042 1.042 0 0 0 0-2.083h-6.25Zm-1.042 7.292c0-.576.467-1.042 1.042-1.042h6.25a1.042 1.042 0 1 1 0 2.083h-6.25a1.042 1.042 0 0 1-1.042-1.041Zm1.042 5.208a1.042 1.042 0 1 0 0 2.083h6.25a1.042 1.042 0 0 0 0-2.083h-6.25Z" clip-rule="evenodd"/>
|
||||
<path class="tw-fill-illustration-bg-tertiary" d="M40.625 62.21c0-.575.466-1.041 1.042-1.041H50c.575 0 1.042.466 1.042 1.042v8.333c0 .575-.467 1.042-1.042 1.042h-8.333a1.042 1.042 0 0 1-1.042-1.042V62.21Z"/>
|
||||
<path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M42.708 63.252v6.25h6.25v-6.25h-6.25Zm-1.041-2.083c-.576 0-1.042.466-1.042 1.042v8.333c0 .575.466 1.042 1.042 1.042H50c.575 0 1.042-.467 1.042-1.042V62.21c0-.576-.467-1.042-1.042-1.042h-8.333Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
`;
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from "./account-warning.icon";
|
||||
export * from "./active-send.icon";
|
||||
export { default as AdminConsoleLogo } from "./admin-console";
|
||||
export * from "./background-left-illustration";
|
||||
@@ -6,6 +7,7 @@ export * from "./bitwarden-icon";
|
||||
export * from "./bitwarden-logo.icon";
|
||||
export * from "./browser-extension";
|
||||
export { default as BusinessUnitPortalLogo } from "./business-unit-portal";
|
||||
export * from "./business-welcome.icon";
|
||||
export * from "./carousel-icon";
|
||||
export * from "./credit-card.icon";
|
||||
export * from "./deactivated-org";
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
import { svgIcon } from "../icon-service";
|
||||
|
||||
/**
|
||||
* Shield logo with extra space in the viewbox.
|
||||
*/
|
||||
const AnonLayoutBitwardenShield = svgIcon`
|
||||
<svg viewBox="10 15 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||
<path class="tw-fill-marketing-logo" d="M82.2944 69.1899V37.2898H60V93.9624C63.948 91.869 67.4812 89.5927 70.5998 87.1338C78.3962 81.0196 82.2944 75.0383 82.2944 69.1899ZM91.8491 30.9097V69.1899C91.8491 72.0477 91.2934 74.8805 90.182 77.6883C89.0706 80.4962 87.6938 82.9884 86.0516 85.1649C84.4094 87.3415 82.452 89.4598 80.1794 91.5201C77.9068 93.5803 75.8084 95.2916 73.8842 96.654C71.96 98.0164 69.9528 99.304 67.8627 100.517C65.7726 101.73 64.288 102.552 63.4088 102.984C62.5297 103.416 61.8247 103.748 61.2939 103.981C60.8958 104.18 60.4645 104.28 60 104.28C59.5355 104.28 59.1042 104.18 58.7061 103.981C58.1753 103.748 57.4703 103.416 56.5911 102.984C55.712 102.552 54.2273 101.73 52.1372 100.517C50.0471 99.304 48.04 98.0164 46.1158 96.654C44.1916 95.2916 42.0932 93.5803 39.8206 91.5201C37.548 89.4598 35.5906 87.3415 33.9484 85.1649C32.3062 82.9884 30.9294 80.4962 29.818 77.6883C28.7066 74.8805 28.1509 72.0477 28.1509 69.1899V30.9097C28.1509 30.0458 28.4661 29.2981 29.0964 28.6668C29.7267 28.0354 30.4732 27.7197 31.3358 27.7197H88.6642C89.5268 27.7197 90.2732 28.0354 90.9036 28.6668C91.5339 29.2981 91.8491 30.0458 91.8491 30.9097Z" />
|
||||
</svg>
|
||||
`;
|
||||
|
||||
const BitwardenShield = svgIcon`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 32" fill="none">
|
||||
<g clip-path="url(#bitwarden-shield-clip)">
|
||||
@@ -22,4 +13,4 @@ const BitwardenShield = svgIcon`
|
||||
</svg>
|
||||
`;
|
||||
|
||||
export { AnonLayoutBitwardenShield, BitwardenShield };
|
||||
export { BitwardenShield };
|
||||
|
||||
@@ -11,10 +11,10 @@ export abstract class AnonLayoutWrapperDataService {
|
||||
*
|
||||
* @param data - The data to set on the AnonLayoutWrapperComponent to feed into the AnonLayoutComponent.
|
||||
*/
|
||||
abstract setAnonLayoutWrapperData(data: AnonLayoutWrapperData): void;
|
||||
abstract setAnonLayoutWrapperData(data: Partial<AnonLayoutWrapperData>): void;
|
||||
|
||||
/**
|
||||
* Reactively gets the current AnonLayoutWrapperData.
|
||||
*/
|
||||
abstract anonLayoutWrapperData$(): Observable<AnonLayoutWrapperData>;
|
||||
abstract anonLayoutWrapperData$(): Observable<Partial<AnonLayoutWrapperData>>;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
[showReadonlyHostname]="showReadonlyHostname"
|
||||
[maxWidth]="maxWidth"
|
||||
[hideCardWrapper]="hideCardWrapper"
|
||||
[hideIcon]="hideIcon"
|
||||
[hideBackgroundIllustration]="hideBackgroundIllustration"
|
||||
>
|
||||
<router-outlet></router-outlet>
|
||||
|
||||
@@ -25,13 +25,9 @@ export interface AnonLayoutWrapperData {
|
||||
*/
|
||||
pageSubtitle?: string | Translation | null;
|
||||
/**
|
||||
* The optional icon to display on the page.
|
||||
* The icon to display on the page. Pass null to hide the icon.
|
||||
*/
|
||||
pageIcon?: Icon | null;
|
||||
/**
|
||||
* Hides the default Bitwarden shield icon.
|
||||
*/
|
||||
hideIcon?: boolean;
|
||||
pageIcon: Icon | null;
|
||||
/**
|
||||
* Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
|
||||
*/
|
||||
@@ -59,11 +55,10 @@ export class AnonLayoutWrapperComponent implements OnInit {
|
||||
|
||||
protected pageTitle?: string | null;
|
||||
protected pageSubtitle?: string | null;
|
||||
protected pageIcon?: Icon | null;
|
||||
protected pageIcon: Icon | null = null;
|
||||
protected showReadonlyHostname?: boolean | null;
|
||||
protected maxWidth?: AnonLayoutMaxWidth | null;
|
||||
protected hideCardWrapper?: boolean | null;
|
||||
protected hideIcon?: boolean | null;
|
||||
protected hideBackgroundIllustration?: boolean | null;
|
||||
|
||||
constructor(
|
||||
@@ -115,10 +110,6 @@ export class AnonLayoutWrapperComponent implements OnInit {
|
||||
this.pageIcon = firstChildRouteData["pageIcon"];
|
||||
}
|
||||
|
||||
if (firstChildRouteData["hideIcon"] !== undefined) {
|
||||
this.hideIcon = firstChildRouteData["hideIcon"];
|
||||
}
|
||||
|
||||
this.showReadonlyHostname = Boolean(firstChildRouteData["showReadonlyHostname"]);
|
||||
this.maxWidth = firstChildRouteData["maxWidth"];
|
||||
this.hideCardWrapper = Boolean(firstChildRouteData["hideCardWrapper"]);
|
||||
@@ -129,12 +120,12 @@ export class AnonLayoutWrapperComponent implements OnInit {
|
||||
this.anonLayoutWrapperDataService
|
||||
.anonLayoutWrapperData$()
|
||||
.pipe(takeUntilDestroyed(this.destroyRef))
|
||||
.subscribe((data: AnonLayoutWrapperData) => {
|
||||
.subscribe((data: Partial<AnonLayoutWrapperData>) => {
|
||||
this.setAnonLayoutWrapperData(data);
|
||||
});
|
||||
}
|
||||
|
||||
private setAnonLayoutWrapperData(data: AnonLayoutWrapperData) {
|
||||
private setAnonLayoutWrapperData(data: Partial<AnonLayoutWrapperData>) {
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
@@ -166,11 +157,6 @@ export class AnonLayoutWrapperComponent implements OnInit {
|
||||
if (data.hideBackgroundIllustration !== undefined) {
|
||||
this.hideBackgroundIllustration = data.hideBackgroundIllustration;
|
||||
}
|
||||
|
||||
if (data.hideIcon !== undefined) {
|
||||
this.hideIcon = data.hideIcon;
|
||||
}
|
||||
|
||||
if (data.maxWidth !== undefined) {
|
||||
this.maxWidth = data.maxWidth;
|
||||
}
|
||||
@@ -197,7 +183,6 @@ export class AnonLayoutWrapperComponent implements OnInit {
|
||||
this.showReadonlyHostname = null;
|
||||
this.maxWidth = null;
|
||||
this.hideCardWrapper = null;
|
||||
this.hideIcon = null;
|
||||
this.hideBackgroundIllustration = null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -147,7 +147,9 @@ export const DefaultContentExample: Story = {
|
||||
children: [
|
||||
{
|
||||
path: "default-example",
|
||||
data: {},
|
||||
data: {
|
||||
pageIcon: LockIcon,
|
||||
} satisfies AnonLayoutWrapperData,
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
|
||||
@@ -14,13 +14,15 @@
|
||||
</a>
|
||||
|
||||
<div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
|
||||
@let iconInput = icon();
|
||||
|
||||
<!-- In some scenarios this icon's size is not limited by container width correctly -->
|
||||
<!-- Targeting the SVG here to try and ensure it never grows too large in even the media queries are not working as expected -->
|
||||
<div
|
||||
*ngIf="!hideIcon()"
|
||||
*ngIf="iconInput !== null"
|
||||
class="tw-size-20 sm:tw-size-24 [&_svg]:tw-w-full [&_svg]:tw-max-w-24 tw-mx-auto tw-content-center"
|
||||
>
|
||||
<bit-icon [icon]="icon()"></bit-icon>
|
||||
<bit-icon [icon]="iconInput"></bit-icon>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="title()">
|
||||
|
||||
@@ -12,7 +12,6 @@ import { RouterModule } from "@angular/router";
|
||||
import { firstValueFrom } from "rxjs";
|
||||
|
||||
import {
|
||||
AnonLayoutBitwardenShield,
|
||||
BackgroundLeftIllustration,
|
||||
BackgroundRightIllustration,
|
||||
BitwardenLogo,
|
||||
@@ -45,11 +44,10 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
|
||||
|
||||
readonly title = input<string>();
|
||||
readonly subtitle = input<string>();
|
||||
readonly icon = model<Icon>();
|
||||
readonly icon = model.required<Icon | null>();
|
||||
readonly showReadonlyHostname = input<boolean>(false);
|
||||
readonly hideLogo = input<boolean>(false);
|
||||
readonly hideFooter = input<boolean>(false);
|
||||
readonly hideIcon = input<boolean>(false);
|
||||
readonly hideCardWrapper = input<boolean>(false);
|
||||
readonly hideBackgroundIllustration = input<boolean>(false);
|
||||
|
||||
@@ -99,11 +97,6 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
|
||||
this.maxWidth.set(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.set(AnonLayoutBitwardenShield);
|
||||
}
|
||||
}
|
||||
|
||||
async ngOnChanges(changes: SimpleChanges) {
|
||||
|
||||
@@ -62,12 +62,8 @@ export default {
|
||||
}),
|
||||
],
|
||||
render: (args) => {
|
||||
const { useDefaultIcon, icon, ...rest } = args;
|
||||
return {
|
||||
props: {
|
||||
...rest,
|
||||
icon: useDefaultIcon ? null : icon,
|
||||
},
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<auth-anon-layout
|
||||
[title]="title"
|
||||
@@ -76,7 +72,6 @@ export default {
|
||||
[showReadonlyHostname]="showReadonlyHostname"
|
||||
[maxWidth]="maxWidth"
|
||||
[hideCardWrapper]="hideCardWrapper"
|
||||
[hideIcon]="hideIcon"
|
||||
[hideLogo]="hideLogo"
|
||||
[hideFooter]="hideFooter"
|
||||
[hideBackgroundIllustration]="hideBackgroundIllustration"
|
||||
@@ -110,11 +105,6 @@ export default {
|
||||
subtitle: { control: "text" },
|
||||
|
||||
icon: { control: false, table: { disable: true } },
|
||||
useDefaultIcon: {
|
||||
control: false,
|
||||
table: { disable: true },
|
||||
description: "If true, passes null so component falls back to its built-in icon",
|
||||
},
|
||||
|
||||
showReadonlyHostname: { control: "boolean" },
|
||||
maxWidth: {
|
||||
@@ -123,7 +113,6 @@ export default {
|
||||
},
|
||||
|
||||
hideCardWrapper: { control: "boolean" },
|
||||
hideIcon: { control: "boolean" },
|
||||
hideLogo: { control: "boolean" },
|
||||
hideFooter: { control: "boolean" },
|
||||
hideBackgroundIllustration: { control: "boolean" },
|
||||
@@ -144,7 +133,6 @@ export default {
|
||||
showReadonlyHostname: false,
|
||||
maxWidth: "md",
|
||||
hideCardWrapper: false,
|
||||
hideIcon: false,
|
||||
hideLogo: false,
|
||||
hideFooter: false,
|
||||
hideBackgroundIllustration: false,
|
||||
@@ -208,12 +196,8 @@ export const NoWrapper: Story = {
|
||||
args: { hideCardWrapper: true },
|
||||
};
|
||||
|
||||
export const DefaultIcon: Story = {
|
||||
args: { useDefaultIcon: true },
|
||||
};
|
||||
|
||||
export const NoIcon: Story = {
|
||||
args: { hideIcon: true },
|
||||
args: { icon: null },
|
||||
};
|
||||
|
||||
export const NoLogo: Story = {
|
||||
@@ -238,7 +222,7 @@ export const MinimalState: Story = {
|
||||
subtitle: undefined,
|
||||
contentLength: "normal",
|
||||
hideCardWrapper: true,
|
||||
hideIcon: true,
|
||||
icon: null,
|
||||
hideLogo: true,
|
||||
hideFooter: true,
|
||||
hideBackgroundIllustration: true,
|
||||
|
||||
@@ -4,13 +4,13 @@ import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service
|
||||
import { AnonLayoutWrapperData } from "./anon-layout-wrapper.component";
|
||||
|
||||
export class DefaultAnonLayoutWrapperDataService implements AnonLayoutWrapperDataService {
|
||||
protected anonLayoutWrapperDataSubject = new Subject<AnonLayoutWrapperData>();
|
||||
protected anonLayoutWrapperDataSubject = new Subject<Partial<AnonLayoutWrapperData>>();
|
||||
|
||||
setAnonLayoutWrapperData(data: AnonLayoutWrapperData): void {
|
||||
setAnonLayoutWrapperData(data: Partial<AnonLayoutWrapperData>): void {
|
||||
this.anonLayoutWrapperDataSubject.next(data);
|
||||
}
|
||||
|
||||
anonLayoutWrapperData$(): Observable<AnonLayoutWrapperData> {
|
||||
anonLayoutWrapperData$(): Observable<Partial<AnonLayoutWrapperData>> {
|
||||
return this.anonLayoutWrapperDataSubject.asObservable();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user