TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 21:27:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): add stylelint scss, app redirecturi validation, user grant api change (#531)

Browse Source 
* add custom validator for redirect inputs

* change http pattern, i18n

* throw out deprecated usergrant functions

* remove deprecation service

* show docs in app detail

* reorder data promises

* show redirect desc in app detail

* custom validator

* grant search filters

* rm animations

* add validation to app detail

* user grant udpate

* rm grantid from update req

* fix project member guard

* fix hasrole directive

* show validation errors, i18n

* fix router link from org members

* navitem padding

* mobile layout

* policy grid mobile layout

* rm unused background

* lint

* add stylelinter add to pipeline

* update stylelint rules

* lint unknown rule

* disable enable rules

* lint

* table style lint

* table classes

* fix stylelinter rule, lint

* overflow fix member detail

* common detail page

* user create, password, project grant detail clnup

* move meta styles

* lint

* password policy indicator

* lint

* fix org create

* common component for complexity view

* lint

* user grant filter

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

Co-authored-by: Florian Forster <florian@caos.ch>

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

Co-authored-by: Florian Forster <florian@caos.ch>

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

Co-authored-by: Florian Forster <florian@caos.ch>

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

Co-authored-by: Florian Forster <florian@caos.ch>

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

Co-authored-by: Florian Forster <florian@caos.ch>

Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
Max Peintner
2020-07-30 16:54:15 +02:00
committed by GitHub
parent 8d1725a81d
commit 22ba33c2ef
154 changed files with 6780 additions and 6158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
console/.stylelintrc Normal file
View File

@@ -0,0 +1,48 @@
{
"plugins": [
"stylelint-scss"
],
"extends": "stylelint-config-standard",
"rules": {
"at-rule-no-unknown": null,
"no-descending-specificity": null,
"at-rule-empty-line-before": [
"always",
{
"except": [
"blockless-after-same-name-blockless",
"first-nested"
],
"ignore": [
"after-comment"
],
"ignoreAtRules": [
"else"
]
}
],
"block-closing-brace-newline-after": [
"always",
{
"ignoreAtRules": [
"if",
"else"
]
}
],
"max-line-length": 125,
"no-empty-source": null,
"number-leading-zero": "never",
"scss/at-rule-no-unknown": null,
"scss/at-else-if-parentheses-space-before": "always",
"scss/at-function-parentheses-space-before": "never",
"scss/at-if-closing-brace-newline-after": "always-last-in-chain",
"scss/at-import-no-partial-leading-underscore": true,
"scss/at-mixin-argumentless-call-parentheses": "always",
"scss/at-mixin-parentheses-space-before": "never",
"scss/dollar-variable-colon-newline-after": "always-multi-line",
"scss/dollar-variable-colon-space-after": "always-single-line",
"scss/double-slash-comment-whitespace-inside": "always",
"scss/no-duplicate-dollar-variables": true
}
}

2150
console/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
console/package.json
View File

@@ -6,7 +6,7 @@
"start": "ng serve",
"build": "ng build",
"prodbuild": "ng build --prod",
"lint": "ng lint && stylelint './projects/**/*.scss' --syntax scss",
"lint": "ng lint && stylelint './src/**/*.scss' --syntax scss",
"postinstall": "../build/console/generate-grpc.sh"
},
"private": true,
@@ -44,8 +44,8 @@
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular/cli": "~10.0.4",
"@angular-devkit/build-angular": "~0.1000.4",
"@angular/cli": "~10.0.4",
"@angular/compiler-cli": "~10.0.2",
"@angular/language-service": "~10.0.5",
"@types/jasmine": "~3.5.11",
@@ -61,6 +61,9 @@
"karma-jasmine-html-reporter": "^1.5.0",
"prettier": "^2.0.5",
"protractor": "~7.0.0",
"stylelint": "^13.6.1",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.18.0",
"ts-node": "~8.10.2",
"tslint": "~6.1.0",
"typescript": "^3.9.7"

8
console/src/app/animations.ts
View File

