fix(console): org create missing module, layout (#2870)

* fix: org create module

* rm comment

console/src/app/app-routing.module.ts

@@ -63,6 +63,15 @@ const routes: Routes = [
       roles: ['iam.read', 'iam.write'],
     },
   },
+  {
+    path: 'org/create',
+    component: OrgCreateComponent,
+    canActivate: [AuthGuard, RoleGuard],
+    data: {
+      roles: ['(org.create)?(iam.write)?'],
+    },
+    loadChildren: () => import('./pages/org-create/org-create.module').then((m) => m.OrgCreateModule),
+  },
   {
     path: 'org',
     loadChildren: () => import('./pages/orgs/orgs.module').then((m) => m.OrgsModule),
@@ -71,15 +80,6 @@ const routes: Routes = [
       roles: ['org.read'],
     },
   },
-  {
-    path: 'org/create',
-    component: OrgCreateComponent,
-    canActivate: [RoleGuard],
-    data: {
-      roles: ['(org.create)?(iam.write)?'],
-    },
-    loadChildren: () => import('./pages/org-create/org-create.module').then((m) => m.OrgCreateModule),
-  },
   {
     path: 'actions',
     loadChildren: () => import('./pages/actions/actions.module').then((m) => m.ActionsModule),

console/src/app/app.module.ts

@@ -11,6 +11,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -130,6 +131,7 @@ const authConfig: AuthConfig = {
     MatSnackBarModule,
     AvatarModule,
     WarnDialogModule,
+    MatSelectModule,
     MatDialogModule,
     RegExpPipeModule,
     OnboardingModule,

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

@@ -3,12 +3,14 @@
     <button (click)="close()" mat-icon-button>
       <mat-icon>close</mat-icon>
     </button>
+    <span class="abort">{{ 'ORG.PAGES.CREATE' | translate }}</span>
+    <span class="abort-2">Step {{ currentCreateStep }} of {{ createSteps }}</span>
   </div>
 
   <ng-template cnslHasRole [hasRole]="['iam.write']">
     <mat-slide-toggle [disabled]="currentCreateStep !== 1" class="example-margin" color="primary"
       (change)="changeSelf($event)" [(ngModel)]="forSelf">
-            Use your personal account as organisation owner
+      {{'ORG.PAGES.USERSELFACCOUNT' | translate}}
     </mat-slide-toggle>
 
     <ng-container *ngIf="!forSelf">
@@ -29,9 +31,9 @@
 
           <div class="btn-container">
             <span class="fill-space"></span>
-                        <button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button"
+            <button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button" cdkFocusInitial
-                            cdkFocusInitial type="submit">
+              type="submit">
-                            {{'CONTINUE' | translate}}
+              {{'ACTIONS.CONTINUE' | translate}}
             </button>
           </div>
         </form>
@@ -99,29 +101,27 @@
                   <mat-option *ngFor="let language of languages" [value]="language">
                     {{ 'LANGUAGES.'+language | translate }}
                   </mat-option>
-                                    <span cnslError
+                  <span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
-                                        *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
                     {{ 'USER.VALIDATION.REQUIRED' | translate }}
                   </span>
                 </mat-select>
               </cnsl-form-field>
 
-                            <mat-checkbox class="checkbox" [(ngModel)]="usePassword"
+              <mat-checkbox class="checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{standalone: true}"
-                                [ngModelOptions]="{standalone: true}" (change)="initPwdValidators()">
+                (change)="initPwdValidators()">
                 {{'ORG.PAGES.USEPASSWORD' | translate}}</mat-checkbox>
 
               <ng-container *ngIf="usePassword && pwdForm">
                 <p class="section">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>
 
-                                <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy"
+                <cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
-                                    [password]="password">
                 </cnsl-password-complexity-view>
 
                 <form [formGroup]="pwdForm" class="pwd-form">
                   <cnsl-form-field class="pwd" *ngIf="password" appearance="outline">
                     <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
-                                        <input cnslInput autocomplete="off" name="firstpassword"
+                    <input cnslInput autocomplete="off" name="firstpassword" formControlName="password"
-                                            formControlName="password" type="password" />
+                      type="password" />
 
                     <span cnslError *ngIf="password?.errors?.required">
                       {{ 'USER.VALIDATION.REQUIRED' | translate }}
@@ -130,8 +130,8 @@
                   </cnsl-form-field>
                   <cnsl-form-field class="pwd" *ngIf="confirmPassword" appearance="outline">
                     <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
-                                        <input cnslInput autocomplete="off" name="confirmPassword"
+                    <input cnslInput autocomplete="off" name="confirmPassword" formControlName="confirmPassword"
-                                            formControlName="confirmPassword" type="password" />
+                      type="password" />
 
                     <span cnslError *ngIf="confirmPassword?.errors?.required">
                       {{ 'USER.VALIDATION.REQUIRED' | translate }}
@@ -144,8 +144,8 @@
               </ng-container>
             </div>
             <div class="btn-container">
-                            <button color="primary" class="small-button" type="button" (click)="previous()"
+              <button color="primary" class="small-button" type="button" (click)="previous()" mat-stroked-button>{{
-                                mat-stroked-button>{{ 'ACTIONS.BACK' | translate }}</button>
+                'ACTIONS.BACK' | translate }}</button>
               <span class="fill-space"></span>
               <button color="primary" class="big-button" (click)="finish()"
                 [disabled]="orgForm.invalid || userForm.invalid || ((usePassword && pwdForm) ? pwdForm?.invalid : false)"
@@ -171,8 +171,8 @@
 
           <div class="btn-container">
             <span class="fill-space"></span>
-                        <button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button"
+            <button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button" cdkFocusInitial
-                            cdkFocusInitial type="submit">
+              type="submit">
               {{'CREATE' | translate}}
             </button>
           </div>

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

@@ -44,9 +44,7 @@ function passwordConfirmValidator(c: AbstractControl): any {
         style({ height: '0', opacity: 0 }),
         animate('150ms ease-in-out', style({ height: '*', opacity: 1 })),
       ]),
-      transition(':leave', [
+      transition(':leave', [animate('150ms ease-in-out', style({ height: '0', opacity: 0 }))]),
-        animate('150ms ease-in-out', style({ height: '0', opacity: 0 })),
-      ]),
     ]),
   ],
 })
