zitadel/console/src/app/modules/info-row/info-row.component.html

<div class="info-row" *ngIf="user">
  <div class="info-wrapper">
    <p class="info-row-title">{{ 'USER.PAGES.STATE' | translate }}</p>
    <p
      *ngIf="user?.state"
      class="state"
      [ngClass]="{
        active: user.state === UserState.USER_STATE_ACTIVE,
        inactive: user.state === UserState.USER_STATE_INACTIVE,
      }"
    >
      {{ (isV2(user) ? 'USER.STATEV2.' : 'USER.STATE.') + user.state | translate }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'USER.ID' | translate }}</p>
    <p *ngIf="userId" class="info-row-desc">{{ userId }}</p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'USER.DETAILS.DATECREATED' | translate }}</p>
    <p *ngIf="creationDate" class="info-row-desc">
      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'USER.DETAILS.DATECHANGED' | translate }}</p>
    <p *ngIf="changeDate" class="info-row-desc">
      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>

  <div class="info-wrapper width">
    <p class="info-row-title">{{ 'USER.PAGES.LOGINMETHODS' | translate }}</p>
    <div class="copy-row" *ngFor="let login of loginMethods">
      <button
        [disabled]="copied === login"
        [matTooltip]="(copied !== login ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
        cnslCopyToClipboard
        [valueToCopy]="login"
        (copiedValue)="copied = $event"
        data-e2e="copy-loginname"
      >
        {{ login }}
      </button>
    </div>
  </div>
</div>

<div class="info-row" *ngIf="instance">
  <div class="info-wrapper">
    <p class="info-row-title">{{ 'IAM.PAGES.STATE' | translate }}</p>
    <p
      *ngIf="instance?.state"
      class="state"
      [ngClass]="{
        active: instance.state === State.STATE_RUNNING,
        inactive: instance.state === State.STATE_STOPPED || instance.state === State.STATE_STOPPING,
      }"
    >
      {{ 'IAM.STATE.' + instance.state | translate }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'RESOURCEID' | translate }}</p>
    <p *ngIf="instance?.id" class="info-row-desc">{{ instance.id }}</p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'NAME' | translate }}</p>
    <p *ngIf="instance?.name" class="info-row-desc">{{ instance.name }}</p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'VERSION' | translate }}</p>
    <p *ngIf="instance?.version" class="info-row-desc">{{ instance.version }}</p>
  </div>

  <div class="info-wrapper width">
    <p class="info-row-title">{{ 'IAM.PAGES.DOMAINLIST' | translate }}</p>
    <div class="copy-row" *ngFor="let domain of instance?.domainsList">
      <button
        [disabled]="copied === domain.domain"
        [matTooltip]="(copied !== domain.domain ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
        cnslCopyToClipboard
        [valueToCopy]="domain.domain"
        (copiedValue)="copied = $event"
      >
        {{ domain.domain }}
      </button>
    </div>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
    <p *ngIf="instance?.details?.creationDate as creationDate" class="info-row-desc">
      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
    <p *ngIf="instance?.details?.changeDate as changeDate" class="info-row-desc">
      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>
</div>

<div class="info-row" *ngIf="org">
  <div class="info-wrapper">
    <p class="info-row-title">{{ 'ORG.PAGES.STATE' | translate }}</p>
    <p
      *ngIf="org?.state"
      class="state"
      [ngClass]="{ active: org.state === OrgState.ORG_STATE_ACTIVE, inactive: org.state === OrgState.ORG_STATE_INACTIVE }"
    >
      {{ 'ORG.STATE.' + org.state | translate }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'RESOURCEID' | translate }}</p>
    <p *ngIf="org?.id" class="info-row-desc">{{ org.id }}</p>
  </div>

  <div class="info-wrapper width">
    <p class="info-row-title">{{ 'ORG.PAGES.PRIMARYDOMAIN' | translate }}</p>
    <div class="copy-row" *ngIf="org.primaryDomain">
      <button
        [disabled]="copied === org.primaryDomain"
        [matTooltip]="(copied !== org.primaryDomain ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
        cnslCopyToClipboard
        [valueToCopy]="org.primaryDomain"
        (copiedValue)="copied = $event"
      >
        {{ org.primaryDomain }}
      </button>
    </div>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
    <p *ngIf="org?.details?.creationDate as creationDate" class="info-row-desc">
      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
    <p *ngIf="org?.details?.changeDate as changeDate" class="info-row-desc">
      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>
</div>

<div class="info-row" *ngIf="project">
  <div class="info-wrapper">
    <p class="info-row-title">{{ 'PROJECT.STATE.TITLE' | translate }}</p>
    <p
      *ngIf="project?.state"
      class="state"
      [ngClass]="{
        active: project.state === ProjectState.PROJECT_STATE_ACTIVE,
        inactive: project.state === ProjectState.PROJECT_STATE_INACTIVE,
      }"
    >
      {{ 'PROJECT.STATE.' + project.state | translate }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'RESOURCEID' | translate }}</p>
    <p *ngIf="project?.id" class="info-row-desc">{{ project.id }}</p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
    <p *ngIf="project?.details?.creationDate as creationDate" class="info-row-desc">
      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
    <p *ngIf="project?.details?.changeDate as changeDate" class="info-row-desc">
      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>
