TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-01-06 13:27:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* fix: org create module

* rm comment
This commit is contained in:
Max Peintner 2021-12-20 10:56:03 +01:00 committed by GitHub
parent 278a278a5b
commit db355facee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 226 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
console/src/app/app-routing.module.ts
View File

@ -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),

2
console/src/app/app.module.ts
View File

@ -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,

350
console/src/app/pages/org-create/org-create.component.html
View File

@ -1,183 +1,183 @@
<div class="max-width-container container">
<div class="abort-container">
<button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
</div>
<div class="abort-container">
<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
</mat-slide-toggle>
<ng-template cnslHasRole [hasRole]="['iam.write']">
<mat-slide-toggle [disabled]="currentCreateStep !== 1" class="example-margin" color="primary"
(change)="changeSelf($event)" [(ngModel)]="forSelf">
{{'ORG.PAGES.USERSELFACCOUNT' | translate}}
</mat-slide-toggle>
<ng-container *ngIf="!forSelf">
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{'ORG.PAGES.ORGDETAIL_TITLE' | translate}} </h1>
<ng-container *ngIf="!forSelf">
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{'ORG.PAGES.ORGDETAIL_TITLE' | translate}} </h1>
<form [formGroup]="orgForm" (ngSubmit)="next()">
<div class="content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.DOMAIN' | translate }}</cnsl-label>
<input cnslInput formControlName="domain" />
</cnsl-form-field>
</div>
<form [formGroup]="orgForm" (ngSubmit)="next()">
<div class="content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.DOMAIN' | translate }}</cnsl-label>
<input cnslInput formControlName="domain" />
</cnsl-form-field>
</div>
<div class="btn-container">
<span class="fill-space"></span>
<button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button"
cdkFocusInitial type="submit">
{{'CONTINUE' | translate}}
</button>
</div>
<div class="btn-container">
<span class="fill-space"></span>
<button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button" cdkFocusInitial
type="submit">
{{'ACTIONS.CONTINUE' | translate}}
</button>
</div>
</form>
</ng-container>
<ng-container *ngIf="currentCreateStep === createSteps">
<h1>{{'ORG.PAGES.ORGDETAILUSER_TITLE' | translate}}</h1>
<div class="user">
<form [formGroup]="userForm" class="form">
<div class="content">
<p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
<input cnslInput formControlName="email" required />
<span cnslError *ngIf="email?.invalid && email?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="firstName" required />
<span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="lastName" required />
<span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="nickName" />
<span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<p class="section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
<mat-select formControlName="gender">
<mat-option *ngFor="let gender of genders" [value]="gender">
{{ 'GENDERS.'+gender | translate }}
</mat-option>
</mat-select>
<span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
<mat-select formControlName="preferredLanguage">
<mat-option *ngFor="let language of languages" [value]="language">
{{ 'LANGUAGES.'+language | translate }}
</mat-option>
<span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</mat-select>
</cnsl-form-field>
<mat-checkbox class="checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{standalone: true}"
(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" [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" formControlName="password"
type="password" />
<span cnslError *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</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" formControlName="confirmPassword"
type="password" />
<span cnslError *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</form>
</ng-container>
<ng-container *ngIf="currentCreateStep === createSteps">
<h1>{{'ORG.PAGES.ORGDETAILUSER_TITLE' | translate}}</h1>
<div class="user">
<form [formGroup]="userForm" class="form">
<div class="content">
<p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
<input cnslInput formControlName="email" required />
<span cnslError *ngIf="email?.invalid && email?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="firstName" required />
<span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="lastName" required />
<span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="nickName" />
<span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<p class="section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
<mat-select formControlName="gender">
<mat-option *ngFor="let gender of genders" [value]="gender">
{{ 'GENDERS.'+gender | translate }}
</mat-option>
</mat-select>
<span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
<mat-select formControlName="preferredLanguage">
<mat-option *ngFor="let language of languages" [value]="language">
{{ 'LANGUAGES.'+language | translate }}
</mat-option>
<span cnslError
*ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</mat-select>
</cnsl-form-field>
<mat-checkbox class="checkbox" [(ngModel)]="usePassword"
[ngModelOptions]="{standalone: true}" (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"
[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"
formControlName="password" type="password" />
<span cnslError *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</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"
formControlName="confirmPassword" type="password" />
<span cnslError *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</form>
</ng-container>
</div>
<div class="btn-container">
<button color="primary" class="small-button" type="button" (click)="previous()"
mat-stroked-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)"
mat-raised-button>{{ 'ACTIONS.FINISH' | translate }}</button>
</div>
</form>
</div>
</ng-container>
</ng-container>
</ng-template>
<ng-template cnslHasRole [hasRole]="['org.create']">
<div *ngIf="forSelf">
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{'ORG.PAGES.ORGDETAIL_TITLE_WITHOUT_DOMAIN' | translate}} </h1>
<form [formGroup]="orgForm" (ngSubmit)="createOrgForSelf()">
<div class="content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
</div>
<div class="btn-container">
<span class="fill-space"></span>
<button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button"
cdkFocusInitial type="submit">
{{'CREATE' | translate}}
</button>
</div>
</form>
</ng-container>
</ng-container>
</div>
<div class="btn-container">
<button color="primary" class="small-button" type="button" (click)="previous()" mat-stroked-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)"
mat-raised-button>{{ 'ACTIONS.FINISH' | translate }}</button>
</div>
</form>
</div>
</ng-template>
</ng-container>
</ng-container>
</ng-template>
<ng-template cnslHasRole [hasRole]="['org.create']">
<div *ngIf="forSelf">
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{'ORG.PAGES.ORGDETAIL_TITLE_WITHOUT_DOMAIN' | translate}} </h1>
<form [formGroup]="orgForm" (ngSubmit)="createOrgForSelf()">
<div class="content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
</div>
<div class="btn-container">
<span class="fill-space"></span>
<button [disabled]="orgForm.invalid" color="primary" mat-raised-button class="big-button" cdkFocusInitial
type="submit">
{{'CREATE' | translate}}
</button>
</div>
</form>
</ng-container>
</div>
</ng-template>
</div>

