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

<!-- <cnsl-card
  title="{{ 'POLICY.PWD_COMPLEXITY.TITLE' | translate }}"
  description="{{ 'POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate }}"
> -->
<h2>{{ 'DESCRIPTIONS.SETTINGS.PW_COMPLEXITY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.PW_COMPLEXITY.DESCRIPTION' | translate }}</p>

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

<ng-template cnslHasRole [hasRole]="['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>

<cnsl-card *ngIf="complexityData">
  <div class="complexity-content">
    <div class="row">
      <div class="length-wrapper">
        <button mat-icon-button (click)="decrementLength()" [disabled]="(['policy.write'] | hasRole | async) === false">
          <mat-icon>remove</mat-icon>
        </button>
        <span>{{ complexityData.minLength }}</span>
        <button mat-icon-button (click)="incrementLength()" [disabled]="(['policy.write'] | hasRole | async) === false">
          <mat-icon>add</mat-icon>
        </button>
      </div>

      <div class="number-toggle-row">
        <mat-icon class="icon" svgIcon="mdi_counter"></mat-icon>
        <span class="left-desc">{{ 'POLICY.DATA.MINLENGTH' | translate }}</span>
      </div>
    </div>
    <div class="row">
      <mat-checkbox
        class="slide-toggle"
        color="primary"
        name="hasNumber"
        ngDefaultControl
        [(ngModel)]="complexityData.hasNumber"
        [disabled]="(['policy.write'] | hasRole | async) === false"
      >
        <div class="slide-toggle-row">
          <mat-icon class="icon" svgIcon="mdi_numeric"></mat-icon>
          <span class="left-desc">{{ 'POLICY.DATA.HASNUMBER' | translate }}</span>
        </div>
      </mat-checkbox>
    </div>
    <div class="row">
      <mat-checkbox
        class="slide-toggle"
        color="primary"
        name="hasSymbol"
        ngDefaultControl
        [(ngModel)]="complexityData.hasSymbol"
        [disabled]="(['policy.write'] | hasRole | async) === false"
      >
        <div class="slide-toggle-row">
          <mat-icon class="icon" svgIcon="mdi_symbol"></mat-icon>
          <span class="left-desc">{{ 'POLICY.DATA.HASSYMBOL' | translate }}</span>
        </div>
      </mat-checkbox>
    </div>
    <div class="row">
      <mat-checkbox
        class="slide-toggle"
        color="primary"
        name="hasLowercase"
        ngDefaultControl
        [(ngModel)]="complexityData.hasLowercase"
        [disabled]="(['policy.write'] | hasRole | async) === false"
      >
        <div class="slide-toggle-row">
          <mat-icon class="icon" svgIcon="mdi_format-letter-case-lower"></mat-icon>
          <span class="left-desc">{{ 'POLICY.DATA.HASLOWERCASE' | translate }}</span>
        </div>
      </mat-checkbox>
    </div>
    <div class="row">
      <mat-checkbox
        class="slide-toggle"
        color="primary"
        name="hasUppercase"
        ngDefaultControl
        [(ngModel)]="complexityData.hasUppercase"
        [disabled]="(['policy.write'] | hasRole | async) === false"
      >
        <div class="slide-toggle-row">
          <mat-icon class="icon" svgIcon="mdi_format-letter-case-upper"></mat-icon>
          <span class="left-desc">{{ 'POLICY.DATA.HASUPPERCASE' | translate }}</span>
        </div>
      </mat-checkbox>
    </div>
  </div>
</cnsl-card>

<div class="btn-container">
  <button
    (click)="savePolicy()"
    [disabled]="(['policy.write'] | hasRole | async) === false"
    color="primary"
    type="submit"
    mat-raised-button
  >
    {{ 'ACTIONS.SAVE' | translate }}
  </button>
</div>
<!-- </cnsl-card> -->