mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-30 19:12:16 +00:00
feat(console): integrate frontend (#95)
* feat: console frontend * chore(dependabot): cycle and npm * chore: rename citadel to zitadel, remove generated files * chore: delete go files * chore(frontend): ci steps * chore: remove docker and envoy files * chore: remove docker file * chore: working dir * chore: run proto build * add console start * chore: restructure folders * chore: remove gui build * statikFs * generate proto for console * add statik import * import * chore: try statik * chore: path * chore: path * chore: script in root * chore: order build steps * chore: go get * chore: folder traversal * chore: non empty test file * chore: gitignore * chore: gitignore * chore: statik path * chore: switch to failing FE build * fix: build * fix: project-grant-test * fix: rm test * add statik.go * go mod tidy * chore: place test, seperate test from build * chore: lint all the world * chore: ci the world instead * chore: tune docker * chore: undo container test * chore: fix run * chore: docker build * chore: test docker build * chore: go build flags * finaly * fix caos_local * go mod Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: Max Peintner <[email protected]>
This commit is contained in:
Florian Forster
co-authored by
Livio Amstutz
Max Peintner
Livio Amstutz
Max Peintner
parent
9e32740eb8
commit
92a294f5c8
@@ -0,0 +1,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
|
||||
import { UserGrantCreateComponent } from './user-grant-create.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: UserGrantCreateComponent,
|
||||
data: { animation: 'AddPage' },
|
||||
},
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class UserGrantCreateRoutingModule { }
|
||||
@@ -0,0 +1,67 @@
|
||||
<div class="container">
|
||||
<div class="abort-container">
|
||||
<button (click)="close()" mat-icon-button>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<span class="abort">{{ 'USER.GRANTS.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
|
||||
{{ currentCreateStep }} of
|
||||
{{ STEPS }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<ng-container *ngIf="currentCreateStep === 1">
|
||||
<h1>{{'PROJECT.GRANT.CREATE.ORG_TITLE' | translate}}</h1>
|
||||
|
||||
<p class="desc">{{'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate: org}}</p>
|
||||
<p class="org" *ngIf="org">{{org?.name}}</p>
|
||||
|
||||
<p class="desc">{{'PROJECT.GRANT.CREATE.ORG_DESCRIPTION_DESC' | translate}}</p>
|
||||
<!-- <app-search-org-autocomplete class="block" singleOutput="true" (selectionChanged)="selectOrg($event)">
|
||||
</app-search-org-autocomplete> -->
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="currentCreateStep === 2">
|
||||
<h1>{{'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate}}</h1>
|
||||
|
||||
<app-search-project-autocomplete class="block" singleOutput="true" (selectionChanged)="selectProject($event)">
|
||||
</app-search-project-autocomplete>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="currentCreateStep === STEPS">
|
||||
<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">
|
||||
<!-- <span></span> -->
|
||||
<button [disabled]="!org || !userId" (click)="next()" color="primary" mat-raised-button class="big-button"
|
||||
cdkFocusInitial>
|
||||
{{ 'ACTIONS.CONTINUE' | translate }}
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="currentCreateStep === 2">
|
||||
<button (click)="previous()" color="primary" mat-button class="small-button" cdkFocusInitial>
|
||||
{{ 'ACTIONS.BACK' | translate }}
|
||||
</button>
|
||||
<button [disabled]="!org || !userId" (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" cdkFocusInitial>
|
||||
{{ 'ACTIONS.BACK' | translate }}
|
||||
</button>
|
||||
<button color="primary" (click)="addGrant()" mat-raised-button class="big-button" cdkFocusInitial>
|
||||
{{ 'ACTIONS.SAVE' | translate }}
|
||||
</button>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,92 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #81868a;
|
||||
}
|
||||
|
||||
.org {
|
||||
padding: 1rem 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-right {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserGrantCreateComponent } from './user-grant-create.component';
|
||||
|
||||
describe('UserGrantCreateComponent', () => {
|
||||
let component: UserGrantCreateComponent;
|
||||
let fixture: ComponentFixture<UserGrantCreateComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [UserGrantCreateComponent],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UserGrantCreateComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,82 @@
|
||||
import { Location } from '@angular/common';
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { Org } from 'src/app/proto/generated/auth_pb';
|
||||
import { Project, ProjectRole, UserGrant } from 'src/app/proto/generated/management_pb';
|
||||
import { AuthService } from 'src/app/services/auth.service';
|
||||
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-grant-create',
|
||||
templateUrl: './user-grant-create.component.html',
|
||||
styleUrls: ['./user-grant-create.component.scss'],
|
||||
})
|
||||
export class UserGrantCreateComponent implements OnDestroy {
|
||||
public org!: Org.AsObject;
|
||||
public userId: string = '';
|
||||
public projectId: string = '';
|
||||
public grantId: string = '';
|
||||
public rolesList: string[] = [];
|
||||
|
||||
public STEPS: number = 3; // org, project, roles
|
||||
public currentCreateStep: number = 1;
|
||||
|
||||
private subscription: Subscription = new Subscription();
|
||||
constructor(
|
||||
private authService: AuthService,
|
||||
private userService: MgmtUserService,
|
||||
private toast: ToastService,
|
||||
private _location: Location,
|
||||
private route: ActivatedRoute,
|
||||
) {
|
||||
this.subscription = this.route.params.subscribe(({ id }: Params) => {
|
||||
console.log(id);
|
||||
this.userId = id;
|
||||
});
|
||||
|
||||
this.authService.GetActiveOrg().then(org => {
|
||||
this.org = org;
|
||||
console.log(org);
|
||||
});
|
||||
}
|
||||
|
||||
public close(): void {
|
||||
this._location.back();
|
||||
}
|
||||
|
||||
public addGrant(): void {
|
||||
this.userService.CreateUserGrant(
|
||||
this.projectId,
|
||||
this.userId,
|
||||
this.rolesList,
|
||||
).then((data: UserGrant) => {
|
||||
console.log(data);
|
||||
this.close();
|
||||
}).catch(error => {
|
||||
this.toast.showError(error.message);
|
||||
});
|
||||
}
|
||||
|
||||
public selectProject(project: Project.AsObject): void {
|
||||
this.projectId = project.id;
|
||||
console.log(project);
|
||||
}
|
||||
|
||||
public selectRoles(roles: ProjectRole.AsObject[]): void {
|
||||
this.rolesList = roles.map(role => role.key);
|
||||
}
|
||||
|
||||
public next(): void {
|
||||
this.currentCreateStep++;
|
||||
}
|
||||
|
||||
public previous(): void {
|
||||
this.currentCreateStep--;
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { CardModule } from 'src/app/modules/card/card.module';
|
||||
import {
|
||||
SearchProjectAutocompleteModule,
|
||||
} from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.module';
|
||||
|
||||
import { ProjectRolesModule } from '../../modules/project-roles/project-roles.module';
|
||||
import { UserGrantCreateRoutingModule } from './user-grant-create-routing.module';
|
||||
import { UserGrantCreateComponent } from './user-grant-create.component';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [UserGrantCreateComponent],
|
||||
imports: [
|
||||
UserGrantCreateRoutingModule,
|
||||
CommonModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
TranslateModule,
|
||||
CardModule,
|
||||
SearchProjectAutocompleteModule,
|
||||
ProjectRolesModule,
|
||||
],
|
||||
schemas: [
|
||||
CUSTOM_ELEMENTS_SCHEMA,
|
||||
],
|
||||
})
|
||||
export class UserGrantCreateModule { }
|
||||
Reference in New Issue
Block a user