update dependencies, migrate subscribe, add submit type to buttons

2024-02-26 15:11:48 +01:00 · 2024-02-26 15:11:48 +01:00 · 31dc5e5c25
commit 31dc5e5c25
parent 43da1441d9
31 changed files with 4388 additions and 5047 deletions
--- a/angular.json
+++ b/angular.json
@ -39,7 +39,10 @@
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "allowedCommonJsDependencies": [
+              "moment"
+            ]
          },
          "configurations": {
            "production": {
@ -121,8 +124,9 @@
          }
        }
      }
-    }},
+    }
+  },
  "cli": {
    "analytics": false
  }
-}
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "bstlboard",
-  "version": "2.0.1",
+  "version": "2.1.0",
  "license": "AGPL3",
  "scripts": {
    "ng": "ng",
@ -12,35 +12,35 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^17.0.9",
-    "@angular/cdk": "^17.0.5",
-    "@angular/common": "^17.0.9",
-    "@angular/compiler": "^17.0.9",
-    "@angular/core": "^17.0.9",
-    "@angular/forms": "^17.0.9",
-    "@angular/material": "^17.0.5",
-    "@angular/material-moment-adapter": "^17.0.5",
-    "@angular/platform-browser": "^17.0.9",
-    "@angular/platform-browser-dynamic": "^17.0.9",
-    "@angular/router": "^17.0.9",
-    "@angular/service-worker": "^17.0.9",
+    "@angular/animations": "^17.2.2",
+    "@angular/cdk": "^17.2.1",
+    "@angular/common": "^17.2.2",
+    "@angular/compiler": "^17.2.2",
+    "@angular/core": "^17.2.2",
+    "@angular/forms": "^17.2.2",
+    "@angular/material": "^17.2.1",
+    "@angular/material-moment-adapter": "^17.2.1",
+    "@angular/platform-browser": "^17.2.2",
+    "@angular/platform-browser-dynamic": "^17.2.2",
+    "@angular/router": "^17.2.2",
+    "@angular/service-worker": "^17.2.2",
    "moment": "^2.30.1",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.2",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.14.4"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.10",
-    "@angular/cli": "^17.0.10",
-    "@angular/compiler-cli": "^17.0.9",
-    "@angular/localize": "^17.0.9",
+    "@angular-devkit/build-angular": "^17.2.1",
+    "@angular/cli": "^17.2.1",
+    "@angular/compiler-cli": "^17.2.2",
+    "@angular/localize": "^17.2.2",
    "@types/jasmine": "^5.1.4",
-    "jasmine-core": "~5.1.1",
-    "karma": "^6.4.2",
+    "jasmine-core": "~5.1.2",
+    "karma": "^6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.3.3"
  }
 }
