andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-11 00:25:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console, login): v2 notification settings, login avatar (#3606)

Browse Source 
* instance routing

* instance naming

* org list

* rm isonsystem

* breadcrumb  type

* routing

* instance members

* fragment refresh org

* settings pages

* settings list, sidenav grouping, i18n

* org-settings, policy changes

* lint

* grid

* rename grid

* fallback to general

* cleanup

* general settings, remove cards

* sidenav for settings, label policy

* i18n

* header, nav backbuild

* general, project nav rehaul

* login text background adapt

* org nav anim

* org, instance settings, fix policy layout, roles

* i18n, active route for project

* lint

* notification-settings

* idp create redirect, sms provider create, i18n

* oidc configuration

* settings list

* new avatar colors for login

* cleaner js

* avatar theme login

* remove avatar elevation
This commit is contained in:
Max Peintner
2022-05-11 08:01:40 +02:00
committed by GitHub
parent 06e3330d2e
commit d431ccb965
36 changed files with 1493 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/idp/idp.component.html
+90 -48
View File
@@ -1,20 +1,33 @@
<cnsl-top-view title="{{'IDP.DETAIL.TITLE' | translate}}"
<cnsl-top-view
title="{{ 'IDP.DETAIL.TITLE' | translate }}"
[sub]="idp?.oidcConfig ? ('IDP.OIDC.TITLE' | translate) : idp?.jwtConfig ? ('IDP.JWT.TITLE' | translate) : ''"
[isActive]="idp?.state === IDPState.IDP_STATE_ACTIVE" [isInactive]="idp?.state === IDPState.IDP_STATE_INACTIVE"
[hasContributors]="false" stateTooltip="{{'IDP.STATES.'+idp?.state | translate}}"
[hasActions]="(serviceType === PolicyComponentServiceType.MGMT ? ['org.idp.write'] : ['iam.idp.write']) | hasRole | async">
<ng-template topActions cnslHasRole
[hasRole]="serviceType === PolicyComponentServiceType.MGMT ? ['org.idp.write'] : ['iam.idp.write']">
<button mat-menu-item *ngIf="idp?.state !== IDPState.IDP_STATE_INACTIVE"
(click)="changeState(IDPState.IDP_STATE_INACTIVE)">
{{'ACTIONS.DEACTIVATE' | translate}}
[isActive]="idp?.state === IDPState.IDP_STATE_ACTIVE"
[isInactive]="idp?.state === IDPState.IDP_STATE_INACTIVE"
[hasContributors]="false"
stateTooltip="{{ 'IDP.STATES.' + idp?.state | translate }}"
[hasActions]="(serviceType === PolicyComponentServiceType.MGMT ? ['org.idp.write'] : ['iam.idp.write']) | hasRole | async"
>
<ng-template
topActions
cnslHasRole
[hasRole]="serviceType === PolicyComponentServiceType.MGMT ? ['org.idp.write'] : ['iam.idp.write']"
>
<button
mat-menu-item
*ngIf="idp?.state !== IDPState.IDP_STATE_INACTIVE"
(click)="changeState(IDPState.IDP_STATE_INACTIVE)"
>
{{ 'ACTIONS.DEACTIVATE' | translate }}
</button>
<button mat-menu-item *ngIf="idp?.state === IDPState.IDP_STATE_INACTIVE"
(click)="changeState(IDPState.IDP_STATE_ACTIVE)">
{{'ACTIONS.REACTIVATE' | translate}}
<button
mat-menu-item
*ngIf="idp?.state === IDPState.IDP_STATE_INACTIVE"
(click)="changeState(IDPState.IDP_STATE_ACTIVE)"
>
{{ 'ACTIONS.REACTIVATE' | translate }}
</button>
<button mat-menu-item matTooltip="{{'IDP.DELETE' | translate}}" (click)="deleteIdp()">
<span [style.color]="'var(--warn)'">{{'IDP.DELETE_TITLE' | translate}}</span>
<button mat-menu-item matTooltip="{{ 'IDP.DELETE' | translate }}" (click)="deleteIdp()">
<span [style.color]="'var(--warn)'">{{ 'IDP.DELETE_TITLE' | translate }}</span>
</button>
</ng-template>
<cnsl-info-row topContent *ngIf="idp" [idp]="idp"></cnsl-info-row>
@@ -24,8 +37,7 @@
<form class="idp-form" (ngSubmit)="updateIdp()">
<ng-container [formGroup]="idpForm">
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
@@ -33,16 +45,16 @@
<cnsl-label>{{ 'IDP.STYLE' | translate }}</cnsl-label>
<mat-select formControlName="stylingType">
<mat-option *ngFor="let field of styleFields" [value]="field">
{{ 'IDP.STYLEFIELD.'+field | translate }}
{{ 'IDP.STYLEFIELD.' + field | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-info-section class="auto-reg-info">
<div>
<p class="auto-reg-desc">{{'IDP.AUTOREGISTER_DESC' | translate}}</p>
<p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
<mat-checkbox formControlName="autoRegister" [disabled]="(canWrite | async) === false">
{{'IDP.AUTOREGISTER' | translate}}
{{ 'IDP.AUTOREGISTER' | translate }}
</mat-checkbox>
</div>
</cnsl-info-section>
@@ -50,52 +62,72 @@
</ng-container>
<div class="btn-wrapper">
<button color="primary" mat-raised-button class="continue-button"
[disabled]="idpForm.invalid || (canWrite | async) === false" type="submit">
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="idpForm.invalid || (canWrite | async) === false"
type="submit"
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
<ng-container *ngIf="idp?.oidcConfig && oidcConfigForm">
<h2>{{'IDP.OIDC.TITLE' | translate}}</h2>
<p class="idp-desc cnsl-secondary-text">{{'IDP.OIDC.DESCRIPTION' | translate}}</p>
<h2>{{ 'IDP.OIDC.TITLE' | translate }}</h2>
<p class="idp-desc cnsl-secondary-text">{{ 'IDP.OIDC.DESCRIPTION' | translate }}</p>
<form (ngSubmit)="updateOidcConfig()">
<ng-container [formGroup]="oidcConfigForm">
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="issuer" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
</cnsl-form-field>
<mat-checkbox class="idp-desc cnsl-secondary-text" [(ngModel)]="showIdSecretSection"
[disabled]="(canWrite | async) === false" [ngModelOptions]="{standalone: true}">
<mat-checkbox
class="idp-desc cnsl-secondary-text"
[(ngModel)]="showIdSecretSection"
[disabled]="(canWrite | async) === false"
[ngModelOptions]="{ standalone: true }"
>
Update Client Secret
</mat-checkbox>
<cnsl-form-field appearance="outline" class="formfield" *ngIf="showIdSecretSection">
<cnsl-form-field class="formfield" *ngIf="showIdSecretSection">
<cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="line">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
<input cnslInput [matChipInputFor]="chipScopesList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addScope($event)">
<input
cnslInput
[matChipInputFor]="chipScopesList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addScope($event)"
/>
</cnsl-form-field>
<button (click)="addScope($any($event))" mat-icon-button>
<mat-icon>add</mat-icon>
</button>
</div>
<cnsl-form-field appearance="outline" class="formfield fullwidth">
<cnsl-form-field class="formfield fullwidth">
<mat-chip-list class="chip-list" #chipScopesList aria-label="scope selection">
<mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false" removable
(removed)="removeScope(scope)" [disabled]="(canWrite | async) === false">
{{scope}} <mat-icon matChipRemove>cancel</mat-icon>
<mat-chip
class="chip"
*ngFor="let scope of scopesList?.value"
selectable="false"
removable
(removed)="removeScope(scope)"
[disabled]="(canWrite | async) === false"
>
{{ scope }} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</cnsl-form-field>
@@ -104,7 +136,7 @@
<cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="displayNameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINGFIELD.'+field | translate }}
{{ 'IDP.MAPPINGFIELD.' + field | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
@@ -112,7 +144,7 @@
<cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="usernameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINGFIELD.'+field | translate }}
{{ 'IDP.MAPPINGFIELD.' + field | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
@@ -120,8 +152,13 @@
</ng-container>
<div class="btn-wrapper">
<button color="primary" mat-raised-button class="continue-button"
[disabled]="oidcConfigForm.invalid || (canWrite | async) === false" type="submit">
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="oidcConfigForm.invalid || (canWrite | async) === false"
type="submit"
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
@@ -129,28 +166,28 @@
</ng-container>
<ng-container *ngIf="idp?.jwtConfig && jwtConfigForm">
<h2>{{'IDP.JWT.TITLE' | translate}}</h2>
<p>{{'IDP.JWT.DESCRIPTION' | translate}}</p>
<h2>{{ 'IDP.JWT.TITLE' | translate }}</h2>
<p>{{ 'IDP.JWT.DESCRIPTION' | translate }}</p>
<form (ngSubmit)="updateJwtConfig()">
<ng-container [formGroup]="jwtConfigForm">
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="issuer" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="headerName" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.JWT.JWTENDPOINT' | translate }}</cnsl-label>
<input cnslInput formControlName="jwtEndpoint" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
<input cnslInput formControlName="keysEndpoint" />
</cnsl-form-field>
@@ -158,11 +195,16 @@
</ng-container>
<div class="btn-wrapper">
<button color="primary" mat-raised-button class="continue-button"
[disabled]="jwtConfigForm.invalid || (canWrite | async) === false" type="submit">
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="jwtConfigForm.invalid || (canWrite | async) === false"
type="submit"
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
</ng-container>
</div>
</div>