zitadel/console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html

<app-detail-layout [backRouterLink]="[ serviceType === PolicyComponentServiceType.ADMIN ? '/iam/policies' : '/org']"
    [title]="'POLICY.PWD_COMPLEXITY.TITLE' | translate" [description]="'POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate">

    <p class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</p>

    <div class="spinner-wr">
        <mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
    </div>

    <ng-template appHasRole [appHasRole]="['policy.delete']">
        <button *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
            matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()" mat-stroked-button>
            {{'POLICY.RESET' | translate}}
        </button>
    </ng-template>

    <div *ngIf="complexityData" class="content">
        <div class="row">
            <mat-icon class="icon" svgIcon="mdi_counter"></mat-icon>
            <span class="left-desc">{{'POLICY.DATA.MINLENGTH' | translate}}</span>
            <span class="fill-space"></span>
            <div class="length-wrapper">
                <button mat-icon-button (click)="decrementLength()">
                    <mat-icon>remove</mat-icon>
                </button>
                <span>{{complexityData?.minLength}}</span>
                <button mat-icon-button (click)="incrementLength()">
                    <mat-icon>add</mat-icon>
                </button>
            </div>
        </div>
        <div class="row">
            <mat-icon class="icon" svgIcon="mdi_numeric"></mat-icon>
            <span class="left-desc">{{'POLICY.DATA.HASNUMBER' | translate}}</span>
            <span class="fill-space"></span>
            <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="complexityData.hasNumber">
            </mat-slide-toggle>
        </div>
        <div class="row">
            <mat-icon class="icon" svgIcon="mdi_symbol"></mat-icon>
            <span class="left-desc">{{'POLICY.DATA.HASSYMBOL' | translate}}</span>
            <span class="fill-space"></span>
            <mat-slide-toggle color="primary" name="hasSymbol" ngDefaultControl [(ngModel)]="complexityData.hasSymbol">
            </mat-slide-toggle>
        </div>
        <div class="row">
            <mat-icon class="icon" svgIcon="mdi_format-letter-case-lower"></mat-icon>
            <span class="left-desc">{{'POLICY.DATA.HASLOWERCASE' | translate}}</span>
            <span class="fill-space"></span>
            <mat-slide-toggle color="primary" name="hasLowercase" ngDefaultControl
                [(ngModel)]="complexityData.hasLowercase">
            </mat-slide-toggle>
        </div>
        <div class="row">
            <mat-icon class="icon" svgIcon="mdi_format-letter-case-upper"></mat-icon>
            <span class="left-desc">{{'POLICY.DATA.HASUPPERCASE' | translate}}</span>
            <span class="fill-space"></span>
            <mat-slide-toggle color="primary" name="hasUppercase" ngDefaultControl
                [(ngModel)]="complexityData.hasUppercase">
            </mat-slide-toggle>
        </div>
    </div>

    <div class="btn-container">
        <button (click)="savePolicy()" color="primary" type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
            }}</button>
    </div>

    <app-policy-grid  [currentPolicy]="currentPolicy" [type]="serviceType" tagForFilter="security"></app-policy-grid>
</app-detail-layout>