diff --git a/src/frontend/angular.json b/src/frontend/angular.json
index fce8be0ee7abf983802ee8e69193bae54d936d5f..3c62ea23c5e20545187a05f3ffbb7b583ffc121a 100644
--- a/src/frontend/angular.json
+++ b/src/frontend/angular.json
@@ -35,8 +35,9 @@
"inlineStyleLanguage": "scss",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
- "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
- "src/styles.scss"
+ "src/theme.less",
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+ "src/styles.scss"
],
"scripts": [
]
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index ae59efc36dab730c367b86e23e9fd50ebae60a45..4fb8d74d8055c943dd82f020aab32ddb1950e7a8 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -14,17 +14,19 @@
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/forms": "^14.2.0",
- "@angular/material": "^14.2.5",
- "@angular/material-moment-adapter": "^14.2.7",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0",
+ "@fontsource/open-sans": "^5.1.1",
+ "@fortawesome/angular-fontawesome": "^0.11.1",
+ "@fortawesome/fontawesome-svg-core": "~1.2.36",
+ "@fortawesome/free-brands-svg-icons": "^5.15.4",
+ "@fortawesome/free-regular-svg-icons": "^5.15.4",
+ "@fortawesome/free-solid-svg-icons": "^5.15.4",
"jwt-decode": "^3.1.2",
- "ngx-toastr": "^15.2.1",
+ "ng-zorro-antd": "^14.0.0",
"rxjs": "~7.5.0",
- "three": "0.124.0",
"tslib": "^2.3.0",
- "vanta": "^0.5.24",
"zone.js": "~0.11.4"
},
"devDependencies": {
@@ -630,36 +632,6 @@
"semver": "bin/semver.js"
}
},
- "node_modules/@angular/material": {
- "version": "14.2.7",
- "resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.7.tgz",
- "integrity": "sha512-WXHh8pEStpgkXZJmYOg2cI8BSHkV82ET4XTJCNPdveumaCn1UYnaNzsXD13kw5z+zmy8CufhFEzdXTrv/yt7KQ==",
- "dependencies": {
- "tslib": "^2.3.0"
- },
- "peerDependencies": {
- "@angular/animations": "^14.0.0 || ^15.0.0",
- "@angular/cdk": "14.2.7",
- "@angular/common": "^14.0.0 || ^15.0.0",
- "@angular/core": "^14.0.0 || ^15.0.0",
- "@angular/forms": "^14.0.0 || ^15.0.0",
- "@angular/platform-browser": "^14.0.0 || ^15.0.0",
- "rxjs": "^6.5.3 || ^7.4.0"
- }
- },
- "node_modules/@angular/material-moment-adapter": {
- "version": "14.2.7",
- "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-14.2.7.tgz",
- "integrity": "sha512-uadhugTqgETxCTis4da/TpYfIUQDQSfGAxgH1n93eFNhGdW+aof3T4uKcbZ5d18RzU+lgO6RELuPnWW2PPlmCA==",
- "dependencies": {
- "tslib": "^2.3.0"
- },
- "peerDependencies": {
- "@angular/core": "^14.0.0 || ^15.0.0",
- "@angular/material": "14.2.7",
- "moment": "^2.18.1"
- }
- },
"node_modules/@angular/platform-browser": {
"version": "14.2.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.6.tgz",
@@ -715,6 +687,31 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
+ "node_modules/@ant-design/colors": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-5.1.1.tgz",
+ "integrity": "sha512-Txy4KpHrp3q4XZdfgOBqLl+lkQIc3tEvHXOimRN1giX1AEC7mGtyrO9p8iRGJ3FLuVMGa2gNEzQyghVymLttKQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@ctrl/tinycolor": "^3.3.1"
+ }
+ },
+ "node_modules/@ant-design/icons-angular": {
+ "version": "14.1.0",
+ "resolved": "https://registry.npmjs.org/@ant-design/icons-angular/-/icons-angular-14.1.0.tgz",
+ "integrity": "sha512-SvWi8p4L+cCfTGtezeUq1s8kahZEO1UVf7ZR615Fix3c2l9OnAJi+niDkq2fZHjpiarFrt8HoZ2EhMAMN7jfbg==",
+ "license": "MIT",
+ "dependencies": {
+ "@ant-design/colors": "^5.0.0",
+ "tslib": "^2.0.0"
+ },
+ "peerDependencies": {
+ "@angular/common": "^14.1.0",
+ "@angular/core": "^14.1.0",
+ "@angular/platform-browser": "^14.1.0",
+ "rxjs": "^6.4.0 || ^7.4.0"
+ }
+ },
"node_modules/@assemblyscript/loader": {
"version": "0.10.1",
"resolved": "https://registry.npmjs.org/@assemblyscript/loader/-/loader-0.10.1.tgz",
@@ -2690,6 +2687,15 @@
"postcss-selector-parser": "^6.0.10"
}
},
+ "node_modules/@ctrl/tinycolor": {
+ "version": "3.6.1",
+ "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+ "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/@discoveryjs/json-ext": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -2715,6 +2721,87 @@
"node": ">=12"
}
},
+ "node_modules/@fontsource/open-sans": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.1.1.tgz",
+ "integrity": "sha512-Wfio5om0XH24ZUu6FfW4r50e4xLdoLzvd8midtqUFT2unniyWQj6GJ05RW1YQsHp4Sug3i+agFBIxEmYQzUHSg==",
+ "license": "OFL-1.1"
+ },
+ "node_modules/@fortawesome/angular-fontawesome": {
+ "version": "0.11.1",
+ "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.11.1.tgz",
+ "integrity": "sha512-Ngzm5MVxk76ZhYpPTNOI/mpYNz9bzwfBXC5L9mktLgOONjBuYBPVt+bH8lny8hNtDk0ppZzXsMN6CO7hckdfnw==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.4.0"
+ },
+ "peerDependencies": {
+ "@angular/core": "^14.0.0",
+ "@fortawesome/fontawesome-svg-core": "~1.2.27 || ~1.3.0-beta2 || ^6.1.0"
+ }
+ },
+ "node_modules/@fortawesome/fontawesome-common-types": {
+ "version": "0.2.36",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+ "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==",
+ "hasInstallScript": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/fontawesome-svg-core": {
+ "version": "1.2.36",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz",
+ "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==",
+ "hasInstallScript": true,
+ "license": "MIT",
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "^0.2.36"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-brands-svg-icons": {
+ "version": "5.15.4",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
+ "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
+ "hasInstallScript": true,
+ "license": "(CC-BY-4.0 AND MIT)",
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "^0.2.36"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-regular-svg-icons": {
+ "version": "5.15.4",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz",
+ "integrity": "sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==",
+ "hasInstallScript": true,
+ "license": "(CC-BY-4.0 AND MIT)",
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "^0.2.36"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/@fortawesome/free-solid-svg-icons": {
+ "version": "5.15.4",
+ "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+ "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
+ "hasInstallScript": true,
+ "license": "(CC-BY-4.0 AND MIT)",
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": "^0.2.36"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -3202,7 +3289,8 @@
"version": "0.125.3",
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.125.3.tgz",
"integrity": "sha512-tUPMzKooKDvMOhqcNVUPwkt+JNnF8ASgWSsrLgleVd0SjLj4boJhteSsF9f6YDjye0mmUjO+BDMWW83F97ehXA==",
- "dev": true
+ "dev": true,
+ "license": "MIT"
},
"node_modules/@types/ws": {
"version": "8.5.3",
@@ -4861,6 +4949,40 @@
"integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==",
"dev": true
},
+ "node_modules/date-fns": {
+ "version": "2.30.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+ "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+ "license": "MIT",
+ "dependencies": {
+ "@babel/runtime": "^7.21.0"
+ },
+ "engines": {
+ "node": ">=0.11"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/date-fns"
+ }
+ },
+ "node_modules/date-fns/node_modules/@babel/runtime": {
+ "version": "7.26.0",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+ "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+ "license": "MIT",
+ "dependencies": {
+ "regenerator-runtime": "^0.14.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/date-fns/node_modules/regenerator-runtime": {
+ "version": "0.14.1",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+ "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+ "license": "MIT"
+ },
"node_modules/date-format": {
"version": "4.0.14",
"resolved": "https://registry.npmjs.org/date-format/-/date-format-4.0.14.tgz",
@@ -8183,17 +8305,24 @@
"integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
"dev": true
},
- "node_modules/ngx-toastr": {
- "version": "15.2.1",
- "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-15.2.1.tgz",
- "integrity": "sha512-Fyik8+sTbmX4NftVWWd3SIaeH8qlRU0emAfpey/AXsXuUEXgOOXKKnVPLmMAK7XL7xLy0c/+UsYBwlPK4TJcmA==",
+ "node_modules/ng-zorro-antd": {
+ "version": "14.0.0",
+ "resolved": "https://registry.npmjs.org/ng-zorro-antd/-/ng-zorro-antd-14.0.0.tgz",
+ "integrity": "sha512-KqWyplJDvlHEarWhyAlexFGovQIhMHkwOmsJk0MmC0NFgU+WA9GgclZG3Z6sK8q9o0XXz7zPKmMzufcJyM+ghQ==",
+ "license": "MIT",
"dependencies": {
+ "@angular/cdk": "^14.1.0",
+ "@ant-design/icons-angular": "^14.1.0",
+ "date-fns": "^2.16.1",
"tslib": "^2.3.0"
},
"peerDependencies": {
- "@angular/common": ">=14.0.0-0",
- "@angular/core": ">=14.0.0-0",
- "@angular/platform-browser": ">=14.0.0-0"
+ "@angular/animations": "^14.1.0",
+ "@angular/common": "^14.1.0",
+ "@angular/core": "^14.1.0",
+ "@angular/forms": "^14.1.0",
+ "@angular/platform-browser": "^14.1.0",
+ "@angular/router": "^14.1.0"
}
},
"node_modules/nice-napi": {
@@ -11179,11 +11308,6 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"dev": true
},
- "node_modules/three": {
- "version": "0.124.0",
- "resolved": "https://registry.npmjs.org/three/-/three-0.124.0.tgz",
- "integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg=="
- },
"node_modules/through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -11478,11 +11602,6 @@
"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
}
},
- "node_modules/vanta": {
- "version": "0.5.24",
- "resolved": "https://registry.npmjs.org/vanta/-/vanta-0.5.24.tgz",
- "integrity": "sha512-fvieEbHy1ZS23zrcX+topzqAgA4Uct1enngOEWLFBgs9TtOf6RDFOYatH7KSVdrABzQDMCQ5myQy+nTSZZwLzg=="
- },
"node_modules/vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index ec98eadeba46beee7ab1cc1a120db5224dfce19a..57533321b8345aab91ed0e8205d09fb212453725 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -16,17 +16,19 @@
"@angular/compiler": "^14.2.0",
"@angular/core": "^14.2.0",
"@angular/forms": "^14.2.0",
- "@angular/material": "^14.2.5",
- "@angular/material-moment-adapter": "^14.2.7",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/router": "^14.2.0",
+ "@fontsource/open-sans": "^5.1.1",
+ "@fortawesome/angular-fontawesome": "^0.11.1",
+ "@fortawesome/fontawesome-svg-core": "~1.2.36",
+ "@fortawesome/free-brands-svg-icons": "^5.15.4",
+ "@fortawesome/free-regular-svg-icons": "^5.15.4",
+ "@fortawesome/free-solid-svg-icons": "^5.15.4",
"jwt-decode": "^3.1.2",
- "ngx-toastr": "^15.2.1",
+ "ng-zorro-antd": "^14.0.0",
"rxjs": "~7.5.0",
- "three": "0.124.0",
"tslib": "^2.3.0",
- "vanta": "^0.5.24",
"zone.js": "~0.11.4"
},
"devDependencies": {
@@ -35,6 +37,7 @@
"@angular/compiler-cli": "^14.2.0",
"@angular/localize": "^14.2.6",
"@types/jasmine": "~4.0.0",
+ "@types/node": "20.11.7",
"@types/offscreencanvas": "^2019.7.0",
"@types/three": "0.125.3",
"jasmine-core": "~4.3.0",
@@ -44,7 +47,6 @@
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"moment": "^2.29.4",
- "typescript": "~4.7.2",
- "@types/node" : "20.11.7"
+ "typescript": "~4.7.2"
}
}
diff --git a/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.html b/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.html
index 57268bd213a748b933dd6676a648185c2cf532ec..1883a8ba54ec5639b99a6124e9d0aa22f361c8eb 100644
--- a/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.html
+++ b/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.html
@@ -1,27 +1,10 @@
-
- <mat-card>
- <div class="card-header-root">
- <div matTooltip="{{analysis.active? 'Active' : 'Inactive'}}" class="{{analysis.active? 'dot-green' : 'dot-red'}}">
- </div>
- <mat-card-header>
- <div class="card-header">
- <mat-card-title>
- {{title}}
- </mat-card-title>
- </div>
- <mat-card-subtitle>{{subtitle}}</mat-card-subtitle>
- </mat-card-header>
- </div>
-
-
- <img mat-card-image [src]="src" [alt]="alt">
- <mat-card-content>
- <p [innerHtml]="description">
-
- </p>
- </mat-card-content>
- <mat-card-actions align="end">
- <button mat-button (click)="openDialog()">DETAILS</button>
- </mat-card-actions>
- </mat-card>
-
+<nz-card [nzCover]="coverTemplate" [nzActions]="[actionDetails]">
+ <nz-card-meta [nzTitle]="title" [nzDescription]="subtitle"></nz-card-meta>
+ <p [innerHtml]="description"></p>
+</nz-card>
+<ng-template #coverTemplate>
+ <img [src]="src" [alt]="alt" />
+</ng-template>
+<ng-template #actionDetails>
+ <button nz-button nzType="primary" (click)="openDialog()">DETAILS</button>
+</ng-template>
diff --git a/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.scss b/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.scss
index cdcc930f900e70d9e2b4be16f9cb5f1c52ba2419..22f6eb9413e412c450636bf04e33b51a6e03cff1 100644
--- a/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.scss
+++ b/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.scss
@@ -1,19 +1,3 @@
-mat-card {
- width: calc(100% - 70px);
- height: 410px;
-}
-
-mat-card img{
- object-fit: cover;
- height: 150px;
- width: 100%;
-}
-
-.mat-card-title
-{
- margin-bottom: 0px !important;
-}
-
.card-header-root{
margin-bottom: 20px;
align-items: center;
@@ -38,4 +22,4 @@ mat-card img{
.dot-red{
@extend .dot;
background : red;
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.spec copy.ts b/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.spec copy.ts
deleted file mode 100644
index ed5fbc5eb06063c3b870037cac7c13c8df8e72d3..0000000000000000000000000000000000000000
--- a/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.spec copy.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AnalysisCard } from './analysis-card.component';
-
-describe('HomeComponent', () => {
- let component: AnalysisCard;
- let fixture: ComponentFixture<AnalysisCard>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ AnalysisCard ]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(AnalysisCard);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.ts b/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.ts
index d91d3624c65d06a7190dfeec3d1c007f1572692f..1c9a7ae79da1f4d5992466b3ef043874cbac0580 100644
--- a/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.ts
+++ b/src/frontend/src/app/analytics-engine/analysis-card/analysis-card.component.ts
@@ -1,9 +1,9 @@
import { Component, Input, OnInit} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
import { VerbsModal } from './verbs-modal/verbs.modal.component';
import { AnalyticsTokenConsent } from '../analytics-engine.component';
import { Provider } from 'src/app/services/api.service';
import { environment } from '../../../environments/environment'
+import { NzModalService } from 'ng-zorro-antd/modal'
@Component({
selector: 'app-analysis-card',
@@ -19,11 +19,11 @@ export class AnalysisCard implements OnInit {
title : string = "";
subtitle : string = "";
src : string = "/assets/ng2-charts_12.png"
- alt : string= ""
+ alt : string= ""
description : string | null = ""
- constructor(public dialog: MatDialog) {
-
+ constructor(public dialog: NzModalService) {
+
}
ngOnInit(): void {
@@ -33,12 +33,16 @@ export class AnalysisCard implements OnInit {
}
openDialog(): void {
- const dialogRef = this.dialog.open(VerbsModal, {
- data: {analysis : this.analysis,providers : this.providers}
-
+ console.log("external:", this.analysis, this.providers);
+ const dialogRef = this.dialog.create({
+ nzContent: VerbsModal,
+ nzComponentParams: {
+ analysis: this.analysis,
+ providers: this.providers
+ }
});
- dialogRef.afterClosed().subscribe(result => {
+ dialogRef.afterClose.subscribe(result => {
if(result)
this.reloadList()
});
diff --git a/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.html b/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.html
index e58e16e7591b6fb4b9112419088679b1276f7255..fe576c22af8644d79a9ef4e07c327d02732bb7cc 100644
--- a/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.html
+++ b/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.html
@@ -1,86 +1,85 @@
-<div>
- <h1 mat-dialog-title class="heading">
- <span matTooltip="{{analysis.active? 'Active' : 'Inactive'}}" class="{{analysis.active? 'dot-green' : 'dot-red'}}">
- </span>
+<div *ngIf="analysis && providers">
+ <div *nzModalTitle>
+ <span nz-tooltip nzTooltipTitle="{{analysis.active? 'Active' : 'Inactive'}}" class="{{analysis.active? 'dot-green' : 'dot-red'}}">
+ </span>
<span class="title">
{{analysis.name}}:
</span>
<span i18n="Modal title | @@verbsModalTitle">
Consent
</span>
- </h1>
- <div mat-dialog-content>
- <div *ngIf="analysis.active">
- <b i18n="@@analysisIsActiveNote">This analysis is already active since you consented to all necessary data collections.</b>
- <h2 i18n="@@listOfConsentedVerbs">List of consented data collections</h2>
- <mat-list>
- <i *ngIf="!hasConstentedElements()" class="no-elements">There are no consented elements.</i>
- <div *ngFor=" let providerMap of providerMapping">
- <div *ngIf="!!providerMap.consentedVerbs.length">
- <b>{{providerMap.provider.name}}</b>
- <mat-list-item *ngFor="let verb of providerMap.consentedVerbs">
- <div class="row-center">
- <mat-icon fontIcon="check"></mat-icon>
- {{verb.description}}
- </div>
- </mat-list-item>
- </div>
- </div>
- </mat-list>
- </div>
- <div *ngIf="!analysis.active" class="col">
- <div class="alert" i18n="@@analysisNotActiveAlert">
- This analysis is not active, since you did not consent to the necessary data collections. You have to consent to all necessary data collections to active this analysis. You can click the following button to consent to all data collections. You can navigate to the consent managament to revert this.
- </div>
- <div>
- <button mat-stroked-button color="primary" i18n="accept all button @@acceptAllButton" (click)="doAccept()">
- <mat-icon fontIcon="check"></mat-icon> Consent to all and activate analysis
- </button>
+ </div>
+ <div *ngIf="analysis.active">
+ <b i18n="@@analysisIsActiveNote">This analysis is already active since you consented to all necessary data collection.</b>
+ <h2 i18n="@@listOfConsentedVerbs">List of consented data collection</h2>
+ <nz-list>
+ <i *ngIf="!hasConsentedElements()" class="no-elements">There are no consented elements.</i>
+ <div *ngFor="let providerMap of providerMapping">
+ <div *ngIf="!!providerMap.consentedVerbs.length">
+ <b>{{providerMap.provider.name}}</b>
+ <nz-list-item *ngFor="let verb of providerMap.consentedVerbs">
+ <nz-list-item-meta [nzAvatar]="checkAvatar"></nz-list-item-meta>
+ {{verb.description}}
+ </nz-list-item>
+ </div>
</div>
- </div>
+ </nz-list>
+ </div>
+ <div *ngIf="!analysis.active" class="col">
+ <div class="alert" i18n="@@analysisNotActiveAlert">
+ This analysis is not active, since you did not consent to the necessary data collection. You have to consent to all necessary data collection to activate this analysis. You can click the following button to consent to all data collection. You can navigate to the consent management to revert this.
+ </div>
+ <div>
+ <button nz-button nzType="dashed" i18n="accept all button @@acceptAllButton" (click)="doAccept()">
+ <fa-icon [icon]="faCheck"></fa-icon>
+ </button>
+ </div>
</div>
- <div class="row" *ngIf="!analysis.active">
- <div class="col">
- <h2 i18n="@@accepted">Consented</h2>
- <i *ngIf="!hasConstentedElements()" class="no-elements">There are no consented elements.</i>
- <mat-list>
- <div *ngFor=" let providerMap of providerMapping">
- <div *ngIf="!!providerMap.consentedVerbs.length">
- <b>{{providerMap.provider.name}}</b>
+ <div class="row" *ngIf="!analysis.active">
+ <div class="col">
+ <h2 i18n="@@accepted">Consented</h2>
+ <i *ngIf="!hasConsentedElements()" class="no-elements">There are no consented elements.</i>
+ <nz-list>
+ <div *ngFor=" let providerMap of providerMapping">
+ <div *ngIf="!!providerMap.consentedVerbs.length">
+ <b>{{providerMap.provider.name}}</b>
- <mat-list-item *ngFor="let verb of providerMap.consentedVerbs">
- <div class="row-center">
- <mat-icon fontIcon="check"></mat-icon>
- {{verb.description}}
- </div>
- </mat-list-item>
- </div>
- </div>
- </mat-list>
- </div>
+ <nz-list-item *ngFor="let verb of providerMap.consentedVerbs">
+ <nz-list-item-meta [nzAvatar]="checkAvatar"></nz-list-item-meta>
+ {{verb.description}}
+ </nz-list-item>
+ </div>
+ </div>
+ </nz-list>
+ </div>
- <div class="col">
- <h2 i18n="@@notAccepted">Not consented</h2>
- <i *ngIf="!hasNotConstentedElements()">There are no unconsented elements.</i>
- <mat-list>
- <div *ngFor="let providerMap of providerMapping">
- <div *ngIf="!!providerMap.notConsentedVerbs.length">
- <b>{{providerMap.provider.name}}</b>
- <mat-list-item *ngFor="let verb of providerMap.notConsentedVerbs">
- <div class="row-center">
- <mat-icon fontIcon="close"></mat-icon>
- {{verb.description}}
- </div>
- </mat-list-item>
- </div>
- </div>
- </mat-list>
+ <div class="col">
+ <h2 i18n="@@notAccepted">Not consented</h2>
+ <i *ngIf="!hasNotConsentedElements()">There are no disallowed elements.</i>
+ <nz-list>
+ <div *ngFor="let providerMap of providerMapping">
+ <div *ngIf="!!providerMap.notConsentedVerbs.length">
+ <b>{{providerMap.provider.name}}</b>
+ <nz-list-item *ngFor="let verb of providerMap.notConsentedVerbs">
+ <nz-list-item-meta [nzAvatar]="closeAvatar"></nz-list-item-meta>
+ {{verb.description}}
+ </nz-list-item>
+ </div>
+ </div>
+ </nz-list>
- </div>
</div>
</div>
- <div mat-dialog-actions>
- <button mat-button [mat-dialog-close]="" cdkFocusInitial i18n="Close button @@close">Close</button>
+
+ <div *nzModalFooter>
+ <button nz-button nzType="primary" i18n="Close button @@close" (click)="handleClose()">Close</button>
</div>
+</div>
+<ng-template #checkAvatar>
+ <fa-icon [icon]="faCheck"></fa-icon>
+</ng-template>
+<ng-template #closeAvatar>
+ <fa-icon [icon]="faTimes"></fa-icon>
+</ng-template>
diff --git a/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.scss b/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.scss
index 17338fdba15349c1832c745e31c3be52ab90fb4c..d295957b86e4970f097ad174dc984314bce98781 100644
--- a/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.scss
+++ b/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.scss
@@ -13,6 +13,7 @@
width : 12px;
border-radius: 50%;
margin-right: 10px;
+ display: inline-block;
}
.dot-green{
@@ -42,11 +43,6 @@
flex-direction: column;
}
-mat-list {
- max-height: 400px;
- overflow: auto;
-}
-
.alert {
background-color: #e2f0fc;
border-color: #d6e9f8;
diff --git a/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs.modal.component.ts b/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs.modal.component.ts
index ac85f2366db8782af736ae2b9260b9b2e924ead6..b2378fe1ccf4a3e6ad8788a03cf9dcf900809e8f 100644
--- a/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs.modal.component.ts
+++ b/src/frontend/src/app/analytics-engine/analysis-card/verbs-modal/verbs.modal.component.ts
@@ -1,65 +1,61 @@
-import { Component, Inject, Input } from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef, MatDialogModule} from '@angular/material/dialog';
+import { Component, Input, OnInit } from '@angular/core'
import {NgFor, NgIf} from '@angular/common';
-import {MatButtonModule} from '@angular/material/button';
import {FormsModule} from '@angular/forms';
-import {MatInputModule} from '@angular/material/input';
-import {MatFormFieldModule} from '@angular/material/form-field';
import { AnalyticsTokenConsent, XApiVerbConsentedWithProvider } from '../../analytics-engine.component';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatListModule } from '@angular/material/list';
-import { MatIconModule } from '@angular/material/icon';
import { AnalyticsTokenVerb, ApiService, Provider, ProviderAnalyticsToken } from 'src/app/services/api.service';
-import { ToastrService } from 'ngx-toastr';
-
+import { NzModalModule, NzModalRef } from 'ng-zorro-antd/modal'
+import { NzListModule } from 'ng-zorro-antd/list'
+import { NzButtonModule } from 'ng-zorro-antd/button'
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { NzMessageService } from 'ng-zorro-antd/message'
@Component({
selector: 'verbs-modal',
templateUrl: 'verbs-modal.component.html',
standalone: true,
styleUrls: ['verbs-modal.component.scss'],
- imports:[
- MatFormFieldModule,
- MatInputModule,
+ imports: [
FormsModule,
- MatButtonModule,
NgIf,
- MatDialogModule,
- MatTooltipModule,
- MatListModule,
NgFor,
- MatIconModule
- ],})
-export class VerbsModal {
+ NzModalModule,
+ NzListModule,
+ NzButtonModule,
+ NzToolTipModule,
+ FontAwesomeModule
+ ]})
+
+
+export class VerbsModal implements OnInit {
+ // icons
+ faCheck = faCheck;
+ faTimes = faTimes;
+
+ @Input() providers?: Provider[];
+ @Input() analysis?: AnalyticsTokenConsent;
- providers : Provider[];
- analysis : AnalyticsTokenConsent;
providerMapping : {
- provider : Provider,
- notConsentedVerbs : XApiVerbConsentedWithProvider[],
- consentedVerbs : XApiVerbConsentedWithProvider[],
+ provider : Provider,
+ notConsentedVerbs : XApiVerbConsentedWithProvider[],
+ consentedVerbs : XApiVerbConsentedWithProvider[],
analyticTokenVerbs : AnalyticsTokenVerb []}[] = [];
constructor(
- public dialogRef: MatDialogRef<VerbsModal>,
- @Inject(MAT_DIALOG_DATA) public data: { analysis : AnalyticsTokenConsent, providers : Provider[]},
+ public dialogRef: NzModalRef<VerbsModal>,
private _apiService: ApiService,
- private _toastrService: ToastrService
+ private _messageService: NzMessageService
) {
- this.analysis = data.analysis
- this.providers = data.providers
- this._apiService = _apiService
- this._toastrService = _toastrService
- this.calculateProviderMapping()
- }
-
- ngOnInit()
- {
- this.dialogRef.updateSize('80%');
+ this._apiService = _apiService
+ this._messageService = _messageService
}
// allocate verbs to relevant providers
calculateProviderMapping()
{
+ if(this.providers && this.analysis)
+ {
let mapping = [];
for (let provider of this.providers)
{
@@ -69,54 +65,51 @@ export class VerbsModal {
for(let verb of this.analysis.consentedVerbs)
if(verb.providerId == provider.id)
- consentedVerbs.push(verb)
+ consentedVerbs.push(verb)
for(let verb of this.analysis.notConsentedVerbs)
- if(verb.providerId == provider.id)
- notConsentedVerbs.push(verb)
+ if(verb.providerId == provider.id)
+ notConsentedVerbs.push(verb)
for(let verb of this.analysis.analyticTokenVerbs)
- if(verb.provider == provider.id)
- analyticTokenVerbs.push(verb)
+ if(verb.provider == provider.id)
+ analyticTokenVerbs.push(verb)
- if(consentedVerbs.length || notConsentedVerbs.length || analyticTokenVerbs.length)
+ if(consentedVerbs.length || notConsentedVerbs.length || analyticTokenVerbs.length)
mapping.push({provider, notConsentedVerbs, consentedVerbs, analyticTokenVerbs})
}
-
this.providerMapping = mapping
+ }
}
- ngOnChanges() {
-
- }
-
- onNoClick(): void {
- this.dialogRef.close()
+ handleClose(): void {
+ this.dialogRef.destroy();
}
doAccept()
{
- this._apiService.consentVerbsForAnalyticToken(this.analysis.id)
- .subscribe((analyticsTokens) =>
- {
- this._toastrService.success($localize`:@@toastMessageConsentSaved:The consent has been saved.`)
-
- this.dialogRef.close(true)
- })
+ if(this.analysis)
+ this._apiService.consentVerbsForAnalyticToken(this.analysis.id)
+ .subscribe((analyticsTokens) =>
+ {
+ this._messageService.success($localize`:@@toastMessageConsentSaved:The consent has been saved.`)
+ this.dialogRef.destroy()
+ })
}
- hasNotConstentedElements()
+ hasNotConsentedElements()
{
return !!this.providerMapping.reduce( (acc, providerMap) => !!providerMap.notConsentedVerbs.length || acc, false)
-
}
- hasConstentedElements()
+ hasConsentedElements()
{
return !!this.providerMapping.reduce( (acc, providerMap) => !!providerMap.consentedVerbs.length || acc, false)
+ }
+ ngOnInit() {
+ this.calculateProviderMapping()
}
-
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/app/analytics-engine/analytics-engine.component.html b/src/frontend/src/app/analytics-engine/analytics-engine.component.html
index 2644cb3ebb534bcd75b20acbabe385d5afbd30fa..7a99fbc9b716a32bdd04d5266dd5552df69e19fd 100644
--- a/src/frontend/src/app/analytics-engine/analytics-engine.component.html
+++ b/src/frontend/src/app/analytics-engine/analytics-engine.component.html
@@ -2,34 +2,23 @@
<h1 i18n="Analyses | @@analysis">
Analyses
</h1>
- <p>
-
- </p>
- <mat-tab-group mat-align-tabs="start">
- <mat-tab i18n-label="Aktive Analysen | @@activeAnalyses" label="Active analyses">
- <div *ngIf="!activeAnalyses.length">
+ <nz-tabset>
+ <nz-tab i18n-nzTitle="Aktive Analysen | @@activeAnalyses" nzTitle="Active analyses">
+ <div *ngIf="!activeAnalyses.length">
<h1 i18n="no analyses | @@noAnalyses">No analyses</h1>
- </div>
- <mat-grid-list cols="4" [gutterSize]="'10px'">
- <div *ngFor="let analysis of activeAnalyses">
- <mat-grid-tile>
- <app-analysis-card [providers]="providers" class="card" [analysis]="analysis" [reloadList]="reloadList">
- </app-analysis-card>
- </mat-grid-tile>
</div>
-
- </mat-grid-list>
- </mat-tab>
- <mat-tab i18n-label="Inaktive Analysen | @@inactiveAnalyses" label="Inactive analyses">
- <mat-grid-list cols="4" [gutterSize]="'10px'">
- <div *ngFor="let analysis of inactiveAnalyses">
- <mat-grid-tile>
- <app-analysis-card [providers]="providers" class="card" [analysis]="analysis" [reloadList]="reloadList">
- </app-analysis-card>
- </mat-grid-tile>
+ <div nz-row [nzGutter]="[16, 24]">
+ <div nz-col [nzSpan]="6" *ngFor="let analysis of activeAnalyses">
+ <app-analysis-card [providers]="providers" class="card" [analysis]="analysis" [reloadList]="reloadList"></app-analysis-card>
+ </div>
</div>
-
- </mat-grid-list>
- </mat-tab>
- </mat-tab-group>
+ </nz-tab>
+ <nz-tab i18n-nzTitle="Inaktive Analysen | @@inactiveAnalyses" nzTitle="Inactive analyses">
+ <div nz-row [nzGutter]="[16, 24]">
+ <div nz-col [nzSpan]="6" *ngFor="let analysis of inactiveAnalyses">
+ <app-analysis-card [providers]="providers" class="card" [analysis]="analysis" [reloadList]="reloadList"></app-analysis-card>
+ </div>
+ </div>
+ </nz-tab>
+ </nz-tabset>
</div>
diff --git a/src/frontend/src/app/analytics-engine/analytics-engine.component.spec copy.ts b/src/frontend/src/app/analytics-engine/analytics-engine.component.spec copy.ts
deleted file mode 100644
index 6eb4f195f56f2e9ded5001bd8e2e04d2062686b5..0000000000000000000000000000000000000000
--- a/src/frontend/src/app/analytics-engine/analytics-engine.component.spec copy.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AnalyticsEngineComponent } from './analytics-engine.component';
-
-describe('HomeComponent', () => {
- let component: AnalyticsEngineComponent;
- let fixture: ComponentFixture<AnalyticsEngineComponent>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- declarations: [ AnalyticsEngineComponent ]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(AnalyticsEngineComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/src/frontend/src/app/app-routing.module.ts b/src/frontend/src/app/app-routing.module.ts
index 6da908a718d260cb101703f0053cb132958b6201..802ef98fac467d2eaa3a7bb638eddfca3f507a01 100644
--- a/src/frontend/src/app/app-routing.module.ts
+++ b/src/frontend/src/app/app-routing.module.ts
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
-import { ConsentManagementComponent } from './consent-management/consent-management..component'
+import { ConsentManagementComponent } from './consent-management/consent-management.component'
import { MergeDataComponent } from './merge-data/merge-data.component'
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'
import { LoginPageComponent } from './login-page/login-page.component'
diff --git a/src/frontend/src/app/app.component.html b/src/frontend/src/app/app.component.html
index 4cfe814b9bb583cd9a2947872c459172047ecc26..ea94ceef30bdc8f5bfe161af90f908f757be622d 100644
--- a/src/frontend/src/app/app.component.html
+++ b/src/frontend/src/app/app.component.html
@@ -1,12 +1,10 @@
-<div class="mat-app-background" [ngClass]="{ 'dark-mode': isDarkModeOn }">
- <app-header></app-header>
- <main class="main">
- <div class="content">
- <div *ngIf="loading" class="loading-container flex-content-center">
- <mat-progress-bar mode="indeterminate"></mat-progress-bar>
- </div>
- <router-outlet></router-outlet>
- </div>
- </main>
- <app-footer></app-footer>
-</div>
+<nz-layout>
+ <app-header></app-header>
+ <nz-content>
+ <div class="loading-spinner" *ngIf="loading">
+ <img ngSrc="assets/spinner_small.gif" alt="loading" height="100" width="100" />
+ </div>
+ <router-outlet></router-outlet>
+ </nz-content>
+ <app-footer></app-footer>
+</nz-layout>
diff --git a/src/frontend/src/app/app.component.scss b/src/frontend/src/app/app.component.scss
index 7edb82723438cf9ce540065c7b6185d4ccdf5b09..feae825b844bc77805db7edb88a25945e7a6b733 100644
--- a/src/frontend/src/app/app.component.scss
+++ b/src/frontend/src/app/app.component.scss
@@ -1,6 +1,12 @@
-.main {
- padding-top: 64px;
- .content {
- min-height: calc(100vh - 128px);
- }
+.loading-spinner {
+ min-height: calc(100vh - 132px);
+ img {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+nz-content {
+ min-height: calc(100vh - 132px);
}
diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts
index b02fbcb88a410f17b8a34dfbda556c723d79bd18..0ff2ee586af187c0d5688c3c162722f1dc6759b9 100644
--- a/src/frontend/src/app/app.component.ts
+++ b/src/frontend/src/app/app.component.ts
@@ -4,80 +4,80 @@ import { delay, Subscription } from 'rxjs'
import { ThemeService } from './services/theme.service'
import { AuthService, Userinfo } from './services/auth.service'
import { WizardDialog } from './consent-management/wizard/wizard.component'
-import { MatDialog } from '@angular/material/dialog'
import { ApiService, UserConsentStatus } from './services/api.service'
import { Router } from '@angular/router'
+import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal'
@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
- @HostBinding('class') className = ''
- title = 'frontend'
- loading = false
- isDarkModeOn: boolean = false
- loggedIn: Userinfo | null = null
- dialogCloseSubscription?: Subscription
+ @HostBinding('class') className = ''
+ title = 'frontend'
+ loading = false
+ isDarkModeOn: boolean = false
+ loggedIn: Userinfo | null = null
+ dialogCloseSubscription?: Subscription
+ wizardDialogRef: NzModalRef<WizardDialog> | null = null
- constructor(
- private _loading: LoadingService,
- private _theme: ThemeService,
- private _authService: AuthService,
- private _dialog: MatDialog,
- private _apiService: ApiService,
- private _router: Router
- ) {
- this._theme.darkModeSubject.subscribe((x) => (this.isDarkModeOn = x))
- }
+ constructor(
+ private _loading: LoadingService,
+ private _theme: ThemeService,
+ private _authService: AuthService,
+ private _dialog: NzModalService,
+ private _apiService: ApiService,
+ private _router: Router
+ ) {
+ this._theme.darkModeSubject.subscribe((x) => (this.isDarkModeOn = x))
+ }
- ngOnInit() {
- this.listenToLoading()
- this._authService.loggedIn.subscribe((userInfo) => {
- if (userInfo && !userInfo.isProvider) {
- this._apiService.getUserConsentStatus().subscribe((userConsent) => {
- if (Object.values(userConsent.result).length === 0) this.openWizard(null)
- const isAnyOutdatedOrNone = !!Object.values(userConsent.result).find(
- ({ status }) => status === 'outdated' || status === 'none'
- )
- if (isAnyOutdatedOrNone) this.openWizard(userConsent)
- })
- }
- this.loggedIn = userInfo
+ ngOnInit() {
+ this.listenToLoading()
+ this._authService.loggedIn.subscribe((userInfo) => {
+ if (userInfo && !userInfo.isProvider) {
+ this._apiService.getUserConsentStatus().subscribe((userConsent) => {
+ if (Object.values(userConsent.result).length === 0) this.openWizard(null)
+ const isAnyOutdatedOrNone = !!Object.values(userConsent.result).find(
+ ({ status }) => status === 'outdated' || status === 'none'
+ )
+ if (isAnyOutdatedOrNone) this.openWizard(userConsent)
})
- }
-
- ngOnDestroy(): void {
- this.dialogCloseSubscription?.unsubscribe()
- }
+ }
+ this.loggedIn = userInfo
+ })
+ }
- listenToLoading(): void {
- this._loading.loadingSub
- .pipe(delay(0)) // This prevents a ExpressionChangedAfterItHasBeenCheckedError for subsequent requests
- .subscribe((loading) => {
- this.loading = loading
- })
- }
+ ngOnDestroy(): void {
+ this.dialogCloseSubscription?.unsubscribe()
+ }
- openWizard(userConsentStatus: UserConsentStatus | null): void {
- const isWizardOpen = this._dialog.getDialogById('wizard-dialog')
- if (!isWizardOpen) {
- const dialogRef = this._dialog.open(WizardDialog, {
- id: 'wizard-dialog',
- disableClose: true,
- maxWidth: '90vw',
- width: '90vw',
- data: {
- userConsentStatus
- }
- })
+ listenToLoading(): void {
+ this._loading.loadingSub
+ .pipe(delay(0)) // This prevents a ExpressionChangedAfterItHasBeenCheckedError for subsequent requests
+ .subscribe((loading) => {
+ this.loading = loading
+ })
+ }
- this.dialogCloseSubscription = dialogRef.afterClosed().subscribe((result) => {
- this._router
- .navigateByUrl('/', { skipLocationChange: true })
- .then(() => this._router.navigate(['/consent-management']))
- })
+ openWizard(userConsentStatus: UserConsentStatus | null): void {
+ if (!this.wizardDialogRef) {
+ this.wizardDialogRef = this._dialog.create({
+ nzContent: WizardDialog,
+ nzMaskClosable: false,
+ nzClosable: false,
+ nzWidth: '90vw',
+ nzComponentParams: {
+ data: userConsentStatus
}
+ })
+
+ this.dialogCloseSubscription = this.wizardDialogRef.afterClose.subscribe((result) => {
+ this._router
+ .navigateByUrl('/', { skipLocationChange: true })
+ .then(() => this._router.navigate(['/consent-management']))
+ })
}
+ }
}
diff --git a/src/frontend/src/app/app.module.ts b/src/frontend/src/app/app.module.ts
index 0dfef99a466bb0fbeaa5685afe2992ffd538148e..7a8cbfc448f4638f643b9b98095ead40c2fc5eae 100644
--- a/src/frontend/src/app/app.module.ts
+++ b/src/frontend/src/app/app.module.ts
@@ -8,8 +8,7 @@ import { LayoutModule } from '@angular/cdk/layout'
import { HeaderComponent } from './navigation/header/header.component'
import {
ConsentManagementComponent,
- PauseDataRecordingDialog
-} from './consent-management/consent-management..component'
+} from './consent-management/consent-management.component'
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'
import { LoginPageComponent } from './login-page/login-page.component'
import { WizardDialog } from './consent-management/wizard/wizard.component'
@@ -17,10 +16,8 @@ import { FooterComponent } from './navigation/footer/footer.component'
import { LegalNoticeComponent } from './legal-notice/legal-notice.component'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import {
- PauseVerbObjectWarningDialog,
PrivacySettingComponent
} from './consent-management/provider-settings/provider-setting.component'
-import { ToastrModule } from 'ngx-toastr'
import { HttpRequestInterceptor } from './interceptors/http-request-interceptor'
import { JwtInterceptor } from './interceptors/jwt.interceptor'
import { HomeComponent } from './home/home.component'
@@ -30,23 +27,52 @@ import { LocalStorageService } from './services/localstorage.service'
import { ThemeService } from './services/theme.service'
import { ProviderComponent } from './consent-management/provider/provider.component'
import { UserProfilComponent } from './user-profil/user-profil.component'
-import {
- ConfirmationDialog,
- DataDisclosureComponent
-} from './data-disclosure/data-disclosure.component'
+import { DataDisclosureComponent } from './data-disclosure/data-disclosure.component'
import { DataRemovalComponent } from './data-removal/data-removal.component'
-import { MaterialDesignModule } from './material-design/material-design.module'
import { DeleteDialog } from './dialogs/delete-dialog/delete-dialog'
import { ApplicationTokensComponent } from './consent-management/application-tokens/application-tokens.component'
import { AnalyticsTokensComponent } from './consent-management/analytics-tokens/analytics-tokens.component'
import { SchemaChangeComponent } from './consent-management/schema-change/schema-change.component'
import { ObjectChangesComponent } from './consent-management/schema-change/object-changes/object-changes.component'
import { CreateTokenDialog } from './dialogs/create-token-dialog/create-token-dialog'
-import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
import { OrderByPipe } from './order-by.pipe';
import { MergeDataComponent } from './merge-data/merge-data.component'
import { AnalyticsEngineComponent } from './analytics-engine/analytics-engine.component'
-import { AnalysisCard } from './analytics-engine/analysis-card/analysis-card.component'
+import { AnalysisCard } from './analytics-engine/analysis-card/analysis-card.component';
+import { NZ_I18N } from 'ng-zorro-antd/i18n';
+import { de_DE } from 'ng-zorro-antd/i18n';
+import { NgOptimizedImage, registerLocaleData } from '@angular/common'
+import de from '@angular/common/locales/de';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { NzTabsModule } from 'ng-zorro-antd/tabs'
+import { NzGridModule } from 'ng-zorro-antd/grid'
+import { NzCardModule } from 'ng-zorro-antd/card'
+import { NzButtonModule } from 'ng-zorro-antd/button'
+import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { NzLayoutModule } from 'ng-zorro-antd/layout'
+import { NzMenuModule } from 'ng-zorro-antd/menu'
+import { NzAffixModule } from 'ng-zorro-antd/affix'
+import { NzSwitchModule } from 'ng-zorro-antd/switch'
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown'
+import { NzCollapseModule } from 'ng-zorro-antd/collapse'
+import { NzListModule } from 'ng-zorro-antd/list'
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip'
+import { NzSelectModule } from 'ng-zorro-antd/select'
+import { NzInputModule } from 'ng-zorro-antd/input'
+import { NzSpaceModule } from 'ng-zorro-antd/space'
+import { NzFormModule } from 'ng-zorro-antd/form'
+import { NzBadgeModule } from 'ng-zorro-antd/badge'
+import { NzTagModule } from 'ng-zorro-antd/tag'
+import { NzTableModule } from 'ng-zorro-antd/table'
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'
+import { NzProgressModule } from 'ng-zorro-antd/progress'
+import { NzAlertModule } from 'ng-zorro-antd/alert'
+import { NzMessageService } from 'ng-zorro-antd/message'
+import { NzSpinModule } from 'ng-zorro-antd/spin'
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'
+
+registerLocaleData(de);
@NgModule({
declarations: [
@@ -63,9 +89,6 @@ import { AnalysisCard } from './analytics-engine/analysis-card/analysis-card.com
ProviderComponent,
UserProfilComponent,
DataDisclosureComponent,
- ConfirmationDialog,
- PauseDataRecordingDialog,
- PauseVerbObjectWarningDialog,
DataRemovalComponent,
DeleteDialog,
ApplicationTokensComponent,
@@ -78,26 +101,54 @@ import { AnalysisCard } from './analytics-engine/analysis-card/analysis-card.com
AnalysisCard,
AnalyticsEngineComponent
],
- imports: [
- BrowserModule,
- AppRoutingModule,
- MaterialDesignModule,
- LayoutModule,
- FormsModule,
- ReactiveFormsModule,
- HttpClientModule,
- ToastrModule.forRoot()
- ],
+ imports: [
+ BrowserModule,
+ AppRoutingModule,
+ LayoutModule,
+ FormsModule,
+ ReactiveFormsModule,
+ HttpClientModule,
+ BrowserAnimationsModule,
+ NzTabsModule,
+ NzGridModule,
+ NzCardModule,
+ NzButtonModule,
+ FontAwesomeModule,
+ NzLayoutModule,
+ NgOptimizedImage,
+ NzMenuModule,
+ NzAffixModule,
+ NzSwitchModule,
+ NzDropDownModule,
+ NzCollapseModule,
+ NzListModule,
+ NzToolTipModule,
+ NzSelectModule,
+ NzInputModule,
+ NzSpaceModule,
+ NzFormModule,
+ NzBadgeModule,
+ NzTagModule,
+ NzTableModule,
+ NzCheckboxModule,
+ NzProgressModule,
+ NzAlertModule,
+ NzModalModule,
+ NzSpinModule,
+ NzDatePickerModule
+ ],
providers: [
- {
- provide: APP_INITIALIZER,
- useFactory: appInitializer,
- multi: true,
- deps: [AuthService, LocalStorageService, ThemeService]
- },
- { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
- { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
- { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
+ {
+ provide: APP_INITIALIZER,
+ useFactory: appInitializer,
+ multi: true,
+ deps: [AuthService, LocalStorageService, ThemeService]
+ },
+ { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
+ { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+ { provide: NZ_I18N, useValue: de_DE },
+ NzModalService,
+ NzMessageService
],
bootstrap: [AppComponent]
})
diff --git a/src/frontend/src/app/consent-management/analytics-tokens/analytics-tokens.component.html b/src/frontend/src/app/consent-management/analytics-tokens/analytics-tokens.component.html
index 30b6237c20af66af7cf65cb5d1c268452022359f..3584fc00504a53d390b054c85e5eb2a337842431 100644
--- a/src/frontend/src/app/consent-management/analytics-tokens/analytics-tokens.component.html
+++ b/src/frontend/src/app/consent-management/analytics-tokens/analytics-tokens.component.html
@@ -1,195 +1,152 @@
<div class="analytics-tokens">
- <h1 i18n="Analytics Tokens | Header text analytics tokens page @@headerAnalyticsTokens">
- Analytics Tokens
- </h1>
- <button
+ <h1 i18n="Analytics Tokens | Header text analytics tokens page @@headerAnalyticsTokens">
+ Analytics Tokens
+ </h1>
+ <button
class="create-token-button"
(click)="onCreateAnalyticsTokenClick()"
- color="primary"
- mat-raised-button
+ nz-button
i18n="Create Token | Button Text @@createAnalyticsToken">
Create Token
-</button>
- <div>
- <table
- mat-table
- [dataSource]="this.analyticTokens"
- class="mat-elevation-z8 tokens-table"
- multiTemplateDataRows>
- <!-- Name Column -->
- <ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef>Name</th>
- <td mat-cell *matCellDef="let analyticToken">{{ analyticToken.name }}</td>
- </ng-container>
-
- <!-- Key Column -->
- <ng-container matColumnDef="key">
- <th mat-header-cell *matHeaderCellDef>Token</th>
- <td mat-cell *matCellDef="let analyticToken">
- <div class="token-info">
- <div class="abbr">{{ analyticToken.key | slice : 0 : 8 }}...</div>
- <mat-chip-list>
- <mat-chip *ngIf="analyticToken.isExpired">Expired</mat-chip>
- </mat-chip-list>
- </div>
- </td>
- </ng-container>
-
- <!-- Created Column -->
- <ng-container matColumnDef="created">
- <th mat-header-cell *matHeaderCellDef>Created At</th>
- <td mat-cell *matCellDef="let analyticToken">{{ analyticToken.created | date }}</td>
- </ng-container>
-
- <!-- Expires Column -->
- <ng-container matColumnDef="expires">
- <th mat-header-cell *matHeaderCellDef>Expires</th>
- <td mat-cell *matCellDef="let analyticToken">
- {{ analyticToken.expires ? (analyticToken.expires | date) : 'never' }}
- </td>
- </ng-container>
-
- <ng-container matColumnDef="expand">
- <th mat-header-cell *matHeaderCellDef aria-label="row actions"> </th>
- <td mat-cell *matCellDef="let analyticToken">
+ </button>
+ <div>
+ <nz-table #tokensTable
+ [nzData]="this.analyticTokens"
+ class="tokens-table">
+ <thead>
+ <tr>
+ <th></th>
+ <th>Name</th>
+ <th>Token</th>
+ <th>Created At</th>
+ <th>Expires</th>
+ </tr>
+ </thead>
+ <tbody>
+ <ng-container *ngFor="let analyticToken of tokensTable.data">
+ <tr>
+ <td [nzExpand]="expandSet.has(analyticToken.id)"
+ (nzExpandChange)="onExpandChange(analyticToken.id, $event)"></td>
+ <td>{{ analyticToken.name }}</td>
+ <td>
+ <div class="token-info">
+ <div class="abbr">{{ analyticToken.key | slice : 0 : 8 }}...</div>
+ <nz-tag *ngIf="analyticToken.isExpired">Expired</nz-tag>
+ </div>
+ </td>
+ <td>{{ analyticToken.created | date }}</td>
+ <td>{{ analyticToken.expires ? (analyticToken.expires | date) : 'never' }}</td>
+ </tr>
+ <tr [nzExpand]="expandSet.has(analyticToken.id)">
+ <td [attr.colspan]="columnsToDisplayWithExpand.length">
+ <div class="example-element-detail">
+ <div class="token-expanded-details">
+ <div class="action-buttons">
+ <input hidden="true"
+ #fileInput type="file"
+ (change)="uploadFileChanged($event)"
+ accept="image/png, image/jpeg"
+ />
+ <span *ngIf="selectedFile" class="file-indicator">
+ {{ selectedFile.name }}
+ <fa-icon [icon]="faTimes" (click)="this.selectedFile = null"></fa-icon>
+ </span>
<button
- mat-icon-button
- aria-label="expand row"
- (click)="
- selectedFile = null;
- expandedElement = expandedElement === analyticToken ? null : analyticToken;
- $event.stopPropagation()
- ">
- <mat-icon *ngIf="expandedElement !== analyticToken">keyboard_arrow_down</mat-icon>
- <mat-icon *ngIf="expandedElement === analyticToken">keyboard_arrow_up</mat-icon>
+ nz-button
+ nzType="primary"
+ (click)="onUploadButtonClick()">
+ <span i18n="@@uploadButton" *ngIf="!selectedFile">Select new image</span>
+ <span i18n="@@uploadButtonDoUpload" *ngIf="selectedFile">Upload selected image</span>
</button>
- </td>
- </ng-container>
-
- <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
- <ng-container matColumnDef="expandedDetail">
- <td
- mat-cell
- *matCellDef="let analyticToken"
- [attr.colspan]="columnsToDisplayWithExpand.length">
- <div
- class="example-element-detail"
- [@detailExpand]="analyticToken == expandedElement ? 'expanded' : 'collapsed'">
- <div class="token-expanded-details">
- <div class="action-buttons">
- <input hidden="true"
- #fileInput type="file"
- (change)="uploadFileChanged($event)"
- accept="image/png, image/jpeg"
- />
- <span *ngIf="selectedFile" class="file-indicator">
- {{selectedFile.name}}
- <mat-icon class="clear-icon" fontIcon="close" (click)="this.selectedFile = null"></mat-icon>
- </span>
- <button
- color="primary"
- mat-raised-button
- (click)="onUploadButtonClick()">
- <span i18n="@@uploadButton" *ngIf="!selectedFile">Select new image</span>
- <span i18n="@@uploadButtonDoUpload" *ngIf="selectedFile">Upload selected image</span>
- </button>
- <button
- mat-raised-button
- *ngIf="!analyticToken.isExpired"
- (click)="copyTokenToClipboard(analyticToken.key)"
- i18n="Copy Token @@copyToken">
- Copy Token
- </button>
- <button
- mat-raised-button
- color="warn"
- (click)="onDeleteTokenClick(analyticToken.id)"
- i18n="Delete Token @@deleteToken">
- Delete Token
- </button>
- </div>
- <div *ngIf="expandedElement?.image_path">
- <img height="200px" [src]="getImageSource()"/>
- </div>
- <br />
- <div *ngIf="!analyticToken.isExpired">
- <h2
- i18n="Available Verbs | Table Expanded Row Header @@availbaleVerbsHeader">
- Available Verbs
- </h2>
- <div *ngFor="let providerDef of availableAnalyticTokenVerbs">
-
- <h2>{{ providerDef.label }}</h2>
-
- <mat-selection-list #verbs>
- <mat-list-option
- (click)="onSelectionChanged(verb, providerDef.providerId)"
- *ngFor="let verb of providerDef.analyticTokenVerbs"
- [selected]="isVerbSelected(verb, providerDef.providerId)"
- >
- {{ verb.label }}
- </mat-list-option>
- </mat-selection-list>
- </div>
- <br />
- <div class="save-active-verbs-btn">
- <button
- color="primary"
- mat-raised-button
- (click)="saveActiveVerbs()"
- i18n="Save @@save">
- Save
- </button>
- </div>
- </div>
+ <button
+ nz-button
+ nzType="default"
+ *ngIf="!analyticToken.isExpired"
+ (click)="copyTokenToClipboard(analyticToken.key)"
+ i18n="Copy Token @@copyToken">
+ Copy Token
+ </button>
+ <button
+ nz-button
+ nzType="dashed"
+ (click)="onDeleteTokenClick(analyticToken.id)"
+ i18n="Delete Token @@deleteToken">
+ Delete Token
+ </button>
+ </div>
+ <div *ngIf="getExpandedElement()?.image_path">
+ <img height="200px" [src]="getImageSource()" alt="token image"/>
+ </div>
+ <br />
+ <div *ngIf="!analyticToken.isExpired">
+ <h2
+ i18n="Available Verbs | Table Expanded Row Header @@availbaleVerbsHeader">
+ Available Verbs
+ </h2>
+ <div *ngFor="let providerDef of availableAnalyticTokenVerbs">
- <h2
- i18n="
- Accessible Engines | Table Expanded Row Header
- @@accessibleEnginesHeader">
- Accessible Engines
- </h2>
- <h5
- i18n="
- Accessible Engines Description @@accessibleEnginesDescription">
- List of analysis engines whose results can be used in as the input
- of the selected analysis engine.
- </h5>
- <mat-selection-list>
- <mat-list-option
- *ngFor="let token of analyticToken.can_access"
- [(selected)]="token.selected">
- {{ token.name }}
- </mat-list-option>
- </mat-selection-list>
+ <h2>{{ providerDef.label }}</h2>
- <br />
- <div class="save-active-verbs-btn">
- <button
- color="primary"
- mat-raised-button
- (click)="saveEngineResultAccess(analyticToken.id)"
- i18n="Save @@save">
- Save
- </button>
- </div>
- </div>
+ <nz-list>
+ <nz-list-item *ngFor="let verb of providerDef.analyticTokenVerbs">
+ <label nz-checkbox
+ (ngModelChange)="onSelectionChanged(verb, providerDef.providerId)"
+ [ngModel]="isVerbSelected(verb, providerDef.providerId)"
+ >
+ {{ verb.label }}
+ </label>
+ </nz-list-item>
+ </nz-list>
</div>
- </td>
- </ng-container>
+ <br />
+ <div class="save-active-verbs-btn">
+ <button
+ nz-button
+ nzType="primary"
+ (click)="saveActiveVerbs()"
+ i18n="Save @@save">
+ Save
+ </button>
+ </div>
+ </div>
+
+ <h2
+ i18n="
+ Accessible Engines | Table Expanded Row Header
+ @@accessibleEnginesHeader">
+ Accessible Engines
+ </h2>
+ <h5
+ i18n="
+ Accessible Engines Description @@accessibleEnginesDescription">
+ List of analysis engines whose results can be used in as the input
+ of the selected analysis engine.
+ </h5>
+ <nz-list>
+ <nz-list-item *ngFor="let token of analyticToken.can_access">
+ <label nz-checkbox
+ [(ngModel)]="token.selected">
+ {{ token.name }}
+ </label>
+ </nz-list-item>
+ </nz-list>
- <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
- <tr
- mat-row
- *matRowDef="let analyticToken; columns: columnsToDisplayWithExpand"
- class="example-element-row"
- [class.example-expanded-row]="expandedElement === analyticToken"
- (click)="expandedElement = expandedElement === analyticToken ? null : analyticToken; selectedFile = null; "></tr>
- <tr
- mat-row
- *matRowDef="let row; columns: ['expandedDetail']"
- class="example-detail-row"></tr>
- </table>
- <br />
- </div>
+ <br />
+ <div class="save-active-verbs-btn">
+ <button
+ nz-button
+ nzType="primary"
+ (click)="saveEngineResultAccess(analyticToken.id)"
+ i18n="Save @@save">
+ Save
+ </button>
+ </div>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </ng-container>
+ </tbody>
+ </nz-table>
+ </div>
</div>
diff --git a/src/frontend/src/app/consent-management/analytics-tokens/analytics-tokens.component.ts b/src/frontend/src/app/consent-management/analytics-tokens/analytics-tokens.component.ts
index fcc6faea83aef36f8bc60cbf49944178e793a017..517de18d10bc1462ae559f2b4bec3921edd052aa 100644
--- a/src/frontend/src/app/consent-management/analytics-tokens/analytics-tokens.component.ts
+++ b/src/frontend/src/app/consent-management/analytics-tokens/analytics-tokens.component.ts
@@ -1,215 +1,235 @@
import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { ToastrService } from 'ngx-toastr'
import {
- ApiService,
- AnalyticsToken,
- AvailableAnalyticTokensDef,
- AnalyticsTokenVerb} from '../../services/api.service'
+ ApiService,
+ AnalyticsToken,
+ AvailableAnalyticTokensDef,
+ AnalyticsTokenVerb
+} from '../../services/api.service'
import { Clipboard } from '@angular/cdk/clipboard'
-import { animate, state, style, transition, trigger } from '@angular/animations'
-import { MatDialog } from '@angular/material/dialog'
import { CreateTokenDialog } from 'src/app/dialogs/create-token-dialog/create-token-dialog'
import * as moment from 'moment'
import { DeleteDialog } from 'src/app/dialogs/delete-dialog/delete-dialog'
import { Subscription } from 'rxjs'
import { environment } from 'src/environments/environment'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { NzMessageService } from 'ng-zorro-antd/message'
+import { NzModalService } from 'ng-zorro-antd/modal'
+
type AnalyticsTokenId = number
@Component({
- selector: 'app-analytics-tokens',
- templateUrl: './analytics-tokens.component.html',
- styleUrls: ['./analytics-tokens.component.scss'],
- animations: [
- trigger('detailExpand', [
- state('collapsed', style({ height: '0px', minHeight: '0' })),
- state('expanded', style({ height: '*' })),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
- ])
- ]
+ selector: 'app-analytics-tokens',
+ templateUrl: './analytics-tokens.component.html',
+ styleUrls: ['./analytics-tokens.component.scss'],
})
export class AnalyticsTokensComponent implements OnInit, OnDestroy {
- analyticTokens: Array<AnalyticsToken> = []
- availableAnalyticTokenVerbs: Array<AvailableAnalyticTokensDef> = []
- displayedColumns: string[] = ['name', 'key', 'created', 'expires']
- columnsToDisplayWithExpand = [...this.displayedColumns, 'expand']
- expandedElement: AnalyticsToken | null = null
- createTokenSub?: Subscription
- deleteTokenSub?: Subscription
- Object = Object
- @ViewChild('fileInput') fileInputRef!:ElementRef;
- selectedFile : File | null = null;
-
- constructor(
- private _apiService: ApiService,
- private _clipboard: Clipboard,
- private _toastrService: ToastrService,
- private _dialog: MatDialog
- ) {}
-
- ngOnInit(): void {
- this.getAnalyticsTokens()
- this.getAvailableVerbs()
- }
-
- ngOnDestroy(): void {
- this.createTokenSub?.unsubscribe()
- this.deleteTokenSub?.unsubscribe()
- }
-
- getAnalyticsTokens(): void {
- this._apiService.getAnalyticsTokens().subscribe((analyticTokens) => {
- this.analyticTokens = analyticTokens.map((e) => {
- return this.fillCanAccessOptions(e, analyticTokens)
- })
- })
- }
-
- getAvailableVerbs() : void
- {
- this._apiService.getAnalyticTokensAvailableVerbs().subscribe((availableVerbDefinition) => {
-
- this.availableAnalyticTokenVerbs = availableVerbDefinition.map( def => {
- let seen : {[key : string] : boolean} = {}
- return ({...def, analyticTokenVerbs : def.analyticTokenVerbs.filter((item) =>
- seen.hasOwnProperty(item.id) ? false : (seen[item.id] = true)
- )})
- })
- })
- }
- onCreateAnalyticsTokenClick(): void {
- const dialogRef = this._dialog.open(CreateTokenDialog, {
- width: '800px',
- data: {
- headerText: $localize`:@@createAnalyticsTokenDialogHeader:Create New Analytics Token`
- }
+ analyticTokens: Array<AnalyticsToken> = []
+ availableAnalyticTokenVerbs: Array<AvailableAnalyticTokensDef> = []
+ displayedColumns: string[] = ['name', 'key', 'created', 'expires']
+ columnsToDisplayWithExpand = [...this.displayedColumns, 'expand']
+ createTokenSub?: Subscription
+ deleteTokenSub?: Subscription
+ Object = Object
+ @ViewChild('fileInput') fileInputRef!: ElementRef
+ selectedFile: File | null = null
+
+ expandSet = new Set<number>();
+ onExpandChange(id: number, checked: boolean): void {
+ if (checked) {
+ this.expandSet.clear();
+ this.expandSet.add(id);
+ } else {
+ this.expandSet.delete(id);
+ }
+ }
+
+ constructor(
+ private _apiService: ApiService,
+ private _clipboard: Clipboard,
+ private _messageService: NzMessageService,
+ private _dialog: NzModalService
+ ) {
+ }
+
+ ngOnInit(): void {
+ this.getAnalyticsTokens()
+ this.getAvailableVerbs()
+ }
+
+ ngOnDestroy(): void {
+ this.createTokenSub?.unsubscribe()
+ this.deleteTokenSub?.unsubscribe()
+ }
+
+ getExpandedElement(): AnalyticsToken | undefined{
+ let token_id: number = this.expandSet.values().next().value;
+ return this.analyticTokens.find((tok) => tok.id === token_id);
+ }
+
+ getAnalyticsTokens(): void {
+ this._apiService.getAnalyticsTokens().subscribe((analyticTokens) => {
+ this.analyticTokens = analyticTokens.map((e) => {
+ return this.fillCanAccessOptions(e, analyticTokens)
+ })
+ })
+ }
+
+ getAvailableVerbs(): void {
+ this._apiService.getAnalyticTokensAvailableVerbs().subscribe((availableVerbDefinition) => {
+
+ this.availableAnalyticTokenVerbs = availableVerbDefinition.map(def => {
+ let seen: { [key: string]: boolean } = {}
+ return ({
+ ...def, analyticTokenVerbs: def.analyticTokenVerbs.filter((item) =>
+ seen.hasOwnProperty(item.id) ? false : (seen[item.id] = true)
+ )
})
-
- this.deleteTokenSub = dialogRef.afterClosed().subscribe((data) => {
- if (data?.confirmed) {
- this.createToken(data.expires, data.name, data.description)
- }
- })
- }
-
- createToken(expires: string, name: string, description : string): void {
- this._apiService
- .createAnalyticsToken(expires, name, description)
- .subscribe((newToken) => {
- this.analyticTokens = [...this.analyticTokens, newToken]
- this.getAnalyticsTokens()
- this._toastrService.success($localize`:@@tokenCreated: Token created`)
- })
- }
-
- copyTokenToClipboard(token: string): void {
- this._clipboard.copy(token)
- this._toastrService.info($localize`:@@copiedToClipboard: Copied to Clipboard`)
- }
-
- onDeleteTokenClick(tokenId: number): void {
- const dialogRef = this._dialog.open(DeleteDialog, {
- data: {
- headerText: $localize`:@@deleteSelectedToken:Delete selected token`
- }
+ })
+ })
+ }
+
+ onCreateAnalyticsTokenClick(): void {
+ const dialogRef = this._dialog.create({
+ nzContent: CreateTokenDialog,
+ nzComponentParams: {
+ headerText: $localize`:@@createAnalyticsTokenDialogHeader:Create New Analytics Token`
+ }
+ })
+
+ this.deleteTokenSub = dialogRef.afterClose.subscribe((data) => {
+ if (data?.confirmed) {
+ this.createToken(data.expires, data.name, data.description)
+ }
+ })
+ }
+
+ createToken(expires: string, name: string, description: string): void {
+ this._apiService
+ .createAnalyticsToken(expires, name, description)
+ .subscribe((newToken) => {
+ this.analyticTokens = [...this.analyticTokens, newToken]
+ this.getAnalyticsTokens()
+ this._messageService.success($localize`:@@tokenCreated: Token created`)
+ })
+ }
+
+ copyTokenToClipboard(token: string): void {
+ this._clipboard.copy(token)
+ this._messageService.info($localize`:@@copiedToClipboard: Copied to Clipboard`)
+ }
+
+ onDeleteTokenClick(tokenId: number): void {
+ const dialogRef = this._dialog.create({
+ nzContent: DeleteDialog,
+ nzComponentParams: {
+ headerText: $localize`:@@deleteSelectedToken:Delete selected token`
+ }
+ });
+
+ this.createTokenSub = dialogRef.afterClose.subscribe((confirmed) => {
+ if (confirmed)
+ this._apiService.deleteAnalyticsToken(tokenId).subscribe(() => {
+ this.getAnalyticsTokens()
+ this._messageService.success($localize`:@@tokenDeleted: Token deleted`)
})
-
- this.createTokenSub = dialogRef.afterClosed().subscribe((confirmed) => {
- if (confirmed)
- this._apiService.deleteAnalyticsToken(tokenId).subscribe(() => {
- this.getAnalyticsTokens()
- this._toastrService.success($localize`:@@tokenDeleted: Token deleted`)
- })
+ })
+ }
+
+ isVerbSelected(verb: AnalyticsTokenVerb, providerId: number): boolean {
+ return !!this.getExpandedElement()?.analyticTokenVerbs?.find(v => v.verb == verb.id && providerId == v.provider)
+ }
+
+ onSelectionChanged(verb: AnalyticsTokenVerb, providerId: number) {
+ console.log(verb)
+ let expandedElement : AnalyticsToken | undefined = this.getExpandedElement();
+ if (!expandedElement)
+ return
+
+ if (this.isVerbSelected(verb, providerId))
+ expandedElement.analyticTokenVerbs = expandedElement.analyticTokenVerbs.filter(v => v.verb !== verb.id)
+ else
+ expandedElement.analyticTokenVerbs = [...expandedElement.analyticTokenVerbs, {
+ ...verb,
+ verb: verb.id,
+ id: '-1'
+ }]
+ }
+
+ saveActiveVerbs(): void {
+ let expandedElement : AnalyticsToken | undefined = this.getExpandedElement();
+ if (!expandedElement)
+ return
+ this._apiService.saveAnalyticTokenActiveVerbs(expandedElement.id, expandedElement.analyticTokenVerbs).subscribe(() => {
+ this._messageService.success($localize`:@@toastMessageSaved:Saved`)
+ this.expandSet.clear()
+ })
+ }
+
+ isTokenExpired(expires: string): boolean {
+ if (!expires) return false
+ if (moment(expires) <= moment()) return true
+ return false
+ }
+
+ fillCanAccessOptions(token: AnalyticsToken, options: AnalyticsToken[]): AnalyticsToken {
+ return {
+ ...token,
+ can_access: options
+ .filter((c) => c.id !== token.id)
+ .map((b) => ({
+ ...b,
+ selected: !!token.can_access.find((a) => a.id === b.id)
+ }))
+ }
+ }
+
+ saveEngineResultAccess(id: AnalyticsTokenId): void {
+ let expandedElement : AnalyticsToken | undefined = this.getExpandedElement();
+ if (!expandedElement)
+ return
+ this._apiService
+ .saveAccessRelation(
+ id,
+ expandedElement?.can_access.filter((e) => !!e.selected).map((e) => e.id) ?? []
+ )
+ .subscribe((data: any) => {
+ this._messageService.success($localize`:@@toastMessageSaved:Saved`)
+
+ this.analyticTokens.map((e) => {
+ if (e.id === id) return this.fillCanAccessOptions(data, this.analyticTokens)
+ else return e
})
- }
-
- isVerbSelected(verb : AnalyticsTokenVerb, providerId : number) : boolean
- {
- return !!this.expandedElement?.analyticTokenVerbs?.find(v => v.verb == verb.id && providerId == v.provider)
- }
-
- onSelectionChanged(verb : AnalyticsTokenVerb, providerId : number)
- {
- if(!this.expandedElement)
- return
- if(this.isVerbSelected(verb,providerId))
- this.expandedElement.analyticTokenVerbs = this.expandedElement.analyticTokenVerbs.filter(v => v.verb !== verb.id)
- else
- this.expandedElement.analyticTokenVerbs = [...this.expandedElement.analyticTokenVerbs, {...verb, verb : verb.id, id : "-1"}]
- }
-
- saveActiveVerbs(): void {
- if(!this.expandedElement)
- return
- this._apiService.saveAnalyticTokenActiveVerbs(this.expandedElement.id, this.expandedElement.analyticTokenVerbs).subscribe(() => {
- this._toastrService.success($localize`:@@toastMessageSaved:Saved`)
- this.expandedElement = null
- })
- }
-
- isTokenExpired(expires: string): boolean {
- if (!expires) return false
- if (moment(expires) <= moment()) return true
- return false
- }
-
- fillCanAccessOptions(token: AnalyticsToken, options: AnalyticsToken[]): AnalyticsToken {
- return {
- ...token,
- can_access: options
- .filter((c) => c.id !== token.id)
- .map((b) => ({
- ...b,
- selected: !!token.can_access.find((a) => a.id === b.id)
- }))
- }
- }
-
- saveEngineResultAccess(id: AnalyticsTokenId): void {
- this._apiService
- .saveAccessRelation(
- id,
- this.expandedElement?.can_access.filter((e) => !!e.selected).map((e) => e.id) ?? []
- )
- .subscribe((data: any) => {
- this._toastrService.success($localize`:@@toastMessageSaved:Saved`)
-
- this.analyticTokens.map((e) => {
- if (e.id === id) return this.fillCanAccessOptions(data, this.analyticTokens)
- else return e
- })
- })
-
- }
-
- onUploadButtonClick()
- {
- if(!this.selectedFile)
- this.fileInputRef.nativeElement.click()
- else
- this.uploadSelectedFile()
- }
-
- uploadFileChanged(event :Event)
- {
- this.selectedFile = (event.target as HTMLInputElement).files![0];
- }
+ })
+
+ }
+
+ onUploadButtonClick() {
+ if (!this.selectedFile)
+ this.fileInputRef.nativeElement.click()
+ else
+ this.uploadSelectedFile()
+ }
+
+ uploadFileChanged(event: Event) {
+ this.selectedFile = (event.target as HTMLInputElement).files![0]
+ }
+
+ uploadSelectedFile() {
+ this._apiService.uploadImageForAnalyticToken(
+ this.getExpandedElement()!.id,
+ this.selectedFile!
+ )
+ .subscribe((data: any) => {
+ this._messageService.success($localize`:@@toastMessageSaved:Saved`)
+ this.getAnalyticsTokens()
+ })
+ }
- uploadSelectedFile()
- {
- this._apiService.uploadImageForAnalyticToken(
- this.expandedElement!.id,
- this.selectedFile!
- )
- .subscribe((data: any) => {
- this._toastrService.success($localize`:@@toastMessageSaved:Saved`)
- this.getAnalyticsTokens()
- })
- }
+ getImageSource() {
+ return `${environment.apiUrl}` + '/api/v1/provider/analytics-tokens/' + this.getExpandedElement()?.id + '/image/' + this.getExpandedElement()?.image_path
+ }
- getImageSource()
- {
- return `${environment.apiUrl}`+"/api/v1/provider/analytics-tokens/"+this.expandedElement?.id+"/image/"+this.expandedElement?.image_path
- }
+ protected readonly faTimes = faTimes
}
diff --git a/src/frontend/src/app/consent-management/application-tokens/application-tokens.component.html b/src/frontend/src/app/consent-management/application-tokens/application-tokens.component.html
index b5bdf76c28f6c98a72616e762a9df76308adf5e3..d0bd7c347705432b75ca2e0f978bcf0c357d000b 100644
--- a/src/frontend/src/app/consent-management/application-tokens/application-tokens.component.html
+++ b/src/frontend/src/app/consent-management/application-tokens/application-tokens.component.html
@@ -1,63 +1,45 @@
<div class="application-tokens">
- <h1 i18n="Application Tokens | Header text application tokens page @@headerApplicationTokens">
- Application Tokens
- </h1>
+ <h1 i18n="Application Tokens | Header text application tokens page @@headerApplicationTokens">
+ Application Tokens
+ </h1>
- <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8 table">
- <ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef>Provider Name</th>
- <td mat-cell *matCellDef="let element">{{ element.provider.name }}</td>
- </ng-container>
+ <nz-table #tokensTable [nzData]="dataSource" class="table">
+ <thead>
+ <tr>
+ <th> </th>
+ <th>Provider Name</th>
+ </tr>
+ </thead>
+ <tbody>
+ <ng-container *ngFor="let element of tokensTable.data">
+ <tr>
+ <td [nzExpand]="expandSet.has(element.provider.id)" (nzExpandChange)="onExpandChange(element.provider.id, $event)">
- <ng-container matColumnDef="expand">
- <th mat-header-cell *matHeaderCellDef aria-label="row actions"> </th>
- <td mat-cell *matCellDef="let element">
- <button
- mat-icon-button
- aria-label="expand row"
- (click)="
- expandedElement = expandedElement === element ? null : element;
- $event.stopPropagation()
- ">
- <mat-icon *ngIf="expandedElement !== element">keyboard_arrow_down</mat-icon>
- <mat-icon *ngIf="expandedElement === element">keyboard_arrow_up</mat-icon>
- </button>
- </td>
- </ng-container>
-
- <ng-container matColumnDef="expandedDetail">
- <td
- mat-cell
- *matCellDef="let element"
- [attr.colspan]="columnsToDisplayWithExpand.length">
- <div
- class="example-element-detail"
- [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
- <div class="example-element-description">
- <div class="token-display" *ngFor="let token of element.keys">
- <div class="token">{{ token }}</div>
- <button
- color="primary"
- mat-mini-fab
- (click)="copyTokenToClipboard(token)">
- <mat-icon>content_copy</mat-icon>
- </button>
- </div>
- </div>
+ </td>
+ <td>
+ {{ element.provider.name }}
+ </td>
+ </tr>
+ <tr [nzExpand]="expandSet.has(element.provider.id)">
+ <td [attr.colspan]="columnsToDisplayWithExpand.length">
+ <div class="example-element-detail">
+ <div class="example-element-description">
+ <div class="token-display" *ngFor="let token of element.keys">
+ <div class="token">{{ token }}</div>
+ <button
+ nz-button
+ nzType="primary"
+ nzSize="small"
+ nzShape="round"
+ (click)="copyTokenToClipboard(token)">
+ <fa-icon [icon]="faCopy"></fa-icon>
+ </button>
</div>
- </td>
- </ng-container>
-
- <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
- <tr
- mat-row
- *matRowDef="let element; columns: columnsToDisplayWithExpand"
- class="example-element-row"
- [class.example-expanded-row]="expandedElement === element"
- (click)="expandedElement = expandedElement === element ? null : element"></tr>
- <tr
- mat-row
- *matRowDef="let row; columns: ['expandedDetail']"
- class="example-detail-row"></tr>
- </table>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </ng-container>
+ </tbody>
+ </nz-table>
</div>
diff --git a/src/frontend/src/app/consent-management/application-tokens/application-tokens.component.ts b/src/frontend/src/app/consent-management/application-tokens/application-tokens.component.ts
index 2ecc84c18e4b8d82004e3a3b964324ebc6478111..7d17fb1331523459885e11b959b26058ee9c30ce 100644
--- a/src/frontend/src/app/consent-management/application-tokens/application-tokens.component.ts
+++ b/src/frontend/src/app/consent-management/application-tokens/application-tokens.component.ts
@@ -1,48 +1,53 @@
import { Component, OnInit } from '@angular/core'
-import { animate, state, style, transition, trigger } from '@angular/animations'
import {
- ApplicationTokens,
- ApiService
+ ApplicationTokens,
+ ApiService
} from 'src/app/services/api.service'
import { Clipboard } from '@angular/cdk/clipboard'
-import { ToastrService } from 'ngx-toastr'
+import { faCopy } from '@fortawesome/free-solid-svg-icons'
+import { NzMessageService } from 'ng-zorro-antd/message'
@Component({
- selector: 'app-application-tokens',
- templateUrl: './application-tokens.component.html',
- styleUrls: ['./application-tokens.component.scss'],
- animations: [
- trigger('detailExpand', [
- state('collapsed', style({ height: '0px', minHeight: '0' })),
- state('expanded', style({ height: '*' })),
- transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
- ])
- ]
+ selector: 'app-application-tokens',
+ templateUrl: './application-tokens.component.html',
+ styleUrls: ['./application-tokens.component.scss'],
})
export class ApplicationTokensComponent implements OnInit {
- dataSource: ApplicationTokens[] = []
- columnsToDisplay = ['name']
- columnsToDisplayWithExpand = [...this.columnsToDisplay, 'expand']
- expandedElement: string | null = ''
-
- constructor(
- private _apiService: ApiService,
- private _clipboard: Clipboard,
- private _toasterService: ToastrService
- ) {}
-
- ngOnInit(): void {
- this.getApplicationTokens()
- }
+ dataSource: ApplicationTokens[] = []
+ columnsToDisplay = ['name']
+ columnsToDisplayWithExpand = [...this.columnsToDisplay, 'expand']
- getApplicationTokens() {
- this._apiService.getApplicationTokens().subscribe((response) => {
- this.dataSource = response
- })
- }
+ expandSet = new Set<number>()
- copyTokenToClipboard(token: string): void {
- this._clipboard.copy(token)
- this._toasterService.info($localize`:@@copiedToClipboard: Copied to Clipboard`)
+ onExpandChange(id: number, checked: boolean): void {
+ if (checked) {
+ this.expandSet.add(id)
+ } else {
+ this.expandSet.delete(id)
}
+ }
+
+ constructor(
+ private _apiService: ApiService,
+ private _clipboard: Clipboard,
+ private _messageService: NzMessageService
+ ) {
+ }
+
+ ngOnInit(): void {
+ this.getApplicationTokens()
+ }
+
+ getApplicationTokens() {
+ this._apiService.getApplicationTokens().subscribe((response) => {
+ this.dataSource = response
+ })
+ }
+
+ copyTokenToClipboard(token: string): void {
+ this._clipboard.copy(token)
+ this._messageService.info($localize`:@@copiedToClipboard: Copied to Clipboard`)
+ }
+
+ protected readonly faCopy = faCopy
}
diff --git a/src/frontend/src/app/consent-management/consent-management..component.ts b/src/frontend/src/app/consent-management/consent-management..component.ts
deleted file mode 100644
index 0d82a2b00b0d6c29a16cbd5212d0e062c2d0f619..0000000000000000000000000000000000000000
--- a/src/frontend/src/app/consent-management/consent-management..component.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { Component, OnInit, ViewChild, Inject, OnDestroy } from '@angular/core'
-import { ProviderId, UserConsent, UserConsentVerbs } from './consentDeclaration'
-import { MatAccordion } from '@angular/material/expansion'
-import { ApiService, Provider } from '../services/api.service'
-import { ToastrService } from 'ngx-toastr'
-import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'
-import { DataRemovalService } from '../data-removal.service'
-import { DeleteDialog } from '../dialogs/delete-dialog/delete-dialog'
-import { Subscription, zip } from 'rxjs'
-import { extractVerbs } from './wizard/wizard.component'
-
-
-@Component({
- selector: 'app-consent-management',
- templateUrl: './consent-management.component.html',
- styleUrls: ['./consent-management.component.scss']
-})
-export class ConsentManagementComponent implements OnInit, OnDestroy {
- @ViewChild(MatAccordion) accordion!: MatAccordion
- providers: Provider[] = []
- providerUserConsent: Record<ProviderId, UserConsent | null> = {}
- userConsents: UserConsentVerbs[] = []
- pauseDialogSub?: Subscription
- pausedDataRecording: boolean = false
-
- constructor(
- private _apiService: ApiService,
- private _removalService: DataRemovalService,
- private _toasterService: ToastrService,
- private _dialog: MatDialog
- ) {}
-
- ngOnInit(): void {
- this.getProviderUserConsents()
- }
-
- getProviderUserConsents() {
- this._apiService.getProviders().subscribe((providers) => {
- this.providers = providers
-
- const userConsents$ = zip(
- providers.map((provider) => this._apiService.getUserConsent(provider.id))
- )
- userConsents$.subscribe((userConsents) => {
- this.providerUserConsent = userConsents.reduce((acc, userConsent, idx) => {
- acc[providers[idx].id] = userConsent.consent
- return acc
- }, {} as Record<ProviderId, UserConsent | null>)
-
- this.userConsents = providers.map((provider) => {
- const userConsent = this.providerUserConsent[provider.id]!
- return {
- providerId: provider.id,
- providerSchemaId: provider.versions[0].id,
- verbs: extractVerbs(userConsent, provider.id)
- }
- })
-
- this.pausedDataRecording = !!userConsents.find((e) => !!e.paused_data_recording)
- })
- })
- }
-
- ngOnDestroy(): void {
- this.pauseDialogSub?.unsubscribe()
- }
-
- scroll(selector: string) {
- document.getElementById(selector)?.scrollIntoView({
- behavior: 'smooth',
- block: 'start',
- inline: 'nearest'
- })
- }
-
- changePrivacySetting(userConsent: UserConsent, provider: Provider, providerIdx: number) {
- // this.userConsents[providerIdx].verbs = extractVerbs(userConsent, provider.id)
- let consent = this.userConsents?.find(ele => ele.providerId == provider.id)
- if(consent)
- consent.verbs = extractVerbs(userConsent, provider.id)
- }
-
- saveChanges(): void {
- this._apiService.saveUserConsent(this.userConsents).subscribe((response) => {
- this._toasterService.success($localize`:@@toastMessageSaved:Saved`)
- this.getProviderUserConsents()
- })
- }
-
- showPauseDialog(): void {
- this._dialog.open(PauseDataRecordingDialog, {
- width: '400px',
- data: {
- isPaused: this.pausedDataRecording,
- toggleDataRecording: () => {
- this._apiService.toggleDataRecording().subscribe((response) => {
- this._toasterService.success($localize`:@@toastMessageChanged:Changed`)
- this.getProviderUserConsents()
- })
- },
- pauseDataRecordingDeleteData: () => {
- const dialogRef = this._dialog.open(DeleteDialog, {
- data: {
- headerText: $localize`:@@pauseRecordingAndDeleteData:Pause and Delete Confirmation`
- }
- })
-
- this.pauseDialogSub = dialogRef.afterClosed().subscribe((confirmed) => {
- if (confirmed)
- this._apiService.toggleDataRecording().subscribe((response) => {
- this._removalService
- .create({ immedialty: false, scope: {} })
- .subscribe((response) => {
- this._toasterService.success(
- $localize`:@@toastMessageChanged:Changed`
- )
- this.getProviderUserConsents()
- })
- })
- })
- }
- }
- })
- }
-}
-
-export interface DialogData {
- isPaused: boolean
- toggleDataRecording: () => void
- pauseDataRecordingDeleteData: () => void
-}
-
-@Component({
- selector: 'pause-data-recording-dialog',
- templateUrl: 'pause-data-recording-dialog.html'
-})
-export class PauseDataRecordingDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
-}
diff --git a/src/frontend/src/app/consent-management/consent-management.component.html b/src/frontend/src/app/consent-management/consent-management.component.html
index 7b55348c5ac3c2de5d0e23fa820a939a55ab13f5..4abce33c86e1868b4ab99097fa578890aff20d88 100644
--- a/src/frontend/src/app/consent-management/consent-management.component.html
+++ b/src/frontend/src/app/consent-management/consent-management.component.html
@@ -1,56 +1,46 @@
-<mat-drawer-container class="privacy-settings-container">
- <mat-drawer mode="side" opened class="sidenav">
- <mat-action-list class="sidenav-content">
- <button
- mat-list-item
- *ngFor="let provider of providers"
- (click)="scroll(provider.name)">
- {{ provider.name }}
- </button>
- <div class="action-buttons">
- <button mat-button color="primary" (click)="showPauseDialog()">
- Erfassung {{ pausedDataRecording ? 'Fortsetzen' : 'Pausieren' }}
- </button>
- </div>
- </mat-action-list>
- </mat-drawer>
+<div class="paused-overlay" *ngIf="pausedDataRecording">
+ <fa-icon class="icon" [icon]="faPauseCircle" (click)="showPauseDialog()"></fa-icon>
+</div>
+<nz-layout>
+ <nz-sider>
+ <ul nz-menu nzMode="vertical">
+ <li
+ nz-menu-item
+ *ngFor="let provider of providers"
+ (click)="scroll(provider.name)"
+ >{{ provider.name }}</li>
+ <li nz-menu-divider></li>
+ <li class="centered-list-item"><button nz-button nzType="default" (click)="showPauseDialog()">Erfassung {{ pausedDataRecording ? 'Fortsetzen' : 'Pausieren' }}</button></li>
+ </ul>
- <div class="paused-overlay" *ngIf="pausedDataRecording">
- <div class="icon">
- <mat-icon [inline]="true" (click)="showPauseDialog()">pause_circle_outline</mat-icon>
- </div>
- </div>
- <div class="content">
- <div class="panels" [ngClass]="{ paused: pausedDataRecording }">
- <div *ngFor="let provider of providers; index as providerIdx" [attr.id]="provider.name">
- <mat-card
- ><mat-card-title>
- {{ provider.name }}
- </mat-card-title>
- <mat-card-subtitle>
- {{ provider.description }}
- </mat-card-subtitle>
- <div *ngIf="providerUserConsent[provider.id] as consent">
- <app-provider-setting
- [consentDeclaration]="consent"
- (change)="changePrivacySetting($event, provider, providerIdx)"
- [deleteable]="true"></app-provider-setting>
- </div>
- </mat-card>
+ </nz-sider>
+ <nz-layout>
+ <nz-content>
+ <p></p>
+ <div nz-row [nzGutter]="[16, 16]" nzJustify="center">
+ <div nz-col class="gutter-row" [nzSpan]="20" *ngFor="let provider of providers; index as providerIdx" [attr.id]="provider.name">
+ <nz-card>
+ <nz-card-meta [nzTitle]="provider.name" [nzDescription]="provider.description"></nz-card-meta>
+ <div *ngIf="providerUserConsent[provider.id] as consent">
+ <app-provider-setting
+ [consentDeclaration]="consent"
+ (change)="changePrivacySetting($event, provider, providerIdx)"
+ [deletable]="true"></app-provider-setting>
</div>
+ </nz-card>
</div>
- <br />
- <br />
- <br />
- <div class="save-changes-btn">
- <button
- mat-raised-button
- extended
- color="primary"
- (click)="saveChanges()"
- i18n="Save @@save">
- <mat-icon>save</mat-icon>
- </button>
- </div>
- </div>
-</mat-drawer-container>
+ </div>
+
+ <div class="save-changes-btn">
+ <button
+ nz-button
+ nzType="primary"
+ (click)="saveChanges()"
+ i18n="Save @@save">
+ Save
+ </button>
+ </div>
+ <p></p>
+ </nz-content>
+ </nz-layout>
+</nz-layout>
diff --git a/src/frontend/src/app/consent-management/consent-management.component.scss b/src/frontend/src/app/consent-management/consent-management.component.scss
index 4a072b30d9cbba728fe8958c8111f479e4a1b704..d921603ff113a8fec5d071f2c8223faf3e603317 100644
--- a/src/frontend/src/app/consent-management/consent-management.component.scss
+++ b/src/frontend/src/app/consent-management/consent-management.component.scss
@@ -34,23 +34,37 @@
width: 100%;
height: 100%;
background-color: grey;
- z-index: 2;
- opacity: 0.2;
+ z-index: 3;
+ opacity: 0.4;
.icon {
position: absolute;
top: 50%;
- left: calc(50% - 100px);
+ left: 50%;
transform: scale(20);
cursor: pointer;
}
}
.save-changes-btn {
- background-color: white;
- border-radius: 5px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- padding: 20px;
- position: fixed;
- bottom: 70px;
- right: 20px;
+ background-color: white;
+ border-radius: 5px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ padding: 20px;
+ position: fixed;
+ bottom: 70px;
+ right: 20px;
+ z-index: 2;
+}
+
+nz-sider {
+ background: #F0ECF0;
+}
+
+[nz-menu] {
+ height: 100%;
+}
+
+.centered-list-item {
+ display: flex;
+ justify-content: center;
}
diff --git a/src/frontend/src/app/consent-management/consent-management.component.spec.ts b/src/frontend/src/app/consent-management/consent-management.component.spec.ts
index ab3f4f74f760ff5c6e46967b731c7c5484a9805b..e0c81fb9535a4de7ccf8c317847de1913c4762a9 100644
--- a/src/frontend/src/app/consent-management/consent-management.component.spec.ts
+++ b/src/frontend/src/app/consent-management/consent-management.component.spec.ts
@@ -1,6 +1,6 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ConsentManagementComponent } from './consent-management..component';
+import { ConsentManagementComponent } from './consent-management.component';
describe('PrivacySettingsComponent', () => {
let component: ConsentManagementComponent;
diff --git a/src/frontend/src/app/consent-management/consent-management.component.ts b/src/frontend/src/app/consent-management/consent-management.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c87a880d5894db4f8eb35a345c579ac5ffb14b42
--- /dev/null
+++ b/src/frontend/src/app/consent-management/consent-management.component.ts
@@ -0,0 +1,144 @@
+import { Component, OnInit, ViewChild, Inject, OnDestroy } from '@angular/core'
+import { ProviderId, UserConsent, UserConsentVerbs } from './consentDeclaration'
+import { ApiService, Provider } from '../services/api.service'
+import { DataRemovalService } from '../data-removal.service'
+import { Subscription, zip } from 'rxjs'
+import { extractVerbs } from './wizard/wizard.component'
+
+import { faPauseCircle } from '@fortawesome/free-regular-svg-icons'
+import { NzMessageService } from 'ng-zorro-antd/message'
+import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal'
+import { DeleteDialog } from '../dialogs/delete-dialog/delete-dialog'
+
+@Component({
+ selector: 'app-consent-management',
+ templateUrl: './consent-management.component.html',
+ styleUrls: ['./consent-management.component.scss'],
+})
+export class ConsentManagementComponent implements OnInit, OnDestroy {
+ protected readonly faPauseCircle = faPauseCircle;
+
+ providers: Provider[] = []
+ providerUserConsent: Record<ProviderId, UserConsent | null> = {}
+ userConsents: UserConsentVerbs[] = []
+ pauseDialogSub?: Subscription
+ pausedDataRecording: boolean = false
+ constructor(
+ private _apiService: ApiService,
+ private _removalService: DataRemovalService,
+ private _messageService: NzMessageService,
+ private _dialog: NzModalService,
+ ) {}
+
+ ngOnInit(): void {
+ this.getProviderUserConsents()
+ }
+
+ getProviderUserConsents() {
+ this._apiService.getProviders().subscribe((providers) => {
+ this.providers = providers
+
+ const userConsents$ = zip(
+ providers.map((provider) => this._apiService.getUserConsent(provider.id))
+ )
+ userConsents$.subscribe((userConsents) => {
+ this.providerUserConsent = userConsents.reduce((acc, userConsent, idx) => {
+ acc[providers[idx].id] = userConsent.consent
+ return acc
+ }, {} as Record<ProviderId, UserConsent | null>)
+
+ this.userConsents = providers.map((provider) => {
+ const userConsent = this.providerUserConsent[provider.id]!
+ return {
+ providerId: provider.id,
+ providerSchemaId: provider.versions[0].id,
+ verbs: extractVerbs(userConsent, provider.id)
+ }
+ })
+
+ this.pausedDataRecording = !!userConsents.find((e) => !!e.paused_data_recording)
+ })
+ })
+ }
+
+ ngOnDestroy(): void {
+ this.pauseDialogSub?.unsubscribe()
+ }
+
+ scroll(selector: string) {
+ document.getElementById(selector)?.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ inline: 'nearest'
+ })
+ }
+
+ changePrivacySetting(userConsent: UserConsent, provider: Provider, providerIdx: number) {
+ // this.userConsents[providerIdx].verbs = extractVerbs(userConsent, provider.id)
+ let consent = this.userConsents?.find(ele => ele.providerId == provider.id)
+ if(consent)
+ consent.verbs = extractVerbs(userConsent, provider.id)
+ }
+
+ saveChanges(): void {
+ this._apiService.saveUserConsent(this.userConsents).subscribe((response) => {
+ this._messageService.success($localize`:@@toastMessageSaved:Saved`)
+ this.getProviderUserConsents()
+ })
+ }
+
+ showPauseDialog(): void {
+ const modal: NzModalRef = this._dialog.create({
+ nzTitle: this.pausedDataRecording ?
+ $localize`:@@pauseDataRecordingHeader:Continue Data Recording`:
+ $localize`:@@continueDataRecordingHeader:Pause Data Recording`,
+ nzContent: this.pausedDataRecording ?
+ $localize`:@@pausedDataRecordingDescription:Would you like to continue sharing selected data with Polaris?`:
+ $localize`:@@continueDataRecordingDescription:Would you like to pause sharing selected data with Polaris?`+
+ " <b>" + $localize`:@@continueDataRecordingDescriptionExtended:A delete job is set up for data deletion, which is only executed after a fixed time window.` + "</b>",
+ nzFooter: [
+ {
+ label: $localize`:@@cancel:Cancel`,
+ onClick: () => modal.destroy()
+ },
+ {
+ label: this.pausedDataRecording ? $localize`:@@continueDataRecording:Continue Data Recording` : $localize`:@@pauseDataRecording:Pause Data Recording`,
+ onClick: () => {
+ this._apiService.toggleDataRecording().subscribe((response) => {
+ this._messageService.success($localize`:@@toastMessageChanged:Changed`)
+ this.getProviderUserConsents()
+ })
+ },
+ type: "primary"
+ },
+ {
+ label: $localize`:@@pauseAndDeleteDataButtonText:Pause & Delete Data`,
+ disabled: this.pausedDataRecording,
+ onClick: () => {
+ const confirmDeleteModal = this._dialog.create({
+ nzContent: DeleteDialog,
+ nzComponentParams: {
+ headerText: $localize`:@@pauseRecordingAndDeleteData:Pause and Delete Confirmation`
+ }
+ });
+ confirmDeleteModal.afterClose.subscribe((result) => {
+ if (result) {
+ this._apiService.toggleDataRecording().subscribe((response) => {
+ this._removalService
+ .create({ immediately: false, scope: {} })
+ .subscribe((response) => {
+ this._messageService.success(
+ $localize`:@@toastMessageChanged:Changed`
+ )
+ this.getProviderUserConsents()
+ })
+ })
+ }
+ })
+ }
+ }
+ ]
+ });
+
+ }
+}
diff --git a/src/frontend/src/app/consent-management/pause-data-recording-dialog.html b/src/frontend/src/app/consent-management/pause-data-recording-dialog.html
deleted file mode 100644
index 20132404b2419f070e0bc5d823083c1f146059b1..0000000000000000000000000000000000000000
--- a/src/frontend/src/app/consent-management/pause-data-recording-dialog.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<h1 mat-dialog-title>
- <span
- *ngIf="data.isPaused else pauseText"
- i18n="Pause Data Recording Header @@pauseDataRecordingHeader"
- >Continue Data Recording</span
- >
- <ng-template #pauseText i18n="Continue Data Recording Header @@continueDataRecordingHeader"
- >Pause Data Recording</ng-template
- >
-</h1>
-<div
- mat-dialog-content
- *ngIf="data.isPaused else continueDescription"
- i18n="Pause Data Recording Description | Text for Pause @@pausedDataRecordingDescription">
- Would you like to continue sharing selected data with Polaris?
-</div>
-<ng-template
- #continueDescription
- i18n="Continue Data Recording Description | Text for Continue @@continueDataRecordingDescription">
- Would you like to pause sharing selected data with Polaris?
- <b
- >A delete job is set up for data deletion, which is only executed after a fixed time
- window.</b
- >
-</ng-template>
-<mat-dialog-actions align="end">
- <button mat-button mat-dialog-close i18n="@@cancel">Cancel</button>
- <button mat-button mat-dialog-close cdkFocusInitial (click)="data.toggleDataRecording()">
- <span
- *ngIf="data.isPaused else pauseText"
- i18n="Continue Data Recording @@continueDataRecording"
- >Continue</span
- >
- <ng-template #pauseText i18n="Pause Data Recording @@pauseDataRecording">Pause</ng-template>
- </button>
- <button
- mat-button
- mat-dialog-close
- *ngIf="!data.isPaused"
- (click)="data.pauseDataRecordingDeleteData()"
- i18n="Pause and Delete Data Button Text @@pauseAndDeleteDataButtonText">
- Pause & Delete Data
- </button>
-</mat-dialog-actions>
diff --git a/src/frontend/src/app/consent-management/provider-settings/pause-verb-object-warning-dialog.html b/src/frontend/src/app/consent-management/provider-settings/pause-verb-object-warning-dialog.html
deleted file mode 100644
index 373e79a9ec29d87f2ef2ee18bdadff1d4ba65c09..0000000000000000000000000000000000000000
--- a/src/frontend/src/app/consent-management/provider-settings/pause-verb-object-warning-dialog.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<h1 mat-dialog-title>{{data.text}}</h1>
-<div mat-dialog-content i18n="Confirmation text | Pause verb or object confirmation @@pauseVerbOrObjectConfirmation">Do you want the action to be executed?</div>
-<mat-dialog-actions align="end">
- <button mat-button mat-dialog-close (click)="data.onCancel()" i18n="Cancel @@cancel">Cancel</button>
- <button mat-button mat-dialog-close cdkFocusInitial (click)="data.onConfirm()" i18n="Yes @@yes">Yes</button>
-</mat-dialog-actions>
diff --git a/src/frontend/src/app/consent-management/provider-settings/provider-setting.component.html b/src/frontend/src/app/consent-management/provider-settings/provider-setting.component.html
index 6f224ee44dc8c10508583b46bc1297eb7281778f..95ec032785feb748a9a365e9c70ab8fbf28f7c43 100644
--- a/src/frontend/src/app/consent-management/provider-settings/provider-setting.component.html
+++ b/src/frontend/src/app/consent-management/provider-settings/provider-setting.component.html
@@ -1,152 +1,82 @@
<div *ngIf="consentDeclaration" class="groups">
- <mat-card *ngFor="let consentGroup of consentDeclaration.groups; index as idx">
- <mat-card-title
- *ngIf="!consentGroup.isDefault"
- [ngClass]="{ inactive: !isGroupActive(consentGroup) }">
- <mat-slide-toggle
- color="primary"
- (click)="$event.stopPropagation()"
- (change)="toggleGroup(consentGroup, $event)"
- [checked]="isGroupActive(consentGroup)"></mat-slide-toggle>
- {{ consentGroup.label }}
- </mat-card-title>
- <div [ngClass]="{ inactive: !consentGroup.isDefault && !isGroupActive(consentGroup) }">
- <p>{{ consentGroup.description }}</p>
- </div>
+ <nz-card *ngFor="let consentGroup of consentDeclaration.groups; index as idx" [nzTitle]="!consentGroup.isDefault ? consentGroup.label : ''" [nzExtra]="titleToggle">
+ <ng-template #titleToggle>
+ <nz-switch
+ (click)="$event.stopPropagation()"
+ (ngModelChange)="toggleGroup(consentGroup, $event)"
+ [ngModel]="isGroupActive(consentGroup)"></nz-switch>
+ </ng-template>
- <mat-accordion
- [ngClass]="{ inactive: !consentGroup.isDefault && isGroupActive(consentGroup) }" *ngIf="consentGroup.showVerbDetails">
- <mat-expansion-panel [expanded]="consentGroup.isDefault">
- <mat-expansion-panel-header>
- <mat-panel-title> Details </mat-panel-title>
- <mat-panel-description> </mat-panel-description>
- </mat-expansion-panel-header>
- <mat-accordion multi>
- <mat-expansion-panel *ngFor="let verb of consentGroup.verbs | orderBy:'label'; index as fieldIdx">
- <mat-expansion-panel-header>
- <mat-panel-title>
- <div class="setting">
- <mat-slide-toggle
- matTooltip="previous setting"
- *ngIf="userConsentVerbsLookUp[verb.id] !== undefined"
- (click)="$event.stopPropagation()"
- [checked]="userConsentVerbsLookUp[verb.id]"
- matTooltipShowDelay="250"
- i18n-matTooltip="Previous setting @@previousSetting"
- disabled="true"></mat-slide-toggle>
- <mat-icon *ngIf="userConsentVerbsLookUp[verb.id] !== undefined"
- >arrow_right_alt</mat-icon
- >
- <mat-slide-toggle
- color="primary"
- (click)="$event.stopPropagation()"
- (change)="toggleVerb(verb.id, $event)"
- [checked]="verb.consented"
- [disabled]="!consentGroup.isDefault"></mat-slide-toggle>
- <div>{{ verb.label }}</div>
- <mat-icon [matTooltip]="verb.description" class="hint-icon"
- >info_outlined</mat-icon
- >
- <mat-icon
- class="delete-icon"
- *ngIf="deleteable"
- (click)="openDeleteVerbDataDialog($event, verb.id)"
- >delete</mat-icon
- >
- </div>
- </mat-panel-title>
- <mat-panel-description>
- {{ verb.description }}
- </mat-panel-description>
- </mat-expansion-panel-header>
-
- <div>
- <mat-list>
- <div matSubheader *ngIf="verb.objects.length > 0">Objekte</div>
- <mat-list-item
- *ngFor="let object of verb.objects"
- matTooltip="{{ object.definition | json }}">
- <div class="setting">
- <mat-slide-toggle
- color="primary"
- (change)="
- toggleObjectConsent(verb.id, object.id, $event)
- "
- [checked]="object.consented"
- [disabled]="!consentGroup.isDefault"></mat-slide-toggle>
- <mat-slide-toggle
- matTooltip="previous setting"
- *ngIf="userConsentObjectLookUp[object.id] !== undefined"
- (click)="$event.stopPropagation()"
- [checked]="userConsentObjectLookUp[object.id]"
- matTooltipShowDelay="250"
- i18n-matTooltip="Previous setting @@previousSetting"
- disabled="true"></mat-slide-toggle>
- <div>{{ object.label }}</div>
- <mat-icon
- class="delete-icon"
- *ngIf="deleteable"
- (click)="
- openDeleteObjectDataDialog(
- $event,
- verb.id,
- object.id
- )
- "
- >delete</mat-icon
- >
- </div>
- </mat-list-item>
- </mat-list>
- </div>
- </mat-expansion-panel>
- </mat-accordion>
- </mat-expansion-panel>
- </mat-accordion>
- <br />
- <div [ngClass]="{ inactive: !consentGroup.isDefault && !isGroupActive(consentGroup) }">
- <div
- class="purpose-of-collection-header"
- i18n="Purpose of Collection | Header @@purposeOfCollection">
- Why would we like to collect these data?
- </div>
- {{ consentGroup.purposeOfCollection }}
- </div>
- </mat-card>
- <div
- matSubheader
- *ngIf="consentDeclaration.essential_verbs.length > 0"
- i18n="Essential User Consents | Subheader @@essentialUserConsentsSubHeader">
- Essential user consents
+ <div [ngClass]="{ inactive: !consentGroup.isDefault && !isGroupActive(consentGroup) }">
+ <p>{{ consentGroup.description }}</p>
</div>
- <mat-accordion>
- <mat-expansion-panel *ngFor="let verb of consentDeclaration.essential_verbs">
- <mat-expansion-panel-header>
- <mat-panel-title>
- <div class="setting">
- <div>{{ verb.label }}</div>
- <mat-icon [matTooltip]="verb.description" class="hint-icon"
- >info_outlined</mat-icon
- >
- </div>
- </mat-panel-title>
- <mat-panel-description>
- {{ verb.description }}
- </mat-panel-description>
- </mat-expansion-panel-header>
- <div>
- <mat-list>
- <div matSubheader *ngIf="verb.objects.length > 0">Objekte</div>
- <mat-list-item
- *ngFor="let object of verb.objects"
- matTooltip="{{ object.definition | json }}">
- <div class="setting">
- <div>{{ object.label }}</div>
- </div>
- </mat-list-item>
- </mat-list>
- </div>
- </mat-expansion-panel>
- </mat-accordion>
+ <nz-collapse
+ [ngClass]="{ inactive: !consentGroup.isDefault && isGroupActive(consentGroup) }" *ngIf="consentGroup.showVerbDetails">
+ <nz-collapse-panel [nzActive]="consentGroup.isDefault" nzHeader="Details">
+
+ <nz-collapse>
+ <nz-collapse-panel *ngFor="let verb of consentGroup.verbs | orderBy:'label'; index as fieldIdx" [nzHeader]="headerTemplate">
+ <ng-template #headerTemplate>
+ <div class="setting">
+ <nz-switch
+ nz-tooltip
+ nzTooltipTitle="Previous setting"
+ *ngIf="userConsentVerbsLookUp[verb.id] !== undefined"
+ (click)="$event.stopPropagation()"
+ [ngModel]="userConsentVerbsLookUp[verb.id]"
+ i18n-nzTooltipTitle="Previous setting @@previousSetting"
+ nzDisabled="true"></nz-switch>
+ <fa-icon *ngIf="userConsentVerbsLookUp[verb.id] !== undefined" [icon]="faArrowRight"></fa-icon>
+ <nz-switch
+ [nzControl]="true"
+ (click)="$event.stopPropagation();toggleVerb(verb.id)"
+ [(ngModel)]="verb.consented"
+ [nzDisabled]="!consentGroup.isDefault"></nz-switch>
+ <div>{{ verb.label }}</div>
+ <fa-icon class="hint-icon" [icon]="faInfo"></fa-icon>
+ <fa-icon
+ class="delete-icon"
+ *ngIf="deletable"
+ (click)="openDeleteVerbDataDialog($event, verb.id)"
+ [icon]="faTrash"
+ ></fa-icon>
+ </div>
+ </ng-template>
+
+ {{ verb.description }}
+
+
+ <nz-list [nzHeader]="verb.objects.length > 0 ? 'Objekte' : undefined">
+ <nz-list-item *ngFor="let object of verb.objects" nz-tooltip nzTooltipTitle="{{ object.definition | json }}">
+ <div class="setting">
+ <nz-switch
+ [nzControl]="true"
+ (click)="$event.stopPropagation();toggleObjectConsent(verb.id, object.id)"
+ [ngModel]="object.consented"
+ [nzDisabled]="!consentGroup.isDefault"></nz-switch>
+ <nz-switch
+ nz-tooltip
+ nzTooltipTitle="previous setting"
+ *ngIf="userConsentObjectLookUp[object.id] !== undefined"
+ (click)="$event.stopPropagation()"
+ [ngModel]="userConsentObjectLookUp[object.id]"
+ i18n-nzTooltipTitle="Previous setting @@previousSetting"
+ nzDisabled="true"></nz-switch>
+ <div>{{ object.label }}</div>
+ <fa-icon
+ class="delete-icon"
+ *ngIf="deletable"
+ (click)="openDeleteObjectDataDialog($event,verb.id,object.id)"
+ [icon]="faTrash"
+ ></fa-icon>
+ </div>
+ </nz-list-item>
+ </nz-list>
+ </nz-collapse-panel>
+ </nz-collapse>
+ </nz-collapse-panel>
+ </nz-collapse>
+
+ </nz-card>
</div>
diff --git a/src/frontend/src/app/consent-management/provider-settings/provider-setting.component.ts b/src/frontend/src/app/consent-management/provider-settings/provider-setting.component.ts
index 850222f2635a3a9e32c1d97482690fffa85bd121..4173feb1fa6308c278ef786695f99545bea3a52a 100644
--- a/src/frontend/src/app/consent-management/provider-settings/provider-setting.component.ts
+++ b/src/frontend/src/app/consent-management/provider-settings/provider-setting.component.ts
@@ -1,266 +1,302 @@
-import { Component, Input, OnInit, Output, EventEmitter, Inject } from '@angular/core'
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'
import {
- ConsentGroupConsented,
- UserConsent,
- XApiObjectConsented,
- XApiVerbConsented
+ ConsentGroupConsented,
+ UserConsent,
+ XApiVerbConsented
} from '../consentDeclaration'
-import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'
-import { MatSlideToggleChange } from '@angular/material/slide-toggle'
+
import { DeleteDialog } from 'src/app/dialogs/delete-dialog/delete-dialog'
import { DataRemovalService } from 'src/app/data-removal.service'
-import { ToastrService } from 'ngx-toastr'
+
+import { faArrowRight, faInfo, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { NzMessageService } from 'ng-zorro-antd/message'
+import { NzModalService } from 'ng-zorro-antd/modal'
interface LookUp {
- [key: string]: boolean
+ [key: string]: boolean
}
@Component({
- selector: 'app-provider-setting[consentDeclaration]',
- templateUrl: './provider-setting.component.html',
- styleUrls: ['./provider-setting.component.scss']
+ selector: 'app-provider-setting[consentDeclaration]',
+ templateUrl: './provider-setting.component.html',
+ styleUrls: ['./provider-setting.component.scss']
})
export class PrivacySettingComponent implements OnInit {
- userConsentVerbsLookUp: LookUp = {}
- userConsentObjectLookUp: LookUp = {}
- @Input() consentDeclaration!: UserConsent
- @Input() previousUserConsent: UserConsent | null = null
- @Input() deleteable? = false
- @Output()
- change: EventEmitter<UserConsent> = new EventEmitter<UserConsent>()
+ faArrowRight = faArrowRight
+ faInfo = faInfo
+ faTrash = faTrash
- constructor(
- private _dialog: MatDialog,
- private _removalService: DataRemovalService,
- private _toasterService: ToastrService
- ) {}
+ userConsentVerbsLookUp: LookUp = {}
+ userConsentObjectLookUp: LookUp = {}
+ @Input() consentDeclaration!: UserConsent
+ @Input() previousUserConsent: UserConsent | null = null
+ @Input() deletable? = false
+ @Output()
+ change: EventEmitter<UserConsent> = new EventEmitter<UserConsent>()
- ngOnInit(): void {
- if (this.previousUserConsent) this.buildUserConsentVerbsLookUps()
- }
+ constructor(
+ private _dialog: NzModalService,
+ private _removalService: DataRemovalService,
+ private _messageService: NzMessageService
+ ) {
+ }
- buildUserConsentVerbsLookUps(): void {
- const verbLookUp: LookUp = {}
- const objectLookUp: LookUp = {}
+ ngOnInit(): void {
+ if (this.previousUserConsent) this.buildUserConsentVerbsLookUps()
+ }
- if (this.previousUserConsent) {
- for (const group of this.previousUserConsent.groups) {
- for (const verb of group.verbs) {
- verbLookUp[verb.id] = verb.consented ?? verb.defaultConsent
- for (const object of verb.objects)
- objectLookUp[object.id] = object.consented ?? object.defaultConsent
- }
- }
+ buildUserConsentVerbsLookUps(): void {
+ const verbLookUp: LookUp = {}
+ const objectLookUp: LookUp = {}
+
+ if (this.previousUserConsent) {
+ for (const group of this.previousUserConsent.groups) {
+ for (const verb of group.verbs) {
+ verbLookUp[verb.id] = verb.consented ?? verb.defaultConsent
+ for (const object of verb.objects)
+ objectLookUp[object.id] = object.consented ?? object.defaultConsent
}
- this.userConsentVerbsLookUp = verbLookUp
- this.userConsentObjectLookUp = objectLookUp
+ }
}
+ this.userConsentVerbsLookUp = verbLookUp
+ this.userConsentObjectLookUp = objectLookUp
+ }
+
+ toggleGroup(group: ConsentGroupConsented, checked: boolean): void {
+ group.verbs.forEach((verb) => {
+ verb.consented = checked
+ verb.objects.forEach((object) => (object.consented = checked))
+ this.toggleVerbWithoutDialog(verb.id, checked)
+ })
+ this.change.emit(this.consentDeclaration)
+ }
- toggleGroup(group: ConsentGroupConsented, event: MatSlideToggleChange): void {
+ toggleVerbWithoutDialog(verbId: string, checked: boolean): void {
+ this.consentDeclaration.groups.forEach((group) => {
+ if (group.verbs.find(({ id }) => id == verbId))
group.verbs.forEach((verb) => {
- verb.consented = event.checked
- verb.objects.forEach((object) => (object.consented = event.checked))
- this.toggleVerbWithoutDialog(verb.id, event)
+ if (verb.id === verbId) {
+ verb.consented = checked
+ verb.objects.forEach((object) => {
+ object.consented = checked
+ })
+ }
})
- this.change.emit(this.consentDeclaration)
- }
+ })
+ }
- toggleVerbWithoutDialog(verbId: string, event: MatSlideToggleChange): void {
- this.consentDeclaration.groups.forEach((group) => {
- if (group.verbs.find(({ id }) => id == verbId))
- group.verbs.forEach((verb) => {
- if (verb.id === verbId) {
- verb.consented = event.checked
- verb.objects.forEach((object) => {
- object.consented = event.checked
- })
- }
- })
- })
- }
+ isGroupActive(group: ConsentGroupConsented): boolean {
+ return group.verbs.reduce((isActive, verb) => isActive && verb.consented, true)
+ }
- isGroupActive(group: ConsentGroupConsented): boolean {
- return group.verbs.reduce((isActive, verb) => isActive && verb.consented, true)
- }
-
- /**
- * Toggle verb from active to inactive or vice versa.
- * In case a verb is active, a confirmation dialog pops up.
- * Toggeling a verb influences all sibling objects.
- * @param verbId
- * @param event
- */
- toggleVerb(verbId: string, event: MatSlideToggleChange): void {
- let isConfirmationRequired = false
+ /**
+ * Toggle verb from active to inactive or vice versa.
+ * In case a verb is active, a confirmation dialog pops up.
+ * Toggling a verb influences all sibling objects.
+ * @param verbId
+ */
+ toggleVerb(verbId: string): void {
+ let isConfirmationRequired = false
+ this.consentDeclaration.groups.forEach((group) => {
+ if (group.verbs.find(({ id }) => id == verbId))
+ group.verbs.forEach((verb) => {
+ if (verb.id === verbId) {
+ const newConsentedValue = !verb.consented
+ isConfirmationRequired = !newConsentedValue
+ // user clicked on active verb
+ verb.consented = newConsentedValue
+ // activate all objects
+ verb.objects.forEach((object) => {
+ object.consented = newConsentedValue
+ })
+ }
+ })
+ })
+ if (isConfirmationRequired && this.previousUserConsent != null) {
+ const onConfirm = () => this.change.emit(this.consentDeclaration)
+ const onCancel = () => {
+ // revert
this.consentDeclaration.groups.forEach((group) => {
- if (group.verbs.find(({ id }) => id == verbId))
- group.verbs.forEach((verb) => {
- if (verb.id === verbId) {
- const newConsentedValue = !verb.consented
- if (!newConsentedValue) isConfirmationRequired = true
- // user clicked on active verb
- verb.consented = newConsentedValue
- // active all objects
- verb.objects.forEach((object) => {
- object.consented = newConsentedValue
- })
- }
+ if (group.verbs.find(({ id }) => id == verbId))
+ group.verbs.forEach((verb) => {
+ if (verb.id === verbId) {
+ const newConsentedValue = !verb.consented
+ isConfirmationRequired = !newConsentedValue
+ verb.consented = newConsentedValue
+ verb.objects.forEach((object) => {
+ object.consented = newConsentedValue
})
+ }
+ })
})
- if (isConfirmationRequired && this.previousUserConsent != null) {
- const onConfirm = () => this.change.emit(this.consentDeclaration)
- const onCancel = () => (event.source.checked = false)
- this.openVerbWarningDialog(onConfirm, onCancel, verbId)
- } else this.change.emit(this.consentDeclaration)
- }
+ this.change.emit(this.consentDeclaration)
+ }
+ this.openVerbWarningDialog(onConfirm, onCancel, verbId)
+ } else this.change.emit(this.consentDeclaration)
+ }
- toggleVerbBasedOnObjects(verb: XApiVerbConsented): void {
- const allObjectsActive = verb.objects.reduce(
- (allActive, object) => allActive && object.consented,
- true
- )
- const allObjectsInActive = verb.objects.reduce(
- (allActive, object) => allActive && !object.consented,
- true
- )
+ toggleVerbBasedOnObjects(verb: XApiVerbConsented): void {
+ const allObjectsActive = verb.objects.reduce(
+ (allActive, object) => allActive && object.consented,
+ true
+ )
+ const allObjectsInActive = verb.objects.reduce(
+ (allActive, object) => allActive && !object.consented,
+ true
+ )
- if (allObjectsActive) verb.consented = true
- if (allObjectsInActive) verb.consented = false
- }
+ if (allObjectsActive) verb.consented = true
+ if (allObjectsInActive) verb.consented = false
+ }
- /**
- * Toggle object from active to inactive or vice versa.
- * In case an object is active, a confirmation dialog pops up.
- * Toggeling a verb influences all sibling objects.
- * @param verbId
- * @param event
- */
- toggleObjectConsent(verbId: string, objectId: string, event: MatSlideToggleChange): void {
- let isConfirmationRequired = false
- this.consentDeclaration.groups.forEach((group) => {
- if (group.verbs.find(({ id }) => id == verbId))
- group.verbs.forEach((verb) => {
- if (verb.id === verbId) {
- if (verb.objects.find(({ id }) => id === objectId)) {
- verb.objects.forEach((object) => {
- if (object.id === objectId) {
- const newConsentedValue = !object.consented
- if (!newConsentedValue) {
- // user clicked on active object
- isConfirmationRequired = true
- object.consented = newConsentedValue
- this.toggleVerbBasedOnObjects(verb)
- } else {
- // user clicked on inactive object
- object.consented = newConsentedValue
- this.toggleVerbBasedOnObjects(verb)
- }
- }
- })
- }
- }
- })
- })
- if (isConfirmationRequired && this.previousUserConsent != null) {
- const onConfirm = () => this.change.emit(this.consentDeclaration)
- const onCancel = () => (event.source.checked = false)
- this.openObjectWarningDialog(onConfirm, onCancel,verbId)
- } else this.change.emit(this.consentDeclaration)
- }
+ /**
+ * Toggle object from active to inactive or vice versa.
+ * In case an object is active, a confirmation dialog pops up.
+ * Toggeling a verb influences all sibling objects.
+ * @param verbId
+ * @param objectId
+ */
+ toggleObjectConsent(verbId: string, objectId: string): void {
- openVerbWarningDialog(onConfirm: () => void, onCancel: () => void, verbId: string): void {
- if(this.previousUserConsent && !this.getVerbConsentFromUserConsent(verbId))
- return;
- this._dialog.open(PauseVerbObjectWarningDialog, {
- disableClose: true,
- width: '400px',
- data: {
- text: $localize`:@@pauseVerb:Pause Verb`,
- onConfirm: onConfirm,
- onCancel: onCancel
+ let isConfirmationRequired = false
+ this.consentDeclaration.groups.forEach((group) => {
+ if (group.verbs.find(({ id }) => id == verbId))
+ group.verbs.forEach((verb) => {
+ if (verb.id === verbId) {
+ if (verb.objects.find(({ id }) => id === objectId)) {
+ verb.objects.forEach((object) => {
+ if (object.id === objectId) {
+ const newConsentedValue = !object.consented
+ if (!newConsentedValue) {
+ // user clicked on active object
+ isConfirmationRequired = true
+ object.consented = newConsentedValue
+ this.toggleVerbBasedOnObjects(verb)
+ } else {
+ // user clicked on inactive object
+ object.consented = newConsentedValue
+ this.toggleVerbBasedOnObjects(verb)
+ }
+ }
+ })
}
+ }
})
- }
-
- openObjectWarningDialog(onConfirm: () => void, onCancel: () => void, verbId: string): void {
- if(this.previousUserConsent && !this.getVerbConsentFromUserConsent(verbId))
- return;
- this._dialog.open(PauseVerbObjectWarningDialog, {
- disableClose: true,
- width: '400px',
- data: {
- text: $localize`:@@pauseObject:Pause Object`,
- onConfirm: onConfirm,
- onCancel: onCancel
- }
+ })
+ if (isConfirmationRequired && this.previousUserConsent != null) {
+ const onConfirm = () => this.change.emit(this.consentDeclaration)
+ const onCancel = () => {
+ // revert
+ this.consentDeclaration.groups.forEach((group) => {
+ if (group.verbs.find(({ id }) => id == verbId))
+ group.verbs.forEach((verb) => {
+ if (verb.id === verbId) {
+ if (verb.objects.find(({ id }) => id === objectId)) {
+ verb.objects.forEach((object) => {
+ if (object.id === objectId) {
+ object.consented = !object.consented
+ this.toggleVerbBasedOnObjects(verb)
+ }
+ })
+ }
+ }
+ })
})
- }
+ this.change.emit(this.consentDeclaration)
+ }
+ this.openObjectWarningDialog(onConfirm, onCancel, verbId)
+ } else this.change.emit(this.consentDeclaration)
+ }
- /**
- * Looks in user consent for a matching verbId and returns value of consented field, if matching verbId exists.
- * @param verbId string
- * @returns boolean | null
- */
- getVerbConsentFromUserConsent(verbId: string): boolean | null {
- if (!this.previousUserConsent) return null
+ openVerbWarningDialog(onConfirm: () => void, onCancel: () => void, verbId: string): void {
+ if (this.previousUserConsent && !this.getVerbConsentFromUserConsent(verbId))
+ return
+ this._dialog.create({
+ nzTitle: $localize`:@@pauseVerb:Pause Verb`,
+ nzFooter: [
+ {
+ label: $localize`:@@cancel:Cancel`,
+ onClick: onCancel
+ },
+ {
+ label: $localize`:@@yes:Yes`,
+ onClick: onConfirm
+ }
+ ]
+ })
+ }
- for (const group of this.previousUserConsent.groups) {
- for (const verb of group.verbs) {
- if (verb.id === verbId) return verb.consented ?? verb.defaultConsent
- }
+ openObjectWarningDialog(onConfirm: () => void, onCancel: () => void, verbId: string): void {
+ if (this.previousUserConsent && !this.getVerbConsentFromUserConsent(verbId))
+ return
+ this._dialog.create({
+ nzTitle: $localize`:@@pauseObject:Pause Object`,
+ nzFooter: [
+ {
+ label: $localize`:@@cancel:Cancel`,
+ onClick: onCancel
+ },
+ {
+ label: $localize`:@@yes:Yes`,
+ onClick: onConfirm
}
- return null
- }
+ ]
+ })
+ }
- openDeleteVerbDataDialog(event: any, verbId: string): void {
- event.stopPropagation()
- const dialogRef = this._dialog.open(DeleteDialog, {
- data: {
- headerText: $localize`:@@deleteStoredVerbData: Delete Stored Data for Verb`
- }
- })
+ /**
+ * Looks in user consent for a matching verbId and returns value of consented field, if matching verbId exists.
+ * @param verbId string
+ * @returns boolean | null
+ */
+ getVerbConsentFromUserConsent(verbId: string): boolean | null {
+ if (!this.previousUserConsent) return null
- dialogRef.afterClosed().subscribe((confirmed) => {
- if (confirmed) {
- this._removalService
- .create({ immedialty: true, scope: { verbId } })
- .subscribe((response) => {
- this._toasterService.success($localize`:@@toastMessageSubmitted:Submitted`)
- })
- }
- })
+ for (const group of this.previousUserConsent.groups) {
+ for (const verb of group.verbs) {
+ if (verb.id === verbId) return verb.consented ?? verb.defaultConsent
+ }
}
+ return null
+ }
- openDeleteObjectDataDialog(event: any, verbId: string, objectId: string): void {
- event.stopPropagation()
- const dialogRef = this._dialog.open(DeleteDialog, {
- data: {
- headerText: $localize`:@@deleteStoredObjectData: Delete Stored Data for Object`
- }
- })
+ openDeleteVerbDataDialog(event: any, verbId: string): void {
+ event.stopPropagation()
+ const dialogRef = this._dialog.create({
+ nzContent: DeleteDialog,
+ nzComponentParams: {
+ headerText: $localize`:@@deleteStoredVerbData: Delete Stored Data for Verb`
+ }
+ })
- dialogRef.afterClosed().subscribe((confirmed) => {
- if (confirmed) {
- this._removalService
- .create({ immedialty: true, scope: { verbId, objectId } })
- .subscribe((response) => {
- this._toasterService.success($localize`:@@toastMessageSubmitted:Submitted`)
- })
- }
- })
- }
-}
+ dialogRef.afterClose.subscribe((confirmed) => {
+ if (confirmed) {
+ this._removalService
+ .create({ immediately: true, scope: { verbId } })
+ .subscribe((response) => {
+ this._messageService.success($localize`:@@toastMessageSubmitted:Submitted`)
+ })
+ }
+ })
+ }
-export interface DialogData {
- text: string
- onConfirm: () => void
- onCancel: () => void
-}
+ openDeleteObjectDataDialog(event: any, verbId: string, objectId: string): void {
+ event.stopPropagation()
+ const dialogRef = this._dialog.create({
+ nzContent: DeleteDialog,
+ nzComponentParams: {
+ headerText: $localize`:@@deleteStoredObjectData: Delete Stored Data for Object`
+ }
+ })
-@Component({
- selector: 'pause-verb-object-warning-dialog',
- templateUrl: 'pause-verb-object-warning-dialog.html'
-})
-export class PauseVerbObjectWarningDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+ dialogRef.afterClose.subscribe((confirmed) => {
+ if (confirmed) {
+ this._removalService
+ .create({ immediately: true, scope: { verbId, objectId } })
+ .subscribe((response) => {
+ this._messageService.success($localize`:@@toastMessageSubmitted:Submitted`)
+ })
+ }
+ })
+ }
}
diff --git a/src/frontend/src/app/consent-management/provider/provider.component.html b/src/frontend/src/app/consent-management/provider/provider.component.html
index 794463bc2e3a42171c0077d235ed4d2424f25a98..782abad145a88300cde86a90541a0f44c0115b7c 100644
--- a/src/frontend/src/app/consent-management/provider/provider.component.html
+++ b/src/frontend/src/app/consent-management/provider/provider.component.html
@@ -1,91 +1,80 @@
<div class="provider">
- <h1>Provider Schemas</h1>
+ <h1>Provider Schemas</h1>
- <mat-tab-group animationDuration="0ms">
- <mat-tab *ngFor="let provider of providers" [label]="provider.name">
- <div class="provider-details">
- <div
- *ngFor="
+ <nz-tabset>
+ <nz-tab *ngFor="let provider of providers" [nzTitle]="provider.name">
+ <div class="provider-details">
+ <div
+ *ngFor="
let schemaVersion of provider.versions;
let cnt = count;
let idx = index
">
- <mat-card class="existing-consents">
- <mat-card-title>
- <div class="schema-version-title">
- <div>Version: {{ cnt - idx }}</div>
- <div>
- <mat-chip-list
- aria-label="latest provider schema"
- *ngIf="idx === 0">
- <mat-chip color="primary" selected>latest</mat-chip>
- </mat-chip-list>
- </div>
- </div>
- </mat-card-title>
- <mat-card-subtitle>{{
- schemaVersion.createdAt | date : 'medium'
- }}</mat-card-subtitle>
- <div
- *ngIf="schemaVersion.superseded_by"
- i18n="Superseded By | Provider schema information @@supersededBy">
- Superseded by: {{ cnt - idx + 1 }}
- </div>
- <mat-slide-toggle
- [(ngModel)]="definitionVisible[provider.id][schemaVersion.id]"
- i18n="Toggle Definition | Slide Toggle Description @@toggleDefinition"
- >Toggle Definition</mat-slide-toggle
- >
- <div
- class="definiton-view"
- *ngIf="definitionVisible[provider.id][schemaVersion.id]">
- <pre>{{ schemaVersion.definition | json }}</pre>
- </div>
- </mat-card>
-
- <app-schema-change
- *ngIf="idx < provider.versions.length - 1"
- [newSchema]="provider.versions[idx].definition"
- [oldSchema]="provider.versions[idx + 1].definition">
- </app-schema-change>
+ <nz-card class="existing-consents">
+ <nz-card-meta [nzTitle]="cardTitle" [nzDescription]="schemaVersion.createdAt | date : 'medium'"></nz-card-meta>
+ <ng-template #cardTitle>
+ <div class="schema-version-title">
+ <div>Version: {{ cnt - idx }}</div>
+ <div>
+ <nz-tag *ngIf="idx === 0" nzColor="default">latest</nz-tag>
</div>
+ </div>
+ </ng-template>
+
+ <div
+ *ngIf="schemaVersion.superseded_by"
+ i18n="Superseded By | Provider schema information @@supersededBy">
+ Superseded by: {{ cnt - idx + 1 }}
</div>
- </mat-tab>
- </mat-tab-group>
+ <nz-switch [(ngModel)]="definitionVisible[provider.id][schemaVersion.id]"></nz-switch>
+ <span i18n="Toggle Definition | Slide Toggle Description @@toggleDefinition">Toggle Definition</span>
+ <div
+ class="definiton-view"
+ *ngIf="definitionVisible[provider.id][schemaVersion.id]">
+ <pre>{{ schemaVersion.definition | json }}</pre>
+ </div>
+ </nz-card>
- <mat-card>
- <mat-card-title i18n="Create Provider Schema @@createProviderSchema"
- >Create/Update Provider Schema</mat-card-title
- >
- <input
- type="file"
- class="file-input"
- accept="application/json"
- (change)="onFileSelected($event)"
- #fileUpload />
+ <app-schema-change
+ *ngIf="idx < provider.versions.length - 1"
+ [newSchema]="provider.versions[idx].definition"
+ [oldSchema]="provider.versions[idx + 1].definition">
+ </app-schema-change>
+ </div>
+ </div>
+ </nz-tab>
+ </nz-tabset>
- <div class="file-upload">
- {{ fileName }}
+ <nz-card [nzTitle]="createCardTitle">
+ <ng-template #createCardTitle i18n="Create Provider Schema @@createProviderSchema">
+ Create/Update Provider Schema
+ </ng-template>
+ <input
+ type="file"
+ class="file-input"
+ accept="application/json"
+ (change)="onFileSelected($event)"
+ #fileUpload />
- <button mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()">
- <mat-icon>attach_file</mat-icon>
- </button>
- </div>
+ <div class="file-upload">
+ {{ fileName }}
- <div class="progress">
- <mat-progress-bar
- class="progress-bar"
- mode="determinate"
- [value]="uploadProgress"
- *ngIf="uploadProgress">
- </mat-progress-bar>
+ <button nz-button nzShape="circle" nzSize="small" nzType="primary" class="upload-btn" (click)="fileUpload.click()">
+ <fa-icon [icon]="faPaperclip"></fa-icon>
+ </button>
+ </div>
- <mat-icon class="cancel-upload" (click)="cancelUpload()" *ngIf="uploadProgress"
- >delete_forever</mat-icon
- >
- </div>
- <button mat-raised-button color="primary" (click)="onSubmit()" i18n="Submit @@submit">
- Submit
- </button>
- </mat-card>
+ <div class="progress">
+ <nz-progress
+ class="progress-bar"
+ [nzPercent]="uploadProgress"
+ *ngIf="uploadProgress">
+ </nz-progress>
+
+ <fa-icon [icon]="faTrash" *ngIf="uploadProgress" (click)="cancelUpload()"></fa-icon>
+ </div>
+ <button nz-button nzType="primary" (click)="onSubmit()" i18n="Submit @@submit">
+ Submit
+ </button>
+ </nz-card>
</div>
diff --git a/src/frontend/src/app/consent-management/provider/provider.component.ts b/src/frontend/src/app/consent-management/provider/provider.component.ts
index c999dd932e36ff3555ee385281d597d8bb42e946..8c4fcde46e5521311c3ba39be994446219f99c6a 100644
--- a/src/frontend/src/app/consent-management/provider/provider.component.ts
+++ b/src/frontend/src/app/consent-management/provider/provider.component.ts
@@ -3,112 +3,116 @@ import { Component, OnInit } from '@angular/core'
import { Subscription } from 'rxjs'
import { environment } from '../../../environments/environment'
import { ApiService, Provider } from 'src/app/services/api.service'
-import { ToastrService } from 'ngx-toastr'
import {
- ConsentGroupConsented,
- ProviderSchema,
- providerSchemaToUserConsent,
- UserConsent
+ ProviderSchema,
+ providerSchemaToUserConsent,
+ UserConsent
} from '../consentDeclaration'
+import { faPaperclip, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { NzMessageService } from 'ng-zorro-antd/message'
type ProviderId = string
type ProviderSchemaVersionId = string
@Component({
- selector: 'app-provider',
- templateUrl: './provider.component.html',
- styleUrls: ['./provider.component.scss']
+ selector: 'app-provider',
+ templateUrl: './provider.component.html',
+ styleUrls: ['./provider.component.scss']
})
export class ProviderComponent implements OnInit {
- providers: Provider[] = []
- fileName = $localize`:@@selectProviderSchema:Please select a JSON file.`
- selectedFile?: File
- uploadProgress: number | null = null
- uploadSub: Subscription | null = null
- definitionVisible: Record<ProviderId, Record<ProviderSchemaVersionId, boolean>> = {}
+ providers: Provider[] = []
+ fileName = $localize`:@@selectProviderSchema:Please select a JSON file.`
+ selectedFile?: File
+ uploadProgress: number | null = null
+ uploadSub: Subscription | null = null
+ definitionVisible: Record<ProviderId, Record<ProviderSchemaVersionId, boolean>> = {}
- constructor(
- private _http: HttpClient,
- private _apiService: ApiService,
- private _toasterService: ToastrService
- ) {}
+ constructor(
+ private _http: HttpClient,
+ private _apiService: ApiService,
+ private _messageService: NzMessageService
+ ) {
+ }
- ngOnInit(): void {
- this.getAllProviders()
- }
+ ngOnInit(): void {
+ this.getAllProviders()
+ }
- getAllProviders() {
- this._apiService.getProviders().subscribe((providers) => {
- this.providers = providers
+ getAllProviders() {
+ this._apiService.getProviders().subscribe((providers) => {
+ this.providers = providers
- providers.map((provider) => {
- const res = provider.versions.reduce((acc, e) => {
- {
- acc[e.id] = false
- }
- return acc
- }, {} as Record<ProviderSchemaVersionId, boolean>)
- this.definitionVisible[provider.id] = res
- })
- })
- }
+ providers.map((provider) => {
+ const res = provider.versions.reduce((acc, e) => {
+ {
+ acc[e.id] = false
+ }
+ return acc
+ }, {} as Record<ProviderSchemaVersionId, boolean>)
+ this.definitionVisible[provider.id] = res
+ })
+ })
+ }
- onFileSelected(event: any) {
- const file: File = event.target.files[0]
+ onFileSelected(event: any) {
+ const file: File = event.target.files[0]
- if (file) {
- this.selectedFile = file
- this.fileName = file.name
- }
+ if (file) {
+ this.selectedFile = file
+ this.fileName = file.name
}
+ }
- onSubmit() {
- if (this.selectedFile) {
- const formData = new FormData()
- formData.append('filename', this.fileName)
- formData.append('provider-schema', this.selectedFile)
+ onSubmit() {
+ if (this.selectedFile) {
+ const formData = new FormData()
+ formData.append('filename', this.fileName)
+ formData.append('provider-schema', this.selectedFile)
- const upload$ = this._http.put(
- `${environment.apiUrl}/api/v1/consents/provider/create`,
- formData,
- {
- reportProgress: true,
- observe: 'events'
- }
- )
+ const upload$ = this._http.put(
+ `${environment.apiUrl}/api/v1/consents/provider/create`,
+ formData,
+ {
+ reportProgress: true,
+ observe: 'events'
+ }
+ )
- this.uploadSub = upload$.subscribe({
- next: (event) => {
- if (event.type == HttpEventType.UploadProgress) {
- this.uploadProgress = Math.round(100 * (event.loaded / (event.total ?? 1)))
- }
- },
- complete: () => {
- this.reset()
- this.getAllProviders()
- this._toasterService.success($localize`:@@toastMessageCreated:Created`)
- },
- error: () => {
- // Error toast is triggered via interceptor
- this.reset()
- }
- })
+ this.uploadSub = upload$.subscribe({
+ next: (event) => {
+ if (event.type == HttpEventType.UploadProgress) {
+ this.uploadProgress = Math.round(100 * (event.loaded / (event.total ?? 1)))
+ }
+ },
+ complete: () => {
+ this.reset()
+ this.getAllProviders()
+ this._messageService.success($localize`:@@toastMessageCreated:Created`)
+ },
+ error: () => {
+ // Error toast is triggered via interceptor
+ this.reset()
}
+ })
}
+ }
- cancelUpload() {
- this.uploadSub?.unsubscribe()
- this.reset()
- }
+ cancelUpload() {
+ this.uploadSub?.unsubscribe()
+ this.reset()
+ }
- reset() {
- this.fileName = $localize`:@@selectProviderSchema:Please select a JSON file.`
- this.uploadProgress = null
- this.uploadSub = null
- window.scroll(0, 0)
- }
+ reset() {
+ this.fileName = $localize`:@@selectProviderSchema:Please select a JSON file.`
+ this.uploadProgress = null
+ this.uploadSub = null
+ window.scroll(0, 0)
+ }
- providerSchemaToUserConsent(providerSchema: ProviderSchema): UserConsent {
- return providerSchemaToUserConsent(providerSchema)
- }
+ providerSchemaToUserConsent(providerSchema: ProviderSchema): UserConsent {
+ return providerSchemaToUserConsent(providerSchema)
+ }
+
+ protected readonly faPaperclip = faPaperclip
+ protected readonly faTrash = faTrash
}
diff --git a/src/frontend/src/app/consent-management/schema-change/object-changes/object-changes.component.html b/src/frontend/src/app/consent-management/schema-change/object-changes/object-changes.component.html
index 6782d3a0a725f9bc46bd76c88a13f17965a34f97..d2890b36114b53f2df4c44529a0f339940f11dc6 100644
--- a/src/frontend/src/app/consent-management/schema-change/object-changes/object-changes.component.html
+++ b/src/frontend/src/app/consent-management/schema-change/object-changes/object-changes.component.html
@@ -1,10 +1,9 @@
-<div mat-subheader>Object changes</div>
-<mat-list-item *ngFor="let changedObject of objectChanges">
- <mat-icon mat-list-icon *ngIf="changedObject.type === 'new'">add</mat-icon>
- <mat-icon mat-list-icon *ngIf="changedObject.type === 'changed'">update</mat-icon>
- <mat-icon mat-list-icon *ngIf="changedObject.type === 'removed'">remove</mat-icon>
- <div mat-line>
- {{ changedObject.new?.label }}
- </div>
- <div mat-line>{{ changedObject.description }}</div>
-</mat-list-item>
+<nz-list nzHeader="Object Changes">
+ <nz-list-item *ngFor="let changedObject of objectChanges">
+ <nz-list-item-meta [nzTitle]="changedObject.new?.label" [nzDescription]="changedObject.description">
+ </nz-list-item-meta>
+ <fa-icon *ngIf="changedObject.type === 'new'" [icon]="faPlus"></fa-icon>
+ <fa-icon *ngIf="changedObject.type === 'changed'" [icon]="faWrench"></fa-icon>
+ <fa-icon *ngIf="changedObject.type === 'removed'" [icon]="faTrash"></fa-icon>
+ </nz-list-item>
+</nz-list>
diff --git a/src/frontend/src/app/consent-management/schema-change/object-changes/object-changes.component.ts b/src/frontend/src/app/consent-management/schema-change/object-changes/object-changes.component.ts
index af3bcb22428a1c516cdc237a3f8d07d7308a8082..b722e3875f8f3d0f4f9719bf58dc05f8a25fb297 100644
--- a/src/frontend/src/app/consent-management/schema-change/object-changes/object-changes.component.ts
+++ b/src/frontend/src/app/consent-management/schema-change/object-changes/object-changes.component.ts
@@ -1,5 +1,6 @@
import { Component, OnInit, Input } from '@angular/core'
import { ObjectChange } from '../schema-change.component'
+import { faPlus, faTrash, faWrench } from '@fortawesome/free-solid-svg-icons'
@Component({
selector: 'app-object-changes',
@@ -12,4 +13,8 @@ export class ObjectChangesComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
+
+ protected readonly faPlus = faPlus
+ protected readonly faWrench = faWrench
+ protected readonly faTrash = faTrash
}
diff --git a/src/frontend/src/app/consent-management/schema-change/schema-change.component.html b/src/frontend/src/app/consent-management/schema-change/schema-change.component.html
index cb435fbb146259b412cc88a66f52cba796b41b10..f07f8e0608a355c320067f2723dba56ca6c7bde4 100644
--- a/src/frontend/src/app/consent-management/schema-change/schema-change.component.html
+++ b/src/frontend/src/app/consent-management/schema-change/schema-change.component.html
@@ -1,104 +1,110 @@
-<mat-expansion-panel>
- <mat-expansion-panel-header>
- <mat-panel-title i18n="Schema Changes | Header @@schemaChanges">
- Schema Changes
- </mat-panel-title>
- </mat-expansion-panel-header>
+<nz-collapse>
+ <nz-collapse-panel [nzHeader]="panelHeader">
+ <ng-template #panelHeader>
+ <span i18n="Schema Changes | Header @@schemaChanges">
+ Schema Changes
+ </span>
+ </ng-template>
- <ng-template matExpansionPanelContent>
- <div *ngFor="let schemaChange of schemaChanges">
- <h2>{{ schemaChange.name }}</h2>
- <mat-chip-list>
- <mat-chip
- *ngIf="schemaChange.type === 'changed'"
- i18n="Schema Changed | Status @@schemaChanged"
- >Schema changed</mat-chip
- >
- <mat-chip
- *ngIf="schemaChange.type === 'new'"
- i18n="Schema Added | Status @@schemaAdded"
- >Schema added</mat-chip
- >
- <mat-chip
- *ngIf="schemaChange.type === 'removed'"
- i18n="Schema Removed | Status @@schemaRemoved"
- >Schema removed</mat-chip
- >
- </mat-chip-list>
+ <div *ngFor="let schemaChange of schemaChanges">
+ <h2>{{ schemaChange.name }}</h2>
+ <div>
+ <nz-tag
+ *ngIf="schemaChange.type === 'changed'"
+ i18n="Schema Changed | Status @@schemaChanged"
+ >Schema changed
+ </nz-tag>
+ <nz-tag
+ *ngIf="schemaChange.type === 'new'"
+ i18n="Schema Added | Status @@schemaAdded"
+ >Schema added
+ </nz-tag>
+ <nz-tag
+ *ngIf="schemaChange.type === 'removed'"
+ i18n="Schema Removed | Status @@schemaRemoved"
+ >Schema removed
+ </nz-tag>
+ </div>
- <mat-list>
- <div
- mat-subheader
- *ngIf="(schemaChange.changedVerbs ?? []).length > 0"
- i18n="Changed Verbs | Sub header @@changedVerbs">
- Changed Verbs
- </div>
- <div *ngFor="let changedVerb of schemaChange.changedVerbs">
- <mat-list-item>
- <mat-icon mat-list-icon>update</mat-icon>
- <div mat-line>
- {{ changedVerb.new?.label }}
- </div>
- <div mat-line>{{ changedVerb.description }}</div>
- </mat-list-item>
- <div class="object-changes" *ngIf="changedVerb.objectChanges.length > 0">
- <app-object-changes
- [objectChanges]="changedVerb.objectChanges"></app-object-changes>
- </div>
- </div>
- <div mat-subheader *ngIf="(schemaChange.newVerbs ?? []).length > 0">New Verbs</div>
- <div *ngFor="let newVerb of schemaChange.newVerbs">
- <mat-list-item>
- <mat-icon mat-list-icon>add</mat-icon>
- <div mat-line>
- {{ newVerb.new?.label }}
- </div>
- <div mat-line>{{ newVerb.description }}</div>
- </mat-list-item>
- <div class="object-changes" *ngIf="newVerb.objectChanges.length > 0">
- <app-object-changes
- [objectChanges]="newVerb.objectChanges"></app-object-changes>
- </div>
- </div>
- <div
- mat-subheader
- *ngIf="(schemaChange.removedVerbs ?? []).length > 0"
- i18n="Removed Verbs | Sub header @@removedVerbs">
- Removed Verbs
- </div>
- <div *ngFor="let removedVerb of schemaChange.removedVerbs">
- <mat-list-item>
- <mat-icon mat-list-icon>remove</mat-icon>
- <div mat-line>
- {{ removedVerb.old?.label }}
- </div>
- <div mat-line>{{ removedVerb.description }}</div>
- </mat-list-item>
- <div class="object-changes" *ngIf="removedVerb.objectChanges.length > 0">
- <app-object-changes
- [objectChanges]="removedVerb.objectChanges"></app-object-changes>
- </div>
- </div>
- <div
- mat-subheader
- *ngIf="(schemaChange.verbsWithChangedObjects ?? []).length > 0"
- i18n="Objects in Verb changed | Sub header @@objectsInVerbChanged">
- Objects in Verb changed
- </div>
- <div *ngFor="let verb of schemaChange.verbsWithChangedObjects">
- <mat-list-item>
- <mat-icon mat-list-icon>update</mat-icon>
- <div mat-line>
- {{ verb.old?.label }}
- </div>
- <div mat-line>{{ verb.description }}</div>
- </mat-list-item>
- <div class="object-changes" *ngIf="verb.objectChanges.length > 0">
- <app-object-changes
- [objectChanges]="verb.objectChanges"></app-object-changes>
- </div>
- </div>
- </mat-list>
- </div>
- </ng-template>
-</mat-expansion-panel>
+ <nz-list>
+ <nz-list-header
+ *ngIf="(schemaChange.changedVerbs ?? []).length > 0"
+ i18n="Changed Verbs | Sub header @@changedVerbs">
+ Changed Verbs
+ </nz-list-header>
+
+ <nz-list-item *ngFor="let changedVerb of schemaChange.changedVerbs">
+ <nz-list-item-meta [nzAvatar]="listItemIcon1" [nzTitle]="changedVerb.new?.label" [nzDescription]="changedVerb.description">
+ <ng-template #listItemIcon1>
+ <fa-icon [icon]="faWrench"></fa-icon>
+ </ng-template>
+ </nz-list-item-meta>
+ <div class="object-changes" *ngIf="changedVerb.objectChanges.length > 0">
+ <app-object-changes
+ [objectChanges]="changedVerb.objectChanges"></app-object-changes>
+ </div>
+ </nz-list-item>
+
+ <nz-list-item *ngIf="(schemaChange.newVerbs ?? []).length > 0">
+ <nz-list-item-meta nzDescription="New Verbs"></nz-list-item-meta>
+ </nz-list-item>
+
+ <nz-list-item *ngFor="let newVerb of schemaChange.newVerbs">
+ <nz-list-item-meta [nzAvatar]="listItemIcon" [nzTitle]="newVerb.new?.label" [nzDescription]="newVerb.description">
+ <ng-template #listItemIcon>
+ <fa-icon [icon]="faPlus"></fa-icon>
+ </ng-template>
+ </nz-list-item-meta>
+ <div class="object-changes" *ngIf="newVerb.objectChanges.length > 0">
+ <app-object-changes
+ [objectChanges]="newVerb.objectChanges"></app-object-changes>
+ </div>
+ </nz-list-item>
+
+ <nz-list-item *ngIf="(schemaChange.newVerbs ?? []).length > 0">
+ <nz-list-item-meta [nzDescription]="descriptionLocalized"></nz-list-item-meta>
+ <ng-template #descriptionLocalized>
+ <span i18n="Removed Verbs | Sub header @@removedVerbs">
+ Removed Verbs
+ </span>
+ </ng-template>
+ </nz-list-item>
+
+ <nz-list-item *ngFor="let removedVerb of schemaChange.removedVerbs">
+ <nz-list-item-meta [nzAvatar]="listItemIcon" [nzTitle]="removedVerb.old?.label" [nzDescription]="removedVerb.description">
+ <ng-template #listItemIcon>
+ <fa-icon [icon]="faTrash"></fa-icon>
+ </ng-template>
+ </nz-list-item-meta>
+
+ <div class="object-changes" *ngIf="removedVerb.objectChanges.length > 0">
+ <app-object-changes
+ [objectChanges]="removedVerb.objectChanges"></app-object-changes>
+ </div>
+ </nz-list-item>
+
+ <nz-list-item *ngIf="(schemaChange.newVerbs ?? []).length > 0">
+ <nz-list-item-meta [nzDescription]="descriptionLocalized1"></nz-list-item-meta>
+ <ng-template #descriptionLocalized1>
+ <span i18n="Objects in Verb changed | Sub header @@objectsInVerbChanged">
+ Objects in Verb changed
+ </span>
+ </ng-template>
+ </nz-list-item>
+
+
+ <nz-list-item *ngFor="let verb of schemaChange.verbsWithChangedObjects">
+ <nz-list-item-meta [nzAvatar]="listItemIcon" [nzTitle]="verb.old?.label" [nzDescription]="verb.description">
+ <ng-template #listItemIcon>
+ <fa-icon [icon]="faWrench"></fa-icon>
+ </ng-template>
+ </nz-list-item-meta>
+ <div class="object-changes" *ngIf="verb.objectChanges.length > 0">
+ <app-object-changes
+ [objectChanges]="verb.objectChanges"></app-object-changes>
+ </div>
+ </nz-list-item>
+ </nz-list>
+ </div>
+ </nz-collapse-panel>
+</nz-collapse>
diff --git a/src/frontend/src/app/consent-management/schema-change/schema-change.component.ts b/src/frontend/src/app/consent-management/schema-change/schema-change.component.ts
index d4daa02b7019a50757e95b1cb9287fca5078981c..81dae51b9f647127a528c919bea7f4a88f8ecadc 100644
--- a/src/frontend/src/app/consent-management/schema-change/schema-change.component.ts
+++ b/src/frontend/src/app/consent-management/schema-change/schema-change.component.ts
@@ -7,6 +7,7 @@ import {
XApiObjectSchema,
XApiVerbSchema
} from '../consentDeclaration'
+import { faPlus, faTrash, faWrench } from '@fortawesome/free-solid-svg-icons'
type VerbChangeType = 'new' | 'removed' | 'changed' | 'onlyObjectChanged' | 'moved'
@@ -356,9 +357,9 @@ export class SchemaChangeComponent implements OnInit {
/**
* Find verb in array of groups.
- * @param groups
- * @param verb
- * @returns
+ * @param groups
+ * @param verb
+ * @returns
*/
findVerbInGroups(
groups: ConsentGroupSchema[],
@@ -454,4 +455,8 @@ export class SchemaChangeComponent implements OnInit {
return schemaChange
})
}
+
+ protected readonly faWrench = faWrench
+ protected readonly faPlus = faPlus
+ protected readonly faTrash = faTrash
}
diff --git a/src/frontend/src/app/consent-management/wizard/wizard.component.html b/src/frontend/src/app/consent-management/wizard/wizard.component.html
index 6077a49ffac4772eae07ec978a9e7e869364c763..67801a9a8737e09c1098cff17cbf585521660b6e 100644
--- a/src/frontend/src/app/consent-management/wizard/wizard.component.html
+++ b/src/frontend/src/app/consent-management/wizard/wizard.component.html
@@ -1,186 +1,176 @@
-<h1 mat-dialog-title i18n="Consent Declaration | Wizard header @@consentDeclaration">
- Consent Declaration
-</h1>
-<div mat-dialog-content>
- <div *ngIf="loading">
- <mat-spinner></mat-spinner>
- </div>
+<div *nzModalTitle i18n="Consent Declaration | Wizard header @@consentDeclaration">
+ Consent Declaration
+</div>
- <div *ngIf="!loading">
- <h3
- i18n="No Provider Schema Hint @@noProviderSchemaHint"
- *ngIf="this.providers.length === 0">
- The provider has not yet uploaded a consent form.
- </h3>
+<div>
+ <div *ngIf="loading">
+ <nz-spin></nz-spin>
+ </div>
- <div i18n="Guide | Guide Text @@guideText">
- <h2>Guide</h2>
- <ul>
- <li>Hint 1</li>
- <li>Hint 2</li>
- <li>Hint 3</li>
- </ul>
- </div>
+ <div *ngIf="!loading">
+ <h3
+ i18n="No Provider Schema Hint @@noProviderSchemaHint"
+ *ngIf="this.providers.length === 0">
+ The provider has not yet uploaded a consent form.
+ </h3>
- <div *ngIf="!isSummary && selectedProviderId">
- <div class="user-consents" *ngIf="wizardUserConsents[selectedProviderId] as userData">
- <h2>{{ userData.provider.name }}</h2>
- <div *ngIf="userData.acceptedProviderSchema as userAcceptedSchema">
- <div *ngIf="userAcceptedSchema.superseded_by !== null">
- <h3 i18n="Provider schema changed @@providerSchemaChanged">
- Since your last visit, the provider has made changes. For each option,
- you will now see your previous consent on the far left, and on the
- right, separated by an arrow, your current consent, which you can of
- course change.
- </h3>
- <app-schema-change
- [newSchema]="userData.provider.versions[0].definition"
- [oldSchema]="userAcceptedSchema.definition">
- </app-schema-change
- ><br />
+ <div i18n="Guide | Guide Text @@guideText">
+ <h2>Guide</h2>
+ <ul>
+ <li>Hint 1</li>
+ <li>Hint 2</li>
+ <li>Hint 3</li>
+ </ul>
+ </div>
+
+ <div *ngIf="!isSummary && selectedProviderId">
+ <div class="user-consents" *ngIf="wizardUserConsents[selectedProviderId] as userData">
+ <h2>{{ userData.provider.name }}</h2>
+ <div *ngIf="userData.acceptedProviderSchema as userAcceptedSchema">
+ <div *ngIf="userAcceptedSchema.superseded_by !== null">
+ <h3 i18n="Provider schema changed @@providerSchemaChanged">
+ Since your last visit, the provider has made changes. For each option,
+ you will now see your previous consent on the far left, and on the
+ right, separated by an arrow, your current consent, which you can of
+ course change.
+ </h3>
+ <app-schema-change
+ [newSchema]="userData.provider.versions[0].definition"
+ [oldSchema]="userAcceptedSchema.definition">
+ </app-schema-change
+ >
+ <br />
- <app-provider-setting
- [consentDeclaration]="userData.defaultConsent"
- [previousUserConsent]="userData.userConsent"
- (change)="
+ <app-provider-setting
+ [consentDeclaration]="userData.defaultConsent"
+ [previousUserConsent]="userData.userConsent"
+ (change)="
changePrivacySetting($event, selectedProviderId)
"></app-provider-setting>
- </div>
+ </div>
- <div *ngIf="userAcceptedSchema.superseded_by === null">
- <h2 i18n="Consent Declaration UpToDate @@consentDeclarationUpToDate">
- You do not need to make any changes to your existing consent form, as
- the provider has not made any changes in the meantime.
- </h2>
- </div>
- </div>
+ <div *ngIf="userAcceptedSchema.superseded_by === null">
+ <h2 i18n="Consent Declaration UpToDate @@consentDeclarationUpToDate">
+ You do not need to make any changes to your existing consent form, as
+ the provider has not made any changes in the meantime.
+ </h2>
+ </div>
+ </div>
- <div *ngIf="!userData.acceptedProviderSchema">
- <h3 i18n="First Consent Declaration @@firstConsentDeclaration">
- You have not yet given consent for provider {{ userData.provider.name }}.
- </h3>
- <app-provider-setting
- [consentDeclaration]="userData.defaultConsent"
- [previousUserConsent]="null"
- (change)="
+ <div *ngIf="!userData.acceptedProviderSchema">
+ <h3 i18n="First Consent Declaration @@firstConsentDeclaration">
+ You have not yet given consent for provider {{ userData.provider.name }}.
+ </h3>
+ <app-provider-setting
+ [consentDeclaration]="userData.defaultConsent"
+ [previousUserConsent]="null"
+ (change)="
changePrivacySetting($event, selectedProviderId)
"></app-provider-setting>
- </div>
- </div>
</div>
+ </div>
+ </div>
- <div *ngIf="isSummary && selectedProviderId">
- <div *ngFor="let providerId of providerIds">
- <mat-card>
- <mat-card-title>{{
- wizardUserConsents[providerId].provider.name
- }}</mat-card-title>
- <div class="user-consents" *ngIf="wizardUserConsents[providerId] as userData">
- <div *ngIf="userData.acceptedProviderSchema as userAcceptedSchema">
- <div *ngIf="userAcceptedSchema.superseded_by !== null">
- <h3
- i18n="
+ <div *ngIf="isSummary && selectedProviderId">
+ <div *ngFor="let providerId of providerIds">
+ <nz-card [nzTitle]="wizardUserConsents[providerId].provider.name">
+ <div class="user-consents" *ngIf="wizardUserConsents[providerId] as userData">
+ <div *ngIf="userData.acceptedProviderSchema as userAcceptedSchema">
+ <div *ngIf="userAcceptedSchema.superseded_by !== null">
+ <h3
+ i18n="
Changed provider schema | Summary text
@@changedProviderSchemaSummaryText">
- The provider has made changes since your last consent
- declaration which requires renewed consent from you.
- </h3>
+ The provider has made changes since your last consent
+ declaration which requires renewed consent from you.
+ </h3>
- <app-provider-setting
- [consentDeclaration]="userData.defaultConsent"
- [previousUserConsent]="userData.userConsent"
- (change)="
+ <app-provider-setting
+ [consentDeclaration]="userData.defaultConsent"
+ [previousUserConsent]="userData.userConsent"
+ (change)="
changePrivacySetting($event, selectedProviderId)
"></app-provider-setting>
- </div>
+ </div>
- <div *ngIf="userAcceptedSchema.superseded_by === null">
- <h3>Nothing changed here.</h3>
- </div>
- </div>
+ <div *ngIf="userAcceptedSchema.superseded_by === null">
+ <h3>Nothing changed here.</h3>
+ </div>
+ </div>
- <div *ngIf="!userData.acceptedProviderSchema">
- <h3
- i18n="
+ <div *ngIf="!userData.acceptedProviderSchema">
+ <h3
+ i18n="
First provider consent | Summary text
@@firstProviderConsentSummaryText">
- You have not previously given consent for this provider, this is
- your first consent declaration.
- </h3>
- <app-provider-setting
- [consentDeclaration]="userData.defaultConsent"
- [previousUserConsent]="null"
- (change)="
+ You have not previously given consent for this provider, this is
+ your first consent declaration.
+ </h3>
+ <app-provider-setting
+ [consentDeclaration]="userData.defaultConsent"
+ [previousUserConsent]="null"
+ (change)="
changePrivacySetting($event, selectedProviderId)
"></app-provider-setting>
- </div>
- </div> </mat-card
- ><br />
</div>
- </div>
+ </div>
+ </nz-card>
+ <br />
+ </div>
</div>
+ </div>
</div>
-<span class="cdk-visually-hidden" #translatedPrevProvider i18n="Previous Provider @@prevProvider"
- >Previous Provider</span
->
-<span class="cdk-visually-hidden" #translatedNextProvider i18n="Next Provider @@nextProvider"
- >Next Provider</span
->
+<span class="cdk-visually-hidden" #translatedPrevProvider i18n="Previous Provider @@prevProvider">Previous Provider</span>
+<span class="cdk-visually-hidden" #translatedNextProvider i18n="Next Provider @@nextProvider">Next Provider</span>
<span class="cdk-visually-hidden" #translatedSummary i18n="Summary @@summary">Summary</span>
<div class="action-btns" *ngIf="!isSummary">
- <button mat-button (click)="logout()" i18n="Logout @@logout">Logout</button>
- <div class="actions-btns-end">
- <button
- mat-button
- [matTooltip]="translatedPrevProvider.innerHTML"
- i18n="Previous @@previousWithIcon"
- (click)="prev()"
- *ngIf="selectedProviderId && providerIds.indexOf(selectedProviderId) - 1 >= 0">
- <mat-icon>arrow_backward</mat-icon> Previous
- </button>
- <button
- mat-button
- [matTooltip]="translatedNextProvider.innerHTML"
- i18n="Next @@nextWithIcon"
- (click)="next()"
- *ngIf="
- selectedProviderId &&
- providerIds.indexOf(selectedProviderId) < providerIds.length - 1;
- else summaryButton
- ">
- Next
- <mat-icon>arrow_forward</mat-icon>
- </button>
- <ng-template #summaryButton>
- <button
- mat-button
- [matTooltip]="translatedSummary.innerHTML"
- i18n="Summary @@summaryWithIcon"
- (click)="showSummary()">
- Summary <mat-icon>arrow_forward</mat-icon>
- </button>
- </ng-template>
- </div>
+ <button nz-button (click)="logout()" i18n="Logout @@logout">Logout</button>
+ <div class="actions-btns-end">
+ <button
+ nz-button
+ i18n="Previous @@previousWithIcon"
+ (click)="prev()"
+ *ngIf="selectedProviderId && providerIds.indexOf(selectedProviderId) - 1 >= 0">
+ <fa-icon [icon]="faArrowLeft"></fa-icon>
+ Previous
+ </button>
+ <button
+ nz-button
+ i18n="Next @@nextWithIcon"
+ (click)="next()"
+ *ngIf="selectedProviderId && providerIds.indexOf(selectedProviderId) < providerIds.length - 1; else summaryButton">
+ Next
+ <fa-icon [icon]="faArrowRight"></fa-icon>
+ </button>
+ <ng-template #summaryButton>
+ <button
+ nz-button
+ i18n="Summary @@summaryWithIcon"
+ (click)="showSummary()">
+ Summary
+ <fa-icon [icon]="faArrowRight"></fa-icon>
+ </button>
+ </ng-template>
+ </div>
</div>
<div class="action-btns" *ngIf="isSummary">
- <button mat-button (click)="logout()" i18n="Logout @@logout">Logout</button>
- <div class="actions-btns-end">
- <button
- mat-button
- (click)="prev()"
- [matTooltip]="translatedPrevProvider.innerHTML"
- i18n="Previous @@previousWithIcon">
- <mat-icon>arrow_backward</mat-icon> Previous
- </button>
- <button
- mat-raised-button
- color="primary"
- (click)="submit()"
- cdkFocusInitial
- i18n="Submit @@submit">
- Submit
- </button>
- </div>
+ <button nz-button (click)="logout()" i18n="Logout @@logout">Logout</button>
+ <div class="actions-btns-end">
+ <button
+ nz-button
+ (click)="prev()"
+ i18n="Previous @@previousWithIcon">
+ <fa-icon [icon]="faArrowLeft"></fa-icon>
+ Previous
+ </button>
+ <button
+ nz-button
+ nzType="primary"
+ (click)="submit()"
+ i18n="Submit @@submit">
+ Submit
+ </button>
+ </div>
</div>
diff --git a/src/frontend/src/app/consent-management/wizard/wizard.component.ts b/src/frontend/src/app/consent-management/wizard/wizard.component.ts
index 4a434e7b02264d050f72a9ec8ea33d33e6dfec95..5521aeb5b5c7ec3140442db88305435fdc48f7bb 100644
--- a/src/frontend/src/app/consent-management/wizard/wizard.component.ts
+++ b/src/frontend/src/app/consent-management/wizard/wizard.component.ts
@@ -1,172 +1,188 @@
-import { Component, Inject } from '@angular/core'
+import { Component, Input } from '@angular/core'
import {
- UserConsent,
- providerSchemaToUserConsent,
- ProviderSchema,
- ProviderId,
- UserConsentVerbs
+ UserConsent,
+ providerSchemaToUserConsent,
+ ProviderSchema,
+ ProviderId,
+ UserConsentVerbs
} from '../consentDeclaration'
import { ApiService, Provider, UserConsentStatus } from 'src/app/services/api.service'
-import { ToastrService } from 'ngx-toastr'
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'
import { AuthService } from 'src/app/services/auth.service'
import { zip } from 'rxjs'
+import { NzMessageService } from 'ng-zorro-antd/message'
+import { NzModalRef } from 'ng-zorro-antd/modal'
+import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'
export const extractVerbs = (providerSchema: UserConsent, providerId: ProviderId): any[] => {
- return providerSchema.groups.flatMap((group) => {
- return group.verbs.flatMap(({ id, consented, defaultConsent, objects }) => ({
- provider: providerId,
- id,
- consented: consented,
- objects: objects ? JSON.stringify(
- objects.map((object) => ({
- ...object,
- consented: object.consented
- }))
- ) : []
+ return providerSchema.groups.flatMap((group) => {
+ return group.verbs.flatMap(({ id, consented, defaultConsent, objects }) => ({
+ provider: providerId,
+ id,
+ consented: consented,
+ objects: objects ? JSON.stringify(
+ objects.map((object) => ({
+ ...object,
+ consented: object.consented
}))
- })
+ ) : []
+ }))
+ })
}
@Component({
- selector: 'wizard-dialog',
- templateUrl: 'wizard.component.html',
- styleUrls: ['./wizard.component.scss']
+ selector: 'wizard-dialog',
+ templateUrl: 'wizard.component.html',
+ styleUrls: ['./wizard.component.scss']
})
export class WizardDialog {
- constructor(
- public dialogRef: MatDialogRef<WizardDialog>,
- @Inject(MAT_DIALOG_DATA) public data: UserConsentStatus | null,
- private _apiService: ApiService,
- private _toasterService: ToastrService,
- private _authService: AuthService
- ) {}
-
- loading = false
- providers: Provider[] = []
- providerIds: number[] = []
- providerUserConsent: Record<
- ProviderId,
- {
- provider: Provider
- userConsent: UserConsent | null
- defaultConsent: UserConsent
- acceptedProviderSchema?: ProviderSchema
- }
- > = {}
- wizardUserConsents: Record<
- ProviderId,
- {
- provider: Provider
- userConsent: UserConsent | null
- defaultConsent: UserConsent
- acceptedProviderSchema?: ProviderSchema
- }
- > = {}
- userConsents: UserConsentVerbs[] = []
- selectedProviderId: number | null = null
- isSummary = false
-
- ngOnInit(): void {
- this.loading = true
- this._apiService.getProviders().subscribe((providers) => {
- this.providers = providers
-
- if (providers.length === 0) this.loading = false
-
- const userConsents$ = zip(
- providers.map((provider) => this._apiService.getUserConsent(provider.id))
- )
-
- userConsents$.subscribe((userConsents) => {
- this.providerUserConsent = userConsents.reduce((acc, userConsent, idx) => {
- acc[providers[idx].id] = {
- provider: providers[idx],
- userConsent: userConsent.consent,
- acceptedProviderSchema: userConsent.provider_schema,
- defaultConsent: providerSchemaToUserConsent(providers[idx].versions[0])
- }
-
- return acc
- }, {} as Record<ProviderId, { provider: Provider; userConsent: UserConsent | null; defaultConsent: UserConsent; acceptedProviderSchema?: ProviderSchema }>)
-
- this.wizardUserConsents = userConsents.reduce((acc, userConsent, idx) => {
- // Skip providers, for which user already accepted the latest version
- if (userConsent.provider_schema?.superseded_by === null) return acc
- acc[providers[idx].id] = {
- provider: providers[idx],
- userConsent: userConsent.consent,
- acceptedProviderSchema: userConsent.provider_schema,
- defaultConsent: providerSchemaToUserConsent(providers[idx].versions[0])
- }
-
- return acc
- }, {} as Record<ProviderId, { provider: Provider; userConsent: UserConsent | null; defaultConsent: UserConsent; acceptedProviderSchema?: ProviderSchema }>)
-
- this.providerIds = Object.keys(this.wizardUserConsents).map(Number)
-
- this.selectedProviderId = +Object.keys(this.wizardUserConsents)[0] ?? null
- this.loading = false
- })
-
- this.userConsents = this.providers.map((provider) => {
- const latestSchema = providerSchemaToUserConsent(provider.versions[0])
- return {
- providerId: provider.id,
- providerSchemaId: latestSchema.id,
- verbs: extractVerbs(latestSchema, provider.id)
- }
- })
- })
+ @Input() data: UserConsentStatus | null = null
+
+ constructor(
+ public dialogRef: NzModalRef<WizardDialog>,
+ private _apiService: ApiService,
+ private _messageService: NzMessageService,
+ private _authService: AuthService
+ ) {
+ }
+
+ loading = false
+ providers: Provider[] = []
+ providerIds: number[] = []
+ providerUserConsent: Record<
+ ProviderId,
+ {
+ provider: Provider
+ userConsent: UserConsent | null
+ defaultConsent: UserConsent
+ acceptedProviderSchema?: ProviderSchema
}
-
- next(): void {
- if (this.selectedProviderId) {
- const idx = this.providerIds.indexOf(this.selectedProviderId)
- if (idx + 1 < this.providerIds.length)
- this.selectedProviderId = this.providerIds[idx + 1]
- }
+ > = {}
+ wizardUserConsents: Record<
+ ProviderId,
+ {
+ provider: Provider
+ userConsent: UserConsent | null
+ defaultConsent: UserConsent
+ acceptedProviderSchema?: ProviderSchema
}
-
- prev(): void {
- if (this.isSummary) {
- this.isSummary = false
- this.selectedProviderId = this.providerIds[this.providerIds.length - 1]
- } else {
- if (this.selectedProviderId) {
- const idx = this.providerIds.indexOf(this.selectedProviderId)
- if (idx - 1 >= 0) this.selectedProviderId = this.providerIds[idx - 1]
- }
+ > = {}
+ userConsents: UserConsentVerbs[] = []
+ selectedProviderId: number | null = null
+ isSummary = false
+
+ ngOnInit(): void {
+ this.loading = true
+ this._apiService.getProviders().subscribe((providers) => {
+ this.providers = providers
+
+ if (providers.length === 0) this.loading = false
+
+ const userConsents$ = zip(
+ providers.map((provider) => this._apiService.getUserConsent(provider.id))
+ )
+
+ userConsents$.subscribe((userConsents) => {
+ this.providerUserConsent = userConsents.reduce((acc, userConsent, idx) => {
+ acc[providers[idx].id] = {
+ provider: providers[idx],
+ userConsent: userConsent.consent,
+ acceptedProviderSchema: userConsent.provider_schema,
+ defaultConsent: providerSchemaToUserConsent(providers[idx].versions[0])
+ }
+
+ return acc
+ }, {} as Record<ProviderId, {
+ provider: Provider;
+ userConsent: UserConsent | null;
+ defaultConsent: UserConsent;
+ acceptedProviderSchema?: ProviderSchema
+ }>)
+
+ this.wizardUserConsents = userConsents.reduce((acc, userConsent, idx) => {
+ // Skip providers, for which user already accepted the latest version
+ if (userConsent.provider_schema?.superseded_by === null) return acc
+ acc[providers[idx].id] = {
+ provider: providers[idx],
+ userConsent: userConsent.consent,
+ acceptedProviderSchema: userConsent.provider_schema,
+ defaultConsent: providerSchemaToUserConsent(providers[idx].versions[0])
+ }
+
+ return acc
+ }, {} as Record<ProviderId, {
+ provider: Provider;
+ userConsent: UserConsent | null;
+ defaultConsent: UserConsent;
+ acceptedProviderSchema?: ProviderSchema
+ }>)
+
+ this.providerIds = Object.keys(this.wizardUserConsents).map(Number)
+
+ this.selectedProviderId = +Object.keys(this.wizardUserConsents)[0] ?? null
+ this.loading = false
+ })
+
+ this.userConsents = this.providers.map((provider) => {
+ const latestSchema = providerSchemaToUserConsent(provider.versions[0])
+ return {
+ providerId: provider.id,
+ providerSchemaId: latestSchema.id,
+ verbs: extractVerbs(latestSchema, provider.id)
}
- }
+ })
+ })
+ }
- showSummary(): void {
- this.isSummary = true
+ next(): void {
+ if (this.selectedProviderId) {
+ const idx = this.providerIds.indexOf(this.selectedProviderId)
+ if (idx + 1 < this.providerIds.length)
+ this.selectedProviderId = this.providerIds[idx + 1]
}
-
- changePrivacySetting(userConsent: UserConsent, providerId: number) {
- let consent = this.userConsents?.find(ele => ele.providerId == providerId)
- if(consent)
- consent.verbs = extractVerbs(userConsent, providerId)
- this.wizardUserConsents[providerId] = {
- ...this.wizardUserConsents[providerId],
- userConsent: userConsent
- }
+ }
+
+ prev(): void {
+ if (this.isSummary) {
+ this.isSummary = false
+ this.selectedProviderId = this.providerIds[this.providerIds.length - 1]
+ } else {
+ if (this.selectedProviderId) {
+ const idx = this.providerIds.indexOf(this.selectedProviderId)
+ if (idx - 1 >= 0) this.selectedProviderId = this.providerIds[idx - 1]
+ }
}
-
- submit(): void {
- this._apiService.saveUserConsent(this.userConsents).subscribe((response) => {
- this._toasterService.success($localize`:@@toastMessageSubmitted:Submitted`)
- this.dialogRef.close()
- })
+ }
+
+ showSummary(): void {
+ this.isSummary = true
+ }
+
+ changePrivacySetting(userConsent: UserConsent, providerId: number) {
+ let consent = this.userConsents?.find(ele => ele.providerId == providerId)
+ if (consent)
+ consent.verbs = extractVerbs(userConsent, providerId)
+ this.wizardUserConsents[providerId] = {
+ ...this.wizardUserConsents[providerId],
+ userConsent: userConsent
}
+ }
- logout(): void {
- this._authService.logout()
- this.dialogRef.close()
- }
+ submit(): void {
+ this._apiService.saveUserConsent(this.userConsents).subscribe((response) => {
+ this._messageService.success($localize`:@@toastMessageSubmitted:Submitted`)
+ this.dialogRef.close()
+ })
+ }
- providerSchemaToUserConsent(providerSchema: ProviderSchema): UserConsent {
- return providerSchemaToUserConsent(providerSchema)
- }
+ logout(): void {
+ this._authService.logout()
+ this.dialogRef.close()
+ }
+
+ providerSchemaToUserConsent(providerSchema: ProviderSchema): UserConsent {
+ return providerSchemaToUserConsent(providerSchema)
+ }
+
+ protected readonly faArrowLeft = faArrowLeft
+ protected readonly faArrowRight = faArrowRight
}
diff --git a/src/frontend/src/app/data-disclosure/confirmation-dialog.html b/src/frontend/src/app/data-disclosure/confirmation-dialog.html
deleted file mode 100644
index ce45640566daad3926392c5ead9a46eb36e3b336..0000000000000000000000000000000000000000
--- a/src/frontend/src/app/data-disclosure/confirmation-dialog.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<h1 mat-dialog-title>Delete file</h1>
-<div mat-dialog-content>{{data.text}}</div>
-<mat-dialog-actions align="end">
- <button mat-button mat-dialog-close>Cancel</button>
- <button mat-button mat-dialog-close cdkFocusInitial (click)="data.onConfirm()">Confirm</button>
-</mat-dialog-actions>
diff --git a/src/frontend/src/app/data-disclosure/data-disclosure.component.html b/src/frontend/src/app/data-disclosure/data-disclosure.component.html
index 784674b163beeff62c83240efacb29a7b4f555ac..7d35d1eb090677f8ea2734412573af010a1eb4d5 100644
--- a/src/frontend/src/app/data-disclosure/data-disclosure.component.html
+++ b/src/frontend/src/app/data-disclosure/data-disclosure.component.html
@@ -1,90 +1,78 @@
<div class="data-disclosure">
- <h1 i18n="Data disclosure @@dataDisclosure">Data Disclosure</h1>
+ <h1 i18n="Data disclosure @@dataDisclosure">Data Disclosure</h1>
- <p i18n="Data discloure | Information about data disclosure process@@dataDisclosureProcessInfo">
- You can query all data collected about you at this point. The collection of the data takes
- place on a time-delayed basis. You will be informed about the completion via e-mail.
- Afterwards, the collected data will be available for download for a specified period of time
- and then will then be deleted automatically.
- </p>
+ <p i18n="Data discloure | Information about data disclosure process@@dataDisclosureProcessInfo">
+ You can query all data collected about you at this point. The collection of the data takes
+ place on a time-delayed basis. You will be informed about the completion via e-mail.
+ Afterwards, the collected data will be available for download for a specified period of time
+ and then will then be deleted automatically.
+ </p>
- <button
- mat-raised-button
- (click)="requestDataDisclosure()"
- color="primary"
- [disabled]="isExportInProgress">
- <span
- *ngIf="isExportInProgress; else requestText"
- i18n="Ongoing data disclosure | Button text @@ongoingDataDisclosure"
- >Processing...</span
- >
- <ng-template
- #requestText
- i18n="Request data disclosure | Button text @@requestDataDisclosure"
- >Request</ng-template
- >
- </button>
+ <button
+ nz-button
+ (click)="requestDataDisclosure()"
+ [disabled]="isExportInProgress">
+ <span
+ *ngIf="isExportInProgress; else requestText"
+ i18n="Ongoing data disclosure | Button text @@ongoingDataDisclosure"
+ >
+ Processing...
+ </span>
+ <ng-template
+ #requestText
+ i18n="Request data disclosure | Button text @@requestDataDisclosure"
+ >
+ Request
+ </ng-template>
+ </button>
- <table mat-table [dataSource]="exports" class="mat-elevation-z8 table">
- <ng-container matColumnDef="id">
- <th mat-header-cell *matHeaderCellDef>No.</th>
- <td mat-cell *matCellDef="let element; let cnt = count; let idx = index">
- {{ cnt - idx }}
- </td>
- </ng-container>
+ <nz-table #exportsTable [nzData]="exports">
+ <thead>
+ <tr>
+ <th>No.</th>
+ <th>Status</th>
+ <th i18n="Created At | Table column header @@createdAt">Created At</th>
+ <th i18n="Available until @@availableUntil">Available until</th>
+ <th i18n="Actions @@actions">Actions</th>
+ </tr>
+ </thead>
- <ng-container matColumnDef="status">
- <th mat-header-cell *matHeaderCellDef>Status</th>
- <td mat-cell *matCellDef="let element">
- <mat-chip-list>
- <mat-chip
- *ngIf="!element.status"
- i18n="Ongoing data disclosure | Button text @@ongoing"
- >Processing...</mat-chip
- >
- <mat-chip *ngIf="element.status">
- {{ element.status }}
- </mat-chip>
- </mat-chip-list>
- </td>
- </ng-container>
+ <tbody>
+ <tr *ngFor="let element of exportsTable.data; index as idx; count as cnt;">
+ <td>{{ cnt - idx }}</td>
+ <td>
+ <nz-tag
+ *ngIf="!element.status"
+ i18n="Ongoing data disclosure | Button text @@ongoing"
+ >
+ Processing...
+ </nz-tag>
+ <nz-tag *ngIf="element.status">
+ {{ element.status }}
+ </nz-tag>
+ </td>
+ <td>
+ {{ element.created | date: 'short' }}
+ </td>
+ <td>
+ {{ element.expires | date: 'short' }}
+ </td>
+ <td>
+ <div class="action-buttons" *ngIf="element.status">
+ <button
+ nz-button
+ nzShape="circle"
+ *ngIf="element.status === 'success'"
+ (click)="downloadZip(element.id.toString())">
+ <fa-icon [icon]="faDownload"></fa-icon>
+ </button>
+ <button nz-button nzShape="circle" (click)="onDeleteClick(element.id)">
+ <fa-icon [icon]="faTrash"></fa-icon>
+ </button>
+ </div>
+ </td>
+ </tr>
+ </tbody>
- <ng-container matColumnDef="created">
- <th
- mat-header-cell
- *matHeaderCellDef
- i18n="Created At | Table column header @@createdAt">
- Created At
- </th>
- <td mat-cell *matCellDef="let element">{{ element.created | date: 'short' }}</td>
- </ng-container>
-
- <ng-container matColumnDef="expires">
- <th mat-header-cell *matHeaderCellDef i18n="Available until @@availableUntil">
- Available until
- </th>
- <td mat-cell *matCellDef="let element">{{ element.expires | date: 'short' }}</td>
- </ng-container>
-
- <ng-container matColumnDef="actions">
- <th mat-header-cell *matHeaderCellDef i18n="Actions @@actions">Actions</th>
- <td mat-cell *matCellDef="let element">
- <div class="action-buttons" *ngIf="element.status">
- <button
- mat-mini-fab
- color="primary"
- *ngIf="element.status === 'success'"
- (click)="downloadZip(element.id)">
- <mat-icon>download</mat-icon>
- </button>
- <button mat-mini-fab (click)="onDeleteClick(element.id)">
- <mat-icon>delete</mat-icon>
- </button>
- </div>
- </td>
- </ng-container>
-
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
- </table>
+ </nz-table>
</div>
diff --git a/src/frontend/src/app/data-disclosure/data-disclosure.component.ts b/src/frontend/src/app/data-disclosure/data-disclosure.component.ts
index 81e62b5359d3a05310040d1047c973f90be3ab92..a729c06182e06b041a2685e37ce19d840e62ebb4 100644
--- a/src/frontend/src/app/data-disclosure/data-disclosure.component.ts
+++ b/src/frontend/src/app/data-disclosure/data-disclosure.component.ts
@@ -1,95 +1,96 @@
-import { Component, OnInit, Inject } from '@angular/core'
-import { ToastrService } from 'ngx-toastr'
+import { Component, OnInit } from '@angular/core'
import { DataDisclosure, DataDisclosureService } from '../data-disclosure.service'
import { environment } from '../../environments/environment'
-import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'
+
+import { faDownload, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { NzMessageService } from 'ng-zorro-antd/message'
+import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal'
@Component({
- selector: 'app-data-disclosure',
- templateUrl: './data-disclosure.component.html',
- styleUrls: ['./data-disclosure.component.scss']
+ selector: 'app-data-disclosure',
+ templateUrl: './data-disclosure.component.html',
+ styleUrls: ['./data-disclosure.component.scss']
})
export class DataDisclosureComponent implements OnInit {
- exports: DataDisclosure[] = []
- isExportInProgress: boolean = true
- constructor(
- private _service: DataDisclosureService,
- private _toastrService: ToastrService,
- public dialog: MatDialog
- ) {}
+ faDownload = faDownload
+ faTrash = faTrash
- displayedColumns: string[] = ['id', 'status', 'created', 'expires', 'actions']
+ exports: DataDisclosure[] = []
+ isExportInProgress: boolean = true
- ngOnInit(): void {
- this.getExports()
- }
+ constructor(
+ private _service: DataDisclosureService,
+ private _messageService: NzMessageService,
+ public dialog: NzModalService
+ ) {
+ }
- getExports() {
- this._service.list().subscribe((response) => {
- this.exports = response
+ displayedColumns: string[] = ['id', 'status', 'created', 'expires', 'actions']
- this.updateIsExportInProgress(response)
- })
- }
+ ngOnInit(): void {
+ this.getExports()
+ }
- updateIsExportInProgress(dataDisclosures: DataDisclosure[]) {
- for (const dataDisclosure of dataDisclosures) {
- if (!dataDisclosure.running && !dataDisclosure.status) {
- this.isExportInProgress = true
- return
- }
- }
- this.isExportInProgress = false
- }
+ getExports() {
+ this._service.list().subscribe((response) => {
+ this.exports = response
- requestDataDisclosure(): void {
- this._service.create().subscribe((response) => {
- this._toastrService.success($localize`:@@successToastMessage:Request sent`)
- this.getExports()
- })
- }
+ this.updateIsExportInProgress(response)
+ })
+ }
- downloadZip(fileId: string): void {
- this._service.getFileSecret(fileId).subscribe((response) => {
- const url = `${environment.apiUrl}/api/v1/data-disclosure/files/${fileId}/${response.secret}`
- const link = document.createElement('a')
- link.setAttribute('target', '_blank')
- link.setAttribute('href', url)
- link.setAttribute('download', `example_config_polaris.json`)
- document.body.appendChild(link)
- link.click()
- link.remove()
- })
+ updateIsExportInProgress(dataDisclosures: DataDisclosure[]) {
+ for (const dataDisclosure of dataDisclosures) {
+ if (!dataDisclosure.running && !dataDisclosure.status) {
+ this.isExportInProgress = true
+ return
+ }
}
+ this.isExportInProgress = false
+ }
- onDeleteClick(id: number): void {
- this.dialog.open(ConfirmationDialog, {
- width: '400px',
- data: {
- text: $localize`:@@deleteDataDisclosure:Delete data disclosure`,
- onConfirm: () => {
- this._service.delete(id).subscribe((response) => {
- this._toastrService.success(
- $localize`:@@deleteDataDisclosureSucces:Data disclosure deleted`
- ),
- (this.exports = response)
- this.updateIsExportInProgress(response)
- })
- }
- }
- })
- }
-}
+ requestDataDisclosure(): void {
+ this._service.create().subscribe((response) => {
+ this._messageService.success($localize`:@@successToastMessage:Request sent`)
+ this.getExports()
+ })
+ }
-export interface DialogData {
- text: string
- onConfirm: () => void
-}
+ downloadZip(fileId: string): void {
+ this._service.getFileSecret(fileId).subscribe((response) => {
+ const url = `${environment.apiUrl}/api/v1/data-disclosure/files/${fileId}/${response.secret}`
+ const link = document.createElement('a')
+ link.setAttribute('target', '_blank')
+ link.setAttribute('href', url)
+ link.setAttribute('download', `example_config_polaris.json`)
+ document.body.appendChild(link)
+ link.click()
+ link.remove()
+ })
+ }
-@Component({
- selector: 'confirmation-dialog',
- templateUrl: 'confirmation-dialog.html'
-})
-export class ConfirmationDialog {
- constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+ onDeleteClick(id: number): void {
+ const deleteDialog: NzModalRef = this.dialog.create({
+ nzTitle: $localize`:@@deleteDataDisclosure:Delete data disclosure`,
+ nzContent: $localize`:@@deleteDataDisclosure:Delete data disclosure`,
+ nzFooter: [
+ {
+ label: 'Cancel',
+ onClick: () => deleteDialog.destroy()
+ },
+ {
+ label: 'Confirm',
+ onClick: () => {
+ this._service.delete(id).subscribe((response) => {
+ this._messageService.success(
+ $localize`:@@deleteDataDisclosureSucces:Data disclosure deleted`
+ ),
+ (this.exports = response)
+ this.updateIsExportInProgress(response)
+ })
+ }
+ }
+ ]
+ })
+ }
}
diff --git a/src/frontend/src/app/data-removal.service.ts b/src/frontend/src/app/data-removal.service.ts
index 1d434d59dfe8e4175a8713643c119b05504f6c74..cd518c62b42f0011e461afd8d653809ddf1228d7 100644
--- a/src/frontend/src/app/data-removal.service.ts
+++ b/src/frontend/src/app/data-removal.service.ts
@@ -4,11 +4,13 @@ import { Observable } from 'rxjs'
import { environment } from '../environments/environment'
export interface DataRemovalJob {
- user_id?: number
- finished: boolean
- job_id?: number
- execute_at: string
- created_at: string
+ user_id?: number
+ finished: boolean
+ job_id?: number
+ execute_at: string
+ created_at: string
+ description: string
+ matched_statements: number
}
interface DeleteAllUserStatements {}
@@ -29,11 +31,11 @@ export class DataRemovalService {
constructor(private http: HttpClient) {}
create(data: {
- immedialty: boolean
+ immediately: boolean
scope: DeleteAllUserStatements | DeleteVerbStatements | DeleteObjectStatements
}): Observable<void> {
return this.http.post<void>(`${environment.apiUrl}/api/v1/data-removal/create`, {
- immedialty: data.immedialty,
+ immedialty: data.immediately,
scope: data.scope
})
}
diff --git a/src/frontend/src/app/data-removal/data-removal.component.html b/src/frontend/src/app/data-removal/data-removal.component.html
index 20e8c74355833e7cf5e9c7972b81e1c275b8aa94..8f855f945043b5d4a32c93f4f7e5dcdab3bea126 100644
--- a/src/frontend/src/app/data-removal/data-removal.component.html
+++ b/src/frontend/src/app/data-removal/data-removal.component.html
@@ -1,83 +1,60 @@
<div class="data-removal">
- <h1 i18n="Data Removal | Header text data removal page @@headerDataRemovalPage">
- Löschaufträge
- </h1>
-
- <p i18n="Data Removal Description | Description data removal @@dataRemovalDescription">
- Mithilfe von Löschaufträgen lassen sich im LRS (Learing Record Store) gespeicherte Daten
- entfernen. Polaris gibt hierzu die Löschaufträge an den LRS weiter, welcher anschließend für
- die Ausführung verantwortlich ist. Konzeptionbedingt kann es hierbei zu einer zeitlichen
- Verzögerung kommen, da der LRS etwa Daten vornehmlich bei Nacht löscht.
- </p>
-
- <button
- mat-raised-button
- (click)="requestDataRemoval()"
- color="primary"
- i18n="Button Remove LRS data | Button text @@dataRemovalButtonText">
- Alle Daten entfernen
- </button>
-
- <table mat-table [dataSource]="jobs" class="mat-elevation-z8 table">
- <ng-container matColumnDef="id">
- <th mat-header-cell *matHeaderCellDef>No.</th>
- <td mat-cell *matCellDef="let element; let cnt = count; let idx = index">
- {{ cnt - idx }}
- </td>
- </ng-container>
-
- <ng-container matColumnDef="created_at">
- <th
- mat-header-cell
- *matHeaderCellDef
- i18n="Created At | Table column header @@createdAt">
- Created At
- </th>
- <td mat-cell *matCellDef="let element">{{ element.created_at | date: 'short' }}</td>
- </ng-container>
-
- <ng-container matColumnDef="execute_at">
- <th
- mat-header-cell
- *matHeaderCellDef
- i18n="Executed At | Table column header @@executedAt">
- Execute At
- </th>
- <td mat-cell *matCellDef="let element">{{ element.execute_at | date: 'short' }}</td>
- </ng-container>
-
- <ng-container matColumnDef="matched_statements">
- <th
- mat-header-cell
- *matHeaderCellDef
- i18n="Matched Statements | Column Header @@matchedStatements">
- Matched Statements
- </th>
- <td mat-cell *matCellDef="let element">{{ element.matched_statements }}</td>
- </ng-container>
-
- <ng-container matColumnDef="description">
- <th mat-header-cell *matHeaderCellDef i18n="Description @@description">Description</th>
- <td mat-cell *matCellDef="let element">{{ element.description }}</td>
- </ng-container>
-
- <ng-container matColumnDef="finished">
- <th mat-header-cell *matHeaderCellDef>Status</th>
- <td mat-cell *matCellDef="let element">
- <div
- *ngIf="element.finished; else inQueue"
- i18n="Data Removal Completed | Job status completed @@dataRemovalCompleted">
- Completed
- </div>
- <ng-template #inQueue>
- <span i18n="Data Removal Queued | Job status queued @@dataRemovalQueued"
- >in Queue</span
- >
- </ng-template>
- </td>
- </ng-container>
-
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
- </table>
+ <h1 i18n="Data Removal | Header text data removal page @@headerDataRemovalPage">
+ Löschaufträge
+ </h1>
+
+ <p i18n="Data Removal Description | Description data removal @@dataRemovalDescription">
+ Mithilfe von Löschaufträgen lassen sich im LRS (Learning Record Store) gespeicherte Daten
+ entfernen. Polaris gibt hierzu die Löschaufträge an den LRS weiter, welcher anschließend für
+ die Ausführung verantwortlich ist. Konzeptionbedingt kann es hierbei zu einer zeitlichen
+ Verzögerung kommen, da der LRS etwa Daten vornehmlich bei Nacht löscht.
+ </p>
+
+ <button
+ nz-button
+ (click)="requestDataRemoval()"
+ i18n="Button Remove LRS data | Button text @@dataRemovalButtonText">
+ Alle Daten entfernen
+ </button>
+
+ <nz-table #removalTable [nzData]="jobs">
+ <thead>
+ <tr>
+ <th>No.</th>
+ <th i18n="Created At | Table column header @@createdAt">
+ Created At
+ </th>
+ <th i18n="Executed At | Table column header @@executedAt">
+ Execute At
+ </th>
+ <th i18n="Matched Statements | Column Header @@matchedStatements">
+ Matched Statements
+ </th>
+ <th i18n="Description @@description">Description</th>
+ <th>Status</th>
+ </tr>
+ </thead>
+
+ <tbody>
+ <tr *ngFor="let element of removalTable.data; index as idx; count as cnt;">
+ <td>{{ cnt - idx }}</td>
+ <td>{{ element.created_at | date: 'short' }}</td>
+ <td>{{ element.execute_at | date: 'short' }}</td>
+ <td>{{ element.matched_statements }}</td>
+ <td>{{ element.description }}</td>
+ <td>
+ <div
+ *ngIf="element.finished; else inQueue"
+ i18n="Data Removal Completed | Job status completed @@dataRemovalCompleted">
+ Completed
+ </div>
+ <ng-template #inQueue>
+ <span i18n="Data Removal Queued | Job status queued @@dataRemovalQueued">
+ in Queue
+ </span>
+ </ng-template>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
</div>
diff --git a/src/frontend/src/app/data-removal/data-removal.component.ts b/src/frontend/src/app/data-removal/data-removal.component.ts
index 1abfbbbc75c7ff50829a4f4c430302741a005d4b..a39676d151a95a053cf5fa6438adf1f7d3397ee4 100644
--- a/src/frontend/src/app/data-removal/data-removal.component.ts
+++ b/src/frontend/src/app/data-removal/data-removal.component.ts
@@ -1,56 +1,59 @@
import { Component, OnDestroy, OnInit } from '@angular/core'
import { DataRemovalJob, DataRemovalService } from '../data-removal.service'
import { DeleteDialog } from '../dialogs/delete-dialog/delete-dialog'
-import { MatDialog } from '@angular/material/dialog'
import { Subscription } from 'rxjs'
+import { NzModalService } from 'ng-zorro-antd/modal'
@Component({
- selector: 'app-data-removal',
- templateUrl: './data-removal.component.html',
- styleUrls: ['./data-removal.component.scss']
+ selector: 'app-data-removal',
+ templateUrl: './data-removal.component.html',
+ styleUrls: ['./data-removal.component.scss']
})
export class DataRemovalComponent implements OnInit, OnDestroy {
- jobs: DataRemovalJob[] = []
- dialogSub?: Subscription
- constructor(private _removalService: DataRemovalService, private _dialog: MatDialog) {}
-
- displayedColumns: string[] = [
- 'id',
- 'created_at',
- 'execute_at',
- 'description',
- 'matched_statements',
- 'finished'
- ]
-
- ngOnInit(): void {
- this.getJobList()
- }
-
- ngOnDestroy(): void {
- this.dialogSub?.unsubscribe()
- }
-
- requestDataRemoval(): void {
- const dialogRef = this._dialog.open(DeleteDialog, {
- data: {
- headerText: $localize`:@@deleteAllLrsStatements:Delete all saved data`
- }
- })
-
- this.dialogSub = dialogRef.afterClosed().subscribe((confirmed) => {
- if (confirmed)
- this._removalService
- .create({ immedialty: true, scope: {} })
- .subscribe((response) => {
- this.getJobList()
- })
- })
- }
-
- getJobList(): void {
- this._removalService.listJobs().subscribe((response) => {
- this.jobs = response
- })
- }
+ jobs: DataRemovalJob[] = []
+ dialogSub?: Subscription
+
+ constructor(private _removalService: DataRemovalService, private _dialog: NzModalService) {
+ }
+
+ displayedColumns: string[] = [
+ 'id',
+ 'created_at',
+ 'execute_at',
+ 'description',
+ 'matched_statements',
+ 'finished'
+ ]
+
+ ngOnInit(): void {
+ this.getJobList()
+ }
+
+ ngOnDestroy(): void {
+ this.dialogSub?.unsubscribe()
+ }
+
+ requestDataRemoval(): void {
+ const dialogRef = this._dialog.create({
+ nzContent: DeleteDialog,
+ nzComponentParams: {
+ headerText: $localize`:@@deleteAllLrsStatements:Delete all saved data`
+ }
+ })
+
+ this.dialogSub = dialogRef.afterClose.subscribe((confirmed) => {
+ if (confirmed)
+ this._removalService
+ .create({ immediately: true, scope: {} })
+ .subscribe((response) => {
+ this.getJobList()
+ })
+ })
+ }
+
+ getJobList(): void {
+ this._removalService.listJobs().subscribe((response) => {
+ this.jobs = response
+ })
+ }
}
diff --git a/src/frontend/src/app/dialogs/create-token-dialog/create-token-dialog.html b/src/frontend/src/app/dialogs/create-token-dialog/create-token-dialog.html
index e67aa866301de07722fe90dc7019ef6c7aa5acfa..4b411c42d031d65e39b95132b5775119574e3394 100644
--- a/src/frontend/src/app/dialogs/create-token-dialog/create-token-dialog.html
+++ b/src/frontend/src/app/dialogs/create-token-dialog/create-token-dialog.html
@@ -1,68 +1,64 @@
-<h1 mat-dialog-title>{{data.headerText}}</h1>
+<div *nzModalTitle>{{ headerText }}</div>
-<div mat-dialog-content>
- <form [formGroup]="form" (ngSubmit)="onSubmit()">
- <div class="analytics-token-name">
- <mat-form-field appearance="outline">
- <mat-label>Name</mat-label>
- <input
- matInput
- placeholder="Name"
- [formControl]="nameController"
- autocomplete="off" />
- <mat-error *ngIf="nameController.hasError('required')">
- Name is <strong>required</strong>
- </mat-error>
+<div>
+ <form nz-form [formGroup]="form" (ngSubmit)="onSubmit()">
- <ng-template #loading> </ng-template>
- </mat-form-field>
- <div>
- <mat-spinner
- *ngIf="nameController.status === 'PENDING'"
- diameter="20"></mat-spinner>
- <mat-icon *ngIf="nameController.status === 'VALID'">check_circle_outline</mat-icon>
- <mat-icon
- *ngIf="nameController.touched && nameController.status === 'INVALID'"
- color="warn"
- >highlight_off</mat-icon
- >
- </div>
- </div>
- <div class="analytics-token-description">
- <mat-form-field appearance="outline" class="analytics-token-description" >
- <mat-label>Description</mat-label>
- <textarea
- [rows]="5"
- matInput
- placeholder="Description"
- [formControl]="descriptionController"
- autocomplete="off"></textarea>
- </mat-form-field>
-
- </div>
- <mat-form-field appearance="outline" class="expires-form">
- <mat-label i18n="Optional Expiration Date | Input Field Header @@optionalExpirationDate"
- >Optional Expiration Date</mat-label
- >
- <input
- matInput
- [matDatepicker]="picker"
- validDate
- formControlName="expires"
- [formControl]="dateController"
- autocomplete="off" />
- <mat-hint>DD.MM.YYYY</mat-hint>
- <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
- <mat-datepicker #picker></mat-datepicker>
- </mat-form-field>
- <mat-error
+ <nz-form-item class="analytics-token-name">
+ <nz-form-label nzRequired [nzSpan]="10">Name</nz-form-label>
+ <nz-form-control [nzErrorTip]="nameError" [nzSpan]="14">
+ <nz-input-group [nzSuffix]="nameSuffix">
+ <input
+ nz-input
+ placeholder="Name"
+ [formControl]="nameController"
+ autocomplete="off" />
+ </nz-input-group>
+ <ng-template #nameError let-control>
+ <ng-container *ngIf="control.hasError('required')">
+ Name is <strong>required</strong>
+ </ng-container>
+ </ng-template>
+ </nz-form-control>
+ </nz-form-item>
+ <ng-template #nameSuffix>
+ <nz-spin *ngIf="nameController.status === 'PENDING'" nzSize="small"></nz-spin>
+ <fa-icon *ngIf="nameController.status === 'VALID'" [icon]="faCheckCircle"></fa-icon>
+ <fa-icon *ngIf="nameController.touched && nameController.status === 'INVALID'" [icon]="faTimesCircle"></fa-icon>
+ </ng-template>
+
+
+ <nz-form-item class="analytics-token-description">
+ <nz-form-label [nzSpan]="10">Description</nz-form-label>
+ <nz-form-control [nzSpan]="14">
+ <textarea
+ nz-input
+ [rows]="5"
+ placeholder="Description"
+ [formControl]="descriptionController"
+ autocomplete="off"></textarea>
+ </nz-form-control>
+ </nz-form-item>
+
+
+ <nz-form-item class="expires-form">
+ <nz-form-label i18n="Optional Expiration Date | Input Field Header @@optionalExpirationDate" [nzSpan]="10">
+ Optional Expiration Date
+ </nz-form-label>
+ <nz-form-control nzHasFeedback [nzErrorTip]="dateError" [nzSpan]="14">
+ <nz-date-picker [formControl]="dateController" formControlName="expires" nzFormat="dd.MM.YYYY" ></nz-date-picker>
+ <ng-template #dateError let-control>
+ <ng-container
*ngIf="dateController.errors"
i18n="Invalid Expiration Date @@invalidExpirationDate">
Expiration date needs to be at least 5 days in the future.
- </mat-error>
- </form>
+ </ng-container>
+ </ng-template>
+ </nz-form-control>
+ </nz-form-item>
+
+ </form>
</div>
-<div mat-dialog-actions align="end">
- <button mat-button mat-dialog-close i18n="@@cancel">Cancel</button>
- <button mat-button cdkFocusInitial i18n="Submit @@submit" (click)="onSubmit()"> Submit </button>
+<div *nzModalFooter>
+ <button nz-button (click)="handleClose()" i18n="@@cancel">Cancel</button>
+ <button nz-button i18n="Submit @@submit" (click)="onSubmit()"> Submit</button>
</div>
diff --git a/src/frontend/src/app/dialogs/create-token-dialog/create-token-dialog.ts b/src/frontend/src/app/dialogs/create-token-dialog/create-token-dialog.ts
index e2c2e9584139dc7f8f3f929f2b7a76f97e090155..29c1f52024d7104201f42fabad082b98fb0e921d 100644
--- a/src/frontend/src/app/dialogs/create-token-dialog/create-token-dialog.ts
+++ b/src/frontend/src/app/dialogs/create-token-dialog/create-token-dialog.ts
@@ -1,83 +1,90 @@
-import { Component, OnInit, Inject } from '@angular/core'
+import { Component, OnInit, Inject, Input } from '@angular/core'
import {
- AbstractControl,
- FormBuilder,
- FormControl,
- FormGroup,
- ValidationErrors,
- ValidatorFn,
- Validators
+ AbstractControl,
+ FormBuilder,
+ FormControl,
+ FormGroup,
+ ValidationErrors,
+ ValidatorFn,
+ Validators
} from '@angular/forms'
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'
import * as moment from 'moment'
import { ApiService } from 'src/app/services/api.service'
import { AnalyticsTokenNameValidator } from 'src/app/validators/analytics-token-name.validator'
+import { NzModalRef } from 'ng-zorro-antd/modal'
+import { faTimesCircle, faCheckCircle } from '@fortawesome/free-regular-svg-icons'
const MINIMUM_TOKEN_EXPIRATION_DAYS = 5
-export interface CreateTokenDialogData {
- headerText: string
-}
@Component({
- selector: 'app-create-token-dialog',
- templateUrl: './create-token-dialog.html',
- styleUrls: ['./create-token-dialog.scss']
+ selector: 'app-create-token-dialog',
+ templateUrl: './create-token-dialog.html',
+ styleUrls: ['./create-token-dialog.scss']
})
export class CreateTokenDialog implements OnInit {
- form: FormGroup
+ @Input() headerText: string = ''
+
+ form: FormGroup
+
+ constructor(
+ public _dialogRef: NzModalRef<CreateTokenDialog>,
+ private _formBuilder: FormBuilder,
+ private _apiService: ApiService
+ ) {
+ this.form = this._formBuilder.group({
+ expires: [null, validateDate()],
+ description: [null],
+ name: [
+ '',
+ Validators.required,
+ AnalyticsTokenNameValidator.createValidator(this._apiService)
+ ]
+ })
+ }
+
+ get dateController(): FormControl {
+ return this.form.get('expires') as FormControl
+ }
- constructor(
- public _dialogRef: MatDialogRef<CreateTokenDialogData>,
- @Inject(MAT_DIALOG_DATA) public data: CreateTokenDialogData,
- private _formBuilder: FormBuilder,
- private _apiService: ApiService
- ) {
- this.form = this._formBuilder.group({
- expires: [null, validateDate()],
- description: [null],
- name: [
- '',
- Validators.required,
- AnalyticsTokenNameValidator.createValidator(this._apiService)
- ]
- })
- }
+ get nameController(): FormControl {
+ return this.form.get('name') as FormControl
+ }
- get dateController(): FormControl {
- return this.form.get('expires') as FormControl
- }
+ get descriptionController(): FormControl {
+ return this.form.get('description') as FormControl
+ }
- get nameController(): FormControl {
- return this.form.get('name') as FormControl
- }
+ ngOnInit(): void {
+ }
- get descriptionController(): FormControl {
- return this.form.get('description') as FormControl
- }
+ onSubmit(): void {
+ if (this.form.valid)
+ this._dialogRef.close({
+ confirmed: true,
+ expires: this.form.value.expires
+ ? this.form.value.expires.format('MM/DD/YYYY')
+ : null,
+ name: this.form.value.name,
+ description: this.form.value.description
+ })
+ }
- ngOnInit(): void {}
+ handleClose(): void {
+ this._dialogRef.destroy()
+ }
- onSubmit(): void {
- if (this.form.valid)
- this._dialogRef.close({
- confirmed: true,
- expires: this.form.value.expires
- ? this.form.value.expires.format('MM/DD/YYYY')
- : null,
- name: this.form.value.name,
- description : this.form.value.description
- })
- }
+ protected readonly faCheckCircle = faCheckCircle
+ protected readonly faTimesCircle = faTimesCircle
}
function validateDate(): ValidatorFn {
- return (control: AbstractControl): ValidationErrors | null => {
- const value = control.value
- if (!value) return null
- const now = moment()
+ return (control: AbstractControl): ValidationErrors | null => {
+ const value = control.value
+ if (!value) return null
+ const now = moment()
- const isValid =
- value.isAfter(now) && value.diff(now, 'days') > MINIMUM_TOKEN_EXPIRATION_DAYS
- return isValid ? null : { validDate: false }
- }
+ const isValid =
+ value.isAfter(now) && value.diff(now, 'days') > MINIMUM_TOKEN_EXPIRATION_DAYS
+ return isValid ? null : { validDate: false }
+ }
}
diff --git a/src/frontend/src/app/dialogs/delete-dialog/delete-dialog.html b/src/frontend/src/app/dialogs/delete-dialog/delete-dialog.html
index 897fa8ee55c0d39ab85114884c6269fb86d6f365..af884cd2b426c3288955620df59f7460a33bdf25 100644
--- a/src/frontend/src/app/dialogs/delete-dialog/delete-dialog.html
+++ b/src/frontend/src/app/dialogs/delete-dialog/delete-dialog.html
@@ -1,43 +1,47 @@
-<h1 mat-dialog-title>{{data.headerText}}</h1>
-<mat-dialog-content class="mat-typography">
+<div>
+ <div *nzModalTitle>{{ headerText }}</div>
+
+ <div>
<p
- i18n="Card Description| Description for the delete confirmation dialog@@deleteDialogDescription">
- Please confirm the action by entering <b>{{confirmationText}}</b>.
+ i18n="Card Description| Description for the delete confirmation dialog@@deleteDialogDescription">
+ Please confirm the action by entering <b>{{ confirmationText }}</b>.
</p>
- <form [formGroup]="form" (ngSubmit)="onSubmit()" class="delete-dialog-form">
- <mat-form-field appearance="outline" class="delete-dialog-full-width">
- <mat-label
- i18n="Confirmation text | Input for confirmation text@@deleteConfirmationInput"
- >Confirmation Text</mat-label
- >
- <input
- focus
- matInput
- [placeholder]="confirmationText"
- [formControl]="confirmationControl"
- autocomplete="off" />
- <mat-error
- *ngIf="confirmationControl.hasError('required')"
- i18n="Input required | Error input required text @@inputRequired">
- Input is <strong>required</strong>
- </mat-error>
- </mat-form-field>
+ <form nz-form [formGroup]="form" (ngSubmit)="onSubmit()" class="delete-dialog-form">
+ <nz-form-item>
+ <nz-form-label nzRequired
+ i18n="Confirmation text | Input for confirmation text@@deleteConfirmationInput">
+ Confirmation Text
+ </nz-form-label>
+ <nz-form-control nzHasFeedback [nzErrorTip]="confirmationError">
+ <input
+ nz-input
+ [placeholder]="confirmationText"
+ [formControl]="confirmationControl"
+ autocomplete="off" />
+ <ng-template #confirmationError let-control>
+ <ng-container *ngIf="control.hasError('required')"
+ i18n="Input required | Error input required text @@inputRequired">Input is
+ <strong>required</strong></ng-container>
+ </ng-template>
+ </nz-form-control>
+ </nz-form-item>
</form>
-</mat-dialog-content>
-<mat-dialog-actions align="end">
+ </div>
+
+ <div *nzModalFooter>
<button
- mat-button
- mat-dialog-close
- i18n="Cancel text | Text for delete dialog cancel button@@deleteDialogCancelButton">
- Cancel
+ nz-button
+ (click)="handleClose()"
+ i18n="Cancel text | Text for delete dialog cancel button@@deleteDialogCancelButton">
+ Cancel
</button>
<button
- mat-button
- [mat-dialog-close]="deleteConfirmed"
- [disabled]="!deleteConfirmed"
- (click)="onSubmit()"
- i18n="Confirm text | Text for delete dialog confirmation button@@deleteDialogConfirmationButton">
- Confirm
+ nz-button
+ [disabled]="!deleteConfirmed"
+ (click)="onSubmit()"
+ i18n="Confirm text | Text for delete dialog confirmation button@@deleteDialogConfirmationButton">
+ Confirm
</button>
-</mat-dialog-actions>
+ </div>
+</div>
diff --git a/src/frontend/src/app/dialogs/delete-dialog/delete-dialog.ts b/src/frontend/src/app/dialogs/delete-dialog/delete-dialog.ts
index 02a51ad5a0d467928a3e376a96958a2e677df5ad..a87257127b819c0d53f6b3944bfa16028936de8a 100644
--- a/src/frontend/src/app/dialogs/delete-dialog/delete-dialog.ts
+++ b/src/frontend/src/app/dialogs/delete-dialog/delete-dialog.ts
@@ -1,44 +1,46 @@
-import { Component, Inject } from '@angular/core'
+import { Component, Input } from '@angular/core'
import { FormBuilder, FormControl, Validators, FormGroup } from '@angular/forms'
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'
+import { NzModalRef } from 'ng-zorro-antd/modal'
-export interface DeleteDialogData {
- headerText: string
-}
@Component({
- selector: 'delete-dialog',
- templateUrl: 'delete-dialog.html',
- styleUrls: ['./delete-dialog.scss']
+ selector: 'delete-dialog',
+ templateUrl: 'delete-dialog.html',
+ styleUrls: ['./delete-dialog.scss']
})
export class DeleteDialog {
- confirmation = ''
- confirmationText = $localize`:@@deleteConfirmationText:delete`
- form: FormGroup
- deleteConfirmed = false
-
- constructor(
- public _dialogRef: MatDialogRef<DeleteDialog>,
- private _formBuilder: FormBuilder,
- @Inject(MAT_DIALOG_DATA) public data: DeleteDialogData
- ) {
- this.form = this._formBuilder.group({
- confirmation: ['', Validators.required]
- })
- }
-
- ngOnInit(): void {
- this.form.get('confirmation')?.valueChanges.subscribe((val) => {
- this.confirmation = val
- this.deleteConfirmed = val.localeCompare(this.confirmationText) === 0
- })
- }
-
- get confirmationControl(): FormControl {
- return this.form.get('confirmation') as FormControl
- }
-
- onSubmit(): void {
- if (this.deleteConfirmed) this._dialogRef.close(this.deleteConfirmed)
- }
+ @Input() headerText: string = ''
+
+ confirmation = ''
+ confirmationText = $localize`:@@deleteConfirmationText:delete`
+ form: FormGroup
+ deleteConfirmed = false
+
+ constructor(
+ public _dialogRef: NzModalRef<DeleteDialog>,
+ private _formBuilder: FormBuilder
+ ) {
+ this.form = this._formBuilder.group({
+ confirmation: ['', Validators.required]
+ })
+ }
+
+ ngOnInit(): void {
+ this.form.get('confirmation')?.valueChanges.subscribe((val) => {
+ this.confirmation = val
+ this.deleteConfirmed = val.localeCompare(this.confirmationText) === 0
+ })
+ }
+
+ get confirmationControl(): FormControl {
+ return this.form.get('confirmation') as FormControl
+ }
+
+ onSubmit(): void {
+ if (this.deleteConfirmed) this._dialogRef.close(this.deleteConfirmed)
+ }
+
+ handleClose(): void {
+ this._dialogRef.destroy();
+ }
}
diff --git a/src/frontend/src/app/guards/auth.guard.ts b/src/frontend/src/app/guards/auth.guard.ts
index eee65e82da9e245725516fb70acaf2f61a727ffb..d20ecdd137187a7249381fb3bacb2ba058c84d73 100644
--- a/src/frontend/src/app/guards/auth.guard.ts
+++ b/src/frontend/src/app/guards/auth.guard.ts
@@ -1,15 +1,15 @@
import { Injectable } from '@angular/core'
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'
-import { ToastrService } from 'ngx-toastr'
import { map, Observable } from 'rxjs'
import { AuthService } from '../services/auth.service'
+import { NzMessageService } from 'ng-zorro-antd/message'
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(
private _router: Router,
private _authService: AuthService,
- private _toasterService: ToastrService
+ private _messageService: NzMessageService
) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
@@ -17,7 +17,7 @@ export class AuthGuard implements CanActivate {
map((loggedIn) => {
const isLoggedIn = !!loggedIn
if (!isLoggedIn) {
- this._toasterService.warning($localize`:@@toastMessageUnauthorized:Unauthorized`)
+ this._messageService.warning($localize`:@@toastMessageUnauthorized:Unauthorized`)
this._router.navigateByUrl('/login')
}
return isLoggedIn
diff --git a/src/frontend/src/app/home/home.component.html b/src/frontend/src/app/home/home.component.html
index c50b7110057248994eb5d70f3ca57304cb1adccb..b75d9c9caee859189faa50ba21ca194b8c9c7798 100644
--- a/src/frontend/src/app/home/home.component.html
+++ b/src/frontend/src/app/home/home.component.html
@@ -1,6 +1,6 @@
<div class="home-wrapper" id="home-wrapper">
<div class="home-message">
- <div class="headline">Polaris</div>
+ <img ngSrc="assets/logo_full.svg" alt="POLARIS" height="252" width="672" />
<h1 class="sub-headline">Provider Oriented Open Learning Analytics</h1>
</div>
</div>
diff --git a/src/frontend/src/app/home/home.component.scss b/src/frontend/src/app/home/home.component.scss
index 244859103361b2319118dc74a5de8c77d79d42a2..0e4c73d68c4d88e7cd3accbbfb058d482da2765e 100644
--- a/src/frontend/src/app/home/home.component.scss
+++ b/src/frontend/src/app/home/home.component.scss
@@ -1,8 +1,7 @@
.home-wrapper {
position: relative;
height: 420px;
- background: #3f51b5;
- color: white;
+ background: #F0ECF0;
.home-message {
width: 90%;
diff --git a/src/frontend/src/app/home/home.component.ts b/src/frontend/src/app/home/home.component.ts
index 94da0dbe8a3f2942fb626835f3a2d6d2e12ac5c9..c4fbb66c6e2eff1e32d4896d6e59cbde3d26e5a3 100644
--- a/src/frontend/src/app/home/home.component.ts
+++ b/src/frontend/src/app/home/home.component.ts
@@ -1,23 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import HALO from 'vanta/dist/vanta.halo.min';
-import * as THREE from 'three';
+import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
-export class HomeComponent implements OnInit {
-
- private vantaEffect: any;
-
+export class HomeComponent {
constructor() { }
-
- ngOnInit(): void {
- this.vantaEffect = HALO({
- el: "#home-wrapper",
- THREE: THREE, // use a custom THREE when initializing
- });
- }
-
}
diff --git a/src/frontend/src/app/home/vanta.d.ts b/src/frontend/src/app/home/vanta.d.ts
deleted file mode 100644
index 1f05b411653da959036303ab5acbd6b4e7a3faa7..0000000000000000000000000000000000000000
--- a/src/frontend/src/app/home/vanta.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-declare module 'vanta/dist/vanta.birds.min';
-declare module 'vanta/dist/vanta.fog.min';
-declare module 'vanta/dist/vanta.waves.min';
-declare module 'vanta/dist/vanta.clouds.min';
-declare module 'vanta/dist/vanta.clouds2.min';
-declare module 'vanta/dist/vanta.globe.min';
-declare module 'vanta/dist/vanta.net.min';
-declare module 'vanta/dist/vanta.cells.min';
-declare module 'vanta/dist/vanta.trunk.min';
-declare module 'vanta/dist/vanta.topology.min';
-declare module 'vanta/dist/vanta.dots.min';
-declare module 'vanta/dist/vanta.rings.min';
-declare module 'vanta/dist/vanta.halo.min';
\ No newline at end of file
diff --git a/src/frontend/src/app/interceptors/http-request-interceptor.ts b/src/frontend/src/app/interceptors/http-request-interceptor.ts
index 38f6bfe020cc46e2b76f12b3a6af516a3a81eebd..930128ef8f8a6fd1eaa9021f1da858c1254e48be 100644
--- a/src/frontend/src/app/interceptors/http-request-interceptor.ts
+++ b/src/frontend/src/app/interceptors/http-request-interceptor.ts
@@ -10,8 +10,8 @@ import {
import { Observable, throwError } from 'rxjs'
import { catchError, map } from 'rxjs/operators'
import { LoadingService } from '../services/loading.service'
-import { ToastrService } from 'ngx-toastr'
import { AuthService } from '../services/auth.service'
+import { NzMessageService } from 'ng-zorro-antd/message'
/**
* This class is for intercepting http requests. When a request starts, we set the loadingSub property
@@ -25,7 +25,7 @@ import { AuthService } from '../services/auth.service'
export class HttpRequestInterceptor implements HttpInterceptor {
constructor(
private _loading: LoadingService,
- private _toasterService: ToastrService,
+ private _messageService: NzMessageService,
private _authService: AuthService
) {}
@@ -37,18 +37,17 @@ export class HttpRequestInterceptor implements HttpInterceptor {
catchError((err: HttpErrorResponse) => {
console.log('error', err)
if (err.status === 0)
- this._toasterService.error(
+ this._messageService.error(
$localize`:@@toastMessageCouldConnectBackend:Could'nt connect to backend`
)
else if (err.error.code === 'user_not_found') {
- this._toasterService.error(
+ this._messageService.error(
$localize`:@@toastMessageAccountNotFound: Account not found`
)
this._authService.logout()
} else
- this._toasterService.error(
- err.error?.message ?? err.statusText,
- `${err.status}`
+ this._messageService.error(
+ err.error?.message ?? err.statusText
)
this._loading.setLoading(false, request.url)
return throwError(() => Error(`${err.status} ${err.message}`))
diff --git a/src/frontend/src/app/login-page/login-page.component.html b/src/frontend/src/app/login-page/login-page.component.html
index 995dbf18fd5e70a46fa4d3d65892f6f7ef489ef1..7e243e9356094cc7eabf79820c26e12e2ed3df51 100644
--- a/src/frontend/src/app/login-page/login-page.component.html
+++ b/src/frontend/src/app/login-page/login-page.component.html
@@ -1,49 +1,65 @@
<div class="login">
- <mat-card>
- <div class="title">
- <mat-icon class="icon">account_circle</mat-icon>
- <h2 i18n="Login | Header Login form @@loginFormHeader">Login</h2>
- </div>
- <form [formGroup]="form" (ngSubmit)="onSubmit()">
- <div class="fields">
- <mat-form-field appearance="outline">
- <mat-label>E-Mail</mat-label>
- <input matInput placeholder="E-Mail" [formControl]="emailControl" />
- <mat-error
- *ngIf="emailControl.hasError('required')"
- i18n="E-Mail Required Hint @@emailRequiredHint">
- E-Mail is <strong>required</strong>
- </mat-error>
- </mat-form-field>
+ <nz-card>
+ <nz-card-meta [nzAvatar]="cardIcon" [nzTitle]="cardTitle">
+ <ng-template #cardIcon>
+ <fa-icon [icon]="faUser"></fa-icon>
+ </ng-template>
+ <ng-template #cardTitle>
+ <h2 i18n="Login | Header Login form @@loginFormHeader">Login</h2>
+ </ng-template>
+ </nz-card-meta>
- <mat-form-field appearance="outline">
- <mat-label i18n="Password @@password">Password</mat-label>
- <input
- matInput
- [type]="hide ? 'password' : 'text'"
- [formControl]="passwordControl" />
- <div
- class="password-visibility"
- mat-icon-button
- matSuffix
- (click)="hide = !hide"
- [attr.aria-label]="'Hide password'"
- [attr.aria-pressed]="hide">
- <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
- </div>
- <mat-error
- *ngIf="passwordControl.hasError('required')"
- i18n="Password Required Hint @@passwordRequiredHint">
- Password is <strong>required</strong>
- </mat-error>
- </mat-form-field>
- <button
- mat-raised-button
- color="primary"
- i18n="Login | Header Login Button Text @@login">
- Login
- </button>
- </div>
- </form>
- </mat-card>
+ <form nz-form [formGroup]="form" (ngSubmit)="onSubmit()">
+ <nz-form-item>
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">
+ E-Mail
+ </nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback [nzErrorTip]="localizedEmailError">
+ <ng-template #localizedEmailError let-control>
+ <span i18n="E-Mail Required Hint @@emailRequiredHint">E-Mail is <strong>required</strong></span>
+ </ng-template>
+ <input nz-input id="email" placeholder="E-Mail" [formControl]="emailControl" required/>
+ </nz-form-control>
+ </nz-form-item>
+
+ <nz-form-item>
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" i18n="Password @@password">
+ Password
+ </nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback [nzErrorTip]="localizedPasswordError">
+ <ng-template #localizedPasswordError let-control>
+ <span i18n="Password Required Hint @@passwordRequiredHint">Password is <strong>required</strong></span>
+ </ng-template>
+ <nz-input-group [nzAddOnAfter]="hidePasswordButton">
+ <ng-template #hidePasswordButton>
+ <button
+ type="button"
+ class="password-visibility"
+ nz-button
+ nzShape="circle"
+ nzSize="small"
+ (click)="hide = !hide"
+ [attr.aria-label]="'Hide password'"
+ [attr.aria-pressed]="hide">
+ <fa-icon *ngIf="!hide" [icon]="faEye"></fa-icon>
+ <fa-icon *ngIf="hide" [icon]="faEyeSlash"></fa-icon>
+ </button>
+ </ng-template>
+ <input
+ nz-input
+ [type]="hide ? 'password' : 'text'"
+ [formControl]="passwordControl" required />
+ </nz-input-group>
+ </nz-form-control>
+ </nz-form-item>
+
+ <button
+ nz-button
+ nzType="primary"
+ i18n="Login | Header Login Button Text @@login">
+ Login
+ </button>
+
+ </form>
+ </nz-card>
</div>
diff --git a/src/frontend/src/app/login-page/login-page.component.ts b/src/frontend/src/app/login-page/login-page.component.ts
index 60daf618f91555970001fb444bfce251c1c83058..41996bf7076e9a583886ee3acbea031041c12786 100644
--- a/src/frontend/src/app/login-page/login-page.component.ts
+++ b/src/frontend/src/app/login-page/login-page.component.ts
@@ -2,8 +2,9 @@ import { Component, OnInit } from '@angular/core'
import { FormBuilder, FormControl, Validators, FormGroup } from '@angular/forms'
import { environment } from '../../environments/environment'
import { AuthService } from '../services/auth.service'
-import { ToastrService } from 'ngx-toastr'
import { Router } from '@angular/router'
+import { faEye, faEyeSlash, faUser } from '@fortawesome/free-solid-svg-icons'
+import { NzMessageService } from 'ng-zorro-antd/message'
@Component({
selector: 'app-login-page',
@@ -19,7 +20,7 @@ export class LoginPageComponent implements OnInit {
constructor(
private _formBuilder: FormBuilder,
private _authService: AuthService,
- private _toasterService: ToastrService,
+ private _messageService: NzMessageService,
private _router: Router
) {
this.form = this._formBuilder.group({
@@ -48,7 +49,7 @@ export class LoginPageComponent implements OnInit {
onSubmit(): void {
this._authService.login(this.email, this.password).subscribe((response) => {
- this._toasterService.success($localize`:@@toastMessageSuccessfulLogin:Successful Login`)
+ this._messageService.success($localize`:@@toastMessageSuccessfulLogin:Successful Login`)
this._router.navigateByUrl('/')
})
}
@@ -59,4 +60,8 @@ export class LoginPageComponent implements OnInit {
handleSSOClick(): void {
window.location.href = `${environment.apiUrl}/login`
}
+
+ protected readonly faUser = faUser
+ protected readonly faEye = faEye
+ protected readonly faEyeSlash = faEyeSlash
}
diff --git a/src/frontend/src/app/material-design/material-design.module.ts b/src/frontend/src/app/material-design/material-design.module.ts
deleted file mode 100644
index 9145cebb61a3bad583db17328a56d5a7369a7e28..0000000000000000000000000000000000000000
--- a/src/frontend/src/app/material-design/material-design.module.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { MatSliderModule } from '@angular/material/slider'
-import { MatGridListModule } from '@angular/material/grid-list'
-import { MatCardModule } from '@angular/material/card'
-import { MatMenuModule } from '@angular/material/menu'
-import { MatIconModule } from '@angular/material/icon'
-import { MatButtonModule } from '@angular/material/button'
-import { MatToolbarModule } from '@angular/material/toolbar'
-import { MatExpansionModule } from '@angular/material/expansion'
-import { MatSidenavModule } from '@angular/material/sidenav'
-import { MatListModule } from '@angular/material/list'
-import { MatInputModule } from '@angular/material/input'
-import { MatSlideToggleModule } from '@angular/material/slide-toggle'
-import { MatFormFieldModule } from '@angular/material/form-field'
-import { MatTooltipModule } from '@angular/material/tooltip'
-import { MatProgressBarModule } from '@angular/material/progress-bar'
-import { MatChipsModule } from '@angular/material/chips'
-import { MatTableModule } from '@angular/material/table'
-import { MatDialogModule } from '@angular/material/dialog'
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MatMomentDateModule } from '@angular/material-moment-adapter'
-import { MatSelectModule } from '@angular/material/select'
-import { MatTabsModule } from '@angular/material/tabs'
-
-@NgModule({
- declarations: [],
- imports: [
- CommonModule,
- BrowserAnimationsModule,
- MatSliderModule,
- MatGridListModule,
- MatCardModule,
- MatMenuModule,
- MatIconModule,
- MatButtonModule,
- MatToolbarModule,
- MatExpansionModule,
- MatSidenavModule,
- MatSlideToggleModule,
- MatFormFieldModule,
- MatInputModule,
- MatListModule,
- MatTooltipModule,
- MatProgressBarModule,
- MatChipsModule,
- MatTableModule,
- MatDialogModule,
- MatProgressSpinnerModule,
- MatDatepickerModule,
- MatMomentDateModule,
- MatSelectModule,
- MatTabsModule
- ],
- exports: [
- BrowserAnimationsModule,
- MatSliderModule,
- MatGridListModule,
- MatCardModule,
- MatMenuModule,
- MatIconModule,
- MatButtonModule,
- MatToolbarModule,
- MatExpansionModule,
- MatSidenavModule,
- MatSlideToggleModule,
- MatFormFieldModule,
- MatInputModule,
- MatListModule,
- MatTooltipModule,
- MatProgressBarModule,
- MatChipsModule,
- MatTableModule,
- MatDialogModule,
- MatProgressSpinnerModule,
- MatDatepickerModule,
- MatMomentDateModule,
- MatSelectModule,
- MatTabsModule
- ]
-})
-export class MaterialDesignModule {}
diff --git a/src/frontend/src/app/merge-data/merge-data.component.html b/src/frontend/src/app/merge-data/merge-data.component.html
index c1ed11ae748d8f2bacb96fce242265719fa39e7d..e2daddcbba8adb50e3c6f8e1d83d465dcd554a32 100644
--- a/src/frontend/src/app/merge-data/merge-data.component.html
+++ b/src/frontend/src/app/merge-data/merge-data.component.html
@@ -1,28 +1,29 @@
<div class="content">
- <mat-card style='margin: 8px;'>
- <mat-card-title i18n="Merge Data | Header entry @@mergeDataHeader">
- Merge Data
- </mat-card-title>
- <mat-card-subtitle i18n="@@mergeDataDescription">
+ <nz-card style='margin: 8px;'>
+ <nz-card-meta [nzTitle]="cardTitle" [nzDescription]="cardDescription"></nz-card-meta>
+ <ng-template #cardTitle i18n="Merge Data | Header entry @@mergeDataHeader">
+ Merge Data
+ </ng-template>
+ <ng-template #cardDescription i18n="@@mergeDataDescription">
This tool enables you to associate data which has been anonymized by use of a TAN to your account. All entries which match the given TAN and provider will be assigned.
- </mat-card-subtitle>
- <mat-card-content>
- <form [formGroup]="mergeForm" (ngSubmit)="submit()">
- <mat-form-field>
- <mat-label>Provider</mat-label>
- <mat-select formControlName="provider">
- <mat-option *ngFor="let provider of providers" [value]="provider.id">{{ provider.name }}</mat-option>
- </mat-select>
- </mat-form-field>
- <br>
- <mat-form-field>
- <mat-label>TAN</mat-label>
- <input matInput formControlName="tan">
- </mat-form-field>
- <br>
- <button type="submit" mat-raised-button i18n="Merge Data | Header entry @@mergeDataHeader">Merge Data</button>
- </form>
- </mat-card-content>
- </mat-card>
-
+ </ng-template>
+ <p></p>
+ <form nz-form nzLayout="vertical" [formGroup]="mergeForm" (ngSubmit)="submit()">
+ <nz-form-item>
+ <nz-form-label>Provider</nz-form-label>
+ <nz-form-control>
+ <nz-select formControlName="provider">
+ <nz-option *ngFor="let provider of providers" [nzValue]="provider.id" [nzLabel]="provider.name"></nz-option>
+ </nz-select>
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item>
+ <nz-form-label>TAN</nz-form-label>
+ <nz-form-control>
+ <input nz-input formControlName="tan" />
+ </nz-form-control>
+ </nz-form-item>
+ <button type="submit" nz-button i18n="Merge Data | Header entry @@mergeDataHeader">Merge Data</button>
+ </form>
+ </nz-card>
</div>
diff --git a/src/frontend/src/app/merge-data/merge-data.component.ts b/src/frontend/src/app/merge-data/merge-data.component.ts
index 770fb191da09740ad923b8c6c99f47755097ff05..ef75d4e10c5bf8f928a68fd92b4e2b49ece2a4e0 100644
--- a/src/frontend/src/app/merge-data/merge-data.component.ts
+++ b/src/frontend/src/app/merge-data/merge-data.component.ts
@@ -1,8 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { ApiService, Provider } from '../services/api.service'
-import { AuthService, MergeResponse } from '../services/auth.service';
+import { AuthService } from '../services/auth.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';
-import { ToastrService } from 'ngx-toastr'
+import { NzMessageService } from 'ng-zorro-antd/message'
@Component({
selector: 'app-merge-data',
@@ -14,7 +14,7 @@ export class MergeDataComponent implements OnInit {
constructor(
private _apiService: ApiService,
private _authService: AuthService,
- private _toasterService: ToastrService,
+ private _messageService: NzMessageService,
) {}
providers: Provider[] = []
@@ -31,11 +31,11 @@ export class MergeDataComponent implements OnInit {
this._authService.mergeData(this.mergeForm.get('provider')!.value, this.mergeForm.get('tan')!.value).subscribe((response) => {
if(response.status == "success")
{
- this._toasterService.success($localize`:@@toastMessageMerged:Merged`)
+ this._messageService.success($localize`:@@toastMessageMerged:Merged`)
}
else
{
- this._toasterService.error($localize`:@@toastMessageMergeError:Error`)
+ this._messageService.error($localize`:@@toastMessageMergeError:Error`)
}
});
}
diff --git a/src/frontend/src/app/navigation/footer/footer.component.html b/src/frontend/src/app/navigation/footer/footer.component.html
index a7e49c3fa2c934040b9572221dcadade2722cb31..57e1b18e0a1169ce00744231dc56581216e3183e 100644
--- a/src/frontend/src/app/navigation/footer/footer.component.html
+++ b/src/frontend/src/app/navigation/footer/footer.component.html
@@ -1,7 +1,7 @@
-<mat-toolbar color="primary" class="footer-content">
- <div>Ⓒ 2022</div>
+<nz-footer>
+ <div>Ⓒ {{ currentYear }}</div>
<div class="footer-links">
<a routerLink="/legal-notice">Impressum</a>
- <a routerLink="/login">Administration</a>
+ <a *ngIf="!loggedIn" routerLink="/login">Administration</a>
</div>
-</mat-toolbar>
+</nz-footer>
diff --git a/src/frontend/src/app/navigation/footer/footer.component.scss b/src/frontend/src/app/navigation/footer/footer.component.scss
index 8b66a59cc7c67ececa24c238eaa0afc9a6c1c120..76562991f52086f2033c70f66ae488a2423695c3 100644
--- a/src/frontend/src/app/navigation/footer/footer.component.scss
+++ b/src/frontend/src/app/navigation/footer/footer.component.scss
@@ -3,10 +3,8 @@
justify-content: center;
gap: 40px;
font-size: 14px;
- color: lightgrey;
a {
text-decoration: none;
- color: lightgrey;
}
}
@@ -15,3 +13,9 @@
flex-direction: row;
gap: 10px;
}
+
+nz-footer {
+ background: #FFF;
+ display: flex;
+ justify-content: space-between;
+}
diff --git a/src/frontend/src/app/navigation/footer/footer.component.ts b/src/frontend/src/app/navigation/footer/footer.component.ts
index c7a7ec50807bc169f1c678f181bda915af72e204..bf68018c56dd59cc2d2425d54dd80067b6dac64b 100644
--- a/src/frontend/src/app/navigation/footer/footer.component.ts
+++ b/src/frontend/src/app/navigation/footer/footer.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
+import { AuthService, Userinfo } from '../../services/auth.service'
@Component({
selector: 'app-footer',
@@ -6,8 +7,11 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
-
- constructor() { }
+ loggedIn: Userinfo | null = null
+ currentYear = new Date().getFullYear();
+ constructor(private _authService: AuthService) {
+ this._authService.loggedIn.subscribe((x) => (this.loggedIn = x))
+ }
ngOnInit(): void {
}
diff --git a/src/frontend/src/app/navigation/header/header.component.html b/src/frontend/src/app/navigation/header/header.component.html
index 3127fee9cb0149d1110fb1ba9683728b5cd5c924..10938c23d9644bf82622f5a4110aad05b646d97a 100644
--- a/src/frontend/src/app/navigation/header/header.component.html
+++ b/src/frontend/src/app/navigation/header/header.component.html
@@ -1,98 +1,96 @@
-<mat-toolbar color="primary" class="header">
- <div class="home-link">
- <a routerLink="/home">Polaris</a>
- </div>
- <div class="routes" *ngIf="loggedIn">
- <a
- mat-button
+<nz-header>
+ <div class="logo" routerLink="/home"></div>
+
+ <ul nz-menu nzMode="horizontal">
+ <li nz-menu-item
routerLink="/analytics-engines"
- routerLinkActive="mat-accent"
- *ngIf="!loggedIn?.isProvider"
+ *ngIf="loggedIn && !loggedIn?.isProvider"
i18n="Analyses | Header entry @@anaylticsEngineHeader"
- >Analyses</a
+ [nzMatchRouter]="true"
>
-
- <a
- mat-button
- routerLink="/consent-management"
- routerLinkActive="mat-accent"
- *ngIf="!loggedIn?.isProvider"
- i18n="Consent Management | Header entry @@consentManagmentHeader"
- >Consent Management</a
- >
+ Analyses
+ </li>
- <a
- mat-button
- routerLink="/merge-actors"
- routerLinkActive="mat-accent"
- *ngIf="!loggedIn?.isProvider"
- i18n="Merge Data | Header entry @@mergeDataHeader"
- >Merge Data</a
- >
- <a
- mat-button
- routerLink="/provider"
- routerLinkActive="mat-accent"
- *ngIf="loggedIn?.isProvider"
- >Provider</a
- >
- <a
- mat-button
- routerLink="/application-tokens"
- routerLinkActive="mat-accent"
- *ngIf="loggedIn?.isProvider"
- i18n="Application Tokens | Header Entry @@applicationTokens"
- >Application Tokens</a
- >
- <a
- mat-button
- routerLink="/analytics-tokens"
- routerLinkActive="mat-accent"
- *ngIf="loggedIn?.isProvider"
- i18n="Analytics Tokens | Header Entry @@analyticsTokens"
- >Analytics Tokens</a
- >
- </div>
- <span class="toolbar-spacer"></span>
- <button mat-icon-button (click)="toggleTheme()">
- <mat-icon *ngIf="isDarkModeOn">light_mode</mat-icon>
- <mat-icon *ngIf="!isDarkModeOn">dark_mode</mat-icon>
- </button>
- <a mat-raised-button *ngIf="!loggedIn" (click)="handleSSOClick()">
- Single Sign-On (SSO)
- </a>
+ <li nz-menu-item
+ routerLink="/consent-management"
+ *ngIf="loggedIn && !loggedIn?.isProvider"
+ i18n="Consent Management | Header entry @@consentManagmentHeader"
+ [nzMatchRouter]="true"
+ >
+ Consent Management
+ </li>
+
+ <li nz-menu-item
+ routerLink="/merge-actors"
+ *ngIf="loggedIn && !loggedIn?.isProvider"
+ i18n="Merge Data | Header entry @@mergeDataHeader"
+ [nzMatchRouter]="true"
+ >
+ Merge Data
+ </li>
+
+ <li nz-menu-item
+ routerLink="/provider"
+ *ngIf="loggedIn?.isProvider"
+ [nzMatchRouter]="true"
+ >
+ Provider
+ </li>
+
+ <li nz-menu-item
+ routerLink="/application-tokens"
+ *ngIf="loggedIn?.isProvider"
+ i18n="Application Tokens | Header Entry @@applicationTokens"
+ [nzMatchRouter]="true"
+ >
+ Application Tokens
+ </li>
+
+ <li nz-menu-item
+ routerLink="/analytics-tokens"
+ *ngIf="loggedIn?.isProvider"
+ i18n="Analytics Tokens | Header Entry @@analyticsTokens"
+ [nzMatchRouter]="true"
+ >
+ Analytics Tokens
+ </li>
+ </ul>
+
+ <div class="account">
+ <button nz-button *ngIf="!loggedIn" (click)="handleSSOClick()">Single Sign-On (SSO)</button>
<div *ngIf="loggedIn" class="login-info">
- <button mat-stroked-button [matMenuTriggerFor]="menu">{{ loggedIn.email }}</button>
- <mat-menu #menu="matMenu" xPosition="before">
- <a mat-menu-item href="#/profil">
- <mat-icon>person</mat-icon>
- <span i18n="Profile | Header profile dropdown entry @@profileProfileDropDown"
- >Profile</span
- >
- </a>
- <a mat-menu-item href="#/data-disclosure" *ngIf="!loggedIn?.isProvider">
- <mat-icon>download</mat-icon>
- <span
- i18n="
+ <a nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click">{{ loggedIn.email }}</a>
+ <nz-dropdown-menu #menu="nzDropdownMenu">
+ <ul nz-menu>
+ <li nz-menu-item routerLink="/profil">
+ <fa-icon [icon]="faUser"></fa-icon>
+ <span i18n="Profile | Header profile dropdown entry @@profileProfileDropDown"
+ >Profile</span>
+ </li>
+ <li nz-menu-item routerLink="/data-disclosure" *ngIf="!loggedIn?.isProvider">
+ <fa-icon [icon]="faDownload"></fa-icon>
+ <span
+ i18n="
Data disclosure | Header profile dropdown entry
@@dataDisclosureProfileDropDown"
- >Data disclosure</span
- >
- </a>
- <a mat-menu-item href="#/data-removal" *ngIf="!loggedIn?.isProvider">
- <mat-icon>delete</mat-icon>
- <span
- i18n="Data removal | Header profile dropdown entry @@dataRemovalProfileDropDown"
- >Data removal</span
- ></a
- >
- <a mat-menu-item (click)="logout()">
- <mat-icon>logout</mat-icon>
- <span i18n="Logout | Header profile dropdown entry @@logoutProfileDropDown"
- >Logout</span
- >
- </a>
- </mat-menu>
+ >Data disclosure</span>
+ </li>
+
+ <li nz-menu-item routerLink="/data-removal" *ngIf="!loggedIn?.isProvider">
+ <fa-icon [icon]="faTrash"></fa-icon>
+ <span
+ i18n="Data removal | Header profile dropdown entry @@dataRemovalProfileDropDown"
+ >Data removal</span>
+ </li>
+
+ <li nz-menu-item (click)="logout()">
+ <fa-icon [icon]="faSignOutAlt"></fa-icon>
+ <span i18n="Logout | Header profile dropdown entry @@logoutProfileDropDown"
+ >Logout</span>
+ </li>
+ </ul>
+ </nz-dropdown-menu>
</div>
-</mat-toolbar>
+ </div>
+</nz-header>
diff --git a/src/frontend/src/app/navigation/header/header.component.scss b/src/frontend/src/app/navigation/header/header.component.scss
index b9f6f3311fd7b8247e2cc28aa8953ebb554f93db..840a707c5ac532f934b74a790a18d3f684460ce4 100644
--- a/src/frontend/src/app/navigation/header/header.component.scss
+++ b/src/frontend/src/app/navigation/header/header.component.scss
@@ -1,30 +1,22 @@
-@import '@angular/material/theming';
-
-.header {
- position: fixed;
- top: 0px;
- left: 0px;
- z-index: 1000;
- box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
- .login-info {
- font-weight: 300;
- display: flex;
- align-items: center;
- }
+.logo {
+ width: 165px;
+ height: 64px;
+ background: url('../../../assets/logo_full.svg');
+ cursor: pointer;
}
-.home-link {
- a {
- text-decoration: none;
- color: white;
- }
+[nz-menu] {
+ background: #FFF;
+ line-height: 64px;
+ border-bottom: none;
+ flex-grow: 1;
}
-.routes {
- margin-left: 40px;
- display: flex;
- gap: 20px;
- font-size: medium;
+
+.account {
+ width: 165px;
+ height: 64px;
}
-.toolbar-spacer {
- flex: 1 1 auto;
+nz-header {
+ background: #FFF;
+ display: flex;
}
diff --git a/src/frontend/src/app/navigation/header/header.component.ts b/src/frontend/src/app/navigation/header/header.component.ts
index 6e1f49e8e17e7812af9237b86d1ece61c64de056..f630e7decf89f64a974ad53db031572d4102eae1 100644
--- a/src/frontend/src/app/navigation/header/header.component.ts
+++ b/src/frontend/src/app/navigation/header/header.component.ts
@@ -4,42 +4,52 @@ import { AuthService, Userinfo } from 'src/app/services/auth.service'
import { ThemeService } from 'src/app/services/theme.service'
import { environment } from 'src/environments/environment'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { faDownload } from '@fortawesome/free-solid-svg-icons'
+import { faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
+
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
- loggedIn: Userinfo | null = null
- isDarkModeOn: boolean = false
-
- constructor(
- private _authService: AuthService,
- private _theme: ThemeService,
- private _overlay: OverlayContainer
- ) {
- this._authService.loggedIn.subscribe((x) => (this.loggedIn = x))
- this._theme.darkModeSubject.subscribe((x) => (this.isDarkModeOn = x))
- }
-
- ngOnInit(): void {
- if (this.isDarkModeOn) this._overlay.getContainerElement().classList.add('dark-mode')
- }
-
- logout(): void {
- this._authService.logout()
- }
-
- toggleTheme(): void {
- this._theme.toggleTheme()
- if (this.isDarkModeOn) this._overlay.getContainerElement().classList.add('dark-mode')
- else this._overlay.getContainerElement().classList.remove('dark-mode')
- }
-
- /**
- * Redirect user to SSO page.
- */
- handleSSOClick(): void {
- window.location.href = `${environment.apiUrl}/login`
- }
+ faUser = faUser;
+ faDownload = faDownload;
+ faTrash = faTrash;
+ faSignOutAlt = faSignOutAlt;
+
+ loggedIn: Userinfo | null = null
+ isDarkModeOn: boolean = false
+
+ constructor(
+ private _authService: AuthService,
+ private _theme: ThemeService,
+ private _overlay: OverlayContainer
+ ) {
+ this._authService.loggedIn.subscribe((x) => (this.loggedIn = x))
+ this._theme.darkModeSubject.subscribe((x) => (this.isDarkModeOn = x))
+ }
+
+ ngOnInit(): void {
+ if (this.isDarkModeOn) this._overlay.getContainerElement().classList.add('dark-mode')
+ }
+
+ logout(): void {
+ this._authService.logout()
+ }
+
+ toggleTheme(): void {
+ this._theme.toggleTheme()
+ if (this.isDarkModeOn) this._overlay.getContainerElement().classList.add('dark-mode')
+ else this._overlay.getContainerElement().classList.remove('dark-mode')
+ }
+
+ /**
+ * Redirect user to SSO page.
+ */
+ handleSSOClick(): void {
+ window.location.href = `${environment.apiUrl}/login`
+ }
}
diff --git a/src/frontend/src/app/page-not-found/page-not-found.component.html b/src/frontend/src/app/page-not-found/page-not-found.component.html
index ddf7d13dee4899d01b91a21e310d5768e95f1e08..734ba63bfcbd3fd1b44ad651c73ad42db826a4ea 100644
--- a/src/frontend/src/app/page-not-found/page-not-found.component.html
+++ b/src/frontend/src/app/page-not-found/page-not-found.component.html
@@ -1,5 +1,6 @@
<div class="not-found-wrapper">
- <div class="not-found-content">
- <div class="message">Oops! We can't find that page.</div>
- </div>
+ <div class="not-found-content">
+ <img ngSrc="assets/not_found.svg" alt="Not found" height="308" width="393">
+ <div class="message">Oops! We can't find that page.</div>
+ </div>
</div>
diff --git a/src/frontend/src/app/services/api.service.ts b/src/frontend/src/app/services/api.service.ts
index 23975f7d578667a49d95a7a70021844e5750c502..02dafa2a89cacf8cd337f0a5f314097b98861436 100644
--- a/src/frontend/src/app/services/api.service.ts
+++ b/src/frontend/src/app/services/api.service.ts
@@ -1,9 +1,9 @@
import { Injectable } from '@angular/core'
import {
- ProviderId,
- ProviderSchema,
- UserConsent,
- UserConsentVerbs
+ ProviderId,
+ ProviderSchema,
+ UserConsent,
+ UserConsentVerbs
} from '../consent-management/consentDeclaration'
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs'
@@ -11,207 +11,206 @@ import { environment } from '../../environments/environment'
import { StringKeyframeTrack } from 'three'
export interface UserConsentResponse {
- paused_data_recording: boolean
- consent: UserConsent | null
- provider_schema?: ProviderSchema
+ paused_data_recording: boolean
+ consent: UserConsent | null
+ provider_schema?: ProviderSchema
}
export interface Provider {
- id: number
- name: string
- description: string
- createdAt: string
- versions: ProviderSchema[]
+ id: number
+ name: string
+ description: string
+ createdAt: string
+ versions: ProviderSchema[]
}
export interface ApplicationTokens {
- provider: Provider
- keys: string[]
+ provider: Provider
+ keys: string[]
}
-export interface AvailableAnalyticTokensDef{
- providerId : number,
- label : string,
- analyticTokenVerbs : Array<AnalyticsTokenVerb>
+export interface AvailableAnalyticTokensDef {
+ providerId: number,
+ label: string,
+ analyticTokenVerbs: Array<AnalyticsTokenVerb>
}
export interface AnalyticsToken {
- id: number
- name: string
- description : string | null,
- image_path : string | null,
- key: string
- created: string
- expires: string
- can_access: AnalyticsToken[]
- analyticTokenVerbs: AnalyticsTokenVerb[]
- selected?: boolean
+ id: number
+ name: string
+ description: string | null,
+ image_path: string | null,
+ key: string
+ created: string
+ expires: string
+ can_access: AnalyticsToken[]
+ analyticTokenVerbs: AnalyticsTokenVerb[]
+ selected?: boolean
+ isExpired?: boolean
}
export interface AnalyticsTokenVerb {
- id: string,
- label: string,
- selected: boolean,
- provider : number,
- verb : string,
- analytics_token : number
+ id: string,
+ label: string,
+ selected: boolean,
+ provider: number,
+ verb: string,
+ analytics_token: number
}
export interface ProviderAnalyticsToken {
- id: number
- name: string
- analytics_tokens: AnalyticsToken[]
+ id: number
+ name: string
+ analytics_tokens: AnalyticsToken[]
}
export interface Verb {
- id: string
- label: string
- selected: boolean
+ id: string
+ label: string
+ selected: boolean
}
interface VisualizationToken {
- id: number
- provider: number
- key: string
- created: string
- expires: string
+ id: number
+ provider: number
+ key: string
+ created: string
+ expires: string
}
export interface ProviderVisualizationTokens {
- id: number
- name: string
- visualization_tokens: VisualizationToken[]
+ id: number
+ name: string
+ visualization_tokens: VisualizationToken[]
}
export interface UserConsentStatus {
- result: Record<
- ProviderId,
- { status: 'latest' | 'outdated' | 'none'; userConsent?: UserConsent }
- >
+ result: Record<
+ ProviderId,
+ { status: 'latest' | 'outdated' | 'none'; userConsent?: UserConsent }
+ >
}
@Injectable({
- providedIn: 'root'
+ providedIn: 'root'
})
export class ApiService {
- constructor(private http: HttpClient) {}
-
- getProviders(): Observable<Provider[]> {
- return this.http.get<Provider[]>(`${environment.apiUrl}/api/v1/consents/provider`)
- }
-
- getUserConsent(providerId: number): Observable<UserConsentResponse> {
- return this.http.get<UserConsentResponse>(
- `${environment.apiUrl}/api/v1/consents/user/${providerId}`
- )
- }
-
- saveUserConsent(data: UserConsentVerbs[]): Observable<UserConsentResponse> {
- return this.http.post<UserConsentResponse>(
- `${environment.apiUrl}/api/v1/consents/user/save`,
- data
- )
- }
-
- toggleDataRecording(): Observable<void> {
- return this.http.post<void>(`${environment.apiUrl}/api/v1/auth/toggle-data-recording`, {})
- }
-
- getApplicationTokens(): Observable<ApplicationTokens[]> {
- return this.http.get<ApplicationTokens[]>(`${environment.apiUrl}/api/v1/provider/keys`)
- }
-
- getUserConsentStatus(): Observable<UserConsentStatus> {
- return this.http.get<UserConsentStatus>(`${environment.apiUrl}/api/v1/consents/user/status`)
- }
-
- getAnalyticsTokens(): Observable<AnalyticsToken[]> {
- return this.http.get<AnalyticsToken[]>(
- `${environment.apiUrl}/api/v1/provider/analytics-tokens`
- )
- }
-
- getAnalyticsTokensUsers(): Observable<AnalyticsToken[]> {
- return this.http.get<AnalyticsToken[]>(
- `${environment.apiUrl}/api/v1/consents/user/analytics-tokens`
- )
- }
-
- consentVerbsForAnalyticToken(analyticTokenId : number): Observable<AnalyticsToken> {
- return this.http.post<AnalyticsToken>(
- `${environment.apiUrl}/api/v1/consents/user/analytics-tokens/consent`,
- { analyticTokenId }
- )
- }
-
- getProvidersUsers(): Observable<Provider[]> {
- return this.http.get<Provider[]>(
- `${environment.apiUrl}/api/v1/consents/user/providers`
- )
- }
-
- getAnalyticTokensAvailableVerbs(): Observable<AvailableAnalyticTokensDef[]>
- {
- return this.http.get<AvailableAnalyticTokensDef[]>(
- `${environment.apiUrl}/api/v1/provider/analytics-tokens/available-verbs`
- )
- }
-
- createAnalyticsToken(
- expires: string,
- name: string,
- description : string
- ): Observable<AnalyticsToken> {
- return this.http.post<AnalyticsToken>(
- `${environment.apiUrl}/api/v1/provider/analytics-tokens/create`,
- { expires, name, description }
- )
- }
-
- saveAnalyticTokenActiveVerbs(
- tokenId: number,
- activeVerbs: AnalyticsTokenVerb[]
- ): Observable<{ message: string }> {
- return this.http.post<{ message: string }>(
- `${environment.apiUrl}/api/v1/provider/analytics-tokens/${tokenId}/update-verbs`,
- { active_verbs: activeVerbs }
- )
- }
-
- deleteAnalyticsToken(tokenId: number): Observable<void> {
- return this.http.delete<void>(
- `${environment.apiUrl}/api/v1/provider/analytics-tokens/${tokenId}/delete`
- )
- }
-
- isAnalyticsTokenNameAvailable(name: string): Observable<{ is_available: boolean }> {
- return this.http.post<{ is_available: boolean }>(
- `${environment.apiUrl}/api/v1/provider/analytics-tokens/name-available`,
- { name }
- )
- }
-
- saveAccessRelation(target: number, ids: number[]): Observable<AnalyticsToken> {
- return this.http.post<AnalyticsToken>(
- `${environment.apiUrl}/api/v1/provider/analytics-tokens/sync-engine-access`,
- { target, ids }
- )
- }
-
- uploadImageForAnalyticToken(analyticTokenId : number, image : File)
- {
- const formData: FormData = new FormData();
- formData.append('image', image, image.name);
- formData.append('analyticTokenId', analyticTokenId+"");
-
- return this.http.post<void>(
- `${environment.apiUrl}/api/v1/provider/analytics-tokens/${analyticTokenId}/image`,formData )
- }
-
- deleteImageForAnalyticToken(analyticTokenId : number)
- {
- return this.http.delete<void>(
- `${environment.apiUrl}/api/v1/provider/analytics-tokens/${analyticTokenId}/image`,
- )
- }
+ constructor(private http: HttpClient) {
+ }
+
+ getProviders(): Observable<Provider[]> {
+ return this.http.get<Provider[]>(`${environment.apiUrl}/api/v1/consents/provider`)
+ }
+
+ getUserConsent(providerId: number): Observable<UserConsentResponse> {
+ return this.http.get<UserConsentResponse>(
+ `${environment.apiUrl}/api/v1/consents/user/${providerId}`
+ )
+ }
+
+ saveUserConsent(data: UserConsentVerbs[]): Observable<UserConsentResponse> {
+ return this.http.post<UserConsentResponse>(
+ `${environment.apiUrl}/api/v1/consents/user/save`,
+ data
+ )
+ }
+
+ toggleDataRecording(): Observable<void> {
+ return this.http.post<void>(`${environment.apiUrl}/api/v1/auth/toggle-data-recording`, {})
+ }
+
+ getApplicationTokens(): Observable<ApplicationTokens[]> {
+ return this.http.get<ApplicationTokens[]>(`${environment.apiUrl}/api/v1/provider/keys`)
+ }
+
+ getUserConsentStatus(): Observable<UserConsentStatus> {
+ return this.http.get<UserConsentStatus>(`${environment.apiUrl}/api/v1/consents/user/status`)
+ }
+
+ getAnalyticsTokens(): Observable<AnalyticsToken[]> {
+ return this.http.get<AnalyticsToken[]>(
+ `${environment.apiUrl}/api/v1/provider/analytics-tokens`
+ )
+ }
+
+ getAnalyticsTokensUsers(): Observable<AnalyticsToken[]> {
+ return this.http.get<AnalyticsToken[]>(
+ `${environment.apiUrl}/api/v1/consents/user/analytics-tokens`
+ )
+ }
+
+ consentVerbsForAnalyticToken(analyticTokenId: number): Observable<AnalyticsToken> {
+ return this.http.post<AnalyticsToken>(
+ `${environment.apiUrl}/api/v1/consents/user/analytics-tokens/consent`,
+ { analyticTokenId }
+ )
+ }
+
+ getProvidersUsers(): Observable<Provider[]> {
+ return this.http.get<Provider[]>(
+ `${environment.apiUrl}/api/v1/consents/user/providers`
+ )
+ }
+
+ getAnalyticTokensAvailableVerbs(): Observable<AvailableAnalyticTokensDef[]> {
+ return this.http.get<AvailableAnalyticTokensDef[]>(
+ `${environment.apiUrl}/api/v1/provider/analytics-tokens/available-verbs`
+ )
+ }
+
+ createAnalyticsToken(
+ expires: string,
+ name: string,
+ description: string
+ ): Observable<AnalyticsToken> {
+ return this.http.post<AnalyticsToken>(
+ `${environment.apiUrl}/api/v1/provider/analytics-tokens/create`,
+ { expires, name, description }
+ )
+ }
+
+ saveAnalyticTokenActiveVerbs(
+ tokenId: number,
+ activeVerbs: AnalyticsTokenVerb[]
+ ): Observable<{ message: string }> {
+ return this.http.post<{ message: string }>(
+ `${environment.apiUrl}/api/v1/provider/analytics-tokens/${tokenId}/update-verbs`,
+ { active_verbs: activeVerbs }
+ )
+ }
+
+ deleteAnalyticsToken(tokenId: number): Observable<void> {
+ return this.http.delete<void>(
+ `${environment.apiUrl}/api/v1/provider/analytics-tokens/${tokenId}/delete`
+ )
+ }
+
+ isAnalyticsTokenNameAvailable(name: string): Observable<{ is_available: boolean }> {
+ return this.http.post<{ is_available: boolean }>(
+ `${environment.apiUrl}/api/v1/provider/analytics-tokens/name-available`,
+ { name }
+ )
+ }
+
+ saveAccessRelation(target: number, ids: number[]): Observable<AnalyticsToken> {
+ return this.http.post<AnalyticsToken>(
+ `${environment.apiUrl}/api/v1/provider/analytics-tokens/sync-engine-access`,
+ { target, ids }
+ )
+ }
+
+ uploadImageForAnalyticToken(analyticTokenId: number, image: File) {
+ const formData: FormData = new FormData()
+ formData.append('image', image, image.name)
+ formData.append('analyticTokenId', analyticTokenId + '')
+
+ return this.http.post<void>(
+ `${environment.apiUrl}/api/v1/provider/analytics-tokens/${analyticTokenId}/image`, formData)
+ }
+
+ deleteImageForAnalyticToken(analyticTokenId: number) {
+ return this.http.delete<void>(
+ `${environment.apiUrl}/api/v1/provider/analytics-tokens/${analyticTokenId}/image`
+ )
+ }
}
diff --git a/src/frontend/src/app/user-profil/user-profil.component.html b/src/frontend/src/app/user-profil/user-profil.component.html
index a49921e920a95f8ae36879ea093753f5f65d8709..1463db2b6d2d733fe5d0292d70d9a63589e5d000 100644
--- a/src/frontend/src/app/user-profil/user-profil.component.html
+++ b/src/frontend/src/app/user-profil/user-profil.component.html
@@ -1,30 +1,25 @@
<div class="user-info">
- <h1>Profil</h1>
- <mat-card>
- <mat-list>
- <mat-list-item> E-Mail: {{ loggedIn?.email }} </mat-list-item>
- <mat-list-item>
- Rollen:
- <mat-chip-list>
- <mat-chip *ngIf="loggedIn?.isProvider">Provider</mat-chip>
- <mat-chip *ngIf="!loggedIn?.isProvider">User</mat-chip>
- </mat-chip-list>
- </mat-list-item>
- </mat-list>
- </mat-card>
- <br />
- <mat-card>
- <mat-card-header>
- <mat-card-title>Account</mat-card-title>
- </mat-card-header>
- <mat-card-content>
- <button
- mat-raised-button
- color="primary"
- (click)="deleteAccount()"
- i18n="Delete | Text for delete account button @@deleteAccountButton">
- Delete
- </button>
- </mat-card-content>
- </mat-card>
+ <nz-card nzTitle="Profil">
+ <nz-list>
+ <nz-list-item> E-Mail: {{ loggedIn?.email }} </nz-list-item>
+ <nz-list-item>
+ Rollen:
+ <nz-tag *ngIf="!loggedIn?.isProvider" >
+ User
+ </nz-tag>
+ <nz-tag *ngIf="loggedIn?.isProvider">
+ Provider
+ </nz-tag>
+ </nz-list-item>
+ </nz-list>
+ </nz-card>
+ <br />
+ <nz-card nzTitle="Account">
+ <button
+ nz-button
+ (click)="deleteAccount()"
+ i18n="Delete | Text for delete account button @@deleteAccountButton">
+ Delete
+ </button>
+ </nz-card>
</div>
diff --git a/src/frontend/src/app/user-profil/user-profil.component.ts b/src/frontend/src/app/user-profil/user-profil.component.ts
index 5fac725612acd211beb5fdd6cf2718d97f9fb136..4efc5e36003f9fa11ff72ccddb3bb1cb10b0c8aa 100644
--- a/src/frontend/src/app/user-profil/user-profil.component.ts
+++ b/src/frontend/src/app/user-profil/user-profil.component.ts
@@ -1,46 +1,48 @@
import { Component, OnDestroy, OnInit } from '@angular/core'
import { AuthService, Userinfo } from '../services/auth.service'
-import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog'
import { DeleteDialog } from '../dialogs/delete-dialog/delete-dialog'
-import { ToastrService } from 'ngx-toastr'
import { Subscription } from 'rxjs'
+import { NzMessageService } from 'ng-zorro-antd/message'
+import { NzModalService } from 'ng-zorro-antd/modal'
@Component({
- selector: 'app-user-profil',
- templateUrl: './user-profil.component.html',
- styleUrls: ['./user-profil.component.scss']
+ selector: 'app-user-profil',
+ templateUrl: './user-profil.component.html',
+ styleUrls: ['./user-profil.component.scss']
})
export class UserProfilComponent implements OnInit, OnDestroy {
- loggedIn: Userinfo | null = null
- dialogSub?: Subscription
+ loggedIn: Userinfo | null = null
+ dialogSub?: Subscription
- constructor(
- private _authService: AuthService,
- private _dialog: MatDialog,
- private _toasterService: ToastrService
- ) {}
+ constructor(
+ private _authService: AuthService,
+ private _dialog: NzModalService,
+ private _messageService: NzMessageService
+ ) {
+ }
- ngOnInit(): void {
- this._authService.loggedIn.subscribe((x) => (this.loggedIn = x))
- }
+ ngOnInit(): void {
+ this._authService.loggedIn.subscribe((x) => (this.loggedIn = x))
+ }
- ngOnDestroy(): void {
- this.dialogSub?.unsubscribe()
- }
+ ngOnDestroy(): void {
+ this.dialogSub?.unsubscribe()
+ }
- deleteAccount(): void {
- const dialogRef = this._dialog.open(DeleteDialog, {
- data: {
- headerText: $localize`:@@deleteAccountText:Delete Account`
- }
- })
+ deleteAccount(): void {
+ const dialogRef = this._dialog.create({
+ nzContent: DeleteDialog,
+ nzComponentParams: {
+ headerText: $localize`:@@deleteAccountText:Delete Account`
+ }
+ })
- this.dialogSub = dialogRef.afterClosed().subscribe((confirmed) => {
- if (confirmed)
- this._authService.deleteUser().subscribe((response) => {
- this._toasterService.success($localize`:@@toastMessageUserDeleted:User Deleted`)
- this._authService.logout()
- })
+ this.dialogSub = dialogRef.afterClose.subscribe((confirmed) => {
+ if (confirmed)
+ this._authService.deleteUser().subscribe((response) => {
+ this._messageService.success($localize`:@@toastMessageUserDeleted:User Deleted`)
+ this._authService.logout()
})
- }
+ })
+ }
}
diff --git a/src/frontend/src/assets/favicon.svg b/src/frontend/src/assets/favicon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..03784e497a7fdcbe11b71eec683c312a50d90d65
--- /dev/null
+++ b/src/frontend/src/assets/favicon.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="65"
+ height="65"
+ id="screenshot-4a8add3e-3708-8010-8005-5f95f88e1d3b"
+ viewBox="0 0 65 65"
+ fill="none"
+ version="1.1"
+ sodipodi:docname="favicon.svg"
+ inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs1" />
+ <sodipodi:namedview
+ id="namedview1"
+ pagecolor="#ffffff"
+ bordercolor="#000000"
+ borderopacity="0.25"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ inkscape:zoom="9.2063492"
+ inkscape:cx="47.956034"
+ inkscape:cy="47.358621"
+ inkscape:window-width="2560"
+ inkscape:window-height="1368"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="screenshot-4a8add3e-3708-8010-8005-5f95f88e1d3b" />
+ <g
+ id="shape-4a8add3e-3708-8010-8005-5f95f88e1d3b"
+ width="168px"
+ height="63px"
+ version="1.1"
+ rx="0"
+ ry="0"
+ style="fill:#000000"
+ transform="matrix(1.4965625,0,0,1.4358318,-17.612428,-12.098713)">
+ <g
+ id="shape-4a8add3e-3708-8010-8005-5f95f88e1d3c"
+ style="display:none">
+ <g
+ class="fills"
+ id="fills-4a8add3e-3708-8010-8005-5f95f88e1d3c">
+ <rect
+ width="69"
+ height="63"
+ x="0"
+ style="fill:none"
+ ry="0"
+ fill="none"
+ rx="0"
+ y="0"
+ id="rect1" />
+ </g>
+ </g>
+ <g
+ id="shape-4a8add3e-3708-8010-8005-5f95f88e1d3d"
+ rx="0"
+ ry="0"
+ style="fill:#000000">
+ <g
+ id="shape-4a8add3e-3708-8010-8005-5f95f88e1d3e"
+ rx="0"
+ ry="0"
+ style="fill:#000000">
+ <g
+ id="shape-4a8add3e-3708-8010-8005-5f95f88e1d40">
+ <g
+ class="fills"
+ id="fills-4a8add3e-3708-8010-8005-5f95f88e1d40">
+ <path
+ d="M 55,31 C 55,25.257 52.764,19.858 48.703,15.797 44.642,11.736 39.243,9.5 33.5,9.5 c -3.561,0 -6.989,0.861 -10.048,2.482 -4.15,-1.652 -7.346,-1.612 -9.105,0.147 -1.792,1.792 -1.822,4.992 -0.088,9.255 C 12.781,24.333 12,27.606 12,31 c 0,5.743 2.236,11.142 6.297,15.203 4.061,4.061 9.46,6.297 15.203,6.297 3.498,0 6.869,-0.831 9.887,-2.398 1.992,0.786 3.764,1.182 5.259,1.182 1.597,0 2.88,-0.45 3.784,-1.354 1.762,-1.762 1.819,-4.886 0.173,-9.044 C 54.169,37.868 55,34.498 55,31 Z M 15.743,13.351 c 0.922,-1.059 2.805,-1.12 5.257,-0.237 -1.006,0.796 -1.956,1.702 -2.838,2.716 -0.984,1.132 -1.852,2.362 -2.6,3.67 -0.803,-2.882 -0.749,-5.079 0.181,-6.149 z m 35.503,35.398 c -0.924,0.924 -2.8,0.987 -5.246,0.236 1.066,-0.722 2.071,-1.55 3.002,-2.48 0.931,-0.931 1.76,-1.938 2.483,-3.005 0.756,2.455 0.683,4.327 -0.239,5.249 z M 43.217,47.902 C 42.923,47.773 42.624,47.636 42.32,47.49 37.806,45.315 32.701,41.499 27.946,36.744 25.613,34.411 23.458,31.933 21.625,29.485 l 3.484,0.898 c 0.509,0.131 1.027,-0.176 1.158,-0.684 0.131,-0.509 -0.175,-1.027 -0.684,-1.159 l -6.002,-1.546 c -0.28,-0.072 -0.579,-0.013 -0.81,0.161 -0.231,0.174 -0.371,0.445 -0.378,0.734 l -0.168,6.196 c -0.014,0.526 0.4,0.963 0.925,0.977 0.009,0 0.018,0.001 0.026,0.001 0.514,0 0.937,-0.41 0.951,-0.926 l 0.091,-3.359 c 1.862,2.471 4.036,4.964 6.383,7.311 4.746,4.746 9.854,8.597 14.441,10.893 C 38.721,49.959 36.173,50.5 33.5,50.5 22.748,50.5 14,41.752 14,31 c 0,-7.154 3.873,-13.419 9.631,-16.812 0.272,0.12 0.547,0.246 0.827,0.381 4.514,2.175 9.619,5.991 14.374,10.746 2.333,2.333 4.488,4.811 6.321,7.259 l -3.484,-0.898 c -0.509,-0.131 -1.027,0.175 -1.158,0.684 -0.131,0.509 0.175,1.027 0.684,1.159 l 6.002,1.546 c 0.078,0.02 0.158,0.03 0.237,0.03 0.205,0 0.406,-0.065 0.573,-0.191 0.231,-0.174 0.371,-0.445 0.378,-0.734 l 0.168,-6.197 c 0.014,-0.525 -0.4,-0.962 -0.925,-0.976 -0.009,0 -0.018,-0.001 -0.026,-0.001 -0.514,0 -0.937,0.41 -0.951,0.926 L 46.56,31.281 C 44.698,28.81 42.524,26.317 40.177,23.969 35.445,19.237 30.352,15.395 25.774,13.097 28.145,12.07 30.757,11.5 33.5,11.5 44.252,11.5 53,20.248 53,31 c 0,7.217 -3.941,13.53 -9.783,16.902 z"
+ fill-rule="nonzero"
+ stroke="none"
+ stroke-width="1"
+ style="fill:#612158"
+ id="path1" />
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/src/frontend/src/assets/logo_full.svg b/src/frontend/src/assets/logo_full.svg
new file mode 100644
index 0000000000000000000000000000000000000000..26d214ba130b2d7da25be88c6ab0da6fe8bc6aea
--- /dev/null
+++ b/src/frontend/src/assets/logo_full.svg
@@ -0,0 +1 @@
+<svg width="168" xmlns="http://www.w3.org/2000/svg" height="63" id="screenshot-4a8add3e-3708-8010-8005-5e3ae267e2e6" viewBox="0 0 168 63" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2e6" width="168px" height="63px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2e7" style="display: none;"><g class="fills" id="fills-4a8add3e-3708-8010-8005-5e3ae267e2e7"><rect width="168" height="63" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: none;" ry="0" fill="none" rx="0" y="0"/></g></g><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2e8" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2e9" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2eb"><g class="fills" id="fills-4a8add3e-3708-8010-8005-5e3ae267e2eb"><path d="M55.000,31.500C55.000,25.757,52.764,20.358,48.703,16.297C44.642,12.236,39.243,10.000,33.500,10.000C29.939,10.000,26.511,10.861,23.452,12.482C19.302,10.830,16.106,10.870,14.347,12.629C12.555,14.421,12.525,17.621,14.259,21.884C12.781,24.833,12.000,28.106,12.000,31.500C12.000,37.243,14.236,42.642,18.297,46.703C22.358,50.764,27.757,53.000,33.500,53.000C36.998,53.000,40.369,52.169,43.387,50.602C45.379,51.388,47.151,51.784,48.646,51.784C50.243,51.784,51.526,51.334,52.430,50.430C54.192,48.668,54.249,45.544,52.603,41.386C54.169,38.368,55.000,34.998,55.000,31.500ZZM15.743,13.851C16.665,12.792,18.548,12.731,21.000,13.614C19.994,14.410,19.044,15.316,18.162,16.330C17.178,17.462,16.310,18.692,15.562,20.000C14.759,17.118,14.813,14.921,15.743,13.851ZZM51.246,49.249C50.322,50.173,48.446,50.236,46.000,49.485C47.066,48.763,48.071,47.935,49.002,47.005C49.933,46.074,50.762,45.067,51.485,44.000C52.241,46.455,52.168,48.327,51.246,49.249ZZM43.217,48.402C42.923,48.273,42.624,48.136,42.320,47.990C37.806,45.815,32.701,41.999,27.946,37.244C25.613,34.911,23.458,32.433,21.625,29.985L25.109,30.883C25.618,31.014,26.136,30.707,26.267,30.199C26.398,29.690,26.092,29.172,25.583,29.040L19.581,27.494C19.301,27.422,19.002,27.481,18.771,27.655C18.540,27.829,18.400,28.100,18.393,28.389L18.225,34.585C18.211,35.111,18.625,35.548,19.150,35.562C19.159,35.562,19.168,35.563,19.176,35.563C19.690,35.563,20.113,35.153,20.127,34.637L20.218,31.278C22.080,33.749,24.254,36.242,26.601,38.589C31.347,43.335,36.455,47.186,41.042,49.482C38.721,50.459,36.173,51.000,33.500,51.000C22.748,51.000,14.000,42.252,14.000,31.500C14.000,24.346,17.873,18.081,23.631,14.688C23.903,14.808,24.178,14.934,24.458,15.069C28.972,17.244,34.077,21.060,38.832,25.815C41.165,28.148,43.320,30.626,45.153,33.074L41.669,32.176C41.160,32.045,40.642,32.351,40.511,32.860C40.380,33.369,40.686,33.887,41.195,34.019L47.197,35.565C47.275,35.585,47.355,35.595,47.434,35.595C47.639,35.595,47.840,35.530,48.007,35.404C48.238,35.230,48.378,34.959,48.385,34.670L48.553,28.473C48.567,27.948,48.153,27.511,47.628,27.497C47.619,27.497,47.610,27.496,47.602,27.496C47.088,27.496,46.665,27.906,46.651,28.422L46.560,31.781C44.698,29.310,42.524,26.817,40.177,24.469C35.445,19.737,30.352,15.895,25.774,13.597C28.145,12.570,30.757,12.000,33.500,12.000C44.252,12.000,53.000,20.748,53.000,31.500C53.000,38.717,49.059,45.030,43.217,48.402ZZ" fill-rule="nonzero" stroke="none" stroke-width="1" style="fill: rgb(97, 33, 88);"/></g></g></g><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2ea" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2ec"><g class="fills" id="fills-4a8add3e-3708-8010-8005-5e3ae267e2ec"><path d="M67.746,31.062L67.746,26.568L70.308,26.568C70.686,26.568,71.050,26.596,71.400,26.652C71.750,26.708,72.058,26.816,72.324,26.977C72.590,27.139,72.803,27.366,72.965,27.660C73.126,27.954,73.206,28.339,73.206,28.815C73.206,29.291,73.126,29.676,72.965,29.970C72.803,30.264,72.590,30.492,72.324,30.653C72.058,30.813,71.750,30.922,71.400,30.978C71.050,31.034,70.686,31.062,70.308,31.062L67.746,31.062ZZM64.449,24.006L64.449,39.000L67.746,39.000L67.746,33.624L71.211,33.624C72.149,33.624,72.947,33.487,73.605,33.215C74.263,32.941,74.798,32.581,75.211,32.133C75.624,31.685,75.925,31.170,76.115,30.590C76.303,30.008,76.398,29.417,76.398,28.815C76.398,28.199,76.303,27.604,76.115,27.030C75.925,26.456,75.624,25.945,75.211,25.497C74.798,25.049,74.263,24.688,73.605,24.416C72.947,24.142,72.149,24.006,71.211,24.006L64.449,24.006ZZ" fill-rule="nonzero" stroke="none" stroke-width="1" style="fill: rgb(97, 33, 88);"/></g></g><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2ed"><g class="fills" id="fills-4a8add3e-3708-8010-8005-5e3ae267e2ed"><path d="M81.102,31.566C81.102,30.908,81.175,30.271,81.323,29.655C81.470,29.039,81.704,28.490,82.026,28.006C82.348,27.524,82.768,27.139,83.286,26.851C83.804,26.564,84.434,26.421,85.176,26.421C85.918,26.421,86.548,26.564,87.066,26.851C87.584,27.139,88.004,27.524,88.326,28.006C88.648,28.490,88.883,29.039,89.030,29.655C89.177,30.271,89.250,30.908,89.250,31.566C89.250,32.196,89.177,32.809,89.030,33.403C88.883,33.999,88.648,34.534,88.326,35.010C88.004,35.486,87.584,35.867,87.066,36.155C86.548,36.441,85.918,36.585,85.176,36.585C84.434,36.585,83.804,36.441,83.286,36.155C82.768,35.867,82.348,35.486,82.026,35.010C81.704,34.534,81.470,33.999,81.323,33.403C81.175,32.809,81.102,32.196,81.102,31.566ZZM77.805,31.566C77.805,32.658,77.973,33.677,78.309,34.621C78.645,35.566,79.128,36.389,79.758,37.089C80.388,37.789,81.162,38.338,82.079,38.737C82.995,39.137,84.028,39.336,85.176,39.336C86.338,39.336,87.374,39.137,88.284,38.737C89.194,38.338,89.964,37.789,90.594,37.089C91.224,36.389,91.707,35.566,92.043,34.621C92.379,33.677,92.547,32.658,92.547,31.566C92.547,30.446,92.379,29.407,92.043,28.447C91.707,27.488,91.224,26.652,90.594,25.938C89.964,25.224,89.194,24.664,88.284,24.258C87.374,23.852,86.338,23.649,85.176,23.649C84.028,23.649,82.995,23.852,82.079,24.258C81.162,24.664,80.388,25.224,79.758,25.938C79.128,26.652,78.645,27.488,78.309,28.447C77.973,29.407,77.805,30.446,77.805,31.566ZZ" fill-rule="nonzero" stroke="none" stroke-width="1" style="fill: rgb(97, 33, 88);"/></g></g><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2ee"><g class="fills" id="fills-4a8add3e-3708-8010-8005-5e3ae267e2ee"><path d="M94.794,24.006L94.794,39.000L105.399,39.000L105.399,36.228L98.091,36.228L98.091,24.006Z" fill-rule="nonzero" stroke="none" stroke-width="1" style="fill: rgb(97, 33, 88);"/></g></g><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2ef"><g class="fills" id="fills-4a8add3e-3708-8010-8005-5e3ae267e2ef"><path d="M111.027,33.204L112.980,27.702L113.022,27.702L114.912,33.204L111.027,33.204ZZM111.342,24.006L105.672,39.000L108.990,39.000L110.166,35.661L115.773,35.661L116.907,39.000L120.330,39.000L114.723,24.006L111.342,24.006ZZ" fill-rule="nonzero" stroke="none" stroke-width="1" style="fill: rgb(97, 33, 88);"/></g></g><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2f0"><g class="fills" id="fills-4a8add3e-3708-8010-8005-5e3ae267e2f0"><path d="M124.929,30.789L124.929,26.568L128.541,26.568C129.297,26.568,129.864,26.733,130.242,27.062C130.620,27.390,130.809,27.919,130.809,28.647C130.809,29.403,130.620,29.949,130.242,30.285C129.864,30.621,129.297,30.789,128.541,30.789L124.929,30.789ZZM121.632,24.006L121.632,39.000L124.929,39.000L124.929,33.141L128.226,33.141C129.052,33.141,129.647,33.323,130.011,33.687C130.375,34.051,130.613,34.625,130.725,35.409C130.809,36.011,130.872,36.641,130.914,37.299C130.956,37.957,131.068,38.524,131.250,39.000L134.547,39.000C134.393,38.790,134.278,38.534,134.200,38.234C134.124,37.932,134.068,37.614,134.032,37.278C133.997,36.942,133.973,36.613,133.959,36.291C133.945,35.969,133.931,35.689,133.917,35.451C133.889,35.073,133.836,34.695,133.760,34.317C133.682,33.939,133.560,33.592,133.392,33.278C133.224,32.963,133.007,32.689,132.741,32.458C132.475,32.227,132.139,32.056,131.733,31.944L131.733,31.902C132.573,31.566,133.178,31.076,133.550,30.432C133.921,29.788,134.106,29.025,134.106,28.143C134.106,27.569,134.005,27.034,133.802,26.537C133.599,26.039,133.305,25.602,132.919,25.224C132.534,24.846,132.073,24.548,131.534,24.332C130.994,24.115,130.389,24.006,129.717,24.006L121.632,24.006ZZ" fill-rule="nonzero" stroke="none" stroke-width="1" style="fill: rgb(97, 33, 88);"/></g></g><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2f1"><g class="fills" id="fills-4a8add3e-3708-8010-8005-5e3ae267e2f1"><path d="M136.794,24.006L136.794,39.000L140.091,39.000L140.091,24.006Z" fill-rule="nonzero" stroke="none" stroke-width="1" style="fill: rgb(97, 33, 88);"/></g></g><g id="shape-4a8add3e-3708-8010-8005-5e3ae267e2f2"><g class="fills" id="fills-4a8add3e-3708-8010-8005-5e3ae267e2f2"><path d="M145.236,34.023L142.044,34.023C142.030,34.947,142.198,35.745,142.548,36.417C142.898,37.089,143.370,37.642,143.965,38.076C144.561,38.510,145.247,38.829,146.024,39.032C146.800,39.235,147.602,39.336,148.428,39.336C149.450,39.336,150.349,39.217,151.126,38.979C151.903,38.741,152.555,38.409,153.079,37.981C153.604,37.554,154.000,37.047,154.266,36.459C154.532,35.871,154.665,35.234,154.665,34.548C154.665,33.708,154.486,33.019,154.130,32.479C153.773,31.941,153.349,31.510,152.859,31.188C152.369,30.866,151.876,30.631,151.378,30.485C150.881,30.338,150.493,30.236,150.213,30.180C149.275,29.942,148.515,29.746,147.934,29.592C147.354,29.438,146.899,29.284,146.570,29.130C146.240,28.976,146.020,28.808,145.908,28.626C145.796,28.444,145.740,28.206,145.740,27.912C145.740,27.590,145.810,27.324,145.950,27.114C146.090,26.904,146.269,26.729,146.485,26.589C146.702,26.449,146.944,26.351,147.210,26.295C147.476,26.239,147.742,26.211,148.008,26.211C148.414,26.211,148.789,26.246,149.131,26.316C149.474,26.386,149.779,26.505,150.045,26.673C150.311,26.841,150.524,27.072,150.686,27.366C150.847,27.660,150.941,28.031,150.969,28.479L154.161,28.479C154.161,27.611,153.997,26.872,153.668,26.264C153.338,25.655,152.894,25.154,152.334,24.762C151.774,24.370,151.133,24.086,150.412,23.912C149.691,23.736,148.939,23.649,148.155,23.649C147.483,23.649,146.811,23.740,146.139,23.922C145.467,24.104,144.865,24.384,144.333,24.762C143.801,25.140,143.370,25.612,143.041,26.179C142.713,26.746,142.548,27.415,142.548,28.185C142.548,28.871,142.677,29.456,142.936,29.938C143.195,30.421,143.535,30.824,143.955,31.146C144.375,31.468,144.851,31.731,145.383,31.934C145.915,32.137,146.461,32.308,147.021,32.448C147.567,32.602,148.106,32.742,148.638,32.868C149.170,32.994,149.646,33.141,150.066,33.309C150.486,33.477,150.825,33.687,151.084,33.939C151.343,34.191,151.473,34.520,151.473,34.926C151.473,35.304,151.375,35.615,151.179,35.861C150.983,36.106,150.738,36.298,150.444,36.438C150.150,36.578,149.835,36.673,149.499,36.722C149.163,36.771,148.848,36.795,148.554,36.795C148.120,36.795,147.700,36.742,147.294,36.638C146.888,36.533,146.534,36.371,146.233,36.155C145.932,35.938,145.691,35.654,145.509,35.304C145.327,34.954,145.236,34.527,145.236,34.023ZZ" fill-rule="nonzero" stroke="none" stroke-width="1" style="fill: rgb(97, 33, 88);"/></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/src/frontend/src/assets/not_found.svg b/src/frontend/src/assets/not_found.svg
new file mode 100644
index 0000000000000000000000000000000000000000..33eed697fc9610264b18c5e2744a22a23164e7eb
--- /dev/null
+++ b/src/frontend/src/assets/not_found.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="393px" height="308px" viewBox="0 0 393 308" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Outlines</title>
+ <g id="Outlines" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <path d="M45,177.934 L51.36,211.598 L81.342,229.795 L114.959,231.615 L132.221,257.09 L224.894,258 L285.767,227.066 L333.92,218.877 L352.546,187.943 L353,157.008 L221.26,122.434 L172.198,133.352 L120.41,128.803 L45,177.934 Z M352.546,187.943 L353,157.008" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+ <path d="M355.02277,155.47113 L221.298776,120.376448 L172.065,131.332 L119.89695,126.750233 L42.7861486,176.989336 L49.5602521,212.84522 L80.7330656,231.764962 L113.86,233.558 L131.153267,259.079612 L225.363754,260.004709 L286.401,228.986 L335.160009,220.694836 L354.537862,188.512161 L355.02277,155.47113 Z M221.221,124.491 L350.977,158.544 L350.554,187.373 L332.679,217.059 L285.13197,225.14528 L224.423,255.995 L133.288,255.1 L116.058027,229.671572 L81.949,227.824 L53.16,210.351 L47.214,178.878 L120.922,130.855 L172.330816,135.371367 L221.221,124.491 Z" id="Shape" fill="#B1B1B4" fill-rule="nonzero"></path>
+ <polygon id="Path" fill="#FFFFFF" fill-rule="nonzero" points="45 177.934 74.074 193.402 114.959 195.221 130.404 219.787 224.894 222.516 282.133 197.041 326.652 192.492 353 157.008 221.26 122.434 172.198 133.352 120.41 128.803"></polygon>
+ <path d="M356.369754,155.824634 L221.298776,120.376448 L172.065,131.332 L119.89695,126.750233 L41.069029,178.108071 L73.533614,195.379936 L113.823,197.172 L129.279086,221.755345 L225.291313,224.528309 L282.655,198.997 L327.732231,194.392035 L356.369754,155.824634 Z M221.221,124.491 L349.63,158.191 L325.571,190.592 L281.611759,195.083847 L224.496,220.503 L131.529,217.818 L116.094531,193.269542 L74.613,191.423 L48.93,177.759 L120.922,130.855 L172.330816,135.371367 L221.221,124.491 Z" id="Path" fill="#B1B1B4" fill-rule="nonzero"></path>
+ <path d="M266.428,48.123 C266.428,48.123 242.156,42.369 222.168,52.377 C200.363,63.295 186.003,87.929 179.466,96.959 C165.085,116.826 144.941,128.803 144.941,128.803 L116.376,141.281 L107.69,156.098 L90.428,172.475 L99.513,179.754 L128.587,179.754 L152.209,178.844 L222.428,180.841 L260.327,182.484 L291.218,182.484 L292.127,158.828 C292.127,158.828 289.401,145.215 289.401,133.352 C289.401,126.827 296.617,107.142 298.487,96.959 C301.049,83.004 295.761,65.351 295.761,65.351 L289.556,53.228 L286.171,43.657 L273.197,36 L268.12,38.552 L266.428,48.123 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
+ <path d="M287.813996,42.3043267 L273.27376,33.7229646 L266.325223,37.2157097 L264.814,45.76 L264.652393,45.7317763 C263.85509,45.5905356 262.983937,45.4515253 262.04507,45.3194647 C251.951657,43.8997304 241.082999,44.0708407 230.818613,46.9380976 C227.467233,47.874273 224.276801,49.0844275 221.272571,50.5886469 C211.833753,55.3147654 203.210508,62.7265091 194.970218,72.4062191 C191.692909,76.2560114 188.63898,80.2604721 185.397846,84.8493339 L183.925224,86.9618345 L178.349357,95.0736084 C178.13479,95.3810094 177.962626,95.6250368 177.845948,95.7862117 C174.883341,99.8789819 171.531982,103.824232 167.86262,107.608745 C162.615947,113.020067 156.988777,117.840619 151.362856,122.004776 C149.592376,123.315238 147.937205,124.474129 146.432147,125.475734 L145.936068,125.803769 C145.480517,126.103053 145.066774,126.369316 144.697894,126.602062 L144.021,127.022 L114.979482,139.708546 L106.107,154.843 L87.3881057,172.602167 L98.8106091,181.754 L128.587,181.754 L152.214,180.845 L222.371144,182.840192 L260.240377,184.482123 L293.142624,184.484 L294.134631,158.667825 L293.959639,157.767839 C293.849302,157.18075 293.715643,156.438569 293.565939,155.562205 C293.249432,153.70937 292.939613,151.707559 292.655043,149.609691 C291.913878,144.145766 291.456999,138.895461 291.405813,134.221521 L291.401,133.352 C291.401,130.712388 292.583031,125.920686 295.504117,115.915736 L297.162199,110.22645 C298.998866,103.860427 299.874841,100.474602 300.454106,97.3202382 C300.899761,94.8927953 301.134876,92.2838679 301.179755,89.518555 C301.269948,83.9610906 300.602644,78.041851 299.436276,72.1499473 C299.054052,70.2191482 298.644353,68.4303108 298.234036,66.8262266 L297.985935,65.8801213 L297.72428,64.9386123 L297.62451,64.6022369 L291.395,52.432 L287.813996,42.3043267 Z M273.119,38.276 L284.528,45.009 L287.714908,54.0205631 L293.895,66.096 L294.124065,66.9222142 C294.198186,67.1975811 294.276674,67.4964029 294.358808,67.8174924 C294.751622,69.3531521 295.145055,71.070968 295.512422,72.9267184 C296.628236,78.5632447 297.265311,84.2143459 297.180281,89.4536467 C297.142957,91.7534674 296.964653,93.9205598 296.635278,95.9328543 L296.519877,96.5978556 C295.931419,99.8022757 294.986189,103.383785 292.904307,110.549377 L291.064494,116.860306 C288.431526,125.980032 287.401,130.360387 287.401,133.352 C287.401,138.445755 287.881676,144.178429 288.691343,150.147355 C288.940796,151.986341 289.209162,153.752772 289.484726,155.414029 L289.679999,156.567196 L290.018873,158.455503 L290.119,158.983 L289.293,180.484 L260.327,180.484 L222.514623,178.842877 L152.265856,176.844808 L152.13201,176.845482 L128.51001,177.755482 L100.215,177.754 L93.467,172.347 L109.27209,157.353898 L117.772,142.852 L145.855906,130.585836 L146.294717,130.320468 L146.546491,130.16432 C146.913832,129.935214 147.326888,129.672139 147.782623,129.375562 L148.132378,129.146854 C149.827762,128.033037 151.713634,126.721654 153.742588,125.219877 C159.534249,120.933044 165.324662,115.972649 170.734399,110.393145 C174.531882,106.476491 178.006379,102.386281 181.086095,98.1317281 L181.517004,97.523416 C183.040657,95.3472271 186.933089,89.6282488 187.977956,88.1345743 C191.414655,83.2216936 194.596927,79.0154545 198.016028,74.9991021 C205.936735,65.6947998 214.169603,58.6185884 223.063444,54.1653456 C225.831511,52.7793734 228.782944,51.6598726 231.894775,50.7906128 C241.548681,48.0938879 251.894128,47.9310148 261.487916,49.2804722 C262.555488,49.4306363 263.527126,49.589689 264.391938,49.7495885 L265.468043,49.9599812 C265.693777,50.006915 265.860968,50.0440083 265.96666,50.069064 L268.028567,50.5578664 L269.914,39.887 L273.119,38.276 Z" id="Path" fill="#B1B1B4" fill-rule="nonzero"></path>
+ <polyline id="Path" points="260.327 182.029 257.147 176.115 263.507 169.746 253.498 156.812 245.791 144.27 245.791 114.246 245.791 144.27"></polyline>
+ <polygon id="Path" fill="#B1B1B4" fill-rule="nonzero" points="247.791 114.246 247.791 143.705 255.143 155.67 266.165808 169.913859 259.612 176.476 262.088497 181.081831 258.565503 182.976169 254.681731 175.753329 260.847 169.577 251.916291 158.036008 251.794007 157.859095 243.791 144.835387 243.791 114.246"></polygon>
+ <path d="M189.914,147.91 C189.914,147.91 192.227,154.595 196.274,155.189 C207.028,156.764 223.985,159.738 223.985,159.738 L258.056,176.115 L258.056,176.115 L258.056,176.115 L258.056,176.115 L258.056,176.115 L223.985,159.738" id="Path"></path>
+ <path d="M188.023937,148.563959 L191.804063,147.256041 L191.903933,147.524037 C191.976459,147.709348 192.077175,147.95247 192.204998,148.238925 C192.548607,149.008961 192.95346,149.778049 193.410295,150.484483 C194.451961,152.09528 195.56538,153.063564 196.563822,153.210111 L198.245146,153.459982 C199.794065,153.693252 201.485998,153.95589 203.30431,154.244742 L207.08686,154.853587 L208.064614,155.013261 C210.273021,155.374859 212.538037,155.751899 214.810594,156.135113 L222.009293,157.36452 L224.602527,157.815778 L258.922448,174.312427 L257.189552,177.917573 L223.369,161.66 L218.675776,160.849585 L214.146204,160.079551 C211.879325,159.697294 209.620256,159.321242 207.418274,158.960696 L204.05937,158.415985 C201.01967,157.928196 198.303382,157.507553 195.983561,157.167799 C193.583708,156.81556 191.657911,155.140792 190.05143,152.656585 C189.061358,151.125571 188.388606,149.617919 188.023937,148.563959 Z" id="Path" fill="#B1B1B4" fill-rule="nonzero"></path>
+ <polyline id="Path" points="134.947 145.18 141.761 143.816 146.304 147.455 144.487 153.824"></polyline>
+ <polygon id="Path" fill="#B1B1B4" fill-rule="nonzero" points="134.554436 143.218905 142.283218 141.671788 148.592 146.725202 146.410264 154.372684 142.563736 153.275316 144.015 148.184 141.239 145.96 135.339564 147.141095"></polygon>
+ <polyline id="Path" points="116.322 160.648 121.773 161.557 127.224 159.738"></polyline>
+ <polygon id="Path" fill="#B1B1B4" fill-rule="nonzero" points="126.590918 157.840842 127.857082 161.635158 121.934451 163.611541 115.993026 162.620758 116.650974 158.675242 121.609 159.502"></polygon>
+ <polygon id="Path" fill="#B1B2B5" fill-rule="nonzero" points="96.788 166.107 100.422 170.656 94.971 177.025 90.428 172.475"></polygon>
+ <path d="M103.016905,170.699917 L96.9540639,163.110521 L87.6015484,172.4748 L95.084008,179.968789 L103.016905,170.699917 Z M96.622,169.103 L97.827,170.612 L94.858,174.08 L93.255,172.475 L96.622,169.103 Z" id="stroke-shape-render-9-4a8add3e-3708-8010-8005-5fb3aff60d2b-0" fill="#B1B1B4" fill-rule="nonzero"></path>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/src/frontend/src/assets/spinner_small.gif b/src/frontend/src/assets/spinner_small.gif
new file mode 100755
index 0000000000000000000000000000000000000000..2d4290ea294108e933c04c43b880359100f7b37a
Binary files /dev/null and b/src/frontend/src/assets/spinner_small.gif differ
diff --git a/src/frontend/src/environments/environment.ts b/src/frontend/src/environments/environment.ts
index 290cd2399a6aa0fa6f576792565e8d46ad0214a0..3e1f27ddbbb0f43e006c2258b1530afc969c0b87 100644
--- a/src/frontend/src/environments/environment.ts
+++ b/src/frontend/src/environments/environment.ts
@@ -4,7 +4,7 @@
export const environment = {
production: false,
- apiUrl: 'http://vs-code-cloud.digitallearning.gmbh:8005'
+ apiUrl: 'http://127.0.0.1:8000'
};
/*
diff --git a/src/frontend/src/index.html b/src/frontend/src/index.html
index 2121677ba3987c211c8c7648397dc98580ed44d8..4cb71443e6753a316e84985c90b829e7e22e600d 100644
--- a/src/frontend/src/index.html
+++ b/src/frontend/src/index.html
@@ -5,12 +5,9 @@
<title>Polaris</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/x-icon" href="favicon.ico">
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link rel="icon" type="image/x-icon" href="assets/favicon.svg">
</head>
-<body class="mat-typography">
+<body>
<app-root></app-root>
</body>
</html>
diff --git a/src/frontend/src/locale/messages.de.xlf b/src/frontend/src/locale/messages.de.xlf
index f58b3888e75a8147c56f66730d74ce460fbbc0f6..943538b5aad2cdd1283de21465a283bb7bdf41e8 100644
--- a/src/frontend/src/locale/messages.de.xlf
+++ b/src/frontend/src/locale/messages.de.xlf
@@ -33,7 +33,7 @@
</context-group>
</trans-unit>
<trans-unit id="acceptAllButton" datatype="html">
- <source><x id="START_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="<mat-icon fontIcon="check">"/><x id="CLOSE_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="</mat-icon>"/> Consent to all and activate analysis </source>
+ <source><x id="START_TAG_FA_ICON" ctype="fa_icon"/><x id="CLOSE_TAG_FA_ICON" ctype="fa_icon"/> Consent to all and activate analysis </source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.html</context>
<context context-type="linenumber">31,32</context>
@@ -233,7 +233,7 @@
<context context-type="linenumber">177</context>
</context-group>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">85</context>
</context-group>
</trans-unit>
@@ -249,18 +249,18 @@
<trans-unit id="toastMessageChanged" datatype="html">
<source>Changed</source>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">97</context>
</context-group>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">115</context>
</context-group>
</trans-unit>
<trans-unit id="pauseRecordingAndDeleteData" datatype="html">
<source>Pause and Delete Confirmation</source>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">104</context>
</context-group>
</trans-unit>
@@ -301,8 +301,7 @@
<note priority="1" from="description">Continue Data Recording Header </note>
</trans-unit>
<trans-unit id="pausedDataRecordingDescription" datatype="html">
- <source> Would you like to continue sharing selected data with Polaris?
-</source>
+ <source> Would you like to continue sharing selected data with Polaris?</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/pause-data-recording-dialog.html</context>
<context context-type="linenumber">14,16</context>
@@ -311,9 +310,7 @@
<note priority="1" from="meaning">Pause Data Recording Description </note>
</trans-unit>
<trans-unit id="continueDataRecordingDescription" datatype="html">
- <source> Would you like to pause sharing selected data with Polaris? <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="<b
- >"/>A delete job is set up for data deletion, which is only executed after a fixed time window.<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="</b
- >"/></source>
+ <source>Would you like to pause sharing selected data with Polaris?</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/pause-data-recording-dialog.html</context>
<context context-type="linenumber">19,24</context>
@@ -321,6 +318,13 @@
<note priority="1" from="description"> Text for Continue </note>
<note priority="1" from="meaning">Continue Data Recording Description </note>
</trans-unit>
+ <trans-unit id="continueDataRecordingDescriptionExtended" datatype="html">
+ <source>A delete job is set up for data deletion, which is only executed after a fixed time window.</source>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/consent-management/pause-data-recording-dialog.html</context>
+ <context context-type="linenumber">19,24</context>
+ </context-group>
+ </trans-unit>
<trans-unit id="cancel" datatype="html">
<source>Cancel</source>
<context-group purpose="location">
@@ -759,7 +763,7 @@
<source>Pause and Delete Confirmation</source>
<target>Pausieren und Löschen Bestätigen</target>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">128</context>
</context-group>
</trans-unit>
@@ -864,7 +868,7 @@
<source>Pause and Delete Confirmation</source>
<target> Pausieren und Löschen Bestätigen</target>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">128</context>
</context-group>
</trans-unit>
@@ -1433,7 +1437,7 @@
<note priority="1" from="description">Logout </note>
</trans-unit>
<trans-unit id="previousWithIcon" datatype="html">
- <source><x id="START_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="<mat-icon>"/>arrow_backward<x id="CLOSE_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="</mat-icon>"/> Previous </source>
+ <source><x id="START_TAG_FA_ICON" ctype="x-fa_icon" /><x id="CLOSE_TAG_FA_ICON" ctype="x-fa_icon" /> Previous </source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/wizard/wizard.component.html</context>
<context context-type="linenumber">130,131</context>
@@ -1445,7 +1449,7 @@
<note priority="1" from="description">Previous </note>
</trans-unit>
<trans-unit id="nextWithIcon" datatype="html">
- <source> Next <x id="START_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="<mat-icon>"/>arrow_forward<x id="CLOSE_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="</mat-icon>"/></source>
+ <source> Next <x id="START_TAG_FA_ICON" ctype="x-fa_icon" /><x id="CLOSE_TAG_FA_ICON" ctype="x-fa_icon" /></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/wizard/wizard.component.html</context>
<context context-type="linenumber">141,143</context>
@@ -1453,7 +1457,7 @@
<note priority="1" from="description">Next </note>
</trans-unit>
<trans-unit id="summaryWithIcon" datatype="html">
- <source> Summary <x id="START_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="<mat-icon>"/>arrow_forward<x id="CLOSE_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="</mat-icon>"/></source>
+ <source> Summary <x id="START_TAG_FA_ICON" ctype="x-fa_icon" /><x id="CLOSE_TAG_FA_ICON" ctype="x-fa_icon" /></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/wizard/wizard.component.html</context>
<context context-type="linenumber">150,151</context>
diff --git a/src/frontend/src/locale/messages.xlf b/src/frontend/src/locale/messages.xlf
index 3bf676afb45f3c0455233f343c951f108ffbbc0e..c793fe87a447b2d93297688bff88a67ea67101f4 100644
--- a/src/frontend/src/locale/messages.xlf
+++ b/src/frontend/src/locale/messages.xlf
@@ -33,7 +33,7 @@
</context-group>
</trans-unit>
<trans-unit id="acceptAllButton" datatype="html">
- <source><x id="START_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="<mat-icon fontIcon="check">"/><x id="CLOSE_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="</mat-icon>"/> Consent to all and activate analysis </source>
+ <source><x id="START_TAG_FA_ICON" ctype="fa_icon" /><x id="CLOSE_TAG_FA_ICON" ctype="fa_icon"/> Consent to all and activate analysis </source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/analytics-engine/analysis-card/verbs-modal/verbs-modal.component.html</context>
<context context-type="linenumber">31,32</context>
@@ -233,7 +233,7 @@
<context context-type="linenumber">177</context>
</context-group>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">85</context>
</context-group>
</trans-unit>
@@ -249,11 +249,11 @@
<trans-unit id="toastMessageChanged" datatype="html">
<source>Changed</source>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">97</context>
</context-group>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">115</context>
</context-group>
</trans-unit>
@@ -274,7 +274,7 @@
<trans-unit id="pauseRecordingAndDeleteData" datatype="html">
<source>Pause and Delete Confirmation</source>
<context-group purpose="location">
- <context context-type="sourcefile">src/app/consent-management/consent-management..component.ts</context>
+ <context context-type="sourcefile">src/app/consent-management/consent-management.component.ts</context>
<context context-type="linenumber">104</context>
</context-group>
</trans-unit>
@@ -295,8 +295,7 @@
<note priority="1" from="description">Continue Data Recording Header </note>
</trans-unit>
<trans-unit id="pausedDataRecordingDescription" datatype="html">
- <source> Would you like to continue sharing selected data with Polaris?
-</source>
+ <source> Would you like to continue sharing selected data with Polaris?</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/pause-data-recording-dialog.html</context>
<context context-type="linenumber">14,16</context>
@@ -305,9 +304,7 @@
<note priority="1" from="meaning">Pause Data Recording Description </note>
</trans-unit>
<trans-unit id="continueDataRecordingDescription" datatype="html">
- <source> Would you like to pause sharing selected data with Polaris? <x id="START_BOLD_TEXT" ctype="x-b" equiv-text="<b
- >"/>A delete job is set up for data deletion, which is only executed after a fixed time window.<x id="CLOSE_BOLD_TEXT" ctype="x-b" equiv-text="</b
- >"/></source>
+ <source>Would you like to pause sharing selected data with Polaris?</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/pause-data-recording-dialog.html</context>
<context context-type="linenumber">19,24</context>
@@ -315,6 +312,13 @@
<note priority="1" from="description"> Text for Continue </note>
<note priority="1" from="meaning">Continue Data Recording Description </note>
</trans-unit>
+ <trans-unit id="continueDataRecordingDescriptionExtended" datatype="html">
+ <source>A delete job is set up for data deletion, which is only executed after a fixed time window.</source>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/consent-management/pause-data-recording-dialog.html</context>
+ <context context-type="linenumber">19,24</context>
+ </context-group>
+ </trans-unit>
<trans-unit id="cancel" datatype="html">
<source>Cancel</source>
<context-group purpose="location">
@@ -759,7 +763,7 @@
<note priority="1" from="description">Logout </note>
</trans-unit>
<trans-unit id="previousWithIcon" datatype="html">
- <source><x id="START_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="<mat-icon>"/>arrow_backward<x id="CLOSE_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="</mat-icon>"/> Previous </source>
+ <source><x id="START_TAG_FA_ICON" ctype="x-fa_icon"/><x id="CLOSE_TAG_FA_ICON" ctype="x-fa_icon"/> Previous </source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/wizard/wizard.component.html</context>
<context context-type="linenumber">130,131</context>
@@ -771,7 +775,7 @@
<note priority="1" from="description">Previous </note>
</trans-unit>
<trans-unit id="nextWithIcon" datatype="html">
- <source> Next <x id="START_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="<mat-icon>"/>arrow_forward<x id="CLOSE_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="</mat-icon>"/></source>
+ <source> Next <x id="START_TAG_FA_ICON" ctype="x-fa_icon" /><x id="CLOSE_TAG_FA_ICON" ctype="x-fa_icon"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/wizard/wizard.component.html</context>
<context context-type="linenumber">141,143</context>
@@ -779,7 +783,7 @@
<note priority="1" from="description">Next </note>
</trans-unit>
<trans-unit id="summaryWithIcon" datatype="html">
- <source> Summary <x id="START_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="<mat-icon>"/>arrow_forward<x id="CLOSE_TAG_MAT_ICON" ctype="x-mat_icon" equiv-text="</mat-icon>"/></source>
+ <source> Summary <x id="START_TAG_FA_ICON" ctype="x-fa_icon"/><x id="CLOSE_TAG_FA_ICON" ctype="x-fa_icon"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/consent-management/wizard/wizard.component.html</context>
<context context-type="linenumber">150,151</context>
diff --git a/src/frontend/src/styles.scss b/src/frontend/src/styles.scss
index 2a61d666fc26d0be995a7d3fe0ef4f51f77d1aad..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/frontend/src/styles.scss
+++ b/src/frontend/src/styles.scss
@@ -1,76 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-
-@use '@angular/material' as mat;
-@import 'ngx-toastr/toastr';
-@import "@angular/material/theming";
-@include mat.core();
-
-html,
-body {
- height: 100%;
-}
-body {
- margin: 0;
- font-family: Roboto, 'Helvetica Neue', sans-serif;
-}
-
-
-$polaris-primary: mat-palette($mat-indigo);
-$polaris-accent: mat-palette($mat-red, 500, 900, A100);
-$polaris-warn: mat-palette($mat-deep-orange);
-
-$polaris-theme-light: mat.define-light-theme(
- (
- color: (
- primary: $polaris-primary,
- accent: $polaris-accent,
- warn: $polaris-warn
- )
- )
-);
-@include mat.core-theme($polaris-theme-light);
-
-@include mat.all-component-themes($polaris-theme-light);
-
-$polaris-primary-dark: mat-palette($mat-indigo);
-$polaris-accent-dark: mat-palette($mat-blue-grey,200,400,500);
-$polaris-warn-dark: mat-palette($mat-blue);
-
-$polaris-dark-theme: mat.define-dark-theme(
- (
- color: (
- primary: $polaris-primary-dark,
- accent: $polaris-accent-dark,
- warn: $polaris-warn-dark
- )
- )
-);
-
-tr.example-element-row:not(.example-expanded-row):hover {
- background: whitesmoke;
-}
-
-tr.example-element-row:not(.example-expanded-row):active {
- background: #efefef;
-}
-.purpose-of-collection-header {
- color: rgba(0, 0, 0, 0.54);
- font-size: 14px;
-}
-
-.dark-mode {
-
-
-tr.example-element-row:not(.example-expanded-row):hover {
- background: darkgrey!important;
-}
-
-tr.example-element-row:not(.example-expanded-row):active {
- background: #555555!important;
-}
-.purpose-of-collection-header {
- color: #fff;
- font-size: 14px;
-}
- @include mat.all-component-colors($polaris-dark-theme);
-}
\ No newline at end of file
diff --git a/src/frontend/src/theme.less b/src/frontend/src/theme.less
new file mode 100644
index 0000000000000000000000000000000000000000..c8229ff113592b31cba9224652e8b1dd764da7c1
--- /dev/null
+++ b/src/frontend/src/theme.less
@@ -0,0 +1,66 @@
+
+// Custom Theming for NG-ZORRO
+// For more information: https://ng.ant.design/docs/customize-theme/en
+@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
+@import "../node_modules/@fontsource/open-sans/300.css";
+@import "../node_modules/@fontsource/open-sans/300-italic.css";
+@import "../node_modules/@fontsource/open-sans/400.css";
+@import "../node_modules/@fontsource/open-sans/400-italic.css";
+@import "../node_modules/@fontsource/open-sans/500.css";
+@import "../node_modules/@fontsource/open-sans/500-italic.css";
+@import "../node_modules/@fontsource/open-sans/600.css";
+@import "../node_modules/@fontsource/open-sans/600-italic.css";
+@import "../node_modules/@fontsource/open-sans/700.css";
+@import "../node_modules/@fontsource/open-sans/700-italic.css";
+@import "../node_modules/@fontsource/open-sans/800.css";
+@import "../node_modules/@fontsource/open-sans/800-italic.css";
+// Override less variables to here
+// View all variables: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less
+
+// primary palette
+@primary-color: #612158;
+@primary-color-hover: #804d79;
+
+// Layout
+@layout-body-background: #F0ECF0;
+@layout-header-background: #F0ECF0;
+
+// colors: backgrounds and surfaces
+@body-background: #F0ECF0;
+@component-background: #F0ECF0;
+
+// colors: borders
+@popover-customize-border-color: #C6CDD4;
+@border-color-base: #607088; // base border outline a component
+@border-color-split: #C6CDD4; // split border inside a component
+@border-color-inverse: #F0ECF0;
+
+// colors: text
+@text-color: #17253D;
+@text-color-secondary: #607088;
+@text-color-inverse: #F0ECF0;
+@icon-color: #607088;
+@icon-color-hover: fade(#607088, 75%);
+@heading-color: #17253D;
+@text-color-dark: #F0ECF0;
+@text-color-secondary-dark: #C6CDD4;
+@text-selection-bg: @primary-color;
+
+// fonts
+@font-family: "Open Sans", sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+// buttons
+@btn-font-weight: 400;
+@btn-border-radius-base: 3px;
+@btn-border-radius-sm: 3px;
+@btn-border-width: 1px;
+@btn-border-style: solid #612158;
+
+@btn-primary-color: #fff;
+@btn-primary-bg: @primary-color;
+@btn-primary-bg-hover: @primary-color-hover; // TODO
+
+@btn-default-color: @primary-color;
+@btn-default-bg: #fff;
+@btn-default-bg-hover: @primary-color; // TODO
+@btn-default-border: @primary-color;
diff --git a/src/requirements.txt b/src/requirements.txt
index 140bcf7e0a9dca2c258fb69045cfa2a96160edd8..f4e76a9c9635159b8ec8379f5adbdf7d5618eaec 100644
--- a/src/requirements.txt
+++ b/src/requirements.txt
@@ -54,7 +54,7 @@ kombu==5.2.4
launchpadlib==1.10.16
lazr.restfulclient==0.14.4
lazr.uri==1.0.6
-lxml==4.6.5
+#lxml==4.6.5
Markdown==3.3.7
MarkupSafe==2.1.2
mergedeep==1.3.4
@@ -101,6 +101,6 @@ watchdog==2.2.1
wcwidth==0.2.5
whitenoise==6.3.0
wrapt==1.14.1
-xmlsec==1.3.13
+#xmlsec==1.3.13
zipp==1.0.0
zeep==4.2.1
\ No newline at end of file