1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-25 12:15:18 +01:00
bitwarden-browser/libs/tools/generator/components/src/credential-generator.component.html
✨ Audrey ✨ dc1f014ad8
[PM-8282] credential generator (#11398)
* credential generator browser ui
* switch browser generate screen to extension refresh flag
* consolidate generator components into module
* add `@bitwarden/generator-components` readme
* normalize generator component rx subscriptions
2024-10-08 14:08:34 -04:00

78 lines
2.4 KiB
HTML

<!-- FIXME: root$ should be powered using a reactive form -->
<bit-toggle-group
fullWidth
class="tw-mb-4"
[selected]="(root$ | async).nav"
(selectedChange)="onRootChanged($event)"
attr.aria-label="{{ 'type' | i18n }}"
>
<bit-toggle *ngFor="let option of rootOptions$ | async" [value]="option.value">
{{ option.label }}
</bit-toggle>
</bit-toggle-group>
<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-space-x-1">
<button type="button" bitIconButton="bwi-generate" buttonType="main" (click)="generate$.next()">
{{ "generatePassword" | i18n }}
</button>
<button
type="button"
bitIconButton="bwi-clone"
buttonType="main"
showToast
[appCopyClick]="value$ | async"
>
{{ "copyPassword" | i18n }}
</button>
</div>
</bit-card>
<tools-password-settings
class="tw-mt-6"
*ngIf="(algorithm$ | async)?.id === 'password'"
[userId]="userId$ | async"
(onUpdated)="generate$.next()"
/>
<tools-passphrase-settings
class="tw-mt-6"
*ngIf="(algorithm$ | async)?.id === 'passphrase'"
[userId]="userId$ | async"
(onUpdated)="generate$.next()"
/>
<bit-section *ngIf="(category$ | async) !== 'password'">
<bit-section-header>
<h6 bitTypography="h6">{{ "options" | i18n }}</h6>
</bit-section-header>
<div class="tw-mb-4">
<bit-card>
<form class="box" [formGroup]="username" class="tw-container">
<bit-form-field>
<bit-label>{{ "type" | i18n }}</bit-label>
<bit-select [items]="usernameOptions$ | async" formControlName="nav"> </bit-select>
<bit-hint *ngIf="!!(credentialTypeHint$ | async)">{{
credentialTypeHint$ | async
}}</bit-hint>
</bit-form-field>
</form>
<tools-catchall-settings
*ngIf="(algorithm$ | async)?.id === 'catchall'"
[userId]="userId$ | async"
(onUpdated)="generate$.next()"
/>
<tools-subaddress-settings
*ngIf="(algorithm$ | async)?.id === 'subaddress'"
[userId]="userId$ | async"
(onUpdated)="generate$.next()"
/>
<tools-username-settings
*ngIf="(algorithm$ | async)?.id === 'username'"
[userId]="userId$ | async"
(onUpdated)="generate$.next()"
/>
</bit-card>
</div>
</bit-section>