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

<app-detail-layout [backRouterLink]="[ serviceType === PolicyComponentServiceType.ADMIN ? '/iam/policies' : '/org']"
    [title]="'POLICY.LOGIN_POLICY.TITLE' | translate"
    [description]="(serviceType==PolicyComponentServiceType.MGMT ? 'POLICY.LOGIN_POLICY.DESCRIPTIONCREATEMGMT' : PolicyComponentServiceType.ADMIN ? 'POLICY.LOGIN_POLICY.DESCRIPTIONCREATEADMIN' : '') | translate">
    <cnsl-info-section *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</cnsl-info-section>

    <div class="spinner-wr">
        <mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
    </div>
    <ng-container *ngIf="serviceType === PolicyComponentServiceType.MGMT">
        <ng-template appHasRole [appHasRole]="['policy.delete']">
            <button *ngIf="!isDefault" color="primary" matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="removePolicy()"
                mat-stroked-button>
                {{'POLICY.RESET' | translate}}
            </button>
        </ng-template>

        <ng-template appHasRole [appHasRole]="['policy.write']">
            <button *ngIf="isDefault" color="primary" matTooltip="{{'POLICY.CREATECUSTOM' | translate}}" (click)="savePolicy()"
                mat-raised-button>
                {{'POLICY.CREATECUSTOM' | translate}}
            </button>
        </ng-template>
    </ng-container>

    <div class="content" *ngIf="loginData">
        <div class="row">
            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled || serviceType == PolicyComponentServiceType.MGMT && (['login_policy.username_login'] | hasFeature | async) == false" ngDefaultControl
                [(ngModel)]="loginData.allowUsernamePassword">
                {{'POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate}}
            </mat-slide-toggle>

            <ng-container
                *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.username_login'] | hasFeature | async) == false; else usernameInfo">
                <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
                    'login_policy.username_login'})}}
                </cnsl-info-section>
            </ng-container>

            <ng-template #usernameInfo>
                <cnsl-info-section class="info">
                    {{'POLICY.DATA.ALLOWUSERNAMEPASSWORD_DESC' | translate}}
                </cnsl-info-section>
            </ng-template>
        </div>
        <div class="row">
            <mat-slide-toggle class="toggle" color="primary"
                [disabled]="disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.registration'] | hasFeature | async) == false)"
                ngDefaultControl [(ngModel)]="loginData.allowRegister">
                {{'POLICY.DATA.ALLOWREGISTER' | translate}}
            </mat-slide-toggle>

            <ng-container
                *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.registration'] | hasFeature | async) == false; else regInfo">
                <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
                    'login_policy.registration'})}}
                </cnsl-info-section>
            </ng-container>
            <ng-template #regInfo>
                <cnsl-info-section class="info">
                    {{'POLICY.DATA.ALLOWREGISTER_DESC' | translate}}
                </cnsl-info-section>
            </ng-template>
        </div>
        <div class="row">
            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled || serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false" ngDefaultControl
                [(ngModel)]="loginData.allowExternalIdp">
                {{'POLICY.DATA.ALLOWEXTERNALIDP' | translate}}
            </mat-slide-toggle>
            <ng-container
                *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false; else idpInfo">
                <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
                    'login_policy.idp'})}}
                </cnsl-info-section>
            </ng-container>
            <ng-template #idpInfo>
                <cnsl-info-section class="info">
                    {{'POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate}}
                </cnsl-info-section>
            </ng-template>
        </div>
        <div class="row">
            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled || serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false" ngDefaultControl
                [(ngModel)]="loginData.forceMfa">
                {{'POLICY.DATA.FORCEMFA' | translate}}
            </mat-slide-toggle>
            <ng-container
                *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false; else factorsInfo">
                <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
                    'login_policy.factors'})}}
                </cnsl-info-section>
            </ng-container>
            <ng-template #factorsInfo>
                <cnsl-info-section class="info">
                    {{'POLICY.DATA.FORCEMFA_DESC' | translate}}
                </cnsl-info-section>
            </ng-template>
        </div>
      <div class="row">
        <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled || serviceType == PolicyComponentServiceType.MGMT && (['login_policy.password_reset'] | hasFeature | async) == false" ngDefaultControl
                          [(ngModel)]="loginData.hidePasswordReset">
          {{'POLICY.DATA.HIDEPASSWORDRESET' | translate}}
        </mat-slide-toggle>

        <ng-container
          *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.password_reset'] | hasFeature | async) == false; else passwordResetInfo">
          <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
            'login_policy.hide_password_reset'})}}
          </cnsl-info-section>
        </ng-container>

        <ng-template #passwordResetInfo>
          <cnsl-info-section class="info">
            {{'POLICY.DATA.HIDEPASSWORDRESET_DESC' | translate}}
          </cnsl-info-section>
        </ng-template>
      </div>

        <div class="row">

            <cnsl-form-field class="form-field" label="Access Code" required="true">
                <cnsl-label>{{'LOGINPOLICY.PASSWORDLESS' | translate}}</cnsl-label>
                <mat-select [(ngModel)]="loginData.passwordlessType"
                    [disabled]="disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.passwordless'] | hasFeature | async) == false)">
                    <mat-option *ngFor="let pt of passwordlessTypes" [value]="pt">
                        {{'LOGINPOLICY.PASSWORDLESSTYPE.'+pt | translate}}
                    </mat-option>
                </mat-select>
            </cnsl-form-field>
            <ng-container
                *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.passwordless'] | hasFeature | async) == false">
                <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
                    'login_policy.passwordless'})}}
                </cnsl-info-section>
            </ng-container>
        </div>
    </div>

    <button [disabled]="disabled" class="save-button" (click)="savePolicy()" color="primary" type="submit"
        mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>

    <div class="divider"></div>

    <ng-container *ngIf="!isDefault">
        <h3 class="subheader">{{ 'MFA.LIST.MULTIFACTORTITLE' | translate }}</h3>
        <p class="subdesc">{{ 'MFA.LIST.MULTIFACTORDESCRIPTION' | translate }}</p>
        <ng-container
            *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false">
            <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.factors'})}}
            </cnsl-info-section>
        </ng-container>
        <app-mfa-table [service]="service" [serviceType]="serviceType"
            [componentType]="LoginMethodComponentType.MultiFactor"
            [disabled]="(([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'policy.write' : ''] | hasRole | async) == false) || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false)">
        </app-mfa-table>

        <h3 class="subheader">{{ 'MFA.LIST.SECONDFACTORTITLE' | translate }}</h3>
        <p class="subdesc">{{ 'MFA.LIST.SECONDFACTORDESCRIPTION' | translate }}</p>
        <ng-container
            *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false">
            <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value: 'login_policy.factors'})}}
            </cnsl-info-section>
        </ng-container>
        <app-mfa-table [service]="service" [serviceType]="serviceType"
            [componentType]="LoginMethodComponentType.SecondFactor"
            [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.policy.write' : serviceType == PolicyComponentServiceType.MGMT ? 'policy.write' : ''] | hasRole | async) == false || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.factors'] | hasFeature | async) == false)">
        </app-mfa-table>
    </ng-container>

    <h3 class="subheader">{{'LOGINPOLICY.IDPS' | translate}}</h3>

    <ng-container
        *ngIf="serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false">
        <cnsl-info-section type="WARN">{{'FEATURES.NOTAVAILABLE' | translate: ({value:
            'login_policy.idp'})}}
        </cnsl-info-section>
    </ng-container>

    <div class="idps">
        <div class="idp"
            [ngClass]="{'disabled': (disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false))}"
            *ngFor="let idp of idps">
            <button
                [disabled]="disabled || (serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false)"
                mat-icon-button (click)="removeIdp(idp)" class="rm">
                <mat-icon matTooltip="{{'ACTIONS.REMOVE' | translate}}">
                    remove_circle</mat-icon>
            </button>
            <div class="line">
                <img src="../../../assets/images/google.png"
                    *ngIf="idp.stylingType == IDPStylingType.STYLING_TYPE_GOOGLE" alt="google" />
                <div>
                    <span class="name">{{idp.idpName}}</span>
                    <span class="meta-info">{{ 'IDP.TYPE' | translate }}: {{ 'IDP.TYPES.'+idp.idpType |
                        translate
                        }}</span>
                    <span class="meta-info">{{ 'IDP.ID' | translate }}: {{idp.idpId}}</span>
                </div>
            </div>
        </div>
        <div *ngIf="!disabled && ((serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async)) || serviceType == PolicyComponentServiceType.ADMIN)"
            class="new-idp" (click)="openDialog()" matRipple>
            <mat-icon>add</mat-icon>
        </div>
    </div>

    <ng-template appHasRole [appHasRole]="['org.idp.read']">
        <app-card title="{{ 'IDP.LIST.TITLE' | translate }}" description="{{ 'IDP.LIST.DESCRIPTION' | translate }}"
            [expanded]="false">

            <app-idp-table [service]="service" [serviceType]="serviceType"
                [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false || ((serviceType == PolicyComponentServiceType.MGMT && (['login_policy.idp'] | hasFeature | async) == false))">
            </app-idp-table>
        </app-card>
    </ng-template>

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