zitadel/console/src/app/modules/policy-grid/policy-grid.component.html

<h2>{{'POLICY.TITLE' | translate}}</h2>

<p class="top-desc">{{'POLICY.DESCRIPTION' | translate}}</p>

<div class="row-lyt">
    <ng-template appHasRole
        [appHasRole]="type == PolicyGridType.IAM ? ['iam.policy.read'] : type == PolicyGridType.ORG ?  ['policy.read'] : []">
        <div class="p-item card">
            <div class="avatar">
                <mat-icon class="icon" svgIcon="mdi_textbox_password"></mat-icon>
            </div>
            <div class="title">
                <span>{{'POLICY.PWD_COMPLEXITY.TITLE' | translate}}</span>
                <button mat-icon-button disabled>
                    <i class="icon las la-check-circle"></i>
                </button>
            </div>

            <p class="desc">
                {{'POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate}}</p>

            <div class="icons">
                <mat-icon matTooltip="{{'POLICY.DATA.HASUPPERCASE' | translate}}" *ngIf="complexityPolicy?.hasUppercase"
                    class="icon" svgIcon="mdi_format-letter-case-upper">
                </mat-icon>
                <mat-icon matTooltip="{{'POLICY.DATA.HASLOWERCASE' | translate}}" *ngIf="complexityPolicy?.hasLowercase"
                    class="icon" svgIcon="mdi_format-letter-case-lower">
                </mat-icon>
                <mat-icon matTooltip="{{'POLICY.DATA.HASNUMBER' | translate}}" *ngIf="complexityPolicy?.hasNumber"
                    class="icon" svgIcon="mdi_numeric"></mat-icon>
                <mat-icon matTooltip="{{'POLICY.DATA.HASSYMBOL' | translate}}" *ngIf="complexityPolicy?.hasSymbol"
                    class="icon" svgIcon="mdi_symbol"></mat-icon>
                <!-- <mat-icon *ngIf="complexityPolicy?." class="icon" svgIcon="mdi_counter"></mat-icon> -->
            </div>

            <span class="fill-space"></span>
            <div class="btn-wrapper">
                <button
                    [routerLink]="[type == PolicyGridType.IAM ? '/iam' : type == PolicyGridType.ORG ?  '/org' : '', 'policy', PolicyComponentType.COMPLEXITY ]"
                    mat-stroked-button>{{'POLICY.BTN_EDIT' | translate}}</button>
            </div>
        </div>
    </ng-template>

    <ng-template appHasRole [appHasRole]="['iam.policy.read']">
        <div class="p-item card">
            <div class="avatar">
                <i class="icon las la-gem"></i>
            </div>
            <div class="title">
                <span>{{'POLICY.IAM_POLICY.TITLE' | translate}}</span>
                <button mat-icon-button disabled>
                    <i class="icon las la-check-circle"></i>
                </button>
            </div>

            <p class="desc">
                {{'POLICY.IAM_POLICY.DESCRIPTION' | translate}}</p>

            <span class="fill-space"></span>
            <div class="btn-wrapper">
                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
                    <button
                        [routerLink]="[type == PolicyGridType.IAM ? '/iam' : type == PolicyGridType.ORG ?  '/org' : '','policy', PolicyComponentType.IAM ]"
                        mat-stroked-button>{{'POLICY.BTN_EDIT' | translate}}</button>
                </ng-template>
            </div>
        </div>
    </ng-template>

    <ng-template appHasRole [appHasRole]="type == PolicyGridType.IAM ? ['iam.policy.read'] : type == PolicyGridType.ORG ?  ['policy.read'] : []">
      <div class="p-item card">
          <div class="avatar">
              <i class="icon las la-gem"></i>
          </div>
          <div class="title">
              <span>{{'POLICY.PRIVATELABELING_POLICY.TITLE' | translate}}</span>
              <button mat-icon-button disabled>
                  <i class="icon las la-check-circle"></i>
              </button>
          </div>

          <p class="desc">
              {{'POLICY.PRIVATELABELING_POLICY.DESCRIPTION' | translate}}</p>
          <!-- <cnsl-info-section class="warn"
              *ngIf="type == PolicyGridType.ORG && (['password_complexity_policy'] | hasFeature | async) == false"
              type="WARN">
              {{'FEATURES.NOTAVAILABLE' | translate: ({value:
              'password_complexity_policy'})}}
          </cnsl-info-section> -->

          <span class="fill-space"></span>
          <div class="btn-wrapper">
              <ng-template appHasRole [appHasRole]="type == PolicyGridType.IAM ? ['iam.policy.write'] : type == PolicyGridType.ORG ?  ['policy.write'] : []">
                  <button
                      [routerLink]="[type == PolicyGridType.IAM ? '/iam' : type == PolicyGridType.ORG ?  '/org' : '','policy', PolicyComponentType.PRIVATELABEL ]"
                      mat-stroked-button>{{'POLICY.BTN_EDIT' | translate}}</button>
              </ng-template>
          </div>
      </div>
  </ng-template>

    <ng-template appHasRole
        [appHasRole]="type == PolicyGridType.IAM ? ['iam.policy.read'] : type == PolicyGridType.ORG ?  ['policy.read'] : []">
        <div class="p-item card">
            <div class="avatar">
                <i class="icon las la-sign-in-alt"></i>
            </div>
            <div class="title">
                <span>{{'POLICY.LOGIN_POLICY.TITLE' | translate}}</span>
                <button mat-icon-button disabled>
                    <i class="icon las la-check-circle"></i>
                </button>
            </div>

            <p class="desc">
                {{'POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>

            <span class="fill-space"></span>
            <div class="btn-wrapper">
                <ng-template appHasRole [appHasRole]="['policy.write']">
                    <button
                        [routerLink]="[type == PolicyGridType.IAM ? '/iam' : type == PolicyGridType.ORG ?  '/org' : '','policy', PolicyComponentType.LOGIN ]"
                        mat-stroked-button>{{'POLICY.BTN_EDIT' | translate}}</button>
                </ng-template>
            </div>
        </div>
    </ng-template>
</div>