TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-02-28 20:17:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console, login): Idp detail and create layout optimization, login - sub formfield link spacing (#3755)

Browse Source 
* idp detail, create layout

* fat finger fix

Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Max Peintner 2022-06-03 09:20:56 +02:00 committed by GitHub
parent 0c14614d02
commit ebb73186b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 389 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
console/src/app/modules/idp-create/idp-create.component.html
View File

@ -26,11 +26,11 @@
<form [formGroup]="oidcFormGroup" (ngSubmit)="addOIDCIdp()">
<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>
<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>
@ -46,28 +46,22 @@
</cnsl-info-section>
<div class="idp-content">
<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>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
</div>
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-card class="scope-card">
<div class="idp-scopes">
<div class="flex-line">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
<mat-chip-list #chipScopesList aria-label="scope selection" *ngIf="scopesList">
<mat-chip
class="chip"
*ngFor="let scope of scopesList.value"
selectable="false"
removable
(removed)="removeScope(scope)"
>
{{ scope }} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input
cnslInput
[matChipInputFor]="chipScopesList"
@ -75,11 +69,30 @@
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addScope($event)"
/>
</cnsl-form-field>
<button class="scope-add-button" (click)="addScope($any($event))" mat-icon-button>
<mat-icon>add</mat-icon>
</button>
</div>
<cnsl-form-field class="formfield">
<mat-chip-list #chipScopesList aria-label="scope selection">
<mat-chip
class="chip"
*ngFor="let scope of scopesList?.value"
selectable="false"
removable
(removed)="removeScope(scope)"
>
{{ scope }} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</cnsl-form-field>
</div>
</cnsl-card>
</div>
<div class="idp-content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="idpDisplayNameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
@ -87,7 +100,7 @@
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="usernameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
@ -113,15 +126,15 @@
<form [formGroup]="jwtFormGroup" (ngSubmit)="addJWTIdp()">
<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="jwtName" />
</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="jwtHeaderName" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="jwtIssuer" />
</cnsl-form-field>
@ -137,11 +150,11 @@
</cnsl-info-section>
<div class="idp-content">
<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="jwtKeysEndpoint" />
</cnsl-form-field>

48
console/src/app/modules/idp-create/idp-create.component.scss
View File

@ -13,43 +13,71 @@
.auto-reg-info {
display: block;
width: 100%;
max-width: 400px;
.auto-reg-desc {
margin: 0 0 1rem 0;
}
}
.idp-content {
display: flex;
margin: 0 -0.5rem;
flex-wrap: wrap;
.idp-create-content {
.formfield {
display: block;
max-width: 400px;
.mat-chip-input {
width: 100%;
margin: 0;
}
.chip {
border-radius: 0.5rem;
height: 40px;
}
@media only screen and (max-width: 450px) {
max-width: none;
}
}
.idp-content {
.desc {
flex-basis: 100%;
margin: 0 0.5rem;
margin-bottom: 1rem;
}
.scope-card {
max-width: 400px;
display: block;
.idp-scopes {
.flex-line {
display: flex;
align-items: flex-start;
.formfield {
flex: 1;
margin: 0 0.5rem;
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
.scope-add-button {
margin-top: 1.75rem;
}
}
}
}
}
}
.idp-create-actions {
display: flex;
justify-content: space-between;
margin-top: 1rem;
button[mat-stroked-button] {
border-radius: 0.5rem;
margin-right: 1rem;
}
button[mat-raised-button] {
border-radius: 0.5rem;
margin-right: 1rem;
}
}

13
console/src/app/modules/idp-create/idp-create.component.ts
View File

@ -171,15 +171,16 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
.then((idp) => {
setTimeout(() => {
this.loading = false;
this.router.navigate([
this.router.navigate(
[
this.serviceType === PolicyComponentServiceType.MGMT
? 'org'
? '/org-settings'
: this.serviceType === PolicyComponentServiceType.ADMIN
? 'iam'
? '/settings'
: '',
'policy',
'login',
]);
],
{ queryParams: { id: 'idp' } },
);
}, 2000);
})
.catch((error) => {

2
console/src/app/modules/idp-create/idp-create.module.ts
View File

@ -11,6 +11,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';
import { CardModule } from '../card/card.module';
import { CreateLayoutModule } from '../create-layout/create-layout.module';
import { InfoSectionModule } from '../info-section/info-section.module';
import { IdpCreateRoutingModule } from './idp-create-routing.module';
@ -31,6 +32,7 @@ import { IdpTypeRadioComponent } from './idp-type-radio/idp-type-radio.component
MatSelectModule,
MatIconModule,
MatChipsModule,
CardModule,
MatCheckboxModule,
MatTooltipModule,
TranslateModule,

4
console/src/app/modules/idp-table/idp-table.component.html
View File

@ -129,8 +129,8 @@
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef>{{ 'IDP.TYPE' | translate }}</th>
<td class="pointer" [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
<span class="state" *ngIf="idp?.oidcConfig">{{ 'IDP.OIDC.TITLE' | translate }}</span>
<span class="state" *ngIf="idp?.jwtConfig">{{ 'IDP.JWT.TITLE' | translate }}</span>
<span class="state" *ngIf="idp?.oidcConfig">{{ 'IDP.TYPES.1' | translate }}</span>
<span class="state" *ngIf="idp?.jwtConfig">{{ 'IDP.TYPES.3' | translate }}</span>
</td>
</ng-container>

51
console/src/app/modules/idp/idp.component.html
View File

@ -1,6 +1,6 @@
<cnsl-top-view
title="{{ 'IDP.DETAIL.TITLE' | translate }}"
[sub]="idp?.oidcConfig ? ('IDP.OIDC.TITLE' | translate) : idp?.jwtConfig ? ('IDP.JWT.TITLE' | translate) : ''"
title="{{ idp?.name ? idp.name : ('IDP.DETAIL.TITLE' | translate) }}"
[sub]="idp?.oidcConfig ? ('IDP.TYPES.1' | translate) : idp?.jwtConfig ? ('IDP.TYPES.3' | translate) : ''"
[isActive]="idp?.state === IDPState.IDP_STATE_ACTIVE"
[isInactive]="idp?.state === IDPState.IDP_STATE_INACTIVE"
[hasContributors]="false"
@ -34,14 +34,18 @@
</cnsl-top-view>
<div class="max-width-container">
<form class="idp-form" (ngSubmit)="updateIdp()">
<div class="idp-wrapper">
<h2>{{ 'IDP.OIDC.GENERAL' | translate }}</h2>
<form (ngSubmit)="updateIdp()">
<ng-container [formGroup]="idpForm">
<div class="idp-content">
<cnsl-form-field class="formfield">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.STYLE' | translate }}</cnsl-label>
<mat-select formControlName="stylingType">
<mat-option *ngFor="let field of styleFields" [value]="field">
@ -81,14 +85,16 @@
<form (ngSubmit)="updateOidcConfig()">
<ng-container [formGroup]="oidcConfigForm">
<div class="idp-content">
<cnsl-form-field class="formfield">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="issuer" />
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-form-field class="idp-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"
@ -97,14 +103,17 @@
>
Update Client Secret
</mat-checkbox>
<cnsl-form-field class="formfield" *ngIf="showIdSecretSection">
<cnsl-form-field class="idp-formfield" *ngIf="showIdSecretSection">
<cnsl-label>{{ 'IDP.CLIENTSECRET' | translate }}</cnsl-label>
<input cnslInput formControlName="clientSecret" />
</cnsl-form-field>
<div class="line">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
<cnsl-card class="scope-card">
<div class="scope-card-content">
<div class="flex-line">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.SCOPESLIST' | translate }}</cnsl-label>
<input
cnslInput
[matChipInputFor]="chipScopesList"
@ -113,11 +122,13 @@
(matChipInputTokenEnd)="addScope($event)"
/>
</cnsl-form-field>
<button (click)="addScope($any($event))" mat-icon-button>
<mat-icon>add</mat-icon>
</button>
</div>
<cnsl-form-field class="formfield fullwidth">
<cnsl-form-field class="idp-formfield">
<mat-chip-list class="chip-list" #chipScopesList aria-label="scope selection">
<mat-chip
class="chip"
@ -131,8 +142,10 @@
</mat-chip>
</mat-chip-list>
</cnsl-form-field>
</div>
</cnsl-card>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="displayNameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
@ -140,7 +153,8 @@
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="usernameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
@ -172,22 +186,22 @@
<form (ngSubmit)="updateJwtConfig()">
<ng-container [formGroup]="jwtConfigForm">
<div class="idp-content">
<cnsl-form-field class="formfield">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="issuer" />
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.JWT.HEADERNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="headerName" />
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.JWT.JWTENDPOINT' | translate }}</cnsl-label>
<input cnslInput formControlName="jwtEndpoint" />
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-form-field class="idp-formfield">
<cnsl-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
<input cnslInput formControlName="keysEndpoint" />
</cnsl-form-field>
@ -207,4 +221,5 @@
</div>
</form>
</ng-container>
</div>
</div>

61
console/src/app/modules/idp/idp.component.scss
View File

@ -1,58 +1,58 @@
.idp-form {
padding-top: 1rem;
}
.idp-desc {
font-size: 14px;
}
.idp-content {
display: flex;
flex-direction: row;
margin: 0 -0.5rem;
flex-wrap: wrap;
.idp-wrapper {
margin-top: 2rem;
.idp-desc {
flex-basis: 100%;
margin: 0 0.5rem;
font-size: 14px;
}
.idp-content {
.idp-desc {
margin-bottom: 1rem;
}
.formfield {
flex: 1 1 auto;
margin: 0 0.5rem;
min-width: 150px;
.idp-formfield {
display: block;
max-width: 400px;
.chip {
border-radius: 0.5rem;
height: 40px;
}
&.fullwidth {
flex-basis: 100%;
.mat-chip-input {
width: 100%;
margin: 0;
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
max-width: none;
}
}
.auto-reg-info {
margin: 0 0.5rem 1rem 0.5rem;
margin: 0 0 1rem 0;
display: block;
width: 100%;
max-width: 400px;
.auto-reg-desc {
margin: 0 0 1rem 0;
}
}
.line {
.scope-card {
max-width: 400px;
display: block;
.scope-card-content {
display: block;
.flex-line {
display: flex;
align-items: flex-end;
width: 100%;
.formfield {
.idp-formfield {
flex: 1;
input {
@ -64,14 +64,16 @@
margin-bottom: 12px;
}
}
}
}
}
}
.btn-wrapper {
.btn-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 1rem;
.continue-button {
margin-bottom: 4rem;
margin-bottom: 2rem;
display: block;
@media only screen and (max-width: 450px) {
@ -79,4 +81,5 @@
margin-bottom: 2rem;
}
}
}
}

2
console/src/app/modules/idp/idp.module.ts
View File

@ -14,6 +14,7 @@ import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.
import { InputModule } from 'src/app/modules/input/input.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { CardModule } from '../card/card.module';
import { InfoRowModule } from '../info-row/info-row.module';
import { InfoSectionModule } from '../info-section/info-section.module';
import { TopViewModule } from '../top-view/top-view.module';
@ -37,6 +38,7 @@ import { IdpComponent } from './idp.component';
TopViewModule,
MatTooltipModule,
MatSelectModule,
CardModule,
TranslateModule,
MatCheckboxModule,
InfoRowModule,

7
console/src/assets/i18n/de.json
View File

@ -1409,7 +1409,7 @@
},
"OWNERTYPES": {
"0": "unknown",
"1": "System",
"1": "Instanz",
"2": "Organisation"
},
"TYPES": {
@ -1462,11 +1462,12 @@
"DELETE_SELECTION_DESCRIPTION": "Sie sind im Begriff mehrere Identity Provider zu löschen. Die dadurch hervorgerufenen Änderungen sind unwiderruflich. Wollen Sie dies wirklich tun?",
"EMPTY": "Kein IDP vorhanden",
"OIDC": {
"TITLE": "OIDC IDP",
"GENERAL": "Generelle Information",
"TITLE": "OIDC Konfiguration",
"DESCRIPTION": "Geben Sie die Daten OIDC Identity Providers ein."
},
"JWT": {
"TITLE": "JWT IDP",
"TITLE": "JWT Konfiguration",
"DESCRIPTION": "Geben Sie die Daten JWT Identity Providers ein. ",
"HEADERNAME": "Header Name",
"JWTENDPOINT": "JWT Endpoint",

7
console/src/assets/i18n/en.json
View File

@ -1409,7 +1409,7 @@
},
"OWNERTYPES": {
"0": "unknown",
"1": "System",
"1": "Instance",
"2": "Organization"
},
"TYPES": {
@ -1462,11 +1462,12 @@
"DELETE_SELECTION_DESCRIPTION": "You are about to delete an identity provider. The resulting changes are irrevocable. Do you really want to do this?",
"EMPTY": "No IPD available",
"OIDC": {
"TITLE": "OIDC IDP",
"GENERAL": "General Information",
"TITLE": "OIDC Configuration",
"DESCRIPTION": "Enter the data for the OIDC Identity Provider."
},
"JWT": {
"TITLE": "JWT IDP",
"TITLE": "JWT Configuration",
"DESCRIPTION": "Enter the data for JWT Identity Provider.",
"HEADERNAME": "Header Name",
"JWTENDPOINT": "JWT Endpoint",

7
console/src/assets/i18n/it.json
View File

@ -1409,7 +1409,7 @@
},
"OWNERTYPES": {
"0": "sconosciuto",
"1": "Sistema",
"1": "Istanza",
"2": "Organizzazione"
},
"TYPES": {
@ -1462,11 +1462,12 @@
"DELETE_SELECTION_DESCRIPTION": "Stai per rimuovere un fornitore di identit\u00e0. I cambiamenti risultanti sono irrevocabili. Vuoi davvero farlo?",
"EMPTY": "Nessun IDP disponible",
"OIDC": {
"TITLE": "OIDC IDP",
"GENERAL": "Informazioni generali",
"TITLE": "Configurazione OIDC",
"DESCRIPTION": "Inserisci i dati per il OIDC Identity Provider."
},
"JWT": {
"TITLE": "JWT IDP",
"TITLE": "Configurazione JWT",
"DESCRIPTION": "Inserisci i dati per il JWT Identity Provider.",
"HEADERNAME": "Header Name",
"JWTENDPOINT": "JWT Endpoint",

4
internal/api/ui/login/static/resources/themes/scss/styles/a/a.scss
View File

@ -7,4 +7,8 @@ a {
&.block {
display: block;
}
&.sub-formfield-link {
margin: 10px 0;
}
}

1
internal/api/ui/login/static/resources/themes/scss/styles/button/button_base.scss
View File

@ -40,6 +40,7 @@ $lgn-icon-button-line-height: 40px !default;
border-radius: $lgn-button-border-radius;
overflow: visible;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
&[disabled] {
cursor: default;

10
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
View File

@ -280,6 +280,7 @@ footer .watermark .lgn-logo-watermark {
padding: 0 16px;
border-radius: 6px;
overflow: visible;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.lgn-button[disabled], .lgn-stroked-button[disabled], .lgn-icon-button[disabled] {
cursor: default;
@ -306,6 +307,7 @@ footer .watermark .lgn-logo-watermark {
padding: 0 16px;
border-radius: 6px;
overflow: visible;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transform: translate3d(0, 0, 0);
}
.lgn-raised-button[disabled] {
@ -507,6 +509,9 @@ a {
a.block {
display: block;
}
a.sub-formfield-link {
margin: 10px 0;
}
.lgn-idp {
display: block;
@ -1192,6 +1197,7 @@ footer .watermark .lgn-logo-watermark {
padding: 0 16px;
border-radius: 6px;
overflow: visible;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.lgn-button[disabled], .lgn-stroked-button[disabled], .lgn-icon-button[disabled] {
cursor: default;
@ -1218,6 +1224,7 @@ footer .watermark .lgn-logo-watermark {
padding: 0 16px;
border-radius: 6px;
overflow: visible;
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transform: translate3d(0, 0, 0);
}
.lgn-raised-button[disabled] {
@ -1419,6 +1426,9 @@ a {
a.block {
display: block;
}
a.sub-formfield-link {
margin: 10px 0;
}
.lgn-idp {
display: block;

2
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css.map
View File

File diff suppressed because one or more lines are too long

2
internal/api/ui/login/static/templates/password.html
View File

@ -22,7 +22,7 @@
{{template "error-message" .}}
{{ if showPasswordReset }}
<a class="block" href="{{ passwordResetUrl .AuthReqID }}">
<a class="block sub-formfield-link" href="{{ passwordResetUrl .AuthReqID }}">
{{t "Password.ResetLinkText"}}
</a>
{{ end }}