1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 09:43:23 +00:00
Files
browser/libs/tools/generator/components/src/username-generator.component.html
Oscar Hinton 267e488390 [BEEEP] [PM-28239] Migrate generators to standalone (#17386)
* Migrate generators to use standalone and control flow

* Resolve feedback

* Add variable for account

* Fix generators
2025-12-11 12:04:15 +01:00

83 lines
2.8 KiB
HTML

<bit-card class="tw-flex tw-justify-between tw-mb-4">
<div class="tw-grow tw-flex tw-items-center">
<bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
</div>
<div class="tw-flex tw-items-center tw-space-x-1">
<button
type="button"
bitIconButton="bwi-generate"
buttonType="main"
(click)="generate(USER_REQUEST)"
[label]="credentialTypeGenerateLabel$ | async"
[disabled]="!(algorithm$ | async)"
>
{{ credentialTypeGenerateLabel$ | async }}
</button>
<button
type="button"
bitIconButton="bwi-clone"
buttonType="main"
showToast
[label]="credentialTypeCopyLabel$ | async"
[appCopyClick]="value$ | async"
[valueLabel]="credentialTypeLabel$ | async"
[disabled]="!(algorithm$ | async)"
>
{{ credentialTypeCopyLabel$ | async }}
</button>
</div>
</bit-card>
<bit-section [disableMargin]="disableMargin">
<bit-section-header>
<h2 bitTypography="h6">{{ "options" | i18n }}</h2>
</bit-section-header>
<div [ngClass]="{ 'tw-mb-4': !disableMargin }">
<bit-card>
<form [formGroup]="username" class="tw-container">
<bit-form-field>
<bit-label>{{ "type" | i18n }}</bit-label>
<bit-select
[items]="typeOptions$ | async"
formControlName="nav"
data-testid="username-type"
>
</bit-select>
@if (credentialTypeHint$ | async) {
<bit-hint>{{ credentialTypeHint$ | async }}</bit-hint>
}
</bit-form-field>
</form>
@if (showForwarder$ | async) {
<form [formGroup]="forwarder" class="tw-container">
<bit-form-field>
<bit-label>{{ "service" | i18n }}</bit-label>
<bit-select
[items]="forwarderOptions$ | async"
formControlName="nav"
data-testid="email-forwarding-service"
>
</bit-select>
</bit-form-field>
</form>
}
@let showAlgorithm = showAlgorithm$ | async;
@let account = account$ | async;
@if (showAlgorithm?.id === Algorithm.catchall) {
<tools-catchall-settings [account]="account" (onUpdated)="generate('catchall settings')" />
}
@if (forwarderId$ | async; as forwarderId) {
<tools-forwarder-settings [forwarder]="forwarderId" [account]="account" />
}
@if (showAlgorithm?.id === Algorithm.plusAddress) {
<tools-subaddress-settings
[account]="account"
(onUpdated)="generate('subaddress settings')"
/>
}
@if (showAlgorithm?.id === Algorithm.username) {
<tools-username-settings [account]="account" (onUpdated)="generate('username settings')" />
}
</bit-card>
</div>
</bit-section>