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}}">
    <app-refresh-table [loading]="loading$ | async" (refreshed)="getMFAs()" [dataSize]="dataSource?.data?.length">
        <table class="table" mat-table [dataSource]="dataSource">
            <ng-container matColumnDef="type">
                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLETYPE' | translate }} </th>
                <td mat-cell *matCellDef="let mfa"> {{'USER.MFA.TYPE.'+ mfa.type | translate}} </td>
            </ng-container>

            <ng-container matColumnDef="attr">
                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.ATTRIBUTE' | translate }} </th>
                <td mat-cell *matCellDef="let mfa"><span *ngIf="mfa?.attribute" class="centered">
                        {{ mfa?.attribute }}
                    </span>
                </td>
            </ng-container>

            <ng-container matColumnDef="state">
                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLESTATE' | translate }} </th>
                <td mat-cell *matCellDef="let mfa"><span class="centered">
                        {{'USER.MFA.STATE.'+ mfa.state | translate}}
                        <i matTooltip="verified" *ngIf="mfa.state === MFAState.MFASTATE_READY"
                            class="verified las la-check-circle"></i>
                    </span>
                </td>
            </ng-container>

            <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MFA.TABLEACTIONS' | translate }} </th>
                <td mat-cell *matCellDef="let mfa">
                    <button matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn" mat-icon-button
                        (click)="deleteMFA(mfa.type, mfa.id)">
                        <i class="las la-trash"></i>
                    </button>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
    </app-refresh-table>
    <div class="add-row">
        <button class="button" *ngIf="otpAvailable" (click)="addOTP()" mat-stroked-button color="primary"
            matTooltip="{{'ACTIONS.NEW' | translate}}">
            <mat-icon class="icon" svgIcon="mdi_radar"></mat-icon>{{'USER.MFA.OTP' | translate}}
        </button>
        <button class="button" (click)="addU2F()" mat-stroked-button color="primary"
            matTooltip="{{'ACTIONS.NEW' | translate}}">
            <i class="las la-fingerprint"></i>
            {{'USER.MFA.U2F' | translate}}
        </button>
    </div>
    <div class="table-wrapper">
        <div class="spinner-container" *ngIf="loading$ | async">
            <mat-spinner diameter="50"></mat-spinner>
        </div>
    </div>
</app-card>