mirror of
https://github.com/bitwarden/browser
synced 2026-02-28 10:33:31 +00:00
56a1229803
* [PM-4016] feat: use dialog `loading` attribute
* [PM-4016] chore: move constant to service
* [PM-4016] chore: simplify paddings
* [PM-4016] chore: rename to `AuthSettingsModule`
* [PM-4016] fix: move request creation to service
* [PM-4016] feat: simplify module structure
Remove core.module and use `@Injectable({ providedIn: "root" })` instead.
71 lines
3.1 KiB
HTML
71 lines
3.1 KiB
HTML
<form [formGroup]="formGroup" [bitSubmit]="submit">
|
|
<bit-dialog dialogSize="large" [loading]="loading$ | async">
|
|
<span bitDialogTitle
|
|
>{{ "loginWithPasskey" | i18n }}
|
|
<span class="tw-text-sm tw-normal-case tw-text-muted">{{ "newPasskey" | i18n }}</span>
|
|
</span>
|
|
<ng-container bitDialogContent>
|
|
<ng-container *ngIf="currentStep === 'userVerification'">
|
|
<p bitTypography="body1">
|
|
{{ "passkeyEnterMasterPassword" | i18n }}
|
|
</p>
|
|
<bit-form-field disableMargin formGroupName="userVerification">
|
|
<bit-label>{{ "masterPassword" | i18n }}</bit-label>
|
|
<input type="password" bitInput formControlName="masterPassword" appAutofocus />
|
|
<button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
|
|
<bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
|
|
</bit-form-field>
|
|
</ng-container>
|
|
|
|
<div *ngIf="currentStep === 'credentialCreation'" class="tw-flex tw-flex-col tw-items-center">
|
|
<bit-icon [icon]="Icons.CreatePasskeyIcon" class="tw-mb-6"></bit-icon>
|
|
<h3 bitTypography="h3">{{ "creatingPasskeyLoading" | i18n }}</h3>
|
|
<p bitTypography="body1">{{ "creatingPasskeyLoadingInfo" | i18n }}</p>
|
|
</div>
|
|
|
|
<div
|
|
*ngIf="currentStep === 'credentialCreationFailed'"
|
|
class="tw-flex tw-flex-col tw-items-center"
|
|
>
|
|
<bit-icon [icon]="Icons.CreatePasskeyFailedIcon" class="tw-mb-6"></bit-icon>
|
|
<h3 bitTypography="h3">{{ "errorCreatingPasskey" | i18n }}</h3>
|
|
<p bitTypography="body1">{{ "errorCreatingPasskeyInfo" | i18n }}</p>
|
|
</div>
|
|
|
|
<div *ngIf="currentStep === 'credentialNaming'">
|
|
<h3 bitTypography="h3">{{ "passkeySuccessfullyCreated" | i18n }}</h3>
|
|
<p bitTypography="body1">
|
|
{{ "customPasskeyNameInfo" | i18n }}
|
|
</p>
|
|
<bit-form-field disableMargin formGroupName="credentialNaming">
|
|
<bit-label>{{ "customName" | i18n }}</bit-label>
|
|
<input type="text" bitInput formControlName="name" appAutofocus />
|
|
<bit-hint>{{
|
|
"charactersCurrentAndMaximum"
|
|
| i18n : formGroup.value.credentialNaming.name.length : NameMaxCharacters
|
|
}}</bit-hint>
|
|
</bit-form-field>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container bitDialogFooter>
|
|
<button type="submit" bitButton bitFormButton buttonType="primary">
|
|
<ng-container *ngIf="currentStep === 'userVerification'">
|
|
{{ "continue" | i18n }}
|
|
</ng-container>
|
|
<ng-container *ngIf="currentStep === 'credentialCreation'">
|
|
{{ "continue" | i18n }}
|
|
</ng-container>
|
|
<ng-container *ngIf="currentStep === 'credentialCreationFailed'">
|
|
{{ "tryAgain" | i18n }}
|
|
</ng-container>
|
|
<ng-container *ngIf="currentStep === 'credentialNaming'">
|
|
{{ ((hasPasskeys$ | async) ? "save" : "enable") | i18n }}
|
|
</ng-container>
|
|
</button>
|
|
<button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
|
|
{{ "cancel" | i18n }}
|
|
</button>
|
|
</ng-container>
|
|
</bit-dialog>
|
|
</form>
|