@@ -79,10 +79,12 @@ export const navAnimations: Array<AnimationTriggerMetadata> = [
export const routeAnimations: AnimationTriggerMetadata = trigger('routeAnimations', [
transition('HomePage => AddPage', [
style({ transform: 'translateX(100%)' }),
animate('250ms ease-in-out', style({ transform: 'translateX(0%)' })),
style({ transform: 'translateX(100%)', opacity: 0.5 }),
animate('250ms ease-out', style({ transform: 'translateX(0%)', opacity: 1 })),
]),
transition('AddPage => HomePage', [animate('250ms', style({ transform: 'translateX(100%)' }))]),
transition('AddPage => HomePage',
[animate('250ms', style({ transform: 'translateX(100%)', opacity: 0.5 }))],
),
transition('HomePage => DetailPage', [
query(':enter, :leave', style({ position: 'absolute', left: 0, right: 0 }), {
optional: true,

2
console/src/app/app.component.html
View File

@@ -1,6 +1,6 @@
<ng-container *ngIf="(authService.user | async) || {} as user">
<ng-container *ngIf="((['iam.read','iam.write'] | hasRole)) as iamuser$">
<mat-toolbar @toolbar class="root-header">
<mat-toolbar class="root-header">
<button aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>

409
console/src/app/app.component.scss
View File

@@ -1,232 +1,231 @@
.root-header {
position: fixed;
z-index: 100;
display: flex;
height: 60px;
align-items: center;
padding: 0 1rem;
top: 0;
left: 0;
right: 0;
.logo {
height: 40px;
width: auto;
position: fixed;
z-index: 100;
display: flex;
height: 60px;
align-items: center;
padding: 0 1rem;
top: 0;
left: 0;
right: 0;
.logo {
height: 40px;
width: auto;
}
.title {
text-decoration: none;
color: white;
font-size: 1.2rem;
font-weight: 400;
margin-left: 1rem;
line-height: 1.2rem;
margin-right: 1rem;
}
.context-menu {
border-radius: .5rem;
background-color: #2d2e30;
}
.fill-space {
flex: 1;
}
.icon-container {
display: flex;
justify-content: space-between;
position: relative;
user-select: none;
.docs {
text-decoration: none;
font-size: 1.4rem;
}
.title {
text-decoration: none;
color: white;
font-size: 1.2rem;
font-weight: 400;
margin-left: 1rem;
line-height: 1.2rem;
font-family: 'Lato';
margin-right: 1rem;
.avatar {
display: block;
margin: auto;
cursor: pointer;
}
.context-menu {
border-radius: .5rem;
background-color: #2d2e30;
.name {
font-size: 1rem;
font-weight: 400;
}
.fill-space {
flex: 1;
.a_card {
position: absolute;
top: 60px;
right: 0;
overflow: hidden;
border-radius: .5rem;
}
.icon-container {
display: flex;
justify-content: space-between;
position: relative;
user-select: none;
.docs {
text-decoration: none;
font-size: 1.4rem;
}
.avatar {
display: block;
margin: auto;
cursor: pointer;
}
.name {
font-size: 1rem;
font-weight: 400;
}
.a_card {
position: absolute;
top: 60px;
right: 0;
overflow: hidden;
border-radius: .5rem;
}
}
}
}
.admin-line {
font-size: 12px;
padding: 4px 2rem;
position: relative;
overflow: hidden;
font-size: 12px;
padding: 4px 2rem;
position: relative;
overflow: hidden;
}
.main-container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
padding-top: 60px;
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
padding-top: 60px;
.sidenav {
width: 300px;
border-right: none;
.sidenav {
width: 300px;
border-right: none;
.side-column {
padding-top: 60px;
display: flex;
flex-direction: column;
align-items: stretch;
.list {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
margin-top: 2rem;
.logout-icon {
margin-left: 1rem;
}
.fill-space {
flex: 1;
}
.nav-item {
display: flex;
align-items: center;
text-decoration: none;
cursor: pointer;
padding: 0.2rem 1rem;
margin-right: 0.5rem;
padding-right: 2rem;
.icon {
margin: 0.5rem 1rem;
}
.label {
margin-bottom: 0;
font-weight: 500;
font-size: .9rem;
}
.side-column {
padding-top: 60px;
display: flex;
flex-direction: column;
align-items: stretch;
.c_label {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.count {
font-size: 12px;
}
}
&:hover {
background-color: #00000010;
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
&.active {
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
}
.project-status {
padding: 1rem;
}
}
.fill-space {
flex: 1 1 auto;
}
.logout-button {
margin-bottom: 1rem;
}
}
.primary-button {
margin: 1rem;
border-radius: 1.5rem;
height: 2.5rem;
padding: 0 1rem;
}
}
.content {
display: flex;
flex-direction: column;
.router {
height: 100%;
overflow: auto;
}
}
.theme-section {
display: block;
padding: 0 .5rem;
.list {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
margin-top: 2rem;
align-self: flex-start;
border-radius: 1rem;
.round-light {
display: inline-block;
border-radius: 50%;
height: 30px;
width: 30px;
margin: .5rem;
cursor: pointer;
background: linear-gradient(315deg, #e6e6e6, #ffffff);
.logout-icon {
margin-left: 1rem;
}
.round-dark {
display: inline-block;
border-radius: 50%;
height: 30px;
width: 30px;
margin: .5rem;
cursor: pointer;
background: linear-gradient(315deg, #000000, #000000);
.fill-space {
flex: 1;
}
.nav-item {
display: flex;
align-items: center;
text-decoration: none;
cursor: pointer;
padding: .2rem 1rem;
margin-right: .5rem;
.icon {
margin: .5rem 1rem;
}
.label {
margin-bottom: 0;
font-weight: 500;
font-size: .9rem;
}
.c_label {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.count {
font-size: 12px;
}
}
&:hover {
background-color: #00000010;
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
&.active {
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
}
.project-status {
padding: 1rem;
}
}
.fill-space {
flex: 1 1 auto;
}
.logout-button {
margin-bottom: 1rem;
}
}
.primary-button {
margin: 1rem;
border-radius: 1.5rem;
height: 2.5rem;
padding: 0 1rem;
}
}
.content {
display: flex;
flex-direction: column;
.router {
height: 100%;
overflow: auto;
}
}
.theme-section {
display: block;
padding: 0 .5rem;
margin-top: 2rem;
align-self: flex-start;
border-radius: 1rem;
.round-light {
display: inline-block;
border-radius: 50%;
height: 30px;
width: 30px;
margin: .5rem;
cursor: pointer;
background: linear-gradient(315deg, #e6e6e6, #fff);
}
.round-dark {
display: inline-block;
border-radius: 50%;
height: 30px;
width: 30px;
margin: .5rem;
cursor: pointer;
background: linear-gradient(315deg, #000, #000);
}
}
}
.divider {
display: flex;
align-items: center;
width: 100%;
margin: .5rem 0;
display: flex;
align-items: center;
width: 100%;
margin: .5rem 0;
span {
border: 1px solid #ffffff10;
padding: 2px 1rem;
border-radius: 50vw;
color: #8795a1;
font-size: 12px;
}
.line {
display: block;
background-color: #ffffff10;
height: 1px;
margin: .5rem 0;
flex: 1;
}
}
span {
border: 1px solid #ffffff10;
padding: 2px 1rem;
border-radius: 50vw;
color: #8795a1;
font-size: 12px;
}
.line {
display: block;
background-color: #ffffff10;
height: 1px;
margin: .5rem 0;
flex: 1;
}
}

177
console/src/app/modules/accounts-card/accounts-card.component.scss
View File

@@ -1,105 +1,106 @@
.card {
border-radius: .5rem;
z-index: 200;
border: 1px solid #ffffff30;
width: 350px;
border-radius: .5rem;
z-index: 200;
border: 1px solid #ffffff30;
width: 350px;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 0;
.avatar {
font-size: 80px;
margin-bottom: 1rem;
}
.u-name {
font-size: 1rem;
line-height: 1rem;
}
.u-email {
font-size: .8rem;
margin-top: 0;
}
.iamuser {
font-size: 1rem;
}
button {
border-radius: 50vh;
margin: .5rem;
.mat-button-wrapper {
font-size: .8rem;
}
}
.l-accounts {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 0;
width: 100%;
border-top: 1px solid #ffffff30;
border-bottom: 1px solid #ffffff30;
padding: .5rem 0;
.avatar {
font-size: 80px;
margin-bottom: 1rem;
}
.row {
padding: .5rem;
display: flex;
align-items: center;
color: inherit;
text-decoration: none;
.u-name {
font-size: 1rem;
line-height: 1rem;
}
&:hover {
cursor: pointer;
background-color: #ffffff10;
}
.u-email {
font-size: .8rem;
margin-top: 0;
}
.small-avatar {
height: 35px;
width: 35px;
line-height: 35px;
font-size: 35px;
border-radius: 50%;
margin: 0 1rem;
}
.iamuser {
font-size: 1rem;
}
.icon-wrapper {
height: 35px;
width: 35px;
border-radius: 50%;
margin: 0 1rem;
text-align: center;
button {
border-radius: 50vh;
margin: .5rem;
.mat-button-wrapper {
font-size: .8rem;
i {
margin: auto;
vertical-align: middle;
}
}
}
.l-accounts {
.col {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
border-top: 1px solid #ffffff30;
border-bottom: 1px solid #ffffff30;
padding: .5rem 0;
.row {
padding: .5rem;
display: flex;
align-items: center;
color: inherit;
text-decoration: none;
&:hover {
cursor: pointer;
background-color: #ffffff10;
}
.small-avatar {
height: 35px;
width: 35px;
line-height: 35px;
font-size: 35px;
border-radius: 50%;
margin: 0 1rem;
}
.icon-wrapper {
height: 35px;
width: 35px;
border-radius: 50%;
margin: 0 1rem;
text-align: center;
i {
margin: auto;
vertical-align: middle;
}
}
.col {
flex: 1;
display: flex;
flex-direction: column;
.title {
font-weight: 500;
font-size: .9rem;
line-height: 1rem;
}
.email, .loginname {
color: #8795a1;
font-size: .8rem;
line-height: 1rem;
}
}
.fill-space {
flex: 1;
}
.title {
font-weight: 500;
font-size: .9rem;
line-height: 1rem;
}
.email,
.loginname {
color: #8795a1;
font-size: .8rem;
line-height: 1rem;
}
}
.fill-space {
flex: 1;
}
}
}
}

32
console/src/app/modules/add-member-dialog/member-create-dialog.component.scss
View File

@@ -1,25 +1,25 @@
.title {
font-size: 1.2rem;
font-size: 1.2rem;
}
.desc {
color: #8795a1;
font-size: .9rem;
color: #8795a1;
font-size: .9rem;
}
.full-width {
width: 100%;
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
button {
border-radius: 0.5rem;
}
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}

28
console/src/app/modules/avatar/avatar.component.scss
View File

@@ -2,18 +2,18 @@
@import '~@angular/material/theming';
@mixin avatar-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat-color($primary, 500);
$primary: map-get($theme, primary);
$primary-color: mat-color($primary, 500);
.avatar-circle {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
background-color: $primary-color;
box-sizing: border-box;
outline: none;
color: white;
}
}
.avatar-circle {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
background-color: $primary-color;
box-sizing: border-box;
outline: none;
color: white;
}
}

74
console/src/app/modules/card/card.component.scss
View File

@@ -1,44 +1,46 @@
.card {
margin: 1rem 0;
padding: 1.5rem;
border-radius: .5rem;
padding-top: 1rem;
margin: 1rem 0;
padding: 1.5rem;
border-radius: .5rem;
padding-top: 1rem;
.header {
&.bottom-margin {
margin-bottom: 1rem;
}
.header {
margin-top: 0;
.row {
display: flex;
justify-content: space-between;
align-items: center;
.title {
margin: 0;
font-weight: 400;
font-size: 18px;
}
.fill-space {
flex: 1;
}
.button {
margin-right: -.5rem;
}
}
.desc {
font-size: .9rem;
color: #8795a1;
}
&.bottom-margin {
margin-bottom: 1rem;
}
.card-content {
display: flex;
flex-direction: column;
width: 100%;
.row {
display: flex;
justify-content: space-between;
align-items: center;
.title {
margin: 0;
font-weight: 400;
font-size: 18px;
}
.fill-space {
flex: 1;
}
.button {
margin-right: -.5rem;
}
}
.desc {
font-size: .9rem;
color: #8795a1;
}
}
.card-content {
display: flex;
flex-direction: column;
width: 100%;
}
}

91
console/src/app/modules/card/card.scss
View File

@@ -1,51 +1,54 @@
@import '~@angular/material/theming';
@mixin card-theme($theme) {
$primary: map-get($theme, primary);
$primary-color: mat-color($primary, 500);
$primary-dark: mat-color($primary, A800);
$border-color: mat-color($primary, A700);
$border-selected-color: mat-color($primary, A600);
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-color: mat-color($primary, 500);
$primary-dark: mat-color($primary, A800);
$border-color: mat-color($primary, A700);
$border-selected-color: mat-color($primary, A600);
/* stylelint-enable */
.card {
background-color: $primary-dark;
transition: background-color .4s ease-in-out;
border: 1px solid rgba($border-color, .2);
box-sizing: border-box;
border-radius: .5rem;
outline: none;
.card {
background-color: $primary-dark;
transition: background-color .4s ease-in-out;
border: 1px solid rgba($border-color, .2);
box-sizing: border-box;
border-radius: .5rem;
outline: none;
.selection-icon {
opacity: 0;
position: absolute;
top: -12px;
left: -12px;
color: $border-color;
}
&.selected {
background-color: #ffffff25;
border: 1px solid $border-selected-color;
.text-part {
.icons {
opacity: 1;
}
}
.selection-icon {
color: $border-selected-color;
opacity: 1;
}
}
.iamuser {
color: $primary-color;
}
.edit-button {
&:hover {
color: $border-selected-color;
}
}
.selection-icon {
opacity: 0;
position: absolute;
top: -12px;
left: -12px;
color: $border-color;
}
&.selected {
background-color: #ffffff25;
border: 1px solid $border-selected-color;
.text-part {
.icons {
opacity: 1;
}
}
.selection-icon {
color: $border-selected-color;
opacity: 1;
}
}
.iamuser {
color: $primary-color;
}
.edit-button {
&:hover {
color: $border-selected-color;
}
}
}
}

5
console/src/app/modules/changes/changes.component.html
View File

@@ -1,8 +1,7 @@
<span class="header">{{ 'CHANGES.LISTTITLE' | translate }}</span>
<div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)"
[@cardAnimation]="data && (data | async)?.length">
<li class="item change-item-back" *ngFor="let event of data | async" @animate>
<div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)">
<li class="item change-item-back" *ngFor="let event of data | async">
<span class="seq">
{{event.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
</span>

97
console/src/app/modules/changes/changes.component.scss
View File

@@ -1,60 +1,61 @@
@import '~@angular/material/theming';
.header {
display: block;
margin-bottom: 1rem;
font-weight: 400;
margin-top: 1rem;
display: block;
margin-bottom: 1rem;
font-weight: 400;
margin-top: 1rem;
}
@mixin changes-theme($theme) {
.scroll-container {
max-height: 60vh;
overflow-y: scroll;
.scroll-container {
max-height: 60vh;
overflow-y: scroll;
.item {
box-sizing: border-box;
padding: .5rem;
margin: .25rem 0;
border-radius: .5rem;
display: flex;
flex-direction: column;
.item {
box-sizing: border-box;
padding: .5rem;
margin: .25rem 0;
border-radius: .5rem;
display: flex;
flex-direction: column;
.editor {
color: #8795a1;
font-size: 12px;
align-self: flex-end;
}
.seq {
color: #8795a1;
font-size: 12px;
align-self: flex-end;
}
.editor {
color: #8795a1;
font-size: 12px;
align-self: flex-end;
}
.desc {
overflow-x: auto;
font-size: 14px;
}
.seq {
color: #8795a1;
font-size: 12px;
align-self: flex-end;
}
$primary: map-get($theme, primary);
$primary-dark: mat-color($primary, A800);
&.change-item-back {
background-color: rgba($primary-dark, 0.93);
transition: background-color .4s ease-in-out;
}
}
.desc {
overflow-x: auto;
font-size: 14px;
}
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat-color($primary, A800);
/* stylelint-enable */
.sp-wrapper {
padding: .5rem;
display: flex;
justify-content: center;
}
.end-container {
font-size: 12px;
color: #8795a1;
}
&.change-item-back {
background-color: rgba($primary-dark, .93);
transition: background-color .4s ease-in-out;
}
}
}
.sp-wrapper {
padding: .5rem;
display: flex;
justify-content: center;
}
.end-container {
font-size: 12px;
color: #8795a1;
}
}
}

17
console/src/app/modules/changes/changes.component.ts
View File

@@ -1,4 +1,3 @@
import { animate, animateChild, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
import { Component, Input, OnInit } from '@angular/core';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, scan, take, tap } from 'rxjs/operators';
@@ -17,22 +16,6 @@ export enum ChangeType {
selector: 'app-changes',
templateUrl: './changes.component.html',
styleUrls: ['./changes.component.scss'],
animations: [
trigger('cardAnimation', [
transition('* => *', [
query('@animate', stagger('50ms', animateChild()), { optional: true }),
]),
]),
trigger('animate', [
transition(':enter', [
animate('.2s ease-in', keyframes([
style({ opacity: 0 }),
style({ opacity: .5, transform: 'scale(1.02)' }),
style({ opacity: 1, transform: 'scale(1)' }),
])),
]),
]),
],
})
export class ChangesComponent implements OnInit {
@Input() public changeType: ChangeType = ChangeType.USER;

2
console/src/app/modules/contributors/contributors.component.html
View File

@@ -3,7 +3,7 @@
<span class="sub-header">{{ description }}</span>
<div class="people">
<div class="img-list" [@cardAnimation]="totalResult">
<mat-spinner diameter="20" *ngIf="loading"></mat-spinner>
<mat-spinner class="spinner" diameter="20" *ngIf="loading"></mat-spinner>
<ng-container *ngIf="totalResult < 10; else compact">
<ng-container *ngFor="let member of membersSubject | async; index as i">

103
console/src/app/modules/contributors/contributors.component.scss
View File

@@ -1,67 +1,62 @@
.groups {
padding-top: 1rem;
padding-top: 1rem;
.header {
display: block;
margin-bottom: 1rem;
font-weight: 400;
.header {
display: block;
margin-bottom: 1rem;
font-weight: 400;
}
.sub-header {
font-size: .8rem;
color: #8795a1;
}
.people {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
.owner {
margin-right: 1rem;
}
.sub-header {
font-size: .8rem;
color: #8795a1;
}
.people {
.img-list {
width: 100%;
margin-top: .5rem;
margin-left: 1rem;
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
.owner {
margin-right: 1rem;
.spinner {
margin-left: -15px;
margin-right: 20px;
}
.img-list {
width: 100%;
margin-top: 0.5rem;
margin-left: 1rem;
.add-img {
float: left;
margin: 0 8px 0 -15px;
}
.avatar-circle {
float: left;
margin: 0 8px 0 -15px;
height: 32px;
width: 32px;
border-radius: 50%;
-webkit-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
-moz-box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
box-shadow: 2px 0 7px -1px rgba(33, 34, 36, .5);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
mat-spinner {
margin-left: -15px;
margin-right: 20px;
}
.avatar-circle {
float: left;
margin: 0 8px 0 -15px;
height: 32px;
width: 32px;
border-radius: 50%;
-webkit-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
-moz-box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
box-shadow: 2px 0px 7px -1px rgba(33,34,36,.5);
}
.add-img {
float: left;
margin: 0 8px 0 -15px;
}
.avatar-circle {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: indianred;
}
.margin-neg {
margin-left: -1rem;
}
.margin-neg {
margin-left: -1rem;
}
}
}
}

14
console/src/app/modules/detail-layout/detail-layout.component.html Normal file
View File

@@ -0,0 +1,14 @@
<div class="max-width-container detail-container">
<div class="detail-left">
<a *ngIf="backRouterLink" [routerLink]="backRouterLink" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
</div>
<div class="detail-right">
<div class="head">
<h1>{{ title }}</h1>
<p class="desc">{{ description }}</p>
<ng-content></ng-content>
</div>
</div>
</div>

58
console/src/app/modules/detail-layout/detail-layout.component.scss Normal file
View File

@@ -0,0 +1,58 @@
@import '~@angular/material/theming';
@mixin detail-layout-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-color: mat-color($primary, 500);
$primary-dark: mat-color($primary, A800);
/* stylelint-enable */
$lighter-color: rgba(mat-color($primary, 300), .5);
.detail-container {
display: flex;
padding-bottom: 3rem;
padding-top: 3rem;
.detail-left {
width: 100px;
display: flex;
padding: 1rem;
padding-top: 0;
justify-content: center;
a {
margin-top: 13px;
color: inherit;
}
}
.detail-right {
flex: 1;
position: relative;
padding-left: 1rem;
@media only screen and (max-width: 500px) {
flex-basis: 100%;
}
.head {
display: flex;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
}
}
}
}

25
console/src/app/modules/detail-layout/detail-layout.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DetailLayoutComponent } from './detail-layout.component';
describe('DetailLayoutComponent', () => {
let component: DetailLayoutComponent;
let fixture: ComponentFixture<DetailLayoutComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DetailLayoutComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DetailLayoutComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

13
console/src/app/modules/detail-layout/detail-layout.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component, Input } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-detail-layout',
templateUrl: './detail-layout.component.html',
styleUrls: ['./detail-layout.component.scss'],
})
export class DetailLayoutComponent {
@Input() backRouterLink!: RouterLink;
@Input() title: string | null = '';
@Input() description: string | null = '';
}

21
console/src/app/modules/detail-layout/detail-layout.module.ts Normal file
View File

@@ -0,0 +1,21 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { RouterModule } from '@angular/router';
import { DetailLayoutComponent } from './detail-layout.component';
@NgModule({
declarations: [DetailLayoutComponent],
imports: [
CommonModule,
MatIconModule,
RouterModule,
],
exports: [
DetailLayoutComponent,
],
})
export class DetailLayoutModule { }

136
console/src/app/modules/meta-layout/meta-layout.component.scss
View File

@@ -1,74 +1,74 @@
.meta-wrapper {
display: flex;
height: 100%;
overflow-x: hidden;
transition: all .2s ease-in-out;
display: flex;
height: 100%;
overflow-x: hidden;
transition: all .2s ease-in-out;
.main-content {
display: relative;
width: 100%;
overflow-y: auto;
.main-content {
display: relative;
width: 100%;
overflow-y: auto;
&.hidden {
flex-basis: 100%;
}
&.hidden {
flex-basis: 100%;
}
}
.meta {
position: relative;
flex: 1 0 300px;
padding: 1rem;
@media only screen and (min-width: 1500px) {
flex-basis: 400px;
}
.meta {
position: relative;
flex: 1 0 300px;
padding: 1rem;
@media only screen and (min-width: 1500px) {
flex-basis: 400px;
}
.meta-content {
max-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
}
&.hidden {
flex: 0 0 0 !important;
width: 0;
padding: 1px;
.hide {
transform: rotate(180deg);
visibility: visible;
opacity: 1;
}
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
}
.hide {
position: absolute;
left: -40px;
top: .5rem;
opacity: 0;
transition: all .3s ease-in-out;
i {
font-size: 1.5rem;
}
&:hover {
visibility: visible;
}
}
&:hover {
.hide {
opacity: 1;
}
}
.meta-content {
max-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
}
}
&.hidden {
flex: 0 0 0 !important;
width: 0;
padding: 1px;
.hide {
transform: rotate(180deg);
visibility: visible;
opacity: 1;
}
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
}
.hide {
position: absolute;
left: -40px;
top: .5rem;
opacity: 0;
transition: all .3s ease-in-out;
i {
font-size: 1.5rem;
}
&:hover {
visibility: visible;
}
}
&:hover {
.hide {
opacity: 1;
}
}
}
}

51
console/src/app/modules/meta-layout/meta.scss Normal file
View File

@@ -0,0 +1,51 @@
@import '~@angular/material/theming';
@mixin meta-theme($theme) {
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-color: mat-color($primary, 500);
$primary-dark: mat-color($primary, A800);
/* stylelint-enable */
$lighter-color: rgba(mat-color($primary, 300), .5);
.meta-wrapper {
.meta {
position: relative;
flex: 1 0 300px;
background: linear-gradient(to bottom right, rgba($lighter-color, .05) 20%, transparent 50%);
&.hidden {
background: linear-gradient(to bottom right, rgba($lighter-color, .05), transparent 50%);
}
&::after {
border-left: 2px solid $primary-color;
-webkit-border-image:
-webkit-gradient(
linear,
left top,
left bottom,
from($primary-color),
to($primary-dark),
color-stop(
01,
$primary-dark
)
) 50 21;
border-image:
-webkit-gradient(
linear,
left top,
left bottom,
from($primary-color),
to($primary-dark),
color-stop(
01,
$primary-dark
)
) 50 21;
}
}
}
}

42
console/src/app/modules/password-complexity-view/password-complexity-view.component.html Normal file
View File

@@ -0,0 +1,42 @@
<div class="validation-col" *ngIf="this.policy">
<div class="val" *ngIf="this.policy.minLength">
<i *ngIf="password?.value?.length == 0; else showSpinner" class="las la-times red"></i>
<ng-template #showSpinner>
<div *ngIf="(password?.errors?.minlength || password?.value?.length == 0) as currentError; else trueminlength"
class="sp-wrapper">
<mat-progress-spinner class="spinner" diameter="20" [color]="currentError ? 'warn': 'valid'"
mode="determinate" [value]="(password?.value?.length / policy.minLength) * 100">
</mat-progress-spinner>
</div>
</ng-template>
<ng-template #trueminlength>
<i class="las la-check green"></i>
</ng-template>
<span>{{ 'USER.PASSWORD.MINLENGTHERROR' | translate: {value: password?.value?.length} }}
({{password?.value?.length}}/{{ policy.minLength}})
</span>
</div>
<div class="val" *ngIf="this.policy.hasSymbol">
<i *ngIf="password?.errors?.symbolValidator" class="las la-times red"></i>
<i *ngIf="!password?.errors?.symbolValidator" class="las la-check green"></i>
<span> {{ 'USER.VALIDATION.SYMBOLERROR' | translate }}</span>
</div>
<div class="val" *ngIf="this.policy.hasNumber">
<i *ngIf="password?.errors?.numberValidator" class="las la-times red"></i>
<i *ngIf="!password?.errors?.numberValidator" class="las la-check green"></i>
<span> {{ 'USER.VALIDATION.NUMBERERROR' | translate }}</span>
</div>
<div class="val" *ngIf="this.policy.hasUppercase">
<i *ngIf="password?.errors?.upperCaseValidator" class="las la-times red"></i>
<i *ngIf="!password?.errors?.upperCaseValidator" class="las la-check green"></i>
<span> {{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}</span>
</div>
<div class="val" *ngIf="this.policy.hasLowercase">
<i *ngIf="password?.errors?.lowerCaseValidator" class="las la-times red"></i>
<i *ngIf="!password?.errors?.lowerCaseValidator" class="las la-check green"></i>
<span>{{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}</span>
</div>
</div>

53
console/src/app/modules/password-complexity-view/password-complexity-view.component.scss Normal file
View File

@@ -0,0 +1,53 @@
.validation-col {
display: flex wrap;
padding: 1rem 0;
width: 100%;
&.between {
margin: 0 .5rem;
}
.val {
display: flex;
align-items: center;
flex-basis: 50%;
padding: 2px 0;
span {
font-size: 14px;
color: #8795a1;
}
.sp-wrapper {
height: 20px;
width: 20px;
margin-right: 1rem;
i {
font-size: .9rem;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.spinner[color='valid'] {
color: #56a392;
}
}
i {
margin-right: 1rem;
font-size: 20px;
&.green {
color: #56a392;
}
&.red {
color: #f44336;
}
}
}
}

25
console/src/app/modules/password-complexity-view/password-complexity-view.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PasswordComplexityViewComponent } from './password-complexity-view.component';
describe('PasswordComplexityViewComponent', () => {
let component: PasswordComplexityViewComponent;
let fixture: ComponentFixture<PasswordComplexityViewComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [PasswordComplexityViewComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PasswordComplexityViewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

18
console/src/app/modules/password-complexity-view/password-complexity-view.component.ts Normal file
View File

@@ -0,0 +1,18 @@
import { Component, Input, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { PasswordComplexityPolicy } from 'src/app/proto/generated/management_pb';
@Component({
selector: 'app-password-complexity-view',
templateUrl: './password-complexity-view.component.html',
styleUrls: ['./password-complexity-view.component.scss'],
})
export class PasswordComplexityViewComponent implements OnInit {
@Input() public password!: FormControl;
@Input() public policy!: PasswordComplexityPolicy.AsObject;
constructor() { }
ngOnInit(): void {
}
}

22
console/src/app/modules/password-complexity-view/password-complexity-view.module.ts Normal file
View File

@@ -0,0 +1,22 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { TranslateModule } from '@ngx-translate/core';
import { PasswordComplexityViewComponent } from './password-complexity-view.component';
@NgModule({
declarations: [PasswordComplexityViewComponent],
imports: [
CommonModule,
MatProgressSpinnerModule,
TranslateModule,
FormsModule,
],
exports: [
PasswordComplexityViewComponent,
],
})
export class PasswordComplexityViewModule { }

202
console/src/app/modules/project-members/project-members.component.html
View File

@@ -1,108 +1,96 @@
<div class="container">
<div class="left">
<a *ngIf="project" [routerLink]="[ '/projects', project.projectId]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
</div>
<div class="right">
<div class="head">
<h1>{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
<p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
<app-detail-layout [backRouterLink]="[ '/projects', project.projectId]"
title="{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}"
description="{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}">
<app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
[selection]="selection" [loading]="dataSource?.loading$ | async">
<ng-template appHasRole actions
[appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
<button (click)="removeProjectMemberSelection()" color="warn"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole actions
[appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<div class="table-wrapper">
<table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="userId">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userId}} </td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline" *ngIf="project">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="([('project.member.write:' + project.projectId), 'project.member.write'] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ 'ROLES.'+role | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator *ngIf="dataSource" class="paginator background-style" #paginator [pageSize]="INITIALPAGESIZE"
[length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]" (page)="changePage($event)">
</mat-paginator>
</div>
<app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
[selection]="selection" [loading]="dataSource?.loading$ | async">
<ng-template appHasRole actions
[appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
<button (click)="removeProjectMemberSelection()" color="warn"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole actions
[appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<div class="table-wrapper">
<table mat-table class="background-style full-width-table" aria-label="Elements"
[dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="userId">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userId}} </td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline" *ngIf="project">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="([('project.member.write:' + project.projectId)] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ 'ROLES.'+role | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator *ngIf="dataSource" class="background-style" #paginator [pageSize]="INITIALPAGESIZE"
[length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]"
(page)="changePage($event)">
</mat-paginator>
</div>
</app-refresh-table>
</div>
</div>
</app-refresh-table>
</app-detail-layout>

110
console/src/app/modules/project-members/project-members.component.scss
View File

@@ -1,92 +1,50 @@
.container {
display: flex;
padding-bottom: 3rem;
.left {
width: 100px;
display: flex;
padding: 1rem;
justify-content: center;
a {
margin-top: .2rem;
}
}
.right {
flex: 1;
padding-top: 1rem;
padding-right: 1rem;
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
margin-bottom: 2rem;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
}
}
}
.icon-button {
margin-right: .5rem;
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
border-radius: .5rem;
}
.table-wrapper {
overflow: auto;
overflow-x: auto;
table, mat-paginator {
width: 100%;
.table,
.paginator {
width: 100%;
td, th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
td,
th {
padding: .5rem;
&:last-child {
padding-right: 0;
}
}
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
.pointer {
outline: none;
cursor: pointer;
outline: none;
cursor: pointer;
}

3
console/src/app/modules/project-members/project-members.module.ts
View File

@@ -16,13 +16,13 @@ import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
import { ProjectMembersRoutingModule } from './project-members-routing.module';
import { ProjectMembersComponent } from './project-members.component';
@NgModule({
declarations: [ProjectMembersComponent],
imports: [
@@ -46,6 +46,7 @@ import { ProjectMembersComponent } from './project-members.component';
TranslateModule,
HasRolePipeModule,
RefreshTableModule,
DetailLayoutModule,
MatDialogModule,
],
})

37
console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss
View File

@@ -1,25 +1,26 @@
.title {
font-size: 1.2rem;
}
.desc {
color: #8795a1;
font-size: .9rem;
font-size: 1.2rem;
}
.full-width, .formfield {
width: 100%;
.desc {
color: #8795a1;
font-size: .9rem;
}
.full-width,
.formfield {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
button {
border-radius: 0.5rem;
}
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: .5rem;
}
button {
border-radius: .5rem;
}
}

4
console/src/app/modules/project-roles/project-roles.component.html
View File

@@ -1,6 +1,6 @@
<app-refresh-table *ngIf="projectId" (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
[selection]="selection" [loading]="dataSource.loading$ | async">
<ng-template appHasRole [appHasRole]="['project.role.delete']" actions>
<ng-template appHasRole [appHasRole]="['project.role.delete', 'project.role.delete:' + projectId]" actions>
<button color="warn" class="icon-button" [disabled]="disabled"
matTooltip="{{'PROJECT.ROLE.DELETE' | translate}}" (click)="deleteSelectedRoles()" mat-icon-button
*ngIf="selection.hasValue() && actionsVisible">
@@ -15,7 +15,7 @@
</ng-template>
<div class="table-wrapper">
<table [dataSource]="dataSource" mat-table class="full-width-table" matSort aria-label="Elements">
<table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"

86
console/src/app/modules/project-roles/project-roles.component.scss
View File

@@ -1,57 +1,59 @@
.rounded-button {
border-radius: .5rem;
border-radius: .5rem;
}
.icon-button {
margin-right: .5rem;
margin-right: .5rem;
}
.table-wrapper {
overflow: auto;
overflow: auto;
table, mat-paginator {
width: 100%;
background-color: #2d2e30;
.table,
.paginator {
width: 100%;
background-color: #2d2e30;
td, th {
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
td,
th {
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.margin-neg {
margin-left: -1rem;
}
.role {
display: inline-block;
margin: .25rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.margin-neg {
margin-left: -1rem;
}
.role {
display: inline-block;
margin: .25rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
outline: none;
cursor: pointer;
}

2
console/src/app/modules/refresh-table/refresh-table.component.html
View File

@@ -10,7 +10,7 @@
</ng-container>
</div>
<span class="fill-space"></span>
<mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
<mat-spinner class="spinner" *ngIf="loading" diameter="20"></mat-spinner>
<button mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
<mat-icon>refresh</mat-icon>
</button>

43
console/src/app/modules/refresh-table/refresh-table.component.scss
View File

@@ -1,31 +1,32 @@
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
align-items: center;
flex-direction: column;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
.desc {
font-size: .8rem;
color: #8795a1;
}
mat-spinner {
margin-top: 2px;
margin-bottom: 1px;
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.spinner {
margin-top: 2px;
margin-bottom: 1px;
}
.icon-button {
margin-right: .5rem;
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
}

4
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.scss
View File

@@ -1,3 +1,3 @@
.full-width {
width: 100%;
}
width: 100%;
}

4
console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.scss
View File

@@ -1,3 +1,3 @@
.full-width {
width: 100%;
}
width: 100%;
}

2
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
View File

@@ -29,7 +29,7 @@
</mat-form-field>
<div *ngIf="target == UserTarget.EXTERNAL" class="line">
<mat-form-field appearance="outline">
<mat-form-field class="form-field" appearance="outline">
<mat-label>Global User Email</mat-label>
<input matInput type="text" [formControl]="globalEmailControl" />
</mat-form-field>

55
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
View File

@@ -1,47 +1,48 @@
.full-width {
width: 100%;
width: 100%;
}
.target-desc {
color: #8795a1;
font-size: .8rem;
margin: 0;
margin-bottom: 1rem;
color: #8795a1;
font-size: .8rem;
margin: 0;
margin-bottom: 1rem;
a {
color: #4072b4;
&:hover {
cursor: pointer;
color: #6992c9;
text-decoration: underline;
}
a {
color: #4072b4;
&:hover {
cursor: pointer;
color: #6992c9;
text-decoration: underline;
}
}
}
.line {
width: 100%;
display: flex;
width: 100%;
display: flex;
mat-form-field {
flex: 1;
}
.form-field {
flex: 1;
}
button {
margin-top: 1rem;
}
button {
margin-top: 1rem;
}
}
.sm-dlt {
cursor: pointer;
font-size: .8rem;
cursor: pointer;
font-size: .8rem;
}
.found-user-row {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.found-label {
font-size: .9rem;
color: #8795a1;
}
font-size: .9rem;
color: #8795a1;
}

33
console/src/app/modules/user-grants/user-grants-datasource.ts
View File

@@ -2,6 +2,7 @@ import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import {
SearchMethod,
UserGrant,
UserGrantSearchKey,
UserGrantSearchQuery,
@@ -60,14 +61,40 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
case UserGrantContext.OWNED_PROJECT:
if (data && data.projectId) {
this.loadingSubject.next(true);
const promise1 = this.userService.SearchProjectUserGrants(data.projectId, 10, 0, queries);
const projectfilter = new UserGrantSearchQuery();
projectfilter.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID);
projectfilter.setValue(data.projectId);
if (queries) {
queries.push(projectfilter);
} else {
queries = [projectfilter];
}
const promise1 = this.userService.SearchUserGrants(10, 0, queries);
this.loadResponse(promise1);
}
break;
case UserGrantContext.GRANTED_PROJECT:
if (data && data.grantId) {
if (data && data.grantId && data.projectId) {
this.loadingSubject.next(true);
const promise2 = this.userService.SearchProjectGrantUserGrants(data.grantId, 10, 0, queries);
const grantquery: UserGrantSearchQuery = new UserGrantSearchQuery();
grantquery.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_GRANT_ID);
grantquery.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
grantquery.setValue(data.grantId);
const projectfilter = new UserGrantSearchQuery();
projectfilter.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID);
projectfilter.setValue(data.projectId);
if (queries) {
queries.push(projectfilter);
queries.push(grantquery);
} else {
queries = [projectfilter, grantquery];
}
const promise2 = this.userService.SearchUserGrants(10, 0, queries);
this.loadResponse(promise2);
}
break;

6
console/src/app/modules/user-grants/user-grants.component.html
View File

@@ -10,7 +10,7 @@
</a>
<div class="table-wrapper">
<table mat-table multiTemplateDataRows class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
<table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -110,8 +110,8 @@
</tr>
</table>
<mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="50" [length]="dataSource.totalResult"
[pageSizeOptions]="[2, 3, 25, 50, 100, 250]" (page)="changePage($event)">
<mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="50"
[length]="dataSource.totalResult" [pageSizeOptions]="[2, 3, 25, 50, 100, 250]" (page)="changePage($event)">
</mat-paginator>
</div>
</app-refresh-table>

64
console/src/app/modules/user-grants/user-grants.component.scss
View File

@@ -1,47 +1,49 @@
.add-button {
border-radius: .5rem;
border-radius: .5rem;
}
.table-wrapper {
overflow: auto;
overflow: auto;
table, mat-paginator {
width: 100%;
background-color: #2d2e30;
.table,
.paginator {
width: 100%;
background-color: #2d2e30;
td, th {
padding-left: .5rem;
padding-right: .5rem;
td,
th {
padding-left: .5rem;
padding-right: .5rem;
&:first-child {
padding-left: 0;
padding-right: .5rem;
}
&:first-child {
padding-left: 0;
padding-right: .5rem;
}
&:last-child {
padding-right: 0;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
&:last-child {
padding-right: 0;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
outline: none;
cursor: pointer;
}
.no-roles {
font-size: 14px;
color: #8795a1;
}
font-size: 14px;
color: #8795a1;
}

19
console/src/app/modules/user-grants/user-grants.component.ts
View File

@@ -4,7 +4,14 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { ProjectRoleView, UserGrant, UserGrantView } from 'src/app/proto/generated/management_pb';
import {
ProjectRoleView,
SearchMethod,
UserGrant,
UserGrantSearchKey,
UserGrantSearchQuery,
UserGrantView,
} from 'src/app/proto/generated/management_pb';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -137,7 +144,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
switch (this.context) {
case UserGrantContext.OWNED_PROJECT:
if (grant.id && grant.projectId) {
this.userService.UpdateProjectUserGrant(grant.id, grant.projectId, grant.userId, selectionChange.value)
this.userService.UpdateUserGrant(grant.id, grant.userId, selectionChange.value)
.then(() => {
this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
}).catch(error => {
@@ -147,8 +154,12 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
break;
case UserGrantContext.GRANTED_PROJECT:
if (this.grantId && this.projectId) {
this.userService.updateProjectGrantUserGrant(grant.id,
this.grantId, grant.userId, selectionChange.value)
const projectQuery: UserGrantSearchQuery = new UserGrantSearchQuery();
projectQuery.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID);
projectQuery.setMethod(SearchMethod.SEARCHMETHOD_EQUALS);
projectQuery.setValue(this.projectId);
this.userService.UpdateUserGrant(
grant.id, grant.userId, selectionChange.value)
.then(() => {
this.toast.showInfo('GRANTS.TOAST.UPDATED', true);
}).catch(error => {

30
console/src/app/modules/warn-dialog/warn-dialog.component.scss
View File

@@ -1,25 +1,25 @@
.title {
font-size: 1.2rem;
margin-top: 0;
font-size: 1.2rem;
margin-top: 0;
}
.desc {
color: #8795a1;
font-size: .9rem;
color: #8795a1;
font-size: .9rem;
}
.action {
display: flex;
display: flex;
.ok-button {
margin-left: 0.5rem;
}
.ok-button {
margin-left: .5rem;
}
.fill-space {
flex: 1;
}
.fill-space {
flex: 1;
}
button {
border-radius: 0.5rem;
}
}
button {
border-radius: .5rem;
}
}

5
console/src/app/pages/home/home.component.html
View File

@@ -79,13 +79,14 @@
<app-card class="item">
<div class="top">
<h2>
<i class="las la-crosshairs"></i>
<i class="las la-users"></i>
{{'HOME.USERS'| translate}}</h2>
<p>{{'HOME.USERS_DESC'| translate}}</p>
</div>
<span class="fill-space"></span>
<div class="footer">
<a color="primary" mat-button [routerLink]="['/users/all']">{{'HOME.USERS_BUTTON' | translate}}</a>
<a color="primary" mat-stroked-button
[routerLink]="['/users/all']">{{'HOME.USERS_BUTTON' | translate}}</a>
</div>
</app-card>
</ng-template>

148
console/src/app/pages/home/home.component.scss
View File

@@ -1,80 +1,82 @@
.wrapper {
padding-bottom: 100px;
.header {
display: flex;
flex-direction: column;
margin: 4rem 0;
padding-bottom: 100px;
.header {
display: flex;
flex-direction: column;
margin: 4rem 0;
align-items: center;
h3 {
font-size: 24px;
margin-bottom: 1rem;
text-align: center;
}
.wlc_stnce {
color: #8795a1;
font-size: 16px;
}
.avatar {
outline: none;
cursor: pointer;
}
}
.container {
display: flex;
flex-wrap: wrap;
margin: -1rem;
justify-content: space-evenly;
.item {
flex: 1 1 45%;
margin: 0 1rem;
display: flex;
flex-direction: column;
.top {
h2 {
margin-top: .5rem;
display: flex;
align-items: center;
}
p {
display: block;
color: #8795a1;
font-size: .9rem;
}
i {
font-size: 2.5rem;
margin-right: 1rem;
transition: color .1s;
}
}
.fill-space {
flex: 1;
}
.footer {
display: flex;
align-items: center;
border-top: 1px solid #ffffff20;
padding-top: 1rem;
h3 {
font-size: 24px;
margin-bottom: 1rem;
a {
border-radius: .5rem;
}
.wlc_stnce {
color: #8795a1;
font-size: 16px;
}
.avatar {
outline: none;
cursor: pointer;
}
}
.container {
display: flex;
flex-wrap: wrap;
margin: -1rem;
justify-content: space-evenly;
.item {
flex: 1 1 45%;
margin: 0 1rem;
display: flex;
flex-direction: column;
.top {
h2 {
margin-top: .5rem;
display: flex;
align-items: center;
}
p {
display: block;
color: #8795a1;
font-size: .9rem;
}
i{
font-size: 2.5rem;
margin-right: 1rem;
transition: color .1s;
}
}
.fill-space {
flex: 1;
}
.footer {
display: flex;
align-items: center;
border-top: 1px solid #ffffff20;
padding-top: 1rem;
a {
border-radius: .5rem;
}
}
}
}
.disclaimer {
color: #8795a1;
font-size: 14px;
margin-top: 3rem;
}
}
}
.disclaimer {
color: #8795a1;
font-size: 14px;
margin-top: 3rem;
}
}

192
console/src/app/pages/iam/iam-members/iam-members.component.html
View File

@@ -1,105 +1,91 @@
<div class="max-width-container">
<div class="container">
<div class="left">
<a [routerLink]="[ '/iam']" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
<app-detail-layout [backRouterLink]="[ '/iam']" title="{{ 'IAM.MEMBER.TITLE' | translate }}"
description="{{ 'IAM.MEMBER.DESCRIPTION' | translate }}">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['iam.member.delete']">
<button color="warn" (click)="removeProjectMemberSelection()"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['iam.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
<div class="right">
<div class="head">
<h1>{{ 'IAM.MEMBER.TITLE' | translate }}</h1>
<p class="desc">{{ 'IAM.MEMBER.DESCRIPTION' | translate }}</p>
</div>
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['iam.member.delete']">
<button color="warn" (click)="removeProjectMemberSelection()"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['org.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="background-style full-width-table" aria-label="Elements"
[dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
<span class="role app-label" *ngFor="let role of member.rolesList; index as i">
{{ 'ROLES.'+role | translate }}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="background-style" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</div>
</ng-template>
</div>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
<span class="role app-label" *ngFor="let role of member.rolesList; index as i">
{{ 'ROLES.'+role | translate }}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="background-style paginator" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-detail-layout>

158
console/src/app/pages/iam/iam-members/iam-members.component.scss
View File

@@ -1,123 +1,87 @@
.container {
display: flex;
padding-bottom: 3rem;
.left {
width: 100px;
display: flex;
padding: 1rem;
justify-content: center;
a {
margin-top: .2rem;
}
}
.right {
flex: 1;
padding-top: 1rem;
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
margin-bottom: 2rem;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
}
}
}
.table-header-row {
display: flex;
align-items: center;
width: 100%;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
flex: 1;
}
.icon-button {
margin-right: .5rem;
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
border-radius: .5rem;
}
}
.table-wrapper {
overflow: auto;
overflow: auto;
width: 100%;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
.table,
.paginator {
width: 100%;
td,
th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
table, mat-paginator {
width: 100%;
td, th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
outline: none;
cursor: pointer;
}

2
console/src/app/pages/iam/iam-members/iam-members.module.ts
View File

@@ -13,6 +13,7 @@ import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { IamMembersRoutingModule } from './iam-members-routing.module';
import { IamMembersComponent } from './iam-members.component';
@@ -22,6 +23,7 @@ import { IamMembersComponent } from './iam-members.component';
declarations: [IamMembersComponent],
imports: [
IamMembersRoutingModule,
DetailLayoutModule,
CommonModule,
MatAutocompleteModule,
MatChipsModule,

4
console/src/app/pages/iam/iam-views/iam-views.component.html
View File

@@ -11,7 +11,7 @@
<mat-spinner diameter="50"></mat-spinner>
</div>
<table *ngIf="dataSource" [dataSource]="dataSource" mat-table class="full-width-table background-style" matSort
<table *ngIf="dataSource" [dataSource]="dataSource" mat-table class="table background-style" matSort
aria-label="Elements">
<ng-container matColumnDef="viewName">
<th mat-header-cell mat-sort-header *matHeaderCellDef> {{ 'IAM.VIEWS.VIEWNAME' | translate }} </th>
@@ -50,6 +50,6 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="background-style" #paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 100, 250]">
<mat-paginator class="paginator background-style" #paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 100, 250]">
</mat-paginator>
</div>

108
console/src/app/pages/iam/iam-views/iam-views.component.scss
View File

@@ -1,62 +1,66 @@
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
}
.table-wrapper {
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
justify-content: center;
}
.table-wrapper {
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
.table,
.paginator {
width: 100%;
td,
th {
padding: 0 1rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
table, mat-paginator {
width: 100%;
td, th {
padding: 0 1rem;
&:last-child {
padding-right: 0;
}
}
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.selection {
width: 50px;
max-width: 50px;
}
}
.pointer {
outline: none;
cursor: pointer;
}
}
.pointer {
outline: none;
cursor: pointer;
}

2
console/src/app/pages/iam/iam.component.html
View File

@@ -1,6 +1,6 @@
<app-meta-layout>
<div class="enlarged-container">
<h1>{{'IAM.DETAIL.TITLE' | translate}}</h1>
<h1 class="h1">{{'IAM.DETAIL.TITLE' | translate}}</h1>
<p class="sub">{{'IAM.DETAIL.DESCRIPTION' | translate}} </p>
<app-card title="{{ 'IAM.VIEWS.TITLE' | translate }}" description="{{ 'IAM.VIEWS.DESCRIPTION' | translate }}">

152
console/src/app/pages/iam/iam.component.scss
View File

@@ -1,150 +1,16 @@
h1 {
margin-top: 0;
.h1 {
margin-top: 0;
}
.sub {
color: #8795a1;
margin-bottom: 2rem;
}
.state-label {
font-size: .9rem;
color: #8795a1;
margin-bottom: .5rem;
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
mat-form-field {
flex: 1 1 33%;
margin: 0 .5rem;
}
}
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.domain {
display: flex;
align-items: center;
padding: .5rem 0;
flex-wrap: wrap;
.title {
font-size: 16px;
margin-right: 1rem;
}
.verified, .primary{
color: #5282c1;
margin-right: 1rem;
}
.fill-space {
flex: 1;
}
}
.new-desc {
font-size: 14px;
color: #818a8a;
}
.new-row {
display: flex;
flex-wrap: wrap;
align-items: center;
mat-form-field {
flex: 1;
}
color: #8795a1;
margin-bottom: 2rem;
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: 0.5rem;
align-items: center;
button {
display: none;
visibility: hidden;
}
&:hover {
button {
display: inline-block;
visibility: visible;
mat-icon {
font-size: 1.2rem;
}
}
}
.first {
flex: 1;
font-size: 0.8rem;
margin-right: 0.5rem;
}
.fill-space {
flex: 1;
}
.second {
font-size: 0.8rem;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
text-align: right;
}
a {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
.side-section {
color: #8795a1;
}
}
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
}
}

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

@@ -51,38 +51,38 @@
<h1>{{'ORG.PAGES.ORGDETAILUSER_TITLE' | translate}}</h1>
<div class="user">
<form [formGroup]="userForm" (ngSubmit)="finish()" class="form">
<form [formGroup]="userForm" class="form">
<div class="content">
<p class="section">{{ 'USER.CREATE.NAMEANDEMAILSECTION' | translate }}</p>
<mat-form-field class="formfield">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'USER.PROFILE.USERNAME' | translate }}</mat-label>
<input matInput formControlName="userName" required />
<mat-error *ngIf="userName?.invalid && userName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'USER.PROFILE.EMAIL' | translate }}</mat-label>
<input matInput formControlName="email" required />
<mat-error *ngIf="email?.invalid && email?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</mat-label>
<input matInput formControlName="firstName" required />
<mat-error *ngIf="firstName?.invalid && firstName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</mat-label>
<input matInput formControlName="lastName" required />
<mat-error *ngIf="lastName?.invalid && lastName?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</mat-label>
<input matInput formControlName="nickName" />
<mat-error *ngIf="nickName?.invalid && nickName?.errors?.required">
@@ -92,7 +92,7 @@
<p class="section">{{ 'USER.CREATE.GENDERLANGSECTION' | translate }}</p>
<mat-form-field class="formfield">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'USER.PROFILE.GENDER' | translate }}</mat-label>
<mat-select formControlName="gender">
<mat-option *ngFor="let gender of genders" [value]="gender">
@@ -103,7 +103,7 @@
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</mat-label>
<mat-select formControlName="preferredLanguage">
<mat-option *ngFor="let language of languages" [value]="language">
@@ -115,73 +115,49 @@
</mat-select>
</mat-form-field>
<mat-checkbox [(ngModel)]="usePassword" [ngModelOptions]="{standalone: true}"
<mat-checkbox class="checkbox" [(ngModel)]="usePassword" [ngModelOptions]="{standalone: true}"
(change)="initPwdValidators()">
{{'ORG.PAGES.USEPASSWORD' | translate}}</mat-checkbox>
<ng-container *ngIf="usePassword">
<ng-container *ngIf="usePassword && pwdForm">
<p class="section">{{ 'USER.CREATE.PASSWORDSECTION' | translate }}</p>
<mat-form-field class="formfield" *ngIf="password">
<mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
<input autocomplete="off" name="firstpassword" matInput formControlName="password"
type="password" />
<app-password-complexity-view [policy]="this.policy" [password]="password">
</app-password-complexity-view>
<mat-error *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
<mat-error *ngIf="password?.errors?.symbolValidator">
{{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
</mat-error>
<mat-error *ngIf="password?.errors?.numberValidator">
{{ 'USER.VALIDATION.NUMBERERROR' | translate }}
</mat-error>
<mat-error *ngIf="password?.errors?.upperCaseValidator">
{{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
</mat-error>
<mat-error *ngIf="password?.errors?.lowerCaseValidator">
{{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
</mat-error>
<mat-error *ngIf="password?.errors?.minlength">
{{ 'USER.VALIDATION.MINLENGTH' | translate:password?.errors?.minlength }}
</mat-error>
</mat-form-field>
<mat-form-field class="formfield" *ngIf="confirmPassword">
<mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
<input autocomplete="off" name="confirmPassword" matInput formControlName="confirmPassword"
type="password" />
<form [formGroup]="pwdForm" class="form">
<mat-form-field class="formfield" *ngIf="password" appearance="outline">
<mat-label>{{ 'USER.PASSWORD.NEW' | translate }}</mat-label>
<input autocomplete="off" name="firstpassword" matInput formControlName="password"
type="password" />
<mat-error *ngIf="password?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
<mat-error *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
<mat-error *ngIf="confirmPassword?.errors?.symbolValidator">
{{ 'USER.VALIDATION.SYMBOLERROR' | translate }}
</mat-error>
<mat-error *ngIf="confirmPassword?.errors?.numberValidator">
{{ 'USER.VALIDATION.NUMBERERROR' | translate }}
</mat-error>
<mat-error *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</mat-error>
<mat-error *ngIf="confirmPassword?.errors?.upperCaseValidator">
{{ 'USER.VALIDATION.UPPERCASEMISSING' | translate }}
</mat-error>
<mat-error *ngIf="confirmPassword?.errors?.lowerCaseValidator">
{{ 'USER.VALIDATION.LOWERCASEMISSING' | translate }}
</mat-error>
<mat-error *ngIf="confirmPassword?.errors?.minlength">
{{ 'USER.VALIDATION.MINLENGTH' | translate:confirmPassword?.errors?.minlength }}
</mat-error>
</mat-form-field>
</mat-form-field>
<mat-form-field class="formfield" *ngIf="confirmPassword" appearance="outline">
<mat-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</mat-label>
<input autocomplete="off" name="confirmPassword" matInput
formControlName="confirmPassword" type="password" />
<mat-error *ngIf="confirmPassword?.errors?.required">
{{ 'USER.VALIDATION.REQUIRED' | translate }}
</mat-error>
<mat-error *ngIf="confirmPassword?.errors?.notequal">
{{ 'USER.PASSWORD.NOTEQUAL' | translate }}
</mat-error>
</mat-form-field>
</form>
</ng-container>
</div>
<div class="btn-container">
<button color="primary" class="small-button" type="button" (click)="previous()"
mat-stroked-button>{{ 'ACTIONS.BACK' | translate }}</button>
<span class="fill-space"></span>
<button color="primary" class="big-button" [disabled]="orgForm.invalid || userForm.invalid"
type="submit" mat-raised-button>{{ 'ACTIONS.FINISH' | translate }}</button>
<button color="primary" class="big-button" (click)="finish()"
[disabled]="orgForm.invalid || userForm.invalid || ((usePassword && pwdForm) ? pwdForm?.invalid : false)"
mat-raised-button>{{ 'ACTIONS.FINISH' | translate }}</button>
</div>
</form>
</div>

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

@@ -1,150 +1,158 @@
h1 {
font-weight: 500;
font-weight: 500;
}
.container {
padding: 4rem 4rem 2rem 4rem;
padding: 4rem 4rem 2rem 4rem;
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
@media only screen and (max-width: 450px) {
padding: 4rem 1rem 2rem 1rem;
}
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
mat-form-field {
flex: 1 1 33%;
margin: 0 .5rem;
}
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.desc {
color: #8795a1;
font-size: .9rem;
margin: 1rem 0;
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
.formfield {
flex: 1 1 33%;
margin: 0 .5rem;
}
}
.desc {
color: #8795a1;
font-size: .9rem;
margin: 1rem 0;
}
}
.margin-right {
margin-right: 0.5rem;
margin-right: .5rem;
}
.user {
flex: 1;
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
flex: 1;
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
a {
display: block;
}
.form {
padding-top: 1rem;
.btn-container {
display: flex;
justify-content: flex-end;
.continue-button {
margin-top: 3rem;
display: block;
padding: 0.5rem 4rem;
border-radius: 0.5rem;
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
.section {
padding: .5rem;
flex-basis: 100%;
color: #8795a1;
font-size: .9rem;
}
&.nowrap{
flex-wrap: nowrap;
}
mat-form-field {
flex: 1 0 33%;
margin: 0 .5rem;
}
}
h1 {
font-size: 2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
}
.form {
padding-top: 1rem;
.btn-container {
display: flex;
justify-content: flex-end;
.continue-button {
margin-top: 3rem;
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
.section {
padding: .5rem;
flex-basis: 100%;
color: #8795a1;
font-size: .9rem;
}
&.nowrap {
flex-wrap: nowrap;
}
.formfield {
flex: 1 0 33%;
margin: 0 .5rem;
}
}
}
}
.column {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
.formfield {
width: 400px;
input {
font-size: 1.5rem;
}
.formfield {
width: 400px;
&.autocomplete {
margin-top: 1rem;
}
input {
font-size: 1.5rem;
}
&.autocomplete {
margin-top: 1rem;
}
}
}
.btn-container {
display: flex;
align-items: center;
margin-top: 3rem;
display: flex;
align-items: center;
margin-top: 3rem;
.small-button {
display: block;
border-radius: 0.5rem;
}
.small-button {
display: block;
border-radius: .5rem;
}
.fill-space {
flex: 1;
}
.fill-space {
flex: 1;
}
.big-button {
display: block;
padding: 0.5rem 4rem;
border-radius: 0.5rem;
}
.big-button {
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
}
}
mat-checkbox {
flex-basis: 100%;
margin: .5rem;
}
.checkbox {
flex-basis: 100%;
margin: .5rem;
}

60
console/src/app/pages/orgs/org-create/org-create.component.ts
View File

@@ -1,7 +1,7 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { Location } from '@angular/common';
import { Component } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { lowerCaseValidator, numberValidator, symbolValidator, upperCaseValidator } from 'src/app/pages/validators';
import { CreateOrgRequest, CreateUserRequest, Gender, OrgSetUpResponse } from 'src/app/proto/generated/admin_pb';
@@ -49,6 +49,7 @@ function passwordConfirmValidator(c: AbstractControl): any {
export class OrgCreateComponent {
public orgForm!: FormGroup;
public userForm!: FormGroup;
public pwdForm!: FormGroup;
public genders: Gender[] = [Gender.GENDER_FEMALE, Gender.GENDER_MALE, Gender.GENDER_UNSPECIFIED];
public languages: string[] = ['de', 'en'];
@@ -90,7 +91,6 @@ export class OrgCreateComponent {
registerUserRequest.setGender(this.gender?.value);
registerUserRequest.setPassword(this.password?.value);
registerUserRequest.setPreferredLanguage(this.preferredLanguage?.value);
this.adminService
.SetUpOrg(createOrgRequest, registerUserRequest)
.then((data: OrgSetUpResponse) => {
@@ -109,42 +109,24 @@ export class OrgCreateComponent {
this.currentCreateStep--;
}
private initForm(pwdValidators?: Validators[]): void {
if (pwdValidators) {
console.log('init with pwd');
this.userForm = this.fb.group({
userName: ['', [Validators.required]],
firstName: ['', [Validators.required]],
lastName: ['', [Validators.required]],
email: ['', [Validators.required]],
gender: [''],
nickName: [''],
preferredLanguage: [''],
password: ['', [...pwdValidators]],
confirmPassword: ['', [...pwdValidators, passwordConfirmValidator]],
});
} else {
console.log('init without pwd');
this.userForm = this.fb.group({
userName: ['', [Validators.required]],
firstName: ['', [Validators.required]],
lastName: ['', [Validators.required]],
email: ['', [Validators.required]],
gender: [''],
nickName: [''],
preferredLanguage: [''],
});
}
private initForm(): void {
this.userForm = this.fb.group({
userName: ['', [Validators.required]],
firstName: ['', [Validators.required]],
lastName: ['', [Validators.required]],
email: ['', [Validators.required]],
gender: [''],
nickName: [''],
preferredLanguage: [''],
});
}
public initPwdValidators(): void {
const validators: Validators[] = [Validators.required];
console.log(this.usePassword);
if (this.usePassword) {
this.orgService.GetDefaultPasswordComplexityPolicy().then(data => {
this.policy = data.toObject();
console.log(this.policy);
if (this.policy.minLength) {
validators.push(Validators.minLength(this.policy.minLength));
@@ -162,10 +144,20 @@ export class OrgCreateComponent {
validators.push(symbolValidator);
}
this.initForm(validators);
// this.initForm(validators);
const pwdValidators = [...validators] as ValidatorFn[];
const confirmPwdValidators = [...validators, passwordConfirmValidator] as ValidatorFn[];
this.pwdForm = this.fb.group({
password: ['', pwdValidators],
confirmPassword: ['', confirmPwdValidators],
});
});
} else {
this.initForm();
this.pwdForm = this.fb.group({
password: ['', []],
confirmPassword: ['', []],
});
}
}
@@ -206,11 +198,11 @@ export class OrgCreateComponent {
}
public get password(): AbstractControl | null {
return this.userForm.get('password');
return this.pwdForm.get('password');
}
public get confirmPassword(): AbstractControl | null {
return this.userForm.get('confirmPassword');
return this.pwdForm.get('confirmPassword');
}
public close(): void {

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

@@ -8,6 +8,7 @@ import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { PasswordComplexityViewModule } from 'src/app/modules/password-complexity-view/password-complexity-view.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
import { OrgCreateRoutingModule } from './org-create-routing.module';
@@ -28,6 +29,7 @@ import { OrgCreateComponent } from './org-create.component';
HasRolePipeModule,
TranslateModule,
MatCheckboxModule,
PasswordComplexityViewModule,
],
})
export class OrgCreateModule { }

2
console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.html
View File

@@ -2,7 +2,7 @@
<div mat-dialog-content>
<p class="desc"> {{'ORG.DOMAINS.ADD.DESCRIPTION' | translate}}</p>
<mat-form-field label="Domain" required="true">
<mat-form-field label="Domain" required="true" class="form-field">
<mat-label>Domain</mat-label>
<input matInput [(ngModel)]="newdomain" />
</mat-form-field>

30
console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.scss
View File

@@ -1,26 +1,26 @@
.title {
font-size: 1.2rem;
margin-top: 0;
font-size: 1.2rem;
margin-top: 0;
}
.desc {
color: #8795a1;
font-size: .9rem;
color: #8795a1;
font-size: .9rem;
}
mat-form-field {
width: 100%;
.form-field {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
.ok-button {
margin-left: .5rem;
}
button {
border-radius: 0.5rem;
}
}
button {
border-radius: .5rem;
}
}

5
console/src/app/pages/orgs/org-detail/org-detail.component.html
View File

@@ -1,8 +1,7 @@
<app-meta-layout>
<div class="enlarged-container">
<h1>{{org?.name}}</h1>
<p class="sub">{{'ORG_DETAIL.DESCRIPTION' | translate}}
</p>
<h1 class="h1">{{org?.name}}</h1>
<p class="sub">{{'ORG_DETAIL.DESCRIPTION' | translate}}</p>
<app-card title="{{ 'ORG.DOMAINS.TITLE' | translate }}"
description="{{ 'ORG.DOMAINS.DESCRIPTION' | translate }}">
<div *ngFor="let domain of domains" class="domain">

169
console/src/app/pages/orgs/org-detail/org-detail.component.scss
View File

@@ -1,140 +1,63 @@
h1 {
margin-top: 0;
.h1 {
margin-top: 0;
}
.sub {
color: #8795a1;
margin-bottom: 2rem;
}
.state-label {
font-size: .9rem;
color: #8795a1;
margin-bottom: .5rem;
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
mat-form-field {
flex: 1 1 33%;
margin: 0 .5rem;
}
}
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
color: #8795a1;
margin-bottom: 2rem;
}
.domain {
display: flex;
align-items: center;
padding: .5rem 0;
flex-wrap: wrap;
display: flex;
align-items: center;
padding: .5rem 0;
flex-wrap: wrap;
.title {
font-size: 16px;
margin-right: 1rem;
}
.title {
font-size: 16px;
margin-right: 1rem;
}
.verified,
.primary {
color: #5282c1;
margin-right: 1rem;
}
.verified, .primary{
color: #5282c1;
margin-right: 1rem;
}
.fill-space {
flex: 1;
}
.fill-space {
flex: 1;
}
}
.new-desc {
font-size: 14px;
color: #818a8a;
font-size: 14px;
color: #818a8a;
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: 0.5rem;
align-items: center;
button {
display: none;
visibility: hidden;
}
&:hover {
button {
display: inline-block;
visibility: visible;
mat-icon {
font-size: 1.2rem;
}
}
}
.first {
flex: 1;
font-size: 0.8rem;
margin-right: 0.5rem;
}
.fill-space {
flex: 1;
}
.second {
font-size: 0.8rem;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
text-align: right;
}
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
a {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
.row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.side-section {
color: #8795a1;
}
}
}
.first {
flex: 1;
font-size: .8rem;
margin-right: .5rem;
}
.second {
font-size: .8rem;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
text-align: right;
}
}
}
}

436
console/src/app/pages/orgs/org-grid/org-grid.component.scss
View File

@@ -1,243 +1,251 @@
h1 {
margin-top: 0;
margin-top: 0;
}
.top-desc {
color: #8795a1;
color: #8795a1;
}
.view-toggle {
width: 100%;
width: 100%;
display: flex;
justify-content: flex-end;
padding-bottom: .5rem;
border-bottom: 1px solid #2d2e30;
.anim-list {
display: flex;
justify-content: flex-end;
padding-bottom: .5rem;
border-bottom: 1px solid #2d2e30;
align-items: center;
}
.anim-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
button {
&.left-button {
margin-right: 1rem;
}
button {
&.left-button {
margin-right: 1rem;
}
}
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
box-sizing: border-box;
.item {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 230px;
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
text-decoration: none;
overflow: hidden;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1rem;
border-radius: .5rem;
box-sizing: border-box;
min-height: 130px;
.item {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 230px;
display: flex;
text-decoration: none;
overflow: hidden;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
min-height: 130px;
* {
box-sizing: border-box;
}
&.active {
border: 2px solid #38649d;
}
.selection-icon {
opacity: 0;
position: absolute;
top: -12px;
left: -12px;
}
img {
height: 50px;
width: 50px;
margin: 1rem;
}
.text-part {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
// justify-content: center;
min-height: 70px;
padding: 0.5rem 0;
.top {
font-size: 0.8rem;
margin-bottom: 0;
margin-top: .5rem;
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.description {
font-size: 0.8rem;
margin-top: .5rem;
}
.created {
font-size: 0.8rem;
}
.organization {
display: flex;
align-items: center;
margin-top: 1rem;
.org_avatar {
height: 25px;
width: 25px;
border-radius: 50%;
margin: 0;
margin-right: 1rem;
}
}
.fill-space {
flex: 1;
}
.icons {
margin-top: 1rem;
transition: all 0.3s;
display: flex;
align-items: center;
.current {
height: 10px;
font-size: 14px;
width: 10px;
border-radius: 50%;
background-color: rgb(144,212,210);
display: flex;
margin: .5rem 0;
align-items: center;
box-sizing: border-box;
span {
margin-left: 1.5rem;
text-transform: uppercase;
color: rgb(144,212,210);
}
}
.icon {
opacity: 0;
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #8795a1;
}
}
}
.edit-button {
opacity: 0;
user-select: none;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: 0.25rem;
color: #8795a1;
&:hover {
opacity: 1;
color: white;
}
&.selected {
opacity: 1;
}
}
&:hover {
.edit-button {
opacity: 1;
}
.text-part {
.icons {
.icon {
opacity: 1;
}
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
}
* {
box-sizing: border-box;
}
.add-org-button {
z-index: 100;
flex-basis: 230px;
cursor: pointer;
&.active {
border: 2px solid #38649d;
}
.selection-icon {
opacity: 0;
position: absolute;
top: -12px;
left: -12px;
}
img {
height: 50px;
width: 50px;
margin: 1rem;
}
.text-part {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
// justify-content: center;
min-height: 70px;
padding: .5rem 0;
.top {
font-size: .8rem;
margin-bottom: 0;
margin-top: .5rem;
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: .5rem;
}
.description {
font-size: .8rem;
margin-top: .5rem;
}
.created {
font-size: .8rem;
}
.organization {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 130px;
border-radius: 0.5rem;
margin: 1rem;
box-sizing: border-box;
margin-top: 1rem;
.org_avatar {
height: 25px;
width: 25px;
border-radius: 50%;
margin: 0;
margin-right: 1rem;
}
}
.fill-space {
flex: 1;
}
.icons {
margin-top: 1rem;
transition: all .3s;
display: flex;
align-items: center;
.current {
height: 10px;
font-size: 14px;
width: 10px;
border-radius: 50%;
background-color: rgb(144, 212, 210);
display: flex;
margin: .5rem 0;
align-items: center;
box-sizing: border-box;
span {
margin-left: 1.5rem;
text-transform: uppercase;
color: rgb(144, 212, 210);
}
}
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
&:hover {
background-color: #ffffff25;
.icon,
span {
&.disabled {
color: gray;
}
}
opacity: 0;
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #8795a1;
}
}
}
.edit-button {
opacity: 0;
user-select: none;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: .25rem;
color: #8795a1;
&:hover {
opacity: 1;
color: white;
}
&.selected {
opacity: 1;
}
}
&:hover {
.edit-button {
opacity: 1;
}
.text-part {
.icons {
.icon {
opacity: 1;
}
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
.add-org-button {
z-index: 100;
flex-basis: 230px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 130px;
border-radius: .5rem;
margin: 1rem;
box-sizing: border-box;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
&:hover {
background-color: #ffffff25;
.icon,
span {
&.disabled {
color: gray;
}
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
}
.n-items {
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
flex-basis: 100%;
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
flex-basis: 100%;
}

2
console/src/app/pages/orgs/org-member-roles-autocomplete/org-member-roles-autocomplete.component.scss
View File

@@ -1,3 +1,3 @@
.full-width {
width: 100%;
width: 100%;
}

192
console/src/app/pages/orgs/org-members/org-members.component.html
View File

@@ -1,105 +1,91 @@
<div class="max-width-container">
<div class="container">
<div class="left">
<a *ngIf="org" [routerLink]="[ '/org']" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
<app-detail-layout [backRouterLink]="[ '/org']" title="{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}"
description="{{ 'ORG.MEMBER.DESCRIPTION' | translate }}">
<div class="table-header-row" *ngIf="org">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
<button (click)="removeProjectMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
<div class="right">
<div class="head">
<h1>{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}</h1>
<p class="desc">{{ 'ORG.MEMBER.DESCRIPTION' | translate }}</p>
</div>
<div class="table-header-row" *ngIf="org">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
<button (click)="removeProjectMemberSelection()"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()" color="warn">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="background-style full-width-table" aria-label="Elements"
[dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
<span class="role app-label" *ngFor="let role of member.rolesList; index as i">
{{ 'ROLES.'+role | translate }}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="background-style" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</div>
</ng-template>
</div>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="background-style table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
<span class="role app-label" *ngFor="let role of member.rolesList; index as i">
{{ 'ROLES.'+role | translate }}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator background-style" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-detail-layout>

158
console/src/app/pages/orgs/org-members/org-members.component.scss
View File

@@ -1,123 +1,87 @@
.container {
display: flex;
padding-bottom: 3rem;
.left {
width: 100px;
display: flex;
padding: 1rem;
justify-content: center;
a {
margin-top: .2rem;
}
}
.right {
flex: 1;
padding-top: 1rem;
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
margin-bottom: 2rem;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
}
}
}
.table-header-row {
display: flex;
align-items: center;
width: 100%;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
flex: 1;
}
.icon-button {
margin-right: .5rem;
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
border-radius: .5rem;
}
}
.table-wrapper {
overflow: auto;
width: 100%;
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
.table,
.paginator {
width: 100%;
td,
th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
table, mat-paginator {
width: 100%;
td, th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
.action {
width: 40px;
}
.data-row {
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
outline: none;
cursor: pointer;
}

46
console/src/app/pages/orgs/org-members/org-members.component.spec.ts
View File

@@ -4,31 +4,31 @@ import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProjectMembersComponent } from './project-members.component';
import { OrgMembersComponent } from './org-members.component';
describe('ProjectMembersComponent', () => {
let component: ProjectMembersComponent;
let fixture: ComponentFixture<ProjectMembersComponent>;
describe('OrgMembersComponent', () => {
let component: OrgMembersComponent;
let fixture: ComponentFixture<OrgMembersComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectMembersComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
],
}).compileComponents();
}));
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [OrgMembersComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectMembersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
beforeEach(() => {
fixture = TestBed.createComponent(OrgMembersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});

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

@@ -13,6 +13,7 @@ import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { OrgMembersRoutingModule } from './org-members-routing.module';
import { OrgMembersComponent } from './org-members.component';
@@ -37,6 +38,7 @@ import { OrgMembersComponent } from './org-members.component';
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
DetailLayoutModule,
],
})
export class OrgMembersModule { }

277
console/src/app/pages/orgs/password-policy/password-policy.component.html
View File

@@ -1,158 +1,135 @@
<div class="max-width-container">
<div class="container">
<div class="left">
<a [routerLink]="[ '/org']" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
</div>
<div class="right">
<div class="head">
<h1 *ngIf="(titleSub | async) || '' as titletrans">{{ titletrans | translate }}</h1>
<app-detail-layout [backRouterLink]="[ '/org']" [title]="title ? (title | translate) : ''"
[description]="desc ? (desc | translate) : ''">
<ng-template appHasRole [appHasRole]="['iam.policy.write']">
<button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
mat-stroked-button>
{{'ORG.POLICY.DELETE' | translate}}
</button>
</ng-template>
<p class="desc" *ngIf="(descSub | async) || '' as desctrans">{{ desctrans | translate }}</p>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['iam.policy.write']">
<button matTooltip="{{'ORG.POLICY.DELETE' | translate}}" color="warn" (click)="deletePolicy()"
mat-stroked-button>
{{'ORG.POLICY.DELETE' | translate}}
</button>
</ng-template>
<div class="content" *ngIf="policyType === PolicyComponentType?.LOCKOUT && lockoutData">
<mat-form-field class="description-formfield" appearance="outline">
<mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
<input matInput name="description" ngDefaultControl [(ngModel)]="lockoutData.description" required />
</mat-form-field>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.MAXATTEMPTS' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="incrementMaxAttempts()">
<mat-icon>add</mat-icon>
</button>
<span>{{lockoutData?.maxAttempts}}</span>
<button mat-icon-button (click)="decrementMaxAttempts()">
<mat-icon>remove</mat-icon>
</button>
</div>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.SHOWLOCKOUTFAILURES' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="showLockOutFailures" ngDefaultControl
[(ngModel)]="lockoutData.showLockOutFailures">
</mat-slide-toggle>
</div>
</div>
<div>
<div class="content" *ngIf="policyType === PolicyComponentType?.LOCKOUT && lockoutData">
<mat-form-field class="description-formfield" appearance="outline">
<mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
<input matInput name="description" ngDefaultControl [(ngModel)]="lockoutData.description"
required />
</mat-form-field>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.MAXATTEMPTS' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="incrementMaxAttempts()">
<mat-icon>add</mat-icon>
</button>
<span>{{lockoutData?.maxAttempts}}</span>
<button mat-icon-button (click)="decrementMaxAttempts()">
<mat-icon>remove</mat-icon>
</button>
</div>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.SHOWLOCKOUTFAILURES' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="showLockOutFailures" ngDefaultControl
[(ngModel)]="lockoutData.showLockOutFailures">
</mat-slide-toggle>
</div>
</div>
<div *ngIf="policyType === PolicyComponentType?.COMPLEXITY && complexityData" class="content">
<mat-form-field class="description-formfield" appearance="outline">
<mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
<input matInput name="description" ngDefaultControl [(ngModel)]="complexityData.description" required />
</mat-form-field>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.MINLENGTH' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="decrementLength()">
<mat-icon>remove</mat-icon>
</button>
<span>{{complexityData?.minLength}}</span>
<button mat-icon-button (click)="incrementLength()">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.HASNUMBER' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl [(ngModel)]="complexityData.hasNumber">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.HASSYMBOL' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasSymbol" ngDefaultControl [(ngModel)]="complexityData.hasSymbol">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.HASLOWERCASE' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasLowercase" ngDefaultControl
[(ngModel)]="complexityData.hasLowercase">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.HASUPPERCASE' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasUppercase" ngDefaultControl
[(ngModel)]="complexityData.hasUppercase">
</mat-slide-toggle>
</div>
</div>
<div *ngIf="policyType === PolicyComponentType?.COMPLEXITY && complexityData" class="content">
<mat-form-field class="description-formfield" appearance="outline">
<mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
<input matInput name="description" ngDefaultControl [(ngModel)]="complexityData.description"
required />
</mat-form-field>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.MINLENGTH' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="decrementLength()">
<mat-icon>remove</mat-icon>
</button>
<span>{{complexityData?.minLength}}</span>
<button mat-icon-button (click)="incrementLength()">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.HASNUMBER' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="complexityData.hasNumber">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.HASSYMBOL' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasSymbol" ngDefaultControl
[(ngModel)]="complexityData.hasSymbol">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.HASLOWERCASE' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasLowercase" ngDefaultControl
[(ngModel)]="complexityData.hasLowercase">
</mat-slide-toggle>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.HASUPPERCASE' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasUppercase" ngDefaultControl
[(ngModel)]="complexityData.hasUppercase">
</mat-slide-toggle>
</div>
</div>
<div class="content" *ngIf="policyType === PolicyComponentType?.AGE && ageData">
<mat-form-field class="description-formfield" appearance="outline">
<mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
<input matInput name="description" ngDefaultControl [(ngModel)]="ageData.description" required />
</mat-form-field>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.EXPIREWARNDAYS' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="incrementExpireWarnDays()">
<mat-icon>add</mat-icon>
</button>
<span>{{ageData?.expireWarnDays}}</span>
<button mat-icon-button (click)="decrementExpireWarnDays()">
<mat-icon>remove</mat-icon>
</button>
</div>
</div>
<div class="content" *ngIf="policyType === PolicyComponentType?.AGE && ageData">
<mat-form-field class="description-formfield" appearance="outline">
<mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
<input matInput name="description" ngDefaultControl [(ngModel)]="ageData.description"
required />
</mat-form-field>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.EXPIREWARNDAYS' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="incrementExpireWarnDays()">
<mat-icon>add</mat-icon>
</button>
<span>{{ageData?.expireWarnDays}}</span>
<button mat-icon-button (click)="decrementExpireWarnDays()">
<mat-icon>remove</mat-icon>
</button>
</div>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.MAXAGEDAYS' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="incrementMaxAgeDays()">
<mat-icon>add</mat-icon>
</button>
<span>{{ageData?.maxAgeDays}}</span>
<button mat-icon-button (click)="decrementMaxAgeDays()">
<mat-icon>remove</mat-icon>
</button>
</div>
</div>
</div>
<div class="content" *ngIf="policyType === PolicyComponentType?.IAM_POLICY && iamData">
<mat-form-field class="description-formfield" appearance="outline">
<mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
<input matInput name="description" ngDefaultControl [(ngModel)]="iamData.description"
required />
</mat-form-field>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.USERLOGINMUSTBEDOMAIN' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="iamData.userLoginMustBeDomain">
</mat-slide-toggle>
</div>
</div>
<div class="btn-container">
<button (click)="savePolicy()" color="primary" type="submit"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</div>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.MAXAGEDAYS' | translate}}</span>
<span class="fill-space"></span>
<div class="length-wrapper">
<button mat-icon-button (click)="incrementMaxAgeDays()">
<mat-icon>add</mat-icon>
</button>
<span>{{ageData?.maxAgeDays}}</span>
<button mat-icon-button (click)="decrementMaxAgeDays()">
<mat-icon>remove</mat-icon>
</button>
</div>
</div>
</div>
</div>
<div class="content" *ngIf="policyType === PolicyComponentType?.IAM_POLICY && iamData">
<mat-form-field class="description-formfield" appearance="outline">
<mat-label>{{ 'ORG.POLICY.DATA.DESCRIPTION' | translate }}</mat-label>
<input matInput name="description" ngDefaultControl [(ngModel)]="iamData.description" required />
</mat-form-field>
<div class="row">
<span class="left-desc">{{'ORG.POLICY.DATA.USERLOGINMUSTBEDOMAIN' | translate}}</span>
<span class="fill-space"></span>
<mat-slide-toggle color="primary" name="hasNumber" ngDefaultControl
[(ngModel)]="iamData.userLoginMustBeDomain">
</mat-slide-toggle>
</div>
</div>
<div class="btn-container">
<button (click)="savePolicy()" color="primary" type="submit"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</div>
</app-detail-layout>

124
console/src/app/pages/orgs/password-policy/password-policy.component.scss
View File

@@ -1,90 +1,44 @@
.container {
display: flex;
padding-bottom: 3rem;
.left {
width: 100px;
display: flex;
padding: 1rem;
justify-content: center;
a {
margin-top: .2rem;
}
}
.right {
flex: 1;
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
}
.fill-space {
flex: 1;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
button {
border-radius: .5rem;
margin-bottom: .5rem;
}
}
.content {
padding-top: 1rem;
display: flex;
flex-direction: column;
.row {
display: flex;
align-items: center;
padding: .5rem 0;
.left-desc {
color: #8795a1;
font-size: .9rem;
}
.fill-space {
flex: 1;
}
.length-wrapper {
display: flex;
align-items: center;
}
}
}
.btn-container {
display: flex;
justify-content: flex-end;
button {
margin-top: 3rem;
display: block;
padding: 0.5rem 4rem;
border-radius: 0.5rem;
}
}
}
button {
border-radius: .5rem;
}
.content {
padding-top: 1rem;
display: flex;
flex-direction: column;
width: 100%;
.row {
display: flex;
align-items: center;
padding: .5rem 0;
.left-desc {
color: #8795a1;
font-size: .9rem;
}
.fill-space {
flex: 1;
}
.length-wrapper {
display: flex;
align-items: center;
}
}
}
.btn-container {
display: flex;
justify-content: flex-end;
width: 100%;
button {
margin-top: 3rem;
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
}
}

38
console/src/app/pages/orgs/password-policy/password-policy.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, Subscription } from 'rxjs';
import { Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import {
OrgIamPolicy,
@@ -32,8 +32,8 @@ export enum PolicyComponentType {
styleUrls: ['./password-policy.component.scss'],
})
export class PasswordPolicyComponent implements OnInit, OnDestroy {
titleSub: BehaviorSubject<string> = new BehaviorSubject('');
descSub: BehaviorSubject<string> = new BehaviorSubject('');
public title: string = '';
public desc: string = '';
componentAction: PolicyComponentAction = PolicyComponentAction.CREATE;
@@ -68,20 +68,20 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
switch (params.policytype) {
case PolicyComponentType.LOCKOUT:
this.titleSub.next('ORG.POLICY.PWD_LOCKOUT.TITLECREATE');
this.descSub.next('ORG.POLICY.PWD_LOCKOUT.DESCRIPTIONCREATE');
this.title = 'ORG.POLICY.PWD_LOCKOUT.TITLECREATE';
this.desc = 'ORG.POLICY.PWD_LOCKOUT.DESCRIPTIONCREATE';
break;
case PolicyComponentType.AGE:
this.titleSub.next('ORG.POLICY.PWD_AGE.TITLECREATE');
this.descSub.next('ORG.POLICY.PWD_AGE.DESCRIPTIONCREATE');
this.title = 'ORG.POLICY.PWD_AGE.TITLECREATE';
this.desc = 'ORG.POLICY.PWD_AGE.DESCRIPTIONCREATE';
break;
case PolicyComponentType.COMPLEXITY:
this.titleSub.next('ORG.POLICY.PWD_COMPLEXITY.TITLECREATE');
this.descSub.next('ORG.POLICY.PWD_COMPLEXITY.DESCRIPTIONCREATE');
this.title = 'ORG.POLICY.PWD_COMPLEXITY.TITLECREATE';
this.desc = 'ORG.POLICY.PWD_COMPLEXITY.DESCRIPTIONCREATE';
break;
case PolicyComponentType.IAM_POLICY:
this.titleSub.next('ORG.POLICY.IAM_POLICY.TITLECREATE');
this.descSub.next('ORG.POLICY.IAM_POLICY.DESCRIPTIONCREATE');
this.title = 'ORG.POLICY.IAM_POLICY.TITLECREATE';
this.desc = 'ORG.POLICY.IAM_POLICY.DESCRIPTIONCREATE';
break;
}
@@ -119,20 +119,20 @@ export class PasswordPolicyComponent implements OnInit, OnDestroy {
Promise<PasswordLockoutPolicy | PasswordAgePolicy | PasswordComplexityPolicy | OrgIamPolicy | undefined> {
switch (params.policytype) {
case PolicyComponentType.LOCKOUT:
this.titleSub.next('ORG.POLICY.PWD_LOCKOUT.TITLE');
this.descSub.next('ORG.POLICY.PWD_LOCKOUT.DESCRIPTION');
this.title = 'ORG.POLICY.PWD_LOCKOUT.TITLE';
this.desc = 'ORG.POLICY.PWD_LOCKOUT.DESCRIPTION';
return this.orgService.GetPasswordLockoutPolicy();
case PolicyComponentType.AGE:
this.titleSub.next('ORG.POLICY.PWD_AGE.TITLE');
this.descSub.next('ORG.POLICY.PWD_AGE.DESCRIPTION');
this.title = 'ORG.POLICY.PWD_AGE.TITLE';
this.desc = 'ORG.POLICY.PWD_AGE.DESCRIPTION';
return this.orgService.GetPasswordAgePolicy();
case PolicyComponentType.COMPLEXITY:
this.titleSub.next('ORG.POLICY.PWD_COMPLEXITY.TITLE');
this.descSub.next('ORG.POLICY.PWD_COMPLEXITY.DESCRIPTION');
this.title = 'ORG.POLICY.PWD_COMPLEXITY.TITLE';
this.desc = 'ORG.POLICY.PWD_COMPLEXITY.DESCRIPTION';
return this.orgService.GetPasswordComplexityPolicy();
case PolicyComponentType.IAM_POLICY:
this.titleSub.next('ORG.POLICY.IAM_POLICY.TITLECREATE');
this.descSub.next('ORG.POLICY.IAM_POLICY.DESCRIPTIONCREATE');
this.title = 'ORG.POLICY.IAM_POLICY.TITLECREATE';
this.desc = 'ORG.POLICY.IAM_POLICY.DESCRIPTIONCREATE';
return this.orgService.GetMyOrgIamPolicy();
}
}

2
console/src/app/pages/orgs/password-policy/password-policy.module.ts
View File

@@ -9,6 +9,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { PasswordPolicyRoutingModule } from './password-policy-routing.module';
import { PasswordPolicyComponent } from './password-policy.component';
@@ -27,6 +28,7 @@ import { PasswordPolicyComponent } from './password-policy.component';
HasRoleModule,
MatTooltipModule,
TranslateModule,
DetailLayoutModule,
],
})
export class PasswordPolicyModule { }

5
console/src/app/pages/orgs/policy-grid/policy-grid.component.html
View File

@@ -5,7 +5,7 @@
<div class="row-lyt">
<div class="p-item card">
<div class="avatar">
<mat-icon svgIcon="mdi_textbox_password"></mat-icon>
<mat-icon class="icon" svgIcon="mdi_textbox_password"></mat-icon>
</div>
<div class="title">
<span>{{'ORG.POLICY.PWD_COMPLEXITY.TITLE' | translate}}</span>
@@ -32,7 +32,8 @@
<ng-template appHasRole [appHasRole]="['iam.policy.read']">
<div class="p-item card">
<div class="avatar"><i class="icon las la-gem"></i>
<div class="avatar">
<i class="icon las la-gem"></i>
</div>
<div class="title">
<span>{{'ORG.POLICY.IAM_POLICY.TITLE' | translate}}</span>

128
console/src/app/pages/orgs/policy-grid/policy-grid.component.scss
View File

@@ -1,71 +1,75 @@
h1 {
font-size: 1.2rem;
font-size: 1.2rem;
}
.top-desc {
color: #8795a1;
}
color: #8795a1;
}
.row-lyt {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
.p-item {
flex-basis: 300px;
margin: 1rem;
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
flex-direction: column;
min-height: 250px;
padding: 1rem;
.p-item {
flex-basis: 300px;
margin: 1rem;
display: flex;
flex-direction: column;
min-height: 250px;
padding: 1rem;
.avatar {
height: 60px;
width: 60px;
border-radius: 50%;
background: linear-gradient(40deg,rgb(129, 85, 185) 30%, #8983F7);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: .5rem;
mat-icon, i {
font-size: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
}
}
.title {
display: flex;
align-items: center;
span {
font-size: 1.2rem;
}
.icon {
margin-left: 1rem;
margin-right: 1rem;
}
}
.desc {
font-size: .9rem;
}
.fill-space {
flex: 1;
}
.btn-wrapper {
display: flex;
}
button {
margin-right: 1rem;
border-radius: .5rem;
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
.avatar {
height: 60px;
width: 60px;
border-radius: 50%;
background: linear-gradient(40deg, rgb(129, 85, 185) 30%, #8983f7);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: .5rem;
.icon,
i {
font-size: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
}
}
.title {
display: flex;
align-items: center;
span {
font-size: 1.2rem;
}
.icon {
margin-left: 1rem;
margin-right: 1rem;
}
}
.desc {
font-size: .9rem;
}
.fill-space {
flex: 1;
}
.btn-wrapper {
display: flex;
}
button {
margin-right: 1rem;
border-radius: .5rem;
}
}
}

4
console/src/app/pages/orgs/search-org-autocomplete/search-org-autocomplete.component.scss
View File

@@ -1,3 +1,3 @@
.full-width {
width: 100%;
}
width: 100%;
}

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

@@ -9,13 +9,13 @@
<h1>{{'APP.PAGES.CREATE_OIDC_DESC_TITLE' | translate}}</h1>
<p class="desc">{{'APP.PAGES.CREATE_OIDC_DESC_SUB' | translate}}</p>
<mat-progress-bar color="accent" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar class="progress-bar" color="accent" *ngIf="loading" mode="indeterminate"></mat-progress-bar>
<mat-checkbox class="proswitch" color="primary" [(ngModel)]="devmode">
{{'APP.OIDC.PROSWITCH' | translate}}
</mat-checkbox>
<mat-horizontal-stepper *ngIf="!devmode" linear #stepper labelPosition="bottom">
<mat-horizontal-stepper class="stepper" *ngIf="!devmode" linear #stepper labelPosition="bottom">
<mat-step [stepControl]="firstFormGroup" [editable]="true">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>{{'APP.OIDC.NAMEANDTYPESECTION' | translate}}</ng-template>
@@ -28,9 +28,10 @@
</mat-form-field>
<p class="step-title">{{'APP.OIDC.TYPETITLE' | translate}}</p>
<mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="example-radio-group"
<mat-radio-group color="primary" aria-labelledby="radio-group-label" class="radio-group"
formControlName="applicationType">
<mat-radio-button *ngFor="let type of oidcAppTypes | keyvalue" [value]="type.value">
<mat-radio-button class="radio-button" *ngFor="let type of oidcAppTypes | keyvalue"
[value]="type.value">
<div>{{'APP.OIDC.APPTYPE'+type.key | translate}}</div>
</mat-radio-button>
</mat-radio-group>
@@ -45,8 +46,9 @@
*ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
<ng-template matStepLabel>{{'APP.OIDC.RESPONSESECTION' | translate}}</ng-template>
<div class="checkbox-container">
<mat-checkbox *ngFor="let responsetype of oidcResponseTypes" (change)="changeResponseType()"
color="primary" [(ngModel)]="responsetype.checked" [disabled]="responsetype.disabled">
<mat-checkbox class="checkbox" *ngFor="let responsetype of oidcResponseTypes"
(change)="changeResponseType()" color="primary" [(ngModel)]="responsetype.checked"
[disabled]="responsetype.disabled">
{{'APP.OIDC.RESPONSE'+responsetype.type | translate}}
</mat-checkbox>
</div>
@@ -61,10 +63,10 @@
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>{{'APP.OIDC.AUTHMETHODSECTION' | translate}}</ng-template>
<mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="example-radio-group"
<mat-radio-group color="primary" aria-labelledby="example-radio-group-label" class="radio-group"
formControlName="authMethodType">
<mat-radio-button *ngFor="let authmethod of oidcAuthMethodType" [disabled]="authmethod.disabled"
[value]="authmethod.type">
<mat-radio-button class="radio-button" *ngFor="let authmethod of oidcAuthMethodType"
[disabled]="authmethod.disabled" [value]="authmethod.type">
{{'APP.OIDC.AUTHMETHOD'+authmethod.type | translate}}
</mat-radio-button>
</mat-radio-group>
@@ -81,35 +83,50 @@
<ng-template matStepLabel>{{'APP.OIDC.REDIRECTSECTION' | translate}}</ng-template>
<p class="step-title">{{'APP.OIDC.REDIRECTTITLE' | translate}}</p>
<p class="step-description"
*ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
<p class="step-description" *ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB">
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
<mat-form-field appearance="outline" class="full-width">
<mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
<mat-chip-list #chipRedirectList aria-label="uri selection">
<mat-chip *ngFor="let uri of oidcApp.redirectUrisList" selected removable
<mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" selected removable
[matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
[color]="!uri.startsWith('https://') ? 'warn': 'white'" (removed)="removeUri(uri, 'REDIRECT')">
{{uri}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
[matChipInputAddOnBlur]="true" [formControl]="redirectControl"
(matChipInputTokenEnd)="addUri($event, 'REDIRECT')">
</mat-chip-list>
</mat-form-field>
<p *ngIf="redirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
<p class="step-title">{{'APP.OIDC.POSTREDIRECTTITLE' | translate}}</p>
<p class="step-description"
*ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
<p class="step-description"
*ngIf="oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || oidcApp.applicationType === OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
<mat-form-field appearance="outline" class="full-width">
<mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
<mat-chip-list #chipPostRedirectList aria-label="uri selection">
<mat-chip *ngFor="let uri of oidcApp.postLogoutRedirectUrisList"
<mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList"
[matTooltip]="!uri.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
removable (removed)="removeUri(uri, 'POSTREDIRECT')" selected
[color]="!uri.startsWith('https://') ? 'warn': 'white'">
{{uri}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipPostRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
<input [matChipInputFor]="chipPostRedirectList" [formControl]="postRedirectControl"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addUri($event, 'POSTREDIRECT')">
</mat-chip-list>
</mat-form-field>
<p *ngIf="postRedirectControl.invalid" class="error">{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
<div class="actions">
<button mat-stroked-button color="primary" matStepperPrevious>{{'ACTIONS.BACK' | translate}}</button>
@@ -220,7 +237,7 @@
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'APP.OIDC.GRANT' | translate }}</mat-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant.type">
@@ -229,7 +246,7 @@
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'APP.OIDC.RESPONSE' | translate }}</mat-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type.type">
@@ -247,10 +264,10 @@
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline" class="full-width">
<mat-form-field appearance="outline" class="formfield full-width">
<mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
<mat-chip-list #chipRedirectList aria-label="uri selection">
<mat-chip *ngFor="let uri of oidcApp.redirectUrisList" removable
<mat-chip class="chip" *ngFor="let uri of oidcApp.redirectUrisList" removable
(removed)="removeUri(uri, 'REDIRECT')">
{{uri}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
@@ -259,10 +276,10 @@
</mat-chip-list>
</mat-form-field>
<mat-form-field appearance="outline" class="full-width">
<mat-form-field appearance="outline" class="formfield full-width">
<mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
<mat-chip-list #chipPostRedirectList aria-label="uri selection">
<mat-chip *ngFor="let uri of oidcApp.postLogoutRedirectUrisList" removable
<mat-chip class="chip" *ngFor="let uri of oidcApp.postLogoutRedirectUrisList" removable
(removed)="removeUri(uri, 'POSTREDIRECT')">
{{uri}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>

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

@@ -1,161 +1,148 @@
h1 {
font-weight: 500;
font-size: 1.5rem;
font-weight: 500;
font-size: 1.5rem;
}
p.desc {
font-size: 14px;
color: #8795a1;
font-size: 14px;
color: #8795a1;
}
.proswitch {
margin-bottom: 2rem;
display: block;
margin-bottom: 2rem;
display: block;
}
.container {
padding: 4rem 4rem 2rem 4rem;
mat-progress-bar {
margin-bottom: 1rem;
padding: 4rem 4rem 2rem 4rem;
.progress-bar {
margin-bottom: 1rem;
}
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
.abort {
font-size: 1.2rem;
margin-left: 2rem;
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
}
}
.abort-2 {
font-size: 1.2rem;
margin-left: 2rem;
white-space: nowrap;
}
}
}
.margin-right {
margin-right: 0.5rem;
margin-right: .5rem;
}
.formfield {
width: 400px;
display: block;
width: 400px;
display: block;
}
.full-width {
width: 100%;
width: 100%;
}
mat-horizontal-stepper {
background: inherit !important;
margin: 0 -1.5rem;
.stepper {
background: inherit !important;
margin: 0 -1.5rem;
.step-title {
font-size: 1.2rem;
color: #8795a1;
}
.step-title {
font-size: 1.2rem;
color: #8795a1;
}
mat-chip[color='white'] {
background-color: #fafafa;
}
.step-description {
font-size: .9rem;
color: #8795a1;
}
.error {
font-size: 13px;
color: #f44336;
margin-top: 0;
}
.chip[color='white'] {
background-color: #fafafa;
}
}
mat-radio-group {
display: flex;
flex-direction: column;
mat-radio-button {
margin: .5rem 0;
}
.radio-group {
display: flex;
flex-direction: column;
.radio-button {
margin: .5rem 0;
}
}
.checkbox-container {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
mat-checkbox {
margin: .5rem 0;
}
.checkbox {
margin: .5rem 0;
}
}
.row {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
.left, .right{
margin-bottom: .5rem;
font-size: 14px;
color: #8795a1;
}
.left,
.right {
margin-bottom: .5rem;
font-size: 14px;
color: #8795a1;
}
}
.actions {
button[mat-stroked-button] {
float: left;
margin-top: 1rem;
border-radius: .5rem;
}
button[mat-stroked-button] {
float: left;
margin-top: 1rem;
border-radius: .5rem;
}
button[mat-raised-button] {
float: right;
margin-top: 1rem;
border-radius: .5rem;
padding: .5rem 1rem;
min-width: 100px;
}
button[mat-raised-button] {
float: right;
margin-top: 1rem;
border-radius: .5rem;
padding: .5rem 1rem;
min-width: 100px;
}
}
.dev {
.column {
display: flex;
flex-direction: column;
.content {
display: flex;
margin: 0 -.5rem;
flex-wrap: wrap;
.formfield {
width: 400px;
input {
font-size: 1.5rem;
}
.formfield {
flex: 1 0 40%;
margin: 0 .5rem;
&.autocomplete {
margin-top: 1rem;
}
}
.slider {
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 0.8rem;
}
.access-token {
width: 400px;
}
&.full-width {
flex-basis: 80%;
}
}
}
.content {
display: flex;
margin: 0 -.5rem;
flex-wrap: wrap;
mat-form-field {
flex: 1 0 40%;
margin: 0 .5rem;
}
.full-width {
flex-basis: 80%;
}
}
.continue-button {
margin-top: 3rem;
display: block;
padding: 0.5rem 4rem;
border-radius: 0.5rem;
float: right;
}
.continue-button {
margin-top: 3rem;
display: block;
padding: .5rem 4rem;
border-radius: .5rem;
float: right;
}
}

28
console/src/app/pages/projects/apps/app-create/app-create.component.ts
View File

@@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Params, Router } from '@angular/router';
@@ -19,6 +19,7 @@ import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { nativeValidator, webValidator } from '../appTypeValidator';
@Component({
selector: 'app-app-create',
@@ -73,6 +74,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
// TODO show when implemented
];
public redirectControl: FormControl = new FormControl('');
public postRedirectControl: FormControl = new FormControl('');
public readonly separatorKeysCodes: number[] = [ENTER, COMMA, SPACE];
constructor(
@@ -119,6 +123,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.oidcApp.grantTypesList =
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
this.redirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
this.postRedirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB:
console.log('WEB');
@@ -136,6 +143,8 @@ export class AppCreateComponent implements OnInit, OnDestroy {
this.oidcApp.grantTypesList =
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE];
this.redirectControl = new FormControl('', [webValidator as ValidatorFn]);
this.postRedirectControl = new FormControl('', [webValidator as ValidatorFn]);
break;
case OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT:
console.log('USERAGENT');
@@ -147,6 +156,9 @@ export class AppCreateComponent implements OnInit, OnDestroy {
[OIDCGrantType.OIDCGRANTTYPE_AUTHORIZATION_CODE, OIDCGrantType.OIDCGRANTTYPE_IMPLICIT];
this.oidcApp.authMethodType = OIDCAuthMethodType.OIDCAUTHMETHODTYPE_NONE;
this.redirectControl = new FormControl('', [webValidator as ValidatorFn]);
this.postRedirectControl = new FormControl('', [webValidator as ValidatorFn]);
break;
}
@@ -213,16 +225,18 @@ export class AppCreateComponent implements OnInit, OnDestroy {
const value = event.value.trim();
if (value !== '') {
if (target === 'REDIRECT') {
if (target === 'REDIRECT' && this.redirectControl.valid) {
this.oidcApp.redirectUrisList.push(value);
} else if (target === 'POSTREDIRECT') {
if (input) {
input.value = '';
}
} else if (target === 'POSTREDIRECT' && this.redirectControl.valid) {
this.oidcApp.postLogoutRedirectUrisList.push(value);
if (input) {
input.value = '';
}
}
}
if (input) {
input.value = '';
}
}
public removeUri(uri: string, target: string): void {

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

@@ -27,6 +27,9 @@
<mat-label>{{ 'APP.NAME' | translate }}</mat-label>
<input matInput formControlName="name" />
</mat-form-field>
<p class="docs-line" *ngIf="docs?.discoveryEndpoint">Discovery Endpoint: {{docs.discoveryEndpoint}}</p>
<p class="docs-line" *ngIf="docs?.issuer">Issuer: {{docs.issuer}}</p>
</div>
<div class="btn-container">
<button type="submit" color="primary" [disabled]="appNameForm.invalid || name?.disabled"
@@ -42,12 +45,12 @@
</div>
<form *ngIf="appForm" [formGroup]="appForm" (ngSubmit)="saveOIDCApp()">
<div class="content">
<mat-form-field appearance="outline">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'APP.OIDC.CLIENTID' | translate }}</mat-label>
<input matInput formControlName="clientId" />
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'APP.OIDC.RESPONSE' | translate }}</mat-label>
<mat-select formControlName="responseTypesList" multiple>
<mat-option *ngFor="let type of oidcResponseTypes" [value]="type">
@@ -56,7 +59,7 @@
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'APP.OIDC.GRANT' | translate }}</mat-label>
<mat-select formControlName="grantTypesList" multiple>
<mat-option *ngFor="let grant of oidcGrantTypes" [value]="grant">
@@ -82,11 +85,17 @@
</mat-option>
</mat-select>
</mat-form-field>
<p class="step-description"
*ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_NATIVE">
{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</p>
<p class="step-description"
*ngIf="applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_WEB || applicationType?.value == OIDCApplicationType.OIDCAPPLICATIONTYPE_USER_AGENT">
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
<mat-form-field class="full-width" appearance="outline">
<mat-form-field class="formfield full-width" appearance="outline">
<mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
<mat-chip-list #chipRedirectList>
<mat-chip *ngFor="let redirect of redirectUrisList" selected
<mat-chip class="chip" *ngFor="let redirect of redirectUrisList" selected
[matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
[color]="!redirect.startsWith('https://') ? 'warn': 'green'"
(removed)="remove(redirect, RedirectType.REDIRECT)">
@@ -94,15 +103,18 @@
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipRedirectList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
[matChipInputAddOnBlur]="addOnBlur" [formControl]="redirectControl"
(matChipInputTokenEnd)="add($event, RedirectType.REDIRECT)">
</mat-chip-list>
</mat-form-field>
<mat-form-field class="full-width" appearance="outline">
<p *ngIf="redirectControl.value && redirectControl.invalid" class="error">
{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
<mat-form-field class="formfield full-width" appearance="outline">
<mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
<mat-chip-list #chipPostRedirectList>
<mat-chip *ngFor="let redirect of postLogoutRedirectUrisList" selected
<mat-chip class="chip" *ngFor="let redirect of postLogoutRedirectUrisList" selected
(removed)="remove(redirect, RedirectType.POSTREDIRECT)"
[matTooltip]="!redirect.startsWith('https://') ? ('APP.OIDC.UNSECUREREDIRECT' | translate): ''"
[color]="!redirect.startsWith('https://') ? 'warn': 'green'">
@@ -111,13 +123,17 @@
</mat-chip>
<input [matChipInputFor]="chipPostRedirectList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event, RedirectType.POSTREDIRECT)">
(matChipInputTokenEnd)="add($event, RedirectType.POSTREDIRECT)"
[formControl]="postRedirectControl">
</mat-chip-list>
</mat-form-field>
<p *ngIf="postRedirectControl.value && postRedirectControl.invalid" class="error">
{{'APP.OIDC.REDIRECTNOTVALID' | translate}}</p>
</div>
<div class="btn-container">
<button type="submit" color="primary" [disabled]="appForm.invalid"
<button class="submit-button" type="submit" color="primary" [disabled]="appForm.invalid"
mat-raised-button>{{ 'ACTIONS.SAVE' | translate }}</button>
</div>
</form>

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

@@ -1,91 +1,110 @@
.head {
display: flex;
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
.zitadel-warning {
font-size: 14px;
color: rgb(201, 51, 71);
}
}
.err-container {
color: rgb(201, 51, 71);
font-size: 14px;
}
.card-actions {
button {
border-radius: .5rem;
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
&.nowrap {
flex-wrap: nowrap;
}
&.center {
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
}
.zitadel-warning {
font-size: 14px;
color: rgb(201,51,71);
.formfield {
flex: 1 1 30%;
margin: 0 .5rem;
&.full-width {
flex-basis: 100%;
}
}
.err-container {
color: rgb(201,51,71);
font-size: 14px;
.step-description {
font-size: .9rem;
color: #8795a1;
flex-basis: 100%;
margin: 0 .5rem 1rem .5rem;
}
.card-actions {
button {
border-radius: .5rem;
}
.error {
font-size: 13px;
color: #f44336;
margin: 0 .5rem 1.5rem .5rem;
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
&.nowrap{
flex-wrap: nowrap;
}
&.center {
align-items: center;
}
mat-form-field {
flex: 1 1 30%;
margin: 0 .5rem;
}
.docs-line {
flex-basis: 100%;
font-size: 14px;
color: #8795a1;
margin-top: 0;
}
.full-width {
flex-basis: 100%;
}
.toggle {
align-self: flex-start;
margin-bottom: 1rem;
margin-right: 1rem;
border-radius: .5rem;
.toggle {
align-self: flex-start;
margin-bottom: 1rem;
i {
margin-right: 1rem;
border-radius: .5rem;
i {
margin-right: 1rem;
}
}
}
.btn-container {
display: flex;
justify-content: flex-end;
margin: 0 -.5rem;
button {
border-radius: .5rem;
margin: 0 .5rem;
}
}
}
mat-chip[color='green'] {
background-color: #56a392 !important;
}
.btn-container {
display: flex;
justify-content: flex-end;
margin: 0 -.5rem;
.submit-button {
border-radius: .5rem;
margin: 0 .5rem;
}
}
.chip[color='green'] {
background-color: #56a392 !important;
}

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

@@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
import { MatButtonToggleChange } from '@angular/material/button-toggle';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatDialog } from '@angular/material/dialog';
@@ -16,12 +16,14 @@ import {
OIDCConfig,
OIDCGrantType,
OIDCResponseType,
ZitadelDocs,
} from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { AppSecretDialogComponent } from '../app-secret-dialog/app-secret-dialog.component';
import { nativeValidator } from '../appTypeValidator';
enum RedirectType {
REDIRECT = 'redirect',
@@ -73,6 +75,13 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public RedirectType: any = RedirectType;
public isZitadel: boolean = false;
public docs!: ZitadelDocs.AsObject;
public OIDCApplicationType: any = OIDCApplicationType;
public redirectControl: FormControl = new FormControl('');
public postRedirectControl: FormControl = new FormControl('');
constructor(
public translate: TranslateService,
@@ -111,7 +120,6 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.isZitadel = iam.toObject().iamProjectId === this.projectId;
});
this.projectService.GetApplicationById(projectid, id).then(app => {
this.app = app.toObject();
this.appNameForm.patchValue(this.app);
@@ -125,9 +133,12 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
if (this.app.oidcConfig?.redirectUrisList) {
this.redirectUrisList = this.app.oidcConfig.redirectUrisList;
this.redirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
}
if (this.app.oidcConfig?.postLogoutRedirectUrisList) {
this.postLogoutRedirectUrisList = this.app.oidcConfig.postLogoutRedirectUrisList;
this.postRedirectControl = new FormControl('', [nativeValidator as ValidatorFn]);
}
if (this.app.oidcConfig) {
this.appForm.patchValue(this.app.oidcConfig);
@@ -137,6 +148,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
this.toast.showError(error);
this.errorMessage = error.message;
});
this.docs = (await this.projectService.GetZitadelDocs()).toObject();
}
public changeState(event: MatButtonToggleChange): void {
@@ -165,7 +178,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
}
public add(event: MatChipInputEvent, target: RedirectType): void {
if (target === RedirectType.POSTREDIRECT) {
if (target === RedirectType.POSTREDIRECT && this.postRedirectControl.valid) {
const input = event.input;
if (event.value !== '' && event.value !== ' ' && event.value !== '/') {
this.postLogoutRedirectUrisList.push(event.value);
@@ -173,7 +186,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
if (input) {
input.value = '';
}
} else if (target === RedirectType.REDIRECT) {
} else if (target === RedirectType.REDIRECT && this.redirectControl.valid) {
const input = event.input;
if (event.value !== '' && event.value !== ' ' && event.value !== '/') {
this.redirectUrisList.push(event.value);

62
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss
View File

@@ -1,37 +1,37 @@
.title {
font-size: 1.2rem;
}
.desc {
color: #8795a1;
font-size: .9rem;
font-size: 1.2rem;
}
.desc {
color: #8795a1;
font-size: .9rem;
}
.full-width {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: .5rem;
}
.full-width {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
button {
border-radius: 0.5rem;
}
button {
border-radius: .5rem;
}
}
.flex {
display: flex;
align-items: center;
padding: .5rem;
border: 1px solid #ffffff20;
border-radius: .5rem;
.flex {
display: flex;
align-items: center;
padding: .5rem;
border: 1px solid #ffffff20;
border-radius: .5rem;
.secret {
overflow: auto;
}
}
.secret {
overflow: auto;
}
}

32
console/src/app/pages/projects/apps/appTypeValidator.ts Normal file
View File

@@ -0,0 +1,32 @@
import { FormControl } from '@angular/forms';
export function nativeValidator(c: FormControl): any {
const REGEXP = /([a-zA-Z0-9]*:\/\/)\w+/g;
if (c.value.startsWith('http://localhost')) {
return null;
} else if (c.value.startsWith('https://') || c.value.startsWith('http://')) {
return {
invalid: true,
nativeValidator: {
valid: false,
},
};
} else if (REGEXP.test(c.value)) {
return null;
}
}
export function webValidator(c: FormControl): any {
if (c.value.startsWith('https://')) {
return null;
} else if (c.value.startsWith('http://')) {
return {
invalid: false,
webValidator: {
valid: true,
error: 'LOCALHOSTALLOWEDFORTESTING',
},
};
}
}

7
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
View File

@@ -4,7 +4,7 @@
<a [routerLink]="[ '/granted-projects' ]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.projectName}}</h1>
<h1 class="h1">{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.projectName}}</h1>
<div class="full-width">
<p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
@@ -12,11 +12,12 @@
</div>
</div>
<ng-template appHasRole [appHasRole]="['project.grant.user.grant.read']">
<ng-template appHasRole
[appHasRole]="['project.grant.user.grant.read', 'project.grant.user.grant.read:'+grantId]">
<app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
<app-user-grants [context]="userGrantContext" [projectId]="projectId" [grantId]="grantId"
[displayedColumns]="['select', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
[displayedColumns]="['select','user', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
[allowCreate]="['project.grant.user.grant.write'] | hasRole | async"
[allowDelete]="['project.grant.user.grant.delete'] | hasRole | async">
</app-user-grants>

182
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.scss
View File

@@ -1,131 +1,81 @@
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
margin-bottom: 1rem;
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
margin-bottom: 1rem;
a {
display: block;
}
a {
display: block;
}
h1 {
font-size: 1.2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
}
.full-width {
padding-top: 1rem;
width: 100%;
display: block;
.icon-button {
margin-right: 1rem;
}
button {
border-radius: .5rem;
}
.desc {
font-size: .9rem;
color: #8795a1;
}
.zitadel-warning {
font-size: 14px;
color: rgb(201,51,71);
}
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
mat-form-field {
flex: 1 1 33%;
margin: 0 .5rem;
}
}
h1 {
.h1 {
font-size: 1.2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
}
.full-width {
padding-top: 1rem;
width: 100%;
display: block;
.desc {
font-size: .9rem;
color: #8795a1;
}
.zitadel-warning {
font-size: 14px;
color: rgb(201, 51, 71);
}
}
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: 0.5rem;
align-items: center;
button {
display: none;
visibility: hidden;
}
&:hover {
button {
display: inline-block;
visibility: visible;
mat-icon {
font-size: 1.2rem;
}
}
}
.first {
flex: 1;
font-size: 0.8rem;
margin-right: 0.5rem;
}
.fill-space {
flex: 1;
}
.second {
font-size: 0.8rem;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
}
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
a {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
.row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.side-section {
color: #8795a1;
}
}
.first {
flex: 1;
font-size: .8rem;
margin-right: .5rem;
}
.mat-tab-label {
min-width: 100px !important;
.fill-space {
flex: 1;
}
.second {
font-size: .8rem;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
}
}
}
.flex-col {
display: flex;
flex-direction: column;
}
}
.mat-tab-label {
min-width: 100px !important;
}
.flex-col {
display: flex;
flex-direction: column;
}
}

4
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.html
View File

@@ -21,8 +21,6 @@
<span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{ item.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
<span class="fill-space"></span>
<div class="icons">
</div>
</div>
<button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
mat-icon-button>
@@ -48,8 +46,6 @@
<span *ngIf="item.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{ item.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
<span class="fill-space"></span>
<div class="icons">
</div>
</div>
<button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
mat-icon-button>

370
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.scss
View File

@@ -1,20 +1,21 @@
.view-toggle {
width: 100%;
width: 100%;
display: flex;
justify-content: flex-end;
padding-bottom: .5rem;
border-bottom: 1px solid #2d2e30;
.anim-list {
display: flex;
justify-content: flex-end;
padding-bottom: .5rem;
border-bottom: 1px solid #2d2e30;
align-items: center;
}
.anim-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
button {
&.left-button {
margin-right: 1rem;
}
button {
&.left-button {
margin-right: 1rem;
}
}
}
.spinner {
@@ -22,194 +23,185 @@
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
box-sizing: border-box;
h2 {
padding: 0 1rem;
flex-basis: 100%;
}
.item {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 250px;
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
text-decoration: none;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1rem;
border-radius: .5rem;
box-sizing: border-box;
min-height: 166px;
&.inactive {
color: #8795a1;
}
img {
height: 50px;
width: 50px;
margin: 1rem;
}
.text-part {
flex: 1;
display: flex;
flex-direction: column;
min-height: 70px;
padding: .5rem 0;
.top {
font-size: .8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #8795a1;
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: .5rem;
}
.description {
font-size: .8rem;
}
.created {
font-size: .8rem;
color: #8795a1;
}
.organization {
display: flex;
align-items: center;
margin-top: 1rem;
.org_avatar {
height: 25px;
width: 25px;
border-radius: 50%;
margin: 0;
margin-right: 1rem;
}
}
.fill-space {
flex: 1;
}
span {
margin: 2px 0;
}
}
.edit-button {
opacity: 0;
user-select: none;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: .25rem;
color: #8795a1;
&.selected {
opacity: 1;
}
}
&:hover {
.edit-button {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
.icon {
opacity: 1;
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
.add-project-button {
z-index: 100;
flex-basis: 250px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 166px;
border-radius: .5rem;
margin: 1rem;
box-sizing: border-box;
h2 {
padding: 0 1rem;
flex-basis: 100%;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
.item {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 250px;
display: flex;
text-decoration: none;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
min-height: 166px;
&:hover {
background-color: #ffffff25;
&.inactive {
color: #8795a1;
}
img {
height: 50px;
width: 50px;
margin: 1rem;
}
.text-part {
flex: 1;
display: flex;
flex-direction: column;
min-height: 70px;
padding: 0.5rem 0;
.top {
font-size: 0.8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #8795a1;
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.description {
font-size: 0.8rem;
}
.created {
font-size: 0.8rem;
color: #8795a1;
}
.organization {
display: flex;
align-items: center;
margin-top: 1rem;
.org_avatar {
height: 25px;
width: 25px;
border-radius: 50%;
margin: 0;
margin-right: 1rem;
}
}
.fill-space {
flex: 1;
}
.icons {
margin-top: 1rem;
transition: all 0.3s;
opacity: 0;
.icon {
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #8795a1;
}
}
span {
margin: 2px 0;
}
}
.edit-button {
opacity: 0;
user-select: none;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: 0.25rem;
color: #8795a1;
&:hover {
color: white;
}
&.selected {
opacity: 1;
}
}
&:hover {
.edit-button {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
.icon {
opacity: 1;
}
.icon,
span {
&.disabled {
color: gray;
}
}
}
.add-project-button {
z-index: 100;
flex-basis: 250px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 166px;
border-radius: 0.5rem;
margin: 1rem;
box-sizing: border-box;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
&:hover {
background-color: #ffffff25;
.icon,
span {
&.disabled {
color: gray;
}
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
}
.n-items {
flex-basis: 100%;
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
flex-basis: 100%;
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
}

10
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.html
View File

@@ -3,7 +3,7 @@
</app-granted-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button (click)="grid = true" mat-icon-button>
<button class="icon-button" (click)="grid = true" mat-icon-button>
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
@@ -36,7 +36,7 @@
<div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table class="background-style" mat-table [dataSource]="dataSource">
<table class="table background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -87,10 +87,10 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/granted-projects', row.id]"></tr>
[routerLink]="['/granted-projects', row.projectId, 'grant', row.id]"></tr>
</table>
<mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
(page)="changePage($event)"></mat-paginator>
<mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</div>

142
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.scss
View File

@@ -1,94 +1,88 @@
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
mat-form-field {
flex: 1 1 33%;
margin: 0 .5rem;
}
}
.view-toggle {
width: 100%;
display: flex;
justify-content: flex-end;
width: 100%;
display: flex;
justify-content: flex-end;
button {
display: block;
border-radius: .5rem;
}
.icon-button {
display: block;
border-radius: .5rem;
}
}
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.action-btns {
display: flex;
align-items: center;
}
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #8795a1;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.action-btns {
display: flex;
align-items: center;
}
.icon-button {
margin-right: .5rem;
}
.icon-button {
margin-right: .5rem;
}
}
.table-wrapper {
overflow: auto;
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
.table,
.paginator {
width: 100%;
background-color: #2d2e30;
td,
th {
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
table, mat-paginator {
width: 100%;
background-color: #2d2e30;
td, th {
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
.data-row {
cursor: pointer;
&:last-child {
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
tr {
outline: none;
}
outline: none;
}

10
console/src/app/pages/projects/granted-projects/granted-projects.component.scss
View File

@@ -1,12 +1,12 @@
h1 {
margin-top: 0;
margin-top: 0;
}
.sub {
color: #8795a1;
margin-bottom: 2rem;
color: #8795a1;
margin-bottom: 2rem;
}
.max-width-container {
padding-bottom: 3rem;
}
padding-bottom: 3rem;
}

140
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss
View File

@@ -1,78 +1,80 @@
@import '~@angular/material/theming';
@mixin application-grid-theme($theme) {
$primary: map-get($theme, primary);
$primary-dark: mat-color($primary, A900);
$accent: map-get($theme, accent);
$accent-color: mat-color($accent, 500);
/* stylelint-disable */
$primary: map-get($theme, primary);
$primary-dark: mat-color($primary, A900);
$accent: map-get($theme, accent);
$accent-color: mat-color($accent, 500);
/* stylelint-enable */
.app-grid-header {
.app-grid-header {
display: flex;
align-items: center;
.fill-space {
flex: 1;
}
}
.app-container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
padding-bottom: 2rem;
.sp-container {
display: flex;
justify-content: center;
align-items: center;
width: calc(82px + 2rem);
height: calc(82px + 2rem);
}
.app-wrap {
outline: none;
display: flex;
flex-direction: column;
align-items: center;
max-width: 150px;
.morph-card {
cursor: pointer;
animation: all .2s;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
height: 80px;
width: 80px;
margin: 1rem;
border-radius: .5rem;
border: 1px solid $accent-color;
font-weight: 800;
background-color: $primary-dark;
transition: background-color .2s ease-in-out;
background-image:
linear-gradient(transparent 11px, rgba($accent-color, .5) 12px, transparent 12px),
linear-gradient(90deg, transparent 11px, rgba($accent-color, .5) 12px, transparent 12px);
background-size: 100% 12px, 12px 100%;
.fill-space {
flex: 1;
&:hover {
background-color: rgba($accent-color, .2);
}
&.add {
background: $accent-color;
&:hover {
background-color: rgba($accent-color, .8);
}
}
}
.name {
font-size: .8rem;
color: #8a868a;
}
}
.app-container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
padding-bottom: 2rem;
.sp-container {
display: flex;
justify-content: center;
align-items: center;
width: calc(82px + 2rem);
height: calc(82px + 2rem);
}
.app-wrap {
outline: none;
display: flex;
flex-direction: column;
align-items: center;
max-width: 150px;
.morph-card {
cursor: pointer;
animation: all .2s;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
height: 80px;
width: 80px;
margin: 1rem;
border-radius: .5rem;
border: 1px solid $accent-color;
font-weight: 800;
background-color: $primary-dark;
transition: background-color .2s ease-in-out;
background-image:
linear-gradient(transparent 11px, rgba($accent-color,.5) 12px, transparent 12px),
linear-gradient(90deg, transparent 11px, rgba($accent-color,.5) 12px, transparent 12px);
background-size: 100% 12px, 12px 100%;
&:hover {
background-color: rgba($accent-color,.2);
}
&.add {
background: $accent-color;
&:hover {
background-color: rgba($accent-color,.8);
}
}
}
.name {
font-size: .8rem;
color: #8a868a;
}
}
}
}
}
}

4
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html
View File

@@ -8,7 +8,7 @@
</ng-template>
<div class="table-wrapper">
<table [dataSource]="dataSource" mat-table class="full-width-table" matSort aria-label="Elements">
<table [dataSource]="dataSource" mat-table class="table" matSort aria-label="Elements">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -34,7 +34,7 @@
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="25"
<mat-paginator class="paginator" #paginator [length]="dataSource.totalResult" [pageSize]="25"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>

68
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.scss
View File

@@ -1,46 +1,48 @@
.table-wrapper {
overflow: auto;
overflow: auto;
table, mat-paginator {
width: 100%;
background-color: #2d2e30;
.table,
.paginator {
width: 100%;
background-color: #2d2e30;
td, th {
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
td,
th {
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.margin-neg {
margin-left: -1rem;
}
&:last-child {
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
.margin-neg {
margin-left: -1rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
outline: none;
cursor: pointer;
}
tr {
outline: none;
outline: none;
}

4
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
View File

@@ -82,8 +82,8 @@
description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
<app-user-grants [context]="userGrantContext" [projectId]="projectId"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
[allowCreate]="project?.state == ProjectState.PROJECTSTATE_ACTIVE && (['user.grant.write'] | hasRole | async)"
[allowDelete]="project?.state == ProjectState.PROJECTSTATE_ACTIVE && (['user.grant.delete'] | hasRole | async)">
[allowCreate]="(['user.grant.write'] | hasRole) | async"
[allowDelete]="(['user.grant.delete'] | hasRole) | async">
</app-user-grants>
</app-card>
</ng-template>

182
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
View File

@@ -1,130 +1,82 @@
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
margin-bottom: 1rem;
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
margin-bottom: 1rem;
.fill-space {
flex: 1;
.fill-space {
flex: 1;
}
.state-button {
border-radius: .5rem;
}
a {
display: block;
}
h1 {
font-size: 1.2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
}
.full-width {
padding-top: 1rem;
width: 100%;
display: block;
.icon-button {
margin-right: 1rem;
}
.state-button {
border-radius: .5rem;
.desc {
font-size: .9rem;
color: #8795a1;
}
a {
display: block;
}
h1 {
font-size: 1.2rem;
margin: 0 1rem;
margin-left: 2rem;
font-weight: normal;
}
.full-width {
padding-top: 1rem;
width: 100%;
display: block;
.icon-button {
margin-right: 1rem;
}
button {
border-radius: .5rem;
}
.desc {
font-size: .9rem;
color: #8795a1;
}
.zitadel-warning {
font-size: 14px;
color: rgb(201,51,71);
}
.zitadel-warning {
font-size: 14px;
color: rgb(201, 51, 71);
}
}
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
mat-form-field {
flex: 1 1 33%;
margin: 0 .5rem;
}
}
.side {
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
.row {
display: flex;
margin-bottom: 0.5rem;
align-items: center;
button {
display: none;
visibility: hidden;
}
&:hover {
button {
display: inline-block;
visibility: visible;
mat-icon {
font-size: 1.2rem;
}
}
}
.first {
flex: 1;
font-size: 0.8rem;
margin-right: 0.5rem;
}
.fill-space {
flex: 1;
}
.second {
font-size: 0.8rem;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
}
.details {
margin-bottom: 1rem;
border-bottom: 1px solid #81868a40;
padding-bottom: 1rem;
a {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
.row {
display: flex;
margin-bottom: .5rem;
align-items: center;
.side-section {
color: #8795a1;
}
}
.first {
flex: 1;
font-size: .8rem;
margin-right: .5rem;
}
.mat-tab-label {
min-width: 100px !important;
.second {
font-size: .8rem;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 1rem;
}
}
}
.flex-col {
display: flex;
flex-direction: column;
}
}
.mat-tab-label {
min-width: 100px !important;
}
.flex-col {
display: flex;
flex-direction: column;
}
}

4
console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
View File

@@ -16,7 +16,7 @@
</ng-template>
<div class="table-wrapper">
<table mat-table multiTemplateDataRows class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
<table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
@@ -74,7 +74,7 @@
</tr>
</table>
<mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]"
<mat-paginator class="paginator" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]"
[length]="dataSource.totalResult" (page)="loadGrantsPage($event.pageIndex, $event.pageSize)">
</mat-paginator>
</div>

86
console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss
View File

@@ -1,55 +1,57 @@
.rounded-button {
border-radius: .5rem;
border-radius: .5rem;
}
.table-wrapper {
overflow: auto;
overflow: auto;
table, mat-paginator {
width: 100%;
background-color: #2d2e30;
.table,
.paginator {
width: 100%;
background-color: #2d2e30;
td, th {
padding: 0 1rem;
td,
th {
padding: 0 1rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
&:last-child {
padding-right: 0;
}
.role {
display: inline-block;
border-radius: .5rem;
border: 1px solid #ffffff30;
padding: .5rem 1rem;
margin-top: .25rem;
margin-bottom: .25rem;
margin-left: 0;
margin-right: .5rem;
cursor: pointer;
}
}
tr {
outline: none;
}
tr.detail-row {
height: 0;
}
.selection {
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
border-radius: .5rem;
border: 1px solid #ffffff30;
padding: .5rem 1rem;
margin-top: .25rem;
margin-bottom: .25rem;
margin-left: 0;
margin-right: .5rem;
cursor: pointer;
}
}
tr {
outline: none;
}
tr.detail-row {
height: 0;
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
outline: none;
cursor: pointer;
}

4
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html
View File

@@ -24,8 +24,6 @@
item.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="fill-space"></span>
<div class="icons">
</div>
</div>
<button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
mat-icon-button>
@@ -53,8 +51,6 @@
item.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="fill-space"></span>
<div class="icons">
</div>
</div>
<button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
mat-icon-button>

369
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.scss
View File

@@ -1,20 +1,21 @@
.view-toggle {
width: 100%;
width: 100%;
display: flex;
justify-content: flex-end;
padding-bottom: .5rem;
border-bottom: 1px solid #2d2e30;
.anim-list {
display: flex;
justify-content: flex-end;
padding-bottom: .5rem;
border-bottom: 1px solid #2d2e30;
align-items: center;
}
.anim-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
button {
&.left-button {
margin-right: 1rem;
}
button {
&.left-button {
margin-right: 1rem;
}
}
}
.spinner {
@@ -22,191 +23,185 @@
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
box-sizing: border-box;
h2 {
padding: 0 1rem;
flex-basis: 100%;
}
.item {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 250px;
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
text-decoration: none;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1rem;
border-radius: .5rem;
box-sizing: border-box;
min-height: 166px;
&.inactive {
color: #8795a1;
}
img {
height: 50px;
width: 50px;
margin: 1rem;
}
.text-part {
flex: 1;
display: flex;
flex-direction: column;
min-height: 70px;
padding: .5rem 0;
.top {
font-size: .8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #8795a1;
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: .5rem;
}
.description {
font-size: .8rem;
}
.created {
font-size: .8rem;
color: #8795a1;
}
.organization {
display: flex;
align-items: center;
margin-top: 1rem;
.org_avatar {
height: 25px;
width: 25px;
border-radius: 50%;
margin: 0;
margin-right: 1rem;
}
}
.fill-space {
flex: 1;
}
span {
margin: 2px 0;
}
}
.edit-button {
opacity: 0;
user-select: none;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: .25rem;
color: #8795a1;
&.selected {
opacity: 1;
}
}
&:hover {
.edit-button {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
.icon {
opacity: 1;
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
.add-project-button {
z-index: 100;
flex-basis: 250px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 166px;
border-radius: .5rem;
margin: 1rem;
box-sizing: border-box;
h2 {
padding: 0 1rem;
flex-basis: 100%;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
.item {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 250px;
display: flex;
text-decoration: none;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
min-height: 166px;
&:hover {
background-color: #ffffff25;
&.inactive {
color: #8795a1;
}
img {
height: 50px;
width: 50px;
margin: 1rem;
}
.text-part {
flex: 1;
display: flex;
flex-direction: column;
min-height: 70px;
padding: 0.5rem 0;
.top {
font-size: 0.8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #8795a1;
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.description {
font-size: 0.8rem;
}
.created {
font-size: 0.8rem;
color: #8795a1;
}
.organization {
display: flex;
align-items: center;
margin-top: 1rem;
.org_avatar {
height: 25px;
width: 25px;
border-radius: 50%;
margin: 0;
margin-right: 1rem;
}
}
.fill-space {
flex: 1;
}
.icons {
margin-top: 1rem;
transition: all 0.3s;
opacity: 0;
.icon {
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #8795a1;
}
}
span {
margin: 2px 0;
}
}
.edit-button {
opacity: 0;
user-select: none;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: 0.25rem;
color: #8795a1;
&.selected {
opacity: 1;
}
}
&:hover {
.edit-button {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
.icon {
opacity: 1;
}
.icon,
span {
&.disabled {
color: gray;
}
}
}
.add-project-button {
z-index: 100;
flex-basis: 250px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 166px;
border-radius: 0.5rem;
margin: 1rem;
box-sizing: border-box;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
&:hover {
background-color: #ffffff25;
.icon,
span {
&.disabled {
color: gray;
}
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
}
.n-items {
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
flex-basis: 100%;
}
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
flex-basis: 100%;
}

8
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html
View File

@@ -3,7 +3,7 @@
</app-owned-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button (click)="grid = true" mat-icon-button>
<button (click)="grid = true" mat-icon-button class="icon-button">
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
@@ -30,7 +30,7 @@
<div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table class="background-style" mat-table [dataSource]="dataSource">
<table class="table background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
@@ -79,7 +79,7 @@
[routerLink]="['/projects', row.projectId]"></tr>
</table>
<mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
(page)="changePage($event)"></mat-paginator>
<mat-paginator class="paginator background-style" [length]="totalResult" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More