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

<app-detail-layout [backRouterLink]="[ '/org']" [title]="title ? (title | translate) : ''"
    [description]="desc ? (desc | translate) : ''">
    <ng-template appHasRole [appHasRole]="['policy.write$']">
        <button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
            mat-stroked-button>
            {{'ORG.POLICY.DELETE' | translate}}
        </button>
    </ng-template>

    <div *ngIf="complexityData" class="content">
        <mat-form-field class="description-formfield" appearance="outline">
            <mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
            <input matInput name="description" ngDefaultControl [(ngModel)]="complexityData.description" required />
        </mat-form-field>
        <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" [disabled]="!complexityData?.description"
            mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
    </div>
</app-detail-layout>