diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.scss b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.scss
new file mode 100644
index 00000000..6e89c8ad
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.scss
@@ -0,0 +1,65 @@
+@import "../../../../../styles/colors";
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0 !important;
+ width: 100%;
+ color: $plainWhite;
+ table-layout: auto;
+}
+
+tr {
+ width: 100%;
+}
+
+td {
+ text-align: left;
+ padding: 8px;
+ min-width: 200px;
+ width: 100%;
+}
+
+
+.text-field {
+ border-radius: 50px;
+ background-color: $plumViolet;
+ padding: 15px;
+ color: $plainWhite;
+ width: 80%;
+ border: none;
+ height: 20px;
+}
+
+.search-bar::placeholder {
+ color: $plainWhite;
+}
+
+.save-btn {
+ border-radius: 50px;
+ border: none;
+ background-color: $coralRed;
+ color: $plainWhite;
+ height: 50px;
+ min-width: 150px;
+ text-transform: uppercase;
+}
+
+@keyframes spinner {
+ to {transform: rotate(360deg);}
+}
+
+.spinner:before {
+ content: '';
+ box-sizing: border-box;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 20px;
+ height: 20px;
+ margin-top: -10px;
+ margin-left: -10px;
+ border-radius: 50%;
+ border: 2px solid #ffffff;
+ border-top-color: #000000;
+ animation: spinner .8s linear infinite;
+}
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.spec.ts b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.spec.ts
new file mode 100644
index 00000000..892c988f
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InviteCodeListComponent } from './invite-code-list.component';
+
+describe('InviteCodeListComponent', () => {
+ let component: InviteCodeListComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ InviteCodeListComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(InviteCodeListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.ts b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.ts
new file mode 100644
index 00000000..6f47f7e1
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-list/invite-code-list.component.ts
@@ -0,0 +1,60 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {InviteCode, defaultInviteCode} from '../../../../interfaces/InviteCode';
+import {AdminSettings} from '../../../../../services/ap-settings.service';
+import {ApiService} from '../../../../../services/api.service';
+
+/**
+ * This Component holds the table with all existing invite codes. It is responsible for loading all entries from the back-end through the function
+ * getInviteCodes from the Gateway and presenting them in a table. The component iterates through all entries and passing the data of each entry towards
+ * another component presenting a row in the table. The Component has as input an EventEmitter to pass it towards the InviteCodeRow component, making it possible
+ * to trigger the getInviteCodes function after deleting an InviteCode from the InviteCodeRow component and update the data.
+ */
+
+@Component({
+ selector: 'app-invite-code-list',
+ templateUrl: './invite-code-list.component.html',
+ styleUrls: ['./invite-code-list.component.scss']
+})
+export class InviteCodeListComponent implements OnInit {
+
+ public inviteCodes: Array = [defaultInviteCode()]
+ public hostname = '[::1]';
+ public port = 3000;
+
+ constructor(
+ private adminSettings: AdminSettings,
+ private api: ApiService,
+ ) {
+ }
+
+ /**
+ * ngOnInit is executed at the time in point this component is loaded into the DOM of the browser. It calls the function for retrieving all invite codes and
+ * subscribe to the EventEmitter passed from the parent component. If the emit function on this EventEmitter is called inside any of the child components,
+ * the invite codes will be reloaded.
+ */
+
+ ngOnInit(): void {
+ this.getInviteCodes();
+ this.reload.subscribe(() => {
+ this.getInviteCodes();
+ });
+ }
+ @Input() reload: EventEmitter = new EventEmitter()
+
+ /**
+ * Function to load all invite codes from the back-end. First the Endpoint for the next back-end call is set, secondly the getInviteCodes function from the
+ * gateway is called and all the entries from the response are pushed into the inviteCodes Array.
+ * Errors are caught and currently logged into the console. An Snackbar showing the error still needs to be implemented.
+ */
+
+ public getInviteCodes(): any {
+ this.api.updateRemoteEndpoint(`http://${this.hostname}:${this.port}`);
+ return this.adminSettings.getInviteCodes().then((inviteCodes) => {
+ this.inviteCodes = inviteCodes.ret;
+ console.log(inviteCodes.ret);
+ }).catch(error => {
+ console.log(error);
+ });
+ }
+
+}
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.html b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.html
new file mode 100644
index 00000000..f332bd0f
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.html
@@ -0,0 +1,17 @@
+
+
+ {{inviteCode.code}}
+
+
+ {{inviteCode.expiration_date}}
+
+
+ {{inviteCode.max_usage}}
+
+
+ {{inviteCode.times_used}}
+
+
+
+
+
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.scss b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.scss
new file mode 100644
index 00000000..9ffead1b
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.scss
@@ -0,0 +1,75 @@
+@import "../../../../../styles/colors";
+
+tr {
+ width: 100% !important;
+ padding: 20px;
+ overflow: hidden;
+ border-bottom: 10px solid transparent;
+}
+
+td {
+ text-align: left;
+ width: 100%;
+ min-width: 200px;
+ color: $plainWhite;
+ padding: 8px;
+ background: $boysenberry;
+}
+td:first-child {
+ border: none;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+}
+td:last-child {
+ border: none;
+ border-bottom-right-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.action-td {
+ text-align:right;
+}
+
+.text-field {
+ border-radius: 50px;
+ background-color: $plumViolet;
+ padding: 15px;
+ color: $plainWhite;
+ width: 80%;
+ border: none;
+ height: 20px;
+}
+
+.search-bar::placeholder {
+ color: $plainWhite;
+}
+
+.delete-btn {
+ border-radius: 50px;
+ border: none;
+ background-color: $coralRed;
+ color: $plainWhite;
+ height: 30px;
+ min-width: 150px;
+ text-transform: uppercase;
+}
+
+@keyframes spinner {
+ to {transform: rotate(360deg);}
+}
+
+.spinner:before {
+ content: '';
+ box-sizing: border-box;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 20px;
+ height: 20px;
+ margin-top: -10px;
+ margin-left: -10px;
+ border-radius: 50%;
+ border: 2px solid #ffffff;
+ border-top-color: #000000;
+ animation: spinner .8s linear infinite;
+}
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.spec.ts b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.spec.ts
new file mode 100644
index 00000000..80aa23b6
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InviteCodeRowComponent } from './invite-code-row.component';
+
+describe('InviteCodeRowComponent', () => {
+ let component: InviteCodeRowComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ InviteCodeRowComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(InviteCodeRowComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.ts b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.ts
new file mode 100644
index 00000000..99dc7e89
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/InviteCodeList/invite-code-row/invite-code-row.component.ts
@@ -0,0 +1,79 @@
+import {Component, EventEmitter, Input, OnInit} from '@angular/core';
+import { defaultInviteCode } from '../../../../interfaces/InviteCode';
+import {AdminSettings} from '../../../../../services/ap-settings.service';
+import {ApiService} from '../../../../../services/api.service';
+import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {ConfirmDialogComponent} from '../../../../core/confirm-dialog/confirm-dialog.component';
+
+/**
+ * This Component represents a row inside the invite codes list from the InviteCodeList component. It has an InviteCode Object as input.
+ * it shows all Information for the invite (code: string, expiration_date: string, max_usage_limitation: number, times_used: number)
+ * and gives also the possibility to delete the invite code from the server. Before the function deleteInviteCode is called the user is shown
+ * a warn dialog (another component) asking for confirmation, only when the user confirms, the code will be deleted.
+ */
+
+@Component({
+ selector: 'app-invite-code-row',
+ templateUrl: './invite-code-row.component.html',
+ styleUrls: ['./invite-code-row.component.scss']
+})
+export class InviteCodeRowComponent implements OnInit {
+
+ public loading = false;
+
+ public hostname = '[::1]';
+ public port = 3000;
+
+ constructor(
+ private adminSettings: AdminSettings,
+ private api: ApiService,
+ private dialog: MatDialog
+ ) {
+ }
+
+
+ ngOnInit(): void {
+ }
+
+ @Input() inviteCode = defaultInviteCode();
+ @Input() reload: EventEmitter = new EventEmitter();
+
+ public deleteInviteCode(): void {
+ this.loading = true;
+ this.api.updateRemoteEndpoint(`http://${this.hostname}:${this.port}`);
+ this.adminSettings.deleteInviteCode(this.inviteCode.id).then(response => {
+ this.loading = false;
+ this.reload.emit(null);
+ });
+ console.log('Deleted ' + this.inviteCode.id.toString());
+ }
+
+ /**
+ * This function will be called when pressing the delete button.
+ */
+
+ openDialog(): void {
+
+ const dialogConfig = new MatDialogConfig();
+
+ dialogConfig.disableClose = false;
+ dialogConfig.autoFocus = true;
+
+ dialogConfig.data = {
+ header: 'Deletion',
+ message: 'You are about to delete the invite Code \'' + this.inviteCode.code + '\'. This deletion can\'t be reversed',
+ confirmButton: 'Delete',
+ cancelButton: 'Cancel',
+ warn: true
+ };
+
+ const confirmDialog = this.dialog.open(ConfirmDialogComponent, dialogConfig);
+
+ confirmDialog.afterClosed().subscribe(result => {
+ if (result === true) {
+ this.deleteInviteCode();
+ }
+ });
+ }
+
+}
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.html b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.html
new file mode 100644
index 00000000..85ee2fc8
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.html
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.scss b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.scss
new file mode 100644
index 00000000..ac6d9e8c
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.scss
@@ -0,0 +1,7 @@
+.list{
+ margin-top: 300px;
+}
+
+.item {
+ margin-bottom: 60px;
+}
diff --git a/clients/desktop/src/app/admin/usersManagement/create-invite/create-invite.component.spec.ts b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.spec.ts
similarity index 100%
rename from clients/desktop/src/app/admin/usersManagement/create-invite/create-invite.component.spec.ts
rename to clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.spec.ts
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.ts b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.ts
new file mode 100644
index 00000000..4e128ef8
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-invite/create-invite.component.ts
@@ -0,0 +1,28 @@
+import {Component, EventEmitter, OnInit} from '@angular/core';
+
+/**
+ * This Component is a view component, it contains no functionality itself but it combines two other components: CreateNewInvite and InviteCodesList.
+ */
+
+@Component({
+ selector: 'app-create-invite',
+ templateUrl: './create-invite.component.html',
+ styleUrls: ['./create-invite.component.scss']
+})
+export class CreateInviteComponent implements OnInit {
+
+ constructor() { }
+
+ /**
+ * The reload attribute is important to make it possible triggering an event from a child component and passing it to the parent component.
+ * The EventEmitter is stored in this component and passed to the Child Components. Because both child components holding now the same EventEmitter changes
+ * from one component can be detected in the other component.
+ */
+
+ public reload: EventEmitter = new EventEmitter()
+
+ ngOnInit(): void {
+
+ }
+
+}
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.html b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.html
new file mode 100644
index 00000000..96925a26
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.scss b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.scss
new file mode 100644
index 00000000..c05adf65
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.scss
@@ -0,0 +1,113 @@
+@import "../../../../styles/colors";
+
+.table {
+ border-collapse: collapse;
+ width: 100%;
+ color: $plainWhite;
+}
+
+.column {
+ text-align: left;
+ min-width: 200px;
+}
+
+.label-row {
+ height: 30px;
+}
+
+.mat-form-field-infix {
+ padding: 0 !important;
+ border-top: 0 solid transparent !important;
+ display: none !important;
+}
+
+.text-field {
+ border-radius: 50px;
+ background-color: $plumViolet;
+ padding: 15px;
+ color: $plainWhite;
+ width: 80%;
+ border: none;
+ height: 20px;
+}
+
+.date-time-field {
+ border-radius: 50px;
+ background-color: $plumViolet;
+ margin-bottom: 4px;
+ color: $plainWhite;
+ width: 80%;
+ border: none;
+ padding: 0 15px 0 15px;
+ height: 50px;
+
+ ::ng-deep .mat-form-field-suffix .mat-icon-button .mat-datepicker-toggle-default-icon {
+ color: $plainWhite !important;
+ }
+
+ ::ng-deep .mat-form-field-suffix .mat-form-field-label {
+ color: white !important;
+ }
+}
+
+.date-time-field::placeholder {
+ color: $plainWhite;
+}
+
+
+.text-field::placeholder {
+ color: $plainWhite;
+}
+
+.save-btn {
+ border-radius: 50px;
+ border: none;
+ float: right;
+ background-color: $coralRed;
+ color: $plainWhite;
+ height: 50px;
+ min-width: 150px;
+ text-transform: uppercase;
+}
+
+.invite-field {
+ position: relative;
+
+ input {
+ width: 100%;
+ margin-right: 150px;
+ }
+
+ button {
+ position: absolute;
+ right: -16px;
+ top: 12px;
+ border-radius: 50px;
+ border: none;
+ background-color: $coralRed;
+ color: $plainWhite;
+ height: 32px;
+ min-width: 70px;
+ text-transform: uppercase;
+ }
+}
+
+@keyframes spinner {
+ to {transform: rotate(360deg);}
+}
+
+.spinner:before {
+ content: '';
+ box-sizing: border-box;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 20px;
+ height: 20px;
+ margin-top: -10px;
+ margin-left: -10px;
+ border-radius: 50%;
+ border: 2px solid #ffffff;
+ border-top-color: #000000;
+ animation: spinner .8s linear infinite;
+}
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.spec.ts b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.spec.ts
new file mode 100644
index 00000000..fa083de2
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateNewInviteComponent } from './create-new-invite.component';
+
+describe('CreateNewInviteComponent', () => {
+ let component: CreateNewInviteComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ CreateNewInviteComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CreateNewInviteComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.ts b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.ts
new file mode 100644
index 00000000..7fe48ef5
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/CreateInvites/create-new-invite/create-new-invite.component.ts
@@ -0,0 +1,57 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import { InviteCode, defaultInviteCode } from '../../../interfaces/InviteCode';
+import {AdminSettings} from '../../../../services/ap-settings.service';
+import {ApiService} from '../../../../services/api.service';
+import utils from '../../../utils/utils';
+import * as _ from 'lodash';
+
+/**
+ * This Component holds the functionality to create a new InviteCode and save it on the server. It has three fields:
+ *
+ * 1) Expiration Date: This field uses the ngx-mat-datetime package which adds the functionality of not choosing just a date but also a time.
+ * 2) Usage Limitation: A number indicating how often the invite code can be used. Optional, default is 0 and specify that the invite code has no usage limitation.
+ * 3) Invite Code: A string which will be used to when register onto the platform. A 10-character-long string (numbers and uc letters) can be generated using the generate button.
+ */
+
+
+@Component({
+ selector: 'app-create-new-invite',
+ templateUrl: './create-new-invite.component.html',
+ styleUrls: ['./create-new-invite.component.scss']
+})
+export class CreateNewInviteComponent implements OnInit {
+
+ public hostname = '[::1]';
+ public port = 3000;
+
+ constructor(
+ private adminSettings: AdminSettings,
+ private api: ApiService,
+ ) {
+ }
+ public inviteCode = defaultInviteCode()
+ public loading = false;
+ public minDate = new Date();
+
+
+ public genInvite(): void {
+ this.inviteCode.code = utils.generateRandomCode(10);
+ }
+
+ ngOnInit(): void {
+ }
+
+ @Input() reload: EventEmitter = new EventEmitter();
+
+ public addInviteCode(): void {
+ console.log(this.hostname);
+ this.loading = true;
+ this.api.updateRemoteEndpoint(`http://${this.hostname}:${this.port}`);
+ this.adminSettings.addInviteCode(this.inviteCode).then(response => {
+ this.loading = false;
+ this.inviteCode = defaultInviteCode();
+ this.reload.emit(null);
+ });
+ }
+
+}
diff --git a/clients/desktop/src/app/admin/UsersManagement/ReportSystem/ReportSettings/ReportReasons/report-reason-entry/report-reason-entry.component.html b/clients/desktop/src/app/admin/UsersManagement/ReportSystem/ReportSettings/ReportReasons/report-reason-entry/report-reason-entry.component.html
new file mode 100644
index 00000000..20f5f114
--- /dev/null
+++ b/clients/desktop/src/app/admin/UsersManagement/ReportSystem/ReportSettings/ReportReasons/report-reason-entry/report-reason-entry.component.html
@@ -0,0 +1,49 @@
+
diff --git a/clients/desktop/src/app/admin/security/security.component.scss b/clients/desktop/src/app/admin/security/security.component.scss
index 1d775987..b8d7d8d2 100644
--- a/clients/desktop/src/app/admin/security/security.component.scss
+++ b/clients/desktop/src/app/admin/security/security.component.scss
@@ -31,3 +31,4 @@
min-width: 3px;
background: $coralRed;
}
+
diff --git a/clients/desktop/src/app/admin/security/security.component.ts b/clients/desktop/src/app/admin/security/security.component.ts
index c801b21a..0b479ac1 100644
--- a/clients/desktop/src/app/admin/security/security.component.ts
+++ b/clients/desktop/src/app/admin/security/security.component.ts
@@ -1,6 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, KeyValueDiffer, OnInit} from '@angular/core';
import {AdminSettings} from '../../services/ap-settings.service';
import {ApiService} from '../../services/api.service';
+import { SecuritySettings, defaultSettings } from '../interfaces/SecuritySettings';
+import *as _ from 'lodash';
+
+/**
+ * This component give the admins of the SocialStuff server the possibility to change the behavior of the SocialStuff server in regards to the security standards.
+ * With the function getSettings which calls another function in the admin-panel service acting as a gateway to the backend, the component catch the current settings
+ * of the server and presents them with switch buttons to the user. The user is able to change the settings and sending them through the gateway to the backend.
+ * These settings will have influence on other functions asking the setting service for the current settings.
+ */
@Component({
selector: 'app-security',
@@ -8,33 +17,56 @@ import {ApiService} from '../../services/api.service';
styleUrls: ['./security.component.scss']
})
export class SecurityComponent implements OnInit {
- twoFactAuth: boolean;
- twoFactAuthPhone: boolean;
- twoFactAuthMail: boolean;
- confirmedMailOnly: boolean;
- individualPassReq: boolean;
- reqUpperCase: boolean;
- reqNumber: boolean;
- reqCharacter: boolean;
- ownRegex: boolean;
- reqRegex: boolean;
- invitesOnly: boolean;
- invitesOnlyByAdmin: boolean;
-
- public hostname = '127.0.0.1';
+
+ public settingsBackup = defaultSettings();
+ public settings = defaultSettings();
+ public loading = false;
+ public hostname = '[::1]';
public port = 3002;
constructor(
private adminSettings: AdminSettings,
private api: ApiService,
- ) { }
+ ) {
+ }
+
+ get detectedChanges(): boolean {
+ return !_.isEqual(this.settings, this.settingsBackup);
+ }
ngOnInit(): void {
- console.log(this.getCurrentSettings());
+ this.getSettings();
+ }
+
+ public getSettings(): any {
+ this.api.updateRemoteEndpoint(`http://${this.hostname}:${this.port}`);
+ return this.adminSettings.getSecuritySettings().then((setting: SecuritySettings) => {
+ this.settings = _.cloneDeep(setting);
+ this.settingsBackup = _.cloneDeep(setting);
+ console.log(this.settings);
+ }).catch(error => {
+ console.log(error);
+ });
}
- public getCurrentSettings(): any {
+ public saveSettings(): void {
+ this.loading = true;
this.api.updateRemoteEndpoint(`http://${this.hostname}:${this.port}`);
- return this.adminSettings.getSettings();
+ this.adminSettings.setSecuritySettings(this.settings).then(response => {
+ this.loading = false;
+ console.log(response);
+ this.settings = _.cloneDeep(response);
+ this.settingsBackup = _.cloneDeep(response);
+ });
+ }
+
+ public revertChanges(): void {
+ console.log(this.settingsBackup);
+ this.settings = _.cloneDeep(this.settingsBackup);
+ }
+
+ public printSettings(): void {
+ console.log('set', this.settings);
+ console.log('bu', this.settingsBackup);
}
}
diff --git a/clients/desktop/src/app/admin/settings-view/settings-view.component.ts b/clients/desktop/src/app/admin/settings-view/settings-view.component.ts
index 5e9d6c08..71d03804 100644
--- a/clients/desktop/src/app/admin/settings-view/settings-view.component.ts
+++ b/clients/desktop/src/app/admin/settings-view/settings-view.component.ts
@@ -1,5 +1,10 @@
import {Component, NgModule, OnInit} from '@angular/core';
+/**
+ * This component is the first component which will be loaded when login as an admin. It contains the Header the Navigation sidebar and a router-outlet.
+ * It does not contain any content by itself but instead the router-outlet will load components based on the url-path.
+ */
+
@Component({
selector: 'app-settings-view',
templateUrl: './settings-view.component.html',
@@ -7,6 +12,7 @@ import {Component, NgModule, OnInit} from '@angular/core';
})
export class SettingsViewComponent implements OnInit {
+
constructor() { }
ngOnInit(): void {
diff --git a/clients/desktop/src/app/admin/usersManagement/create-invite/create-invite.component.html b/clients/desktop/src/app/admin/usersManagement/create-invite/create-invite.component.html
deleted file mode 100644
index 417e12ce..00000000
--- a/clients/desktop/src/app/admin/usersManagement/create-invite/create-invite.component.html
+++ /dev/null
@@ -1 +0,0 @@
-