
<h3 mat-dialog-title class="mb-1">reCAPTCHA settings</h3>

<p class="text-muted mb-4">
  Supply your reCAPTCHA settings. You can get a reCAPTCHA account
  <a
    target="_blank"
    href="https://www.google.com/recaptcha">here</a>.
  Notice, reCAPTCHA is optional as of Magic version 19.5.0, and no longer required.
</p>

<form [formGroup]="captchaForm">

  <div mat-dialog-content>

    <div class="row">

      <div class="col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="Site key"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>key</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            placeholder="Site key"
            formControlName="key"
            [pattern]="CommonRegEx.recaptcha"
            cdkFocusInitial
            spellcheck="false"
            autocomplete="off"
            name="key" />
            <mat-error>{{CommonErrorMessages.recaptcha}}</mat-error>
        </mat-form-field>

      </div>

      <div class="col-12">

        <mat-form-field class="w-100 standalone-field">
          <span
            matPrefix
            matTooltip="Secret"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>shield</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            placeholder="Secret"
            autocomplete="off"
            [pattern]="CommonRegEx.recaptcha"
            formControlName="secret"
            name="secret" />
            <mat-error>{{CommonErrorMessages.recaptcha}}</mat-error>
        </mat-form-field>

      </div>

    </div>

  </div>

  <div mat-dialog-actions [align]="'end'">

    <button
      mat-button
      mat-dialog-close
      type="button"
      color="primary">
      Cancel
    </button>

    <button
      mat-flat-button
      type="submit"
      color="primary"
      (click)="submit()"
      class="px-3">
      Save
    </button>

  </div>

</form>
