bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 00:03:56 +00:00
Code Issues Releases Wiki Activity

[PM-17564] Prompt Browser Extension (#13349)

Browse Source 
* add browser extension prompt page with initial loading state

* add browser extension icon

* move browser extension prompt to state

* add installation link for error state

* automatically open extension when possible for browser-reprompt-page

* refactor browser tabs query into a standalone method

* add success message state for auto-opening browsers

* Refactor `VaultOnboardingMessages` to `VaultMessages` to be more generic

* add auto-open extension messages to `VaultMessages` enum

* add bitwarden icon

* Add manual error state for firefox users

* add extension prompt routing

* fix incorrect imports

* add mobile screen for browser prompt

* remove comment

* fix typo in code comment

* update key for `checkBwInstalled` method

* add check for safari before attempting to send a message

* break translation for manual opening into two parts
This commit is contained in:
Nick Krantz
2025-02-19 13:00:07 -06:00
committed by GitHub
parent 661ee03698
commit dae4f7b3cc
24 changed files with 869 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
libs/vault/src/icons/bitwarden-icon.ts Normal file
View File

@@ -0,0 +1,20 @@
import { svgIcon } from "@bitwarden/components";
export const BitwardenIcon = svgIcon`
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11934_25684)">
<path d="M17.3333 0H2.66667C1.19391 0 0 1.19391 0 2.66667V17.3333C0 18.8061 1.19391 20 2.66667 20H17.3333C18.8061 20 20 18.8061 20 17.3333V2.66667C20 1.19391 18.8061 0 17.3333 0Z" fill="#175DDC"/>
<mask id="mask0_11934_25684" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="3" width="14" height="14">
<path d="M17 3H3V17H17V3Z" fill="white"/>
</mask>
<g mask="url(#mask0_11934_25684)">
<path d="M15.6599 3.17501C15.607 3.11944 15.5435 3.07526 15.4731 3.04507C15.4027 3.01489 15.327 2.99958 15.2504 3.00001H4.75052C4.67396 2.99958 4.59784 3.01489 4.5274 3.04507C4.45696 3.07526 4.39352 3.11944 4.34102 3.17501C4.28546 3.22751 4.24127 3.29138 4.21109 3.36182C4.1809 3.43226 4.16559 3.50794 4.16602 3.58451V10.5844C4.16821 11.1173 4.27146 11.6449 4.47052 12.1393C4.65996 12.6271 4.91458 13.0874 5.22739 13.5069C5.54895 13.9274 5.90901 14.3163 6.30276 14.6698C6.66807 15.0049 7.05306 15.3186 7.4551 15.6086C7.8051 15.8571 8.1726 16.0925 8.5576 16.3148C8.9426 16.537 9.21431 16.6871 9.3731 16.7654C9.53322 16.8441 9.66272 16.9063 9.75897 16.9474C9.83422 16.9837 9.91694 17.0016 10.0005 16.9999C10.0827 17.0012 10.1641 16.982 10.2376 16.9448C10.3356 16.9019 10.4633 16.8415 10.6252 16.7628C10.7871 16.684 11.0627 16.5335 11.4407 16.3121C11.8187 16.0908 12.1906 15.8545 12.5432 15.606C12.9457 15.3155 13.3311 15.0023 13.6973 14.6671C14.0915 14.3141 14.4515 13.9247 14.7727 13.5043C15.085 13.0843 15.3397 12.6245 15.5295 12.1367C15.729 11.6423 15.8323 11.1147 15.834 10.5818V3.58188C15.8345 3.50576 15.8192 3.43051 15.789 3.36051C15.7588 3.29051 15.715 3.22751 15.6599 3.17501ZM14.3063 10.6483C14.3063 13.1858 10.0005 15.3654 10.0005 15.3654V4.49975H14.3063V10.6483Z" fill="white"/>
</g>
</g>
<defs>
<clipPath id="clip0_11934_25684">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
`;

17
libs/vault/src/icons/browser-extension.ts Normal file
View File

@@ -0,0 +1,17 @@
import { svgIcon } from "@bitwarden/components";
export const BrowserExtensionIcon = svgIcon`
<svg width="115" height="114" viewBox="0 0 115 114" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="tw-stroke-art-primary" width="107.16" height="70.68" rx="10" transform="matrix(-1 0 0 1 111.08 21.66)" stroke-width="4"/>
<rect class="tw-stroke-art-accent" x="77.88" y="36.91" width="24.79" height="33.34" rx="5" stroke-width="2"/>
<rect class="tw-fill-art-primary" x="97.97" y="25.65" width="5.7" height="5.7" rx="2" />
<path class="tw-fill-art-accent" d="M96.9272 52.2068L96.9822 50.6928L95.7022 51.5048L95.3718 50.9267L96.7207 50.2248L95.3718 49.5228L95.7022 48.9447L96.9822 49.7568L96.9272 48.2427H97.5879L97.5328 49.7568L98.8129 48.9447L99.1432 49.5228L97.7943 50.2248L99.1432 50.9267L98.8129 51.5048L97.5328 50.6928L97.5879 52.2068H96.9272Z" />
<path class="tw-fill-art-accent" d="M92.0822 52.2068L92.1373 50.6928L90.8572 51.5048L90.5269 50.9267L91.8757 50.2248L90.5269 49.5228L90.8572 48.9447L92.1373 49.7568L92.0822 48.2427H92.7429L92.6878 49.7568L93.9679 48.9447L94.2982 49.5228L92.9494 50.2248L94.2982 50.9267L93.9679 51.5048L92.6878 50.6928L92.7429 52.2068H92.0822Z" />
<path class="tw-fill-art-accent" d="M87.2371 52.2068L87.2922 50.6928L86.0121 51.5048L85.6818 50.9267L87.0307 50.2248L85.6818 49.5228L86.0121 48.9447L87.2922 49.7568L87.2371 48.2427H87.8978L87.8427 49.7568L89.1228 48.9447L89.4532 49.5228L88.1043 50.2248L89.4532 50.9267L89.1228 51.5048L87.8427 50.6928L87.8978 52.2068H87.2371Z" />
<path class="tw-fill-art-accent" d="M82.3921 52.2068L82.4472 50.6928L81.1671 51.5048L80.8368 50.9267L82.1857 50.2248L80.8368 49.5228L81.1671 48.9447L82.4472 49.7568L82.3921 48.2427H83.0528L82.9978 49.7568L84.2778 48.9447L84.6082 49.5228L83.2593 50.2248L84.6082 50.9267L84.2778 51.5048L82.9978 50.6928L83.0528 52.2068H82.3921Z" />
<path class="tw-stroke-art-primary" d="M25.58 29.07V28.5" stroke-width="4" stroke-linecap="round"/>
<path class="tw-stroke-art-primary" d="M18.74 29.07V28.5" stroke-width="4" stroke-linecap="round"/>
<path class="tw-stroke-art-primary" d="M11.9 29.07V28.5" stroke-width="4" stroke-linecap="round"/>
<path class="tw-stroke-art-primary" d="M110.51 33.6054H4.49" stroke-width="2"/>
</svg>
`;

2
libs/vault/src/icons/index.ts
View File

@@ -4,3 +4,5 @@ export * from "./vault";
export * from "./empty-trash";
export * from "./exclamation-triangle";
export * from "./user-lock";
export * from "./browser-extension";
export * from "./bitwarden-icon";