</div>

<div class="info-row" *ngIf="grantedProject">
  <div class="info-wrapper">
    <p class="info-row-title">{{ 'PROJECT.STATE.TITLE' | translate }}</p>
    <p
      *ngIf="grantedProject?.state"
      class="state"
      [ngClass]="{
        active: grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE,
        inactive: grantedProject.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE,
      }"
    >
      {{ 'PROJECT.STATE.' + grantedProject.state | translate }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'RESOURCEID' | translate }}</p>
    <p *ngIf="grantedProject?.projectId" class="info-row-desc">{{ grantedProject.projectId }}</p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'PROJECT.GRANT.GRANTID' | translate }}</p>
    <p *ngIf="grantedProject?.grantId" class="info-row-desc">{{ grantedProject.grantId }}</p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
    <p *ngIf="grantedProject?.details?.creationDate as creationDate" class="info-row-desc">
      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
    <p *ngIf="grantedProject?.details?.changeDate as changeDate" class="info-row-desc">
      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>
</div>

<ng-container *ngIf="app">
  <div class="info-row">
    <div class="info-wrapper">
      <p class="info-row-title">{{ 'APP.PAGES.STATE' | translate }}</p>
      <p
        *ngIf="app?.state"
        class="state"
        [ngClass]="{ active: app.state === AppState.APP_STATE_ACTIVE, inactive: app.state === AppState.APP_STATE_INACTIVE }"
      >
        {{ 'APP.PAGES.DETAIL.STATE.' + app.state | translate }}
      </p>
    </div>
    <div class="info-wrapper" *ngIf="app?.apiConfig?.authMethodType as authMethodType">
      <p class="info-row-title">{{ 'APP.AUTHMETHOD' | translate }}</p>
      <p class="info-row-desc">
        {{ 'APP.API.AUTHMETHOD.' + authMethodType | translate }}
      </p>
    </div>

    <div class="info-wrapper" *ngIf="app?.oidcConfig?.authMethodType as authMethodType">
      <p class="info-row-title">{{ 'APP.AUTHMETHOD' | translate }}</p>
      <p class="info-row-desc">
        {{ 'APP.OIDC.AUTHMETHOD.' + authMethodType | translate }}
      </p>
    </div>

    <div class="info-wrapper">
      <p class="info-row-title">{{ 'APP.PAGES.ID' | translate }}</p>
      <p *ngIf="app?.id" class="info-row-desc">{{ app.id }}</p>
    </div>

    <div class="info-wrapper">
      <p class="info-row-title">{{ 'APP.PAGES.DATECREATED' | translate }}</p>
      <p *ngIf="app?.details?.creationDate as creationDate" class="info-row-desc">
        {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
      </p>
    </div>

    <div class="info-wrapper">
      <p class="info-row-title">{{ 'APP.PAGES.DATECHANGED' | translate }}</p>
      <p *ngIf="app?.details?.changeDate as changeDate" class="info-row-desc">
        {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
      </p>
    </div>

    <div class="info-wrapper" *ngIf="app">
      <p class="info-row-title">{{ 'APP.OIDC.INFO.CLIENTID' | translate }}</p>
      <div class="copy-row" *ngIf="app.oidcConfig?.clientId">
        <button
          *ngIf="app.oidcConfig?.clientId as clientId"
          [disabled]="copied === clientId"
          [matTooltip]="(copied !== clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
          cnslCopyToClipboard
          [valueToCopy]="clientId"
          (copiedValue)="copied = $event"
        >
          {{ clientId }}
        </button>
      </div>

      <div class="copy-row" *ngIf="app.apiConfig?.clientId">
        <button
          *ngIf="app.apiConfig?.clientId as clientId"
          [disabled]="copied === clientId"
          [matTooltip]="(copied !== clientId ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
          cnslCopyToClipboard
          [valueToCopy]="clientId"
          (copiedValue)="copied = $event"
        >
          {{ clientId }}
        </button>
      </div>
    </div>
  </div>
</ng-container>

<div class="info-row" *ngIf="idp">
  <div class="info-wrapper width">
    <p class="info-row-title">{{ 'IDP.ID' | translate }}</p>
    <p class="info-row-desc">
      {{ idp.id }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'IDP.DETAIL.DATECREATED' | translate }}</p>
    <p class="info-row-desc" *ngIf="idp?.details?.creationDate as creationDate">
      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'IDP.DETAIL.DATECHANGED' | translate }}</p>
    <p class="info-row-desc" *ngIf="idp?.details?.changeDate as changeDate">
      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
    </p>
  </div>

  <div class="info-wrapper">
    <p class="info-row-title">{{ 'IDP.STATE' | translate }}</p>
    <p
      *ngIf="idp?.state"
      class="state"
      [ngClass]="{ active: idp.state === IDPState.IDP_STATE_ACTIVE, inactive: idp.state === IDPState.IDP_STATE_INACTIVE }"
    >
      {{ 'IDP.STATES.' + idp.state | translate }}
    </p>
  </div>
</div>