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

<div class="validation-col" *ngIf="this.policy">
    <div class="val" *ngIf="this.policy.minLength">

        <i *ngIf="password?.value?.length == 0; else showSpinner" class="las la-times red"></i>

        <ng-template #showSpinner>
            <div *ngIf="(password?.errors?.minlength || password?.value?.length == 0) as currentError; else trueminlength"
                class="sp-wrapper">
                <mat-progress-spinner class="spinner" diameter="20" [color]="currentError ? 'warn': 'valid'"
                    mode="determinate" [value]="(password?.value?.length / policy.minLength) * 100">
                </mat-progress-spinner>
            </div>
        </ng-template>
        <ng-template #trueminlength>
            <i class="las la-check green"></i>
        </ng-template>

        <span>{{ 'USER.PASSWORD.MINLENGTHERROR' | translate: {value: policy?.minLength} }}
            ({{password?.value?.length}}/{{ policy.minLength}})
        </span>
    </div>
    <div class="val" *ngIf="this.policy.hasSymbol">
        <i *ngIf="password?.errors?.symbolValidator" class="las la-times red"></i>
        <i *ngIf="!password?.errors?.symbolValidator" class="las la-check green"></i>
        <span> {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}</span>
    </div>
    <div class="val" *ngIf="this.policy.hasNumber">
        <i *ngIf="password?.errors?.numberValidator" class="las la-times red"></i>
        <i *ngIf="!password?.errors?.numberValidator" class="las la-check green"></i>
        <span> {{ 'USER.VALIDATION.NUMBERERROR' | translate }}</span>
    </div>
    <div class="val" *ngIf="this.policy.hasUppercase">
        <i *ngIf="password?.errors?.upperCaseValidator" class="las la-times red"></i>
        <i *ngIf="!password?.errors?.upperCaseValidator" class="las la-check green"></i>
        <span> {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}</span>
    </div>
    <div class="val" *ngIf="this.policy.hasLowercase">
        <i *ngIf="password?.errors?.lowerCaseValidator" class="las la-times red"></i>
        <i *ngIf="!password?.errors?.lowerCaseValidator" class="las la-check green"></i>
        <span>{{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}</span>
    </div>
</div>