mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-04 21:32:15 +00:00
feat(console): pinned org list, project grant detail view, state change, i18n, domain dialog, policy refactor, theme fixes, refactor user and projects (#449)
* pinned organisations * project grant detail, state update, user-list pad * rm entry components * members nav, i18n, disable actions on non active * add org domain dialog * mv password policy rm to detail view * prefix pinned orgs for userid, fix collapsed pad * fix app back navigation * rem pwd required validator * fix org item overflow * routing * move users modules to users page * reorganize projects * remove child init of translate * hide same preferred loginname
This commit is contained in:
Max Peintner
+18
@@ -0,0 +1,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { ProjectRoleCreateComponent } from './project-role-create.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ProjectRoleCreateComponent,
|
||||
data: { animation: 'DetailPage' },
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class ProjectRoleCreateRoutingModule { }
|
||||
@@ -0,0 +1,44 @@
|
||||
<div class="container">
|
||||
<div class="abort-container">
|
||||
<button (click)="close()" mat-icon-button>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<span class="abort">{{ 'PROJECT.ROLE.ADDTITLE' | translate }}</span><span class="abort-2">Step
|
||||
{{ currentCreateStep }} of
|
||||
{{ createSteps }}</span>
|
||||
</div>
|
||||
|
||||
<h1>{{'PROJECT.ROLE.ADDDESCRIPTION' | translate}}</h1>
|
||||
<button class="add-line-btn" color="primary" mat-stroked-button (click)="addEntry()">
|
||||
Add another role
|
||||
</button>
|
||||
<form @list (ngSubmit)="addRole()">
|
||||
<div @animate *ngFor="let formGroup of formArray.controls; index as i" class="content">
|
||||
<ng-container [formGroup]="formGroup">
|
||||
<mat-form-field appearance="outline" class="formfield">
|
||||
<mat-label>{{ 'PROJECT.ROLE.KEY' | translate }}</mat-label>
|
||||
<input matInput formControlName="key" />
|
||||
<!-- <mat-error *ngIf="formGroup.get('key')?.errors?.required">{{'ERRORS.REQUIRED' | translate}}
|
||||
</mat-error> -->
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="formfield">
|
||||
<mat-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</mat-label>
|
||||
<input matInput formControlName="displayName" />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="formfield">
|
||||
<mat-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</mat-label>
|
||||
<input matInput formControlName="group" />
|
||||
</mat-form-field>
|
||||
<button mat-icon-button (click)="removeEntry(i)" color="warn"
|
||||
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
|
||||
<i class="las la-trash"></i>
|
||||
</button>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<button color="primary" mat-raised-button class="continue-button" [disabled]="formArray.invalid" cdkFocusInitial
|
||||
type="submit">
|
||||
{{ 'ACTIONS.SAVE' | translate }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,47 @@
|
||||
|
||||
.container {
|
||||
padding: 4rem 4rem 2rem 4rem;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.add-line-btn {
|
||||
margin-bottom: 1rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-right {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
margin: 0 -.5rem;
|
||||
flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
|
||||
mat-form-field {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.continue-button {
|
||||
margin-top: 3rem;
|
||||
display: block;
|
||||
padding: 0.5rem 4rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProjectRoleCreateComponent } from './project-role-create.component';
|
||||
|
||||
describe('ProjectRoleCreateComponent', () => {
|
||||
let component: ProjectRoleCreateComponent;
|
||||
let fixture: ComponentFixture<ProjectRoleCreateComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ProjectRoleCreateComponent],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ProjectRoleCreateComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,106 @@
|
||||
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
|
||||
import { Location } from '@angular/common';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { ActivatedRoute, Params, Router } from '@angular/router';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { ProjectRoleAdd } from 'src/app/proto/generated/management_pb';
|
||||
import { ProjectService } from 'src/app/services/project.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-project-role-create',
|
||||
templateUrl: './project-role-create.component.html',
|
||||
styleUrls: ['./project-role-create.component.scss'],
|
||||
animations: [
|
||||
trigger('list', [
|
||||
transition(':enter', [
|
||||
query('@animate',
|
||||
stagger(80, animateChild()),
|
||||
),
|
||||
]),
|
||||
]),
|
||||
trigger('animate', [
|
||||
transition(':enter', [
|
||||
style({ opacity: 0, transform: 'translateY(-100%)' }),
|
||||
animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })),
|
||||
]),
|
||||
transition(':leave', [
|
||||
style({ opacity: 1, transform: 'translateY(0)' }),
|
||||
animate('100ms', style({ opacity: 0, transform: 'translateY(100%)' })),
|
||||
]),
|
||||
]),
|
||||
],
|
||||
})
|
||||
export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
|
||||
private subscription?: Subscription;
|
||||
public projectId: string = '';
|
||||
|
||||
public formArray!: FormArray;
|
||||
public formGroup!: FormGroup;
|
||||
public createSteps: number = 1;
|
||||
public currentCreateStep: number = 1;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private toast: ToastService,
|
||||
private projectService: ProjectService,
|
||||
private _location: Location,
|
||||
) {
|
||||
this.formGroup = new FormGroup({
|
||||
key: new FormControl('', [Validators.required]),
|
||||
displayName: new FormControl(''),
|
||||
group: new FormControl(''),
|
||||
});
|
||||
|
||||
this.formArray = new FormArray([this.formGroup]);
|
||||
}
|
||||
|
||||
public addEntry(): void {
|
||||
const newGroup = new FormGroup({
|
||||
key: new FormControl('', [Validators.required]),
|
||||
displayName: new FormControl(''),
|
||||
group: new FormControl(''),
|
||||
});
|
||||
|
||||
this.formArray.push(newGroup);
|
||||
}
|
||||
|
||||
public removeEntry(index: number): void {
|
||||
this.formArray.removeAt(index);
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.subscription = this.route.params.subscribe(params => this.getData(params));
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.subscription?.unsubscribe();
|
||||
}
|
||||
|
||||
private getData({ projectid }: Params): void {
|
||||
this.projectId = projectid;
|
||||
}
|
||||
|
||||
public addRole(): void {
|
||||
const rolesToAdd: ProjectRoleAdd[] = this.formArray.value.map((element: any) => {
|
||||
const role = new ProjectRoleAdd();
|
||||
role.setKey(element.key);
|
||||
role.setDisplayName(element.displayName);
|
||||
role.setGroup(element.group);
|
||||
return role;
|
||||
});
|
||||
|
||||
this.projectService.BulkAddProjectRole(this.projectId, rolesToAdd).then(() => {
|
||||
this.router.navigate(['projects', this.projectId]);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
public close(): void {
|
||||
this._location.back();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
import { ProjectRoleCreateRoutingModule } from './project-role-create-routing.module';
|
||||
import { ProjectRoleCreateComponent } from './project-role-create.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ProjectRoleCreateComponent],
|
||||
imports: [
|
||||
ProjectRoleCreateRoutingModule,
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatInputModule,
|
||||
MatFormFieldModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
TranslateModule,
|
||||
],
|
||||
})
|
||||
export class ProjectRoleCreateModule { }
|
||||
Reference in New Issue
Block a user