@if (twoFactorAlreadyEnabled === true) {
  <div i18n class="root already-enabled">Two factor authentication is already enabled.</div>
}

@if (twoFactorAlreadyEnabled === false) {
  <div class="root">
    @if (step === 'request') {
      <form (ngSubmit)="requestTwoFactor()" [formGroup]="formPassword">
        <label i18n for="current-password">Your password</label>
        <div class="form-group-description" i18n>Confirm your password to enable two factor authentication</div>

        <my-input-text
          formControlName="current-password"
          inputId="current-password"
          i18n-placeholder
          placeholder="Current password"
          [formError]="formErrorsPassword['current-password']"
          autocomplete="current-password"
        ></my-input-text>

        <input class="peertube-button primary-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formPassword.valid">
      </form>
    } @else if (step === 'confirm') {
      <p i18n>
        Scan this QR code into a TOTP app on your phone. This app will generate tokens that you will have to enter when logging in.
      </p>

      <qrcode [qrdata]="twoFactorURI" [width]="256" level="Q"></qrcode>

      <div i18n>If you can't scan the QR code and need to enter it manually, here is the plain-text secret:</div>

      <div class="secret-plain-text">{{ twoFactorSecret }}</div>

      <form class="mt-3" (ngSubmit)="confirmTwoFactor()" [formGroup]="formOTP">
        <label i18n for="otp-token">Two-factor code</label>
        <div class="form-group-description" i18n>Enter the code generated by your authenticator app to confirm</div>

        <my-input-text
          [show]="true"
          formControlName="otp-token"
          inputId="otp-token"
          [formError]="formErrorsOTP['otp-token']"
          autocomplete="otp-token"
        ></my-input-text>

        <input class="peertube-button primary-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formOTP.valid">
      </form>
    }
  </div>
}