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

<app-detail-layout [backRouterLink]="[ serviceType === PolicyComponentServiceType.ADMIN ? '/iam' : '/org']"
    [title]="'ORG.POLICY.PWD_COMPLEXITY.TITLE' | translate"
    [description]="'ORG.POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate">
    <p class="default" *ngIf="isDefault"> {{'ORG.POLICY.DEFAULTLABEL' | translate}}</p>

    <ng-template appHasRole
        [appHasRole]="[serviceType === PolicyComponentServiceType.ADMIN ? 'iam.policy.delete' : 'org.policy.delete']">
        <button matTooltip="{{'ORG.POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()"
            mat-stroked-button>
            {{'ORG.POLICY.RESET' | translate}}
        </button>
    </ng-template>

    <div *ngIf="complexityData" class="content">
        <div class="row">
            <span class="left-desc">{{'ORG.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">
            <span class="left-desc">{{'ORG.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">
            <span class="left-desc">{{'ORG.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">
            <span class="left-desc">{{'ORG.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">
            <span class="left-desc">{{'ORG.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-detail-layout>