andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-07 22:55:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console-v2): app detail layout, create layout stepper (#3680)

Browse Source 
* app detail

* app-detail layout

* app layout, create layout component, cleanup

* lint
This commit is contained in:
Max Peintner
2022-05-23 08:43:03 +02:00
committed by GitHub
parent 32ccada7a9
commit 6ec3c56883
56 changed files with 1897 additions and 1906 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/users/user-create-machine/user-create-machine.component.html
+45 -43
View File
@@ -1,45 +1,47 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="abort-container">
<a [routerLink]="[ '/users']" mat-icon-button>
<mat-icon>close</mat-icon>
</a>
<h1 class="abort">{{ 'USER.CREATE.TITLE' | translate }}</h1><span class="abort-2">Step
1 of 1</span>
</div>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<cnsl-create-layout
title="{{ 'USER.CREATE.TITLE' | translate }}"
[createSteps]="1"
[currentCreateStep]="1"
(closed)="close()"
>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<div class="machine-create-main-content">
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="machine-create-form">
<div class="machine-create-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="name" required />
<span cnslError *ngIf="name?.invalid && name?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>
<input cnslInput formControlName="description" />
</cnsl-form-field>
</div>
<div class="machine-btn-container">
<button color="primary" [attr.data-e2e]="'create-button'" [disabled]="userForm.invalid" type="submit"
mat-raised-button>{{ 'ACTIONS.CREATE' |
translate }}</button>
</div>
</form>
</div>
<div class="machine-create-main-content">
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="machine-create-form">
<div class="machine-create-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="name" required />
<span cnslError *ngIf="name?.invalid && name?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>
<input cnslInput formControlName="description" />
</cnsl-form-field>
</div>
<div class="machine-btn-container">
<button
color="primary"
[attr.data-e2e]="'create-button'"
[disabled]="userForm.invalid"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
</div>
</form>
</div>
</div>
</cnsl-create-layout>
console/src/app/pages/users/user-create-machine/user-create-machine.component.scss
-18
View File
@@ -1,22 +1,4 @@
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
.machine-create-main-content {
padding-left: 4.5rem;
max-width: 35rem;
.machine-create-form {
console/src/app/pages/users/user-create-machine/user-create-machine.component.ts
+6
View File
@@ -1,3 +1,4 @@
import { Location } from '@angular/common';
import { Component, OnDestroy } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@@ -24,6 +25,7 @@ export class UserCreateMachineComponent implements OnDestroy {
private toast: ToastService,
public userService: ManagementService,
private fb: FormBuilder,
private _location: Location,
breadcrumbService: BreadcrumbService,
) {
breadcrumbService.setBreadcrumb([
@@ -73,6 +75,10 @@ export class UserCreateMachineComponent implements OnDestroy {
this.sub.unsubscribe();
}
public close(): void {
this._location.back();
}
public get name(): AbstractControl | null {
return this.userForm.get('name');
}
console/src/app/pages/users/user-create-machine/user-create-machine.module.ts
+20 -20
View File
@@ -9,31 +9,31 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { UserCreateMachineRoutingModule } from './user-create-machine-routing.module';
import { UserCreateMachineComponent } from './user-create-machine.component';
@NgModule({
declarations: [UserCreateMachineComponent],
imports: [
UserCreateMachineRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
MatSelectModule,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatCheckboxModule,
MatTooltipModule,
TranslateModule,
DetailLayoutModule,
InputModule,
],
declarations: [UserCreateMachineComponent],
imports: [
UserCreateMachineRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
CreateLayoutModule,
MatSelectModule,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatCheckboxModule,
MatTooltipModule,
TranslateModule,
DetailLayoutModule,
InputModule,
],
})
export class UserCreateMachineModule { }
export class UserCreateMachineModule {}