zitadel/console/src/app/modules/features/features.component.html

<app-detail-layout [backRouterLink]="[ serviceType === FeatureServiceType.ADMIN ? '/iam/policies' : '/org']"
    [title]="('FEATURES.TITLE' | translate)" [description]="'FEATURES.DESCRIPTION' | translate">

    <h2>{{'FEATURES.TIER.TITLE' | translate}}</h2>
    <p *ngIf="serviceType === FeatureServiceType.MGMT" class="tier-desc">{{'FEATURES.TIER.DESCRIPTION' | translate}}
        {{'FEATURES.TIER.QUESTIONS' | translate}} <a href="mailto:[email protected]">[email protected]</a>.</p>

    <div class="detail">
        <p class="title">{{'FEATURES.TIER.NAME' | translate}}</p>
        <p class="center">{{features?.tier?.name}}
          <a class="ext" href="https://zitadel.ch/pricing"
          target="_blank">
            <i class="las la-external-link-alt"></i>
          </a>
        </p>
    </div>

    <ng-container *ngIf="serviceType === FeatureServiceType.MGMT">
        <mat-spinner class="spinner" diameter="20" *ngIf="customerLoading || stripeLoading"></mat-spinner>
        <div class="detail" *ngIf="stripeCustomer || stripeCustomer == null">
            <p class="title">{{'FEATURES.TIER.DETAILS' | translate}}
                <a (click)="setCustomer()">{{'ACTIONS.EDIT' | translate}}</a>
            </p>
            <p>{{stripeCustomer?.contact}}</p>
            <p *ngIf="stripeCustomer?.company">{{stripeCustomer?.company}}</p>
            <p>{{stripeCustomer?.address}}</p>
            <p *ngIf="stripeCustomer?.postal_code || stripeCustomer?.city || stripeCustomer?.country">
                {{stripeCustomer?.postal_code}} {{stripeCustomer?.city}} {{stripeCustomer?.country}}
                <img *ngIf="customerCountry" height="20px" width="30px"
                    style="margin-right: 1rem; border-radius: 2px; vertical-align: middle;"
                    src="../../../assets/flags/{{customerCountry.isoCode.toLowerCase()}}.png" />
            </p>
        </div>

        <p class="error" *ngIf="(stripeCustomer || stripeCustomer == null) && !customerValid">{{'FEATURES.TIER.CUSTOMERINVALID' | translate}}</p>

        <div class="current-tier">
            <a color="primary" [disabled]="!org.id || !customerValid || !stripeURL" mat-raised-button [href]="stripeURL" target="_blank"
                alt="change tier">{{'FEATURES.TIER.BTN' | translate}}</a>
        </div>
    </ng-container>

    <ng-template appHasRole [appHasRole]="['iam.features.delete']">
        <button *ngIf="serviceType === FeatureServiceType.MGMT && !isDefault"
            matTooltip="{{'POLICY.RESET' | translate}}" color="warn" (click)="resetFeatures()" mat-stroked-button>
            {{'POLICY.RESET' | translate}}
        </button>
    </ng-template>

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

    <p class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</p>
    <div class="content" *ngIf="features">
        <div class="row">
          <span class="left-desc">{{'FEATURES.DATA.AUDITLOGRETENTION' | translate}}</span>
          <span class="fill-space"></span>
          <span>{{features.auditLogRetention | timestampToRetention }} {{'FEATURES.RETENTIONDAYS' |
              translate}}</span>
        </div>

        <br/>

        <div class="row">
          <i class="icon las la-sign-in-alt"></i>
          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYUSERNAMELOGIN' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
              [(ngModel)]="features.loginPolicyUsernameLogin"
              [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <div class="row">
          <i class="icon las la-sign-in-alt"></i>
          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYPASSWORDRESET' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
                            [(ngModel)]="features.loginPolicyPasswordReset"
                            [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <div class="row">
          <i class="icon las la-sign-in-alt"></i>
          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYREGISTRATION' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
              [(ngModel)]="features.loginPolicyRegistration"
              [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <div class="row">
          <i class="icon las la-sign-in-alt"></i>
          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYIDP' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.loginPolicyIdp"
              [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <div class="row">
          <i class="icon las la-sign-in-alt"></i>
          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYFACTORS' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
              [(ngModel)]="features.loginPolicyFactors"
              [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <div class="row">
          <i class="icon las la-sign-in-alt"></i>
          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYPASSWORDLESS' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
              [(ngModel)]="features.loginPolicyPasswordless"
              [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <br/>

        <div class="row">
          <mat-icon class="icon" svgIcon="mdi_textbox_password"></mat-icon>

          <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYCOMPLEXITYPOLICY' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
              [(ngModel)]="features.passwordComplexityPolicy"
              [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <br/>

        <div class="row">
          <i class="icon las la-swatchbook"></i>
          <span class="left-desc">{{'FEATURES.DATA.LABELPOLICYPRIVATELABEL' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyPrivateLabel"
              [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <div class="row">
          <i class="icon las la-swatchbook"></i>
          <span class="left-desc">{{'FEATURES.DATA.LABELPOLICYWATERMARK' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.labelPolicyWatermark"
              [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <br/>

        <div class="row">
          <i class="icon las la-gem"></i>
          <span class="left-desc">{{'FEATURES.DATA.CUSTOMDOMAIN' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customDomain"
              [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <div class="row">
          <i class="icon las la-file-contract"></i>
          <span class="left-desc">{{'FEATURES.DATA.PRIVACYPOLICY' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.privacyPolicy"
                            [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>

        <div class="row">
          <i class="icon las la-paragraph"></i>
          <span class="left-desc">{{'FEATURES.DATA.CUSTOMTEXT' | translate}}</span>
          <span class="fill-space"></span>
          <mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="features.customText"
                            [disabled]="(['iam.features.write'] | hasRole | async) == false">
          </mat-slide-toggle>
        </div>
    </div>

    <div class="btn-container" *ngIf="(['iam.features.write'] | hasRole | async) == true">
        <button (click)="savePolicy()" color="primary"
            type="submit" mat-raised-button>{{ 'ACTIONS.SAVE' | translate
            }}</button>
    </div>
</app-detail-layout>