feat(console): onboarding flow (#5225)

Implements an onboarding UI for users

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AppCreateComponent } from './app-create.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AppCreateComponent,
+    data: { animation: 'DetailPage' },
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AppCreateRoutingModule {}

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

@@ -0,0 +1,26 @@
+<cnsl-create-layout title="{{ 'APP.PAGES.CREATE' | translate }}" (closed)="close()">
+  <div class="app-create-main-content">
+    <h1>{{ 'APP.PAGES.CREATE_SELECT_PROJECT' | translate }}</h1>
+
+    <cnsl-search-project-autocomplete
+      class="block"
+      [autocompleteType]="ProjectAutocompleteType.PROJECT_OWNED"
+      (selectionChanged)="selectProject($any($event.project))"
+    >
+    </cnsl-search-project-autocomplete>
+
+    <div [innerHtml]="'APP.PAGES.CREATE_NEW_PROJECT' | translate : { url: '/projects/create' }"></div>
+
+    <div class="app-create-btn-container">
+      <button
+        color="primary"
+        mat-raised-button
+        class="continue-button"
+        [disabled]="!projectId"
+        (click)="goToAppCreatePage()"
+      >
+        {{ 'ACTIONS.CONTINUE' | translate }}
+      </button>
+    </div>
+  </div>
+</cnsl-create-layout>

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

@@ -0,0 +1,25 @@
+h1 {
+  font-weight: 500;
+}
+
+.app-create-main-content {
+  max-width: 35rem;
+
+  .app-create-btn-container {
+    display: flex;
+    align-items: center;
+    margin-top: 3rem;
+
+    .continue-button {
+      margin-top: 3rem;
+      display: block;
+      padding: 0.5rem 4rem;
+      border-radius: 0.5rem;
+    }
+  }
+
+  .complexity-view {
+    width: 100%;
+    margin: 0 0.5rem;
+  }
+}

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

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { OrgCreateComponent } from './org-create.component';
+
+describe('OrgCreateComponent', () => {
+  let component: OrgCreateComponent;
+  let fixture: ComponentFixture<OrgCreateComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [OrgCreateComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrgCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,45 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
+import { Router } from '@angular/router';
+import { take } from 'rxjs/operators';
+import { ProjectAutocompleteType } from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.component';
+import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
+import { SetUpOrgRequest } from 'src/app/proto/generated/zitadel/admin_pb';
+import { PasswordComplexityPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
+import { Project } from 'src/app/proto/generated/zitadel/project_pb';
+import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/breadcrumb.service';
+
+@Component({
+  selector: 'cnsl-app-create',
+  templateUrl: './app-create.component.html',
+  styleUrls: ['./app-create.component.scss'],
+})
+export class AppCreateComponent {
+  public projectId: string = '';
+  public ProjectAutocompleteType: any = ProjectAutocompleteType;
+
+  constructor(private router: Router, breadcrumbService: BreadcrumbService) {
+    const bread: Breadcrumb = {
+      type: BreadcrumbType.ORG,
+      routerLink: ['/org'],
+    };
+    breadcrumbService.setBreadcrumb([bread]);
+  }
+
+  public goToAppCreatePage(): void {
+    this.router.navigate(['/projects', this.projectId, 'apps', 'create']);
+  }
+
+  public close(): void {
+    window.history.back();
+  }
+
+  public selectProject(project: Project.AsObject): void {
+    if (project.id) {
+      this.projectId = project.id;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-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';
+
+import { SearchProjectAutocompleteModule } from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.module';
+import { AppCreateRoutingModule } from './app-create-routing.module';
+import { AppCreateComponent } from './app-create.component';
+
+@NgModule({
+  declarations: [AppCreateComponent],
+  imports: [
+    AppCreateRoutingModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    InfoSectionModule,
+    InputModule,
+    MatButtonModule,
+    MatIconModule,
+    SearchProjectAutocompleteModule,
+    MatSelectModule,
+    CreateLayoutModule,
+    HasRolePipeModule,
+    TranslateModule,
+    HasRoleModule,
+    MatCheckboxModule,
+    PasswordComplexityViewModule,
+    MatSlideToggleModule,
+  ],
+})
+export default class AppCreateModule {}