mirror of
https://github.com/zitadel/zitadel.git
synced 2025-10-20 12:22:25 +00:00
feat(console-v2): secret generator settings (#3619)
* secret generator, fix project grant * secret generators
This commit is contained in:
Max Peintner
@@ -109,12 +109,6 @@ export class NotificationSettingsComponent implements OnInit {
|
||||
|
||||
public addSMSProvider(): void {
|
||||
const dialogRef = this.dialog.open(DialogAddSMSProviderComponent, {
|
||||
data: {
|
||||
confirmKey: 'ACTIONS.DELETE',
|
||||
cancelKey: 'ACTIONS.CANCEL',
|
||||
titleKey: 'IDP.DELETE_TITLE',
|
||||
descriptionKey: 'IDP.DELETE_DESCRIPTION',
|
||||
},
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
<h1 mat-dialog-title class="title">
|
||||
<span>{{ 'SETTING.SECRETS.ADDGENERATOR' | translate }}</span>
|
||||
</h1>
|
||||
<div mat-dialog-content>
|
||||
<form *ngIf="specsForm" (ngSubmit)="closeDialogWithRequest()" [formGroup]="specsForm">
|
||||
<cnsl-form-field class="type-form-field" label="Access Code" required="true">
|
||||
<cnsl-label>{{ 'SETTING.SECRETS.GENERATORTYPE' | translate }}</cnsl-label>
|
||||
<mat-select formControlName="generatorType">
|
||||
<mat-option *ngFor="let gen of availableGenerators" [value]="gen">
|
||||
<span>{{ 'SETTING.SECRETS.TYPE.' + gen | translate }}</span>
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</cnsl-form-field>
|
||||
|
||||
<h2 class="generator-type">{{ 'SETTING.SECRETS.TYPE.' + generatorType?.value | translate }}</h2>
|
||||
|
||||
<cnsl-form-field class="generator-form-field" label="Expiration">
|
||||
<cnsl-label>{{ 'SETTING.SECRETS.EXPIRY' | translate }}</cnsl-label>
|
||||
<input cnslInput name="expiry" type="number" formControlName="expiry" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<cnsl-form-field class="generator-form-field" label="Length">
|
||||
<cnsl-label>{{ 'SETTING.SECRETS.LENGTH' | translate }}</cnsl-label>
|
||||
<input cnslInput name="length" type="number" formControlName="length" />
|
||||
</cnsl-form-field>
|
||||
|
||||
<div class="slide-toggle-wrapper">
|
||||
<mat-slide-toggle class="slide-toggle" color="primary" name="includeDigits" formControlName="includeDigits">
|
||||
<div class="slide-toggle-row">
|
||||
<mat-icon class="icon" svgIcon="mdi_numeric"></mat-icon>
|
||||
<span class="left-desc">{{ 'SETTING.SECRETS.INCLUDEDIGITS' | translate }}</span>
|
||||
</div>
|
||||
</mat-slide-toggle>
|
||||
|
||||
<mat-slide-toggle class="slide-toggle" color="primary" name="includeSymbols" formControlName="includeSymbols">
|
||||
<div class="slide-toggle-row">
|
||||
<mat-icon class="icon" svgIcon="mdi_symbol"></mat-icon>
|
||||
<span class="left-desc">{{ 'SETTING.SECRETS.INCLUDESYMBOLS' | translate }}</span>
|
||||
</div>
|
||||
</mat-slide-toggle>
|
||||
|
||||
<mat-slide-toggle
|
||||
class="slide-toggle"
|
||||
color="primary"
|
||||
name="includeLowerLetters"
|
||||
formControlName="includeLowerLetters"
|
||||
>
|
||||
<div class="slide-toggle-row">
|
||||
<mat-icon class="icon" svgIcon="mdi_format-letter-case-lower"></mat-icon>
|
||||
<span class="left-desc">{{ 'SETTING.SECRETS.INCLUDELOWERLETTERS' | translate }}</span>
|
||||
</div>
|
||||
</mat-slide-toggle>
|
||||
|
||||
<mat-slide-toggle
|
||||
class="slide-toggle"
|
||||
color="primary"
|
||||
name="includeUpperLetters"
|
||||
formControlName="includeUpperLetters"
|
||||
>
|
||||
<div class="slide-toggle-row">
|
||||
<mat-icon class="icon" svgIcon="mdi_format-letter-case-upper"></mat-icon>
|
||||
<span class="left-desc">{{ 'SETTING.SECRETS.INCLUDEUPPERLETTERS' | translate }}</span>
|
||||
</div>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div mat-dialog-actions class="action">
|
||||
<button mat-stroked-button (click)="closeDialog()">
|
||||
<span>{{ 'ACTIONS.CLOSE' | translate }}</span>
|
||||
</button>
|
||||
<button
|
||||
[disabled]="!specsForm.valid"
|
||||
mat-raised-button
|
||||
class="ok-button"
|
||||
color="primary"
|
||||
(click)="closeDialogWithRequest()"
|
||||
>
|
||||
<span>{{ 'ACTIONS.SAVE' | translate }}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.generator-type {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.type-form-field {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.generator-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slide-toggle-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
column-gap: 1rem;
|
||||
|
||||
.slide-toggle {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
.slide-toggle-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
|
||||
import { UpdateSecretGeneratorRequest } from 'src/app/proto/generated/zitadel/admin_pb';
|
||||
import { SecretGeneratorType } from 'src/app/proto/generated/zitadel/settings_pb';
|
||||
|
||||
@Component({
|
||||
selector: 'cnsl-dialog-add-secret-generator',
|
||||
templateUrl: './dialog-add-secret-generator.component.html',
|
||||
styleUrls: ['./dialog-add-secret-generator.component.scss'],
|
||||
})
|
||||
export class DialogAddSecretGeneratorComponent {
|
||||
public SecretGeneratorType: any = SecretGeneratorType;
|
||||
public availableGenerators: SecretGeneratorType[] = [
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_INIT_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_VERIFY_EMAIL_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_VERIFY_PHONE_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_PASSWORD_RESET_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_PASSWORDLESS_INIT_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_APP_SECRET,
|
||||
];
|
||||
public req: UpdateSecretGeneratorRequest = new UpdateSecretGeneratorRequest();
|
||||
|
||||
public specsForm!: FormGroup;
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
public dialogRef: MatDialogRef<DialogAddSecretGeneratorComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
) {
|
||||
this.specsForm = this.fb.group({
|
||||
generatorType: [SecretGeneratorType.SECRET_GENERATOR_TYPE_APP_SECRET, [Validators.required]],
|
||||
expiry: [1, [Validators.required]],
|
||||
includeDigits: [true, [Validators.required]],
|
||||
includeLowerLetters: [true, [Validators.required]],
|
||||
includeSymbols: [true, [Validators.required]],
|
||||
includeUpperLetters: [true, [Validators.required]],
|
||||
length: [6, [Validators.required]],
|
||||
});
|
||||
|
||||
this.generatorType?.setValue(data.type);
|
||||
}
|
||||
|
||||
public closeDialog(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
public closeDialogWithRequest(): void {
|
||||
this.req.setGeneratorType(this.generatorType?.value);
|
||||
|
||||
const expiry = new Duration().setSeconds((this.expiry?.value ?? 1) * 60 * 60);
|
||||
|
||||
this.req.setExpiry(expiry);
|
||||
this.req.setIncludeDigits(this.includeDigits?.value);
|
||||
this.req.setIncludeLowerLetters(this.includeLowerLetters?.value);
|
||||
this.req.setIncludeSymbols(this.includeSymbols?.value);
|
||||
this.req.setIncludeUpperLetters(this.includeUpperLetters?.value);
|
||||
this.req.setLength(this.length?.value);
|
||||
|
||||
this.dialogRef.close(this.req);
|
||||
}
|
||||
|
||||
public get generatorType(): AbstractControl | null {
|
||||
return this.specsForm.get('generatorType');
|
||||
}
|
||||
|
||||
public get expiry(): AbstractControl | null {
|
||||
return this.specsForm.get('expiry');
|
||||
}
|
||||
|
||||
public get includeDigits(): AbstractControl | null {
|
||||
return this.specsForm.get('includeDigits');
|
||||
}
|
||||
|
||||
public get includeLowerLetters(): AbstractControl | null {
|
||||
return this.specsForm.get('includeLowerLetters');
|
||||
}
|
||||
|
||||
public get includeSymbols(): AbstractControl | null {
|
||||
return this.specsForm.get('includeSymbols');
|
||||
}
|
||||
|
||||
public get includeUpperLetters(): AbstractControl | null {
|
||||
return this.specsForm.get('includeUpperLetters');
|
||||
}
|
||||
|
||||
public get length(): AbstractControl | null {
|
||||
return this.specsForm.get('length');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<div class="spinner-wr">
|
||||
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
|
||||
</div>
|
||||
<h2>{{ 'SETTING.SECRETS.TITLE' | translate }}</h2>
|
||||
|
||||
<div class="generators">
|
||||
<cnsl-card class="generator" [nomargin]="true" *ngFor="let gen of AVAILABLEGENERATORS">
|
||||
<div class="row">
|
||||
<h3 class="title">{{ 'SETTING.SECRETS.TYPE.' + gen | translate }}</h3>
|
||||
<button mat-icon-button (click)="openGeneratorDialog(gen)">
|
||||
<i class="las la-pen"></i>
|
||||
</button>
|
||||
</div>
|
||||
</cnsl-card>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
.spinner-wr {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.generators {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 1rem;
|
||||
row-gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.generator {
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SecretGeneratorComponent } from './secret-generator.component';
|
||||
|
||||
describe('OIDCConfigurationComponent', () => {
|
||||
let component: SecretGeneratorComponent;
|
||||
let fixture: ComponentFixture<SecretGeneratorComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [SecretGeneratorComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SecretGeneratorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,107 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { UpdateSecretGeneratorRequest, UpdateSecretGeneratorResponse } from 'src/app/proto/generated/zitadel/admin_pb';
|
||||
import { OIDCSettings, SecretGenerator, SecretGeneratorType } from 'src/app/proto/generated/zitadel/settings_pb';
|
||||
import { AdminService } from 'src/app/services/admin.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
import { DialogAddSecretGeneratorComponent } from './dialog-add-secret-generator/dialog-add-secret-generator.component';
|
||||
|
||||
@Component({
|
||||
selector: 'cnsl-secret-generator',
|
||||
templateUrl: './secret-generator.component.html',
|
||||
styleUrls: ['./secret-generator.component.scss'],
|
||||
})
|
||||
export class SecretGeneratorComponent implements OnInit {
|
||||
public generators: SecretGenerator.AsObject[] = [];
|
||||
public oidcSettings!: OIDCSettings.AsObject;
|
||||
|
||||
public loading: boolean = false;
|
||||
|
||||
public readonly AVAILABLEGENERATORS: SecretGeneratorType[] = [
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_INIT_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_VERIFY_EMAIL_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_VERIFY_PHONE_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_PASSWORD_RESET_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_PASSWORDLESS_INIT_CODE,
|
||||
SecretGeneratorType.SECRET_GENERATOR_TYPE_APP_SECRET,
|
||||
];
|
||||
constructor(private service: AdminService, private toast: ToastService, private dialog: MatDialog) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
private fetchData(): void {
|
||||
this.service
|
||||
.listSecretGenerators()
|
||||
.then((generators) => {
|
||||
if (generators.resultList) {
|
||||
this.generators = generators.resultList;
|
||||
console.log(this.generators);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.code === 5) {
|
||||
} else {
|
||||
this.toast.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private updateData(): Promise<UpdateSecretGeneratorResponse.AsObject> | void {
|
||||
const dialogRef = this.dialog.open(DialogAddSecretGeneratorComponent, {
|
||||
data: {},
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((req: UpdateSecretGeneratorRequest) => {
|
||||
if (req) {
|
||||
return (this.service as AdminService).updateSecretGenerator(req);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public openGeneratorDialog(generatorType: SecretGeneratorType): void {
|
||||
const dialogRef = this.dialog.open(DialogAddSecretGeneratorComponent, {
|
||||
data: {
|
||||
type: generatorType,
|
||||
},
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((req: UpdateSecretGeneratorRequest) => {
|
||||
if (req) {
|
||||
return (this.service as AdminService)
|
||||
.updateSecretGenerator(req)
|
||||
.then(() => {
|
||||
this.toast.showInfo('SETTING.SECRETS.UPDATED', true);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public savePolicy(): void {
|
||||
const prom = this.updateData();
|
||||
if (prom) {
|
||||
prom
|
||||
.then(() => {
|
||||
this.toast.showInfo('SETTING.SMTP.SAVED', true);
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
this.fetchData();
|
||||
}, 2000);
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
|
||||
import { CardModule } from '../../card/card.module';
|
||||
import { FormFieldModule } from '../../form-field/form-field.module';
|
||||
import { InputModule } from '../../input/input.module';
|
||||
import { DialogAddSecretGeneratorComponent } from './dialog-add-secret-generator/dialog-add-secret-generator.component';
|
||||
import { SecretGeneratorComponent } from './secret-generator.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [SecretGeneratorComponent, DialogAddSecretGeneratorComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatIconModule,
|
||||
CardModule,
|
||||
FormsModule,
|
||||
MatButtonModule,
|
||||
FormFieldModule,
|
||||
ReactiveFormsModule,
|
||||
MatSlideToggleModule,
|
||||
InputModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatSelectModule,
|
||||
TranslateModule,
|
||||
],
|
||||
exports: [SecretGeneratorComponent, DialogAddSecretGeneratorComponent],
|
||||
})
|
||||
export class SecretGeneratorModule {}
|
||||
Reference in New Issue
Block a user