zitadel/console/src/app/pages/orgs/policy-grid/policy-grid.component.html

<h1>{{'ORG.POLICY.TITLE' | translate}}</h1>

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

<div class="row-lyt">
    <div class="p-item card">
        <div class="avatar">
            <mat-icon class="icon" svgIcon="mdi_textbox_password"></mat-icon>
        </div>
        <div class="title">
            <span>{{'ORG.POLICY.PWD_COMPLEXITY.TITLE' | translate}}</span>
            <button mat-icon-button disabled>
                <i *ngIf="complexityPolicy" class="icon las la-check-circle"></i>
            </button>
        </div>

        <p *ngIf="complexityPolicy?.description; else showDescComplexity" class="desc">
            {{ complexityPolicy.description }}</p>
        <ng-template #showDescComplexity>
            <p class="desc">
                {{'ORG.POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate}}</p>
        </ng-template>

        <span class="fill-space"></span>
        <div class="btn-wrapper" *ngIf="(['policy.write'] | hasRole) as writePolicy$">
            <button [disabled]="complexityPolicy || (writePolicy$ | async) == false"
                [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY,'create' ]" color="primary"
                mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
            <button [disabled]="!complexityPolicy || (writePolicy$ | async) == false"
                [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY ]" mat-stroked-button
                [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
        </div>
    </div>

    <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>{{'ORG.POLICY.IAM_POLICY.TITLE' | translate}}</span>
                <button mat-icon-button disabled>
                    <i *ngIf="iamPolicy" class="icon las la-check-circle"></i>
                </button>
            </div>

            <p *ngIf="iamPolicy?.description; else showDescIAM" class="desc">
                {{ iamPolicy.description }}</p>
            <ng-template #showDescIAM>
                <p class="desc">
                    {{'ORG.POLICY.IAM_POLICY.DESCRIPTION' | translate}}</p>
            </ng-template>

            <span class="fill-space"></span>

            <div class="btn-wrapper" *ngIf="(['iam.policy.write$'] | hasRole) as iamWritePolicy$">
                <button [disabled]="iamPolicy || (iamWritePolicy$ | async) == false"
                    [routerLink]="[ 'policy', PolicyComponentType.IAM,'create' ]" color="primary"
                    mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
                <button [disabled]="!iamPolicy || (iamWritePolicy$ | async) == false"
                    [routerLink]="[ 'policy', PolicyComponentType.IAM ]" mat-stroked-button
                    [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
            </div>
        </div>
    </ng-template>

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

            <ng-template #showDescIAM>
                <p class="desc">
                    {{'ORG.POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
            </ng-template>

            <span class="fill-space"></span>
            <div class="btn-wrapper" *ngIf="(['policy.write'] | hasRole) as writePolicy$">
                <button [disabled]="loginPolicy || (writePolicy$ | async) == false"
                    [routerLink]="[ 'policy', PolicyComponentType.LOGIN,'create' ]" color="primary"
                    mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
                <button [disabled]="!loginPolicy || (writePolicy$ | async) == false"
                    [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]" mat-stroked-button
                    [matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
            </div>
        </div>
    </ng-template>
</div>