mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-08 23:25:12 +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 { ProjectGrantCreateComponent } from './project-grant-create.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ProjectGrantCreateComponent,
|
||||
data: { animation: 'AddPage' },
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class ProjectGrantCreateRoutingModule { }
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
<div class="max-width-container container">
|
||||
<div class="abort-container">
|
||||
<button (click)="close()" mat-icon-button>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<span class="abort">{{ 'PROJECT.GRANT.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
|
||||
{{ currentCreateStep }} of
|
||||
{{ STEPS }}</span>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="currentCreateStep === 1">
|
||||
<h1>{{'PROJECT.GRANT.CREATE.SEL_ORG' | translate}}</h1>
|
||||
<p>{{'PROJECT.GRANT.CREATE.SEL_ORG_DESC' | translate}}</p>
|
||||
|
||||
<form (ngSubmit)="searchOrg(domain.value)">
|
||||
<mat-form-field class="org-domain">
|
||||
<mat-label>{{'PROJECT.GRANT.CREATE.SEL_ORG_FORMFIELD' | translate}}</mat-label>
|
||||
<input #domain matInput />
|
||||
</mat-form-field>
|
||||
|
||||
<button [disabled]="domain.value.length == 0" color="primary" type="submit" class="domain-button"
|
||||
mat-raised-button>
|
||||
{{'PROJECT.GRANT.CREATE.SEL_ORG_BUTTON' | translate}}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<span *ngIf="org">
|
||||
{{'PROJECT.GRANT.CREATE.FOR_ORG' | translate}} {{org?.name}}
|
||||
</span>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="currentCreateStep === 2">
|
||||
<h1>{{'PROJECT.GRANT.CREATE.SEL_ROLES' | translate}}</h1>
|
||||
|
||||
<app-card *ngIf="projectId">
|
||||
<app-project-roles (changedSelection)="selectRoles($event)" [projectId]="projectId"></app-project-roles>
|
||||
</app-card>
|
||||
</ng-container>
|
||||
|
||||
<div class="btn-container">
|
||||
<ng-container *ngIf="currentCreateStep === 1">
|
||||
<button [disabled]="!org" (click)="next()" color="primary" mat-raised-button class="big-button"
|
||||
cdkFocusInitial>
|
||||
{{ 'ACTIONS.CONTINUE' | translate }}
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="currentCreateStep === STEPS">
|
||||
<button (click)="previous()" color="primary" mat-button class="small-button">
|
||||
{{ 'ACTIONS.BACK' | translate }}
|
||||
</button>
|
||||
<button color="primary" [disabled]="!org" (click)="addGrant()" mat-raised-button class="big-button"
|
||||
cdkFocusInitial>
|
||||
{{ 'ACTIONS.SAVE' | translate }}
|
||||
</button>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
+108
@@ -0,0 +1,108 @@
|
||||
.container {
|
||||
padding: 4rem 4rem 2rem 4rem;
|
||||
|
||||
.abort-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
white-space: nowrap;
|
||||
|
||||
.abort {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.abort-2 {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.org-domain {
|
||||
width: 400px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.domain-button {
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
.org {
|
||||
height: 120px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
margin-top: 0;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-right {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.formfield {
|
||||
width: 400px;
|
||||
input {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.autocomplete {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.access-token {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
margin: 0 -.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
mat-form-field {
|
||||
flex: 1 0 40%;
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 3rem;
|
||||
|
||||
.small-button {
|
||||
display: block;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.big-button {
|
||||
display: block;
|
||||
padding: 0.5rem 4rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProjectGrantCreateComponent } from './project-grant-create.component';
|
||||
|
||||
describe('GrantCreateComponent', () => {
|
||||
let component: ProjectGrantCreateComponent;
|
||||
let fixture: ComponentFixture<ProjectGrantCreateComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ProjectGrantCreateComponent],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ProjectGrantCreateComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,86 @@
|
||||
import { Location } from '@angular/common';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { Org, ProjectRole } from 'src/app/proto/generated/management_pb';
|
||||
import { AuthService } from 'src/app/services/auth.service';
|
||||
import { OrgService } from 'src/app/services/org.service';
|
||||
import { ProjectService } from 'src/app/services/project.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-project-grant-create',
|
||||
templateUrl: './project-grant-create.component.html',
|
||||
styleUrls: ['./project-grant-create.component.scss'],
|
||||
})
|
||||
export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
|
||||
public org!: Org.AsObject;
|
||||
public projectId: string = '';
|
||||
public grantId: string = '';
|
||||
public rolesKeyList: string[] = [];
|
||||
|
||||
public STEPS: number = 2;
|
||||
public currentCreateStep: number = 1;
|
||||
|
||||
private routeSubscription: Subscription = new Subscription();
|
||||
constructor(
|
||||
private orgService: OrgService,
|
||||
private route: ActivatedRoute,
|
||||
private toast: ToastService,
|
||||
private projectService: ProjectService,
|
||||
private authService: AuthService,
|
||||
private _location: Location,
|
||||
) { }
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.routeSubscription = this.route.params.subscribe(params => {
|
||||
this.projectId = params.projectid;
|
||||
});
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.routeSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
public searchOrg(domain: string): void {
|
||||
this.orgService.getOrgByDomainGlobal(domain).then((ret) => {
|
||||
const tmp = ret.toObject();
|
||||
this.authService.GetActiveOrg().then((org) => {
|
||||
if (tmp !== org) {
|
||||
this.org = tmp;
|
||||
}
|
||||
});
|
||||
this.org = ret.toObject();
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
public close(): void {
|
||||
this._location.back();
|
||||
}
|
||||
|
||||
public addGrant(): void {
|
||||
this.projectService
|
||||
.CreateProjectGrant(this.org.id, this.projectId, this.rolesKeyList)
|
||||
.then((data) => {
|
||||
this.close();
|
||||
})
|
||||
.catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
public selectRoles(roles: ProjectRole.AsObject[]): void {
|
||||
this.rolesKeyList = roles.map(role => role.key);
|
||||
}
|
||||
|
||||
public next(): void {
|
||||
this.currentCreateStep++;
|
||||
}
|
||||
|
||||
public previous(): void {
|
||||
this.currentCreateStep--;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { CardModule } from 'src/app/modules/card/card.module';
|
||||
import { ProjectRolesModule } from 'src/app/modules/project-roles/project-roles.module';
|
||||
import { PipesModule } from 'src/app/pipes/pipes.module';
|
||||
|
||||
import { ProjectGrantCreateRoutingModule } from './project-grant-create-routing.module';
|
||||
import { ProjectGrantCreateComponent } from './project-grant-create.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ProjectGrantCreateComponent],
|
||||
imports: [
|
||||
ProjectGrantCreateRoutingModule,
|
||||
CommonModule,
|
||||
MatAutocompleteModule,
|
||||
MatChipsModule,
|
||||
MatButtonModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
CardModule,
|
||||
MatCheckboxModule,
|
||||
ProjectRolesModule,
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
PipesModule,
|
||||
ReactiveFormsModule,
|
||||
MatProgressSpinnerModule,
|
||||
FormsModule,
|
||||
TranslateModule,
|
||||
],
|
||||
})
|
||||
export class ProjectGrantCreateModule { }
|
||||
Reference in New Issue
Block a user