fix(console): label policy setHideLoginNameSuffix (#1593)

* fix: label policy

* set primary, secondary color
This commit is contained in:
Max Peintner 2021-04-20 10:27:58 +02:00 committed by GitHub
parent 576995af05
commit 32bfd25b28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 80 additions and 72 deletions

View File

@ -1,16 +1,13 @@
<app-detail-layout [backRouterLink]="['/iam/policies']" [title]="'POLICY.LABEL.TITLE' | translate" <app-detail-layout [backRouterLink]="['/iam/policies']" [title]="'POLICY.LABEL.TITLE' | translate"
[description]="'POLICY.LABEL.DESCRIPTION' | translate"> [description]="'POLICY.LABEL.DESCRIPTION' | translate">
<div class="content" *ngIf="labelData"> <p class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</p>
<cnsl-form-field class="form-field" appearance="outline">
<cnsl-label>{{'POLICY.LABEL.PRIMARYCOLOR' | translate}}</cnsl-label>
<input cnslInput [(ngModel)]="labelData.primaryColor" />
</cnsl-form-field>
<cnsl-form-field class="form-field" appearance="outline"> <div class="content" *ngIf="labelData">
<cnsl-label>{{'POLICY.LABEL.SECONDARYCOLOR' | translate}}</cnsl-label> <mat-slide-toggle class="toggle" color="primary" ngDefaultControl
<input cnslInput [(ngModel)]="labelData.secondaryColor" /> [(ngModel)]="labelData.hideLoginNameSuffix">
</cnsl-form-field> {{'POLICY.DATA.HIDELOGINNAMESUFFIX' | translate}}
</mat-slide-toggle>
</div> </div>
<div class="btn-container"> <div class="btn-container">

View File

@ -3,12 +3,11 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 -.5rem; }
.form-field { .default {
flex: 1; color: var(--color-main);
margin: 0 .5rem; margin-top: 0;
}
} }
.btn-container { .btn-container {

View File

@ -5,57 +5,67 @@ import { GetLabelPolicyResponse, UpdateLabelPolicyRequest } from 'src/app/proto/
import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb'; import { LabelPolicy } from 'src/app/proto/generated/zitadel/policy_pb';
import { AdminService } from 'src/app/services/admin.service'; import { AdminService } from 'src/app/services/admin.service';
import { ToastService } from 'src/app/services/toast.service'; import { ToastService } from 'src/app/services/toast.service';
import { CnslLinks } from '../../links/links.component'; import { CnslLinks } from '../../links/links.component';
import { IAM_COMPLEXITY_LINK, IAM_LOGIN_POLICY_LINK, IAM_POLICY_LINK } from '../../policy-grid/policy-links'; import { IAM_COMPLEXITY_LINK, IAM_LOGIN_POLICY_LINK, IAM_POLICY_LINK } from '../../policy-grid/policy-links';
import { PolicyComponentServiceType } from '../policy-component-types.enum'; import { PolicyComponentServiceType } from '../policy-component-types.enum';
@Component({ @Component({
selector: 'app-label-policy', selector: 'app-label-policy',
templateUrl: './label-policy.component.html', templateUrl: './label-policy.component.html',
styleUrls: ['./label-policy.component.scss'], styleUrls: ['./label-policy.component.scss'],
}) })
export class LabelPolicyComponent implements OnDestroy { export class LabelPolicyComponent implements OnDestroy {
public labelData!: LabelPolicy.AsObject; public labelData!: LabelPolicy.AsObject;
private sub: Subscription = new Subscription(); private sub: Subscription = new Subscription();
public PolicyComponentServiceType: any = PolicyComponentServiceType; public PolicyComponentServiceType: any = PolicyComponentServiceType;
public nextLinks: CnslLinks[] = [ public nextLinks: CnslLinks[] = [
IAM_COMPLEXITY_LINK, IAM_COMPLEXITY_LINK,
IAM_POLICY_LINK, IAM_POLICY_LINK,
IAM_LOGIN_POLICY_LINK, IAM_LOGIN_POLICY_LINK,
]; ];
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private toast: ToastService, private toast: ToastService,
private adminService: AdminService, private adminService: AdminService,
) { ) {
this.route.params.subscribe(() => { this.route.params.subscribe(() => {
this.getData().then(data => { this.getData().then(data => {
if (data?.policy) { if (data?.policy) {
this.labelData = data.policy; this.labelData = data.policy;
} }
}); });
}); });
} }
public ngOnDestroy(): void { public ngOnDestroy(): void {
this.sub.unsubscribe(); this.sub.unsubscribe();
} }
private async getData(): Promise<GetLabelPolicyResponse.AsObject> { private async getData(): Promise<GetLabelPolicyResponse.AsObject> {
return this.adminService.getLabelPolicy(); return this.adminService.getLabelPolicy();
} }
public savePolicy(): void { public savePolicy(): void {
const req = new UpdateLabelPolicyRequest(); const req = new UpdateLabelPolicyRequest();
req.setPrimaryColor(this.labelData.primaryColor); req.setPrimaryColor(this.labelData.primaryColor);
req.setSecondaryColor(this.labelData.secondaryColor); req.setSecondaryColor(this.labelData.secondaryColor);
this.adminService.updateLabelPolicy(req).then(() => { req.setHideLoginNameSuffix(this.labelData.hideLoginNameSuffix);
this.toast.showInfo('POLICY.TOAST.SET', true); this.adminService.updateLabelPolicy(req).then(() => {
}).catch(error => { this.toast.showInfo('POLICY.TOAST.SET', true);
this.toast.showError(error); }).catch(error => {
}); this.toast.showError(error);
});
}
public get isDefault(): boolean {
if (this.labelData) {
return (this.labelData as LabelPolicy.AsObject).isDefault;
} else {
return false;
} }
}
} }

View File

@ -9,26 +9,28 @@ import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module'; import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { InputModule } from 'src/app/modules/input/input.module'; import { InputModule } from 'src/app/modules/input/input.module';
import { LinksModule } from '../../links/links.module';
import { InfoSectionModule } from '../../info-section/info-section.module';
import { LinksModule } from '../../links/links.module';
import { LabelPolicyRoutingModule } from './label-policy-routing.module'; import { LabelPolicyRoutingModule } from './label-policy-routing.module';
import { LabelPolicyComponent } from './label-policy.component'; import { LabelPolicyComponent } from './label-policy.component';
@NgModule({ @NgModule({
declarations: [LabelPolicyComponent], declarations: [LabelPolicyComponent],
imports: [ imports: [
LabelPolicyRoutingModule, LabelPolicyRoutingModule,
CommonModule, CommonModule,
FormsModule, FormsModule,
InputModule, InputModule,
MatButtonModule, MatButtonModule,
MatSlideToggleModule, MatSlideToggleModule,
MatIconModule, MatIconModule,
HasRoleModule, HasRoleModule,
MatTooltipModule, MatTooltipModule,
TranslateModule, TranslateModule,
DetailLayoutModule, DetailLayoutModule,
LinksModule, LinksModule,
], InfoSectionModule,
],
}) })
export class LabelPolicyModule { } export class LabelPolicyModule { }