1
0
mirror of https://github.com/bitwarden/browser synced 2026-02-09 05:00:10 +00:00
Files
browser/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
2026-01-05 15:18:56 -08:00

76 lines
2.4 KiB
HTML

<i
*ngIf="state === SetupExtensionState.Loading"
class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
aria-hidden="true"
[appA11yTitle]="'loading' | i18n"
></i>
<section *ngIf="state === SetupExtensionState.NeedsExtension" class="tw-text-center tw-mt-4">
<h1 class="tw-text-xl tw-font-medium tw-text-main sm:tw-text-2xl">
{{ "setupExtensionPageTitle" | i18n }}
</h1>
<h2 class="tw-text-sm tw-text-main tw-mb-6 tw-font-normal sm:tw-text-base">
{{ "setupExtensionPageDescription" | i18n }}
</h2>
<vault-add-extension-videos></vault-add-extension-videos>
<div class="tw-flex tw-flex-col tw-gap-4 tw-items-center">
<a
bitButton
buttonType="primary"
[href]="webStoreUrl"
target="_blank"
rel="noopener noreferrer"
>
{{ "getTheExtension" | i18n }}
</a>
<button type="button" bitLink (click)="addItLater()">
{{ "addItLater" | i18n }}
</button>
</div>
</section>
<section *ngIf="showSuccessUI" class="tw-flex tw-flex-col tw-items-center">
<div class="tw-size-[90px]">
<bit-icon [icon]="PartyIcon"></bit-icon>
</div>
<h1 bitTypography="h2" class="tw-mb-6 tw-mt-4 tw-text-center">
{{
(state === SetupExtensionState.Success
? "bitwardenExtensionInstalled"
: "bitwardenExtensionIsInstalled"
) | i18n
}}
</h1>
<div
class="tw-flex tw-flex-col tw-rounded-2xl tw-bg-background tw-border tw-border-solid tw-border-secondary-300 tw-p-8 tw-max-w-md md:tw-w-[28rem] tw-text-center"
>
<p>
{{ "openExtensionToAutofill" | i18n }}
</p>
<button type="button" bitButton buttonType="primary" class="tw-mb-2" (click)="openExtension()">
{{ "openBitwardenExtension" | i18n }}
</button>
<a bitButton buttonType="secondary" routerLink="/vault">
{{ "skipToWebApp" | i18n }}
</a>
<div
*ngIf="state === SetupExtensionState.ManualOpen"
aria-live="polite"
class="tw-text-center tw-mt-4"
>
<vault-manually-open-extension></vault-manually-open-extension>
</div>
</div>
<p class="tw-mt-4 tw-max-w-96 tw-text-center">
{{ "gettingStartedWithBitwardenPart1" | i18n }}
<a target="_blank" bitLink href="https://bitwarden.com/help/learning-center/">
{{ "gettingStartedWithBitwardenPart2" | i18n }}
</a>
{{ "and" | i18n }}
<a target="_blank" bitLink href="https://bitwarden.com/help">
{{ "gettingStartedWithBitwardenPart3" | i18n }}
</a>
</p>
</section>