feat(console): set email verified on org creation, disable svg upload, password page optimizations (#4149)

* feat: set email verified on org creation

* catch svg files and throw error

* password changes

* passwordpage

* rm log

* it

* fr

* localhost env

* Update fr.json

Co-authored-by: Fabi <[email protected]>
Co-authored-by: Livio Spring <[email protected]>

console/src/app/pages/org-create/org-create.component.html

@@ -115,14 +115,23 @@
                   </mat-select>
                 </cnsl-form-field>
 
-                <mat-checkbox
-                  class="checkbox"
-                  [(ngModel)]="usePassword"
-                  [ngModelOptions]="{ standalone: true }"
-                  (change)="initPwdValidators()"
-                >
-                  {{ 'ORG.PAGES.USEPASSWORD' | translate }}</mat-checkbox
-                >
+                <div class="email-is-verified">
+                  <mat-checkbox class="block-checkbox" formControlName="isVerified">
+                    {{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
+                  </mat-checkbox>
+
+                  <mat-checkbox
+                    class="block-checkbox"
+                    [(ngModel)]="usePassword"
+                    [ngModelOptions]="{ standalone: true }"
+                    (change)="initPwdValidators()"
+                  >
+                    {{ 'ORG.PAGES.USEPASSWORD' | translate }}</mat-checkbox
+                  >
+                  <cnsl-info-section class="full-width desc">
+                    <span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
+                  </cnsl-info-section>
+                </div>
 
                 <ng-container *ngIf="usePassword && pwdForm">
                   <p class="section cnsl-secondary-text">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>

console/src/app/pages/org-create/org-create.component.scss

@@ -58,6 +58,16 @@ h1 {
           flex: 1 0 33%;
           margin: 0 0.5rem;
         }
+
+        .email-is-verified {
+          flex-basis: 100%;
+          margin: 1.5rem 0.5rem 0 0.5rem;
+
+          .block-checkbox {
+            display: block;
+            margin: 0.25rem 0;
+          }
+        }
       }
 
       .pwd-form {
@@ -109,11 +119,6 @@ h1 {
     }
   }
 
-  .checkbox {
-    flex-basis: 100%;
-    margin: 0.5rem;
-  }
-
   .complexity-view {
     width: 100%;
     margin: 0 0.5rem;

console/src/app/pages/org-create/org-create.component.ts

@@ -10,6 +10,7 @@ import { SetUpOrgRequest } from 'src/app/proto/generated/zitadel/admin_pb';
 import { PasswordComplexityPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
 import { Gender } from 'src/app/proto/generated/zitadel/user_pb';
 import { AdminService } from 'src/app/services/admin.service';
+import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -69,7 +70,16 @@ export class OrgCreateComponent {
     private fb: UntypedFormBuilder,
     private mgmtService: ManagementService,
     private authService: GrpcAuthService,
+    private breadcrumbService: BreadcrumbService,
   ) {
+    const instanceBread = new Breadcrumb({
+      type: BreadcrumbType.INSTANCE,
+      name: 'Instance',
+      routerLink: ['/instance'],
+    });
+
+    breadcrumbService.setBreadcrumb([instanceBread]);
+
     this.authService
       .isAllowed(['iam.write'])
       .pipe(take(1))
@@ -96,7 +106,9 @@ export class OrgCreateComponent {
     createOrgRequest.setDomain(this.domain?.value);
 
     const humanRequest: SetUpOrgRequest.Human = new SetUpOrgRequest.Human();
-    humanRequest.setEmail(new SetUpOrgRequest.Human.Email().setEmail(this.email?.value));
+    humanRequest.setEmail(
+      new SetUpOrgRequest.Human.Email().setEmail(this.email?.value).setIsEmailVerified(this.isVerified?.value),
+    );
     humanRequest.setUserName(this.userName?.value);
 
     const profile: SetUpOrgRequest.Human.Profile = new SetUpOrgRequest.Human.Profile();
@@ -143,6 +155,7 @@ export class OrgCreateComponent {
       firstName: ['', [Validators.required]],
       lastName: ['', [Validators.required]],
       email: ['', [Validators.required]],
+      isVerified: [false, []],
       gender: [''],
       nickName: [''],
       preferredLanguage: [''],
@@ -243,6 +256,10 @@ export class OrgCreateComponent {
     return this.userForm.get('email');
   }
 
+  public get isVerified(): AbstractControl | null {
+    return this.userForm.get('isVerified');
+  }
+
   public get nickName(): AbstractControl | null {
     return this.userForm.get('nickName');
   }

console/src/app/pages/org-create/org-create.module.ts

@@ -9,6 +9,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
+import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
 import { InputModule } from 'src/app/modules/input/input.module';
 import { PasswordComplexityViewModule } from 'src/app/modules/password-complexity-view/password-complexity-view.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -23,6 +24,7 @@ import { OrgCreateComponent } from './org-create.component';
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
+    InfoSectionModule,
     InputModule,
     MatButtonModule,
     MatIconModule,