fix(console, login): console - ensure permission is available, login - i18n fixes, input borders, lgn-touched script to add class on blur (#3760)

* permission restriction, member, login i18n input borders, secondary text

* add touched js
This commit is contained in:
Max Peintner
2022-06-07 11:25:56 +02:00
committed by GitHub
parent c1f59c7950
commit 233d80502d
30 changed files with 333 additions and 71 deletions

View File

@@ -37,12 +37,24 @@
<input id="smtp-user" cnslInput name="smtp-user" autocomplete="smtp-user" formControlName="user" />
</cnsl-form-field>
<button class="set-password-btn" (click)="setSMTPPassword()" mat-stroked-button>
<button
class="set-password-btn"
[disabled]="(['iam.write'] | hasRole | async) === false"
(click)="setSMTPPassword()"
mat-stroked-button
>
{{ 'SETTING.SMTP.SETPASSWORD' | translate }}
</button>
<div class="general-btn-container">
<button class="save-button" (click)="savePolicy()" color="primary" type="submit" mat-raised-button>
<button
class="save-button"
[disabled]="form.disabled"
(click)="savePolicy()"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
@@ -65,13 +77,9 @@
></span>
<span class="fill-space"></span>
<button mat-icon-button (click)="addSMSProvider()"><i class="las la-pen"></i></button>
<button [disabled]="(['iam.write'] | hasRole | async) === false" mat-icon-button (click)="addSMSProvider()">
<i class="las la-pen"></i>
</button>
</div>
</cnsl-card>
<!-- <button mat-stroked-button (click)="addSMSProvider()">
<div class="sms-card add">
<mat-icon>add</mat-icon>
<span>{{ 'ACTIONS.ADD' | translate }}</span>
</div>
</button> -->
</div>

View File

@@ -1,6 +1,7 @@
import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { take } from 'rxjs';
import {
AddSMSProviderTwilioRequest,
UpdateSMTPConfigPasswordRequest,
@@ -9,6 +10,7 @@ import {
} from 'src/app/proto/generated/zitadel/admin_pb';
import { DebugNotificationProvider, SMSProvider, SMSProviderConfigState } from 'src/app/proto/generated/zitadel/settings_pb';
import { AdminService } from 'src/app/services/admin.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
@@ -44,18 +46,27 @@ export class NotificationSettingsComponent implements OnInit {
private dialog: MatDialog,
private toast: ToastService,
private fb: FormBuilder,
private authService: GrpcAuthService,
) {
this.form = this.fb.group({
senderAddress: ['', [Validators.required]],
senderName: ['', [Validators.required]],
tls: [true, [Validators.required]],
host: ['', [Validators.required]],
user: ['', [Validators.required]],
senderAddress: [{ disabled: true, value: '' }, [Validators.required]],
senderName: [{ disabled: true, value: '' }, [Validators.required]],
tls: [{ disabled: true, value: true }, [Validators.required]],
host: [{ disabled: true, value: '' }, [Validators.required]],
user: [{ disabled: true, value: '' }, [Validators.required]],
});
}
ngOnInit(): void {
this.fetchData();
this.authService
.isAllowed(['iam.write'])
.pipe(take(1))
.subscribe((allowed) => {
if (allowed) {
this.form.enable();
}
});
}
private fetchData(): void {

View File

@@ -7,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../../card/card.module';
import { FormFieldModule } from '../../form-field/form-field.module';
@@ -24,6 +25,7 @@ import { SMTPPasswordDialogComponent } from './smtp-password-dialog/smtp-passwor
InfoSectionModule,
FormsModule,
ReactiveFormsModule,
HasRolePipeModule,
MatButtonModule,
MatCheckboxModule,
InputModule,

View File

@@ -39,7 +39,14 @@
</cnsl-form-field>
</form>
<div class="oidc-btn-container">
<button class="save-button" (click)="savePolicy()" color="primary" type="submit" mat-raised-button>
<button
[disabled]="form.disabled"
class="save-button"
(click)="savePolicy()"
color="primary"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>

View File

@@ -1,9 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
import { take } from 'rxjs';
import { SetDefaultLanguageResponse, UpdateOIDCSettingsRequest } from 'src/app/proto/generated/zitadel/admin_pb';
import { OIDCSettings } from 'src/app/proto/generated/zitadel/settings_pb';
import { AdminService } from 'src/app/services/admin.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
@@ -16,17 +18,30 @@ export class OIDCConfigurationComponent implements OnInit {
public loading: boolean = false;
public form!: FormGroup;
constructor(private service: AdminService, private fb: FormBuilder, private toast: ToastService) {
constructor(
private service: AdminService,
private fb: FormBuilder,
private toast: ToastService,
private authService: GrpcAuthService,
) {
this.form = this.fb.group({
accessTokenLifetime: [12, [Validators.required]],
idTokenLifetime: [12, [Validators.required]],
refreshTokenExpiration: [30, [Validators.required]],
refreshTokenIdleExpiration: [90, [Validators.required]],
accessTokenLifetime: [{ disabled: true, value: 12 }, [Validators.required]],
idTokenLifetime: [{ disabled: true, value: 12 }, [Validators.required]],
refreshTokenExpiration: [{ disabled: true, value: 30 }, [Validators.required]],
refreshTokenIdleExpiration: [{ disabled: true, value: 90 }, [Validators.required]],
});
}
ngOnInit(): void {
this.fetchData();
this.authService
.isAllowed(['iam.write'])
.pipe(take(1))
.subscribe((allowed) => {
if (allowed) {
this.form.enable();
}
});
}
private fetchData(): void {

View File

@@ -57,6 +57,18 @@
*ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
color="warn"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.delete'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.delete'
: ''
]
| hasRole
| async) === false
"
(click)="removePolicy()"
mat-stroked-button
>
@@ -136,7 +148,18 @@
mat-icon-button
color="warn"
(click)="deleteAsset(AssetType.LOGO, theme)"
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
>
<i class="las la-ban"></i>
@@ -151,9 +174,22 @@
(change)="onDropLogo(theme, $any($event.target).files)"
/>
<button
class="asset-add-btn"
mat-icon-button
matTooltip="{{ 'POLICY.PRIVATELABELING.BTN' | translate }}"
*ngIf="view !== View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
(click)="$event.preventDefault(); selectedFile.click()"
>
<mat-icon>add</mat-icon>
@@ -183,7 +219,18 @@
mat-icon-button
color="warn"
(click)="deleteAsset(AssetType.ICON, theme)"
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
>
<i class="las la-ban"></i>
@@ -199,8 +246,21 @@
/>
<button
mat-icon-button
class="asset-add-btn"
matTooltip="{{ 'POLICY.PRIVATELABELING.BTN' | translate }}"
*ngIf="view !== View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
(click)="$event.preventDefault(); selectedIconFile.click()"
>
<mat-icon>add</mat-icon>
@@ -232,7 +292,18 @@
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[colorType]="ColorType.BACKGROUNDDARK"
(previewChanged)="previewData.backgroundColorDark !== $event ? setDarkBackgroundColorAndSave($event) : null"
name="Background Color"
@@ -243,7 +314,18 @@
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[colorType]="ColorType.PRIMARY"
(previewChanged)="previewData.primaryColorDark !== $event ? setDarkPrimaryColorAndSave($event) : null"
name="Primary Color"
@@ -255,7 +337,18 @@
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[colorType]="ColorType.WARN"
(previewChanged)="previewData.warnColorDark !== $event ? setDarkWarnColorAndSave($event) : null"
name="Warn Color"
@@ -267,7 +360,18 @@
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[colorType]="ColorType.FONTDARK"
(previewChanged)="previewData.fontColorDark !== $event ? setDarkFontColorAndSave($event) : null"
name="Font Color"
@@ -283,7 +387,18 @@
<div class="colors" *ngIf="data && previewData">
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[colorType]="ColorType.BACKGROUNDLIGHT"
(previewChanged)="previewData.backgroundColor !== $event ? setBackgroundColorAndSave($event) : null"
name="Background Color"
@@ -294,7 +409,18 @@
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[colorType]="ColorType.PRIMARY"
(previewChanged)="previewData.primaryColor !== $event ? setPrimaryColorAndSave($event) : null"
name="Primary Color"
@@ -306,7 +432,18 @@
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[colorType]="ColorType.WARN"
name="Warn Color"
(previewChanged)="previewData.warnColor !== $event ? setWarnColorAndSave($event) : null"
@@ -317,7 +454,18 @@
<div class="color">
<cnsl-color
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
[colorType]="ColorType.FONTLIGHT"
(previewChanged)="previewData.fontColor !== $event ? setFontColorAndSave($event) : null"
name="Font Color"
@@ -349,7 +497,18 @@
<button
class="dl-btn"
[disabled]="view === View.CURRENT"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
mat-icon-button
color="warn"
(click)="deleteFont()"
@@ -375,7 +534,19 @@
(change)="onDropFont($any($event.target).files)"
/>
<a
class="btn"
class="asset-add-btn"
[disabled]="
view === View.CURRENT ||
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
mat-icon-button
*ngIf="view !== View.CURRENT"
(click)="selectedFontFile.click()"

View File

@@ -168,6 +168,12 @@
flex: 1;
}
.asset-add-btn {
&[disabled] {
color: map-get($foreground, disabled-text);
}
}
.img-wrapper {
position: relative;
height: 70px;

View File

@@ -7,7 +7,7 @@
<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)">
<button mat-icon-button (click)="openGeneratorDialog(gen)" [disabled]="(['iam.write'] | hasRole | async) === false">
<i class="las la-pen"></i>
</button>
</div>

View File

@@ -7,6 +7,7 @@ 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 { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../../card/card.module';
import { FormFieldModule } from '../../form-field/form-field.module';
@@ -21,6 +22,7 @@ import { SecretGeneratorComponent } from './secret-generator.component';
MatIconModule,
CardModule,
FormsModule,
HasRolePipeModule,
MatButtonModule,
FormFieldModule,
ReactiveFormsModule,