zitadel/console/src/app/pages/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>
            <span>{{'USER.MFA.STATE.'+ mfa.state | translate}}</span>
            <button mat-icon-button (click)="deleteMFA(mfa.type)" matTooltip="{{'ACTIONS.DELETE' | translate}}">
                <mat-icon>delete_outline</mat-icon>
            </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>