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">
    <p class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</p>

    <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" 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" 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" ngDefaultControl
                [(ngModel)]="loginData.allowUsernamePassword">
                {{'POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate}}
            </mat-slide-toggle>
            <cnsl-info-section class="info">
                {{'POLICY.DATA.ALLOWUSERNAMEPASSWORD_DESC' | translate}}
            </cnsl-info-section>
        </div>
        <div class="row">
            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
                [(ngModel)]="loginData.allowRegister">
                {{'POLICY.DATA.ALLOWREGISTER' | translate}}
            </mat-slide-toggle>
            <cnsl-info-section class="info">
                {{'POLICY.DATA.ALLOWREGISTER_DESC' | translate}}
            </cnsl-info-section>
        </div>
        <div class="row">
            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
                [(ngModel)]="loginData.allowExternalIdp">
                {{'POLICY.DATA.ALLOWEXTERNALIDP' | translate}}
            </mat-slide-toggle>
            <cnsl-info-section class="info">
                {{'POLICY.DATA.ALLOWEXTERNALIDP_DESC' | translate}}
            </cnsl-info-section>
        </div>
        <div class="row">
            <mat-slide-toggle class="toggle" color="primary" [disabled]="disabled" ngDefaultControl
                [(ngModel)]="loginData.forceMfa">
                {{'POLICY.DATA.FORCEMFA' | translate}}
            </mat-slide-toggle>
            <cnsl-info-section class="info">
                {{'POLICY.DATA.FORCEMFA_DESC' | translate}}
            </cnsl-info-section>
        </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">
                    <mat-option *ngFor="let pt of passwordlessTypes" [value]="pt">
                        {{'LOGINPOLICY.PASSWORDLESSTYPE.'+pt | translate}}
                    </mat-option>
                </mat-select>
            </cnsl-form-field>
        </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>
        <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">
        </app-mfa-table>

        <h3 class="subheader">{{ 'MFA.LIST.SECONDFACTORTITLE' | translate }}</h3>
        <p class="subdesc">{{ 'MFA.LIST.SECONDFACTORDESCRIPTION' | translate }}</p>
        <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">
        </app-mfa-table>
    </ng-container>

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

    <div class="idps">
        <div class="idp" [ngClass]="{'disabled': disabled}" *ngFor="let idp of idps">
            <button [disabled]="disabled" 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.name}}</span>
                    <span class="meta-info">{{ 'IDP.TYPE' | translate }}: {{ 'IDP.TYPES.'+idp.type | translate }}</span>
                    <span class="meta-info">{{ 'IDP.ID' | translate }}: {{idp.idpConfigId}}</span>
                </div>
            </div>
        </div>
        <div *ngIf="!disabled" 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">
            <div card-actions>
                <i class="lab la-google"></i>
                <i class="lab la-facebook"></i>
                <i class="lab la-apple"></i>
                <i class="lab la-github"></i>
                <i class="lab la-gitlab"></i>
            </div>
            <app-idp-table [service]="service" [serviceType]="serviceType"
                [disabled]="([serviceType == PolicyComponentServiceType.ADMIN ? 'iam.idp.write' : serviceType == PolicyComponentServiceType.MGMT ? 'org.idp.write' : ''] | hasRole | async) == false">
            </app-idp-table>
        </app-card>
    </ng-template>

    <cnsl-links *ngIf="nextLinks" [links]="nextLinks"></cnsl-links>

</app-detail-layout>