@@ -11,41 +12,31 @@
+
+
+
+
+
+
+
+
+
+
-
-
diff --git a/security-c4po-angular/src/app/pentest/pentest-content/pentest-info/pentest-info.component.scss b/security-c4po-angular/src/app/pentest/pentest-content/pentest-info/pentest-info.component.scss
index 26061f8..fc9ebf1 100644
--- a/security-c4po-angular/src/app/pentest/pentest-content/pentest-info/pentest-info.component.scss
+++ b/security-c4po-angular/src/app/pentest/pentest-content/pentest-info/pentest-info.component.scss
@@ -1,10 +1,14 @@
.pentest-info {
- overflow-y: scroll;
- overflow-x: hidden;
- // overflow: auto !important;
+ overflow: hidden !important;
position: relative !important;
.description {
+ // ToDo: Make only description scrollable
+ // Scrollbar
+ overflow-y: scroll !important;
+ overflow-x: hidden;
+ scroll-behavior: smooth;
+
width: 60vw;
font-size: 1rem;
white-space: pre-line;
diff --git a/security-c4po-angular/src/assets/i18n/de-DE.json b/security-c4po-angular/src/assets/i18n/de-DE.json
index f0d60fe..462ed99 100644
--- a/security-c4po-angular/src/assets/i18n/de-DE.json
+++ b/security-c4po-angular/src/assets/i18n/de-DE.json
@@ -1,6 +1,7 @@
{
"global": {
"actions": "Aktionen",
+ "action.profile": "Profil",
"action.login": "Einloggen",
"action.logout": "Ausloggen",
"action.retry": "Erneut Versuchen",
@@ -56,6 +57,35 @@
"failed": "Benutzername oder Passwort falsch",
"unauthorized": "Benutzer nicht gefunden. Bitte registrieren und erneut versuchen"
},
+ "profile": {
+ "header": "Nutzerprofil",
+ "username": {
+ "title": "Nutzername",
+ "placeholder": "Nutzername"
+ },
+ "firstName": {
+ "title": "Vorname",
+ "placeholder": "Vorname"
+ },
+ "lastName": {
+ "title": "Nachname",
+ "placeholder": "Nachname"
+ },
+ "validationMessage": {
+ "firstNameRequired": "Vorname ist erforderlich.",
+ "lastNameRequired": "Nachname ist erforderlich."
+ },
+ "languageLabel": "Sprache ändern:",
+ "password": {
+ "title": "Passwort ändern:",
+ "old": "Altes Passwort",
+ "new": "Neues Passwort",
+ "confirmNew": "Neues Passwort bestätigen",
+ "validationMessage": {
+ "passwordRequired": "Passwort ist erforderlich."
+ }
+ }
+ },
"state": {
"new": "Neu",
"needs_more_info": "Benötigt mehr Informationen",
@@ -64,7 +94,7 @@
"triaged": "Ausstehend",
"retesting": "Erneutes Testen",
"resolved": "Aufgeklärt",
- "informative": "Informatif",
+ "informative": "Informativ",
"duplicate": "Duplikat",
"not_applicable": "Unzutreffend",
"spam": "Spam",
diff --git a/security-c4po-angular/src/assets/i18n/en-US.json b/security-c4po-angular/src/assets/i18n/en-US.json
index 97cdff3..5f4cda4 100644
--- a/security-c4po-angular/src/assets/i18n/en-US.json
+++ b/security-c4po-angular/src/assets/i18n/en-US.json
@@ -1,6 +1,7 @@
{
"global": {
"actions": "Actions",
+ "action.profile": "Profile",
"action.login": "Login",
"action.logout": "Logout",
"action.retry": "Try again",
@@ -56,6 +57,35 @@
"failed": "Wrong username or password",
"unauthorized": "User not found. Please register and try again"
},
+ "profile": {
+ "header": "Userprofile",
+ "username": {
+ "title": "Username",
+ "placeholder": "Username"
+ },
+ "firstName": {
+ "title": "Firstname",
+ "placeholder": "Firstname"
+ },
+ "lastName": {
+ "title": "Lastname",
+ "placeholder": "Lastname"
+ },
+ "validationMessage": {
+ "firstNameRequired": "Firstname is required.",
+ "lastNameRequired": "Lastname is required."
+ },
+ "languageLabel": "Change language:",
+ "password": {
+ "title": "Change password:",
+ "old": "Old password",
+ "new": "New password",
+ "confirmNew": "Confirm new password",
+ "validationMessage": {
+ "passwordRequired": "Password is required."
+ }
+ }
+ },
"state": {
"new": "New",
"needs_more_info": "Needs More Info",
diff --git a/security-c4po-angular/src/shared/modules/export-report-dialog/export-report-dialog.component.scss b/security-c4po-angular/src/shared/modules/export-report-dialog/export-report-dialog.component.scss
index f09627d..36eda9f 100644
--- a/security-c4po-angular/src/shared/modules/export-report-dialog/export-report-dialog.component.scss
+++ b/security-c4po-angular/src/shared/modules/export-report-dialog/export-report-dialog.component.scss
@@ -31,7 +31,6 @@
float: left;
clear: none;
margin-left: 1rem;
-
}
nb-form-field {
diff --git a/security-c4po-angular/src/shared/modules/export-report-dialog/export-report-dialog.component.ts b/security-c4po-angular/src/shared/modules/export-report-dialog/export-report-dialog.component.ts
index 90dee78..318e289 100644
--- a/security-c4po-angular/src/shared/modules/export-report-dialog/export-report-dialog.component.ts
+++ b/security-c4po-angular/src/shared/modules/export-report-dialog/export-report-dialog.component.ts
@@ -32,15 +32,14 @@ export class ExportReportDialogComponent implements OnInit {
private dialogService: DialogService
) {
}
-
// HTML
readonly fa = FA;
// form control elements
exportReportFormatControl = new FormControl(ExportFormatOptions.PDF);
- exportReportLanguageControl = new FormControl(ExportLanguageOptions.ENGLISH);
+ exportReportLanguageControl = new FormControl(LanguageOptions.ENGLISH);
// exports
exportFormats = ExportFormatOptions;
- exportLanguages = ExportLanguageOptions;
+ exportLanguages = LanguageOptions;
dialogData: GenericDialogData;
@@ -159,7 +158,7 @@ export enum ExportFormatOptions {
HTML = 'HTML'
}
-export enum ExportLanguageOptions {
+export enum LanguageOptions {
ENGLISH = 'en-US',
GERMAN = 'de-DE'
}
diff --git a/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.html b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.html
new file mode 100644
index 0000000..246a99d
--- /dev/null
+++ b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.html
@@ -0,0 +1,69 @@
+
diff --git a/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.scss b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.scss
new file mode 100644
index 0000000..ff567b1
--- /dev/null
+++ b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.scss
@@ -0,0 +1,29 @@
+@import '../../../../assets/@theme/styles/themes';
+
+.password-form {
+ padding-top: 1.5rem;
+
+ .password-form-field {
+ width: 20rem !important;
+
+ .label {
+ display: block;
+ font-size: 0.95rem;
+ padding-bottom: 0.5rem;
+ }
+
+ .form-field {
+ margin-bottom: 0.5rem;
+ }
+
+ .form-field-button {
+ margin-top: 1rem;
+ margin-right: 1rem;
+ }
+ }
+
+ .error-text {
+ float: left;
+ color: nb-theme(color-danger-default);
+ }
+}
diff --git a/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.spec.ts b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.spec.ts
new file mode 100644
index 0000000..e879795
--- /dev/null
+++ b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.spec.ts
@@ -0,0 +1,58 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PasswordInputFromComponent} from './password-input-from.component';
+import {NbFormFieldModule} from '@nebular/theme';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {ThemeModule} from '@assets/@theme/theme.module';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {HttpLoaderFactory} from '../../../../app/common-app.module';
+import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {NgxsModule} from '@ngxs/store';
+import {SessionState} from '@shared/stores/session-state/session-state';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import {KeycloakService} from 'keycloak-angular';
+
+describe('PasswordInputFromComponent', () => {
+ let component: PasswordInputFromComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [
+ PasswordInputFromComponent
+ ],
+ imports: [
+ NbFormFieldModule,
+ ReactiveFormsModule,
+ BrowserAnimationsModule,
+ ThemeModule.forRoot(),
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useFactory: HttpLoaderFactory,
+ deps: [HttpClient]
+ }
+ }),
+ NgxsModule.forRoot([SessionState]),
+ HttpClientModule,
+ HttpClientTestingModule
+ ],
+ providers: [
+ KeycloakService
+ ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PasswordInputFromComponent);
+ component = fixture.componentInstance;
+ // ToDo: fix detectChanges() when from control accessor is defined
+ // fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.ts b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.ts
new file mode 100644
index 0000000..dd7e8dd
--- /dev/null
+++ b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/password-input-from.component.ts
@@ -0,0 +1,130 @@
+import {Component, EventEmitter, forwardRef, Input, OnInit, Output} from '@angular/core';
+import {AbstractControl, FormBuilder, FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors} from '@angular/forms';
+import {
+ OldPasswordEmptyError,
+ PasswordErrorStateMatcher
+} from '@shared/modules/profile-settings/password-input-from/util/password-error-state-matcher';
+import {passwordValidator} from '@shared/modules/profile-settings/password-input-from/util/password.validator';
+import {BehaviorSubject} from 'rxjs';
+import {ProfilePasswordFormData} from '@shared/modules/profile-settings/password-input-from/util/profile-password-form-data.model';
+import * as FA from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+ selector: 'app-password-input-from',
+ templateUrl: './password-input-from.component.html',
+ styleUrls: ['./password-input-from.component.scss'],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => PasswordInputFromComponent),
+ multi: true
+ },
+ {
+ provide: NG_VALIDATORS,
+ useExisting: forwardRef(() => PasswordInputFromComponent),
+ multi: true
+ }
+ ]
+})
+export class PasswordInputFromComponent implements OnInit {
+
+ constructor(private fb: FormBuilder) { }
+ // Emits true if password is strong
+ @Output() passwordStrong: EventEmitter = new EventEmitter();
+ // Handle erros
+ @Input() userServiceError$: BehaviorSubject = new BehaviorSubject(false);
+
+ public passwordErrorStateMatcher: PasswordErrorStateMatcher;
+ public oldPasswordEmptyError: OldPasswordEmptyError;
+ // show the criteria of the new password
+ showDetails = false;
+
+ passwordFormGroup: FormGroup;
+ // form control elements
+ oldPasswordCtrl: AbstractControl;
+ newPasswordCtrl: AbstractControl;
+ confirmNewPasswordCtrl: AbstractControl;
+ // HTML only
+ readonly fa = FA;
+ showOldPassword = false;
+ showNewPasswords = false;
+
+ /**
+ * tests value of control for empty-spaces
+ * @param control FormControl
+ */
+ static containsBlankSpaceValidator(control: FormControl): ValidationErrors | null {
+ const containsEmptySpacesRegex: RegExp = new RegExp(/\s+/);
+ return containsEmptySpacesRegex.test(control.value) ? {passwordContainsBlankSpace: true} : null;
+ }
+
+ ngOnInit(): void {
+ this.passwordFormGroup = this.fb.group(
+ {
+ oldPassword: ['', [PasswordInputFromComponent.containsBlankSpaceValidator]],
+ newPassword: ['', [PasswordInputFromComponent.containsBlankSpaceValidator]],
+ confirmNewPassword: ''
+ },
+ {validators: [passwordValidator]}
+ );
+ // get form controls
+ this.oldPasswordCtrl = this.passwordFormGroup.get('oldPassword');
+ this.newPasswordCtrl = this.passwordFormGroup.get('newPassword');
+ this.confirmNewPasswordCtrl = this.passwordFormGroup.get('confirmNewPassword');
+
+ this.passwordErrorStateMatcher = new PasswordErrorStateMatcher(this.userServiceError$);
+ this.oldPasswordEmptyError = new OldPasswordEmptyError();
+ }
+
+ registerOnChange(fn: any): void {
+ this.passwordFormGroup.valueChanges.subscribe(() => {
+ fn(this.passwordFormGroup.value);
+ });
+ }
+
+ registerOnTouched(fn: any): void {
+ }
+
+ writeValue(value: ProfilePasswordFormData): void {
+ if (value) {
+ this.oldPasswordCtrl.setValue(value.oldPassword);
+ this.newPasswordCtrl.setValue(value.newPassword);
+ this.confirmNewPasswordCtrl.setValue(value.confirmNewPassword);
+ }
+ }
+
+ validate(control: AbstractControl): ValidationErrors | null {
+ return this.passwordFormGroup.valid ? null : passwordValidator(this.passwordFormGroup);
+ }
+
+ /**
+ * This Function is triggered as soon as a change in the strength of the password happens
+ *
+ * @param strength the new strength as a percentage number. Only 100% denotes a strong password
+ */
+ onStrengthChanged(strength: number): void {
+ this.passwordStrong.emit(strength === 100);
+ }
+
+ getInputType(passwordField: string): string {
+ if (passwordField === 'oldPassword') {
+ if (this.showOldPassword) {
+ return 'text';
+ }
+ return 'password';
+ } else {
+ if (this.showNewPasswords) {
+ return 'text';
+ }
+ return 'password';
+ }
+ }
+
+ toggleShowOldPassword(): void {
+ this.showOldPassword = !this.showOldPassword;
+ }
+
+ toggleShowNewPasswords(): void {
+ this.showNewPasswords = !this.showNewPasswords;
+ }
+}
diff --git a/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/password-error-state-matcher.ts b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/password-error-state-matcher.ts
new file mode 100644
index 0000000..531149b
--- /dev/null
+++ b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/password-error-state-matcher.ts
@@ -0,0 +1,33 @@
+import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
+import {BehaviorSubject} from 'rxjs';
+
+export class PasswordErrorStateMatcher {
+ public passwordsDoNotMatch = true;
+ public userServiceError;
+
+ constructor(userServiceError: BehaviorSubject) {
+ this.userServiceError = userServiceError;
+ }
+
+ /**
+ * @return true if new and confirm password do not match.
+ */
+ isErrorState(ctrl: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+ const passwordCtrl = form.control.get('newPassword');
+ this.passwordsDoNotMatch = passwordCtrl.value !== ctrl.value;
+ return this.passwordsDoNotMatch || this.userServiceError.value;
+ }
+}
+
+export class OldPasswordEmptyError {
+ public oldPasswordEmpty = true;
+
+ /**
+ * @return true if old password is empty and new password is not.
+ */
+ isErrorState(ctrl: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+ const passwordCtrl = form.control.get('newPassword');
+ this.oldPasswordEmpty = passwordCtrl.value.length !== 0 && ctrl.value.length === 0;
+ return this.oldPasswordEmpty;
+ }
+}
diff --git a/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/password.validator.ts b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/password.validator.ts
new file mode 100644
index 0000000..b47b4cd
--- /dev/null
+++ b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/password.validator.ts
@@ -0,0 +1,23 @@
+import {AbstractControl, ValidationErrors} from '@angular/forms';
+
+/**
+ * passwordValidator validates the password based on 3 conditions:
+ * - newPassword === confirmNewPassword
+ * - MIN_PASSWORD_LENGTH <= newPassword
+ * - oldPassword is NOT empty
+ *
+ * @param formGroup AbstractControl containing [oldPassword, newPassword, confirmPassword]
+ */
+export function passwordValidator(formGroup: AbstractControl): ValidationErrors | null {
+ const oldPasswordCtrl = formGroup.get('oldPassword');
+ const newPasswordCtrl = formGroup.get('newPassword');
+ const confirmNewPasswordCtrl = formGroup.get('confirmNewPassword');
+ if (newPasswordCtrl.value !== confirmNewPasswordCtrl.value) {
+ return {passwordsDoNotMatch: true};
+ } else if (oldPasswordCtrl.value === '') {
+ oldPasswordCtrl.setErrors({oldPasswordEmpty: true});
+ return {oldPasswordEmpty: true};
+ } else {
+ return null;
+ }
+}
diff --git a/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/profile-password-form-data.model.ts b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/profile-password-form-data.model.ts
new file mode 100644
index 0000000..9dc91b8
--- /dev/null
+++ b/security-c4po-angular/src/shared/modules/profile-settings/password-input-from/util/profile-password-form-data.model.ts
@@ -0,0 +1,5 @@
+export interface ProfilePasswordFormData {
+ oldPassword: string;
+ newPassword: string;
+ confirmNewPassword: string;
+}
diff --git a/security-c4po-angular/src/shared/modules/profile-settings/patterns.ts b/security-c4po-angular/src/shared/modules/profile-settings/patterns.ts
new file mode 100644
index 0000000..4e47304
--- /dev/null
+++ b/security-c4po-angular/src/shared/modules/profile-settings/patterns.ts
@@ -0,0 +1,4 @@
+export const Patterns = {
+ NOT_BLANK: '^(?!(?:\\s+)$).*$',
+ NO_WHITESPACES: '^(?!(?:\\s+)$).*$'
+};
diff --git a/security-c4po-angular/src/shared/modules/profile-settings/profile-settings.component.html b/security-c4po-angular/src/shared/modules/profile-settings/profile-settings.component.html
new file mode 100644
index 0000000..7e9ab93
--- /dev/null
+++ b/security-c4po-angular/src/shared/modules/profile-settings/profile-settings.component.html
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+ 