mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-30 11:02:16 +00:00
fix(console): table pagination, diverse optimizations, lint workspace (#1563)
* show app redirect issues, action layout * refactor pagination * tos, privacy * new paginator everywhere * layout width and table optim * lint pt1 * lint config, ts * stylelint * chore(deps-dev): bump @angular/cli from 11.2.7 to 11.2.8 in /console (#1566) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps-dev): bump @angular/cli from 11.2.7 to 11.2.8 in /console Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.2.7 to 11.2.8. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v11.2.7...v11.2.8) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump jasmine-spec-reporter from 6.0.0 to 7.0.0 in /console (#1573) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps-dev): bump jasmine-spec-reporter in /console Bumps [jasmine-spec-reporter](https://github.com/bcaudan/jasmine-spec-reporter) from 6.0.0 to 7.0.0. - [Release notes](https://github.com/bcaudan/jasmine-spec-reporter/releases) - [Changelog](https://github.com/bcaudan/jasmine-spec-reporter/blob/master/CHANGELOG.md) - [Commits](https://github.com/bcaudan/jasmine-spec-reporter/compare/v6.0.0...v7.0.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular-devkit/build-angular from 0.1102.7 to 0.1102.8 in /console (#1574) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps-dev): bump @angular-devkit/build-angular in /console Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1102.7 to 0.1102.8. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps): bump @types/file-saver from 2.0.1 to 2.0.2 in /console (#1576) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps): bump @types/file-saver from 2.0.1 to 2.0.2 in /console Bumps [@types/file-saver](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/file-saver) from 2.0.1 to 2.0.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/file-saver) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/language-service from 11.2.8 to 11.2.9 in /console (#1567) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps-dev): bump @angular/language-service in /console Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.2.8 to 11.2.9. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/11.2.9/packages/language-service) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * update protobuf, libphone * chore(deps): bump rxjs from 6.6.3 to 6.6.7 in /console (#1488) Bumps [rxjs](https://github.com/reactivex/rxjs) from 6.6.3 to 6.6.7. - [Release notes](https://github.com/reactivex/rxjs/releases) - [Changelog](https://github.com/ReactiveX/rxjs/blob/6.6.7/CHANGELOG.md) - [Commits](https://github.com/reactivex/rxjs/compare/6.6.3...6.6.7) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/jasmine from 3.6.3 to 3.6.9 in /console (#1485) Bumps [@types/jasmine](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jasmine) from 3.6.3 to 3.6.9. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jasmine) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps-dev): bump jasmine-core from 3.6.0 to 3.7.1 in /console (#1445) Bumps [jasmine-core](https://github.com/jasmine/jasmine) from 3.6.0 to 3.7.1. - [Release notes](https://github.com/jasmine/jasmine/releases) - [Changelog](https://github.com/jasmine/jasmine/blob/main/RELEASE.md) - [Commits](https://github.com/jasmine/jasmine/compare/v3.6.0...v3.7.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Livio Amstutz <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Livio Amstutz
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Livio Amstutz
parent
b0681a0bbe
commit
56b527060b
@@ -4,8 +4,8 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||
import { KeyType } from 'src/app/proto/generated/zitadel/auth_n_key_pb';
|
||||
|
||||
export enum AddKeyDialogType {
|
||||
MACHINE = "MACHINE",
|
||||
AUTHNKEY = "AUTHNKEY",
|
||||
MACHINE = 'MACHINE',
|
||||
AUTHNKEY = 'AUTHNKEY',
|
||||
}
|
||||
|
||||
@Component({
|
||||
|
||||
@@ -100,8 +100,7 @@ export class MemberCreateDialogComponent {
|
||||
if (project.projectId && project.grantId) {
|
||||
this.projectId = project.projectId;
|
||||
this.grantId = project.grantId;
|
||||
}
|
||||
else if (project.id) {
|
||||
} else if (project.id) {
|
||||
this.projectId = project.id;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,46 +10,46 @@
|
||||
/* stylelint-enable */
|
||||
|
||||
.cnsl-app-card {
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
animation: all .2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin: 1rem;
|
||||
text-transform: uppercase;
|
||||
border-radius: .5rem;
|
||||
font-weight: 800;
|
||||
background-color: $primary-dark;
|
||||
transition: background-color box-shadow .3s ease-in;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
animation: all .2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
margin: 1rem;
|
||||
text-transform: uppercase;
|
||||
border-radius: .5rem;
|
||||
font-weight: 800;
|
||||
background-color: $primary-dark;
|
||||
transition: background-color box-shadow .3s ease-in;
|
||||
|
||||
&.web {
|
||||
background-color: rgb(80, 110, 110);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.native {
|
||||
background-color: #595d80;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.useragent {
|
||||
background-color: #6a506e;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.api {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
&.web {
|
||||
background-color: rgb(80, 110, 110);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.native {
|
||||
background-color: #595d80;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.useragent {
|
||||
background-color: #6a506e;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.api {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+76
-76
@@ -2,14 +2,14 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
.radio-button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin: 0;
|
||||
padding-bottom: .5rem;
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin: 0;
|
||||
padding-bottom: .5rem;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
@mixin app-auth-method-radio-theme($theme) {
|
||||
@@ -17,7 +17,7 @@
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
input[type="radio"]{
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
@@ -27,7 +27,7 @@
|
||||
border-color: if($is-dark-theme, white, var(--grey));
|
||||
|
||||
.cnsl-radio-header span {
|
||||
color: if($is-dark-theme, white, white);
|
||||
color: if($is-dark-theme, white, white);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,98 +43,98 @@
|
||||
padding-bottom: 1rem;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
|
||||
|
||||
&.first {
|
||||
margin-left: 0;
|
||||
&.first {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.last {
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.recommended {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateY(50%) translateX(-50%);
|
||||
border-radius: 50vw;
|
||||
font-size: 11px;
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 3px 1rem;
|
||||
box-shadow: 0 0 6px rgb(0 0 0 / 10%);
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateY(50%) translateX(-50%);
|
||||
border-radius: 50vw;
|
||||
font-size: 11px;
|
||||
background: white;
|
||||
color: black;
|
||||
padding: 3px 1rem;
|
||||
box-shadow: 0 0 6px rgb(0 0 0 / 10%);
|
||||
white-space: nowrap;
|
||||
|
||||
&.not {
|
||||
background: rgb(144 75 75);
|
||||
color: white;
|
||||
}
|
||||
&.not {
|
||||
background: rgb(144 75 75);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.cnsl-radio-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: rgb(80, 110, 110);
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: rgb(80, 110, 110);
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
position: relative;
|
||||
|
||||
.current {
|
||||
position: absolute;
|
||||
bottom: .5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: block;
|
||||
color: #ffffff60;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
.current {
|
||||
position: absolute;
|
||||
bottom: .5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: block;
|
||||
color: #ffffff60;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 2rem;
|
||||
font-size: 30px;
|
||||
color: if($is-dark-theme,#21222450, #ffffff50);
|
||||
}
|
||||
span {
|
||||
margin: 2rem;
|
||||
font-size: 30px;
|
||||
color: if($is-dark-theme, #21222450, #ffffff50);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
.type-desc {
|
||||
font-size: 14px;
|
||||
color: var(--grey);
|
||||
font-size: 14px;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-specs {
|
||||
display: block;
|
||||
padding: 1rem 0;
|
||||
margin: 0 1rem;
|
||||
display: block;
|
||||
padding: 1rem 0;
|
||||
margin: 0 1rem;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: var(--grey);
|
||||
margin: 3px 0;
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: var(--grey);
|
||||
margin: 3px 0;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
margin-right: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:first-child {
|
||||
margin-right: 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+2
-2
@@ -10,7 +10,7 @@ export interface RadioItemAuthType {
|
||||
key: string;
|
||||
titleI18nKey: string;
|
||||
descI18nKey: string;
|
||||
disabled: boolean,
|
||||
disabled: boolean;
|
||||
prefix: string;
|
||||
background: string;
|
||||
responseType?: OIDCResponseType;
|
||||
@@ -36,4 +36,4 @@ export class AppAuthMethodRadioComponent {
|
||||
public emitChange(): void {
|
||||
this.selectedMethod.emit(this.selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,18 +2,18 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
.radio-button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -.5rem;
|
||||
}
|
||||
|
||||
|
||||
@mixin app-type-radio-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-color: mat-color($primary, 500);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
input[type="radio"]{
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
@@ -23,7 +23,7 @@
|
||||
border-color: if($is-dark-theme, white, var(--grey));
|
||||
|
||||
.cnsl-type-radio-header span {
|
||||
color: if($is-dark-theme, white, white);
|
||||
color: if($is-dark-theme, white, white);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,29 +40,29 @@
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
|
||||
|
||||
.cnsl-type-radio-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgb(80, 110, 110);
|
||||
margin-bottom: 1rem;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgb(80, 110, 110);
|
||||
margin-bottom: 1rem;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
|
||||
span {
|
||||
margin: 2rem;
|
||||
font-size: 30px;
|
||||
color: if($is-dark-theme,#21222450, #ffffff50);
|
||||
}
|
||||
span {
|
||||
margin: 2rem;
|
||||
font-size: 30px;
|
||||
color: if($is-dark-theme, #21222450, #ffffff50);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
.type-desc {
|
||||
font-size: 14px;
|
||||
color: var(--grey);
|
||||
font-size: 14px;
|
||||
color: var(--grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,4 +14,4 @@ export class AppTypeRadioComponent {
|
||||
public emitChange(): void {
|
||||
this.selectedType.emit(this.selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,123 +21,120 @@
|
||||
}
|
||||
|
||||
@mixin changes-theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.scroll-container {
|
||||
max-height: 50vh;
|
||||
overflow-y: scroll;
|
||||
border-bottom: 1px solid if($is-dark-theme, #303131, #e3e8ee);
|
||||
/* stylelint-enable */
|
||||
margin-bottom: 0.5rem;
|
||||
.scroll-container {
|
||||
max-height: 50vh;
|
||||
overflow-y: scroll;
|
||||
border-bottom: 1px solid if($is-dark-theme, #303131, #e3e8ee);
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.date {
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
font-size: 0.8rem;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.spacer {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -0.5rem;
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
display: inline-block;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.msg {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.restore {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
margin-left: 1rem;
|
||||
transform: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.restore {
|
||||
visibility: visible;
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
color: #81868a;
|
||||
|
||||
&[disabled] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A800);
|
||||
/* stylelint-enable */
|
||||
|
||||
&.change-item-back {
|
||||
background-color: rgba($primary-dark, .93);
|
||||
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.sp-wrapper {
|
||||
padding: .5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.end-container {
|
||||
font-size: 12px;
|
||||
color: var(--grey);
|
||||
font-size: 14px;
|
||||
margin: 1rem 0 1rem 0;
|
||||
display: block;
|
||||
color: var(--grey);
|
||||
}
|
||||
.date {
|
||||
font-weight: 500;
|
||||
font-size: .8rem;
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
font-size: .8rem;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.spacer {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -.5rem;
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.icon {
|
||||
width: 32px;
|
||||
display: inline-block;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
font-size: .8rem;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.msg {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.restore {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
margin-left: 1rem;
|
||||
transform: opacity .2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.restore {
|
||||
visibility: visible;
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
color: #81868a;
|
||||
|
||||
&[disabled] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable */
|
||||
$primary: map-get($theme, primary);
|
||||
$primary-dark: mat-color($primary, A800);
|
||||
/* stylelint-enable */
|
||||
|
||||
&.change-item-back {
|
||||
background-color: rgba($primary-dark, .93);
|
||||
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.sp-wrapper {
|
||||
padding: .5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.end-container {
|
||||
font-size: 14px;
|
||||
margin: 1rem 0 1rem 0;
|
||||
display: block;
|
||||
color: var(--grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ export enum ChangeType {
|
||||
}
|
||||
|
||||
export interface MappedChange {
|
||||
key: string,
|
||||
key: string;
|
||||
values: Array<{
|
||||
data: any[];
|
||||
dates: Timestamp.AsObject[];
|
||||
@@ -34,7 +34,11 @@ export interface MappedChange {
|
||||
}>;
|
||||
}
|
||||
|
||||
type ListChanges = ListMyUserChangesResponse.AsObject | ListUserChangesResponse.AsObject | ListProjectChangesResponse.AsObject | ListOrgChangesResponse.AsObject | ListAppChangesResponse.AsObject;
|
||||
type ListChanges = ListMyUserChangesResponse.AsObject |
|
||||
ListUserChangesResponse.AsObject |
|
||||
ListProjectChangesResponse.AsObject |
|
||||
ListOrgChangesResponse.AsObject |
|
||||
ListAppChangesResponse.AsObject;
|
||||
|
||||
@Component({
|
||||
selector: 'app-changes',
|
||||
@@ -171,11 +175,14 @@ export class ChangesComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
mapChanges(changes: Change.AsObject[]) {
|
||||
private mapChanges(changes: Change.AsObject[]): {
|
||||
key: string; values: any[];
|
||||
}[] {
|
||||
const splitted: { [editorId: string]: any[]; } = {};
|
||||
changes.forEach((change) => {
|
||||
if (change.changeDate) {
|
||||
const index = `${this.getDateString(change.changeDate)}`;//`${this.getDateString(change.changeDate)}:${change.editorId}`;
|
||||
const index = `${this.getDateString(change.changeDate)}`;
|
||||
// `${this.getDateString(change.changeDate)}:${change.editorId}`;
|
||||
|
||||
if (index) {
|
||||
if (splitted[index]) {
|
||||
@@ -209,7 +216,7 @@ export class ChangesComponent implements OnInit, OnDestroy {
|
||||
// data: [change.data],
|
||||
eventTypes: [change.eventType],
|
||||
sequences: [change.sequence],
|
||||
}
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -226,7 +233,7 @@ export class ChangesComponent implements OnInit, OnDestroy {
|
||||
return arr;
|
||||
}
|
||||
|
||||
getDateString(ts: Timestamp.AsObject) {
|
||||
getDateString(ts: Timestamp.AsObject): string {
|
||||
const date = new Date(ts.seconds * 1000 + ts.nanos / 1000 / 1000);
|
||||
return date.getUTCFullYear() + this.pad(date.getUTCMonth() + 1) + this.pad(date.getUTCDate());
|
||||
}
|
||||
@@ -243,10 +250,10 @@ export class ChangesComponent implements OnInit, OnDestroy {
|
||||
// Order by ascending property value
|
||||
valueAscOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
|
||||
return a.value.localeCompare(b.value);
|
||||
};
|
||||
}
|
||||
|
||||
// Order by descending property key
|
||||
keyDescOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
|
||||
return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ import { ChangesComponent } from './changes.component';
|
||||
LocalizedDatePipeModule,
|
||||
TimestampToDatePipeModule,
|
||||
MatTooltipModule,
|
||||
AvatarModule
|
||||
AvatarModule,
|
||||
],
|
||||
exports: [
|
||||
ChangesComponent,
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<mat-paginator #paginator class="paginator" [length]="keyResult?.details?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
|
||||
<cnsl-paginator #paginator class="paginator" [timestamp]="keyResult?.details?.viewTimestamp" [length]="keyResult?.details?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
|
||||
</div>
|
||||
</app-refresh-table>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
|
||||
@@ -14,6 +13,8 @@ import { ListAppKeysResponse } from 'src/app/proto/generated/zitadel/management_
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-client-keys',
|
||||
templateUrl: './client-keys.component.html',
|
||||
@@ -23,7 +24,7 @@ export class ClientKeysComponent implements OnInit {
|
||||
@Input() projectId!: string;
|
||||
@Input() appId!: string;
|
||||
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
public dataSource: MatTableDataSource<Key.AsObject> = new MatTableDataSource<Key.AsObject>();
|
||||
public selection: SelectionModel<Key.AsObject> = new SelectionModel<Key.AsObject>(true, []);
|
||||
public keyResult!: ListAppKeysResponse.AsObject;
|
||||
@@ -95,7 +96,12 @@ export class ClientKeysComponent implements OnInit {
|
||||
}
|
||||
|
||||
if (type) {
|
||||
return this.mgmtService.addAppKey(this.projectId, this.appId, type, date ? date : undefined).then((response) => {
|
||||
return this.mgmtService.addAppKey(
|
||||
this.projectId,
|
||||
this.appId,
|
||||
type,
|
||||
date ? date : undefined,
|
||||
).then((response) => {
|
||||
if (response) {
|
||||
setTimeout(() => {
|
||||
this.refreshPage();
|
||||
@@ -104,7 +110,7 @@ export class ClientKeysComponent implements OnInit {
|
||||
this.dialog.open(ShowKeyDialogComponent, {
|
||||
data: {
|
||||
key: response,
|
||||
type: AddKeyDialogType.AUTHNKEY
|
||||
type: AddKeyDialogType.AUTHNKEY,
|
||||
},
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
@@ -5,24 +5,24 @@ import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
|
||||
import { CardModule } from '../card/card.module';
|
||||
import { InputModule } from '../input/input.module';
|
||||
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
|
||||
|
||||
import { ClientKeysComponent } from './client-keys.component';
|
||||
import { ShowKeyDialogModule } from '../show-key-dialog/show-key-dialog.module';
|
||||
import { AddKeyDialogModule } from 'src/app/modules/add-key-dialog/add-key-dialog.module';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
|
||||
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
|
||||
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
|
||||
|
||||
import { CardModule } from '../card/card.module';
|
||||
import { InputModule } from '../input/input.module';
|
||||
import { PaginatorModule } from '../paginator/paginator.module';
|
||||
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
|
||||
import { ShowKeyDialogModule } from '../show-key-dialog/show-key-dialog.module';
|
||||
import { ClientKeysComponent } from './client-keys.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -37,7 +37,7 @@ import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/
|
||||
HasRoleModule,
|
||||
CardModule,
|
||||
MatTableModule,
|
||||
MatPaginatorModule,
|
||||
PaginatorModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatCheckboxModule,
|
||||
|
||||
@@ -20,7 +20,7 @@ import { FeaturesComponent } from './features.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
FeaturesComponent
|
||||
FeaturesComponent,
|
||||
],
|
||||
imports: [
|
||||
FeaturesRoutingModule,
|
||||
@@ -41,6 +41,6 @@ import { FeaturesComponent } from './features.component';
|
||||
],
|
||||
exports: [
|
||||
FeaturesComponent,
|
||||
]
|
||||
],
|
||||
})
|
||||
export class FeaturesModule { }
|
||||
|
||||
@@ -82,7 +82,7 @@ export class IdpCreateComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
public addIdp(): void {
|
||||
if (this.serviceType == PolicyComponentServiceType.MGMT) {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
const req = new AddOrgOIDCIDPRequest();
|
||||
|
||||
req.setName(this.name?.value);
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
[disabled]="serviceType==PolicyComponentServiceType.MGMT && idp?.owner == IDPOwnerType.IDP_OWNER_TYPE_SYSTEM"
|
||||
(change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
|
||||
<img src="../../../assets/images/google.png"
|
||||
*ngIf="idp.stylingType == IdpStylingType.IDPSTYLINGTYPE_GOOGLE" alt="google" />
|
||||
*ngIf="idp.stylingType == IDPSTYLINGTYPE.IDPSTYLINGTYPE_GOOGLE" alt="google" />
|
||||
</mat-checkbox>
|
||||
</td>
|
||||
</ng-container>
|
||||
@@ -100,6 +100,6 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator #paginator class="paginator" [length]="idpResult?.details?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
|
||||
<cnsl-paginator #paginator class="paginator" [timestamp]="idpResult?.details?.viewTimestamp" [length]="idpResult?.details?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
|
||||
</app-refresh-table>
|
||||
@@ -1,6 +1,7 @@
|
||||
.ar-button {
|
||||
margin-right: .5rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
@@ -27,12 +28,12 @@ td {
|
||||
outline: none;
|
||||
|
||||
img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-left: 1rem;
|
||||
border-radius: .5rem;
|
||||
object-fit: contain;
|
||||
margin-top: .5rem;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-left: 1rem;
|
||||
border-radius: .5rem;
|
||||
object-fit: contain;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,15 +101,13 @@ tr {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.date-block {
|
||||
margin: .5rem 0;
|
||||
margin: .5rem 0;
|
||||
display: block;
|
||||
min-width: 120px;
|
||||
|
||||
.date-sub {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
min-width: 120px;
|
||||
|
||||
.date-sub {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
@@ -13,6 +12,7 @@ import { AdminService } from 'src/app/services/admin.service';
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
|
||||
import { PolicyComponentServiceType } from '../policies/policy-component-types.enum';
|
||||
import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
|
||||
|
||||
@@ -25,7 +25,7 @@ export class IdpTableComponent implements OnInit {
|
||||
@Input() public serviceType!: PolicyComponentServiceType;
|
||||
@Input() service!: AdminService | ManagementService;
|
||||
@Input() disabled: boolean = false;
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
public dataSource: MatTableDataSource<IDP.AsObject>
|
||||
= new MatTableDataSource<IDP.AsObject>();
|
||||
public selection: SelectionModel<IDP.AsObject>
|
||||
@@ -36,7 +36,7 @@ export class IdpTableComponent implements OnInit {
|
||||
public PolicyComponentServiceType: any = PolicyComponentServiceType;
|
||||
public IDPOwnerType: any = IDPOwnerType;
|
||||
public IDPState: any = IDPState;
|
||||
public IdpStylingType: any = IDPStylingType;
|
||||
public IDPSTYLINGTYPE: any = IDPStylingType;
|
||||
@Input() public displayedColumns: string[] = ['select', 'name', 'config', 'dates', 'state'];
|
||||
|
||||
@Output() public changedSelection: EventEmitter<Array<IDP.AsObject>>
|
||||
|
||||
@@ -4,7 +4,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { RouterModule } from '@angular/router';
|
||||
@@ -15,6 +14,7 @@ import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/local
|
||||
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
|
||||
import { TruncatePipeModule } from 'src/app/pipes/truncate-pipe/truncate-pipe.module';
|
||||
|
||||
import { PaginatorModule } from '../paginator/paginator.module';
|
||||
import { IdpTableComponent } from './idp-table.component';
|
||||
|
||||
@NgModule({
|
||||
@@ -31,7 +31,7 @@ import { IdpTableComponent } from './idp-table.component';
|
||||
LocalizedDatePipeModule,
|
||||
TimestampToDatePipeModule,
|
||||
MatTableModule,
|
||||
MatPaginatorModule,
|
||||
PaginatorModule,
|
||||
RouterModule,
|
||||
RefreshTableModule,
|
||||
HasRoleModule,
|
||||
|
||||
@@ -26,8 +26,8 @@
|
||||
min-width: 150px;
|
||||
|
||||
.chip {
|
||||
border-radius: .5rem;
|
||||
height: 40px;
|
||||
border-radius: .5rem;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.fullwidth {
|
||||
@@ -40,21 +40,21 @@
|
||||
}
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
|
||||
.formfield {
|
||||
flex: 1;
|
||||
.formfield {
|
||||
flex: 1;
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
button {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -80,7 +80,7 @@ export class IdpComponent implements OnInit, OnDestroy {
|
||||
})).subscribe((params) => {
|
||||
const { id } = params;
|
||||
if (id) {
|
||||
if (this.serviceType == PolicyComponentServiceType.MGMT) {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
(this.service as ManagementService).getOrgIDPByID(id).then(resp => {
|
||||
if (resp.idp) {
|
||||
const idpObject = resp.idp;
|
||||
@@ -90,7 +90,7 @@ export class IdpComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (this.serviceType == PolicyComponentServiceType.ADMIN) {
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
(this.service as AdminService).getIDPByID(id).then(resp => {
|
||||
if (resp.idp) {
|
||||
const idpObject = resp.idp;
|
||||
@@ -118,7 +118,7 @@ export class IdpComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
public updateIdp(): void {
|
||||
if (this.serviceType == PolicyComponentServiceType.MGMT) {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
const req = new UpdateOrgIDPRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
@@ -131,7 +131,7 @@ export class IdpComponent implements OnInit, OnDestroy {
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (this.serviceType == PolicyComponentServiceType.ADMIN) {
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
const req = new UpdateIDPRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
@@ -148,7 +148,7 @@ export class IdpComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
public updateOidcConfig(): void {
|
||||
if (this.serviceType == PolicyComponentServiceType.MGMT) {
|
||||
if (this.serviceType === PolicyComponentServiceType.MGMT) {
|
||||
const req = new UpdateOrgIDPOIDCConfigRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
@@ -165,7 +165,7 @@ export class IdpComponent implements OnInit, OnDestroy {
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (this.serviceType == PolicyComponentServiceType.ADMIN) {
|
||||
} else if (this.serviceType === PolicyComponentServiceType.ADMIN) {
|
||||
const req = new UpdateIDPOIDCConfigRequest();
|
||||
|
||||
req.setIdpId(this.id?.value);
|
||||
|
||||
@@ -13,33 +13,33 @@
|
||||
font-size: 14px;
|
||||
|
||||
.icon {
|
||||
margin-right: 1rem;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
margin-left: .5rem;
|
||||
margin-right: 1rem;
|
||||
height: 1.2rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.info-section-content {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background-color: if($is-dark-theme, #4f566b, #cbf4c9);
|
||||
color: if($is-dark-theme, #cbf4c9, #0e6245);
|
||||
background-color: if($is-dark-theme, #4f566b, #cbf4c9);
|
||||
color: if($is-dark-theme, #cbf4c9, #0e6245);
|
||||
|
||||
.icon {
|
||||
color: $primary-color;
|
||||
}
|
||||
.icon {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.warn {
|
||||
background-color: if($is-dark-theme, #4f566b, #ffc1c1);
|
||||
color: if($is-dark-theme, #ffc1c1, #620e0e);
|
||||
background-color: if($is-dark-theme, #4f566b, #ffc1c1);
|
||||
color: if($is-dark-theme, #ffc1c1, #620e0e);
|
||||
|
||||
.icon {
|
||||
color: if($is-dark-theme, #ffc1c1, #620e0e);
|
||||
}
|
||||
.icon {
|
||||
color: if($is-dark-theme, #ffc1c1, #620e0e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,5 +12,5 @@ enum InfoSectionType {
|
||||
})
|
||||
export class InfoSectionComponent {
|
||||
|
||||
@Input() type = InfoSectionType.INFO;
|
||||
@Input() type: InfoSectionType = InfoSectionType.INFO;
|
||||
}
|
||||
|
||||
@@ -1,59 +1,59 @@
|
||||
.next-steps {
|
||||
margin-top: 1rem;
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
.next-steps {
|
||||
margin-top: 1rem;
|
||||
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: .5rem;
|
||||
|
||||
.step {
|
||||
min-width: 220px;
|
||||
max-width: 280px;
|
||||
padding: 1rem;
|
||||
margin: 0 .5rem;
|
||||
border: 1px solid var(--grey);
|
||||
border-radius: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: .5rem;
|
||||
|
||||
.step {
|
||||
min-width: 220px;
|
||||
max-width: 280px;
|
||||
padding: 1rem;
|
||||
margin: 0 .5rem;
|
||||
border: 1px solid var(--grey);
|
||||
border-radius: .5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ describe('LinksComponent', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ LinksComponent ]
|
||||
declarations: [ LinksComponent ],
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@ export interface CnslLinks {
|
||||
@Component({
|
||||
selector: 'cnsl-links',
|
||||
templateUrl: './links.component.html',
|
||||
styleUrls: ['./links.component.scss']
|
||||
styleUrls: ['./links.component.scss'],
|
||||
})
|
||||
export class LinksComponent implements OnInit {
|
||||
@Input() links: Array<CnslLinks> = [];
|
||||
|
||||
@@ -19,6 +19,6 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||
],
|
||||
exports: [
|
||||
LinksComponent,
|
||||
]
|
||||
],
|
||||
})
|
||||
export class LinksModule { }
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<mat-paginator #paginator class="paginator" [length]="keyResult?.details?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
|
||||
<cnsl-paginator #paginator class="paginator" [timestamp]="keyResult?.details?.viewTimestamp" [length]="keyResult?.details?.totalResult || 0" [pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
|
||||
</div>
|
||||
</app-refresh-table>
|
||||
@@ -1,7 +1,6 @@
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
|
||||
@@ -14,6 +13,8 @@ import { ListMachineKeysResponse } from 'src/app/proto/generated/zitadel/managem
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-machine-keys',
|
||||
templateUrl: './machine-keys.component.html',
|
||||
@@ -22,7 +23,7 @@ import { ToastService } from 'src/app/services/toast.service';
|
||||
export class MachineKeysComponent implements OnInit {
|
||||
@Input() userId!: string;
|
||||
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
public dataSource: MatTableDataSource<Key.AsObject> = new MatTableDataSource<Key.AsObject>();
|
||||
public selection: SelectionModel<Key.AsObject> = new SelectionModel<Key.AsObject>(true, []);
|
||||
public keyResult!: ListMachineKeysResponse.AsObject;
|
||||
@@ -103,7 +104,7 @@ export class MachineKeysComponent implements OnInit {
|
||||
this.dialog.open(ShowKeyDialogComponent, {
|
||||
data: {
|
||||
key: response,
|
||||
type: AddKeyDialogType.MACHINE
|
||||
type: AddKeyDialogType.MACHINE,
|
||||
},
|
||||
width: '400px',
|
||||
});
|
||||
|
||||
@@ -5,24 +5,24 @@ import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
|
||||
import { CardModule } from '../card/card.module';
|
||||
import { InputModule } from '../input/input.module';
|
||||
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
|
||||
|
||||
import { MachineKeysComponent } from './machine-keys.component';
|
||||
import { ShowKeyDialogModule } from '../show-key-dialog/show-key-dialog.module';
|
||||
import { AddKeyDialogModule } from 'src/app/modules/add-key-dialog/add-key-dialog.module';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
|
||||
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
|
||||
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
|
||||
|
||||
import { CardModule } from '../card/card.module';
|
||||
import { InputModule } from '../input/input.module';
|
||||
import { PaginatorModule } from '../paginator/paginator.module';
|
||||
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
|
||||
import { ShowKeyDialogModule } from '../show-key-dialog/show-key-dialog.module';
|
||||
import { MachineKeysComponent } from './machine-keys.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -37,7 +37,7 @@ import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/
|
||||
HasRoleModule,
|
||||
CardModule,
|
||||
MatTableModule,
|
||||
MatPaginatorModule,
|
||||
PaginatorModule,
|
||||
MatIconModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatCheckboxModule,
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<mat-paginator *ngIf="dataSource" class="paginator" #paginator [pageSize]="INITIALPAGESIZE"
|
||||
<cnsl-paginator *ngIf="dataSource" class="paginator" #paginator [timestamp]="dataSource?.viewTimestamp" [pageSize]="INITIALPAGESIZE"
|
||||
[length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]" (page)="changePage($event)">
|
||||
</mat-paginator>
|
||||
</cnsl-paginator>
|
||||
</app-refresh-table>
|
||||
@@ -1,6 +1,5 @@
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSelectChange } from '@angular/material/select';
|
||||
import { MatTable } from '@angular/material/table';
|
||||
import { Observable, Subject } from 'rxjs';
|
||||
@@ -9,6 +8,7 @@ import { IamMembersDataSource } from 'src/app/pages/iam/iam-members/iam-members-
|
||||
import { OrgMembersDataSource } from 'src/app/pages/orgs/org-members/org-members-datasource';
|
||||
import { Member } from 'src/app/proto/generated/zitadel/member_pb';
|
||||
|
||||
import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
|
||||
import { ProjectMembersDataSource } from '../project-members/project-members-datasource';
|
||||
|
||||
type MemberDatasource = OrgMembersDataSource | ProjectMembersDataSource | IamMembersDataSource;
|
||||
@@ -22,7 +22,7 @@ export class MembersTableComponent implements OnInit, OnDestroy {
|
||||
public INITIALPAGESIZE: number = 25;
|
||||
@Input() public canDelete: boolean = false;
|
||||
@Input() public canWrite: boolean = false;
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
@ViewChild(MatTable) public table!: MatTable<Member.AsObject>;
|
||||
@Input() public dataSource!: MemberDatasource;
|
||||
public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
|
||||
@@ -70,7 +70,7 @@ export class MembersTableComponent implements OnInit, OnDestroy {
|
||||
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
|
||||
}
|
||||
|
||||
public changePage(event?: PageEvent | MatPaginator): any {
|
||||
public changePage(event?: PageEvent): any {
|
||||
this.selection.clear();
|
||||
return this.factoryLoadFunc(event ?? this.paginator);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatSortModule } from '@angular/material/sort';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
@@ -14,6 +13,7 @@ import { TranslateModule } from '@ngx-translate/core';
|
||||
import { InputModule } from 'src/app/modules/input/input.module';
|
||||
|
||||
import { AvatarModule } from '../avatar/avatar.module';
|
||||
import { PaginatorModule } from '../paginator/paginator.module';
|
||||
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
|
||||
import { MembersTableComponent } from './members-table.component';
|
||||
|
||||
@@ -28,7 +28,7 @@ import { MembersTableComponent } from './members-table.component';
|
||||
MatCheckboxModule,
|
||||
MatIconModule,
|
||||
MatTableModule,
|
||||
MatPaginatorModule,
|
||||
PaginatorModule,
|
||||
MatSortModule,
|
||||
MatTooltipModule,
|
||||
FormsModule,
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin meta-theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.meta-details {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@@ -45,14 +45,14 @@
|
||||
&:not(.disabled) {
|
||||
&:hover {
|
||||
.rm {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
box-shadow: inset 0 -1px if($is-dark-theme, #303131, #e3e8ee);
|
||||
|
||||
.prev {
|
||||
background: $primary-color;
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
.goto {
|
||||
@@ -32,116 +32,116 @@
|
||||
}
|
||||
|
||||
.split {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 6%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
border-radius: .5rem;
|
||||
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 6%);
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
|
||||
.right {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
flex-basis: 300px;
|
||||
box-sizing: border-box;
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(40deg, rgb(80, 66, 121),rgb(177, 59, 122),rgb(225,53,81), rgb(230,107,86));
|
||||
box-shadow: inset -2px 1px 15px -9px #000000;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.firststeps {
|
||||
color: #fad6e3;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fad6e3;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
|
||||
.right {
|
||||
padding: 1.5rem;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
.desc {
|
||||
color: var(--grey);
|
||||
font-size: 20px;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.onboarding-row {
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
align-items: center;
|
||||
|
||||
.prev {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
border-radius: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 2rem;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
|
||||
.goto {
|
||||
background-color: white;
|
||||
padding: 2px 1rem;
|
||||
color: black;
|
||||
border-radius: 50vw;
|
||||
font-size: 12px;
|
||||
margin: .5rem 0 .5rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
flex-basis: 300px;
|
||||
box-sizing: border-box;
|
||||
padding: 1.5rem;
|
||||
background: linear-gradient(40deg, rgb(80, 66, 121), rgb(177, 59, 122), rgb(225, 53, 81), rgb(230, 107, 86));
|
||||
box-shadow: inset -2px 1px 15px -9px #000;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.firststeps {
|
||||
color: #fad6e3;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fad6e3;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 1.5rem;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
.desc {
|
||||
color: var(--grey);
|
||||
font-size: 20px;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.onboarding-row {
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
align-items: center;
|
||||
|
||||
.prev {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
border-radius: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 2rem;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
box-shadow: 0 3px 8px 0 rgb(0 0 0 / 6%);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
|
||||
.goto {
|
||||
background-color: white;
|
||||
padding: 2px 1rem;
|
||||
color: black;
|
||||
border-radius: 50vw;
|
||||
font-size: 12px;
|
||||
margin: .5rem 0 .5rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ describe('OnboardingComponent', () => {
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ OnboardingComponent ]
|
||||
declarations: [ OnboardingComponent ],
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { AuthenticationService } from 'src/app/services/authentication.service';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'cnsl-onboarding',
|
||||
templateUrl: './onboarding.component.html',
|
||||
styleUrls: ['./onboarding.component.scss']
|
||||
styleUrls: ['./onboarding.component.scss'],
|
||||
})
|
||||
export class OnboardingComponent {
|
||||
public steps = [
|
||||
{ titleI18nKey: 'ONBOARDING.STEPS.1.TITLE', descI18nKey: 'ONBOARDING.STEPS.1.DESC', docs: "https://docs.zitadel.ch/use", link: ['/projects', 'create'] },
|
||||
{ titleI18nKey: 'ONBOARDING.STEPS.2.TITLE', descI18nKey: 'ONBOARDING.STEPS.2.DESC', docs: "https://docs.zitadel.ch/use", link: ['/projects'] },
|
||||
{ titleI18nKey: 'ONBOARDING.STEPS.3.TITLE', descI18nKey: 'ONBOARDING.STEPS.3.DESC', link: ['/iam', 'policies'] },
|
||||
];
|
||||
constructor() { }
|
||||
public steps: Array<{
|
||||
titleI18nKey: string;
|
||||
descI18nKey: string,
|
||||
docs?: string;
|
||||
link?: string[];
|
||||
}> = [
|
||||
{ titleI18nKey: 'ONBOARDING.STEPS.1.TITLE', descI18nKey: 'ONBOARDING.STEPS.1.DESC', docs: 'https://docs.zitadel.ch/use', link: ['/projects', 'create'] },
|
||||
{ titleI18nKey: 'ONBOARDING.STEPS.2.TITLE', descI18nKey: 'ONBOARDING.STEPS.2.DESC', docs: 'https://docs.zitadel.ch/use', link: ['/projects'] },
|
||||
{ titleI18nKey: 'ONBOARDING.STEPS.3.TITLE', descI18nKey: 'ONBOARDING.STEPS.3.DESC', link: ['/iam', 'policies'] },
|
||||
];
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="paginator">
|
||||
<div class="col">
|
||||
<p class="length"><span>{{length}} </span>{{'PAGINATOR.COUNT' | translate}}</p>
|
||||
<p class="ts" *ngIf="timestamp">{{timestamp | timestampToDate | localizedDate: 'EEEE dd. MMM YYYY, HH:mm'}}</p>
|
||||
</div>
|
||||
<span class="fill-space"></span>
|
||||
<span class="pos">{{pageIndex * pageSize}} - {{pageIndex * pageSize + pageSize}} </span>
|
||||
<div class="row">
|
||||
<cnsl-form-field class="size" appearance="outline">
|
||||
<mat-select [(ngModel)]="pageSize" (selectionChange)="emitChange()">
|
||||
<mat-option *ngFor="let sizeOption of pageSizeOptions" [value]="sizeOption">
|
||||
{{sizeOption}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</cnsl-form-field>
|
||||
<button (click)="previous()" [disabled]="!previousPossible" mat-button>{{'PAGINATOR.PREVIOUS' |
|
||||
translate}}</button>
|
||||
<button (click)="next()" [disabled]="!nextPossible" mat-button>{{'PAGINATOR.NEXT' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,62 @@
|
||||
.paginator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding-top: .5rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
@media only screen and (min-width: 500px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.col {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.length {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ts {
|
||||
font-size: 12px;
|
||||
color: var(--grey);
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pos {
|
||||
font-size: 12px;
|
||||
margin: .5rem 1rem .5rem 1rem;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.size {
|
||||
transform: translateY(1px);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable */
|
||||
::ng-deep .mat-select {
|
||||
min-width: 60px;
|
||||
height: 36px !important;
|
||||
padding-top: 8px !important;
|
||||
}
|
||||
/* stylelint-enable */
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PaginatorComponent } from './paginator.component';
|
||||
|
||||
describe('PaginatorComponent', () => {
|
||||
let component: PaginatorComponent;
|
||||
let fixture: ComponentFixture<PaginatorComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PaginatorComponent ],
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PaginatorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { Timestamp } from 'src/app/proto/generated/google/protobuf/timestamp_pb';
|
||||
|
||||
export interface PageEvent {
|
||||
length: number;
|
||||
pageSize: number;
|
||||
pageIndex: number;
|
||||
pageSizeOptions: Array<number>;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'cnsl-paginator',
|
||||
templateUrl: './paginator.component.html',
|
||||
styleUrls: ['./paginator.component.scss'],
|
||||
})
|
||||
export class PaginatorComponent {
|
||||
@Input() public timestamp!: Timestamp.AsObject;
|
||||
@Input() public length: number = 0;
|
||||
@Input() public pageSize: number = 10;
|
||||
@Input() public pageIndex: number = 0;
|
||||
@Input() public pageSizeOptions: Array<number> = [10, 25, 50];
|
||||
@Output() public page: EventEmitter<PageEvent> = new EventEmitter();
|
||||
constructor() { }
|
||||
|
||||
public previous(): void {
|
||||
if (this.previousPossible) {
|
||||
this.pageIndex = this.pageIndex - 1;
|
||||
this.emitChange();
|
||||
}
|
||||
}
|
||||
|
||||
public next(): void {
|
||||
if (this.nextPossible) {
|
||||
this.pageIndex = this.pageIndex + 1;
|
||||
this.emitChange();
|
||||
}
|
||||
}
|
||||
|
||||
get previousPossible(): boolean {
|
||||
const temp = this.pageIndex - 1;
|
||||
return (temp >= 0);
|
||||
}
|
||||
|
||||
get nextPossible(): boolean {
|
||||
const temp = this.pageIndex + 1;
|
||||
return (temp <= (this.length / this.pageSize));
|
||||
}
|
||||
|
||||
public emitChange(): void {
|
||||
this.page.emit({
|
||||
length: this.length,
|
||||
pageSize: this.pageSize,
|
||||
pageIndex: this.pageIndex,
|
||||
pageSizeOptions: this.pageSizeOptions,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
|
||||
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
|
||||
|
||||
import { FormFieldModule } from '../form-field/form-field.module';
|
||||
import { PaginatorComponent } from './paginator.component';
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [PaginatorComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
TranslateModule,
|
||||
MatButtonModule,
|
||||
TimestampToDatePipeModule,
|
||||
FormFieldModule,
|
||||
MatSelectModule,
|
||||
LocalizedDatePipeModule,
|
||||
],
|
||||
exports: [
|
||||
PaginatorComponent,
|
||||
],
|
||||
})
|
||||
export class PaginatorModule { }
|
||||
-1
@@ -24,7 +24,6 @@ export class AddIdpDialogComponent {
|
||||
|
||||
public idp: IDP.AsObject | undefined = undefined;
|
||||
public availableIdps: Array<IDP.AsObject[] | IDP.AsObject> | string[] = [];
|
||||
public IdpProviderType: any = IDPOwnerType;
|
||||
|
||||
constructor(
|
||||
private mgmtService: ManagementService,
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
.info {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -51,25 +51,25 @@
|
||||
color: white;
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-right: 1rem;
|
||||
border-radius: .5rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-right: 1rem;
|
||||
border-radius: .5rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
display: block;
|
||||
div {
|
||||
flex: 1;
|
||||
display: block;
|
||||
|
||||
* {
|
||||
display: block;
|
||||
}
|
||||
* {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -116,13 +116,13 @@
|
||||
}
|
||||
|
||||
&:not(.disabled) {
|
||||
&:hover {
|
||||
.rm {
|
||||
display: block;
|
||||
}
|
||||
&:hover {
|
||||
.rm {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@@ -195,7 +195,7 @@ export class LoginPolicyComponent implements OnDestroy {
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(resp => {
|
||||
if (resp && resp.idp) {
|
||||
if (resp && resp.idp && resp.type) {
|
||||
this.addIdp(resp.idp, resp.type).then(() => {
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
@@ -208,12 +208,10 @@ export class LoginPolicyComponent implements OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
private addIdp(idp: IDP.AsObject | IDP.AsObject, ownerType?: IDPOwnerType): Promise<any> {
|
||||
private addIdp(idp: IDP.AsObject | IDP.AsObject, ownerType: IDPOwnerType): Promise<any> {
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
if (ownerType) {
|
||||
return (this.service as ManagementService).addIDPToLoginPolicy(idp.id, ownerType);
|
||||
}
|
||||
return (this.service as ManagementService).addIDPToLoginPolicy(idp.id, ownerType);
|
||||
case PolicyComponentServiceType.ADMIN:
|
||||
return (this.service as AdminService).addIDPToLoginPolicy(idp.id);
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ import { OrgIamPolicyComponent } from './org-iam-policy.component';
|
||||
InfoSectionModule,
|
||||
TranslateModule,
|
||||
DetailLayoutModule,
|
||||
LinksModule
|
||||
LinksModule,
|
||||
],
|
||||
})
|
||||
export class OrgIamPolicyModule { }
|
||||
|
||||
+1
-1
@@ -19,7 +19,7 @@
|
||||
padding: .3rem 0;
|
||||
|
||||
.icon {
|
||||
margin-right: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.left-desc {
|
||||
|
||||
+2
-1
@@ -66,7 +66,8 @@ export class PasswordLockoutPolicyComponent implements OnDestroy {
|
||||
});
|
||||
}
|
||||
|
||||
private getData(): Promise<AdminGetPasswordLockoutPolicyResponse.AsObject | MgmtGetPasswordLockoutPolicyResponse.AsObject> {
|
||||
private getData():
|
||||
Promise<AdminGetPasswordLockoutPolicyResponse.AsObject | MgmtGetPasswordLockoutPolicyResponse.AsObject> {
|
||||
switch (this.serviceType) {
|
||||
case PolicyComponentServiceType.MGMT:
|
||||
return (this.service as ManagementService).getPasswordLockoutPolicy();
|
||||
|
||||
@@ -68,14 +68,15 @@ h2 {
|
||||
}
|
||||
|
||||
.warn {
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
|
||||
.icons {
|
||||
margin-bottom: 1rem;
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.icon {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-space {
|
||||
|
||||
@@ -24,13 +24,13 @@ export class PolicyGridComponent implements OnInit {
|
||||
constructor(private mgmtService: ManagementService, private adminService: AdminService) { }
|
||||
|
||||
public ngOnInit(): void {
|
||||
if (this.type == PolicyGridType.ORG) {
|
||||
if (this.type === PolicyGridType.ORG) {
|
||||
this.mgmtService.getPasswordComplexityPolicy().then((resp) => {
|
||||
if (resp.policy) {
|
||||
this.complexityPolicy = resp.policy;
|
||||
}
|
||||
});
|
||||
} else if (this.type == PolicyGridType.IAM) {
|
||||
} else if (this.type === PolicyGridType.IAM) {
|
||||
this.adminService.getPasswordComplexityPolicy().then((resp) => {
|
||||
if (resp.policy) {
|
||||
this.complexityPolicy = resp.policy;
|
||||
|
||||
@@ -7,8 +7,8 @@ import { Member } from 'src/app/proto/generated/zitadel/member_pb';
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
|
||||
export enum ProjectType {
|
||||
PROJECTTYPE_OWNED = "OWNED",
|
||||
PROJECTTYPE_GRANTED = "GRANTED"
|
||||
PROJECTTYPE_OWNED = 'OWNED',
|
||||
PROJECTTYPE_GRANTED = 'GRANTED',
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -35,7 +35,10 @@ export class ProjectMembersDataSource extends DataSource<Member.AsObject> {
|
||||
|
||||
this.loadingSubject.next(true);
|
||||
|
||||
const promise: Promise<ListProjectMembersResponse.AsObject> | Promise<ListProjectGrantMembersResponse.AsObject> | undefined =
|
||||
const promise:
|
||||
Promise<ListProjectMembersResponse.AsObject> |
|
||||
Promise<ListProjectGrantMembersResponse.AsObject>
|
||||
| undefined =
|
||||
projectType === ProjectType.PROJECTTYPE_OWNED ?
|
||||
this.mgmtService.listProjectMembers(projectId, pageSize, offset) :
|
||||
projectType === ProjectType.PROJECTTYPE_GRANTED && grantId ?
|
||||
|
||||
@@ -111,18 +111,22 @@ export class ProjectMembersComponent {
|
||||
public removeProjectMemberSelection(): void {
|
||||
Promise.all(this.selection.map(member => {
|
||||
if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
|
||||
return this.mgmtService.removeProjectMember((this.project as Project.AsObject).id, member.userId).then(() => {
|
||||
this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
|
||||
return this.mgmtService.removeProjectGrantMember((this.project as GrantedProject.AsObject).projectId, this.grantId,
|
||||
member.userId).then(() => {
|
||||
return this.mgmtService.removeProjectMember((this.project as Project.AsObject).id, member.userId)
|
||||
.then(() => {
|
||||
this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
} else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
|
||||
return this.mgmtService.removeProjectGrantMember(
|
||||
(this.project as GrantedProject.AsObject).projectId,
|
||||
this.grantId,
|
||||
member.userId,
|
||||
).then(() => {
|
||||
this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true);
|
||||
}).catch(error => {
|
||||
this.toast.showError(error);
|
||||
});
|
||||
}
|
||||
})).then(() => {
|
||||
setTimeout(() => {
|
||||
@@ -173,8 +177,12 @@ export class ProjectMembersComponent {
|
||||
return this.mgmtService.addProjectMember((this.project as Project.AsObject).id, user.id, roles);
|
||||
|
||||
} else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
|
||||
return this.mgmtService.addProjectGrantMember((this.project as GrantedProject.AsObject).projectId, this.grantId,
|
||||
user.id, roles);
|
||||
return this.mgmtService.addProjectGrantMember(
|
||||
(this.project as GrantedProject.AsObject).projectId,
|
||||
this.grantId,
|
||||
user.id,
|
||||
roles,
|
||||
);
|
||||
}
|
||||
})).then(() => {
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -72,8 +72,8 @@
|
||||
<span>{{'PROJECT.ROLE.EMPTY' | translate}}</span>
|
||||
</div>
|
||||
|
||||
<mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50"
|
||||
<cnsl-paginator #paginator [timestamp]="dataSource?.viewTimestamp" [length]="dataSource.totalResult" [pageSize]="50" (page)="changePage()"
|
||||
[pageSizeOptions]="[25, 50, 100, 250]">
|
||||
</mat-paginator>
|
||||
</cnsl-paginator>
|
||||
</div>
|
||||
</app-refresh-table>
|
||||
@@ -43,16 +43,15 @@
|
||||
}
|
||||
|
||||
tr {
|
||||
outline: none;
|
||||
|
||||
outline: none;
|
||||
|
||||
button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
button {
|
||||
visibility: visible;
|
||||
}
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatTable } from '@angular/material/table';
|
||||
import { tap } from 'rxjs/operators';
|
||||
import { Role } from 'src/app/proto/generated/zitadel/project_pb';
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
import { PaginatorComponent } from '../paginator/paginator.component';
|
||||
import { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component';
|
||||
import { ProjectRolesDataSource } from './project-roles-datasource';
|
||||
|
||||
@@ -21,7 +21,7 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
|
||||
@Input() public projectId: string = '';
|
||||
@Input() public disabled: boolean = false;
|
||||
@Input() public actionsVisible: boolean = false;
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
@ViewChild(MatTable) public table!: MatTable<Role.AsObject>;
|
||||
public dataSource!: ProjectRolesDataSource;
|
||||
public selection: SelectionModel<Role.AsObject> = new SelectionModel<Role.AsObject>(true, []);
|
||||
@@ -64,6 +64,11 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
|
||||
);
|
||||
}
|
||||
|
||||
public changePage(): void {
|
||||
this.selection.clear();
|
||||
this.loadRolesPage();
|
||||
}
|
||||
|
||||
public isAllSelected(): boolean {
|
||||
const numSelected = this.selection.selected.length;
|
||||
const numRows = this.dataSource.rolesSubject.value.length;
|
||||
|
||||
@@ -6,7 +6,6 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
@@ -18,6 +17,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.mod
|
||||
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
|
||||
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
|
||||
|
||||
import { PaginatorModule } from '../paginator/paginator.module';
|
||||
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
|
||||
import { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component';
|
||||
import { ProjectRolesComponent } from './project-roles.component';
|
||||
@@ -30,7 +30,7 @@ import { ProjectRolesComponent } from './project-roles.component';
|
||||
MatButtonModule,
|
||||
HasRoleModule,
|
||||
MatTableModule,
|
||||
MatPaginatorModule,
|
||||
PaginatorModule,
|
||||
MatDialogModule,
|
||||
InputModule,
|
||||
FormsModule,
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
<div class="table-header-row">
|
||||
<div class="col">
|
||||
<span *ngIf="!selection.hasValue()" class="count">{{dataSize}}</span>
|
||||
<span *ngIf="selection.hasValue()" class="count">{{selection?.selected?.length}}</span>
|
||||
<div class="desc">
|
||||
<span *ngIf="!selection.hasValue()">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
|
||||
<span *ngIf="selection.hasValue()">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
|
||||
<span *ngIf="timestamp">{{timestamp | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
|
||||
</div>
|
||||
<div class="row" *ngIf="selection.hasValue()">
|
||||
<div>
|
||||
<span class="count">{{selection?.selected?.length}}</span>
|
||||
<span class="desc" >{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
|
||||
</div>
|
||||
<span class="slash">|</span>
|
||||
<a (click)="selection.clear()">{{'ORG_DETAIL.TABLE.CLEAR' | translate}}</a>
|
||||
</div>
|
||||
<span class="fill-space"></span>
|
||||
<mat-spinner class="spinner" *ngIf="loading" diameter="20"></mat-spinner>
|
||||
|
||||
@@ -3,23 +3,28 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.col {
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.desc {
|
||||
font-size: .8rem;
|
||||
color: var(--grey);
|
||||
margin-right: 1rem;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
font-size: 2rem;
|
||||
margin-right: .5rem;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 14px;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.slash {
|
||||
margin: 0 .5rem;
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -6,12 +6,12 @@ import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
|
||||
import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
|
||||
import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
|
||||
|
||||
import { RefreshTableComponent } from './refresh-table.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [RefreshTableComponent],
|
||||
imports: [
|
||||
@@ -24,6 +24,7 @@ import { RefreshTableComponent } from './refresh-table.component';
|
||||
MatProgressSpinnerModule,
|
||||
TimestampToDatePipeModule,
|
||||
LocalizedDatePipeModule,
|
||||
PaginatorModule,
|
||||
],
|
||||
exports: [
|
||||
RefreshTableComponent,
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
[emitRefreshOnPreviousRoutes]="refreshOnPreviousRoutes" [timestamp]="dataSource?.viewTimestamp"
|
||||
[dataSize]="dataSource?.totalResult" [selection]="selection">
|
||||
<cnsl-form-field @appearfade *ngIf="userGrantListSearchKey != undefined" actions class="filtername">
|
||||
<input cnslInput (keyup)="applyFilter($event)"
|
||||
[placeholder]="('USER.TABLE.FILTER.' + userGrantListSearchKey.toString()) | translate" #input>
|
||||
<input class="filterinput" cnslInput (keyup)="applyFilter($event)"
|
||||
[placeholder]="('USER.GRANTS.FILTER.' + userGrantListSearchKey.toString()) | translate" #input>
|
||||
</cnsl-form-field>
|
||||
|
||||
<button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button actions
|
||||
@@ -78,6 +78,20 @@
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="creationDate">
|
||||
<th mat-header-cell *matHeaderCellDef> {{'PROJECT.GRANT.CREATIONDATE' | translate}} </th>
|
||||
<td mat-cell *matCellDef="let grant">
|
||||
<span>{{grant.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="changeDate">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let grant">
|
||||
<span>{{grant.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="roleNamesList">
|
||||
<th mat-header-cell *matHeaderCellDef class="role-data">
|
||||
{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}
|
||||
@@ -106,7 +120,6 @@
|
||||
<ng-container
|
||||
*ngIf="(context === UserGrantContext.OWNED_PROJECT || context === UserGrantContext.USER || context === UserGrantContext.NONE) && grantToEdit == grant.id && loadedProjectId && loadedProjectId === grant.projectId">
|
||||
<cnsl-form-field class="form-field" appearance="outline">
|
||||
<!-- <cnsl-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</cnsl-label> -->
|
||||
<mat-select [(ngModel)]="grant.roleKeysList" multiple
|
||||
[disabled]="disableWrite || !((['user.grant.write$'] | hasRole | async) || ((context === UserGrantContext.OWNED_PROJECT ? ['user.grant.write:' + grant?.projectId] : context === UserGrantContext.GRANTED_PROJECT ? ['user.grant.write:' + grant?.id] : []) | hasRole | async))"
|
||||
(selectionChange)="updateRoles(grant, $event)">
|
||||
@@ -125,7 +138,6 @@
|
||||
<ng-container
|
||||
*ngIf="(context === UserGrantContext.GRANTED_PROJECT || context === UserGrantContext.USER || context === UserGrantContext.NONE) && loadedId && loadedId === grant.id && grantToEdit == grant.id">
|
||||
<cnsl-form-field class="form-field" appearance="outline">
|
||||
<!-- <cnsl-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</cnsl-label> -->
|
||||
<mat-select [(ngModel)]="grant.roleKeysList" multiple
|
||||
[disabled]="disableWrite || !((['user.grant.write$'] | hasRole | async) || ((context === UserGrantContext.OWNED_PROJECT ? ['user.grant.write:' + grant?.projectId] : context === UserGrantContext.GRANTED_PROJECT ? ['user.grant.write:' + grant?.id] : []) | hasRole | async))"
|
||||
(selectionChange)="updateRoles(grant, $event)">
|
||||
@@ -153,9 +165,9 @@
|
||||
<i class="las la-exclamation"></i>
|
||||
<span>{{'GRANTS.EMPTY' | translate}}</span>
|
||||
</div>
|
||||
<mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="INITIAL_PAGE_SIZE"
|
||||
<cnsl-paginator class="paginator" #paginator [timestamp]="dataSource?.viewTimestamp" [length]="dataSource.totalResult" [pageSize]="INITIAL_PAGE_SIZE"
|
||||
[length]="dataSource.totalResult" [pageSizeOptions]="[2, 3, 25, 50, 100, 250]" (page)="changePage($event)">
|
||||
</mat-paginator>
|
||||
</cnsl-paginator>
|
||||
</div>
|
||||
</app-refresh-table>
|
||||
|
||||
|
||||
@@ -109,5 +109,11 @@
|
||||
}
|
||||
|
||||
.filtername {
|
||||
flex: 1;
|
||||
margin-right: 1rem;
|
||||
|
||||
.filterinput {
|
||||
height: 36px;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatInput } from '@angular/material/input';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSelectChange } from '@angular/material/select';
|
||||
import { MatTable } from '@angular/material/table';
|
||||
import { tap } from 'rxjs/operators';
|
||||
@@ -19,6 +18,7 @@ import {
|
||||
import { ManagementService } from 'src/app/services/mgmt.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
|
||||
import { PageEvent, PaginatorComponent } from '../paginator/paginator.component';
|
||||
import { UserGrantContext, UserGrantsDataSource } from './user-grants-datasource';
|
||||
|
||||
export enum UserGrantListSearchKey {
|
||||
@@ -45,7 +45,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
|
||||
|
||||
public dataSource!: UserGrantsDataSource;
|
||||
public selection: SelectionModel<UserGrant.AsObject> = new SelectionModel<UserGrant.AsObject>(true, []);
|
||||
@ViewChild(MatPaginator) public paginator!: MatPaginator;
|
||||
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
|
||||
@ViewChild(MatTable) public table!: MatTable<UserGrant.AsObject>;
|
||||
|
||||
@Input() disableWrite: boolean = false;
|
||||
@@ -75,7 +75,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
|
||||
@Input() public displayedColumns: string[] = ['select',
|
||||
'user',
|
||||
'org',
|
||||
'projectId', 'dates', 'roleNamesList'];
|
||||
'projectId', 'creationDate', 'changeDate', 'roleNamesList'];
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.dataSource = new UserGrantsDataSource(this.userService);
|
||||
|
||||
@@ -4,7 +4,6 @@ import { FormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatPaginatorModule } from '@angular/material/paginator';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
@@ -18,6 +17,7 @@ import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/
|
||||
|
||||
import { InputModule } from '../../modules/input/input.module';
|
||||
import { AvatarModule } from '../avatar/avatar.module';
|
||||
import { PaginatorModule } from '../paginator/paginator.module';
|
||||
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
|
||||
import { UserGrantsComponent } from './user-grants.component';
|
||||
|
||||
@@ -31,7 +31,7 @@ import { UserGrantsComponent } from './user-grants.component';
|
||||
MatButtonModule,
|
||||
HasRoleModule,
|
||||
MatTableModule,
|
||||
MatPaginatorModule,
|
||||
PaginatorModule,
|
||||
MatIconModule,
|
||||
RouterModule,
|
||||
MatProgressSpinnerModule,
|
||||
|
||||
Reference in New Issue
Block a user