40
console/src/app/pages/org-create/org-create.component.ts
View File

@ -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', [
animate('150ms ease-in-out', style({ height: '0', opacity: 0 })),
]),
transition(':leave', [animate('150ms ease-in-out', style({ height: '0', opacity: 0 }))]),
]),
],
})
@ -72,11 +70,14 @@ export class OrgCreateComponent {
private mgmtService: ManagementService,
private authService: GrpcAuthService,
) {
this.authService.isAllowed(['iam.write']).pipe(take(1)).subscribe((allowed) => {
if (allowed) {
this.forSelf = false;
}
});
this.authService
.isAllowed(['iam.write'])
.pipe(take(1))
.subscribe((allowed) => {
if (allowed) {
this.forSelf = false;
}
});
this.orgForm = this.fb.group({
name: ['', [Validators.required]],
@ -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,16 +208,14 @@ export class OrgCreateComponent {
public createOrgForSelf(): void {
if (this.name && this.name.value) {
this.mgmtService.addOrg(this.name.value).then(() => {
this.router.navigate(['/org/overview']);
// const newOrg = org.toObject();
// setTimeout(() => {
// this.authService.setActiveOrg(newOrg);
// this.router.navigate(['/org']);
// }, 1000);
}).catch(error => {
this.toast.showError(error);
});
this.mgmtService
.addOrg(this.name.value)
.then(() => {
this.router.navigate(['/org/overview']);
})
.catch((error) => {
this.toast.showError(error);
});
}
}

36
console/src/app/pages/org-create/org-create.module.ts
View File

@ -16,22 +16,22 @@ import { OrgCreateRoutingModule } from './org-create-routing.module';
import { OrgCreateComponent } from './org-create.component';
@NgModule({
declarations: [OrgCreateComponent],
imports: [
OrgCreateRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
InputModule,
MatButtonModule,
MatIconModule,
MatSelectModule,
HasRolePipeModule,
TranslateModule,
HasRoleModule,
MatCheckboxModule,
PasswordComplexityViewModule,
MatSlideToggleModule,
],
declarations: [OrgCreateComponent],
imports: [
OrgCreateRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
InputModule,
MatButtonModule,
MatIconModule,
MatSelectModule,
HasRolePipeModule,
TranslateModule,
HasRoleModule,
MatCheckboxModule,
PasswordComplexityViewModule,
MatSlideToggleModule,
],
})
export class OrgCreateModule { }
export class OrgCreateModule {}

1
console/src/assets/i18n/de.json
View File

@ -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",

1
console/src/assets/i18n/en.json
View File

@ -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",

1
console/src/assets/i18n/it.json
View File

@ -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",