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

fix(console-v2): app detail layout, create layout stepper (#3680)

Browse Source 
* app detail

* app-detail layout

* app layout, create layout component, cleanup

* lint
This commit is contained in:
Max Peintner 2022-05-23 08:43:03 +02:00 committed by GitHub
parent 32ccada7a9
commit 6ec3c56883
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
56 changed files with 1901 additions and 1910 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.html
View File

@ -1,39 +1,51 @@
<div class="auth-method-radio-button-wrapper">
<div class="auth-method-radio-button-wrapper" [ngClass]="{ compact: compact }">
<ng-container *ngFor="let method of authMethods; index as i">
<input type="radio" [disabled]="method.disabled" (change)="emitChange()" [value]="method.key" [id]="method.key"
[(ngModel)]="selected" />
<label class="cnsl-radio-button" [ngClass]="{'first': i === 0, 'last': i === authMethods.length - 1}"
[for]="method.key">
<div class="recommended" [ngClass]="{'not': method.notRecommended}"
*ngIf="method.recommended || method.notRecommended">
{{(method.recommended ?
'APP.OIDC.RECOMMENDED' : 'APP.OIDC.NOTRECOMMENDED') | translate }}</div>
<div class="cnsl-radio-header" [ngStyle]="{'background': method.background}">
<span>{{method.prefix}}</span>
<div class="current" *ngIf="current === method.key">{{'APP.OIDC.CURRENT' | translate}}</div>
<input
type="radio"
[disabled]="method.disabled"
(change)="emitChange()"
[value]="method.key"
[id]="method.key"
[(ngModel)]="selected"
/>
<label
class="cnsl-radio-button"
[ngClass]="{ compact: compact, first: i === 0, last: i === authMethods.length - 1 }"
[for]="method.key"
>
<div
class="recommended"
[ngClass]="{ not: method.notRecommended }"
*ngIf="method.recommended || method.notRecommended"
>
{{ (method.recommended ? 'APP.OIDC.RECOMMENDED' : 'APP.OIDC.NOTRECOMMENDED') | translate }}
</div>
<p>{{method.titleI18nKey | translate}}</p>
<p class="type-desc cnsl-secondary-text">{{method.descI18nKey | translate}}</p>
<div class="cnsl-radio-header" [ngStyle]="{ background: method.background }">
<span>{{ method.prefix }}</span>
<div class="current" *ngIf="current === method.key">{{ 'APP.OIDC.CURRENT' | translate }}</div>
</div>
<p>{{ method.titleI18nKey | translate }}</p>
<p class="type-desc cnsl-secondary-text">{{ method.descI18nKey | translate }}</p>
<span class="fill-space"></span>
<div class="app-specs cnsl-secondary-text">
<div class="row" *ngIf="isOIDC && method && method.responseType !== undefined">
<span>{{'APP.OIDC.RESPONSETYPE' | translate}}</span>
<span>{{('APP.OIDC.RESPONSE.'+method.responseType.toString()) | translate}}</span>
<span>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</span>
<span>{{ 'APP.OIDC.RESPONSE.' + method.responseType.toString() | translate }}</span>
</div>
<div class="row" *ngIf="isOIDC && method.grantType !== undefined">
<span>{{'APP.GRANT' | translate}}</span>
<span>{{('APP.OIDC.GRANT.'+method.grantType.toString()) | translate}}</span>
<span>{{ 'APP.GRANT' | translate }}</span>
<span>{{ 'APP.OIDC.GRANT.' + method.grantType.toString() | translate }}</span>
</div>
<div class="row" *ngIf="isOIDC && method.authMethod !== undefined">
<span>{{'APP.AUTHMETHOD' | translate}}</span>
<span>{{('APP.OIDC.AUTHMETHOD.'+method.authMethod.toString()) | translate}}</span>
<span>{{ 'APP.AUTHMETHOD' | translate }}</span>
<span>{{ 'APP.OIDC.AUTHMETHOD.' + method.authMethod.toString() | translate }}</span>
</div>
<div class="row" *ngIf="!isOIDC && method.apiAuthMethod !== undefined">
<span>{{'APP.AUTHMETHOD' | translate}}</span>
<span>{{('APP.API.AUTHMETHOD.'+method.apiAuthMethod.toString()) | translate}}</span>
<span>{{ 'APP.AUTHMETHOD' | translate }}</span>
<span>{{ 'APP.API.AUTHMETHOD.' + method.apiAuthMethod.toString() | translate }}</span>
</div>
</div>
</label>
</ng-container>
</div>
</div>

18
console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
View File

@ -9,6 +9,13 @@
margin: 0;
padding-bottom: 0.5rem;
padding-top: 1rem;
&.compact {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
row-gap: 1rem;
}
}
@mixin app-auth-method-radio-theme($theme) {
@ -108,6 +115,17 @@
}
}
&.compact {
margin: 0;
width: 230px;
.cnsl-radio-header {
span {
margin: 1rem 0 1.5rem 0;
}
}
}
p {
text-align: center;
padding: 0 1rem;

11
console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.ts
View File

@ -1,9 +1,9 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import {
APIAuthMethodType,
OIDCAuthMethodType,
OIDCGrantType,
OIDCResponseType,
APIAuthMethodType,
OIDCAuthMethodType,
OIDCGrantType,
OIDCResponseType,
} from 'src/app/proto/generated/zitadel/app_pb';
export interface RadioItemAuthType {
@ -16,7 +16,7 @@ export interface RadioItemAuthType {
responseType?: OIDCResponseType;
grantType?: OIDCGrantType;
authMethod?: OIDCAuthMethodType;
apiAuthMethod?: | APIAuthMethodType;
apiAuthMethod?: APIAuthMethodType;
recommended?: boolean;
notRecommended?: boolean;
}
@ -31,6 +31,7 @@ export class AppAuthMethodRadioComponent {
@Input() selected: string = '';
@Input() authMethods!: RadioItemAuthType[];
@Input() isOIDC: boolean = false;
@Input() compact: boolean = false;
@Output() selectedMethod: EventEmitter<string> = new EventEmitter();
public emitChange(): void {

17
console/src/app/modules/create-layout/create-layout.component.html Normal file
View File

@ -0,0 +1,17 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="create-layout-container">
<button (click)="close()" mat-icon-button matTooltip="{{ 'ACTIONS.CLOSE' | translate }}">
<mat-icon>close</mat-icon>
</button>
<span class="abort">{{ title }}</span
><span class="abort-2" *ngIf="createSteps > 1"
>{{ 'ACTIONS.STEP' | translate }} {{ currentCreateStep }} {{ 'ACTIONS.OF' | translate }} {{ createSteps }}</span
>
</div>
<div class="create-layout-content">
<ng-content></ng-content>
</div>
</div>
</div>

23
console/src/app/modules/create-layout/create-layout.component.scss Normal file
View File

@ -0,0 +1,23 @@
.create-layout-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
margin-left: 2rem;
white-space: nowrap;
font-size: 12px;
padding: 0.25rem 1rem;
border: 1px solid rgba(#8795a1, 0.2);
border-radius: 50vw;
}
}
.create-layout-content {
padding-left: 4.5rem;
}

12
console/src/app/modules/links/links.component.spec.ts → console/src/app/modules/create-layout/create-layout.component.spec.ts
View File

@ -1,20 +1,20 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LinksComponent } from './links.component';
import { CreateLayoutComponent } from './create-layout.component';
describe('LinksComponent', () => {
let component: LinksComponent;
let fixture: ComponentFixture<LinksComponent>;
describe('CreateLayoutComponent', () => {
let component: CreateLayoutComponent;
let fixture: ComponentFixture<CreateLayoutComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LinksComponent ],
declarations: [ CreateLayoutComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(LinksComponent);
fixture = TestBed.createComponent(CreateLayoutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

18
console/src/app/modules/create-layout/create-layout.component.ts Normal file
View File

@ -0,0 +1,18 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'cnsl-create-layout',
templateUrl: './create-layout.component.html',
styleUrls: ['./create-layout.component.scss'],
})
export class CreateLayoutComponent {
@Input() currentCreateStep: number = 1;
@Input() createSteps: number = 1;
@Input() title: string = '';
@Output() closed: EventEmitter<void> = new EventEmitter();
constructor() {}
close() {
this.closed.emit();
}
}

15
console/src/app/modules/create-layout/create-layout.module.ts Normal file
View File

@ -0,0 +1,15 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutComponent } from './create-layout.component';
@NgModule({
declarations: [CreateLayoutComponent],
imports: [CommonModule, MatIconModule, MatButtonModule, TranslateModule, MatTooltipModule],
exports: [CreateLayoutComponent],
})
export class CreateLayoutModule {}

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

@ -1,179 +1,161 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="abort-container">
<button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<span class="abort">{{ 'IDP.CREATE.TITLE' | translate }}</span
><span class="abort-2">Step {{ currentCreateStep }} of {{ createSteps }}</span>
</div>
<cnsl-create-layout
title="{{ 'IDP.CREATE.TITLE' | translate }}"
[createSteps]="createSteps"
[currentCreateStep]="currentCreateStep"
(closed)="close()"
>
<div class="idp-create-content">
<h1>{{ 'IDP.CREATE.TITLE' | translate }}</h1>
<div class="idp-create-content">
<h1>{{ 'IDP.CREATE.TITLE' | translate }}</h1>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<ng-container *ngIf="currentCreateStep === 1">
<p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.DESCRIPTION' | translate }}</p>
<ng-container *ngIf="currentCreateStep === 1">
<p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.DESCRIPTION' | translate }}</p>
<cnsl-idp-type-radio [types]="idpTypes" (selectedType)="idpType = $event" [selected]="idpType"> </cnsl-idp-type-radio>
<cnsl-idp-type-radio [types]="idpTypes" (selectedType)="idpType = $event" [selected]="idpType">
</cnsl-idp-type-radio>
<div class="first-step-actions">
<button mat-raised-button [disabled]="!idpType" color="primary" (click)="currentCreateStep = 2">
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</div>
</ng-container>
<div class="first-step-actions">
<button mat-raised-button [disabled]="!idpType" color="primary" (click)="currentCreateStep = 2">
{{ 'ACTIONS.CONTINUE' | translate }}
<ng-container *ngIf="currentCreateStep === 2 && idpType === OIDC">
<p class="desc cnsl-secondary-text">{{ 'IDP.OIDC.DESCRIPTION' | translate }}</p>
<form [formGroup]="oidcFormGroup" (ngSubmit)="addOIDCIdp()">
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="issuer" />
</cnsl-form-field>
</div>
<cnsl-info-section class="auto-reg-info">
<div>
<p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
<mat-checkbox formControlName="autoRegister">
{{ 'IDP.AUTOREGISTER' | translate }}
</mat-checkbox>
</div>
</cnsl-info-section>
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" 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-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"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addScope($event)"
/>
</mat-chip-list>
</cnsl-form-field>
</div>
<div class="idp-content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="idpDisplayNameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINGFIELD.' + field | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="usernameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINGFIELD.' + field | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
</div>
<div class="idp-create-actions">
<button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
{{ 'ACTIONS.BACK' | translate }}
</button>
<button color="primary" mat-raised-button class="continue-button" [disabled]="oidcFormGroup.invalid" type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</ng-container>
</form>
</ng-container>
<ng-container *ngIf="currentCreateStep === 2 && idpType === OIDC">
<p class="desc cnsl-secondary-text">{{ 'IDP.OIDC.DESCRIPTION' | translate }}</p>
<ng-container *ngIf="currentCreateStep === 2 && idpType === JWT">
<p class="desc cnsl-secondary-text">{{ 'IDP.JWT.DESCRIPTION' | translate }}</p>
<form [formGroup]="oidcFormGroup" (ngSubmit)="addOIDCIdp()">
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="issuer" />
</cnsl-form-field>
<form [formGroup]="jwtFormGroup" (ngSubmit)="addJWTIdp()">
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="jwtName" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" 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-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="jwtIssuer" />
</cnsl-form-field>
</div>
<cnsl-info-section class="auto-reg-info">
<div>
<p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
<mat-checkbox formControlName="jwtAutoRegister">
{{ 'IDP.AUTOREGISTER' | translate }}
</mat-checkbox>
</div>
</cnsl-info-section>
<cnsl-info-section class="auto-reg-info">
<div>
<p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
<mat-checkbox formControlName="autoRegister">
{{ 'IDP.AUTOREGISTER' | translate }}
</mat-checkbox>
</div>
</cnsl-info-section>
<div class="idp-content">
<cnsl-form-field appearance="outline" 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-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
<input cnslInput formControlName="jwtKeysEndpoint" />
</cnsl-form-field>
</div>
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
<input cnslInput formControlName="clientId" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" 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-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"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addScope($event)"
/>
</mat-chip-list>
</cnsl-form-field>
</div>
<div class="idp-content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="idpDisplayNameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINGFIELD.' + field | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</cnsl-label>
<mat-select formControlName="usernameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINGFIELD.' + field | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
</div>
<div class="idp-create-actions">
<button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
{{ 'ACTIONS.BACK' | translate }}
</button>
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="oidcFormGroup.invalid"
type="submit"
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
</ng-container>
<ng-container *ngIf="currentCreateStep === 2 && idpType === JWT">
<p class="desc cnsl-secondary-text">{{ 'IDP.JWT.DESCRIPTION' | translate }}</p>
<form [formGroup]="jwtFormGroup" (ngSubmit)="addJWTIdp()">
<div class="idp-content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="jwtName" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" 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-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
<input cnslInput formControlName="jwtIssuer" />
</cnsl-form-field>
</div>
<cnsl-info-section class="auto-reg-info">
<div>
<p class="auto-reg-desc">{{ 'IDP.AUTOREGISTER_DESC' | translate }}</p>
<mat-checkbox formControlName="jwtAutoRegister">
{{ 'IDP.AUTOREGISTER' | translate }}
</mat-checkbox>
</div>
</cnsl-info-section>
<div class="idp-content">
<cnsl-form-field appearance="outline" 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-label>{{ 'IDP.JWT.JWTKEYSENDPOINT' | translate }}</cnsl-label>
<input cnslInput formControlName="jwtKeysEndpoint" />
</cnsl-form-field>
</div>
<div class="idp-create-actions">
<button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
{{ 'ACTIONS.BACK' | translate }}
</button>
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="jwtFormGroup.invalid"
type="submit"
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
</ng-container>
</div>
<div class="idp-create-actions">
<button color="primary" (click)="currentCreateStep = 1" mat-stroked-button class="back-button" type="button">
{{ 'ACTIONS.BACK' | translate }}
</button>
<button color="primary" mat-raised-button class="continue-button" [disabled]="jwtFormGroup.invalid" type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
</ng-container>
</div>
</div>
</cnsl-create-layout>

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

@ -2,75 +2,54 @@
font-size: 14px;
}
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
.add-line-btn {
margin-bottom: 1rem;
}
.idp-create-content {
padding: 0 0 0 72px;
.first-step-actions {
margin-top: 1rem;
}
.first-step-actions {
margin-top: 1rem;
.auto-reg-info {
display: block;
width: 100%;
.auto-reg-desc {
margin: 0 0 1rem 0;
}
}
.idp-content {
display: flex;
margin: 0 -0.5rem;
flex-wrap: wrap;
.desc {
flex-basis: 100%;
margin: 0 0.5rem;
margin-bottom: 1rem;
}
.auto-reg-info {
display: block;
width: 100%;
.formfield {
flex: 1;
margin: 0 0.5rem;
.auto-reg-desc {
margin: 0 0 1rem 0;
}
}
.idp-content {
display: flex;
margin: 0 -0.5rem;
flex-wrap: wrap;
.desc {
@media only screen and (max-width: 450px) {
flex-basis: 100%;
margin: 0 0.5rem;
margin-bottom: 1rem;
}
.formfield {
flex: 1;
margin: 0 0.5rem;
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
}
.idp-create-actions {
display: flex;
justify-content: space-between;
margin-top: 1rem;
button[mat-stroked-button] {
border-radius: 0.5rem;
}
button[mat-raised-button] {
border-radius: 0.5rem;
}
}
}
.idp-create-actions {
display: flex;
justify-content: space-between;
margin-top: 1rem;
button[mat-stroked-button] {
border-radius: 0.5rem;
}
button[mat-raised-button] {
border-radius: 0.5rem;
}
}

4
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 { CreateLayoutModule } from '../create-layout/create-layout.module';
import { InfoSectionModule } from '../info-section/info-section.module';
import { IdpCreateRoutingModule } from './idp-create-routing.module';
import { IdpCreateComponent } from './idp-create.component';
@ -23,6 +24,7 @@ import { IdpTypeRadioComponent } from './idp-type-radio/idp-type-radio.component
CommonModule,
FormsModule,
ReactiveFormsModule,
CreateLayoutModule,
InfoSectionModule,
InputModule,
MatButtonModule,
@ -35,4 +37,4 @@ import { IdpTypeRadioComponent } from './idp-type-radio/idp-type-radio.component
MatProgressBarModule,
],
})
export class IdpCreateModule { }
export class IdpCreateModule {}

36
console/src/app/modules/links/links.component.html
View File

@ -1,36 +0,0 @@
<div class="next-steps">
<div class="title-row">
<h5>{{'NEXTSTEPS.TITLE' | translate}}</h5>
<i class="las la-shoe-prints"></i>
</div>
<div class="row">
<ng-container *ngFor="let link of links">
<ng-template *ngIf="link.withRole" cnslHasRole [hasRole]="link.withRole">
<div class="step card">
<ng-content select="[icon]"></ng-content>
<h6>{{ link.i18nTitle | translate }}</h6>
<p class="cnsl-secondary-text">{{link.i18nDesc | translate}}</p>
<span class="fill-space"></span>
<a *ngIf="link.routerLink" [routerLink]="link.routerLink" color="primary" mat-stroked-button>
{{'ACTIONS.CONTINUE' | translate}}
</a>
<a *ngIf="link.href" [href]="link.href" target="_blank" color="primary" mat-stroked-button>
{{'ACTIONS.CONTINUE' | translate}}
</a>
</div>
</ng-template>
<div class="step card" *ngIf="!link.withRole">
<i *ngIf="link.iconClasses" class="{{link.iconClasses}}"></i>
<h6>{{ link.i18nTitle | translate }}</h6>
<p class="cnsl-secondary-text">{{link.i18nDesc | translate}}</p>
<span class="fill-space"></span>
<a *ngIf="link.routerLink" [routerLink]="link.routerLink" mat-stroked-button>
{{'ACTIONS.CONTINUE' | translate}}
</a>
<a *ngIf="link.href" [href]="link.href" target="_blank" mat-stroked-button>
{{'ACTIONS.CONTINUE' | translate}}
</a>
</div>
</ng-container>
</div>
</div>

67
console/src/app/modules/links/links.component.scss
View File

@ -1,67 +0,0 @@
.next-steps {
margin-top: 4rem;
.title-row {
display: flex;
align-items: center;
h5 {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.05em;
font-weight: 400;
margin-right: 1rem;
}
}
.row {
display: grid;
row-gap: 1rem;
column-gap: 1rem;
grid-template-columns: 1fr 1fr 1fr;
padding-bottom: 0.5rem;
@media only screen and (max-width: 1300px) {
grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 500px) {
grid-template-columns: 1fr;
}
.step {
padding: 1rem;
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
align-items: flex-start;
i {
font-size: 2.5rem;
margin-bottom: 1rem;
}
h6 {
font-size: 1.1rem;
text-align: center;
font-weight: 400;
margin: 0;
}
p {
font-size: 14px;
margin: 1rem 0;
}
.fill-space {
flex: 1;
}
button {
display: block;
margin: auto;
}
}
}
}

20
console/src/app/modules/links/links.component.ts
View File

@ -1,20 +0,0 @@
import { Component, Input } from '@angular/core';
export interface CnslLinks {
i18nTitle: string;
i18nDesc: string;
routerLink?: any;
href?: string;
iconClasses?: string;
withRole?: string[] | RegExp[];
}
@Component({
selector: 'cnsl-links',
templateUrl: './links.component.html',
styleUrls: ['./links.component.scss'],
})
export class LinksComponent {
@Input() links: Array<CnslLinks> = [];
}

24
console/src/app/modules/links/links.module.ts
View File

@ -1,24 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LinksComponent } from './links.component';
import { TranslateModule } from '@ngx-translate/core';
import { RouterModule } from '@angular/router';
import { MatButton, MatButtonModule } from '@angular/material/button';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
@NgModule({
declarations: [LinksComponent],
imports: [
CommonModule,
TranslateModule,
RouterModule,
MatButtonModule,
HasRoleModule,
],
exports: [
LinksComponent,
],
})
export class LinksModule { }

2
console/src/app/modules/policies/privacy-policy/privacy-policy.component.ts
View File

@ -19,7 +19,6 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { InfoSectionType } from '../../info-section/info-section.component';
import { CnslLinks } from '../../links/links.component';
import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
import { PolicyComponentServiceType } from '../policy-component-types.enum';
@ -33,7 +32,6 @@ export class PrivacyPolicyComponent implements OnInit, OnDestroy {
public PolicyComponentServiceType: any = PolicyComponentServiceType;
@Input() public serviceType: PolicyComponentServiceType = PolicyComponentServiceType.MGMT;
public nextLinks: CnslLinks[] = [];
private sub: Subscription = new Subscription();
public privacyPolicy: PrivacyPolicy.AsObject | undefined = undefined;

8
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
View File

@ -118,7 +118,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
case PolicyComponentServiceType.MGMT:
return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTDARKLOGO, formData, this.org.id));
case PolicyComponentServiceType.ADMIN:
return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKLOGO, formData, this.org.id));
return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKLOGO, formData));
}
}
if (theme === Theme.LIGHT) {
@ -126,7 +126,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
case PolicyComponentServiceType.MGMT:
return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTLOGO, formData, this.org.id));
case PolicyComponentServiceType.ADMIN:
return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMLOGO, formData, this.org.id));
return this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMLOGO, formData));
}
}
}
@ -273,7 +273,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTDARKICON, formData, this.org.id));
break;
case PolicyComponentServiceType.ADMIN:
this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKICON, formData, this.org.id));
this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMDARKICON, formData));
break;
}
}
@ -283,7 +283,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
this.handleUploadPromise(this.assetService.upload(AssetEndpoint.MGMTICON, formData, this.org.id));
break;
case PolicyComponentServiceType.ADMIN:
this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMICON, formData, this.org.id));
this.handleUploadPromise(this.assetService.upload(AssetEndpoint.IAMICON, formData));
break;
}
}