--- a/src/app/auth/auth.guard.ts
+++ b/src/app/auth/auth.guard.ts
@ -48,28 +48,30 @@ export class AuthenticatedGuard implements CanActivate {
    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        const that = this;
        return this.authService.getAuth().then((data: any) => {
-            this.userService.get().subscribe((user: any) => {
-                let updateLocale = false;
-                let updateTheme = false;
-                let darktheme = 'false';
+            this.userService.get().subscribe({
+                next: (user: any) => {
+                    let updateLocale = false;
+                    let updateTheme = false;
+                    let darktheme = 'false';

-                if (user.darkTheme) {
-                    darktheme = 'true';
-                }
-
-                if (darktheme != localStorage.getItem("bstlboard.darkTheme")) {
-                    localStorage.setItem("bstlboard.darkTheme", darktheme);
-                    updateTheme = true;
-                }
-
-                if (this.i18nService.locales.indexOf(user.locale) != -1 && localStorage.getItem("bstlboard.locale") != user.locale) {
-                    if (this.i18nService.locale != user.locale) {
-                        localStorage.setItem("bstlboard.locale", user.locale);
-                        updateLocale = true;
+                    if (user.darkTheme) {
+                        darktheme = 'true';
+                    }
+
+                    if (darktheme != localStorage.getItem("bstlboard.darkTheme")) {
+                        localStorage.setItem("bstlboard.darkTheme", darktheme);
+                        updateTheme = true;
+                    }
+
+                    if (this.i18nService.locales.indexOf(user.locale) != -1 && localStorage.getItem("bstlboard.locale") != user.locale) {
+                        if (this.i18nService.locale != user.locale) {
+                            localStorage.setItem("bstlboard.locale", user.locale);
+                            updateLocale = true;
+                        }
+                    }
+                    if (updateLocale || updateTheme) {
+                        window.location.reload();
                    }
-                }
-                if (updateLocale || updateTheme) {
-                    window.location.reload();
                }
            });

--- a/src/app/pages/comment/comment.page.ts
+++ b/src/app/pages/comment/comment.page.ts
@ -7,14 +7,14 @@ import { CommentService } from '../../services/comment.service';
@Component({
  selector: 'page-comment',
  templateUrl: './comment.page.html',
-  styleUrls: [ './comment.page.scss' ]
+  styleUrls: ['./comment.page.scss']
 })
 export class PageComment implements OnInit {

  id: number;
  comment: any;
  notfound: boolean = false;
-  ignoreSubcomments: string[] = [ 'entry' ];
+  ignoreSubcomments: string[] = ['entry'];

  constructor(private commentService: CommentService,
    private route: ActivatedRoute) { }
@ -22,11 +22,14 @@ export class PageComment implements OnInit {
  ngOnInit(): void {
    this.id = +this.route.snapshot.paramMap.get('id');

-    this.commentService.getComment(this.id).subscribe((data) => {
-      this.comment = data;
-    }, (error) => {
-      if (error.status == 404) {
-        this.notfound = true;
+    this.commentService.getComment(this.id).subscribe({
+      next: (data) => {
+        this.comment = data;
+      },
+      error: (error) => {
+        if (error.status == 404) {
+          this.notfound = true;
+        }
      }
    })
  }
--- a/src/app/pages/entries/entries.page.ts
+++ b/src/app/pages/entries/entries.page.ts
@ -31,35 +31,39 @@ export class PageEntries implements OnInit, OnDestroy {
  ngOnInit(): void {
    this.boundRefresh = this.refresh.bind(this);
    this.boundUpdate = this.update.bind(this);
-    this.route.queryParams.subscribe(params => {
-      if (this.init) {
-        this.entries = { filter: {} };
-        if (params[ 'p' ]) {
-          this.entries.number = +params[ 'p' ] - 1;
-          if (this.entries.number < 0) {
-            this.entries.number = 0;
+    this.route.queryParams.subscribe({
+      next: (params) => {
+        if (this.init) {
+          this.entries = { filter: {} };
+          if (params['p']) {
+            this.entries.number = +params['p'] - 1;
+            if (this.entries.number < 0) {
+              this.entries.number = 0;
+            }
          }
-        }

-        if (params[ 's' ]) {
-          this.entries.size = +params[ 's' ];
-        }
-
-        if (params[ 'asc' ]) {
-          this.asc = true;
-        }
-
-        for (const param in params) {
-          if (param != 's' && param != 'p' && param != 'asc') {
-            this.entries.filter[ param ] = params[ param ];
+          if (params['s']) {
+            this.entries.size = +params['s'];
          }
-        }

-        this.settingsSubscription = this.settingsService.settings.subscribe((settings) => {
-          this.settings = settings;
-          this.refresh();
-          this.init = false;
-        })
+          if (params['asc']) {
+            this.asc = true;
+          }
+
+          for (const param in params) {
+            if (param != 's' && param != 'p' && param != 'asc') {
+              this.entries.filter[param] = params[param];
+            }
+          }
+
+          this.settingsSubscription = this.settingsService.settings.subscribe({
+            next: (settings) => {
+              this.settings = settings;
+              this.refresh();
+              this.init = false;
+            }
+          })
+        }
      }
    });
  }
@ -75,11 +79,14 @@ export class PageEntries implements OnInit, OnDestroy {

    const filter = JSON.parse(JSON.stringify(this.entries.filter || {}))
    this.entries.content = null;
-    this.fetch(this.entries.number || 0, this.entries.size || this.settings.pageSize, this.asc, this.entries.filter).subscribe((data: any) => {
-      this.entries = data;
-      this.entries.filter = filter;
-    }, (error) => {
-      this.entries = { error: error };
+    this.fetch(this.entries.number || 0, this.entries.size || this.settings.pageSize, this.asc, this.entries.filter).subscribe({
+      next: (data: any) => {
+        this.entries = data;
+        this.entries.filter = filter;
+      },
+      error: (error) => {
+        this.entries = { error: error };
+      }
    })

  }
@ -98,7 +105,7 @@ export class PageEntries implements OnInit, OnDestroy {

    if (this.entries.filter) {
      for (const param in this.entries.filter) {
-        params[ param ] = this.entries.filter[ param ];
+        params[param] = this.entries.filter[param];
      }
    }

@ -111,11 +118,13 @@ export class PageEntries implements OnInit, OnDestroy {
      });

    const filter = JSON.parse(JSON.stringify(this.entries.filter || {}))
-    this.fetch(event.pageIndex, event.pageSize, this.asc, this.entries.filter).subscribe((data: any) => {
-      this.entries = data;
-      this.entries.filter = filter;
-    }, (error) => {
-      this.entries = { error: error };
+    this.fetch(event.pageIndex, event.pageSize, this.asc, this.entries.filter).subscribe({
+      next: (data: any) => {
+        this.entries = data;
+        this.entries.filter = filter;
+      }, error: (error) => {
+        this.entries = { error: error };
+      }
    })
  }

--- a/src/app/pages/entry/edit/edit.page.html
+++ b/src/app/pages/entry/edit/edit.page.html
@ -46,10 +46,10 @@

      </mat-card-content>
      <mat-card-actions>
-        <button *ngIf="!working && !entry.id" mat-raised-button color="primary" [disabled]="form.invalid">
+        <button type="submit" *ngIf="!working && !entry.id" mat-raised-button color="primary" [disabled]="form.invalid">
          {{'submission.create' | i18n}}
        </button>
-        <button *ngIf="!working && entry.id" mat-raised-button color="primary" [disabled]="form.invalid">
+        <button type="submit" *ngIf="!working && entry.id" mat-raised-button color="primary" [disabled]="form.invalid">
          {{'submission.update' | i18n}}
        </button>
        <a *ngIf="success" mat-button color="primary" routerLink="/e/{{entry.id}}">{{'submission.success' | i18n}}</a>
--- a/src/app/pages/entry/edit/edit.page.ts
+++ b/src/app/pages/entry/edit/edit.page.ts
@ -11,14 +11,14 @@ import { Subscription } from 'rxjs';
@Component({
  selector: 'page-entry-edit',
  templateUrl: './edit.page.html',
-  styleUrls: [ './edit.page.scss' ]
+  styleUrls: ['./edit.page.scss']
 })
 export class PageEntryEdit implements OnInit, OnDestroy {

  id: number;
  entry: any;
-  entryTypes: string[] = [ 'LINK', 'DISCUSSION', 'QUESTION', 'INTERN' ];
-  entryType: string = this.entryTypes[ 0 ];
+  entryTypes: string[] = ['LINK', 'DISCUSSION', 'QUESTION', 'INTERN'];
+  entryType: string = this.entryTypes[0];
  notfound: boolean = false;
  working: boolean = false;
  success: boolean = false;
@ -37,40 +37,48 @@ export class PageEntryEdit implements OnInit, OnDestroy {

  ngOnInit(): void {
    this.form = this.formBuilder.group({
-      entryType: [ '', Validators.required ],
-      url: [ '', Validators.required ],
-      title: [ '', Validators.required ],
-      text: [ '', Validators.nullValidator ],
+      entryType: ['', Validators.required],
+      url: ['', Validators.required],
+      title: ['', Validators.required],
+      text: ['', Validators.nullValidator],
    });

-    this.settingsSubscription = this.settingsService.settings.subscribe((settings) => {
-      this.settings = settings;
+    this.settingsSubscription = this.settingsService.settings.subscribe({
+      next: (settings) => {
+        this.settings = settings;
+      }
    });

    this.form.get('entryType').setValue(this.entryType);

-    this.form.get('entryType').valueChanges.subscribe((value) => {
-      this.entryType = value;
-      switch (value) {
-        case 'LINK':
-          this.form.get('url').setValidators([ Validators.required ]);
-          this.form.get('text').setValidators([ Validators.nullValidator ]);
-          break;
-        default:
-          this.form.get('url').setValidators([ Validators.nullValidator ]);
-          this.form.get('text').setValidators([ Validators.required ]);
-          break;
+    this.form.get('entryType').valueChanges.subscribe({
+      next: (value) => {
+        this.entryType = value;
+        switch (value) {
+          case 'LINK':
+            this.form.get('url').setValidators([Validators.required]);
+            this.form.get('text').setValidators([Validators.nullValidator]);
+            break;
+          default:
+            this.form.get('url').setValidators([Validators.nullValidator]);
+            this.form.get('text').setValidators([Validators.required]);
+            break;
+        }
      }
    });


    this.form.get('url').valueChanges.pipe(
      debounceTime(800),
-      distinctUntilChanged()).subscribe((value) => {
-        if (value && !this.form.get('title').value) {
-          this.entriesService.titleHelper(value).subscribe((title: string) => {
-            this.form.get('title').setValue(title);
-          })
+      distinctUntilChanged()).subscribe({
+        next: (value) => {
+          if (value && !this.form.get('title').value) {
+            this.entriesService.titleHelper(value).subscribe({
+              next: (title: string) => {
+                this.form.get('title').setValue(title);
+              }
+            })
+          }
        }
      })

@ -85,21 +93,24 @@ export class PageEntryEdit implements OnInit, OnDestroy {
  refresh() {
    if (this.id) {
      this.form.get('entryType').disable();
-      this.entriesService.getEntry(this.id).subscribe((data) => {
-        this.entry = data;
-        this.entryType = this.entry.entryType;
-        this.form.get("entryType").setValue(this.entry.entryType);
-        this.form.get("url").setValue(this.entry.url);
-        this.form.get("title").setValue(this.entry.title);
-        this.form.get("text").setValue(this.entry.text);
-        if (!this.entry.metadata.edit) {
-          this.form.get("url").disable();
-          this.form.get("title").disable();
-          this.form.get("text").disable();
-        }
-      }, (error) => {
-        if (error.status == 404) {
-          this.notfound = true;
+      this.entriesService.getEntry(this.id).subscribe({
+        next: (data) => {
+          this.entry = data;
+          this.entryType = this.entry.entryType;
+          this.form.get("entryType").setValue(this.entry.entryType);
+          this.form.get("url").setValue(this.entry.url);
+          this.form.get("title").setValue(this.entry.title);
+          this.form.get("text").setValue(this.entry.text);
+          if (!this.entry.metadata.edit) {
+            this.form.get("url").disable();
+            this.form.get("title").disable();
+            this.form.get("text").disable();
+          }
+        },
+        error: (error) => {
+          if (error.status == 404) {
+            this.notfound = true;
+          }
        }
      })
    } else {
@ -110,7 +121,7 @@ export class PageEntryEdit implements OnInit, OnDestroy {
  }

  hasError(controlName: string): boolean {
-    return this.form.controls[ controlName ].errors != null;
+    return this.form.controls[controlName].errors != null;
  }

  onTitleFocus(event): void {
@ -129,19 +140,22 @@ export class PageEntryEdit implements OnInit, OnDestroy {
    this.entry.title = this.form.get("title").value;
    this.entry.text = this.form.get("text").value;

-    this.entriesService.create(this.entry).subscribe((data) => {
-      this.router.navigateByUrl('/');
-    }, (error) => {
-      this.working = false;
-      if (error.status == 422) {
-        let errors = {};
-        for (let code of error.error) {
-          errors[ code.field ] = errors[ code.field ] || {};
-          errors[ code.field ][ code.code ] = true;
-        }
+    this.entriesService.create(this.entry).subscribe({
+      next: (data) => {
+        this.router.navigateByUrl('/');
+      },
+      error: (error) => {
+        this.working = false;
+        if (error.status == 422) {
+          let errors = {};
+          for (let code of error.error) {
+            errors[code.field] = errors[code.field] || {};
+            errors[code.field][code.code] = true;
+          }

-        for (let code in errors) {
-          this.form.get(code).setErrors(errors[ code ]);
+          for (let code in errors) {
+            this.form.get(code).setErrors(errors[code]);
+          }
        }
      }
    })
@ -159,46 +173,51 @@ export class PageEntryEdit implements OnInit, OnDestroy {
      this.entry.title = this.form.get("title").value;
      this.entry.text = this.form.get("text").value;

-      this.entriesService.update(this.entry).subscribe((data) => {
-        this.entry = data;
-        this.working = false;
-        this.success = true;
-      }, (error) => {
-        this.working = false;
-        if (error.status == 403) {
-          this.snackBar.open("Error");
-        }
-        if (error.status == 422) {
-          let errors = {};
-          for (let code of error.error) {
-            errors[ code.field ] = errors[ code.field ] || {};
-            errors[ code.field ][ code.code ] = true;
+      this.entriesService.update(this.entry).subscribe({
+        next: (data) => {
+          this.entry = data;
+          this.working = false;
+          this.success = true;
+        },
+        error: (error) => {
+          this.working = false;
+          if (error.status == 403) {
+            this.snackBar.open("Error");
          }
+          if (error.status == 422) {
+            let errors = {};
+            for (let code of error.error) {
+              errors[code.field] = errors[code.field] || {};
+              errors[code.field][code.code] = true;
+            }

-          for (let code in errors) {
-            this.form.get(code).setErrors(errors[ code ]);
+            for (let code in errors) {
+              this.form.get(code).setErrors(errors[code]);
+            }
          }
        }
      })
    } else {
-      this.tagsService.setTags(this.entry.id, this.entry.tags).subscribe((data) => {
-        this.entry = data;
-        this.working = false;
-        this.success = true;
-      }, (error) => {
-        this.working = false;
-        if (error.status == 403) {
-          this.snackBar.open("Error");
-        }
-        if (error.status == 422) {
-          let errors = {};
-          for (let code of error.error) {
-            errors[ code.field ] = errors[ code.field ] || {};
-            errors[ code.field ][ code.code ] = true;
+      this.tagsService.setTags(this.entry.id, this.entry.tags).subscribe({
+        next: (data) => {
+          this.entry = data;
+          this.working = false;
+          this.success = true;
+        }, error: (error) => {
+          this.working = false;
+          if (error.status == 403) {
+            this.snackBar.open("Error");
          }
+          if (error.status == 422) {
+            let errors = {};
+            for (let code of error.error) {
+              errors[code.field] = errors[code.field] || {};
+              errors[code.field][code.code] = true;
+            }

-          for (let code in errors) {
-            this.form.get(code).setErrors(errors[ code ]);
+            for (let code in errors) {
+              this.form.get(code).setErrors(errors[code]);
+            }
          }
        }
      })
--- a/src/app/pages/entry/entry.page.ts
+++ b/src/app/pages/entry/entry.page.ts
@ -9,7 +9,7 @@ import { UiComments } from '../../ui/comments/comments.ui';
@Component({
  selector: 'page-entry',
  templateUrl: './entry.page.html',
-  styleUrls: [ './entry.page.scss' ]
+  styleUrls: ['./entry.page.scss']
 })
 export class PageEntry implements OnInit {

@ -29,12 +29,15 @@ export class PageEntry implements OnInit {
  }

  refresh() {
-    this.entriesService.getEntry(this.id).subscribe((data) => {
-      this.entry = data;
-    }, (error) => {
-      if (error.status == 404) {
-        this.entry = false;
-        this.notfound = true;
+    this.entriesService.getEntry(this.id).subscribe({
+      next: (data) => {
+        this.entry = data;
+      },
+      error: (error) => {
+        if (error.status == 404) {
+          this.entry = false;
+          this.notfound = true;
+        }
      }
    })
  }
--- a/src/app/pages/login/login.page.ts
+++ b/src/app/pages/login/login.page.ts
@ -8,7 +8,7 @@ import { AuthService } from '../../services/auth.service';
@Component({
  selector: 'page-login',
  templateUrl: './login.page.html',
-  styleUrls: [ './login.page.scss' ]
+  styleUrls: ['./login.page.scss']
 })
 export class PageLogin implements OnInit {

@ -27,30 +27,34 @@ export class PageLogin implements OnInit {
    private route: ActivatedRoute) { }

  async ngOnInit() {
-    this.route.queryParams.subscribe(params => {
-      if (params[ 'all' ] || params[ 'all' ] == '') {
-        this.internalLogin = true;
-      }
-      if (params[ 'target' ]) {
-        this.targetRoute = params[ 'target' ];
-        this.router.navigate([], { queryParams: { target: null }, queryParamsHandling: 'merge', replaceUrl: true });
-      }
-      if (params[ 'error' ] || params[ 'error' ] == '') {
-        this.loginInvalid = true;
-        this.router.navigate([], { queryParams: { error: null }, queryParamsHandling: 'merge', replaceUrl: true });
-      }
-      if (params[ 'externalError' ] || params[ 'externalError' ] == '') {
-        this.externalLoginInvalid = true;
-        this.router.navigate([], { queryParams: { externalError: null }, queryParamsHandling: 'merge', replaceUrl: true });
+    this.route.queryParams.subscribe({
+      next: (params) => {
+        if (params['all'] || params['all'] == '') {
+          this.internalLogin = true;
+        }
+        if (params['target']) {
+          this.targetRoute = params['target'];
+          this.router.navigate([], { queryParams: { target: null }, queryParamsHandling: 'merge', replaceUrl: true });
+        }
+        if (params['error'] || params['error'] == '') {
+          this.loginInvalid = true;
+          this.router.navigate([], { queryParams: { error: null }, queryParamsHandling: 'merge', replaceUrl: true });
+        }
+        if (params['externalError'] || params['externalError'] == '') {
+          this.externalLoginInvalid = true;
+          this.router.navigate([], { queryParams: { externalError: null }, queryParamsHandling: 'merge', replaceUrl: true });
+        }
      }
    });

-    this.authService.getExternal().subscribe((data: any[]) => {
-      this.externals = data;
-      const autologinClient = localStorage.getItem("bstlboard.autologin");
-      for (let client of this.externals) {
-        if (client.id == autologinClient) {
-          window.location.href = this.apiUrl + "/" + client.loginUrl;
+    this.authService.getExternal().subscribe({
+      next: (data: any[]) => {
+        this.externals = data;
+        const autologinClient = localStorage.getItem("bstlboard.autologin");
+        for (let client of this.externals) {
+          if (client.id == autologinClient) {
+            window.location.href = this.apiUrl + "/" + client.loginUrl;
+          }
        }
      }
    })
--- a/src/app/pages/moderation/comments/moderation.comments.page.ts
+++ b/src/app/pages/moderation/comments/moderation.comments.page.ts
@ -19,19 +19,23 @@ export class PageModerationComments implements OnInit {
  }

  refresh(): void {
-    this.moderationService.getFlaggedComments(this.comments.number || 0, this.comments.size || 30).subscribe((data: any) => {
-      this.comments = data;
-    }, (error) => { })
+    this.moderationService.getFlaggedComments(this.comments.number || 0, this.comments.size || 30).subscribe({
+      next: (data: any) => {
+        this.comments = data;
+      }
+    })
  }

  showMore() {
    const oldContent: any[] = this.comments.content;
-    this.moderationService.getFlaggedComments(this.comments.number + 1, this.comments.size).subscribe((data) => {
-      this.comments = data;
-      for (let comment of this.comments.content) {
-        oldContent.push(comment);
+    this.moderationService.getFlaggedComments(this.comments.number + 1, this.comments.size).subscribe({
+      next: (data) => {
+        this.comments = data;
+        for (let comment of this.comments.content) {
+          oldContent.push(comment);
+        }
+        this.comments.content = oldContent;
      }
-      this.comments.content = oldContent;
    })
  }
 }
--- a/src/app/pages/search/search.page.ts
+++ b/src/app/pages/search/search.page.ts
@ -44,13 +44,17 @@ export class PageSearch implements OnInit {
    })

    this.searchFormControl.valueChanges.pipe(
-      debounceTime(300)).subscribe((value: string) => {
-        this.refresh();
+      debounceTime(300)).subscribe({
+        next: (value: string) => {
+          this.refresh();
+        }
      })

-    this.settingsSubscription = this.settingsService.settings.subscribe((settings) => {
-      this.settings = settings;
-      this.refresh();
+    this.settingsSubscription = this.settingsService.settings.subscribe({
+      next: (settings) => {
+        this.settings = settings;
+        this.refresh();
+      }
    })
  }

@ -79,10 +83,13 @@ export class PageSearch implements OnInit {
      });

    this.results.content = null;
-    this.searchService.search(this.searchFormControl.value || " ", this.searchType, 0, this.results.size || this.settings.pageSize, this.asc, this.byDate).subscribe((data: any) => {
-      this.results = data;
-    }, (error) => {
-      this.results = { error: error };
+    this.searchService.search(this.searchFormControl.value || " ", this.searchType, 0, this.results.size || this.settings.pageSize, this.asc, this.byDate).subscribe({
+      next: (data: any) => {
+        this.results = data;
+      },
+      error: (error) => {
+        this.results = { error: error };
+      }
    })
  }

@ -106,10 +113,13 @@ export class PageSearch implements OnInit {
        queryParamsHandling: 'merge'
      });

-    this.searchService.search(this.searchFormControl.value, this.searchType, event.pageIndex, event.pageSize, this.asc, this.byDate).subscribe((data: any) => {
-      this.results = data;
-    }, (error) => {
-      this.results = { error: error };
+    this.searchService.search(this.searchFormControl.value, this.searchType, event.pageIndex, event.pageSize, this.asc, this.byDate).subscribe({
+      next: (data: any) => {
+        this.results = data;
+      },
+      error: (error) => {
+        this.results = { error: error };
+      }
    })
  }
 }
--- a/src/app/pages/settings/settings.page.html
+++ b/src/app/pages/settings/settings.page.html
@ -79,7 +79,7 @@
        </mat-form-field>
      </mat-card-content>
      <mat-card-actions>
-        <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+        <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
          {{'settings.update' | i18n}}
        </button>
        <a *ngIf="success" mat-button color="primary">{{'settings.success' | i18n}}</a>
--- a/src/app/pages/settings/settings.page.ts
+++ b/src/app/pages/settings/settings.page.ts
@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
@Component({
  selector: 'page-settings',
  templateUrl: './settings.page.html',
-  styleUrls: [ './settings.page.scss' ]
+  styleUrls: ['./settings.page.scss']
 })
 export class PageSettings implements OnInit, OnDestroy {

@ -27,33 +27,37 @@ export class PageSettings implements OnInit, OnDestroy {

  ngOnInit(): void {
    this.form = this.formBuilder.group({
-      username: [ { disabled: true }, Validators.nullValidator ],
-      email: [ '', Validators.nullValidator ],
-      about: [ '', Validators.nullValidator ],
-      gravity: [ '', Validators.nullValidator ],
-      entryDelay: [ '', Validators.nullValidator ],
-      commentDelay: [ '', Validators.nullValidator ],
-      pageSize: [ '', Validators.nullValidator ],
+      username: [{ disabled: true }, Validators.nullValidator],
+      email: ['', Validators.nullValidator],
+      about: ['', Validators.nullValidator],
+      gravity: ['', Validators.nullValidator],
+      entryDelay: ['', Validators.nullValidator],
+      commentDelay: ['', Validators.nullValidator],
+      pageSize: ['', Validators.nullValidator],
    });

    this.form.get('username').disable();

-    this.userService.get().subscribe(user => {
-      this.user = user;
-      if (!this.user.settings) {
-        this.user.settings = {};
-      }
-      this.form.get('username').setValue(this.user.username);
-      this.form.get('email').setValue(this.user.email);
-      this.form.get('about').setValue(this.user.about);
+    this.userService.get().subscribe({
+      next: (user) => {
+        this.user = user;
+        if (!this.user.settings) {
+          this.user.settings = {};
+        }
+        this.form.get('username').setValue(this.user.username);
+        this.form.get('email').setValue(this.user.email);
+        this.form.get('about').setValue(this.user.about);

-      this.settingsSubscription = this.settingsService.settings.subscribe((settings) => {
-        this.settings = settings;
-        this.form.get('gravity').setValue(this.user.settings.gravity || this.settings.defaultGravity);
-        this.form.get('entryDelay').setValue(this.user.settings.entryDelay || this.settings.defaultEntryDelay);
-        this.form.get('commentDelay').setValue(this.user.settings.commentDelay || this.settings.defaultCommentDelay);
-        this.form.get('pageSize').setValue(this.user.settings.pageSize || this.settings.defaultPageSize);
-      });
+        this.settingsSubscription = this.settingsService.settings.subscribe({
+          next: (settings) => {
+            this.settings = settings;
+            this.form.get('gravity').setValue(this.user.settings.gravity || this.settings.defaultGravity);
+            this.form.get('entryDelay').setValue(this.user.settings.entryDelay || this.settings.defaultEntryDelay);
+            this.form.get('commentDelay').setValue(this.user.settings.commentDelay || this.settings.defaultCommentDelay);
+            this.form.get('pageSize').setValue(this.user.settings.pageSize || this.settings.defaultPageSize);
+          }
+        });
+      }
    })
  }

@ -62,7 +66,7 @@ export class PageSettings implements OnInit, OnDestroy {
  }

  hasError(controlName: string): boolean {
-    return this.form.controls[ controlName ].errors != null;
+    return this.form.controls[controlName].errors != null;
  }

  resetGravity(): void {
@ -124,25 +128,28 @@ export class PageSettings implements OnInit, OnDestroy {
      this.user.settings.pageSize = this.form.get('pageSize').value;
    }

-    this.userService.update(this.user).subscribe((data) => {
-      this.user = data;
-      if (!this.user.settings) {
-        this.user.settings = {};
-      }
-      this.working = false;
-      this.success = true;
-      this.settingsService.getSettings();
-    }, (error) => {
-      this.working = false;
-      if (error.status == 422) {
-        let errors = {};
-        for (let code of error.error) {
-          errors[ code.field ] = errors[ code.field ] || {};
-          errors[ code.field ][ code.code ] = true;
+    this.userService.update(this.user).subscribe({
+      next: (data) => {
+        this.user = data;
+        if (!this.user.settings) {
+          this.user.settings = {};
        }
+        this.working = false;
+        this.success = true;
+        this.settingsService.getSettings();
+      },
+      error: (error) => {
+        this.working = false;
+        if (error.status == 422) {
+          let errors = {};
+          for (let code of error.error) {
+            errors[code.field] = errors[code.field] || {};
+            errors[code.field][code.code] = true;
+          }

-        for (let code in errors) {
-          this.form.get(code).setErrors(errors[ code ]);
+          for (let code in errors) {
+            this.form.get(code).setErrors(errors[code]);
+          }
        }
      }
    })
--- a/src/app/pages/unavailable/unavailable.page.ts
+++ b/src/app/pages/unavailable/unavailable.page.ts
@ -5,7 +5,7 @@ import { Router, ActivatedRoute } from '@angular/router';
@Component({
  selector: 'page-unavailable',
  templateUrl: './unavailable.page.html',
-  styleUrls: [ './unavailable.page.scss' ]
+  styleUrls: ['./unavailable.page.scss']
 })
 export class PageUnavailable implements OnInit {

@ -17,10 +17,12 @@ export class PageUnavailable implements OnInit {
    private route: ActivatedRoute) { }

  ngOnInit(): void {
-    this.route.queryParams.subscribe(params => {
-      if (params[ 'target' ]) {
-        this.targetRoute = params[ 'target' ];
-        this.router.navigate([], { queryParams: { target: null }, queryParamsHandling: 'merge', skipLocationChange: true });
+    this.route.queryParams.subscribe({
+      next: (params) => {
+        if (params['target']) {
+          this.targetRoute = params['target'];
+          this.router.navigate([], { queryParams: { target: null }, queryParamsHandling: 'merge', skipLocationChange: true });
+        }
      }
    });

@ -30,7 +32,7 @@ export class PageUnavailable implements OnInit {
    if (!this.targetRoute || this.targetRoute === "unavailable" || this.targetRoute === "/unavailable") {
      this.location.back;
    } else {
-      this.router.navigate([ this.targetRoute ]);
+      this.router.navigate([this.targetRoute]);
    }
  }

--- a/src/app/pages/user/user.page.ts
+++ b/src/app/pages/user/user.page.ts
@ -8,7 +8,7 @@ import { UserService } from '../../services/user.service';
@Component({
  selector: 'page-user',
  templateUrl: './user.page.html',
-  styleUrls: [ './user.page.scss' ]
+  styleUrls: ['./user.page.scss']
 })
 export class PageUser implements OnInit {

@ -21,11 +21,14 @@ export class PageUser implements OnInit {

  ngOnInit(): void {
    this.username = this.route.snapshot.paramMap.get('username');
-    this.userService.getUser(this.username).subscribe((data) => {
-      this.user = data;
-    }, (error) => {
-      if (error.status == 422) {
-        this.notfound = true;
+    this.userService.getUser(this.username).subscribe({
+      next: (data) => {
+        this.user = data;
+      },
+      error: (error) => {
+        if (error.status == 422) {
+          this.notfound = true;
+        }
      }
    })
  }
--- a/src/app/pages/user/usercomments/usercomments.page.ts
+++ b/src/app/pages/user/usercomments/usercomments.page.ts
@ -9,7 +9,7 @@ import { SettingsService } from '../../../services/settings.service';
@Component({
  selector: 'page-usercomments',
  templateUrl: './usercomments.page.html',
-  styleUrls: [ './usercomments.page.scss' ]
+  styleUrls: ['./usercomments.page.scss']
 })
 export class PageUserComments implements OnInit, OnDestroy {

@ -17,18 +17,22 @@ export class PageUserComments implements OnInit, OnDestroy {
  username: string;
  comments: any = {};
  init: boolean = true;
-  ignore: string[] = [ "author" ];
+  ignore: string[] = ["author"];
  settingsSubscription: Subscription;

  constructor(private settingsService: SettingsService, private commentService: CommentService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.username = this.route.snapshot.paramMap.get('username');
-    this.settingsSubscription = this.settingsService.settings.subscribe((settings) => {
-      this.settings = settings;
-      this.commentService.getByUser(this.username, this.comments.number || 0, this.comments.size || this.settings.pageSize, this.ignore).subscribe((data: any) => {
-        this.comments = data;
-      }, (error) => { })
+    this.settingsSubscription = this.settingsService.settings.subscribe({
+      next: (settings) => {
+        this.settings = settings;
+        this.commentService.getByUser(this.username, this.comments.number || 0, this.comments.size || this.settings.pageSize, this.ignore).subscribe({
+          next: (data: any) => {
+            this.comments = data;
+          }
+        })
+      }
    })
  }

@ -38,12 +42,14 @@ export class PageUserComments implements OnInit, OnDestroy {

  showMore() {
    const oldContent: any[] = this.comments.content;
-    this.commentService.getByUser(this.username, this.comments.number + 1, this.comments.size, this.ignore).subscribe((data) => {
-      this.comments = data;
-      for (let comment of this.comments.content) {
-        oldContent.push(comment);
+    this.commentService.getByUser(this.username, this.comments.number + 1, this.comments.size, this.ignore).subscribe({
+      next: (data) => {
+        this.comments = data;
+        for (let comment of this.comments.content) {
+          oldContent.push(comment);
+        }
+        this.comments.content = oldContent;
      }
-      this.comments.content = oldContent;
    })
  }
 }
--- a/src/app/pages/view/edit/edit.page.html
+++ b/src/app/pages/view/edit/edit.page.html
@ -70,7 +70,7 @@

      </mat-card-content>
      <mat-card-actions class="flex wrap fill">
-        <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+        <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
          <mat-icon>save</mat-icon> {{ (view.id ? 'views.update' : 'views.create') | i18n}}
        </button>
        <a mat-button color="primary" routerLink="/v/{{view.name}}" *ngIf="view.id">{{ 'views.goTo' |
--- a/src/app/pages/view/edit/edit.page.ts
+++ b/src/app/pages/view/edit/edit.page.ts
@ -13,16 +13,16 @@ import { MatDialog } from '@angular/material/dialog';
@Component({
  selector: 'page-view-edit',
  templateUrl: './edit.page.html',
-  styleUrls: [ './edit.page.scss' ]
+  styleUrls: ['./edit.page.scss']
 })
 export class PageViewEdit implements OnInit, OnDestroy {

  name: string;
  view: any;
-  entryTypes: string[] = [ undefined, 'LINK', 'DISCUSSION', 'QUESTION', 'INTERN' ];
-  entryType: string = this.entryTypes[ 0 ];
-  sortings: string[] = [ 'NEW', 'TOP', 'HOT', 'LAST' ];
-  sorting: string = this.sortings[ 0 ];
+  entryTypes: string[] = [undefined, 'LINK', 'DISCUSSION', 'QUESTION', 'INTERN'];
+  entryType: string = this.entryTypes[0];
+  sortings: string[] = ['NEW', 'TOP', 'HOT', 'LAST'];
+  sorting: string = this.sortings[0];
  notfound: boolean = false;
  working: boolean = false;
  form: FormGroup;
@ -44,34 +44,44 @@ export class PageViewEdit implements OnInit, OnDestroy {

  ngOnInit(): void {
    this.form = this.formBuilder.group({
-      name: [ '', Validators.required ],
-      entryType: [ '', Validators.nullValidator ],
-      sorting: [ '', Validators.required ],
-      index: [ '', Validators.required ],
+      name: ['', Validators.required],
+      entryType: ['', Validators.nullValidator],
+      sorting: ['', Validators.required],
+      index: ['', Validators.required],
    });

-    this.settingsSubscription = this.settingsService.settings.subscribe((settings) => {
-      this.settings = settings;
+    this.settingsSubscription = this.settingsService.settings.subscribe({
+      next: (settings) => {
+        this.settings = settings;
+      }
    });

-    this.route.params.subscribe((params) => {
-      if (params.name) {
-        this.form.get('name').setValue(params.name);
+    this.route.params.subscribe({
+      next: (params) => {
+        if (params.name) {
+          this.form.get('name').setValue(params.name);

-        this.form.get('entryType').setValue(this.entryType);
-        this.form.get('entryType').valueChanges.subscribe((value) => {
-          this.entryType = value;
-        });
-        this.form.get('sorting').setValue(this.sorting);
-        this.form.get('sorting').valueChanges.subscribe((value) => {
-          this.sorting = value;
-        });
-        this.form.get('index').valueChanges.subscribe((value) => {
-          this.view.index = value;
-        });
+          this.form.get('entryType').setValue(this.entryType);
+          this.form.get('entryType').valueChanges.subscribe({
+            next: (value) => {
+              this.entryType = value;
+            }
+          });
+          this.form.get('sorting').setValue(this.sorting);
+          this.form.get('sorting').valueChanges.subscribe({
+            next: (value) => {
+              this.sorting = value;
+            }
+          });
+          this.form.get('index').valueChanges.subscribe({
+            next: (value) => {
+              this.view.index = value;
+            }
+          });

-        this.name = params.name;
-        this.refresh();
+          this.name = params.name;
+          this.refresh();
+        }
      }
    })

@ -84,17 +94,20 @@ export class PageViewEdit implements OnInit, OnDestroy {

  refresh() {
    if (this.name) {
-      this.viewService.getView(this.name, undefined).subscribe((data) => {
-        this.view = data;
-        this.entryType = this.view.entryType;
-        this.sorting = this.view.sorting;
-        this.form.get("name").setValue(this.view.name);
-        this.form.get("entryType").setValue(this.view.entryType);
-        this.form.get("sorting").setValue(this.view.sorting);
-        this.form.get("index").setValue(this.view.index);
-      }, (error) => {
-        if (error.status == 404) {
-          this.notfound = true;
+      this.viewService.getView(this.name, undefined).subscribe({
+        next: (data) => {
+          this.view = data;
+          this.entryType = this.view.entryType;
+          this.sorting = this.view.sorting;
+          this.form.get("name").setValue(this.view.name);
+          this.form.get("entryType").setValue(this.view.entryType);
+          this.form.get("sorting").setValue(this.view.sorting);
+          this.form.get("index").setValue(this.view.index);
+        },
+        error: (error) => {
+          if (error.status == 404) {
+            this.notfound = true;
+          }
        }
      })
    } else {
@ -111,7 +124,7 @@ export class PageViewEdit implements OnInit, OnDestroy {
  }

  hasError(controlName: string): boolean {
-    return this.form.controls[ controlName ].errors != null;
+    return this.form.controls[controlName].errors != null;
  }


@ -127,28 +140,31 @@ export class PageViewEdit implements OnInit, OnDestroy {
    this.view.sorting = this.sorting;
    this.view.index = this.form.get("index").value;

-    this.viewService.createOrUpdate(this.view).subscribe((data) => {
-      this.view = data;
-      this.working = false;
-      this.snackBar.open(this.i18n.get('views.success', []), this.i18n.get("close", []), {
-        duration: 3000
-      });
-      this.router.navigateByUrl('/v/' + this.view.name);
-      this.viewService.getViews();
-    }, (error) => {
-      this.working = false;
-      if (error.status == 403) {
-        this.snackBar.open("Error");
-      }
-      if (error.status == 422) {
-        let errors = {};
-        for (let code of error.error) {
-          errors[ code.field ] = errors[ code.field ] || {};
-          errors[ code.field ][ code.code ] = true;
+    this.viewService.createOrUpdate(this.view).subscribe({
+      next: (data) => {
+        this.view = data;
+        this.working = false;
+        this.snackBar.open(this.i18n.get('views.success', []), this.i18n.get("close", []), {
+          duration: 3000
+        });
+        this.router.navigateByUrl('/v/' + this.view.name);
+        this.viewService.getViews();
+      },
+      error: (error) => {
+        this.working = false;
+        if (error.status == 403) {
+          this.snackBar.open("Error");
        }
+        if (error.status == 422) {
+          let errors = {};
+          for (let code of error.error) {
+            errors[code.field] = errors[code.field] || {};
+            errors[code.field][code.code] = true;
+          }

-        for (let code in errors) {
-          this.form.get(code).setErrors(errors[ code ]);
+          for (let code in errors) {
+            this.form.get(code).setErrors(errors[code]);
+          }
        }
      }
    })
@ -158,18 +174,22 @@ export class PageViewEdit implements OnInit, OnDestroy {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'views.confirmDelete',
-        'args': [ this.view.name ]
+        'args': [this.view.name]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.working = true;
-        this.viewService.deleteView(this.view.name).subscribe(() => {
-          this.working = false;
-          this.router.navigateByUrl('/');
-          this.viewService.getViews();
-        })
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.working = true;
+          this.viewService.deleteView(this.view.name).subscribe({
+            next: () => {
+              this.working = false;
+              this.router.navigateByUrl('/');
+              this.viewService.getViews();
+            }
+          })
+        }
      }
    });
  }
--- a/src/app/pages/view/view.page.ts
+++ b/src/app/pages/view/view.page.ts
@ -9,7 +9,7 @@ import { PageEntries } from '../entries/entries.page';
@Component({
  selector: 'page-view',
  templateUrl: './view.page.html',
-  styleUrls: [ './view.page.scss' ]
+  styleUrls: ['./view.page.scss']
 })
 export class PageView implements OnInit, OnDestroy {

@ -27,27 +27,32 @@ export class PageView implements OnInit, OnDestroy {
  }

  ngOnInit(): void {
-    this.paramsSub = this.route.params.subscribe((params: Params) => {
-      this.name = params[ 'name' ];
-      this.username = params[ 'username' ];
+    this.paramsSub = this.route.params.subscribe({
+      next: (params: Params) => {
+        this.name = params['name'];
+        this.username = params['username'];

-      if (!this.name) {
-        this.viewService.getViews().then((data: any) => {
-          const views = data.content;
-          if (!views || views.length == 0) {
-            this.router.navigate([ '/v' ], { queryParams: { name: this.name }, queryParamsHandling: 'merge' });
-          } else {
-            this.router.navigateByUrl('/v/' + views[ 0 ].name);
-          }
-        })
-      } else {
-        this.viewService.getView(this.name, this.username).subscribe((data) => {
-          if (this.entries) {
-            this.entries.refresh();
-          }
-        }, (error) => {
-          this.router.navigate([ '/v' ], { queryParams: { name: this.name }, queryParamsHandling: 'merge' });
-        })
+        if (!this.name) {
+          this.viewService.getViews().then((data: any) => {
+            const views = data.content;
+            if (!views || views.length == 0) {
+              this.router.navigate(['/v'], { queryParams: { name: this.name }, queryParamsHandling: 'merge' });
+            } else {
+              this.router.navigateByUrl('/v/' + views[0].name);
+            }
+          })
+        } else {
+          this.viewService.getView(this.name, this.username).subscribe({
+            next: (data) => {
+              if (this.entries) {
+                this.entries.refresh();
+              }
+            },
+            error: (error) => {
+              this.router.navigate(['/v'], { queryParams: { name: this.name }, queryParamsHandling: 'merge' });
+            }
+          })
+        }
      }
    });
    this.boundFetch = this.fetch.bind(this);
--- a/src/app/ui/comment/comment.ui.html
+++ b/src/app/ui/comment/comment.ui.html
@ -74,7 +74,7 @@
          {{'comment.text.error' | i18n}}
        </mat-error>
      </mat-form-field>
-      <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+      <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
        {{'comment.save' | i18n}}
      </button>
    </form>
--- a/src/app/ui/comment/comment.ui.ts
+++ b/src/app/ui/comment/comment.ui.ts
@ -13,7 +13,7 @@ import { UiComments } from '../comments/comments.ui';
@Component({
  selector: 'ui-comment',
  templateUrl: './comment.ui.html',
-  styleUrls: [ './comment.ui.scss' ]
+  styleUrls: ['./comment.ui.scss']
 })
 export class UiComment implements OnInit {

@ -29,6 +29,7 @@ export class UiComment implements OnInit {
  @Input() actions: boolean = true;
  @ViewChild('subcomments') comments: UiComments;
  form: FormGroup;
+  working: boolean = false;

  constructor(
    private authService: AuthService,
@ -40,45 +41,61 @@ export class UiComment implements OnInit {
    public dialog: MatDialog) { }

  ngOnInit(): void {
-    this.authService.auth.subscribe((auth: any) => {
-      if (auth && auth.authorities) {
-        this.author = auth.username == this.comment.author;
-        for (let role of auth.authorities) {
-          if (role.authority == 'ROLE_ADMIN' || role.authority == 'ROLE_MOD') {
-            this.moderator = true;
+    this.authService.auth.subscribe({
+      next: (auth: any) => {
+        if (auth && auth.authorities) {
+          this.author = auth.username == this.comment.author;
+          for (let role of auth.authorities) {
+            if (role.authority == 'ROLE_ADMIN' || role.authority == 'ROLE_MOD') {
+              this.moderator = true;
+            }
          }
        }
      }
    })

    this.form = this.formBuilder.group({
-      text: [ '', Validators.required ],
+      text: ['', Validators.required],
    });

    this.form.get('text').setValue(this.comment.text);
  }

  voteUp() {
-    this.voteService.voteCommentUp(this.comment.id).subscribe((result) => {
-      this.commentService.getComment(this.comment.id, this.ignore).subscribe((data) => {
-        this.comment = data;
-      })
+    this.voteService.voteCommentUp(this.comment.id).subscribe({
+      next: () => {
+        this.commentService.getComment(this.comment.id, this.ignore).subscribe({
+          next: (data) => {
+            this.comment = data;
+          }
+        })
+      }
    });
  }

  voteDown() {
-    this.voteService.voteCommentDown(this.comment.id).subscribe((result) => {
-      this.commentService.getComment(this.comment.id, this.ignore).subscribe((data) => {
-        this.comment = data;
-      })
+    this.voteService.voteCommentDown(this.comment.id).subscribe({
+      next: () => {
+        this.commentService.getComment(this.comment.id, this.ignore).subscribe({
+          next: (data) => {
+            this.comment = data;
+          }
+        })
+      }
    });
  }

  unvote() {
-    this.voteService.unvoteComment(this.comment.id).subscribe((result) => {
-      this.commentService.getComment(this.comment.id, this.ignore).subscribe((data) => {
-        this.comment = data;
-      })
+    this.voteService.unvoteComment(this.comment.id).subscribe({
+      next: (
+
+      ) => {
+        this.commentService.getComment(this.comment.id, this.ignore).subscribe({
+          next: (data) => {
+            this.comment = data;
+          }
+        })
+      }
    });
  }

@ -86,16 +103,20 @@ export class UiComment implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'comment.confirmFlag',
-        'args': [ this.comment.text, this.comment.author ]
+        'args': [this.comment.text, this.comment.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.flagService.flagComment(this.comment.id).subscribe((result) => {
-          this.comment.metadata.flag = false;
-          this.comment.metadata.unflag = true;
-        });
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.flagService.flagComment(this.comment.id).subscribe({
+            next: () => {
+              this.comment.metadata.flag = false;
+              this.comment.metadata.unflag = true;
+            }
+          });
+        }
      }
    });
  }
@ -104,16 +125,20 @@ export class UiComment implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'comment.confirmUnflag',
-        'args': [ this.comment.text, this.comment.author ]
+        'args': [this.comment.text, this.comment.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.flagService.unflagComment(this.comment.id).subscribe((result) => {
-          this.comment.metadata.flag = true;
-          this.comment.metadata.unflag = false;
-        });
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.flagService.unflagComment(this.comment.id).subscribe({
+            next: () => {
+              this.comment.metadata.flag = true;
+              this.comment.metadata.unflag = false;
+            }
+          });
+        }
      }
    });
  }
@ -142,16 +167,28 @@ export class UiComment implements OnInit {
  }

  hasError(controlName: string): boolean {
-    return this.form.controls[ controlName ].errors != null;
+    return this.form.controls[controlName].errors != null;
  }

  update(): void {
+
+    if (this.working) {
+      return;
+    }
+
    if (this.canEdit()) {
+      this.working = true;
      this.comment.text = this.form.get('text').value;
      this.form.get('text').disable();
-      this.commentService.update(this.comment).subscribe((data) => {
-        this.comment = data;
-        this.comment.metadata.edit = false;
+      this.commentService.update(this.comment).subscribe({
+        next: (data) => {
+          this.comment = data;
+          this.comment.metadata.edit = false;
+          this.working = false;
+        },
+        error: () => {
+          this.working = false;
+        }
      })
    }
  }
@ -160,15 +197,19 @@ export class UiComment implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'comment.confirmDelete',
-        'args': [ this.comment.text, this.comment.author ]
+        'args': [this.comment.text, this.comment.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.commentService.delete(this.comment.id).subscribe((result: any) => {
-          this.change && this.change()
-        })
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.commentService.delete(this.comment.id).subscribe({
+            next: () => {
+              this.change && this.change()
+            }
+          })
+        }
      }
    });
  }
@ -177,15 +218,19 @@ export class UiComment implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'moderation.comment.confirmDelete',
-        'args': [ this.comment.text, this.comment.author ]
+        'args': [this.comment.text, this.comment.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.moderationService.deleteComment(this.comment.id).subscribe((result: any) => {
-          this.change && this.change()
-        })
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.moderationService.deleteComment(this.comment.id).subscribe({
+            next: () => {
+              this.change && this.change()
+            }
+          })
+        }
      }
    });
  }
@ -194,15 +239,19 @@ export class UiComment implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'moderation.comment.confirmUnflag',
-        'args': [ this.comment.text, this.comment.author ]
+        'args': [this.comment.text, this.comment.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.moderationService.unflagComment(this.comment.id).subscribe((result: any) => {
-          this.change && this.change();
-        })
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.moderationService.unflagComment(this.comment.id).subscribe({
+            next: () => {
+              this.change && this.change();
+            }
+          })
+        }
      }
    });
  }
--- a/src/app/ui/commentcount/commentcount.ui.ts
+++ b/src/app/ui/commentcount/commentcount.ui.ts
@ -4,7 +4,7 @@ import { CommentService } from '../../services/comment.service';
@Component({
  selector: 'ui-commentcount',
  templateUrl: './commentcount.ui.html',
-  styleUrls: [ './commentcount.ui.scss' ]
+  styleUrls: ['./commentcount.ui.scss']
 })
 export class UiCommentCount implements OnInit {

@ -16,12 +16,16 @@ export class UiCommentCount implements OnInit {

  ngOnInit(): void {
    if (this.target && this.parent) {
-      this.commentService.countParent(this.target, this.parent).subscribe((data) => {
-        this.count = +data;
+      this.commentService.countParent(this.target, this.parent).subscribe({
+        next: (data) => {
+          this.count = +data;
+        }
      });
    } else if (this.target) {
-      this.commentService.count(this.target).subscribe((data) => {
-        this.count = +data;
+      this.commentService.count(this.target).subscribe({
+        next: (data) => {
+          this.count = +data;
+        }
      });
    }
  }
--- a/src/app/ui/commentform/commentform.ui.html
+++ b/src/app/ui/commentform/commentform.ui.html
@ -8,7 +8,7 @@
    </mat-error>
  </mat-form-field>

-  <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
+  <button type="submit" *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
    {{'comment.create' | i18n}}
  </button>

--- a/src/app/ui/commentform/commentform.ui.ts
+++ b/src/app/ui/commentform/commentform.ui.ts
@ -6,7 +6,7 @@ import { Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'ui-commentform',
  templateUrl: './commentform.ui.html',
-  styleUrls: [ './commentform.ui.scss' ]
+  styleUrls: ['./commentform.ui.scss']
 })
 export class UiCommentForm implements OnInit {

@ -22,23 +22,32 @@ export class UiCommentForm implements OnInit {

  ngOnInit(): void {
    this.form = this.formBuilder.group({
-      text: [ '', Validators.required ],
+      text: ['', Validators.required],
    });
  }

  hasError(controlName: string): boolean {
-    return this.form.controls[ controlName ].errors != null;
+    return this.form.controls[controlName].errors != null;
  }

  create(): void {
+    if (this.working) {
+      return;
+    }
    const comment: any = {};
    comment.target = this.target;
    comment.parent = this.parent;
    comment.text = this.form.get("text").value;
-
-    this.commentService.create(comment).subscribe((data) => {
-      this.formDirective.resetForm();
-      this.replyCommentEvent.emit(data);
+    this.working = true;
+    this.commentService.create(comment).subscribe({
+      next: (data) => {
+        this.formDirective.resetForm();
+        this.replyCommentEvent.emit(data);
+        this.working = false;
+      },
+      error: () => {
+        this.working = false;
+      }
    });
  }
 }
--- a/src/app/ui/comments/comments.ui.ts
+++ b/src/app/ui/comments/comments.ui.ts
@ -7,7 +7,7 @@ import { SettingsService } from '../../services/settings.service';
@Component({
  selector: 'ui-comments',
  templateUrl: './comments.ui.html',
-  styleUrls: [ './comments.ui.scss' ]
+  styleUrls: ['./comments.ui.scss']
 })
 export class UiComments implements OnInit, OnDestroy {

@ -25,9 +25,11 @@ export class UiComments implements OnInit, OnDestroy {

  ngOnInit(): void {
    this.boundRefresh = this.refresh.bind(this);
-    this.settingsSubscription = this.settingsService.settings.subscribe((settings) => {
-      this.settings = settings;
-      this.refresh();
+    this.settingsSubscription = this.settingsService.settings.subscribe({
+      next: (settings) => {
+        this.settings = settings;
+        this.refresh();
+      }
    })
  }

@ -37,12 +39,16 @@ export class UiComments implements OnInit, OnDestroy {

  refresh(): void {
    if (this.parent) {
-      this.commentService.getNewByParent(this.target, this.parent, 0, this.settings.pageSize, this.ignore).subscribe((data) => {
-        this.comments = data;
+      this.commentService.getNewByParent(this.target, this.parent, 0, this.settings.pageSize, this.ignore).subscribe({
+        next: (data) => {
+          this.comments = data;
+        }
      })
    } else {
-      this.commentService.getNew(this.target, 0, this.settings.pageSize, this.ignore).subscribe((data) => {
-        this.comments = data;
+      this.commentService.getNew(this.target, 0, this.settings.pageSize, this.ignore).subscribe({
+        next: (data) => {
+          this.comments = data;
+        }
      })
    }
  }
@ -63,20 +69,24 @@ export class UiComments implements OnInit, OnDestroy {
  showMore() {
    const oldContent: any[] = this.comments.content;
    if (this.parent) {
-      this.commentService.getNewByParent(this.target, this.parent, this.comments.number + 1, this.comments.size, this.ignore).subscribe((data) => {
-        this.comments = data;
-        for (let comment of this.comments.content) {
-          oldContent.push(comment);
+      this.commentService.getNewByParent(this.target, this.parent, this.comments.number + 1, this.comments.size, this.ignore).subscribe({
+        next: (data) => {
+          this.comments = data;
+          for (let comment of this.comments.content) {
+            oldContent.push(comment);
+          }
+          this.comments.content = oldContent;
        }
-        this.comments.content = oldContent;
      })
    } else {
-      this.commentService.getNew(this.target, this.comments.number + 1, this.comments.size, this.ignore).subscribe((data) => {
-        this.comments = data;
-        for (let comment of this.comments.content) {
-          oldContent.push(comment);
+      this.commentService.getNew(this.target, this.comments.number + 1, this.comments.size, this.ignore).subscribe({
+        next: (data) => {
+          this.comments = data;
+          for (let comment of this.comments.content) {
+            oldContent.push(comment);
+          }
+          this.comments.content = oldContent;
        }
-        this.comments.content = oldContent;
      })
    }
  }
--- a/src/app/ui/entry/entry.ui.ts
+++ b/src/app/ui/entry/entry.ui.ts
@ -13,7 +13,7 @@ import { ActivatedRoute, Router } from '@angular/router';
@Component({
  selector: 'ui-entry',
  templateUrl: './entry.ui.html',
-  styleUrls: [ './entry.ui.scss' ]
+  styleUrls: ['./entry.ui.scss']
 })
 export class UiEntry implements OnInit {

@ -37,11 +37,13 @@ export class UiEntry implements OnInit {
    private route: ActivatedRoute) { }

  ngOnInit(): void {
-    this.authService.auth.subscribe((auth: any) => {
-      if (auth && auth.authorities) {
-        for (let role of auth.authorities) {
-          if (role.authority == 'ROLE_ADMIN' || role.authority == 'ROLE_MOD') {
-            this.moderator = true;
+    this.authService.auth.subscribe({
+      next: (auth: any) => {
+        if (auth && auth.authorities) {
+          for (let role of auth.authorities) {
+            if (role.authority == 'ROLE_ADMIN' || role.authority == 'ROLE_MOD') {
+              this.moderator = true;
+            }
          }
        }
      }
@ -62,34 +64,44 @@ export class UiEntry implements OnInit {
  }

  voteUp() {
-    this.voteService.voteEntryUp(this.entry.id).subscribe((result) => {
-      this.change && this.change();
+    this.voteService.voteEntryUp(this.entry.id).subscribe({
+      next: () => {
+        this.change && this.change();
+      }
    });
  }

  voteDown() {
-    this.voteService.voteEntryDown(this.entry.id).subscribe((result) => {
-      this.change && this.change();
+    this.voteService.voteEntryDown(this.entry.id).subscribe({
+      next: () => {
+        this.change && this.change();
+      }
    });
  }

  addBookmark() {
-    this.bookmarksService.addEntry(this.entry.id).subscribe((result) => {
-      this.entry.metadata.bookmark = false;
-      this.entry.metadata.removeBookmark = true;
+    this.bookmarksService.addEntry(this.entry.id).subscribe({
+      next: () => {
+        this.entry.metadata.bookmark = false;
+        this.entry.metadata.removeBookmark = true;
+      }
    });
  }

  removeBookmark() {
-    this.bookmarksService.removeEntry(this.entry.id).subscribe((result) => {
-      this.entry.metadata.bookmark = true;
-      this.entry.metadata.removeBookmark = false;
+    this.bookmarksService.removeEntry(this.entry.id).subscribe({
+      next: () => {
+        this.entry.metadata.bookmark = true;
+        this.entry.metadata.removeBookmark = false;
+      }
    });
  }

  unvote() {
-    this.voteService.unvoteEntry(this.entry.id).subscribe((result) => {
-      this.change && this.change();
+    this.voteService.unvoteEntry(this.entry.id).subscribe({
+      next: () => {
+        this.change && this.change();
+      }
    });
  }

@ -97,16 +109,20 @@ export class UiEntry implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'entry.confirmFlag',
-        'args': [ this.entry.title, this.entry.author ]
+        'args': [this.entry.title, this.entry.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.flagService.flagEntry(this.entry.id).subscribe((result) => {
-          this.entry.metadata.flag = false;
-          this.entry.metadata.unflag = true;
-        });
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.flagService.flagEntry(this.entry.id).subscribe({
+            next: () => {
+              this.entry.metadata.flag = false;
+              this.entry.metadata.unflag = true;
+            }
+          });
+        }
      }
    });
  }
@ -115,16 +131,20 @@ export class UiEntry implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'entry.confirmUnflag',
-        'args': [ this.entry.title, this.entry.author ]
+        'args': [this.entry.title, this.entry.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.flagService.unflagEntry(this.entry.id).subscribe((result) => {
-          this.entry.metadata.unflag = false;
-          this.entry.metadata.flag = true;
-        });
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.flagService.unflagEntry(this.entry.id).subscribe({
+            next: () => {
+              this.entry.metadata.unflag = false;
+              this.entry.metadata.flag = true;
+            }
+          });
+        }
      }
    });
  }
@ -133,16 +153,20 @@ export class UiEntry implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'entry.confirmDelete',
-        'args': [ this.entry.title, this.entry.author ]
+        'args': [this.entry.title, this.entry.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.entriesService.delete(this.entry.id).subscribe((result: any) => {
-          this.entry = null;
-          this.change && this.change();
-        })
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.entriesService.delete(this.entry.id).subscribe({
+            next: () => {
+              this.entry = null;
+              this.change && this.change();
+            }
+          })
+        }
      }
    });
  }
@ -151,16 +175,20 @@ export class UiEntry implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'moderation.entry.confirmDelete',
-        'args': [ this.entry.title, this.entry.author ]
+        'args': [this.entry.title, this.entry.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.moderationService.deleteEntry(this.entry.id).subscribe((result: any) => {
-          this.entry = null;
-          this.change && this.change();
-        })
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.moderationService.deleteEntry(this.entry.id).subscribe({
+            next: () => {
+              this.entry = null;
+              this.change && this.change();
+            }
+          })
+        }
      }
    });
  }
@ -169,15 +197,19 @@ export class UiEntry implements OnInit {
    const dialogRef = this.dialog.open(ConfirmDialog, {
      data: {
        'label': 'moderation.entry.confirmUnflag',
-        'args': [ this.entry.title, this.entry.author ]
+        'args': [this.entry.title, this.entry.author]
      }
    })

-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.moderationService.unflagEntry(this.entry.id).subscribe((result: any) => {
-          this.change && this.change();
-        })
+    dialogRef.afterClosed().subscribe({
+      next: (result) => {
+        if (result) {
+          this.moderationService.unflagEntry(this.entry.id).subscribe({
+            next: () => {
+              this.change && this.change();
+            }
+          })
+        }
      }
    });
  }
--- a/src/app/ui/main/main.ui.ts
+++ b/src/app/ui/main/main.ui.ts
@ -48,11 +48,13 @@ export class UiMain {
    private _adapter: DateAdapter<any>, private swUpdate: SwUpdate) {
    iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));

-    this.swUpdate.versionUpdates.subscribe(evt => {
-      if (evt.type == 'VERSION_READY') {
-        this.hasUpdate = true;
-      } else if (evt.type == 'VERSION_INSTALLATION_FAILED') {
-        console.error(`Failed to install version '${evt.version.hash}': ${evt.error}`);
+    this.swUpdate.versionUpdates.subscribe({
+      next: (evt) => {
+        if (evt.type == 'VERSION_READY') {
+          this.hasUpdate = true;
+        } else if (evt.type == 'VERSION_INSTALLATION_FAILED') {
+          console.error(`Failed to install version '${evt.version.hash}': ${evt.error}`);
+        }
      }
    })

@ -68,15 +70,18 @@ export class UiMain {
    this.datetimeformat = this.i18n.get('format.datetime', []);
    this.currentLocale = this.i18n.getLocale();
    this.locales = this.i18n.getLocales();
-    this.authService.auth.subscribe(auth => {
-      this.authenticated = true;
-      for (let role of auth.authorities) {
-        if (role.authority == 'ROLE_ADMIN' || role.authority == 'ROLE_MOD') {
-          this.moderator = true;
+    this.authService.auth.subscribe({
+      next: (auth) => {
+        this.authenticated = true;
+        for (let role of auth.authorities) {
+          if (role.authority == 'ROLE_ADMIN' || role.authority == 'ROLE_MOD') {
+            this.moderator = true;
+          }
        }
+      },
+      error: (error) => {
+        this.authenticated = false;
      }
-    }, (error) => {
-      this.authenticated = false;
    })

    this._adapter.setLocale(this.currentLocale);
@ -102,11 +107,15 @@ export class UiMain {
    localStorage.setItem("bstlboard.locale", locale);

    if (this.authenticated) {
-      this.userService.get().subscribe((user: any) => {
-        user.locale = locale;
-        this.userService.update(user).subscribe(() => {
-          window.location.reload();
-        })
+      this.userService.get().subscribe({
+        next: (user: any) => {
+          user.locale = locale;
+          this.userService.update(user).subscribe({
+            next: () => {
+              window.location.reload();
+            }
+          })
+        }
      });
    } else {
      window.location.reload();
@ -140,11 +149,15 @@ export class UiMain {
    localStorage.setItem("bstlboard.darkTheme", this.darkTheme ? "true" : "false");

    if (this.authenticated) {
-      this.userService.get().subscribe((user: any) => {
-        user.darkTheme = this.darkTheme;
-        this.userService.update(user).subscribe(() => {
-          window.location.reload();
-        })
+      this.userService.get().subscribe({
+        next: (user: any) => {
+          user.darkTheme = this.darkTheme;
+          this.userService.update(user).subscribe({
+            next: () => {
+              window.location.reload();
+            }
+          })
+        }
      });
    } else {
      window.location.reload();
@ -154,10 +167,12 @@ export class UiMain {

  logout() {
    localStorage.removeItem("bstlboard.autologin");
-    this.authService.logout().subscribe(data => {
-      this.router.navigate([""]).then(() => {
-        window.location.reload();
-      });
+    this.authService.logout().subscribe({
+      next: () => {
+        this.router.navigate([""]).then(() => {
+          window.location.reload();
+        });
+      }
    })
  }

@ -185,27 +200,33 @@ export class UiMain {
  }

  touchEvents(): void {
-    fromEvent(document, 'touchstart').subscribe((event: TouchEvent) => {
-      if (event.touches[0]) {
-        this.touchStartX = event.touches[0].screenX;
+    fromEvent(document, 'touchstart').subscribe({
+      next: (event: TouchEvent) => {
+        if (event.touches[0]) {
+          this.touchStartX = event.touches[0].screenX;
+        }
      }
    })

-    fromEvent(document, 'touchmove').subscribe((event: TouchEvent) => {
-      if (event.touches[0]) {
-        this.touchX = event.touches[0].screenX;
+    fromEvent(document, 'touchmove').subscribe({
+      next: (event: TouchEvent) => {
+        if (event.touches[0]) {
+          this.touchX = event.touches[0].screenX;
+        }
      }
    })

-    fromEvent(document, 'touchend').subscribe((event: TouchEvent) => {
-      if (this.touchX != 0) {
-        const touchDiff = this.touchStartX - this.touchX;
-        this.touchStartX = 0;
-        this.touchX = 0;
-        if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.opened) {
-          this.opened = true;
-        } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.opened) {
-          this.opened = false;
+    fromEvent(document, 'touchend').subscribe({
+      next: () => {
+        if (this.touchX != 0) {
+          const touchDiff = this.touchStartX - this.touchX;
+          this.touchStartX = 0;
+          this.touchX = 0;
+          if (touchDiff < 0 && touchDiff < (this.touchThresh * -1) && !this.opened) {
+            this.opened = true;
+          } else if (touchDiff > 0 && touchDiff > this.touchThresh && this.opened) {
+            this.opened = false;
+          }
        }
      }
    })
--- a/src/app/ui/points/points.ui.ts
+++ b/src/app/ui/points/points.ui.ts
@ -4,7 +4,7 @@ import { VoteService } from '../../services/vote.service';
@Component({
  selector: 'ui-points',
  templateUrl: './points.ui.html',
-  styleUrls: [ './points.ui.scss' ]
+  styleUrls: ['./points.ui.scss']
 })
 export class UiPoints implements OnInit {

@ -16,12 +16,16 @@ export class UiPoints implements OnInit {

  ngOnInit(): void {
    if (this.type == 'e') {
-      this.voteService.getEntryPoints(this.target).subscribe((data) => {
-        this.count = +data;
+      this.voteService.getEntryPoints(this.target).subscribe({
+        next: (data) => {
+          this.count = +data;
+        }
      });
    } else if (this.type == 'c') {
-      this.voteService.getCommentPoints(this.target).subscribe((data) => {
-        this.count = +data;
+      this.voteService.getCommentPoints(this.target).subscribe({
+        next: (data) => {
+          this.count = +data;
+        }
      });
    }
  }
--- a/src/app/ui/viewmenu/viewmenu.ui.ts
+++ b/src/app/ui/viewmenu/viewmenu.ui.ts
@ -20,12 +20,16 @@ export class UiViewMenu implements OnInit {
  }

  ngOnInit(): void {
-    this.settingsSubscription = this.settingsService.settings.subscribe((settings) => {
-      this.settings = settings;
-      this.viewService.views.subscribe((data: any) => {
-        this.views = data.content;
-      })
-      this.viewService.getViews();
+    this.settingsSubscription = this.settingsService.settings.subscribe({
+      next: (settings) => {
+        this.settings = settings;
+        this.viewService.views.subscribe({
+          next: (data: any) => {
+            this.views = data.content;
+          }
+        })
+        this.viewService.getViews();
+      }
    })
  }

--- a/src/app/utils/urltext.pipe.ts
+++ b/src/app/utils/urltext.pipe.ts
@ -1,15 +1,18 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'urltext' })
 export class UrlTextPipe implements PipeTransform {

  httpPattern = /(\b(https?:\/\/)([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]))/ig;
-  wwwPattern =/(^|[^\/>])(www\.[\S]+(\b|$))/gim;
+  wwwPattern = /(^|[^\/>])(www\.[\S]+(\b|$))/gim;

-  transform(value: string): any {
+  constructor(private santisizer: DomSanitizer) { }
+
+  transform(value: string): SafeHtml {
    value = value.replace(this.httpPattern, '<a href="$1" target="_blank">$3</a>');
    value = value.replace(this.wwwPattern, '$1<a target="_blank" href="https://$2">$2</a>');
-    return value;
+    return this.santisizer.bypassSecurityTrustHtml(value);
  }
 }

@ -23,7 +26,7 @@ export class UrlBasePipe implements PipeTransform {
      return '';
    }

-    const parts = value.split( '/' )
+    const parts = value.split('/')

    if (parts.length < 3) {
      return '';