@@ -72,7 +70,10 @@ export class OrgCreateComponent {
     private mgmtService: ManagementService,
     private authService: GrpcAuthService,
   ) {
-    this.authService.isAllowed(['iam.write']).pipe(take(1)).subscribe((allowed) => {
+    this.authService
+      .isAllowed(['iam.write'])
+      .pipe(take(1))
+      .subscribe((allowed) => {
         if (allowed) {
           this.forSelf = false;
         }
@@ -123,7 +124,7 @@ export class OrgCreateComponent {
         //     this.router.navigate(['/org', 'overview']);
         // }
       })
-      .catch(error => {
+      .catch((error) => {
         this.toast.showError(error);
       });
   }
@@ -152,7 +153,7 @@ export class OrgCreateComponent {
     const validators: Validators[] = [Validators.required];
 
     if (this.usePassword) {
-      this.mgmtService.getDefaultPasswordComplexityPolicy().then(data => {
+      this.mgmtService.getDefaultPasswordComplexityPolicy().then((data) => {
         if (data.policy) {
           this.policy = data.policy;
 
@@ -195,7 +196,6 @@ export class OrgCreateComponent {
       this.orgForm = this.fb.group({
         name: ['', [Validators.required]],
       });
-
     } else {
       this.createSteps = 2;
 
@@ -208,14 +208,12 @@ export class OrgCreateComponent {
 
   public createOrgForSelf(): void {
     if (this.name && this.name.value) {
-      this.mgmtService.addOrg(this.name.value).then(() => {
+      this.mgmtService
+        .addOrg(this.name.value)
+        .then(() => {
           this.router.navigate(['/org/overview']);
-        // const newOrg = org.toObject();
+        })
-        // setTimeout(() => {
+        .catch((error) => {
-        //     this.authService.setActiveOrg(newOrg);
-        //     this.router.navigate(['/org']);
-        // }, 1000);
-      }).catch(error => {
           this.toast.showError(error);
         });
     }

console/src/assets/i18n/de.json

@@ -641,6 +641,7 @@
       "LISTDESCRIPTION": "Wähle eine Organisation aus.",
       "ACTIVE": "Aktiv",
       "CREATE": "Organisation erstellen",
+      "USERSELFACCOUNT": "Verwenden Sie Ihr persönliches Konto als Organisationsinhaber",
       "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",

console/src/assets/i18n/en.json

@@ -641,6 +641,7 @@
       "LISTDESCRIPTION": "Choose an organisation.",
       "ACTIVE": "Active",
       "CREATE": "Create Organisation",
+      "USERSELFACCOUNT": "Use your personal account as organisation owner",
       "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",

console/src/assets/i18n/it.json

@@ -641,6 +641,7 @@
       "LISTDESCRIPTION": "Scegli un'organizzazione.",
       "ACTIVE": "Attivo",
       "CREATE": "Creare un'organizzazione",
+      "USERSELFACCOUNT": "Usa il tuo account personale come proprietario dell'organizzazione",
       "ORGDETAIL_TITLE": "Inserisci il nome e il dominio della tua nuova organizzazione.",
       "ORGDETAIL_TITLE_WITHOUT_DOMAIN": "Inserisci il nome della tua nuova organizzazione.",
       "ORGDETAILUSER_TITLE": "Configurare il proprietario dell'organizzazione",