bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-03 17:13:47 +00:00
Code Issues Releases Wiki Activity

PM 2048 Update Two Factor Options dialog (#8565)

Browse Source 
* PM-2048 Migrate Two factor options component

* PM-2048 Update Two Factor Options Dialog

* PM-2048 Fixed lint issue
This commit is contained in:
KiruthigaManivannan
2024-05-24 19:51:27 +05:30
committed by GitHub
parent 15ba7040e5
commit 51af102f7c
4 changed files with 83 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
apps/web/src/app/auth/two-factor-options.component.html
View File

@@ -1,68 +1,45 @@
<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="twoStepOptionsTitle">{{ "twoStepOptions" | i18n }}</h1>
<button
type="button"
class="close"
data-dismiss="modal"
appA11yTitle="{{ 'close' | i18n }}"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="list-group list-group-flush-2fa">
<div *ngFor="let p of providers" class="list-group-item list-group-item-action">
<div class="two-factor-content">
<div class="logo-col">
<img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'" />
</div>
<div class="text-col">
<h3>{{ p.name }}</h3>
{{ p.description }}
</div>
<div class="btn-col">
<button
[attr.aria-describedby]="p.name"
type="button"
class="btn btn-outline-secondary btn-sm"
(click)="choose(p)"
>
{{ "select" | i18n }}
</button>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action" (click)="recover()">
<div class="two-factor-content">
<div class="logo-col">
<img class="recovery-code-img" alt="rc logo" />
</div>
<div class="text-col">
<h3>{{ "recoveryCodeTitle" | i18n }}</h3>
{{ "recoveryCodeDesc" | i18n }}
</div>
<div class="btn-col">
<button
[attr.aria-describedby]="'recoveryCodeTitle' | i18n"
type="button"
class="btn btn-outline-secondary btn-sm"
(click)="recover()"
>
{{ "select" | i18n }}
</button>
</div>
</div>
</div>
<bit-dialog dialogSize="large">
<span bitDialogTitle>
{{ "twoStepOptions" | i18n }}
</span>
<ng-container bitDialogContent>
<div *ngFor="let p of providers" class="tw-m-2">
<div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
<div class="tw-flex tw-items-center tw-justify-center tw-min-w-[100px]">
<img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'" />
</div>
<div class="tw-flex-1">
<h3 bitTypography="h3">{{ p.name }}</h3>
<p bitTypography="body1">{{ p.description }}</p>
</div>
<div class="tw-min-w-20">
<button bitButton type="button" buttonType="secondary" (click)="choose(p)">
{{ "select" | i18n }}
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
{{ "close" | i18n }}
</button>
<hr />
</div>
<div class="tw-m-2" (click)="recover()">
<div class="tw-flex tw-items-center tw-justify-center tw-gap-4">
<div class="tw-flex tw-items-center tw-justify-center tw-min-w-[100px]">
<img class="recovery-code-img" alt="rc logo" />
</div>
<div class="tw-flex-1">
<h3 bitTypography="h3">{{ "recoveryCodeTitle" | i18n }}</h3>
<p bitTypography="body1">{{ "recoveryCodeDesc" | i18n }}</p>
</div>
<div class="tw-min-w-20">
<button bitButton type="button" buttonType="secondary" (click)="recover()">
{{ "select" | i18n }}
</button>
</div>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container bitDialogFooter>
<button bitButton type="button" buttonType="secondary" bitDialogClose>
{{ "close" | i18n }}
</button>
</ng-container>
</bit-dialog>