zitadel/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html

<app-card title="{{'USER.MFA.TITLE' | translate}}" description="{{'USER.MFA.DESCRIPTION' | translate}}">
    <div class="col">
        <div class="row" *ngFor="let mfa of mfaSubject | async">
            <span>{{'USER.MFA.TYPE.'+ mfa.type | translate}}</span>
            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}" *ngIf="mfa.state === MFAState.MFASTATE_READY"
                class="verified las la-check-circle"></i>
            <i matTooltip="{{'USER.MFA.STATE.'+ mfa.state | translate}}"
                *ngIf="mfa.state === MFAState.MFASTATE_NOT_READY || mfa.state === MFAState.MFASTATE_REMOVED"
                class="primary las la-ban"></i>
            <button mat-icon-button (click)="deleteMFA(mfa.type)" color="warn"
                matTooltip="{{'ACTIONS.DELETE' | translate}}">
                <i class="las la-trash"></i>
            </button>
        </div>
        <p class="row" *ngIf="error">{{error}}</p>
    </div>
    <div class="add-row">
        <button (click)="addOTP()" mat-stroked-button color="primary" matTooltip="{{'ACTIONS.NEW' | translate}}">
            <mat-icon svgIcon="mdi_radar"></mat-icon>{{'USER.MFA.OTP' | translate}}
        </button>
    </div>
    <div class="table-wrapper">
        <div class="spinner-container" *ngIf="loading$ | async">
            <mat-spinner diameter="50"></mat-spinner>
        </div>
    </div>
</app-card>