<h1 mat-dialog-title>{{'security.2fa.totp.enable' | i18n}}</h1>
<div mat-dialog-content>

    {{'security.2fa.totp.hint' | i18n}}

    <qrcode *ngIf="data.qrData" [qrdata]="data.qrData" [width]="400" [errorCorrectionLevel]="'M'" title="{{data.qrData}}"></qrcode>

    {{'security.2fa.totp.activate' | i18n}}
    <mat-form-field>
        <input matInput placeholder="{{'security.2fa.totp.code' | i18n}}" [formControl]="code" required>
    </mat-form-field>
</div>
<div mat-dialog-actions>
    <button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
    <button [disabled]="code.invalid" mat-raised-button [mat-dialog-close]="code.value" color="accent">{{'security.2fa.totp.enable' | i18n}}</button>
</div>