383
console/src/app/pages/org-create/org-create.component.html
View File

@ -1,225 +1,214 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="abort-container">
<button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<span class="abort">{{ 'ORG.PAGES.CREATE' | translate }}</span>
<span class="abort-2">Step {{ currentCreateStep }} of {{ createSteps }}</span>
</div>
<cnsl-create-layout
title="{{ 'ORG.PAGES.CREATE' | translate }}"
[createSteps]="createSteps"
[currentCreateStep]="currentCreateStep"
(closed)="close()"
>
<div class="org-create-main-content">
<ng-template cnslHasRole [hasRole]="['iam.write']">
<mat-slide-toggle
[disabled]="currentCreateStep !== 1"
class="example-margin"
color="primary"
(change)="changeSelf($event)"
[(ngModel)]="forSelf"
>
{{ 'ORG.PAGES.USERSELFACCOUNT' | translate }}
</mat-slide-toggle>
<div class="org-create-main-content">
<ng-template cnslHasRole [hasRole]="['iam.write']">
<mat-slide-toggle
[disabled]="currentCreateStep !== 1"
class="example-margin"
color="primary"
(change)="changeSelf($event)"
[(ngModel)]="forSelf"
>
{{ 'ORG.PAGES.USERSELFACCOUNT' | translate }}
</mat-slide-toggle>
<ng-container *ngIf="!forSelf">
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE' | translate }}</h1>
<ng-container *ngIf="!forSelf">
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE' | translate }}</h1>
<form [formGroup]="orgForm" (ngSubmit)="next()">
<div class="content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.DOMAIN' | translate }}</cnsl-label>
<input cnslInput formControlName="domain" />
</cnsl-form-field>
</div>
<form [formGroup]="orgForm" (ngSubmit)="next()">
<div class="btn-container">
<span class="fill-space"></span>
<button
[disabled]="orgForm.invalid"
color="primary"
mat-raised-button
class="big-button"
cdkFocusInitial
type="submit"
>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</div>
</form>
</ng-container>
<ng-container *ngIf="currentCreateStep === createSteps">
<h1>{{ 'ORG.PAGES.ORGDETAILUSER_TITLE' | translate }}</h1>
<div class="user">
<form [formGroup]="userForm" class="form">
<div class="content">
<p class="section cnsl-secondary-text">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
<cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.DOMAIN' | translate }}</cnsl-label>
<input cnslInput formControlName="domain" />
<cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
<input cnslInput formControlName="email" required />
<span cnslError *ngIf="email?.invalid && email?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="firstName" required />
<span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="lastName" required />
<span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="nickName" />
<span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
</div>
<div class="btn-container">
<span class="fill-space"></span>
<button
[disabled]="orgForm.invalid"
color="primary"
mat-raised-button
class="big-button"
cdkFocusInitial
type="submit"
<p class="section cnsl-secondary-text">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
<mat-select formControlName="gender">
<mat-option *ngFor="let gender of genders" [value]="gender">
{{ 'GENDERS.' + gender | translate }}
</mat-option>
</mat-select>
<span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
<mat-select formControlName="preferredLanguage">
<mat-option *ngFor="let language of languages" [value]="language">
{{ 'LANGUAGES.' + language | translate }}
</mat-option>
<span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</mat-select>
</cnsl-form-field>
<mat-checkbox
class="checkbox"
[(ngModel)]="usePassword"
[ngModelOptions]="{ standalone: true }"
(change)="initPwdValidators()"
>
{{ 'ORG.PAGES.USEPASSWORD' | translate }}</mat-checkbox
>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</div>
</form>
</ng-container>
<ng-container *ngIf="currentCreateStep === createSteps">
<h1>{{ 'ORG.PAGES.ORGDETAILUSER_TITLE' | translate }}</h1>
<ng-container *ngIf="usePassword && pwdForm">
<p class="section cnsl-secondary-text">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>
<div class="user">
<form [formGroup]="userForm" class="form">
<div class="content">
<p class="section cnsl-secondary-text">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}</cnsl-label>
<input cnslInput formControlName="email" required />
<span cnslError *ngIf="email?.invalid && email?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="firstName" required />
<span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="lastName" required />
<span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="nickName" />
<span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
</cnsl-password-complexity-view>
<p class="section cnsl-secondary-text">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
<form [formGroup]="pwdForm" class="pwd-form">
<cnsl-form-field class="pwd" *ngIf="password" appearance="outline">
<cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
<input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
<mat-select formControlName="gender">
<mat-option *ngFor="let gender of genders" [value]="gender">
{{ 'GENDERS.' + gender | translate }}
</mat-option>
</mat-select>
<span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
<mat-select formControlName="preferredLanguage">
<mat-option *ngFor="let language of languages" [value]="language">
{{ 'LANGUAGES.' + language | translate }}
</mat-option>
<span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
<span cnslError *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</mat-select>
</cnsl-form-field>
</cnsl-form-field>
<cnsl-form-field class="pwd" *ngIf="confirmPassword" appearance="outline">
<cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
<input
cnslInput
autocomplete="off"
name="confirmPassword"
formControlName="confirmPassword"
type="password"
/>
<mat-checkbox
class="checkbox"
[(ngModel)]="usePassword"
[ngModelOptions]="{ standalone: true }"
(change)="initPwdValidators()"
>
{{ 'ORG.PAGES.USEPASSWORD' | translate }}</mat-checkbox
>
<ng-container *ngIf="usePassword && pwdForm">
<p class="section cnsl-secondary-text">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>
<cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
</cnsl-password-complexity-view>
<form [formGroup]="pwdForm" class="pwd-form">
<cnsl-form-field class="pwd" *ngIf="password" appearance="outline">
<cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
<input
cnslInput
autocomplete="off"
name="firstpassword"
formControlName="password"
type="password"
/>
<span cnslError *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="pwd" *ngIf="confirmPassword" appearance="outline">
<cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
<input
cnslInput
autocomplete="off"
name="confirmPassword"
formControlName="confirmPassword"
type="password"
/>
<span cnslError *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</form>
</ng-container>
</div>
<div class="btn-container">
<button color="primary" class="small-button" type="button" (click)="previous()" mat-stroked-button>
{{ 'ACTIONS.BACK' | translate }}
</button>
<span class="fill-space"></span>
<button
color="primary"
class="big-button"
(click)="finish()"
[disabled]="orgForm.invalid || userForm.invalid || (usePassword && pwdForm ? pwdForm?.invalid : false)"
mat-raised-button
>
{{ 'ACTIONS.FINISH' | translate }}
</button>
</div>
</form>
</div>
</ng-container>
</ng-container>
</ng-template>
<ng-template cnslHasRole [hasRole]="['org.create']">
<div *ngIf="forSelf">
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE_WITHOUT_DOMAIN' | translate }}</h1>
<form [formGroup]="orgForm" (ngSubmit)="createOrgForSelf()">
<div class="content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<span cnslError *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</form>
</ng-container>
</div>
<div class="btn-container">
<button color="primary" class="small-button" type="button" (click)="previous()" mat-stroked-button>
{{ 'ACTIONS.BACK' | translate }}
</button>
<span class="fill-space"></span>
<button
[disabled]="orgForm.invalid"
color="primary"
mat-raised-button
class="big-button"
cdkFocusInitial
type="submit"
(click)="finish()"
[disabled]="orgForm.invalid || userForm.invalid || (usePassword && pwdForm ? pwdForm?.invalid : false)"
mat-raised-button
>
{{ 'ACTIONS.CREATE' | translate }}
{{ 'ACTIONS.FINISH' | translate }}
</button>
</div>
</form>
</ng-container>
</div>
</ng-template>
</div>
</div>
</ng-container>
</ng-container>
</ng-template>
<ng-template cnslHasRole [hasRole]="['org.create']">
<div *ngIf="forSelf">
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{ 'ORG.PAGES.ORGDETAIL_TITLE_WITHOUT_DOMAIN' | translate }}</h1>
<form [formGroup]="orgForm" (ngSubmit)="createOrgForSelf()">
<div class="content">
<cnsl-form-field class="formfield" appearance="outline">
<cnsl-label>{{ 'ORG_DETAIL.DETAIL.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
</div>
<div class="btn-container">
<span class="fill-space"></span>
<button
[disabled]="orgForm.invalid"
color="primary"
mat-raised-button
class="big-button"
cdkFocusInitial
type="submit"
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
</div>
</form>
</ng-container>
</div>
</ng-template>
</div>
</div>
</cnsl-create-layout>

18
console/src/app/pages/org-create/org-create.component.scss
View File

@ -2,25 +2,7 @@ h1 {
font-weight: 500;
}
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
.org-create-main-content {
padding-left: 4.5rem;
max-width: 35rem;
.content {

2
console/src/app/pages/org-create/org-create.module.ts
View File

@ -8,6 +8,7 @@ import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { PasswordComplexityViewModule } from 'src/app/modules/password-complexity-view/password-complexity-view.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@ -26,6 +27,7 @@ import { OrgCreateComponent } from './org-create.component';
MatButtonModule,
MatIconModule,
MatSelectModule,
CreateLayoutModule,
HasRolePipeModule,
TranslateModule,
HasRoleModule,

629
console/src/app/pages/projects/apps/app-create/app-create.component.html
View File

@ -1,133 +1,313 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="abort-container">
<button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<span class="abort">{{ 'APP.PAGES.CREATE_OIDC' | translate }}</span
><span class="abort-2">Step {{ currentCreateStep }} of {{ createSteps }}</span>
</div>
<cnsl-create-layout
title="{{ 'APP.PAGES.CREATE_OIDC' | translate }}"
[createSteps]="createSteps"
[currentCreateStep]="currentCreateStep"
(closed)="close()"
>
<h1>{{ 'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate }}</h1>
<mat-progress-bar class="progress-bar" color="primary" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<div class="app-create-content">
<h1>{{ 'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate }}</h1>
<mat-progress-bar class="progress-bar" color="primary" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<mat-checkbox class="proswitch" color="primary" [(ngModel)]="devmode">
{{ 'APP.OIDC.PROSWITCH' | translate }}
</mat-checkbox>
<mat-checkbox class="proswitch" color="primary" [(ngModel)]="devmode">
{{ 'APP.OIDC.PROSWITCH' | translate }}
</mat-checkbox>
<mat-horizontal-stepper
class="stepper"
*ngIf="!devmode"
linear
#stepper
labelPosition="bottom"
(selectionChange)="changeStep($event)"
>
<mat-step [stepControl]="firstFormGroup" [editable]="true">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>{{ 'APP.OIDC.NAMEANDTYPESECTION' | translate }}</ng-template>
<mat-horizontal-stepper
class="stepper"
*ngIf="!devmode"
linear
#stepper
labelPosition="bottom"
(selectionChange)="changeStep($event)"
>
<mat-step [stepControl]="firstFormGroup" [editable]="true">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>{{ 'APP.OIDC.NAMEANDTYPESECTION' | translate }}</ng-template>
<p class="step-title">{{ 'APP.OIDC.TITLEFIRST' | translate }}</p>
<cnsl-form-field appearance="outline" class="name-formfield">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
<input cnslInput cdkFocusInitial formControlName="name" />
<span cnslError *ngIf="name?.errors?.required">{{ 'PROJECT.APP.NAMEREQUIRED' | translate }}</span>
</cnsl-form-field>
<p class="step-title">{{ 'APP.OIDC.TITLEFIRST' | translate }}</p>
<cnsl-form-field appearance="outline" class="name-formfield">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
<input cnslInput cdkFocusInitial formControlName="name" />
<span cnslError *ngIf="name?.errors?.required">{{ 'PROJECT.APP.NAMEREQUIRED' | translate }}</span>
</cnsl-form-field>
<p class="step-title">{{ 'APP.OIDC.TYPETITLE' | translate }}</p>
<p class="step-title">{{ 'APP.OIDC.TYPETITLE' | translate }}</p>
<cnsl-type-radio [types]="appTypes" (selectedType)="appType?.setValue($event)" [selected]="appType?.value">
</cnsl-type-radio>
<div class="app-create-actions">
<button
mat-raised-button
[disabled]="firstFormGroup.invalid"
color="primary"
matStepperNext
[attr.data-e2e]="'continue-button-nameandtype'"
>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</div>
</form>
</mat-step>
<!-- skip for native applications -->
<mat-step
*ngIf="oidcAppRequest.appType !== OIDCAppType.OIDC_APP_TYPE_NATIVE"
[stepControl]="secondFormGroup"
[editable]="true"
>
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>{{ 'APP.AUTHMETHODSECTION' | translate }}</ng-template>
<cnsl-auth-method-radio
[authMethods]="authMethods"
[selected]="authMethod?.value"
[isOIDC]="appType?.value?.createType === AppCreateType.OIDC"
(selectedMethod)="authMethod?.setValue($event)"
>
</cnsl-auth-method-radio>
<div class="app-create-actions">
<button class="bck-button" mat-stroked-button matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
<button
mat-raised-button
color="primary"
[disabled]="secondFormGroup.invalid"
matStepperNext
[attr.data-e2e]="'continue-button-authmethod'"
>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</div>
</form>
</mat-step>
<!-- show redirect step only for OIDC apps -->
<mat-step *ngIf="appType?.value?.createType === AppCreateType.OIDC" [editable]="true">
<ng-template matStepLabel>{{ 'APP.OIDC.REDIRECTSECTION' | translate }}</ng-template>
<p class="step-title">{{ 'APP.OIDC.REDIRECTTITLE' | translate }}</p>
<p
class="step-description cnsl-secondary-text"
*ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
<cnsl-type-radio [types]="appTypes" (selectedType)="appType?.setValue($event)" [selected]="appType?.value">
</cnsl-type-radio>
<div class="app-create-actions">
<button
mat-raised-button
[disabled]="firstFormGroup.invalid"
color="primary"
matStepperNext
[attr.data-e2e]="'continue-button-nameandtype'"
>
{{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}
</p>
<p class="step-description cnsl-secondary-text" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB">
{{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}
</p>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</div>
</form>
</mat-step>
<!-- skip for native applications -->
<mat-step
*ngIf="oidcAppRequest.appType !== OIDCAppType.OIDC_APP_TYPE_NATIVE"
[stepControl]="secondFormGroup"
[editable]="true"
>
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>{{ 'APP.AUTHMETHODSECTION' | translate }}</ng-template>
<cnsl-auth-method-radio
[authMethods]="authMethods"
[selected]="authMethod?.value"
[isOIDC]="appType?.value?.createType === AppCreateType.OIDC"
(selectedMethod)="authMethod?.setValue($event)"
>
</cnsl-auth-method-radio>
<div class="app-create-actions">
<button class="bck-button" mat-stroked-button matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
<button
mat-raised-button
color="primary"
[disabled]="secondFormGroup.invalid"
matStepperNext
[attr.data-e2e]="'continue-button-authmethod'"
>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</div>
</form>
</mat-step>
<!-- show redirect step only for OIDC apps -->
<mat-step *ngIf="appType?.value?.createType === AppCreateType.OIDC" [editable]="true">
<ng-template matStepLabel>{{ 'APP.OIDC.REDIRECTSECTION' | translate }}</ng-template>
<p class="step-title">{{ 'APP.OIDC.REDIRECTTITLE' | translate }}</p>
<p class="step-description cnsl-secondary-text" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE">
{{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}
</p>
<p class="step-description cnsl-secondary-text" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB">
{{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}
</p>
<cnsl-redirect-uris
class="redirect-section"
[canWrite]="true"
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
(changedUris)="oidcAppRequest.redirectUrisList = $any($event)"
[urisList]="oidcAppRequest.redirectUrisList"
[getValues]="requestRedirectValuesSubject$"
title="{{ 'APP.OIDC.REDIRECT' | translate }}"
>
</cnsl-redirect-uris>
<p class="step-title">{{ 'APP.OIDC.POSTREDIRECTTITLE' | translate }}</p>
<p class="step-description cnsl-secondary-text" *ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE">
{{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}
</p>
<p
class="step-description cnsl-secondary-text"
*ngIf="
oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB ||
oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_USER_AGENT
"
>
{{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}
</p>
<cnsl-redirect-uris
class="redirect-section"
[canWrite]="true"
(changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $any($event)"
[urisList]="oidcAppRequest.postLogoutRedirectUrisList"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[getValues]="requestRedirectValuesSubject$"
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
>
</cnsl-redirect-uris>
<div class="app-create-actions">
<button mat-stroked-button class="bck-button" matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
<button mat-raised-button color="primary" matStepperNext [attr.data-e2e]="'continue-button-redirecturis'">
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{ 'APP.OIDC.OVERVIEWSECTION' | translate }}</ng-template>
<p class="step-title">{{ 'APP.OIDC.OVERVIEWTITLE' | translate }}</p>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.NAME' | translate }}
</span>
<span class="right">
{{ oidcAppRequest.name }}
</span>
</div>
<ng-container *ngIf="appType?.value?.createType === AppCreateType.OIDC">
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.TYPE' | translate }}
</span>
<span class="right">
{{ 'APP.OIDC.APPTYPE.' + oidcAppRequest.appType | translate }}
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.GRANT' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.grantTypesList && oidcAppRequest.grantTypesList.length > 0">
[<span *ngFor="let element of oidcAppRequest.grantTypesList; index as i">
{{ 'APP.OIDC.GRANT.' + element | translate }}
{{ i < oidcAppRequest.grantTypesList.length - 1 ? ', ' : '' }} </span
>]
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.OIDC.RESPONSETYPE' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.responseTypesList && oidcAppRequest.responseTypesList.length > 0">
[<span *ngFor="let element of oidcAppRequest.responseTypesList; index as i">
{{ 'APP.OIDC.RESPONSE.' + element | translate }}
{{ i < oidcAppRequest.responseTypesList.length - 1 ? ', ' : '' }} </span
>]
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.AUTHMETHOD' | translate }}
</span>
<span class="right">
<span>
{{ 'APP.OIDC.AUTHMETHOD.' + oidcAppRequest?.authMethodType | translate }}
</span>
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.OIDC.REDIRECT' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.redirectUrisList && oidcAppRequest.redirectUrisList.length > 0">
[<span *ngFor="let redirect of oidcAppRequest.redirectUrisList; index as i">
{{ redirect }}
{{ i < oidcAppRequest.redirectUrisList.length - 1 ? ', ' : '' }} </span
>]
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
</span>
<span
class="right"
*ngIf="oidcAppRequest.postLogoutRedirectUrisList && oidcAppRequest.postLogoutRedirectUrisList.length > 0"
>
[<span *ngFor="let redirect of oidcAppRequest.postLogoutRedirectUrisList; index as i">
{{ redirect }}
{{ i < oidcAppRequest.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span
>]
</span>
</div>
</ng-container>
<ng-container *ngIf="appType?.value?.createType === AppCreateType.API">
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.AUTHMETHOD' | translate }}
</span>
<span class="right">
<span>
{{ 'APP.API.AUTHMETHOD.' + apiAppRequest?.authMethodType | translate }}
</span>
</span>
</div>
</ng-container>
<div class="app-create-actions">
<button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
<button
mat-raised-button
class="create-button"
color="primary"
(click)="createApp()"
[attr.data-e2e]="'create-button'"
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
</div>
</mat-step>
</mat-horizontal-stepper>
<div *ngIf="devmode" class="dev">
<form [formGroup]="form" (ngSubmit)="createApp()" [attr.data-e2e]="'create-app-wizzard-3'">
<div class="content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
<mat-select formControlName="appType">
<mat-option *ngFor="let appType of appTypes" [value]="appType">
{{ appType.titleI18nKey | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<ng-container *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
{{ 'APP.OIDC.GRANT.' + grant.type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
{{ 'APP.OIDC.RESPONSE.' + type.type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
</ng-container>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
<mat-select formControlName="authMethodType">
<mat-option *ngFor="let type of authMethodTypes" [value]="type.type">
<span *ngIf="type.oidc">{{ 'APP.OIDC.AUTHMETHOD.' + type.type | translate }}</span>
<span *ngIf="type.api">{{ 'APP.API.AUTHMETHOD.' + type.type | translate }}</span>
</mat-option>
</mat-select>
</cnsl-form-field>
</div>
<div class="content" *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
<div class="formfield full-width">
<cnsl-redirect-uris
class="redirect-section"
[canWrite]="true"
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
(changedUris)="oidcAppRequest.redirectUrisList = $any($event)"
[urisList]="oidcAppRequest.redirectUrisList"
[getValues]="requestRedirectValuesSubject$"
title="{{ 'APP.OIDC.REDIRECT' | translate }}"
[getValues]="requestRedirectValuesSubject$"
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
>
</cnsl-redirect-uris>
<p class="step-title">{{ 'APP.OIDC.POSTREDIRECTTITLE' | translate }}</p>
<p
class="step-description cnsl-secondary-text"
*ngIf="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
>
{{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}
</p>
<p
class="step-description cnsl-secondary-text"
*ngIf="
oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_WEB ||
oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_USER_AGENT
"
>
{{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}
</p>
<cnsl-redirect-uris
class="redirect-section"
[canWrite]="true"
@ -138,212 +318,19 @@
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
>
</cnsl-redirect-uris>
<div class="app-create-actions">
<button mat-stroked-button class="bck-button" matStepperPrevious>{{ 'ACTIONS.BACK' | translate }}</button>
<button mat-raised-button color="primary" matStepperNext [attr.data-e2e]="'continue-button-redirecturis'">
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{ 'APP.OIDC.OVERVIEWSECTION' | translate }}</ng-template>
<p class="step-title">{{ 'APP.OIDC.OVERVIEWTITLE' | translate }}</p>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.NAME' | translate }}
</span>
<span class="right">
{{ oidcAppRequest.name }}
</span>
</div>
<ng-container *ngIf="appType?.value?.createType === AppCreateType.OIDC">
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.TYPE' | translate }}
</span>
<span class="right">
{{ 'APP.OIDC.APPTYPE.' + oidcAppRequest.appType | translate }}
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.GRANT' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.grantTypesList && oidcAppRequest.grantTypesList.length > 0">
[<span *ngFor="let element of oidcAppRequest.grantTypesList; index as i">
{{ 'APP.OIDC.GRANT.' + element | translate }}
{{ i < oidcAppRequest.grantTypesList.length - 1 ? ', ' : '' }} </span
>]
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.OIDC.RESPONSETYPE' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.responseTypesList && oidcAppRequest.responseTypesList.length > 0">
[<span *ngFor="let element of oidcAppRequest.responseTypesList; index as i">
{{ 'APP.OIDC.RESPONSE.' + element | translate }}
{{ i < oidcAppRequest.responseTypesList.length - 1 ? ', ' : '' }} </span
>]
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.AUTHMETHOD' | translate }}
</span>
<span class="right">
<span>
{{ 'APP.OIDC.AUTHMETHOD.' + oidcAppRequest?.authMethodType | translate }}
</span>
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.OIDC.REDIRECT' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.redirectUrisList && oidcAppRequest.redirectUrisList.length > 0">
[<span *ngFor="let redirect of oidcAppRequest.redirectUrisList; index as i">
{{ redirect }}
{{ i < oidcAppRequest.redirectUrisList.length - 1 ? ', ' : '' }} </span
>]
</span>
</div>
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
</span>
<span
class="right"
*ngIf="oidcAppRequest.postLogoutRedirectUrisList && oidcAppRequest.postLogoutRedirectUrisList.length > 0"
>
[<span *ngFor="let redirect of oidcAppRequest.postLogoutRedirectUrisList; index as i">
{{ redirect }}
{{ i < oidcAppRequest.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span
>]
</span>
</div>
</ng-container>
<ng-container *ngIf="appType?.value?.createType === AppCreateType.API">
<div class="row cnsl-secondary-text">
<span class="left">
{{ 'APP.AUTHMETHOD' | translate }}
</span>
<span class="right">
<span>
{{ 'APP.API.AUTHMETHOD.' + apiAppRequest?.authMethodType | translate }}
</span>
</span>
</div>
</ng-container>
<div class="app-create-actions">
<button mat-stroked-button matStepperPrevious class="bck-button">{{ 'ACTIONS.BACK' | translate }}</button>
<button
mat-raised-button
class="create-button"
color="primary"
(click)="createApp()"
[attr.data-e2e]="'create-button'"
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
</div>
</mat-step>
</mat-horizontal-stepper>
<div *ngIf="devmode" class="dev">
<form [formGroup]="form" (ngSubmit)="createApp()" [attr.data-e2e]="'create-app-wizzard-3'">
<div class="content">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
<input cnslInput formControlName="name" />
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
<mat-select formControlName="appType">
<mat-option *ngFor="let appType of appTypes" [value]="appType">
{{ appType.titleI18nKey | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<ng-container *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
{{ 'APP.OIDC.GRANT.' + grant.type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
{{ 'APP.OIDC.RESPONSE.' + type.type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
</ng-container>
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
<mat-select formControlName="authMethodType">
<mat-option *ngFor="let type of authMethodTypes" [value]="type.type">
<span *ngIf="type.oidc">{{ 'APP.OIDC.AUTHMETHOD.' + type.type | translate }}</span>
<span *ngIf="type.api">{{ 'APP.API.AUTHMETHOD.' + type.type | translate }}</span>
</mat-option>
</mat-select>
</cnsl-form-field>
</div>
<div class="content" *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
<div class="formfield full-width">
<cnsl-redirect-uris
class="redirect-section"
[canWrite]="true"
(changedUris)="oidcAppRequest.redirectUrisList = $any($event)"
[urisList]="oidcAppRequest.redirectUrisList"
title="{{ 'APP.OIDC.REDIRECT' | translate }}"
[getValues]="requestRedirectValuesSubject$"
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
>
</cnsl-redirect-uris>
<cnsl-redirect-uris
class="redirect-section"
[canWrite]="true"
(changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $any($event)"
[urisList]="oidcAppRequest.postLogoutRedirectUrisList"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[getValues]="requestRedirectValuesSubject$"
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
>
</cnsl-redirect-uris>
</div>
</div>
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="form.invalid"
cdkFocusInitial
type="submit"
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
</form>
</div>
</div>
</div>
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="form.invalid"
cdkFocusInitial
type="submit"
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
</form>
</div>
</div>
</cnsl-create-layout>

185
console/src/app/pages/projects/apps/app-create/app-create.component.scss
View File

@ -12,122 +12,101 @@ p.desc {
display: block;
}
.abort-container {
.name-formfield {
max-width: 400px;
display: block;
}
.app-create-container {
padding-top: 2rem;
.progress-bar {
margin-bottom: 1rem;
}
}
.margin-right {
margin-right: 0.5rem;
}
.full-width {
width: 100%;
}
.stepper {
background: inherit !important;
margin: 0 -1.5rem;
.formfield {
max-width: 400px;
}
.step-title {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.step-description {
font-size: 0.9rem;
}
}
.checkbox-container {
display: flex;
flex-direction: column;
.checkbox {
margin: 0.5rem 0;
}
}
.row {
display: flex;
justify-content: space-between;
.left,
.right {
margin-bottom: 0.5rem;
font-size: 14px;
}
}
.app-create-actions {
margin-top: 1rem;
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
.bck-button {
margin-right: 1rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
.create-button {
padding: 0.5rem 4rem;
}
}
.app-create-content {
padding-left: 4.5rem;
.name-formfield {
max-width: 400px;
display: block;
}
.app-create-container {
padding-top: 2rem;
.progress-bar {
margin-bottom: 1rem;
}
}
.margin-right {
margin-right: 0.5rem;
}
.full-width {
width: 100%;
}
.stepper {
background: inherit !important;
margin: 0 -1.5rem;
.dev {
.content {
display: flex;
margin: 0 -0.5rem;
flex-wrap: wrap;
flex-direction: row;
.formfield {
max-width: 400px;
}
flex: 1;
box-sizing: border-box;
margin: 0 0.5rem;
.step-title {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.step-description {
font-size: 0.9rem;
}
}
.checkbox-container {
display: flex;
flex-direction: column;
.checkbox {
margin: 0.5rem 0;
}
}
.row {
display: flex;
justify-content: space-between;
.left,
.right {
margin-bottom: 0.5rem;
font-size: 14px;
}
}
.app-create-actions {
margin-top: 1rem;
display: flex;
align-items: center;
.bck-button {
margin-right: 1rem;
}
.create-button {
padding: 0.5rem 4rem;
}
}
.dev {
.content {
display: flex;
margin: 0 -0.5rem;
flex-wrap: wrap;
flex-direction: row;
.formfield {
flex: 1;
box-sizing: border-box;
margin: 0 0.5rem;
&.full-width {
flex-basis: 80%;
}
&.full-width {
flex-basis: 80%;
}
}
}
.continue-button {
margin-top: 3rem;
display: block;
padding: 0.5rem 4rem;
}
.continue-button {
margin-top: 3rem;
display: block;
padding: 0.5rem 4rem;
}
}

469
console/src/app/pages/projects/apps/app-detail/app-detail.component.html
View File

@ -1,150 +1,90 @@
<cnsl-top-view title="{{app?.name}}"
[hasActions]="isZitadel === false && (['project.app.write:'+projectId, 'project.app.write'] | hasRole | async)"
docLink="https://docs.zitadel.com/docs/guides/basics/projects"
[sub]="app?.oidcConfig ? ('APP.OIDC.APPTYPE.'+app?.oidcConfig?.appType | translate): 'API'"
[isActive]="app?.state === AppState.APP_STATE_ACTIVE" [isInactive]="app?.state === AppState.APP_STATE_INACTIVE"
stateTooltip="{{('APP.PAGES.DETAIL.STATE.'+app?.state) | translate}}">
<ng-template topActions cnslHasRole [hasRole]="['project.app.write:'+projectId, 'project.app.write']">
<div class="regen-secret"
*ngIf="isZitadel === false && this.app?.oidcConfig && (currentAuthMethod === 'CODE' || currentAuthMethod === 'POST')">
<button type="button" [disabled]="!canWrite" mat-menu-item
(click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
<cnsl-top-view
title="{{ app?.name }}"
[hasActions]="isZitadel === false && (['project.app.write:' + projectId, 'project.app.write'] | hasRole | async)"
docLink="https://docs.zitadel.ch/docs/guides/basics/projects"
[sub]="app?.oidcConfig ? ('APP.OIDC.APPTYPE.' + app?.oidcConfig?.appType | translate) : 'API'"
[isActive]="app?.state === AppState.APP_STATE_ACTIVE"
[isInactive]="app?.state === AppState.APP_STATE_INACTIVE"
stateTooltip="{{ 'APP.PAGES.DETAIL.STATE.' + app?.state | translate }}"
>
<ng-template topActions cnslHasRole [hasRole]="['project.app.write:' + projectId, 'project.app.write']">
<div
class="regen-secret"
*ngIf="isZitadel === false && this.app?.oidcConfig && (currentAuthMethod === 'CODE' || currentAuthMethod === 'POST')"
>
<button type="button" [disabled]="!canWrite" mat-menu-item (click)="regenerateOIDCClientSecret()">
{{ 'APP.OIDC.REGENERATESECRET' | translate }}
</button>
</div>
<div class="regen-secret" *ngIf="isZitadel === false && this.app?.apiConfig && currentAuthMethod === 'BASIC'">
<button [disabled]="!canWrite" mat-menu-item (click)="regenerateAPIClientSecret()">{{'APP.API.REGENERATESECRET' |
translate}}</button>
<button [disabled]="!canWrite" mat-menu-item (click)="regenerateAPIClientSecret()">
{{ 'APP.API.REGENERATESECRET' | translate }}
</button>
</div>
<button *ngIf="isZitadel === false" mat-menu-item (click)="openNameDialog()" aria-label="Edit project name">
{{'ACTIONS.RENAME' | translate}}
{{ 'ACTIONS.RENAME' | translate }}
</button>
<button mat-menu-item *ngIf="isZitadel === false && app?.state !== AppState.APP_STATE_INACTIVE"
(click)="changeState(AppState.APP_STATE_INACTIVE)">
{{'ACTIONS.DEACTIVATE' | translate}}
<button
mat-menu-item
*ngIf="isZitadel === false && app?.state !== AppState.APP_STATE_INACTIVE"
(click)="changeState(AppState.APP_STATE_INACTIVE)"
>
{{ 'ACTIONS.DEACTIVATE' | translate }}
</button>
<button mat-menu-item *ngIf="isZitadel === false && app?.state === AppState.APP_STATE_INACTIVE"
(click)="changeState(AppState.APP_STATE_ACTIVE)">
{{'ACTIONS.REACTIVATE' | translate}}
<button
mat-menu-item
*ngIf="isZitadel === false && app?.state === AppState.APP_STATE_INACTIVE"
(click)="changeState(AppState.APP_STATE_ACTIVE)"
>
{{ 'ACTIONS.REACTIVATE' | translate }}
</button>
<ng-template cnslHasRole [hasRole]="['project.app.delete:'+projectId, 'project.app.delete']">
<button *ngIf="isZitadel === false" mat-menu-item matTooltip="{{'APP.PAGES.DELETE' | translate}}"
(click)="deleteApp()">
<span [style.color]="'var(--warn)'">{{'APP.PAGES.DELETE' | translate}}</span>
<ng-template cnslHasRole [hasRole]="['project.app.delete:' + projectId, 'project.app.delete']">
<button
*ngIf="isZitadel === false"
mat-menu-item
matTooltip="{{ 'APP.PAGES.DELETE' | translate }}"
(click)="deleteApp()"
>
<span [style.color]="'var(--warn)'">{{ 'APP.PAGES.DELETE' | translate }}</span>
</button>
</ng-template>
</ng-template>
<span *ngIf="errorMessage" class="app-err-container">{{errorMessage}}</span>
<span *ngIf="errorMessage" class="app-err-container">{{ errorMessage }}</span>
<cnsl-info-row topContent *ngIf="app" [app]="app"></cnsl-info-row>
</cnsl-top-view>
<div class="max-width-container">
<cnsl-auth-method-radio *ngIf="authMethods && initialAuthMethod && (app?.oidcConfig || app?.apiConfig)"
[authMethods]="authMethods" [selected]="initialAuthMethod" [current]="currentAuthMethod"
[isOIDC]="app?.oidcConfig !== undefined" (selectedMethod)="setPartialConfigFromAuthMethod($event)">
</cnsl-auth-method-radio>
<div class="compliance" *ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
<h2 class="compliance-title">{{ 'APP.COMPLIANCE' | translate }}</h2>
<cnsl-info-section class="problem" [type]="InfoSectionType.ALERT">
<ul style="margin: 0">
<li style="margin: 0 0 0.5rem 0" *ngFor="let problem of app.oidcConfig?.complianceProblemsList || []">
{{ problem.localizedMessage }}
</li>
</ul>
</cnsl-info-section>
</div>
<div class="app-main-content">
<cnsl-meta-layout>
<cnsl-sidenav [(ngModel)]="currentSetting" [settingsList]="settingsList">
<ng-container *ngIf="currentSetting === 'redirect-uris'">
<cnsl-card title=" {{ 'APP.OIDC.REDIRECTSECTIONTITLE' | translate }}">
<cnsl-info-section *ngIf="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
<div class="dev-col">
<span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
<mat-slide-toggle *ngIf="devMode" color="primary" class="devmode" [formControl]="devMode" name="devMode"
matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
</div>
</cnsl-info-section>
<cnsl-info-section
*ngIf="appType?.value === OIDCAppType.OIDC_APP_TYPE_WEB || appType?.value === OIDCAppType.OIDC_APP_TYPE_USER_AGENT">
<div class="dev-col">
<span>{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</span>
<mat-slide-toggle *ngIf="devMode" color="primary" class="devmode" [formControl]="devMode" name="devMode"
matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
</div>
</cnsl-info-section>
<cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
[devMode]="devMode?.value" [getValues]="requestRedirectValuesSubject$"
(changedUris)="redirectUrisList = $any($event)" [urisList]="redirectUrisList"
title="{{ 'APP.OIDC.REDIRECT' | translate }}"
[isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
<cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
[devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $any($event)"
[urisList]="postLogoutRedirectUrisList" [getValues]="requestRedirectValuesSubject$"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
<div class="btn-container">
<button class="submit-button" color="primary" (click)="saveOIDCApp()" [disabled]="!canWrite"
mat-raised-button>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</cnsl-card>
</ng-container>
<ng-container *ngIf="currentSetting === 'additional-origins'">
<cnsl-card title=" {{ 'APP.ADDITIONALORIGINS' | translate }}">
<p class="app-desc cnsl-secondary-text">{{'APP.ADDITIONALORIGINSDESC' | translate}}</p>
<cnsl-additional-origins *ngIf="additionalOriginsList && appType && appType?.value !== undefined"
class="app-input" [canWrite]="canWrite" [getValues]="requestRedirectValuesSubject$"
(changedUris)="additionalOriginsListChanged($event)" [urisList]="additionalOriginsList"
title="{{ 'APP.ORIGINS' | translate }}">
</cnsl-additional-origins>
<div class="btn-container">
<button class="submit-button" (click)="saveOIDCApp()" color="primary" [disabled]="!canWrite"
mat-raised-button>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</cnsl-card>
</ng-container>
<ng-container *ngIf="currentSetting === 'urls'">
<cnsl-card title=" {{ 'APP.URLS' | translate }}">
<div class="app-info-row">
<div class="app-info-wrapper" *ngFor="let environmentV of (environmentMap | keyvalue)">
<p class="app-info-row-title cnsl-secondary-text">{{environmentV.key}}</p>
<div class="app-copy-row">
<div *ngIf="environmentV.value" class="environment">
<button [disabled]="copied === environmentV.value"
[matTooltip]="(copied !== environmentV.value ? 'ACTIONS.COPY' : 'ACTIONS.COPIED' ) | translate"
cnslCopyToClipboard [valueToCopy]="environmentV.value" (copiedValue)="copied = environmentV.key">
{{environmentV.value}}
</button>
</div>
</div>
</div>
</div>
</cnsl-card>
</ng-container>
<ng-container *ngIf="currentSetting === 'configuration'">
<cnsl-card *ngIf="oidcForm && app?.oidcConfig" title=" {{ 'APP.OIDC.TITLE' | translate }}">
<form [formGroup]="oidcForm" (ngSubmit)="saveOIDCApp()">
<div class="compliance"
*ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
<h2 class="compliance-title">{{'APP.COMPLIANCE' | translate}}</h2>
<cnsl-info-section class="problem" [type]="InfoSectionType.WARN">
<ul style="margin: 0;">
<li style="margin: 0 0 .5rem 0;"
*ngFor="let problem of app.oidcConfig?.complianceProblemsList || []">
{{problem.localizedMessage}}</li>
</ul>
</cnsl-info-section>
</div>
<div
class="current-auth-method"
*ngIf="currentRadioItemAuthType"
[ngStyle]="{ background: currentRadioItemAuthType.background }"
>
<h3>{{ currentRadioItemAuthType.titleI18nKey | translate }}</h3>
<p>{{ currentRadioItemAuthType.descI18nKey | translate }}</p>
<span class="fill-space"></span>
<button mat-icon-button (click)="changeAuthMethod()"><i class="las la-pen"></i></button>
</div>
<form [formGroup]="oidcForm" (ngSubmit)="saveOIDCApp()">
<div class="app-oidc-content">
<div class="app-oidc-grid">
<cnsl-form-field class="app-formfield" appearance="outline">
@ -156,7 +96,7 @@
<cnsl-label>{{ 'APP.TYPE' | translate }}</cnsl-label>
<mat-select formControlName="appType">
<mat-option *ngFor="let type of oidcAppTypes" [value]="type">
{{ 'APP.OIDC.APPTYPE.'+type | translate }}
{{ 'APP.OIDC.APPTYPE.' + type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
@ -165,7 +105,7 @@
<cnsl-label>{{ 'APP.OIDC.RESPONSETYPE' | translate }}</cnsl-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type">
{{ 'APP.OIDC.RESPONSE.'+type | translate }}
{{ 'APP.OIDC.RESPONSE.' + type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
@ -174,7 +114,7 @@
<cnsl-label>{{ 'APP.AUTHMETHOD' | translate }}</cnsl-label>
<mat-select formControlName="authMethodType">
<mat-option *ngFor="let type of oidcAuthMethodType" [value]="type">
{{ 'APP.OIDC.AUTHMETHOD.'+type | translate }}
{{ 'APP.OIDC.AUTHMETHOD.' + type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
@ -183,62 +123,31 @@
<cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
{{ 'APP.OIDC.GRANT.'+grant | translate }}
{{ 'APP.OIDC.GRANT.' + grant | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<mat-checkbox color="primary" class="rt" (change)="toggleRefreshToken($event)"
<mat-checkbox
color="primary"
class="rt"
(change)="toggleRefreshToken($event)"
[disabled]="!this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_AUTHORIZATION_CODE)"
[checked]="this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)">
[checked]="this.grantTypesList?.value.includes(OIDCGrantType.OIDC_GRANT_TYPE_REFRESH_TOKEN)"
>
{{ 'APP.OIDC.REFRESHTOKEN' | translate }}
</mat-checkbox>
</div>
<p class="app-full-width app-section-title">{{'APP.OIDC.TOKENSECTIONTITLE' | translate}}</p>
<cnsl-form-field appearance="outline" class="app-formfield">
<cnsl-label>{{ 'APP.OIDC.TOKENTYPE' | translate }}</cnsl-label>
<mat-select formControlName="accessTokenType">
<mat-option *ngFor="let type of oidcTokenTypes" [value]="type">
{{ 'APP.OIDC.TOKENTYPE'+type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<mat-checkbox *ngIf="accessTokenType?.value === OIDCTokenType.OIDC_TOKEN_TYPE_JWT" class="full-width"
formControlName="accessTokenRoleAssertion" color="primary">
{{'APP.OIDC.ACCESSTOKENROLEASSERTION' | translate}}</mat-checkbox>
<cnsl-info-section class="app-full-width app-desc">
<span>{{'APP.OIDC.ACCESSTOKENROLEASSERTION_DESCRIPTION' | translate}}</span>
</cnsl-info-section>
<mat-checkbox class="app-full-width" style="margin-top: 1.5rem" formControlName="idTokenRoleAssertion"
color="primary">
{{'APP.OIDC.IDTOKENROLEASSERTION' | translate}}</mat-checkbox>
<cnsl-info-section class="full-width app-desc">
<span>{{'APP.OIDC.IDTOKENROLEASSERTION_DESCRIPTION' | translate}}</span>
</cnsl-info-section>
<mat-checkbox class="app-full-width" style="margin-top: 1.5rem"
formControlName="idTokenUserinfoAssertion" color="primary">
{{'APP.OIDC.IDTOKENUSERINFOASSERTION' | translate}}</mat-checkbox>
<cnsl-info-section class="app-full-width app-desc">
<span>{{'APP.OIDC.IDTOKENUSERINFOASSERTION_DESCRIPTION' | translate}}</span>
</cnsl-info-section>
<p class="clockskew-title cnsl-secondary-text">ClockSkew</p>
<mat-slider color="primary" formControlName="clockSkewSeconds" class="clockskew-slider" thumbLabel
[displayWith]="formatClockSkewLabel" tickInterval=".1" min="0" [step]="1" max="5">
</mat-slider>
<cnsl-info-section class="app-full-width app-desc">
<span>{{'APP.OIDC.CLOCKSKEW' | translate}}</span>
</cnsl-info-section>
</div>
<div class="btn-container">
<button class="submit-button" type="submit" color="primary" [disabled]="oidcForm.invalid || !canWrite"
mat-raised-button>
<button
class="submit-button"
type="submit"
color="primary"
[disabled]="oidcForm.invalid || !canWrite"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
@ -246,14 +155,220 @@
</cnsl-card>
</ng-container>
<ng-container *ngIf="currentSetting === 'token'">
<cnsl-card *ngIf="oidcTokenForm && app?.oidcConfig" title=" {{ 'APP.OIDC.TOKENSECTIONTITLE' | translate }}">
<form [formGroup]="oidcTokenForm" (ngSubmit)="saveOIDCApp()">
<cnsl-form-field appearance="outline" class="app-formfield">
<cnsl-label>{{ 'APP.OIDC.TOKENTYPE' | translate }}</cnsl-label>
<mat-select formControlName="accessTokenType">
<mat-option *ngFor="let type of oidcTokenTypes" [value]="type">
{{ 'APP.OIDC.TOKENTYPE' + type | translate }}
</mat-option>
</mat-select>
</cnsl-form-field>
<mat-checkbox
*ngIf="accessTokenType?.value === OIDCTokenType.OIDC_TOKEN_TYPE_JWT"
class="full-width"
style="margin-top: 1.5rem"
formControlName="accessTokenRoleAssertion"
color="primary"
>
{{ 'APP.OIDC.ACCESSTOKENROLEASSERTION' | translate }}</mat-checkbox
>
<cnsl-info-section class="full-width app-desc">
<span>{{ 'APP.OIDC.ACCESSTOKENROLEASSERTION_DESCRIPTION' | translate }}</span>
</cnsl-info-section>
<mat-checkbox
class="full-width"
style="margin-top: 1.5rem"
formControlName="idTokenRoleAssertion"
color="primary"
>
{{ 'APP.OIDC.IDTOKENROLEASSERTION' | translate }}</mat-checkbox
>
<cnsl-info-section class="full-width app-desc">
<span>{{ 'APP.OIDC.IDTOKENROLEASSERTION_DESCRIPTION' | translate }}</span>
</cnsl-info-section>
<mat-checkbox
class="full-width"
style="margin-top: 1.5rem"
formControlName="idTokenUserinfoAssertion"
color="primary"
>
{{ 'APP.OIDC.IDTOKENUSERINFOASSERTION' | translate }}</mat-checkbox
>
<cnsl-info-section class="full-width app-desc">
<span>{{ 'APP.OIDC.IDTOKENUSERINFOASSERTION_DESCRIPTION' | translate }}</span>
</cnsl-info-section>
<p class="clockskew-title cnsl-secondary-text">ClockSkew</p>
<mat-slider
color="primary"
formControlName="clockSkewSeconds"
class="clockskew-slider"
thumbLabel
[displayWith]="formatClockSkewLabel"
tickInterval=".1"
min="0"
[step]="1"
max="5"
>
</mat-slider>
<cnsl-info-section class="full-width app-desc">
<span>{{ 'APP.OIDC.CLOCKSKEW' | translate }}</span>
</cnsl-info-section>
<div class="btn-container">
<button
class="submit-button"
type="submit"
color="primary"
[disabled]="oidcTokenForm.invalid || !canWrite"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
</cnsl-card>
</ng-container>
<ng-container *ngIf="currentSetting === 'redirect-uris'">
<cnsl-card title=" {{ 'APP.OIDC.REDIRECTSECTIONTITLE' | translate }}">
<cnsl-info-section *ngIf="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
<div class="dev-col">
<span>{{ 'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate }}</span>
<mat-slide-toggle
*ngIf="devMode"
color="primary"
class="devmode"
[formControl]="devMode"
name="devMode"
matTooltip="{{ 'APP.OIDC.DEVMODEDESC' | translate }}"
>
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
</div>
</cnsl-info-section>
<cnsl-info-section
*ngIf="
appType?.value === OIDCAppType.OIDC_APP_TYPE_WEB || appType?.value === OIDCAppType.OIDC_APP_TYPE_USER_AGENT
"
>
<div class="dev-col">
<span>{{ 'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate }}</span>
<mat-slide-toggle
*ngIf="devMode"
color="primary"
class="devmode"
[formControl]="devMode"
name="devMode"
matTooltip="{{ 'APP.OIDC.DEVMODEDESC' | translate }}"
>
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
</div>
</cnsl-info-section>
<cnsl-redirect-uris
*ngIf="appType?.value !== undefined"
class="redirect-section"
[canWrite]="canWrite"
[devMode]="devMode?.value"
[getValues]="requestRedirectValuesSubject$"
(changedUris)="redirectUrisList = $any($event)"
[urisList]="redirectUrisList"
title="{{ 'APP.OIDC.REDIRECT' | translate }}"
[isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE"
>
</cnsl-redirect-uris>
<cnsl-redirect-uris
*ngIf="appType?.value !== undefined"
class="redirect-section"
[canWrite]="canWrite"
[devMode]="devMode?.value"
(changedUris)="postLogoutRedirectUrisList = $any($event)"
[urisList]="postLogoutRedirectUrisList"
[getValues]="requestRedirectValuesSubject$"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE"
>
</cnsl-redirect-uris>
<div class="btn-container">
<button class="submit-button" color="primary" (click)="saveOIDCApp()" [disabled]="!canWrite" mat-raised-button>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</cnsl-card>
</ng-container>
<ng-container *ngIf="currentSetting === 'additional-origins'">
<cnsl-card title=" {{ 'APP.ADDITIONALORIGINS' | translate }}">
<p class="app-desc cnsl-secondary-text">{{ 'APP.ADDITIONALORIGINSDESC' | translate }}</p>
<cnsl-additional-origins
*ngIf="additionalOriginsList && appType && appType?.value !== undefined"
class="app-input"
[canWrite]="canWrite"
[getValues]="requestRedirectValuesSubject$"
(changedUris)="additionalOriginsListChanged($event)"
[urisList]="additionalOriginsList"
title="{{ 'APP.ORIGINS' | translate }}"
>
</cnsl-additional-origins>
<div class="btn-container">
<button class="submit-button" (click)="saveOIDCApp()" color="primary" [disabled]="!canWrite" mat-raised-button>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</cnsl-card>
</ng-container>
<ng-container *ngIf="currentSetting === 'urls'">
<cnsl-card title=" {{ 'APP.URLS' | translate }}">
<div class="app-info-row">
<div class="app-info-wrapper" *ngFor="let environmentV of environmentMap | keyvalue">
<p class="app-info-row-title cnsl-secondary-text">{{ environmentV.key }}</p>
<div class="app-copy-row">
<div *ngIf="environmentV.value" class="environment">
<button
[disabled]="copied === environmentV.value"
[matTooltip]="(copied !== environmentV.value ? 'ACTIONS.COPY' : 'ACTIONS.COPIED') | translate"
cnslCopyToClipboard
[valueToCopy]="environmentV.value"
(copiedValue)="copied = environmentV.key"
>
{{ environmentV.value }}
</button>
</div>
</div>
</div>
</div>
</cnsl-card>
</ng-container>
<ng-container *ngIf="currentSetting === 'configuration'">
<cnsl-card *ngIf="currentAuthMethod === 'PK_JWT' && projectId && app?.id"
title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}" description="{{ 'USER.MACHINE.KEYSDESC' | translate }}">
<cnsl-card
*ngIf="initialAuthMethod === 'PK_JWT' && projectId && app?.id"
title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}"
description="{{ 'USER.MACHINE.KEYSDESC' | translate }}"
>
<cnsl-client-keys [projectId]="projectId" [appId]="app.id"></cnsl-client-keys>
<div *ngIf="apiForm && app?.apiConfig" class="btn-container">
<button class="submit-button" (click)="saveAPIApp()" color="primary"
[disabled]="apiForm.invalid || !canWrite" mat-raised-button>
<button
class="submit-button"
(click)="saveAPIApp()"
color="primary"
[disabled]="apiForm.invalid || !canWrite"
mat-raised-button
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
@ -261,11 +376,9 @@
</ng-container>
</cnsl-sidenav>
<!-- <cnsl-links [links]="nextLinks"></cnsl-links> -->
<div metainfo>
<cnsl-changes *ngIf="app" [changeType]="ChangeType.APP" [id]="app.id" [secId]="projectId"></cnsl-changes>
</div>
</cnsl-meta-layout>
</div>
</div>
</div>

63
console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
View File

@ -44,11 +44,6 @@
flex-direction: column;
margin: 0 -0.5rem;
@media only screen and (min-width: 500px) {
flex-direction: row;
flex-wrap: wrap;
}
.app-info-wrapper {
display: flex;
flex-direction: column;
@ -77,6 +72,7 @@
flex-direction: column;
width: 100%;
align-items: stretch;
margin-bottom: 0.5rem;
button {
transition: opacity 0.15s ease-in-out;
@ -109,22 +105,53 @@
}
}
.compliance {
padding-bottom: 1rem;
padding-top: 0.5rem;
border-bottom: 1px solid $divider-color;
.compliance-title {
margin: 1rem 0 1rem 0;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.problem {
font-size: 14px;
margin: 0 0 0.5rem 0;
display: block;
}
}
.app-main-content {
border-top: 1px solid $divider-color;
margin-top: 1.5rem;
}
}
margin-top: 0.5rem;
.compliance {
.compliance-title {
margin: 1rem 0 1rem 0;
font-size: 16px;
}
.current-auth-method {
display: flex;
align-items: center;
border: 1px solid if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
border-radius: 0.5rem;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
.problem {
font-size: 14px;
margin: 0 0 0.5rem 0;
display: block;
h3 {
margin: 0 1rem 0 0;
}
p {
font-size: 14px;
margin: 0;
}
.fill-space {
flex: 1;
}
button {
margin-left: 1rem;
}
}
}
}

120
console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
View File

@ -5,7 +5,6 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Duration } from 'google-protobuf/google/protobuf/duration_pb';
@ -14,7 +13,6 @@ import { take } from 'rxjs/operators';
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
import { CnslLinks } from 'src/app/modules/links/links.component';
import { NameDialogComponent } from 'src/app/modules/name-dialog/name-dialog.component';
import { SidenavSetting } from 'src/app/modules/sidenav/sidenav.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
@ -52,6 +50,7 @@ import {
PKCE_METHOD,
POST_METHOD,
} from '../authmethods';
import { AuthMethodDialogComponent } from './auth-method-dialog/auth-method-dialog.component';
@Component({
selector: 'cnsl-app-detail',
@ -103,6 +102,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public AppState: any = AppState;
public oidcForm!: FormGroup;
public oidcTokenForm!: FormGroup;
public apiForm!: FormGroup;
public redirectUrisList: string[] = [];
@ -122,7 +122,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public requestRedirectValuesSubject$: Subject<void> = new Subject();
public copiedKey: any = '';
public nextLinks: Array<CnslLinks> = [];
public InfoSectionType: any = InfoSectionType;
public copied: string = '';
@ -139,7 +138,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
private mgmtService: ManagementService,
private authService: GrpcAuthService,
private router: Router,
private snackbar: MatSnackBar,
private breadcrumbService: BreadcrumbService,
private http: HttpClient,
) {
@ -150,6 +148,9 @@ export class AppDetailComponent implements OnInit, OnDestroy {
grantTypesList: [{ value: [], disabled: true }],
appType: [{ value: '', disabled: true }],
authMethodType: [{ value: '', disabled: true }],
});
this.oidcTokenForm = this.fb.group({
accessTokenType: [{ value: '', disabled: true }],
accessTokenRoleAssertion: [{ value: false, disabled: true }],
idTokenRoleAssertion: [{ value: false, disabled: true }],
@ -212,32 +213,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.subscription?.unsubscribe();
}
private initLinks(): void {
this.nextLinks = [
{
i18nTitle: 'APP.PAGES.NEXTSTEPS.0.TITLE',
i18nDesc: 'APP.PAGES.NEXTSTEPS.0.DESC',
routerLink: ['/projects', this.projectId, 'roles'],
iconClasses: 'las la-user-tag',
},
{
i18nTitle: 'APP.PAGES.NEXTSTEPS.1.TITLE',
i18nDesc: 'APP.PAGES.NEXTSTEPS.1.DESC',
routerLink: ['/users', 'create'],
iconClasses: 'las la-user-plus',
},
{
i18nTitle: 'APP.PAGES.NEXTSTEPS.2.TITLE',
i18nDesc: 'APP.PAGES.NEXTSTEPS.2.DESC',
href: 'https://docs.zitadel.comm',
iconClasses: 'las la-people-carry',
},
];
}
private async getData(projectId: string, appId: string): Promise<void> {
this.initLinks();
this.mgmtService.getIAM().then((iam) => {
this.isZitadel = iam.iamProjectId === this.projectId;
});
@ -277,6 +253,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.settingsList = [
{ id: 'configuration', i18nKey: 'APP.CONFIGURATION' },
{ id: 'token', i18nKey: 'APP.TOKEN' },
{ id: 'redirect-uris', i18nKey: 'APP.OIDC.REDIRECTSECTIONTITLE' },
{ id: 'additional-origins', i18nKey: 'APP.ADDITIONALORIGINS' },
{ id: 'urls', i18nKey: 'APP.URLS' },
@ -317,6 +294,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
if (allowed) {
this.oidcForm.enable();
this.oidcTokenForm.enable();
this.apiForm.enable();
}
@ -332,10 +310,11 @@ export class AppDetailComponent implements OnInit, OnDestroy {
if (this.app.oidcConfig?.clockSkew) {
const inSecs = this.app.oidcConfig?.clockSkew.seconds + this.app.oidcConfig?.clockSkew.nanos / 100000;
this.oidcForm.controls['clockSkewSeconds'].setValue(inSecs);
this.oidcTokenForm.controls['clockSkewSeconds'].setValue(inSecs);
}
if (this.app.oidcConfig) {
this.oidcForm.patchValue(this.app.oidcConfig);
this.oidcTokenForm.patchValue(this.app.oidcConfig);
}
if (this.app.apiConfig) {
this.apiForm.patchValue(this.app.apiConfig);
@ -350,8 +329,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
} else {
this.authMethods = this.authMethods.filter((element) => element !== CUSTOM_METHOD);
}
this.showSaveSnack();
});
this.apiForm.valueChanges.subscribe((apiConfig) => {
@ -363,8 +340,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
} else {
this.authMethods = this.authMethods.filter((element) => element !== CUSTOM_METHOD);
}
this.showSaveSnack();
});
}
})
@ -377,20 +352,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.docs = await this.mgmtService.getOIDCInformation();
}
private async showSaveSnack(): Promise<void> {
const message = await this.translate.get('APP.TOAST.CONFIGCHANGED').toPromise();
const action = await this.translate.get('ACTIONS.SAVENOW').toPromise();
const snackRef = this.snackbar.open(message, action, { duration: 5000, verticalPosition: 'top' });
snackRef.onAction().subscribe(() => {
if (this.app.oidcConfig) {
this.saveOIDCApp();
} else if (this.app.apiConfig) {
this.saveAPIApp();
}
});
}
private getAuthMethodOptions(type: string): void {
if (type === 'OIDC') {
switch (this.app.oidcConfig?.appType) {
@ -426,6 +387,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
(partialConfig.oidc as Partial<OIDCConfig.AsObject>).authMethodType ?? OIDCAuthMethodType.OIDC_AUTH_METHOD_TYPE_NONE;
this.oidcForm.patchValue(this.app.oidcConfig);
this.oidcTokenForm.patchValue(this.app.oidcConfig);
} else if (partialConfig && partialConfig.api && this.app.apiConfig) {
this.app.apiConfig.authMethodType =
(partialConfig.api as Partial<APIConfig.AsObject>).authMethodType ?? APIAuthMethodType.API_AUTH_METHOD_TYPE_BASIC;
@ -444,6 +406,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
},
width: '400px',
});
dialogRef.afterClosed().subscribe((resp) => {
if (resp && this.projectId && this.app.id) {
this.mgmtService
@ -519,40 +482,53 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.requestRedirectValuesSubject$.next();
if (this.oidcForm.valid) {
if (this.app.oidcConfig) {
// configuration
this.app.oidcConfig.responseTypesList = this.responseTypesList?.value;
this.app.oidcConfig.grantTypesList = this.grantTypesList?.value;
this.app.oidcConfig.appType = this.appType?.value;
this.app.oidcConfig.authMethodType = this.authMethodType?.value;
this.app.oidcConfig.redirectUrisList = this.redirectUrisList;
this.app.oidcConfig.postLogoutRedirectUrisList = this.postLogoutRedirectUrisList;
this.app.oidcConfig.additionalOriginsList = this.additionalOriginsList;
this.app.oidcConfig.devMode = this.devMode?.value;
// token
this.app.oidcConfig.accessTokenType = this.accessTokenType?.value;
this.app.oidcConfig.accessTokenRoleAssertion = this.accessTokenRoleAssertion?.value;
this.app.oidcConfig.idTokenRoleAssertion = this.idTokenRoleAssertion?.value;
this.app.oidcConfig.idTokenUserinfoAssertion = this.idTokenUserinfoAssertion?.value;
// redirects
this.app.oidcConfig.redirectUrisList = this.redirectUrisList;
this.app.oidcConfig.postLogoutRedirectUrisList = this.postLogoutRedirectUrisList;
this.app.oidcConfig.additionalOriginsList = this.additionalOriginsList;
this.app.oidcConfig.devMode = this.devMode?.value;
const req = new UpdateOIDCAppConfigRequest();
req.setProjectId(this.projectId);
req.setAppId(this.app.id);
req.setRedirectUrisList(this.app.oidcConfig.redirectUrisList);
// configuration
req.setResponseTypesList(this.app.oidcConfig.responseTypesList);
req.setAdditionalOriginsList(this.app.oidcConfig.additionalOriginsList);
req.setAuthMethodType(this.app.oidcConfig.authMethodType);
req.setPostLogoutRedirectUrisList(this.app.oidcConfig.postLogoutRedirectUrisList);
req.setGrantTypesList(this.app.oidcConfig.grantTypesList);
req.setAppType(this.app.oidcConfig.appType);
req.setDevMode(this.app.oidcConfig.devMode);
// token
req.setAccessTokenType(this.app.oidcConfig.accessTokenType);
req.setAccessTokenRoleAssertion(this.app.oidcConfig.accessTokenRoleAssertion);
req.setIdTokenRoleAssertion(this.app.oidcConfig.idTokenRoleAssertion);
req.setIdTokenUserinfoAssertion(this.app.oidcConfig.idTokenUserinfoAssertion);
// redirects
req.setRedirectUrisList(this.app.oidcConfig.redirectUrisList);
req.setAdditionalOriginsList(this.app.oidcConfig.additionalOriginsList);
req.setPostLogoutRedirectUrisList(this.app.oidcConfig.postLogoutRedirectUrisList);
req.setDevMode(this.app.oidcConfig.devMode);
if (this.clockSkewSeconds?.value) {
const dur = new Duration();
dur.setSeconds(Math.floor(this.clockSkewSeconds?.value));
dur.setNanos(Math.floor(this.clockSkewSeconds?.value % 1) * 10000);
req.setClockSkew(dur);
}
this.mgmtService
.updateOIDCAppConfig(req)
.then(() => {
@ -622,6 +598,24 @@ export class AppDetailComponent implements OnInit, OnDestroy {
});
}
public changeAuthMethod(): void {
const ref = this.dialog.open(AuthMethodDialogComponent, {
data: {
radioItemAuthType: this.currentRadioItemAuthType,
initialAuthMethod: this.initialAuthMethod,
currentAuthMethod: this.currentAuthMethod,
authMethods: this.authMethods,
isOIDC: this.app?.oidcConfig !== undefined,
},
});
ref.afterClosed().subscribe((authMethod: string) => {
if (authMethod) {
this.setPartialConfigFromAuthMethod(authMethod);
}
});
}
public regenerateAPIClientSecret(): void {
this.mgmtService
.regenerateAPIClientSecret(this.app.id, this.projectId)
@ -639,6 +633,10 @@ export class AppDetailComponent implements OnInit, OnDestroy {
});
}
public get currentRadioItemAuthType(): RadioItemAuthType | undefined {
return this.authMethods.find((i) => i.key === this.initialAuthMethod);
}
public navigateBack(): void {
this._location.back();
}
@ -672,22 +670,22 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public get accessTokenType(): AbstractControl | null {
return this.oidcForm.get('accessTokenType');
return this.oidcTokenForm.get('accessTokenType');
}
public get idTokenRoleAssertion(): AbstractControl | null {
return this.oidcForm.get('idTokenRoleAssertion');
return this.oidcTokenForm.get('idTokenRoleAssertion');
}
public get accessTokenRoleAssertion(): AbstractControl | null {
return this.oidcForm.get('accessTokenRoleAssertion');
return this.oidcTokenForm.get('accessTokenRoleAssertion');
}
public get idTokenUserinfoAssertion(): AbstractControl | null {
return this.oidcForm.get('idTokenUserinfoAssertion');
return this.oidcTokenForm.get('idTokenUserinfoAssertion');
}
public get clockSkewSeconds(): AbstractControl | null {
return this.oidcForm.get('clockSkewSeconds');
return this.oidcTokenForm.get('clockSkewSeconds');
}
}

31
console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.html Normal file
View File

@ -0,0 +1,31 @@
<h1 mat-dialog-title>
<span>{{ 'USER.CODEDIALOG.TITLE' | translate }} {{ data?.number }}</span>
</h1>
<p class="desc cnsl-secondary-text">{{ 'USER.CODEDIALOG.DESCRIPTION' | translate }}</p>
<div mat-dialog-content>
<cnsl-auth-method-radio
[authMethods]="data.authMethods"
[selected]="data.initialAuthMethod"
[current]="data.currentAuthMethod"
[isOIDC]="data.isOIDC"
(selectedMethod)="authmethod = $event"
[compact]="true"
>
</cnsl-auth-method-radio>
</div>
<div mat-dialog-actions class="action">
<button color="primary" mat-stroked-button class="ok-button" (click)="closeDialog()">
{{ 'ACTIONS.CLOSE' | translate }}
</button>
<button
[disabled]="!authmethod"
cdkFocusInitial
color="primary"
mat-raised-button
class="ok-button"
(click)="closeDialogWithMethod()"
>
{{ 'ACTIONS.SELECT' | translate }}
</button>
</div>

25
console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.scss Normal file
View File

@ -0,0 +1,25 @@
h1 {
font-size: 1.5rem;
margin: 0;
}
.desc {
font-size: 14px;
}
.formfield {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
button {
border-radius: 0.5rem;
}
}

24
console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { AuthMethodDialogComponent } from './auth-method-dialog.component';
describe('AuthMethodDialogComponent', () => {
let component: AuthMethodDialogComponent;
let fixture: ComponentFixture<AuthMethodDialogComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [AuthMethodDialogComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AuthMethodDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

22
console/src/app/pages/projects/apps/app-detail/auth-method-dialog/auth-method-dialog.component.ts Normal file
View File

@ -0,0 +1,22 @@
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'cnsl-auth-method-dialog',
templateUrl: './auth-method-dialog.component.html',
styleUrls: ['./auth-method-dialog.component.scss'],
})
export class AuthMethodDialogComponent {
public authmethod: string = '';
constructor(public dialogRef: MatDialogRef<AuthMethodDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) {
this.authmethod = data.initialAuthMethod;
}
public closeDialog(): void {
this.dialogRef.close();
}
public closeDialogWithMethod(): void {
this.dialogRef.close(this.authmethod);
}
}

6
console/src/app/pages/projects/apps/apps.module.ts
View File

@ -23,10 +23,10 @@ import { AppRadioModule } from 'src/app/modules/app-radio/app-radio.module';
import { CardModule } from 'src/app/modules/card/card.module';
import { ChangesModule } from 'src/app/modules/changes/changes.module';
import { ClientKeysModule } from 'src/app/modules/client-keys/client-keys.module';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { InfoRowModule } from 'src/app/modules/info-row/info-row.module';
import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { LinksModule } from 'src/app/modules/links/links.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { NameDialogModule } from 'src/app/modules/name-dialog/name-dialog.module';
import { SidenavModule } from 'src/app/modules/sidenav/sidenav.module';
@ -38,6 +38,7 @@ import { RedirectPipeModule } from 'src/app/pipes/redirect-pipe/redirect-pipe.mo
import { AdditionalOriginsComponent } from './additional-origins/additional-origins.component';
import { AppCreateComponent } from './app-create/app-create.component';
import { AppDetailComponent } from './app-detail/app-detail.component';
import { AuthMethodDialogComponent } from './app-detail/auth-method-dialog/auth-method-dialog.component';
import { AppSecretDialogComponent } from './app-secret-dialog/app-secret-dialog.component';
import { AppsRoutingModule } from './apps-routing.module';
import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
@ -49,12 +50,12 @@ import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
AppSecretDialogComponent,
RedirectUrisComponent,
AdditionalOriginsComponent,
AuthMethodDialogComponent,
],
imports: [
CommonModule,
A11yModule,
RedirectPipeModule,
LinksModule,
NameDialogModule,
AppRadioModule,
AppsRoutingModule,
@ -66,6 +67,7 @@ import { RedirectUrisComponent } from './redirect-uris/redirect-uris.component';
HasRoleModule,
SidenavModule,
MatChipsModule,
CreateLayoutModule,
ClientKeysModule,
HasRolePipeModule,
MatIconModule,

104
console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.html
View File

@ -1,62 +1,54 @@
<div class="max-width-container container">
<div class="abort-container">
<button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<span class="abort">{{ 'PROJECT.GRANT.CREATE.TITLE' | translate }}</span><span class="abort-2">Step
{{ currentCreateStep }} of
{{ STEPS }}</span>
</div>
<cnsl-create-layout
title="{{ 'PROJECT.GRANT.CREATE.TITLE' | translate }}"
[createSteps]="createSteps"
[currentCreateStep]="currentCreateStep"
(closed)="close()"
>
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{ 'PROJECT.GRANT.CREATE.SEL_ORG' | translate }}</h1>
<p>{{ 'PROJECT.GRANT.CREATE.SEL_ORG_DESC' | translate }}</p>
<div class="create-content">
<form (ngSubmit)="searchOrg(domain.value)">
<cnsl-form-field class="org-domain">
<cnsl-label>{{ 'PROJECT.GRANT.CREATE.SEL_ORG_FORMFIELD' | translate }}</cnsl-label>
<input cnslInput #domain />
</cnsl-form-field>
<button [disabled]="domain.value.length === 0" color="primary" type="submit" class="domain-button" mat-raised-button>
{{ 'PROJECT.GRANT.CREATE.SEL_ORG_BUTTON' | translate }}
</button>
</form>
<span *ngIf="org"> {{ 'PROJECT.GRANT.CREATE.FOR_ORG' | translate }} {{ org?.name }} </span>
</ng-container>
<ng-container *ngIf="currentCreateStep === 2">
<h1>{{ 'PROJECT.GRANT.CREATE.SEL_ROLES' | translate }}</h1>
<cnsl-card *ngIf="projectId">
<cnsl-project-roles-table
[displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
(changedSelection)="selectRoles($event)"
[projectId]="projectId"
>
</cnsl-project-roles-table>
</cnsl-card>
</ng-container>
<div class="btn-container">
<ng-container *ngIf="currentCreateStep === 1">
<h1>{{'PROJECT.GRANT.CREATE.SEL_ORG' | translate}}</h1>
<p>{{'PROJECT.GRANT.CREATE.SEL_ORG_DESC' | translate}}</p>
<form (ngSubmit)="searchOrg(domain.value)">
<cnsl-form-field class="org-domain">
<cnsl-label>{{'PROJECT.GRANT.CREATE.SEL_ORG_FORMFIELD' | translate}}</cnsl-label>
<input cnslInput #domain />
</cnsl-form-field>
<button [disabled]="domain.value.length === 0" color="primary" type="submit" class="domain-button"
mat-raised-button>
{{'PROJECT.GRANT.CREATE.SEL_ORG_BUTTON' | translate}}
</button>
</form>
<span *ngIf="org">
{{'PROJECT.GRANT.CREATE.FOR_ORG' | translate}} {{org?.name}}
</span>
<button [disabled]="!org" (click)="next()" color="primary" mat-raised-button class="big-button" cdkFocusInitial>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</ng-container>
<ng-container *ngIf="currentCreateStep === 2">
<h1>{{'PROJECT.GRANT.CREATE.SEL_ROLES' | translate}}</h1>
<cnsl-card *ngIf="projectId">
<cnsl-project-roles-table
[displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
(changedSelection)="selectRoles($event)" [projectId]="projectId">
</cnsl-project-roles-table>
</cnsl-card>
<ng-container *ngIf="currentCreateStep === createSteps">
<button (click)="previous()" mat-stroked-button class="small-button">
{{ 'ACTIONS.BACK' | translate }}
</button>
<button color="primary" [disabled]="!org" (click)="addGrant()" mat-raised-button class="big-button" cdkFocusInitial>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</ng-container>
<div class="btn-container">
<ng-container *ngIf="currentCreateStep === 1">
<button [disabled]="!org" (click)="next()" color="primary" mat-raised-button class="big-button" cdkFocusInitial>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</ng-container>
<ng-container *ngIf="currentCreateStep === STEPS">
<button (click)="previous()" mat-stroked-button class="small-button">
{{ 'ACTIONS.BACK' | translate }}
</button>
<button color="primary" [disabled]="!org" (click)="addGrant()" mat-raised-button class="big-button"
cdkFocusInitial>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</ng-container>
</div>
</div>
</div>
</cnsl-create-layout>

34
console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.scss
View File

@ -1,34 +1,8 @@
.container {
padding: 4rem 0 2rem 0;
form {
max-width: 35rem;
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
white-space: nowrap;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
.create-content {
padding-left: 4.5rem;
form {
max-width: 35rem;
.org-domain {
margin-right: 1rem;
}
}
.org-domain {
margin-right: 1rem;
}
}

2
console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.component.ts
View File

@ -21,7 +21,7 @@ export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
public grantId: string = '';
public rolesKeyList: string[] = [];
public STEPS: number = 2;
public createSteps: number = 2;
public currentCreateStep: number = 1;
private destroy$: Subject<void> = new Subject();

2
console/src/app/pages/projects/owned-projects/project-grant-create/project-grant-create.module.ts
View File

@ -10,6 +10,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CardModule } from 'src/app/modules/card/card.module';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { ProjectRolesTableModule } from 'src/app/modules/project-roles-table/project-roles-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@ -25,6 +26,7 @@ import { ProjectGrantCreateComponent } from './project-grant-create.component';
MatAutocompleteModule,
MatChipsModule,
MatButtonModule,
CreateLayoutModule,
InputModule,
CardModule,
MatCheckboxModule,

42
console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.html
View File

@ -1,14 +1,10 @@
<div class="container">
<div class="abort-container">
<button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<span class="abort">{{ 'PROJECT.ROLE.ADDTITLE' | translate }}</span><span class="abort-2">Step
{{ currentCreateStep }} of
{{ createSteps }}</span>
</div>
<h1>{{'PROJECT.ROLE.ADDDESCRIPTION' | translate}}</h1>
<cnsl-create-layout
title="{{ 'PROJECT.ROLE.ADDTITLE' | translate }}"
[createSteps]="1"
[currentCreateStep]="1"
(closed)="close()"
>
<h1>{{ 'PROJECT.ROLE.ADDDESCRIPTION' | translate }}</h1>
<form @list (ngSubmit)="addRole()">
<div @animate *ngFor="let formGroup of formArray.controls; index as i" class="newrole-content">
@ -27,20 +23,32 @@
<input cnslInput formControlName="group" />
</cnsl-form-field>
</div>
<button *ngIf="i !== 0" mat-icon-button (click)="removeEntry(i)" type="button" color="warn"
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}">
<button
*ngIf="i !== 0"
mat-icon-button
(click)="removeEntry(i)"
type="button"
color="warn"
matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
>
<i class="las la-trash"></i>
</button>
</ng-container>
</div>
<button class="add-line-btn" color="primary" type="button" mat-stroked-button (click)="addEntry()">
{{'PROJECT.ROLE.ADDNEWLINE' | translate}}
{{ 'PROJECT.ROLE.ADDNEWLINE' | translate }}
</button>
<button color="primary" mat-raised-button class="continue-button" [disabled]="formArray.invalid" type="submit"
[attr.data-e2e]="'save-button'">
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="formArray.invalid"
type="submit"
[attr.data-e2e]="'save-button'"
>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</form>
</div>
</cnsl-create-layout>

33
console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.scss
View File

@ -1,31 +1,6 @@
.container {
padding: 4rem 4rem 2rem 4rem;
@media only screen and (max-width: 450px) {
padding: 4rem 1rem 2rem 1rem;
}
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
.add-line-btn {
margin-bottom: 1rem;
border-radius: .5rem;
}
.add-line-btn {
margin-bottom: 1rem;
border-radius: 0.5rem;
}
.newrole-content {
@ -55,7 +30,7 @@
.continue-button {
margin-top: 3rem;
display: block;
padding: .5rem 4rem;
padding: 0.5rem 4rem;
@media only screen and (max-width: 450px) {
margin-top: 1rem;

2
console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.component.ts
View File

@ -36,8 +36,6 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
displayName: new FormControl(''),
group: new FormControl(''),
});
public createSteps: number = 1;
public currentCreateStep: number = 1;
constructor(
private router: Router,

28
console/src/app/pages/projects/owned-projects/project-role-create/project-role-create.module.ts
View File

@ -5,23 +5,25 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { ProjectRoleCreateRoutingModule } from './project-role-create-routing.module';
import { ProjectRoleCreateComponent } from './project-role-create.component';
@NgModule({
declarations: [ProjectRoleCreateComponent],
imports: [
ProjectRoleCreateRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
InputModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
TranslateModule,
],
declarations: [ProjectRoleCreateComponent],
imports: [
ProjectRoleCreateRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
InputModule,
CreateLayoutModule,
MatButtonModule,
MatIconModule,
MatTooltipModule,
TranslateModule,
],
})
export class ProjectRoleCreateModule { }
export class ProjectRoleCreateModule {}

53
console/src/app/pages/projects/project-create/project-create.component.html
View File

@ -1,34 +1,23 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="abort-container">
<button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<span class="abort">{{ 'PROJECT.PAGES.CREATE' | translate }}</span>
<cnsl-create-layout title="{{ 'PROJECT.PAGES.CREATE' | translate }}" [createSteps]="1" [currentCreateStep]="1">
<h1>{{ 'PROJECT.PAGES.CREATE_DESC' | translate }}</h1>
<form cdkFocusRegionStart (ngSubmit)="saveProject()">
<div class="column">
<cnsl-form-field class="formfield" hintLabel="The name is required!">
<cnsl-label>{{ 'PROJECT.NAME' | translate }}</cnsl-label>
<input cnslInput cdkFocusInitial autofocus [(ngModel)]="project.name" [ngModelOptions]="{ standalone: true }" />
</cnsl-form-field>
</div>
<div class="project-create-content">
<h1>{{ 'PROJECT.PAGES.CREATE_DESC' | translate }}</h1>
<form cdkFocusRegionStart (ngSubmit)="saveProject()">
<div class="column">
<cnsl-form-field class="formfield" hintLabel="The name is required!">
<cnsl-label>{{ 'PROJECT.NAME' | translate }}</cnsl-label>
<input cnslInput cdkFocusInitial autofocus [(ngModel)]="project.name" [ngModelOptions]="{ standalone: true }" />
</cnsl-form-field>
</div>
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="!project.name"
cdkFocusInitial
type="submit"
[attr.data-e2e]="'continue-button'"
>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</form>
</div>
</div>
</div>
<button
color="primary"
mat-raised-button
class="continue-button"
[disabled]="!project.name"
cdkFocusInitial
type="submit"
[attr.data-e2e]="'continue-button'"
>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</form></cnsl-create-layout
>

15
console/src/app/pages/projects/project-create/project-create.component.scss
View File

@ -2,21 +2,6 @@ h1 {
font-weight: 500;
}
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
}
.project-create-content {
padding-left: 4.5rem;
}
.margin-right {
margin-right: 0.5rem;
}

26
console/src/app/pages/projects/project-create/project-create.module.ts
View File

@ -5,22 +5,24 @@ import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { ProjectCreateRoutingModule } from './project-create-routing.module';
import { ProjectCreateComponent } from './project-create.component';
@NgModule({
declarations: [ProjectCreateComponent],
imports: [
A11yModule,
ProjectCreateRoutingModule,
CommonModule,
FormsModule,
InputModule,
MatButtonModule,
MatIconModule,
TranslateModule,
],
declarations: [ProjectCreateComponent],
imports: [
A11yModule,
ProjectCreateRoutingModule,
CommonModule,
FormsModule,
CreateLayoutModule,
InputModule,
MatButtonModule,
MatIconModule,
TranslateModule,
],
})
export class ProjectCreateModule { }
export class ProjectCreateModule {}

147
console/src/app/pages/user-grant-create/user-grant-create.component.html
View File

@ -1,80 +1,73 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="abort-container">
<button (click)="close()" mat-icon-button>
<mat-icon>close</mat-icon>
<cnsl-create-layout
title="{{ 'GRANTS.CREATE.TITLE' | translate }}"
[createSteps]="createSteps"
[currentCreateStep]="currentCreateStep"
(closed)="close()"
>
<ng-container *ngIf="currentCreateStep === 1">
<p class="user-grant-create-desc cnsl-secondary-text">
{{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate: org }}
<br />
{{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION_DESC' | translate }}
</p>
<ng-container>
<h2>{{ 'PROJECT.GRANT.CREATE.SEL_USER' | translate }}</h2>
<cnsl-search-user-autocomplete
[editState]="context !== UserGrantContext.USER"
class="block"
[users]="user ? [user] : []"
(selectionChanged)="selectUsers($event)"
[target]="UserTarget.SELF"
>
</cnsl-search-user-autocomplete>
</ng-container>
<ng-container *ngIf="context && (context === UserGrantContext.USER || context === UserGrantContext.NONE)">
<h2 class="project-search">{{ 'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate }}</h2>
<cnsl-search-project-autocomplete class="block" (selectionChanged)="selectProject($event.project, $event.type)">
</cnsl-search-project-autocomplete>
</ng-container>
</ng-container>
<ng-container *ngIf="currentCreateStep === createSteps">
<h1>{{ 'PROJECT.GRANT.CREATE.SEL_ROLES' | translate }}</h1>
<cnsl-card>
{{ $any(project)?.grantId }}
<cnsl-project-roles-table
[displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
(changedSelection)="selectRoles($event)"
[projectId]="project?.id ? project.id : grantedProject?.projectId ? grantedProject.projectId : ''"
[grantId]="$any(grantedProject)?.grantId ? $any(grantedProject)?.grantId : ''"
>
</cnsl-project-roles-table>
</cnsl-card>
</ng-container>
<div class="btn-container">
<ng-container *ngIf="currentCreateStep === 1">
<button
[disabled]="!org || !(project?.id || grantedProject?.projectId) || userIds.length < 1"
(click)="next()"
color="primary"
mat-raised-button
class="big-button"
cdkFocusInitial
>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
<h1 class="abort">{{ 'GRANTS.CREATE.TITLE' | translate }}</h1>
<span class="abort-2">Step {{ currentCreateStep }} of {{ STEPS }}</span>
</div>
</ng-container>
<div class="user-grant-create-content">
<ng-container *ngIf="currentCreateStep === 1">
<p class="user-grant-create-desc cnsl-secondary-text">
{{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION' | translate: org }}
<br />
{{ 'PROJECT.GRANT.CREATE.ORG_DESCRIPTION_DESC' | translate }}
</p>
<ng-container>
<h2>{{ 'PROJECT.GRANT.CREATE.SEL_USER' | translate }}</h2>
<cnsl-search-user-autocomplete
[editState]="context !== UserGrantContext.USER"
class="block"
[users]="user ? [user] : []"
(selectionChanged)="selectUsers($event)"
[target]="UserTarget.SELF"
>
</cnsl-search-user-autocomplete>
</ng-container>
<ng-container *ngIf="context && (context === UserGrantContext.USER || context === UserGrantContext.NONE)">
<h2 class="project-search">{{ 'PROJECT.GRANT.CREATE.SEL_PROJECT' | translate }}</h2>
<cnsl-search-project-autocomplete class="block" (selectionChanged)="selectProject($event.project, $event.type)">
</cnsl-search-project-autocomplete>
</ng-container>
</ng-container>
<ng-container *ngIf="currentCreateStep === STEPS">
<h1>{{ 'PROJECT.GRANT.CREATE.SEL_ROLES' | translate }}</h1>
<cnsl-card>
{{ $any(project)?.grantId }}
<cnsl-project-roles-table
[displayedColumns]="['select', 'key', 'displayname', 'group', 'creationDate', 'changeDate']"
(changedSelection)="selectRoles($event)"
[projectId]="project?.id ? project.id : grantedProject?.projectId ? grantedProject.projectId : ''"
[grantId]="$any(grantedProject)?.grantId ? $any(grantedProject)?.grantId : ''"
>
</cnsl-project-roles-table>
</cnsl-card>
</ng-container>
<div class="btn-container">
<ng-container *ngIf="currentCreateStep === 1">
<button
[disabled]="!org || !(project?.id || grantedProject?.projectId) || userIds.length < 1"
(click)="next()"
color="primary"
mat-raised-button
class="big-button"
cdkFocusInitial
>
{{ 'ACTIONS.CONTINUE' | translate }}
</button>
</ng-container>
<ng-container *ngIf="currentCreateStep === STEPS">
<button (click)="previous()" mat-stroked-button class="small-button">
{{ 'ACTIONS.BACK' | translate }}
</button>
<button color="primary" (click)="addGrant()" mat-raised-button class="big-button" cdkFocusInitial>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</ng-container>
</div>
</div>
<ng-container *ngIf="currentCreateStep === createSteps">
<button (click)="previous()" mat-stroked-button class="small-button">
{{ 'ACTIONS.BACK' | translate }}
</button>
<button color="primary" (click)="addGrant()" mat-raised-button class="big-button" cdkFocusInitial>
{{ 'ACTIONS.SAVE' | translate }}
</button>
</ng-container>
</div>
</div>
</cnsl-create-layout>

91
console/src/app/pages/user-grant-create/user-grant-create.component.scss
View File

@ -1,65 +1,44 @@
.abort-container {
.user-grant-create-desc {
max-width: 500px;
font-size: 14px;
}
.block {
display: block;
}
.btn-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
margin-top: 3rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
.user-grant-create-content {
padding-left: 4.5rem;
.user-grant-create-desc {
max-width: 500px;
font-size: 14px;
}
.block {
.small-button {
display: block;
}
.btn-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
.small-button {
display: block;
}
.big-button {
display: block;
padding: 0.5rem 4rem;
}
}
.sa-icon {
.big-button {
display: block;
width: 32px;
margin: 0 0.5rem;
i {
margin: auto;
}
}
h2 {
margin-top: 2.5rem;
margin-bottom: 1rem;
font-size: 2rem;
&.project-search {
margin-bottom: 1.5rem;
}
padding: 0.5rem 4rem;
}
}
.sa-icon {
display: block;
width: 32px;
margin: 0 0.5rem;
i {
margin: auto;
}
}
h2 {
margin-top: 2.5rem;
margin-bottom: 1rem;
font-size: 2rem;
&.project-search {
margin-bottom: 1.5rem;
}
}

2
console/src/app/pages/user-grant-create/user-grant-create.component.ts
View File

@ -29,7 +29,7 @@ export class UserGrantCreateComponent implements OnDestroy {
public rolesList: string[] = [];
public STEPS: number = 2; // project, roles
public createSteps: number = 2;
public currentCreateStep: number = 1;
public UserGrantContext: any = UserGrantContext;

4
console/src/app/pages/user-grant-create/user-grant-create.module.ts
View File

@ -5,10 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { CardModule } from 'src/app/modules/card/card.module';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { ProjectRolesTableModule } from 'src/app/modules/project-roles-table/project-roles-table.module';
import {
SearchProjectAutocompleteModule,
SearchProjectAutocompleteModule,
} from 'src/app/modules/search-project-autocomplete/search-project-autocomplete.module';
import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
import { SharedModule } from 'src/app/modules/shared/shared.module';
@ -23,6 +24,7 @@ import { UserGrantCreateComponent } from './user-grant-create.component';
CommonModule,
MatButtonModule,
MatIconModule,
CreateLayoutModule,
TranslateModule,
CardModule,
InputModule,

88
console/src/app/pages/users/user-create-machine/user-create-machine.component.html
View File

@ -1,45 +1,47 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="abort-container">
<a [routerLink]="[ '/users']" mat-icon-button>
<mat-icon>close</mat-icon>
</a>
<h1 class="abort">{{ 'USER.CREATE.TITLE' | translate }}</h1><span class="abort-2">Step
1 of 1</span>
</div>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<cnsl-create-layout
title="{{ 'USER.CREATE.TITLE' | translate }}"
[createSteps]="1"
[currentCreateStep]="1"
(closed)="close()"
>
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<div class="machine-create-main-content">
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="machine-create-form">
<div class="machine-create-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="name" required />
<span cnslError *ngIf="name?.invalid && name?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>
<input cnslInput formControlName="description" />
</cnsl-form-field>
</div>
<div class="machine-btn-container">
<button color="primary" [attr.data-e2e]="'create-button'" [disabled]="userForm.invalid" type="submit"
mat-raised-button>{{ 'ACTIONS.CREATE' |
translate }}</button>
</div>
</form>
</div>
<div class="machine-create-main-content">
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="machine-create-form">
<div class="machine-create-content">
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.USERNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="userName" required />
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.NAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="name" required />
<span cnslError *ngIf="name?.invalid && name?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field class="formfield">
<cnsl-label>{{ 'USER.MACHINE.DESCRIPTION' | translate }}</cnsl-label>
<input cnslInput formControlName="description" />
</cnsl-form-field>
</div>
<div class="machine-btn-container">
<button
color="primary"
[attr.data-e2e]="'create-button'"
[disabled]="userForm.invalid"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
</div>
</form>
</div>
</div>
</cnsl-create-layout>

18
console/src/app/pages/users/user-create-machine/user-create-machine.component.scss
View File

@ -1,22 +1,4 @@
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
.machine-create-main-content {
padding-left: 4.5rem;
max-width: 35rem;
.machine-create-form {

6
console/src/app/pages/users/user-create-machine/user-create-machine.component.ts
View File

@ -1,3 +1,4 @@
import { Location } from '@angular/common';
import { Component, OnDestroy } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@ -24,6 +25,7 @@ export class UserCreateMachineComponent implements OnDestroy {
private toast: ToastService,
public userService: ManagementService,
private fb: FormBuilder,
private _location: Location,
breadcrumbService: BreadcrumbService,
) {
breadcrumbService.setBreadcrumb([
@ -73,6 +75,10 @@ export class UserCreateMachineComponent implements OnDestroy {
this.sub.unsubscribe();
}
public close(): void {
this._location.back();
}
public get name(): AbstractControl | null {
return this.userForm.get('name');
}

40
console/src/app/pages/users/user-create-machine/user-create-machine.module.ts
View File

@ -9,31 +9,31 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { InputModule } from 'src/app/modules/input/input.module';
import { UserCreateMachineRoutingModule } from './user-create-machine-routing.module';
import { UserCreateMachineComponent } from './user-create-machine.component';
@NgModule({
declarations: [UserCreateMachineComponent],
imports: [
UserCreateMachineRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
MatSelectModule,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatCheckboxModule,
MatTooltipModule,
TranslateModule,
DetailLayoutModule,
InputModule,
],
declarations: [UserCreateMachineComponent],
imports: [
UserCreateMachineRoutingModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
CreateLayoutModule,
MatSelectModule,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatCheckboxModule,
MatTooltipModule,
TranslateModule,
DetailLayoutModule,
InputModule,
],
})
export class UserCreateMachineModule { }
export class UserCreateMachineModule {}

308
console/src/app/pages/users/user-create/user-create.component.html
View File

@ -1,167 +1,163 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="abort-container">
<a [routerLink]="['/users']" mat-icon-button>
<mat-icon>close</mat-icon>
</a>
<h1 class="abort">{{ 'USER.CREATE.TITLE' | translate }}</h1>
</div>
<cnsl-create-layout
title="{{ 'USER.CREATE.TITLE' | translate }}"
[createSteps]="1"
[currentCreateStep]="1"
(closed)="close()"
>
<div class="user-create-main-content">
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<div class="user-create-main-content">
<mat-progress-bar *ngIf="loading" color="primary" mode="indeterminate"></mat-progress-bar>
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="user-create-form">
<div class="user-create-content">
<p class="user-create-section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
<form *ngIf="userForm" [formGroup]="userForm" (ngSubmit)="createUser()" class="user-create-form">
<div class="user-create-content">
<p class="user-create-section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
<div class="user-create-grid">
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
<input cnslInput matRipple formControlName="email" required />
<span cnslError *ngIf="email?.invalid && !email?.errors?.required">
{{ 'USER.VALIDATION.NOTANEMAIL' | translate }}
</span>
<span cnslError *ngIf="email?.invalid && email?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
<input
cnslInput
formControlName="userName"
required
[ngStyle]="{ 'padding-right': suffixPadding ? suffixPadding : '10px' }"
/>
<span #suffix *ngIf="envSuffixLabel" cnslSuffix>{{ envSuffixLabel }}</span>
<div class="user-create-grid">
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.EMAIL' | translate }}*</cnsl-label>
<input cnslInput matRipple formControlName="email" required />
<span cnslError *ngIf="email?.invalid && !email?.errors?.required">
{{ 'USER.VALIDATION.NOTANEMAIL' | translate }}
</span>
<span cnslError *ngIf="email?.invalid && email?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}*</cnsl-label>
<input
cnslInput
formControlName="userName"
required
[ngStyle]="{ 'padding-right': suffixPadding ? suffixPadding : '10px' }"
/>
<span #suffix *ngIf="envSuffixLabel" cnslSuffix>{{ envSuffixLabel }}</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="firstName" required />
<span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="lastName" required />
<span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="nickName" />
<span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
</div>
<div class="email-is-verified">
<mat-checkbox class="block-checkbox" formControlName="isVerified">
{{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
</mat-checkbox>
<mat-checkbox class="block-checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{ standalone: true }">
{{ 'ORG.PAGES.USEPASSWORD' | translate }}
</mat-checkbox>
<cnsl-info-section class="full-width desc">
<span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
</cnsl-info-section>
</div>
<div class="pwd-section" *ngIf="usePassword && pwdForm">
<cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
</cnsl-password-complexity-view>
<form [formGroup]="pwdForm">
<div class="user-create-grid">
<cnsl-form-field *ngIf="password">
<cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
<input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
<span cnslError *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field *ngIf="confirmPassword">
<cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
<input
cnslInput
autocomplete="off"
name="confirmPassword"
formControlName="confirmPassword"
type="password"
/>
<span cnslError *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</div>
</form>
</div>
<p class="user-create-section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
<div class="user-create-grid">
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
<mat-select formControlName="gender">
<mat-option *ngFor="let gender of genders" [value]="gender">
{{ 'GENDERS.' + gender | translate }}
</mat-option>
</mat-select>
<span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
<mat-select formControlName="preferredLanguage">
<mat-option *ngFor="let language of languages" [value]="language">
{{ 'LANGUAGES.' + language | translate }}
</mat-option>
<span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</mat-select>
</cnsl-form-field>
</div>
<p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="userName?.invalid && userName?.errors?.noEmailValidator">
{{ 'USER.VALIDATION.NOEMAIL' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
<input cnslInput formControlName="phone" />
<span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
<cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="firstName" required />
<span cnslError *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}*</cnsl-label>
<input cnslInput formControlName="lastName" required />
<span cnslError *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
<input cnslInput formControlName="nickName" />
<span cnslError *ngIf="nickName?.invalid && nickName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
</div>
<div class="user-create-btn-container">
<button
[attr.data-e2e]="'create-button'"
color="primary"
[disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
<div class="email-is-verified">
<mat-checkbox class="block-checkbox" formControlName="isVerified">
{{ 'USER.LOGINMETHODS.EMAIL.ISVERIFIED' | translate }}
</mat-checkbox>
<mat-checkbox class="block-checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{ standalone: true }">
{{ 'ORG.PAGES.USEPASSWORD' | translate }}
</mat-checkbox>
<cnsl-info-section class="full-width desc">
<span>{{ 'USER.CREATE.INITMAILDESCRIPTION' | translate }}</span>
</cnsl-info-section>
</div>
</form>
</div>
<div class="pwd-section" *ngIf="usePassword && pwdForm">
<cnsl-password-complexity-view class="complexity-view" [policy]="this.policy" [password]="password">
</cnsl-password-complexity-view>
<form [formGroup]="pwdForm">
<div class="user-create-grid">
<cnsl-form-field *ngIf="password">
<cnsl-label>{{ 'USER.PASSWORD.NEWINITIAL' | translate }}</cnsl-label>
<input cnslInput autocomplete="off" name="firstpassword" formControlName="password" type="password" />
<span cnslError *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field *ngIf="confirmPassword">
<cnsl-label>{{ 'USER.PASSWORD.CONFIRMINITIAL' | translate }}</cnsl-label>
<input
cnslInput
autocomplete="off"
name="confirmPassword"
formControlName="confirmPassword"
type="password"
/>
<span cnslError *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
<span cnslError *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</span>
</cnsl-form-field>
</div>
</form>
</div>
<p class="user-create-section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
<div class="user-create-grid">
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
<mat-select formControlName="gender">
<mat-option *ngFor="let gender of genders" [value]="gender">
{{ 'GENDERS.' + gender | translate }}
</mat-option>
</mat-select>
<span cnslError *ngIf="gender?.invalid && gender?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
<mat-select formControlName="preferredLanguage">
<mat-option *ngFor="let language of languages" [value]="language">
{{ 'LANGUAGES.' + language | translate }}
</mat-option>
<span cnslError *ngIf="preferredLanguage?.invalid && preferredLanguage?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</mat-select>
</cnsl-form-field>
</div>
<p class="user-create-section">{{ 'USER.CREATE.ADDRESSANDPHONESECTION' | translate }}</p>
<cnsl-form-field>
<cnsl-label>{{ 'USER.PROFILE.PHONE' | translate }}</cnsl-label>
<input cnslInput formControlName="phone" />
<span cnslError *ngIf="phone?.invalid && phone?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</span>
</cnsl-form-field>
</div>
<div class="user-create-btn-container">
<button
[attr.data-e2e]="'create-button'"
color="primary"
[disabled]="userForm.invalid || (this.usePassword && this.pwdForm.invalid)"
type="submit"
mat-raised-button
>
{{ 'ACTIONS.CREATE' | translate }}
</button>
</div>
</form>
</div>
</div>
</cnsl-create-layout>

12
console/src/app/pages/users/user-create/user-create.component.scss
View File

@ -1,16 +1,4 @@
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
}
.user-create-main-content {
padding-left: 4.5rem;
max-width: 35rem;
@media only screen and (max-width: 500px) {

6
console/src/app/pages/users/user-create/user-create.component.ts
View File

@ -1,3 +1,4 @@
import { Location } from '@angular/common';
import { ChangeDetectorRef, Component, OnDestroy, ViewChild } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@ -63,6 +64,7 @@ export class UserCreateComponent implements OnDestroy {
private fb: FormBuilder,
private mgmtService: ManagementService,
private changeDetRef: ChangeDetectorRef,
private _location: Location,
breadcrumbService: BreadcrumbService,
) {
breadcrumbService.setBreadcrumb([
@ -94,6 +96,10 @@ export class UserCreateComponent implements OnDestroy {
});
}
public close(): void {
this._location.back();
}
private async loadOrg(): Promise<void> {
const domains = await this.mgmtService.listOrgDomains();
const found = domains.resultList.find((resp) => resp.isPrimary);

2
console/src/app/pages/users/user-create/user-create.module.ts
View File

@ -10,6 +10,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { CreateLayoutModule } from 'src/app/modules/create-layout/create-layout.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { InfoSectionModule } from 'src/app/modules/info-section/info-section.module';
import { InputModule } from 'src/app/modules/input/input.module';
@ -26,6 +27,7 @@ import { UserCreateComponent } from './user-create.component';
FormsModule,
ReactiveFormsModule,
MatSelectModule,
CreateLayoutModule,
MatButtonModule,
MatIconModule,
MatProgressSpinnerModule,

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

@ -95,6 +95,7 @@
"CANCEL": "Abbrechen",
"INFO": "Info",
"OK": "OK",
"SELECT": "Auswählen",
"VIEW": "Öffnen",
"SELECTIONDELETE": "Ausgewählte löschen",
"DELETE": "Löschen",
@ -118,6 +119,7 @@
"PREVIOUS": "Zurück",
"NEXT": "Weiter",
"MORE": "mehr",
"STEP": "Schritt",
"TABLE": {
"SHOWUSER": "Zeige Benutzer {{value}}"
}
@ -1525,6 +1527,7 @@
"COMPLIANCE": "OIDC Einhaltung",
"URLS": "Urls",
"CONFIGURATION": "Konfiguration",
"TOKEN": "Token Einstellungen",
"PAGES": {
"TITLE": "Anwendung",
"ID": "ID",
@ -1717,8 +1720,8 @@
"TOAST": {
"REACTIVATED": "Anwendung reaktiviert.",
"DEACTIVATED": "Anwendung deaktiviert.",
"OIDCUPDATED": "OIDC-Konfiguration geändert.",
"APIUPDATED": "API Konfiguration geändert.",
"OIDCUPDATED": "App gespeichert",
"APIUPDATED": "App gespeichert",
"UPDATED": "App geändert.",
"CREATED": "App erstellt.",
"CLIENTSECRETREGENERATED": "Client Secret generiert.",

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

@ -95,6 +95,7 @@
"CANCEL": "Cancel",
"INFO": "Info",
"OK": "OK",
"SELECT": "Select",
"VIEW": "Show",
"SELECTIONDELETE": "Delete selection",
"DELETE": "Delete",
@ -118,6 +119,7 @@
"PREVIOUS": "Previous",
"NEXT": "Next",
"MORE": "more",
"STEP": "Step",
"TABLE": {
"SHOWUSER": "Show user {{value}}"
}
@ -1525,6 +1527,7 @@
"COMPLIANCE": "OIDC Compliance",
"URLS": "Urls",
"CONFIGURATION": "Configuration",
"TOKEN": "Token Settings",
"PAGES": {
"TITLE": "Application",
"ID": "ID",
@ -1717,8 +1720,8 @@
"TOAST": {
"REACTIVATED": "Application reactivated.",
"DEACTIVATED": "Application deactivated.",
"OIDCUPDATED": "OIDC configuration updated.",
"APIUPDATED": "API configuration updated",
"OIDCUPDATED": "App updated.",
"APIUPDATED": "App updated",
"UPDATED": "App updated.",
"CREATED": "App created.",
"CLIENTSECRETREGENERATED": "client secret generated.",

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

@ -95,6 +95,7 @@
"CANCEL": "cancella",
"INFO": "Info",
"OK": "OK",
"SELECT": "Seleziona",
"VIEW": "Mostra",
"SELECTIONDELETE": "Elimina selezione",
"DELETE": "Elimina",
@ -118,6 +119,7 @@
"PREVIOUS": "Precedente",
"NEXT": "Avanti",
"MORE": "azioni",
"STEP": "Passo",
"TABLE": {
"SHOWUSER": "Mostra utente {{value}}"
}
@ -1525,6 +1527,7 @@
"COMPLIANCE": "Conformità con OIDC",
"URLS": "Urls",
"CONFIGURATION": "Configurazione",
"TOKEN": "Impostazioni Token",
"PAGES": {
"TITLE": "Applicazione",
"ID": "ID",
@ -1717,8 +1720,8 @@
"TOAST": {
"REACTIVATED": "Applicazione riattivata.",
"DEACTIVATED": "Applicazione disattivata.",
"OIDCUPDATED": "Configurazione OIDC aggiornata.",
"APIUPDATED": "Configurazione API aggiornata",
"OIDCUPDATED": "Applicazione aggiornata",
"APIUPDATED": "Applicazione aggiornata",
"UPDATED": "App aggiornata.",
"CREATED": "App creata.",
"CLIENTSECRETREGENERATED": "Client secret generato.",