feat(console): custom domain (#1624)

* fix: custom domain

* rem logs

* Update console/src/assets/i18n/de.json

* Update console/src/assets/i18n/en.json

Co-authored-by: Livio Amstutz <livio.a@gmail.com>

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

@@ -112,6 +112,14 @@
                 [disabled]="(['iam.features.write'] | hasRole | async) == false">
             </mat-slide-toggle>
         </div>
+
+        <div class="row">
+          <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>
 
     <div class="btn-container">

console/src/app/modules/features/features.component.ts

@@ -158,6 +158,7 @@ export class FeaturesComponent implements OnDestroy {
         req.setLoginPolicyPasswordless(this.features.loginPolicyPasswordless);
         req.setPasswordComplexityPolicy(this.features.passwordComplexityPolicy);
         req.setLabelPolicy(this.features.labelPolicy);
+        req.setCustomDomain(this.features.customDomain);
 
         this.adminService.setOrgFeatures(req).then(() => {
           this.toast.showInfo('POLICY.TOAST.SET', true);
@@ -175,6 +176,7 @@ export class FeaturesComponent implements OnDestroy {
         dreq.setLoginPolicyPasswordless(this.features.loginPolicyPasswordless);
         dreq.setPasswordComplexityPolicy(this.features.passwordComplexityPolicy);
         dreq.setLabelPolicy(this.features.labelPolicy);
+        dreq.setCustomDomain(this.features.customDomain);
 
         this.adminService.setDefaultFeatures(dreq).then(() => {
           this.toast.showInfo('POLICY.TOAST.SET', true);

console/src/app/pages/orgs/org-detail/org-detail.component.html

@@ -11,8 +11,12 @@
                 </button>
 
                 <div *ngFor="let domain of domains" class="domain">
-                    <span *ngIf="canwrite$ | async" (click)="verifyDomain(domain)"
+                    <span *ngIf="(canwrite$ | async) && (['custom_domain'] | hasFeature | async); else noCustom" (click)="verifyDomain(domain)"
                         class="title">{{domain.domainName}}</span>
+
+                    <ng-template #noCustom>
+                      <span class="title disabled">{{domain.domainName}}</span>
+                    </ng-template>
                     <span *ngIf="(canwrite$ | async) == false" class="title disabled">{{domain?.domainName}}</span>
 
                     <i matTooltip="verified" *ngIf="domain.isVerified" class="verified las la-check-circle"></i>
@@ -26,7 +30,12 @@
                             class="las la-trash"></i></button>
                 </div>
                 <p class="new-desc">{{'ORG.PAGES.ORGDOMAIN.VERIFICATION' | translate}}</p>
-                <button [disabled]="(canwrite$ | async) == false" matTooltip="Add domain" mat-raised-button
+
+                <cnsl-info-section type="WARN" *ngIf="(['custom_domain'] | hasFeature | async) == false" class="custom-domain-deactivated">
+                    {{'ORG.PAGES.CUSTOMDOMAINFEATUREMISSING' | translate}}
+                </cnsl-info-section>
+            
+                <button [disabled]="(canwrite$ | async) == false || (['custom_domain'] | hasFeature | async) == false" matTooltip="Add domain" mat-raised-button
                     color="primary" (click)="addNewDomain()">{{'ORG.DOMAINS.NEW' | translate}}
                 </button>
             </app-card>

console/src/app/pages/orgs/org-detail/org-detail.component.scss

@@ -71,11 +71,11 @@ h2 {
   .title {
     font-size: 16px;
     margin-right: 1rem;
-    cursor: pointer;
 
     &:not(.disabled) {
       &:hover {
         text-decoration: underline;
+        cursor: pointer;
       }
     }
   }
@@ -119,3 +119,7 @@ h2 {
   font-size: 14px;
   color: #818a8a;
 }
+
+.custom-domain-deactivated {
+  margin-bottom: 1rem;
+}

console/src/app/pages/orgs/org-detail/org-detail.component.ts

@@ -52,9 +52,7 @@ export class OrgDetailComponent implements OnInit {
     public mgmtService: ManagementService,
     private toast: ToastService,
     private router: Router,
-    ) {
+  ) { }
-
-    }
 
   public ngOnInit(): void {
     this.getData();

console/src/app/pages/orgs/orgs.module.ts

@@ -16,11 +16,13 @@ import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/memb
 import { CardModule } from 'src/app/modules/card/card.module';
 import { ContributorsModule } from 'src/app/modules/contributors/contributors.module';
 import { FeaturesModule } from 'src/app/modules/features/features.module';
+import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { PolicyGridModule } from 'src/app/modules/policy-grid/policy-grid.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
+import { HasFeaturePipeModule } from 'src/app/pipes/has-feature-pipe/has-feature-pipe.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 
 import { ChangesModule } from '../../modules/changes/changes.module';
@@ -38,6 +40,7 @@ import { OrgsRoutingModule } from './orgs-routing.module';
     FormsModule,
     HasRoleModule,
     InputModule,
+    InfoSectionModule,
     MatButtonModule,
     MatDialogModule,
     CardModule,
@@ -49,6 +52,7 @@ import { OrgsRoutingModule } from './orgs-routing.module';
     MatTooltipModule,
     WarnDialogModule,
     MemberCreateDialogModule,
+    HasFeaturePipeModule,
     MatMenuModule,
     ChangesModule,
     MatProgressSpinnerModule,

console/src/assets/environment.json

@@ -1,8 +1,8 @@
 {
-    "authServiceUrl": "https://api.zitadel.io",
+  "authServiceUrl": "https://api.zitadel.dev",
-    "mgmtServiceUrl": "https://api.zitadel.io",
+  "mgmtServiceUrl": "https://api.zitadel.dev",
-    "adminServiceUrl":"https://api.zitadel.io",
+  "adminServiceUrl":"https://api.zitadel.dev",
-    "subscriptionServiceUrl":"https://sub.zitadel.io",
+  "subscriptionServiceUrl":"https://sub.zitadel.dev",
-    "issuer": "https://issuer.zitadel.io",
+  "issuer": "https://issuer.zitadel.dev",
-    "clientid": "69234247558357051@zitadel"
+  "clientid": "70669160379706195@zitadel"
 }

console/src/assets/i18n/de.json

@@ -525,6 +525,7 @@
       "ORGDETAIL_TITLE": "Gebe den Namen und die Domain für die neue Organisation ein.",
       "ORGDETAIL_TITLE_WITHOUT_DOMAIN": "Geben Sie den Namen der neuen Organisation ein.",
       "ORGDETAILUSER_TITLE": "Organisationsbesitzer hinzufügen",
+      "CUSTOMDOMAINFEATUREMISSING":"Das Feature custom-domain ist auf Ihrer Organisation nicht freigeschaltet!",
       "ORGDOMAIN": {
         "TITLE": "Verifikation der Domain der Organisation",
         "VERIFICATION": "Überprüfe den Besitz Deiner Domain, indem Du eine Bestätigungsdatei herunterlädst und unter der angegebenen URL speicherst, oder indem Du sie mit einem DNS-Eintrag verifizierst.",
@@ -609,7 +610,8 @@
       "LOGINPOLICYFACTORS": "Login Richtlinie: Mltifaktoren - benutzerdefiniert",
       "LOGINPOLICYPASSWORDLESS": "Login Richtlinie: Passwortlose Authentifizierung - benutzerdefiniert",
       "LOGINPOLICYCOMPLEXITYPOLICY": "Passwortkomplexitäts Richtlinie - benutzerdefiniert",
-      "LABELPOLICY": "Label Richtlinie - benutzerdefiniert"
+      "LABELPOLICY": "Label Richtlinie - benutzerdefiniert",
+      "CUSTOMDOMAIN": "Domänen Verifikation - verfügbar" 
     },
     "TIERSTATES": {
       "0": "Aktiv",

console/src/assets/i18n/en.json

@@ -525,6 +525,7 @@
       "ORGDETAIL_TITLE": "Enter the name and domain of your new organisation.",
       "ORGDETAIL_TITLE_WITHOUT_DOMAIN": "Enter the name of your new organisation.",
       "ORGDETAILUSER_TITLE": "Configure Organisation Owner",
+      "CUSTOMDOMAINFEATUREMISSING":"The Feature custom-domain is not active on your organization!",
       "ORGDOMAIN": {
         "TITLE": "Organisation Domain Ownership Verification",
         "VERIFICATION": "Verify the ownership of your domain. You need to download a verification file and upload it at the provided URL listed below, or place a TXT Record DNS entry for the provided URL. To complete, click the button to verify.",
@@ -609,7 +610,8 @@
       "LOGINPOLICYFACTORS": "Login Policy: Multifactors - custom",
       "LOGINPOLICYPASSWORDLESS": "Login Policy: Passwordless Authentication - custom",
       "LOGINPOLICYCOMPLEXITYPOLICY": "Password Complexity Policy - custom",
-      "LABELPOLICY": "Labeling Policy - custom"
+      "LABELPOLICY": "Labeling Policy - custom",
+      "CUSTOMDOMAIN": "Domain Verification - available"
     },
     "TIERSTATES": {
       "0": "Active",