zitadel/console/src/app/modules/domains/domain-verification/domain-verification.component.html

<div mat-dialog-title>
  <div class="dialog-title">
    <h2>{{ 'ORG.PAGES.ORGDOMAIN.TITLE' | translate: { value: domain?.domainName } }}</h2>
    <a
      mat-icon-button
      href="https://zitadel.com/docs/guides/manage/console/organizations-overview#domain-verification-guide"
      rel="noreferrer"
      target="_blank"
      aria-label="docs"
    >
      <mat-icon class="icon">info_outline</mat-icon>
    </a>
  </div>
</div>

<div mat-dialog-content cdkFocusInitial autofocus>
  @if (showNew && !(dns || http)) {
    <div>
      <p class="domain-desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION' | translate }}</p>
      <p class="domain-desc">
        {{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_HTML' | translate }}
      </p>
      <p class="domain-desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_DNS' | translate }}</p>
      <p class="domain-desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_SKIP' | translate }}</p>
    </div>
  }

  @if (showNew && !(dns || http)) {
    <cnsl-info-section [type]="InfoSectionType.WARN" class="desc">{{
      'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_DESC' | translate
    }}</cnsl-info-section>
  }

  @if (!showNew && !(dns || http)) {
    <p class="desc">
      {{
        'ORG.PAGES.ORGDOMAIN.VERIFICATION_VALIDATION_ONGOING'
          | translate: { value: domain?.validationType == 1 ? 'HTTP' : 'DNS' }
      }}
    </p>
  }

  @if (showNew) {
    @if (http) {
      <div>
        <p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_HTTP_DESC' | translate: { value: domain?.domainName } }}</p>
        <p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_HTTP_URL_LABEL' | translate }}</p>
        @if (http.url) {
          <div class="domain-entry">
            <p>{{ http.url }}</p>
            <button
              color="primary"
              [disabled]="copied === data.clientSecret"
              matTooltip="copy to clipboard"
              cnslCopyToClipboard
              [valueToCopy]="http.url"
              (copiedValue)="copied = $event"
              mat-icon-button
            >
              @if (copied !== http.url) {
                <i class="las la-clipboard"></i>
              }
              @if (copied === http.url) {
                <i class="las la-clipboard-check"></i>
              }
            </button>
          </div>
        }
        <p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_HTTP_FILE_LABEL' | translate }}</p>
        <button mat-stroked-button (click)="saveFile()" color="primary">{{ 'ORG.PAGES.DOWNLOAD_FILE' | translate }}</button>
      </div>
    }
    @if (dns) {
      <div>
        <p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_DNS_DESC' | translate: { value: domain?.domainName } }}</p>
        <p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_DNS_HOST_LABEL' | translate }}</p>
        <div class="domain-line">
          @if (dns.token) {
            <div class="domain-entry">
              <p>{{ dnsChallenge }}</p>
              <button
                color="primary"
                [disabled]="copied === data.clientSecret"
                matTooltip="copy to clipboard"
                cnslCopyToClipboard
                [valueToCopy]="dnsChallenge"
                (copiedValue)="copied = $event"
                mat-icon-button
              >
                @if (copied !== dnsChallenge) {
                  <i class="las la-clipboard"></i>
                }
                @if (copied === dnsChallenge) {
                  <i class="las la-clipboard-check"></i>
                }
              </button>
            </div>
          }
          <span>.{{ domain?.domainName }}</span>
        </div>
        <p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_DNS_CHALLENGE_LABEL' | translate }}</p>
        @if (dns.token) {
          <div class="domain-entry">
            <p>{{ dns.token }}</p>
            <button
              color="primary"
              [disabled]="copied === data.clientSecret"
              matTooltip="copy to clipboard"
              cnslCopyToClipboard
              [valueToCopy]="dns.token"
              (copiedValue)="copied = $event"
              mat-icon-button
            >
              @if (copied !== dns.token) {
                <i class="las la-clipboard"></i>
              }
              @if (copied === dns.token) {
                <i class="las la-clipboard-check"></i>
              }
            </button>
          </div>
        }
      </div>
    }
  }
</div>
<div mat-dialog-actions class="action">
  @if (!showNew || dns || http) {
    <button color="primary" type="submit" mat-raised-button class="verify-button" (click)="validate()">
      {{ 'ACTIONS.VERIFY' | translate }}
    </button>
  }
  @if (validating) {
    <mat-spinner class="spinner" diameter="20" mode="indeterminate"></mat-spinner>
  }

  @if (!showNew) {
    <button mat-stroked-button color="primary" (click)="showNew = true">
      {{ 'ORG.PAGES.ORGDOMAIN.RESETMETHOD' | translate }}
    </button>
  }

  <div>
    @if (showNew && !(dns || http)) {
      <button color="primary" mat-raised-button (click)="loadHttpToken()">HTTP</button>
    }
    @if (showNew && !(dns || http)) {
      <button color="primary" mat-raised-button (click)="loadDnsToken()">DNS</button>
    }
  </div>

  <button mat-stroked-button (click)="closeDialog()">
    {{ 'ACTIONS.CLOSE' | translate }}
  </button>
</div>