andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-29 10:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: console descriptions (#7552)

Browse Source 
* org page descriptions

* feat(console): describe options

* docs: fix bullet

* lint

* refactor: cleanup unused translations

* translate

* translate

* translate

* members

* add links

* translate

* remove scripts

* lint

* remove node-jq

* fix styles

* Update console/src/assets/i18n/it.json

Co-authored-by: Max Peintner <[email protected]>

* Update console/src/assets/i18n/it.json

Co-authored-by: Max Peintner <[email protected]>

* Update console/src/assets/i18n/it.json

Co-authored-by: Max Peintner <[email protected]>

---------

Co-authored-by: peintnermax <[email protected]>
This commit is contained in:
Elio Bischof
2024-03-13 14:53:48 +00:00
committed by GitHub
co-authored by Max Peintner
parent 1db10a4286
commit 6a1b708ff8
65 changed files with 4995 additions and 1427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/card/card.component.html
+3 -1
View File
@@ -9,7 +9,9 @@
<mat-icon *ngIf="expanded">keyboard_arrow_up</mat-icon>
</button>
</div>
<p *ngIf="description" class="desc cnsl-secondary-text">{{ description }}</p>
<p *ngIf="description" class="desc cnsl-secondary-text">
{{ description }}
</p>
</div>
<div class="card-content" *ngIf="expanded" [@openClose]="animate">
<ng-content></ng-content>
console/src/app/modules/contributors/contributors.component.html
+6 -1
View File
@@ -30,7 +30,11 @@
</ng-container>
</ng-container>
<ng-template #compact>
<div (click)="emitShowDetail()" class="contributor-avatar-circle" matTooltip="Click to show detail">
<div
(click)="emitShowDetail()"
class="contributor-avatar-circle"
matTooltip="{{ 'MEMBER.SHOWDETAILS' | translate }}"
>
<span>{{ totalResult }}</span>
</div>
</ng-template>
@@ -40,6 +44,7 @@
(click)="emitAddMember()"
[disabled]="disabled"
mat-icon-button
matTooltip="{{ 'MEMBER.ADD' | translate }}"
aria-label="Add member"
data-e2e="add-member-button"
>
console/src/app/modules/domains/domain-verification/domain-verification.component.html
+4 -4
View File
@@ -15,12 +15,12 @@
<div mat-dialog-content cdkFocusInitial autofocus>
<div *ngIf="showNew && !(dns || http)">
<p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION' | translate }}</p>
<p class="desc">
<p class="domain-desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION' | translate }}</p>
<p class="domain-desc">
{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_HTML' | translate }}
</p>
<p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_DNS' | translate }}</p>
<p class="desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_SKIP' | translate }}</p>
<p class="domain-desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_DNS' | translate }}</p>
<p class="domain-desc">{{ 'ORG.PAGES.ORGDOMAIN.VERIFICATION_SKIP' | translate }}</p>
</div>
<cnsl-info-section [type]="InfoSectionType.WARN" *ngIf="showNew && !(dns || http)" class="desc">{{
console/src/app/modules/domains/domain-verification/domain-verification.component.scss
-4
View File
@@ -2,10 +2,6 @@
$is-dark-theme: map-get($theme, is-dark);
$border-color: if($is-dark-theme, rgba(#8795a1, 0.2), rgba(#8795a1, 0.2));
.desc {
font-size: 0.9rem;
}
.entry {
margin: 0.5rem 0;
display: inline-block;
console/src/app/modules/domains/domains.component.html
+1 -1
View File
@@ -12,7 +12,7 @@
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="desc cnsl-secondary-text">{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}</p>
<p class="domain-desc cnsl-secondary-text">{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}</p>
</div>
<span class="fill-space"></span>
console/src/app/modules/domains/domains.component.scss
+2 -2
View File
@@ -27,9 +27,9 @@
}
}
.desc {
.domain-desc {
margin-top: 0;
margin-bottom: 2rem;
font-size: 14px;
}
.domain-card {
console/src/app/modules/events/events.component.html
+7 -2
View File
@@ -1,5 +1,10 @@
<h2>{{ 'IAM.EVENTS.TITLE' | translate }}</h2>
<p class="events-desc cnsl-secondary-text">{{ 'IAM.EVENTS.DESCRIPTION' | translate }}</p>
<div class="events-title-row">
<h2>{{ 'DESCRIPTIONS.SETTINGS.IAM_EVENTS.TITLE' | translate }}</h2>
<a mat-icon-button href="https://zitadel.com/docs/concepts/features/audit-trail" rel="noreferrer" target="_blank">
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="events-desc cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.IAM_EVENTS.DESCRIPTION' | translate }}</p>
<cnsl-refresh-table
[hideRefresh]="true"
console/src/app/modules/events/events.component.scss
+15
View File
@@ -1,3 +1,18 @@
.events-title-row {
display: flex;
align-items: center;
h1 {
margin: 0;
}
a .icon {
font-size: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
}
}
@mixin events-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
console/src/app/modules/failed-events/failed-events.component.html
+2 -2
View File
@@ -1,5 +1,5 @@
<h2>{{ 'IAM.FAILEDEVENTS.TITLE' | translate }}</h2>
<p class="failed-events-desc cnsl-secondary-text">{{ 'IAM.FAILEDEVENTS.DESCRIPTION' | translate }}</p>
<h2>{{ 'DESCRIPTIONS.SETTINGS.IAM_FAILED_EVENTS.TITLE' | translate }}</h2>
<p class="failed-events-desc cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.IAM_FAILED_EVENTS.DESCRIPTION' | translate }}</p>
<div class="table-wrapper">
<cnsl-refresh-table (refreshed)="loadEvents()" [dataSize]="eventDataSource.data.length" [loading]="loading$ | async">
console/src/app/modules/iam-views/iam-views.component.html
+2 -2
View File
@@ -1,5 +1,5 @@
<h2>{{ 'IAM.VIEWS.TITLE' | translate }}</h2>
<p class="views-desc cnsl-secondary-text">{{ 'IAM.VIEWS.DESCRIPTION' | translate }}</p>
<h2>{{ 'DESCRIPTIONS.SETTINGS.IAM_VIEWS.TITLE' | translate }}</h2>
<p class="views-desc cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.IAM_VIEWS.DESCRIPTION' | translate }}</p>
<cnsl-refresh-table (refreshed)="loadViews()" [dataSize]="dataSource.data.length" [loading]="loading$ | async">
<table [dataSource]="dataSource" mat-table class="table views-table" aria-label="Views" matSort>
console/src/app/modules/metadata/metadata/metadata.component.html
+1 -1
View File
@@ -1,4 +1,4 @@
<cnsl-card class="metadata-details" title="{{ 'METADATA.TITLE' | translate }}">
<cnsl-card class="metadata-details" [title]="'DESCRIPTIONS.METADATA_TITLE' | translate" [description]="description">
<mat-spinner card-actions class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
<cnsl-refresh-table [loading]="loading$ | async" (refreshed)="refresh.emit()" [dataSize]="dataSource.data.length">
console/src/app/modules/metadata/metadata/metadata.component.ts
+1
View File
@@ -13,6 +13,7 @@ export class MetadataComponent implements OnChanges {
@Input() public metadata: Metadata.AsObject[] = [];
@Input() public disabled: boolean = false;
@Input() public loading: boolean = false;
@Input({ required: true }) public description!: string;
@Output() public editClicked: EventEmitter<void> = new EventEmitter();
@Output() public refresh: EventEmitter<void> = new EventEmitter();
console/src/app/modules/policies/domain-policy/domain-policy.component.html
+102 -89
View File
@@ -2,9 +2,10 @@
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<h2>{{ 'POLICY.DOMAIN_POLICY.TITLE' | translate }}</h2>
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<h2>{{ 'DESCRIPTIONS.SETTINGS.DOMAINS.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.DOMAINS.DESCRIPTION' | translate }}</p>
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
<button
*ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault"
matTooltip="{{ 'POLICY.RESET' | translate }}"
@@ -27,101 +28,113 @@
</button>
<div class="domain-policy-content" *ngIf="domainData">
<div class="row">
<mat-checkbox
color="primary"
name="hasNumber"
ngDefaultControl
[(ngModel)]="domainData.userLoginMustBeDomain"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'POLICY.DATA.USERLOGINMUSTBEDOMAIN' | translate }}
</mat-checkbox>
</div>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.DOMAINS.LOGIN_NAME_PATTERN.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.DOMAINS.LOGIN_NAME_PATTERN.DESCRIPTION' | translate"
>
<div class="row">
<mat-checkbox
color="primary"
name="hasNumber"
ngDefaultControl
[(ngModel)]="domainData.userLoginMustBeDomain"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'POLICY.DATA.USERLOGINMUSTBEDOMAIN' | translate }}
</mat-checkbox>
</div>
<cnsl-info-section>
<div>
<span>{{ 'POLICY.DATA.USERLOGINMUSTBEDOMAIN_DESCRIPTION' | translate }}</span>
<cnsl-info-section>
<div>
<span>{{ 'POLICY.DATA.USERLOGINMUSTBEDOMAIN_DESCRIPTION' | translate }}</span>
<div class="loginname-preview">
<div class="left-right">
<div *ngIf="domainData.userLoginMustBeDomain"><small>domain</small><span>acme.com</span></div>
<div *ngIf="domainData.userLoginMustBeDomain"><small>username</small><span>john</span></div>
<div *ngIf="domainData.userLoginMustBeDomain"><small>loginname</small><span>john&#64;acme.com</span></div>
<div class="loginname-preview">
<div class="left-right">
<div *ngIf="domainData.userLoginMustBeDomain"><small>domain</small><span>acme.com</span></div>
<div *ngIf="domainData.userLoginMustBeDomain"><small>username</small><span>john</span></div>
<div *ngIf="domainData.userLoginMustBeDomain"><small>loginname</small><span>john&#64;acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>domain</small><span>acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>username</small><span>john&#64;acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>loginname</small><span>john&#64;acme.com</span></div>
</div>
<i class="las la-arrow-right"></i>
<div class="left-right">
<div *ngIf="domainData.userLoginMustBeDomain"><small>domain</small><span>acme.com</span></div>
<div *ngIf="domainData.userLoginMustBeDomain"><small>username</small><span>john&#64;acme.com</span></div>
<div *ngIf="domainData.userLoginMustBeDomain"><small>loginname</small><span>john&#64;acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>domain</small><span>acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>username</small><span>john&#64;acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>loginname</small><span>john&#64;acme.com</span></div>
</div>
<i class="las la-arrow-right"></i>
<div class="left-right">
<div *ngIf="domainData.userLoginMustBeDomain"><small>domain</small><span>acme.com</span></div>
<div *ngIf="domainData.userLoginMustBeDomain"><small>username</small><span>john&#64;acme.com</span></div>
<div *ngIf="domainData.userLoginMustBeDomain"><small>loginname</small><span>john&#64;acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>domain</small><span>acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>username</small><span>john</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>loginname</small><span>john&#64;acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>domain</small><span>acme.com</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>username</small><span>john</span></div>
<div *ngIf="!domainData.userLoginMustBeDomain"><small>loginname</small><span>john&#64;acme.com</span></div>
</div>
</div>
</div>
</cnsl-info-section>
</cnsl-card>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.DOMAINS.DOMAIN_VERIFICATION.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.DOMAINS.DOMAIN_VERIFICATION.DESCRIPTION' | translate"
>
<div class="row">
<mat-checkbox
color="primary"
name="hasNumber"
ngDefaultControl
[(ngModel)]="domainData.validateOrgDomains"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'POLICY.DATA.VALIDATEORGDOMAINS' | translate }}
</mat-checkbox>
</div>
</cnsl-info-section>
<div class="row">
<mat-checkbox
color="primary"
name="hasNumber"
ngDefaultControl
[(ngModel)]="domainData.validateOrgDomains"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'POLICY.DATA.VALIDATEORGDOMAINS' | translate }}
</mat-checkbox>
</div>
<div class="row">
<mat-checkbox
color="primary"
name="hasNumber"
ngDefaultControl
[(ngModel)]="domainData.smtpSenderAddressMatchesInstanceDomain"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'POLICY.DATA.SMTPSENDERADDRESSMATCHESINSTANCEDOMAIN' | translate }}
</mat-checkbox>
</div>
</cnsl-card>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.DOMAINS.SMTP_SENDER_ADDRESS.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.DOMAINS.SMTP_SENDER_ADDRESS.DESCRIPTION' | translate"
>
<div class="row">
<mat-checkbox
color="primary"
name="hasNumber"
ngDefaultControl
[(ngModel)]="domainData.smtpSenderAddressMatchesInstanceDomain"
[disabled]="
([
serviceType === PolicyComponentServiceType.ADMIN
? 'iam.policy.write'
: serviceType === PolicyComponentServiceType.MGMT
? 'policy.write'
: ''
]
| hasRole
| async) === false
"
>
{{ 'POLICY.DATA.SMTPSENDERADDRESSMATCHESINSTANCEDOMAIN' | translate }}
</mat-checkbox>
</div>
</cnsl-card>
</div>
<div class="btn-container">
<button
(click)="savePolicy()"
console/src/app/modules/policies/idp-settings/idp-settings.component.html
+7 -2
View File
@@ -1,5 +1,10 @@
<h2>{{ 'IDP.LIST.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'IDP.LIST.DESCRIPTION' | translate }}</p>
<div class="idps-title-row">
<h2>{{ 'DESCRIPTIONS.SETTINGS.IDPS.TITLE' | translate }}</h2>
<a mat-icon-button href="https://zitadel.com/docs/guides/integrate/identity-providers" rel="noreferrer" target="_blank">
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="idps-description cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.IDPS.DESCRIPTION' | translate }}</p>
<div class="cnsl-idp-table-wrapper">
<cnsl-idp-table [service]="service" [serviceType]="serviceType"></cnsl-idp-table>
</div>
console/src/app/modules/policies/idp-settings/idp-settings.component.scss
+20
View File
@@ -1,3 +1,22 @@
.idps-title-row {
display: flex;
align-items: center;
h1 {
margin: 0;
}
a .icon {
font-size: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
}
}
.idps-description {
margin-top: 0;
}
@mixin idp-settings-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: map-get($primary, 500);
@@ -10,6 +29,7 @@
}
.new-idp-wrapper {
margin-top: 2rem;
display: grid;
row-gap: 1.5rem;
column-gap: 1.5rem;
console/src/app/modules/policies/language-settings/language-settings.component.html
+2 -1
View File
@@ -1,4 +1,5 @@
<h2>{{ 'SETTING.LANGUAGES.TITLE' | translate }}</h2>
<h2>{{ 'DESCRIPTIONS.SETTINGS.LANGUAGES.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.LANGUAGES.DESCRIPTION' | translate }}</p>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
console/src/app/modules/policies/login-policy/login-policy.component.html
+67 -55
View File
@@ -146,63 +146,67 @@
<br />
<h3>{{ 'POLICY.LOGIN_POLICY.LIFETIMEDURATIONS' | translate }}</h3>
<h3>{{ 'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.TITLE' | translate }}</h3>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.DESCRIPTION' | translate }}</p>
<form class="lifetime-form" (ngSubmit)="savePolicy()" [formGroup]="lifetimeForm" autocomplete="off">
<cnsl-form-field class="lifetime-form-field" label="Password Check Lifetime" required="true">
<cnsl-label
>{{ 'POLICY.DATA.PASSWORDCHECKLIFETIME' | translate }}&nbsp;<strong
>({{ 'POLICY.DATA.INHOURS' | translate }})</strong
></cnsl-label
>
<input cnslInput type="number" name="passwordCheckLifetime" formControlName="passwordCheckLifetime" />
</cnsl-form-field>
<cnsl-form-field class="lifetime-form-field" label="external Login Check Lifetime" required="true">
<cnsl-label
>{{ 'POLICY.DATA.EXTERNALLOGINCHECKLIFETIME' | translate }}&nbsp;<strong
>({{ 'POLICY.DATA.INHOURS' | translate }})</strong
></cnsl-label
>
<input cnslInput type="number" name="externalLoginCheckLifetime" formControlName="externalLoginCheckLifetime" />
</cnsl-form-field>
<cnsl-form-field class="lifetime-form-field" label="MFA Init Skip Lifetime" required="true">
<cnsl-label
>{{ 'POLICY.DATA.MFAINITSKIPLIFETIME' | translate }}&nbsp;<strong
>({{ 'POLICY.DATA.INHOURS' | translate }})</strong
></cnsl-label
>
<input cnslInput type="number" name="mfaInitSkipLifetime" formControlName="mfaInitSkipLifetime" />
</cnsl-form-field>
<cnsl-form-field class="lifetime-form-field" label="Second Factor Check Lifetime" required="true">
<cnsl-label
>{{ 'POLICY.DATA.SECONDFACTORCHECKLIFETIME' | translate }}&nbsp;
<strong>({{ 'POLICY.DATA.INHOURS' | translate }})</strong></cnsl-label
>
<input cnslInput type="number" name="secondFactorCheckLifetime" formControlName="secondFactorCheckLifetime" />
</cnsl-form-field>
<cnsl-form-field class="lifetime-form-field" label="Multi Factor Check Lifetime" required="true">
<cnsl-label
>{{ 'POLICY.DATA.MULTIFACTORCHECKLIFETIME' | translate }}&nbsp;
<strong>({{ 'POLICY.DATA.INHOURS' | translate }})</strong></cnsl-label
>
<input cnslInput type="number" name="multiFactorCheckLifetime" formControlName="multiFactorCheckLifetime" />
</cnsl-form-field>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.PW_CHECK.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.PW_CHECK.DESCRIPTION' | translate"
>
<cnsl-form-field class="lifetime-form-field" label="Password Check Lifetime" required="true">
<cnsl-label>{{ 'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.LABEL' | translate }}</cnsl-label>
<input cnslInput type="number" name="passwordCheckLifetime" formControlName="passwordCheckLifetime" />
</cnsl-form-field>
</cnsl-card>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.EXT_LOGIN_CHECK.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.EXT_LOGIN_CHECK.DESCRIPTION' | translate"
>
<cnsl-form-field class="lifetime-form-field" label="external Login Check Lifetime" required="true">
<cnsl-label>{{ 'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.LABEL' | translate }}</cnsl-label>
<input cnslInput type="number" name="externalLoginCheckLifetime" formControlName="externalLoginCheckLifetime" />
</cnsl-form-field>
</cnsl-card>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.MULTI_FACTOR_INIT.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.MULTI_FACTOR_INIT.DESCRIPTION' | translate"
>
<cnsl-form-field class="lifetime-form-field" label="MFA Init Skip Lifetime" required="true">
<cnsl-label>{{ 'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.LABEL' | translate }}</cnsl-label>
<input cnslInput type="number" name="mfaInitSkipLifetime" formControlName="mfaInitSkipLifetime" />
</cnsl-form-field>
</cnsl-card>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.SECOND_FACTOR_CHECK.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.SECOND_FACTOR_CHECK.DESCRIPTION' | translate"
>
<cnsl-form-field class="lifetime-form-field" label="Second Factor Check Lifetime" required="true">
<cnsl-label>{{ 'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.LABEL' | translate }}</cnsl-label>
<input cnslInput type="number" name="secondFactorCheckLifetime" formControlName="secondFactorCheckLifetime" />
</cnsl-form-field>
</cnsl-card>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.MULTI_FACTOR_CHECK.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.MULTI_FACTOR_CHECK.DESCRIPTION' | translate"
>
<cnsl-form-field class="lifetime-form-field" label="Multi Factor Check Lifetime" required="true">
<cnsl-label>{{ 'DESCRIPTIONS.SETTINGS.LOGIN.LIFETIMES.LABEL' | translate }}</cnsl-label>
<input cnslInput type="number" name="multiFactorCheckLifetime" formControlName="multiFactorCheckLifetime" />
</cnsl-form-field>
</cnsl-card>
</form>
<br />
<h3>{{ 'POLICY.LOGIN_POLICY.ADVANCED' | translate }}</h3>
<h3>{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.TITLE' | translate }}</h3>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.DESCRIPTION' | translate }}</p>
<div class="max-card-width login-policy-content" *ngIf="loginData">
<div class="login-policy-row">
<mat-checkbox
class="login-policy-toggle"
color="primary"
matTooltip="{{ 'POLICY.DATA.FORCEMFA_DESC' | translate }}"
matTooltip="{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.USERNAME_PASSWORD_ALLOWED.DESCRIPTION' | translate }}"
ngDefaultControl
[(ngModel)]="loginData.allowUsernamePassword"
[disabled]="
@@ -217,7 +221,7 @@
| async) === false
"
>
{{ 'POLICY.DATA.ALLOWUSERNAMEPASSWORD' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.USERNAME_PASSWORD_ALLOWED.TITLE' | translate }}
</mat-checkbox>
<!-- <cnsl-info-section class="info">
@@ -229,6 +233,7 @@
class="login-policy-toggle"
color="primary"
ngDefaultControl
matTooltip="{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.USER_REGISTRATION_ALLOWED.DESCRIPTION' | translate }}"
[(ngModel)]="loginData.allowRegister"
[disabled]="
([
@@ -242,7 +247,7 @@
| async) === false
"
>
{{ 'POLICY.DATA.ALLOWREGISTERUSERS' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.USER_REGISTRATION_ALLOWED.TITLE' | translate }}
</mat-checkbox>
</div>
<div class="login-policy-row">
@@ -250,11 +255,12 @@
class="login-policy-toggle"
color="primary"
ngDefaultControl
matTooltip="{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.ORG_REGISTRATION_ALLOWED.DESCRIPTION' | translate }}"
[(ngModel)]="allowOrgRegistration"
*ngIf="serviceType === PolicyComponentServiceType.ADMIN"
[disabled]="(['iam.restrictions.write'] | hasRole | async) === false"
>
{{ 'POLICY.DATA.ALLOWREGISTERORGS' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.ORG_REGISTRATION_ALLOWED.TITLE' | translate }}
</mat-checkbox>
</div>
<div class="login-policy-row">
@@ -262,6 +268,7 @@
class="login-policy-toggle"
color="primary"
ngDefaultControl
matTooltip="{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.EXTERNAL_LOGIN_ALLOWED.DESCRIPTION' | translate }}"
[(ngModel)]="loginData.allowExternalIdp"
[disabled]="
([
@@ -275,7 +282,7 @@
| async) === false
"
>
{{ 'POLICY.DATA.ALLOWEXTERNALIDP' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.EXTERNAL_LOGIN_ALLOWED.TITLE' | translate }}
</mat-checkbox>
<!-- <ng-template #idpInfo>
@@ -290,6 +297,7 @@
class="login-policy-toggle"
color="primary"
ngDefaultControl
matTooltip="{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.PASSWORD_RESET_ALLOWED.DESCRIPTION' | translate }}"
[(ngModel)]="loginData.hidePasswordReset"
[disabled]="
([
@@ -303,7 +311,7 @@
| async) === false
"
>
{{ 'POLICY.DATA.HIDEPASSWORDRESET' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.PASSWORD_RESET_ALLOWED.TITLE' | translate }}
</mat-checkbox>
<!-- <ng-template #passwordResetInfo>
@@ -318,6 +326,7 @@
class="login-policy-toggle"
color="primary"
ngDefaultControl
matTooltip="{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.DOMAIN_DISCOVERY_ALLOWED.DESCRIPTION' | translate }}"
[(ngModel)]="loginData.allowDomainDiscovery"
[disabled]="
([
@@ -331,7 +340,7 @@
| async) === false
"
>
{{ 'POLICY.DATA.ALLOWDOMAINDISCOVERY' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.DOMAIN_DISCOVERY_ALLOWED.TITLE' | translate }}
</mat-checkbox>
</div>
@@ -340,6 +349,7 @@
class="login-policy-toggle"
color="primary"
ngDefaultControl
matTooltip="{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.IGNORE_UNKNOWN_USERNAMES.DESCRIPTION' | translate }}"
[(ngModel)]="loginData.ignoreUnknownUsernames"
[disabled]="
([
@@ -353,7 +363,7 @@
| async) === false
"
>
{{ 'POLICY.DATA.IGNOREUNKNOWNUSERNAMES' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.IGNORE_UNKNOWN_USERNAMES.TITLE' | translate }}
</mat-checkbox>
</div>
@@ -362,6 +372,7 @@
class="login-policy-toggle"
color="primary"
ngDefaultControl
matTooltip="{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.DISABLE_EMAIL_LOGIN.DESCRIPTION' | translate }}"
[(ngModel)]="loginData.disableLoginWithEmail"
[disabled]="
([
@@ -375,7 +386,7 @@
| async) === false
"
>
{{ 'POLICY.DATA.DISABLELOGINWITHEMAIL' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.DISABLE_EMAIL_LOGIN.TITLE' | translate }}
</mat-checkbox>
</div>
@@ -384,6 +395,7 @@
class="login-policy-toggle"
color="primary"
ngDefaultControl
matTooltip="{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.DISABLE_PHONE_LOGIN.DESCRIPTION' | translate }}"
[(ngModel)]="loginData.disableLoginWithPhone"
[disabled]="
([
@@ -397,7 +409,7 @@
| async) === false
"
>
{{ 'POLICY.DATA.DISABLELOGINWITHPHONE' | translate }}
{{ 'DESCRIPTIONS.SETTINGS.LOGIN.FORM.DISABLE_PHONE_LOGIN.TITLE' | translate }}
</mat-checkbox>
</div>
console/src/app/modules/policies/login-policy/login-policy.component.scss
+1 -5
View File
@@ -14,13 +14,9 @@
.lifetime-form {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
@media only screen and (max-width: 950px) {
grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 500px) {
grid-template-columns: 1fr;
}
console/src/app/modules/policies/message-texts/message-texts.component.html
+4 -2
View File
@@ -1,5 +1,5 @@
<h2>{{ 'POLICY.MESSAGE_TEXTS.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.MESSAGE_TEXTS.DESCRIPTION' | translate }}</p>
<h2>{{ 'DESCRIPTIONS.SETTINGS.MESSAGE_TEXTS.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.MESSAGE_TEXTS.DESCRIPTION' | translate }}</p>
<cnsl-info-section class="locked" *ngIf="langSvc.isNotAllowed(language) | async" [type]="InfoSectionType.WARN">
{{ 'POLICY.LOGIN_TEXTS.ACTIVE_LANGUAGE_NOT_ALLOWED' | translate }}</cnsl-info-section
>
@@ -47,6 +47,8 @@
</cnsl-form-field>
</div>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.MESSAGE_TEXTS.TYPE_DESCRIPTIONS.' + currentType | translate }}</p>
<div class="message-text-content">
<cnsl-edit-text
[chips]="chips[currentType]"
console/src/app/modules/policies/notification-sms-provider/notification-sms-provider.component.html
+2 -1
View File
@@ -1,4 +1,5 @@
<h2>{{ 'SETTING.SMS.TITLE' | translate }}</h2>
<h2>{{ 'DESCRIPTIONS.SETTINGS.SMS_PROVIDER.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.SMS_PROVIDER.DESCRIPTION' | translate }}</p>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="smsProvidersLoading" color="primary"></mat-spinner>
console/src/app/modules/policies/notification-smtp-provider/notification-smtp-provider.component.html
+2 -1
View File
@@ -1,4 +1,5 @@
<h2>{{ 'SETTING.SMTP.TITLE' | translate }}</h2>
<h2>{{ 'DESCRIPTIONS.SETTINGS.SMTP_PROVIDER.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.SMTP_PROVIDER.DESCRIPTION' | translate }}</p>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="smtpLoading" color="primary"></mat-spinner>
console/src/app/modules/policies/oidc-configuration/oidc-configuration.component.html
+39 -33
View File
@@ -1,42 +1,48 @@
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<h2>{{ 'SETTING.OIDC.TITLE' | translate }}</h2>
<form (ngSubmit)="savePolicy()" [formGroup]="form" autocomplete="off">
<cnsl-form-field class="oidc-form-field" label="Sender Address" required="true">
<cnsl-label
>{{ 'SETTING.OIDC.ACCESSTOKENLIFETIME' | translate }}&nbsp;<strong
>({{ 'SETTING.OIDC.INHOURS' | translate }})</strong
></cnsl-label
>
<input cnslInput type="number" name="accessTokenLifetime" formControlName="accessTokenLifetime" />
</cnsl-form-field>
<h2>{{ 'DESCRIPTIONS.SETTINGS.OIDC.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.OIDC.DESCRIPTION' | translate }}</p>
<form (ngSubmit)="savePolicy()" [formGroup]="form" autocomplete="off" class="lifetime-form">
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.OIDC.ACCESS_TOKEN.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.OIDC.ACCESS_TOKEN.DESCRIPTION' | translate"
>
<cnsl-form-field class="oidc-form-field" label="Sender Address" required="true">
<cnsl-label>{{ 'DESCRIPTIONS.SETTINGS.OIDC.LABEL_HOURS' | translate }}</cnsl-label>
<input cnslInput type="number" name="accessTokenLifetime" formControlName="accessTokenLifetime" />
</cnsl-form-field>
</cnsl-card>
<cnsl-form-field class="oidc-form-field" label="Sender Name" required="true">
<cnsl-label
>{{ 'SETTING.OIDC.IDTOKENLIFETIME' | translate }}&nbsp;<strong
>({{ 'SETTING.OIDC.INHOURS' | translate }})</strong
></cnsl-label
>
<input cnslInput type="number" name="idTokenLifetime" formControlName="idTokenLifetime" />
</cnsl-form-field>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.OIDC.ID_TOKEN.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.OIDC.ID_TOKEN.DESCRIPTION' | translate"
>
<cnsl-form-field class="oidc-form-field" label="Sender Name" required="true">
<cnsl-label>{{ 'DESCRIPTIONS.SETTINGS.OIDC.LABEL_HOURS' | translate }}</cnsl-label>
<input cnslInput type="number" name="idTokenLifetime" formControlName="idTokenLifetime" />
</cnsl-form-field>
</cnsl-card>
<cnsl-form-field class="oidc-form-field" label="Sender Address" required="true">
<cnsl-label
>{{ 'SETTING.OIDC.REFRESHTOKENEXPIRATION' | translate }}&nbsp;<strong
>({{ 'SETTING.OIDC.INDAYS' | translate }})</strong
></cnsl-label
>
<input cnslInput type="number" name="refreshTokenExpiration" formControlName="refreshTokenExpiration" />
</cnsl-form-field>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.OIDC.REFRESH_TOKEN.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.OIDC.REFRESH_TOKEN.DESCRIPTION' | translate"
>
<cnsl-form-field class="oidc-form-field" label="Sender Address" required="true">
<cnsl-label>{{ 'DESCRIPTIONS.SETTINGS.OIDC.LABEL_DAYS' | translate }}</cnsl-label>
<input cnslInput type="number" name="refreshTokenExpiration" formControlName="refreshTokenExpiration" />
</cnsl-form-field>
</cnsl-card>
<cnsl-form-field class="oidc-form-field" label="Sender Name" required="true">
<cnsl-label
>{{ 'SETTING.OIDC.REFRESHTOKENIDLEEXPIRATION' | translate }}&nbsp;
<strong>({{ 'SETTING.OIDC.INDAYS' | translate }})</strong></cnsl-label
>
<input cnslInput type="number" name="refreshTokenIdleExpiration" formControlName="refreshTokenIdleExpiration" />
</cnsl-form-field>
<cnsl-card
[title]="'DESCRIPTIONS.SETTINGS.OIDC.REFRESH_TOKEN_IDLE.TITLE' | translate"
[description]="'DESCRIPTIONS.SETTINGS.OIDC.REFRESH_TOKEN_IDLE.DESCRIPTION' | translate"
>
<cnsl-form-field class="oidc-form-field" label="Sender Name" required="true">
<cnsl-label>{{ 'DESCRIPTIONS.SETTINGS.OIDC.LABEL_DAYS' | translate }}</cnsl-label>
<input cnslInput type="number" name="refreshTokenIdleExpiration" formControlName="refreshTokenIdleExpiration" />
</cnsl-form-field>
</cnsl-card>
</form>
<div class="oidc-btn-container">
<button
console/src/app/modules/policies/oidc-configuration/oidc-configuration.component.scss
+10
View File
@@ -16,3 +16,13 @@
display: block;
}
}
.lifetime-form {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
@media only screen and (max-width: 500px) {
grid-template-columns: 1fr;
}
}
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.html
+2 -2
View File
@@ -2,8 +2,8 @@
title="{{ 'POLICY.PWD_COMPLEXITY.TITLE' | translate }}"
description="{{ 'POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate }}"
> -->
<h2>{{ 'POLICY.PWD_COMPLEXITY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate }}</p>
<h2>{{ 'DESCRIPTIONS.SETTINGS.PW_COMPLEXITY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.PW_COMPLEXITY.DESCRIPTION' | translate }}</p>
<div *ngIf="loading" class="spinner-wr">
<mat-spinner diameter="30" color="primary"></mat-spinner>
console/src/app/modules/policies/privacy-policy/privacy-policy.component.html
+2 -2
View File
@@ -1,5 +1,5 @@
<h2>{{ 'POLICY.PRIVACY_POLICY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'POLICY.PRIVACY_POLICY.DESCRIPTION' | translate }}</p>
<h2>{{ 'DESCRIPTIONS.SETTINGS.PRIVACY_POLICY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.PRIVACY_POLICY.DESCRIPTION' | translate }}</p>
<ng-container *ngIf="serviceType === PolicyComponentServiceType.MGMT && !isDefault">
<ng-template cnslHasRole [hasRole]="['policy.delete']">
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html
+2 -1
View File
@@ -1,4 +1,5 @@
<h2>{{ 'POLICY.PRIVATELABELING.TITLE' | translate }}</h2>
<h2>{{ 'DESCRIPTIONS.SETTINGS.BRANDING.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.BRANDING.DESCRIPTION' | translate }}</p>
<div class="privatelabeling-policy">
<cnsl-info-section *ngIf="isDefault"> {{ 'POLICY.DEFAULTLABEL' | translate }}</cnsl-info-section>
console/src/app/modules/policies/secret-generator/secret-generator.component.html
+2 -1
View File
@@ -1,7 +1,8 @@
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
</div>
<h2>{{ 'SETTING.SECRETS.TITLE' | translate }}</h2>
<h2>{{ 'DESCRIPTIONS.SETTINGS.SECRET_GENERATORS.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.SECRET_GENERATORS.DESCRIPTION' | translate }}</p>
<div class="generators">
<cnsl-card class="generator" [nomargin]="true" *ngFor="let gen of AVAILABLEGENERATORS">
console/src/app/modules/policies/security-policy/security-policy.component.html
+2 -1
View File
@@ -1,4 +1,5 @@
<h2>{{ 'SETTINGS.LIST.SECURITY' | translate }}</h2>
<h2>{{ 'DESCRIPTIONS.SETTINGS.SECURITY.TITLE' | translate }}</h2>
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.SECURITY.DESCRIPTION' | translate }}</p>
<div class="spinner-wr">
<mat-spinner diameter="30" *ngIf="loading" color="primary"></mat-spinner>
console/src/app/modules/settings-grid/settings-grid.component.html
+9 -4
View File
@@ -1,7 +1,12 @@
<h2>{{ 'POLICY.TITLE' | translate }}</h2>
<p class="top-desc cnsl-secondary-text">{{ 'POLICY.DESCRIPTION' | translate }}</p>
<div class="org-title-row">
<h2>{{ 'DESCRIPTIONS.ORG.TITLE' | translate }}</h2>
<a mat-icon-button href="https://zitadel.com/docs/concepts/structure/organizations" rel="noreferrer" target="_blank">
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="top-desc cnsl-secondary-text">
{{ 'DESCRIPTIONS.ORG.DESCRIPTION' | translate }}
</p>
<div class="row-lyt" [ngClass]="{ more: type === PolicyComponentServiceType.ADMIN }">
<ng-container *ngFor="let setting of SETTINGS">
<ng-template
console/src/app/modules/settings-grid/settings-grid.component.scss
+19 -5
View File
@@ -1,8 +1,22 @@
h2 {
font-size: 1.2rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-top: 2rem;
.org-title-row {
display: flex;
align-items: center;
margin-top: 1rem;
h2 {
font-size: 1.2rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
a {
.icon {
font-size: 1.2rem;
height: 1.2rem;
width: 1.2rem;
}
}
}
.top-desc {
console/src/app/modules/top-view/top-view.component.scss
+2 -1
View File
@@ -82,7 +82,8 @@
.cnsl-type {
font-size: 14px;
line-height: 40px;
margin-top: 2rem;
margin-bottom: 1rem;
}
.cnsl-sub {
console/src/app/pages/actions/actions.component.html
+13 -5
View File
@@ -1,24 +1,32 @@
<div class="max-width-container">
<div class="enlarged-container actions-enlarged-container">
<h1>{{ 'FLOWS.TITLE' | translate }}</h1>
<p class="desc cnsl-secondary-text">{{ 'FLOWS.DESCRIPTION' | translate }}</p>
<div class="actions-title-row">
<h1>{{ 'DESCRIPTIONS.ACTIONS.TITLE' | translate }}</h1>
<a mat-icon-button href="https://zitadel.com/docs/concepts/features/actions" rel="noreferrer" target="_blank">
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="desc cnsl-secondary-text">{{ 'DESCRIPTIONS.ACTIONS.DESCRIPTION' | translate }}</p>
<cnsl-info-section class="max-actions" *ngIf="maxActions"
>{{ 'FLOWS.ACTIONSMAX' | translate: { value: maxActions } }}
</cnsl-info-section>
<ng-template cnslHasRole [hasRole]="['org.action.read']">
<cnsl-card title="{{ 'FLOWS.ACTIONSTITLE' | translate }}" description="{{ 'FLOWS.ACTIONSDESCRIPTION' | translate }}">
<cnsl-card
title="{{ 'DESCRIPTIONS.ACTIONS.SCRIPTS.TITLE' | translate }}"
description="{{ 'DESCRIPTIONS.ACTIONS.SCRIPTS.DESCRIPTION' | translate }}"
>
<cnsl-action-table (changedSelection)="selection = $event"></cnsl-action-table>
</cnsl-card>
</ng-template>
<div class="title-section">
<h2>{{ 'FLOWS.FLOWSTITLE' | translate }}</h2>
<h2>{{ 'DESCRIPTIONS.ACTIONS.FLOWS.TITLE' | translate }}</h2>
<i class="las la-exchange-alt"></i>
</div>
<p class="desc cnsl-secondary-text">{{ 'FLOWS.FLOWSDESCRIPTION' | translate }}</p>
<p class="desc cnsl-secondary-text">{{ 'DESCRIPTIONS.ACTIONS.FLOWS.DESCRIPTION' | translate }}</p>
<ng-template cnslHasRole [hasRole]="['org.flow.read']">
<div class="actions-flow">
console/src/app/pages/actions/actions.component.scss
+17
View File
@@ -1,3 +1,20 @@
.actions-title-row {
display: flex;
align-items: center;
h1 {
margin: 0;
}
a {
.icon {
font-size: 1.2rem;
height: 1.2rem;
width: 1.2rem;
}
}
}
@mixin actions-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
console/src/app/pages/grants/grants.component.html
+7 -2
View File
@@ -1,7 +1,12 @@
<div class="max-width-container">
<div class="enlarged-container">
<h1>{{ 'GRANTS.TITLE' | translate }}</h1>
<p class="grants-desc cnsl-secondary-text">{{ 'GRANTS.DESC' | translate }}</p>
<div class="grants-title-row">
<h1>{{ 'DESCRIPTIONS.AUTHORIZATIONS.TITLE' | translate }}</h1>
<a mat-icon-button href="https://zitadel.com/docs/concepts/structure/managers" rel="noreferrer" target="_blank">
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="sub cnsl-secondary-text max-width-description">{{ 'DESCRIPTIONS.AUTHORIZATIONS.DESCRIPTION' | translate }}</p>
<cnsl-user-grants
*ngIf="grantContext === UserGrantContext.NONE"
[displayedColumns]="[
console/src/app/pages/grants/grants.component.scss
+67 -4
View File
@@ -1,8 +1,71 @@
h1 {
margin: 0;
.grants-title-row {
display: flex;
align-items: center;
h1 {
margin: 0;
}
a {
.icon {
font-size: 1.2rem;
height: 1.2rem;
width: 1.2rem;
}
}
}
.grants-desc {
margin-bottom: 1rem;
.sub {
margin-bottom: 1.5rem;
font-size: 14px;
}
@mixin grants-theme($theme) {
$foreground: map-get($theme, foreground);
.grants-title-row a {
color: map-get($foreground, text);
}
.grants-controls {
display: flex;
align-items: center;
padding-bottom: 1rem;
border-bottom: 1px solid map-get($foreground, dividers);
.grants-toggle-group {
display: flex;
.toggle-row {
display: flex;
align-items: center;
i {
margin-right: 0.5rem;
}
.info-i {
font-size: 1.2rem;
margin-left: 0.5rem;
margin-right: 0;
}
.current-dot {
height: 8px;
width: 8px;
border-radius: 50%;
background-color: rgb(84, 142, 230);
margin-left: 0.5rem;
}
}
}
.fill-space {
flex: 1;
}
.grid-btn {
margin-right: 0.5rem;
}
}
}
console/src/app/pages/grants/grants.module.ts
+12 -1
View File
@@ -7,9 +7,20 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
import { GrantsRoutingModule } from './grants-routing.module';
import { GrantsComponent } from './grants.component';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [GrantsComponent],
imports: [CommonModule, GrantsRoutingModule, UserGrantsModule, TranslateModule, HasRoleModule, HasRolePipeModule],
imports: [
CommonModule,
GrantsRoutingModule,
UserGrantsModule,
TranslateModule,
HasRoleModule,
HasRolePipeModule,
MatButtonModule,
MatIconModule,
],
})
export default class GrantsModule {}
console/src/app/pages/home/home.component.html
+36 -24
View File
@@ -17,27 +17,6 @@
<h2 class="desc">{{ 'ONBOARDING.MOREDESCRIPTION' | translate }}</h2>
<div class="home-grid-container">
<a href="https://zitadel.com/docs" target="_blank" rel="noreferrer" class="grid-item">
<div
class="icon-wrapper"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? bluedark + 50 : bluelight + 50
}"
>
<div
class="inner"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? bluedark : bluelight,
color: (themeService.isDarkTheme | async) ? bluelight : bluedark
}"
>
<i class="las la-file-alt"></i>
</div>
</div>
<span>{{ 'HOME.DOCUMENTATION.TITLE' | translate }}</span>
</a>
<a href="https://zitadel.com/docs/guides/start/quickstart" target="_blank" rel="noreferrer" class="grid-item">
<div
class="icon-wrapper"
@@ -55,9 +34,37 @@
<i class="las la-play"></i>
</div>
</div>
<span>{{ 'HOME.GETSTARTED.TITLE' | translate }}</span>
<div class="text-block">
<span>{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.GET_STARTED.TITLE' | translate }}</span>
<div class="more-shortcuts-description">
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.GET_STARTED.DESCRIPTION' | translate }}</p>
</div>
</div>
</a>
<a href="https://zitadel.com/docs" target="_blank" rel="noreferrer" class="grid-item">
<div
class="icon-wrapper"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? bluedark + 50 : bluelight + 50
}"
>
<div
class="inner"
[ngStyle]="{
background: (themeService.isDarkTheme | async) ? bluedark : bluelight,
color: (themeService.isDarkTheme | async) ? bluelight : bluedark
}"
>
<i class="las la-file-alt"></i>
</div>
</div>
<div class="text-block">
<span>{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.DOCS.TITLE' | translate }}</span>
<div class="more-shortcuts-description">
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.DOCS.DESCRIPTION' | translate }}</p>
</div>
</div>
</a>
<a href="https://zitadel.com/docs/sdk-examples/introduction" target="_blank" rel="noreferrer" class="grid-item">
<div
class="icon-wrapper"
@@ -75,7 +82,12 @@
<i class="las la-play"></i>
</div>
</div>
<span>{{ 'HOME.QUICKSTARTS.TITLE' | translate }}</span>
<div class="text-block">
<span>{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.EXAMPLES.TITLE' | translate }}</span>
<div class="more-shortcuts-description">
<p class="cnsl-secondary-text">{{ 'DESCRIPTIONS.HOME.MORE_SHORTCUTS.EXAMPLES.DESCRIPTION' | translate }}</p>
</div>
</div>
</a>
</div>
</div>
console/src/app/pages/home/home.component.scss
+2 -1
View File
@@ -63,7 +63,7 @@
padding: 1rem;
display: flex;
flex-direction: row;
align-items: center;
align-items: flex-start;
box-sizing: border-box;
font-size: 14px;
background-color: $card-background-color;
@@ -128,6 +128,7 @@
border-radius: 50vw;
flex-shrink: 0;
margin-right: 1rem;
align-self: center;
.inner {
border-radius: 50vw;
console/src/app/pages/instance/instance.component.html
+2 -2
View File
@@ -1,7 +1,7 @@
<cnsl-top-view
[hasBackButton]="false"
title="{{ 'IAM.TITLE' | translate }}"
sub="{{ 'IAM.DESCRIPTION' | translate }}"
title="{{ 'DESCRIPTIONS.SETTINGS.INSTANCE.TITLE' | translate }}"
sub="{{ 'DESCRIPTIONS.SETTINGS.INSTANCE.DESCRIPTION' | translate }}"
[isActive]="instance?.state === State.STATE_RUNNING"
[isInactive]="instance?.state === State.STATE_STOPPED || instance?.state === State.STATE_STOPPING"
[hasContributors]="true"
console/src/app/pages/org-settings/org-settings.component.html
+2 -2
View File
@@ -2,9 +2,9 @@
<div class="settings-top-view">
<div>
<div class="settings-title-row">
<h1>{{ 'SETTINGS.ORG.TITLE' | translate }}</h1>
<h1>{{ 'DESCRIPTIONS.SETTINGS.ORG.TITLE' | translate }}</h1>
</div>
<p class="desc cnsl-secondary-text">{{ 'SETTINGS.ORG.DESCRIPTION' | translate }}</p>
<p class="desc cnsl-secondary-text">{{ 'DESCRIPTIONS.SETTINGS.ORG.DESCRIPTION' | translate }}</p>
</div>
<span class="fill-space"></span>
</div>
console/src/app/pages/orgs/org-detail/org-detail.component.html
+1
View File
@@ -56,6 +56,7 @@
</ng-container>
<cnsl-metadata
[description]="'DESCRIPTIONS.ORG.METADATA' | translate"
[metadata]="metadata"
[disabled]="(['org.write'] | hasRole | async) === false"
(editClicked)="editMetadata()"
console/src/app/pages/projects/projects.component.html
+16 -8
View File
@@ -1,36 +1,44 @@
<div class="max-width-container">
<div class="enlarged-container">
<div class="project-title-row">
<h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
<a mat-icon-button href="https://zitadel.com/docs/guides/manage/console/projects" rel="noreferrer" target="_blank">
<h1>{{ 'DESCRIPTIONS.PROJECTS.TITLE' | translate }}</h1>
<a mat-icon-button href="https://zitadel.com/docs/concepts/structure/projects" rel="noreferrer" target="_blank">
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="sub cnsl-secondary-text max-width-description">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
<p
class="sub cnsl-secondary-text max-width-description"
[innerHTML]="'DESCRIPTIONS.PROJECTS.DESCRIPTION' | translate"
></p>
<div class="projects-controls">
<div class="project-toggle-group">
<cnsl-nav-toggle
label="{{ 'PROJECT.PAGES.TYPE.OWNED' | translate }}"
label="{{ 'DESCRIPTIONS.PROJECTS.OWNED.TITLE' | translate }}"
[count]="mgmtService.ownedProjectsCount | async"
(clicked)="setType(ProjectType.PROJECTTYPE_OWNED)"
[active]="(projectType$ | async) === ProjectType.PROJECTTYPE_OWNED"
></cnsl-nav-toggle>
<cnsl-nav-toggle
label="{{ 'PROJECT.PAGES.TYPE.GRANTED' | translate }}"
label="{{ 'DESCRIPTIONS.PROJECTS.GRANTED.TITLE' | translate }}"
[count]="mgmtService.grantedProjectsCount | async"
(clicked)="setType(ProjectType.PROJECTTYPE_GRANTED)"
[active]="(projectType$ | async) === ProjectType.PROJECTTYPE_GRANTED"
></cnsl-nav-toggle>
</div>
<span class="fill-space"></span>
<button class="grid-btn" (click)="grid = !grid" mat-icon-button data-e2e="toggle-grid">
<i *ngIf="grid" class="show list view las la-th-list"></i>
<i *ngIf="!grid" class="las la-border-all"></i>
</button>
</div>
<p class="sub cnsl-secondary-text max-width-description">
{{
((projectType$ | async) === ProjectType.PROJECTTYPE_OWNED
? 'DESCRIPTIONS.PROJECTS.OWNED.DESCRIPTION'
: 'DESCRIPTIONS.PROJECTS.GRANTED.DESCRIPTION'
) | translate
}}
</p>
<cnsl-project-grid
*ngIf="grid"
[projectType$]="projectType$"
console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html
+1
View File
@@ -157,6 +157,7 @@
<ng-container *ngIf="currentSetting === 'metadata'">
<cnsl-metadata
[metadata]="metadata"
[description]="'DESCRIPTIONS.USERS.SELF.METADATA' | translate"
[disabled]="(['user.write:' + user.id, 'user.write'] | hasRole | async) === false"
*ngIf="user && user.id"
(editClicked)="editMetadata()"
console/src/app/pages/users/user-detail/user-detail/user-detail.component.html
+3
View File
@@ -243,6 +243,9 @@
<ng-container *ngIf="currentSetting && currentSetting === 'metadata'">
<cnsl-metadata
[metadata]="metadata"
[description]="
(user.machine ? 'DESCRIPTIONS.USERS.MACHINES.METADATA' : 'DESCRIPTIONS.USERS.HUMANS.METADATA') | translate
"
[disabled]="(['user.write:' + user.id, 'user.write'] | hasRole | async) === false"
*ngIf="user && user.id"
(editClicked)="editMetadata()"
console/src/app/pages/users/user-list/user-list.component.html
+7 -12
View File
@@ -1,14 +1,13 @@
<div class="max-width-container">
<div class="enlarged-container" [ngSwitch]="type">
<div class="users-title-row">
<h1>{{ 'DESCRIPTIONS.USERS.TITLE' | translate }}</h1>
<a mat-icon-button href="https://zitadel.com/docs/concepts/structure/users" rel="noreferrer" target="_blank">
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="user-list-sub cnsl-secondary-text">{{ 'DESCRIPTIONS.USERS.DESCRIPTION' | translate }}</p>
<ng-container *ngSwitchCase="Type.TYPE_HUMAN">
<div class="users-title-row">
<h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
<a mat-icon-button href="https://zitadel.com/docs/concepts/structure/users" rel="noreferrer" target="_blank">
<mat-icon class="icon">info_outline</mat-icon>
</a>
</div>
<p class="user-list-sub cnsl-secondary-text">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>
<cnsl-user-table
[type]="Type.TYPE_HUMAN"
[canWrite$]="['user.write$'] | hasRole"
@@ -16,11 +15,7 @@
>
</cnsl-user-table>
</ng-container>
<ng-container *ngSwitchCase="Type.TYPE_MACHINE">
<h1>{{ 'USER.PAGES.LISTMACHINE' | translate }}</h1>
<p class="user-list-sub cnsl-secondary-text">{{ 'USER.PAGES.DESCRIPTIONMACHINE' | translate }}</p>
<cnsl-user-table
[type]="Type.TYPE_MACHINE"
[canWrite$]="['user.write$'] | hasRole"
console/src/app/pages/users/user-list/user-table/user-table.component.html
+8 -3
View File
@@ -10,19 +10,24 @@
>
<div leftActions class="user-toggle-group">
<cnsl-nav-toggle
label="{{ 'USER.TABLE.TYPES.HUMAN' | translate }}"
label="{{ 'DESCRIPTIONS.USERS.HUMANS.TITLE' | translate }}"
(clicked)="setType(Type.TYPE_HUMAN)"
[active]="type === Type.TYPE_HUMAN"
data-e2e="list-humans"
></cnsl-nav-toggle>
<cnsl-nav-toggle
label="{{ 'USER.TABLE.TYPES.MACHINE' | translate }}"
label="{{ 'DESCRIPTIONS.USERS.MACHINES.TITLE' | translate }}"
(clicked)="setType(Type.TYPE_MACHINE)"
[active]="type === Type.TYPE_MACHINE"
data-e2e="list-machines"
></cnsl-nav-toggle>
</div>
<p class="user-sub cnsl-secondary-text">
{{
(type === Type.TYPE_HUMAN ? 'DESCRIPTIONS.USERS.HUMANS.DESCRIPTION' : 'DESCRIPTIONS.USERS.MACHINES.DESCRIPTION')
| translate
}}
</p>
<ng-template cnslHasRole [hasRole]="['user.write']" actions>
<button
(click)="deactivateSelectedUsers()"
console/src/app/pages/users/user-list/user-table/user-table.component.scss
+5
View File
@@ -9,6 +9,11 @@
}
}
.user-sub {
margin-bottom: 1.5rem;
font-size: 14px;
}
.user-tr-actions {
width: 42px;
}