Remove more deprecated dependencies

backend/package.json

@@ -35,7 +35,7 @@
     "@nestjs/serve-static": "^4.0.2",
     "@nestjs/throttler": "^6.2.1",
     "@nestjs/typeorm": "^10.0.2",
-    "bcrypt": "^5.1.1",
+    "bcrypt-ts": "^5.0.2",
     "bmp-img": "^1.3.0",
     "cors": "^2.8.5",
     "fastify": "^4.28.1",
@@ -65,7 +65,6 @@
     "@nestjs/cli": "^10.4.5",
     "@nestjs/schematics": "^10.2.3",
     "@nestjs/testing": "^10.4.6",
-    "@types/bcrypt": "^5.0.2",
     "@types/cors": "^2.8.17",
     "@types/ms": "^0.7.34",
     "@types/multer": "^1.4.12",

backend/src/collections/user-db/user-db.service.ts

@@ -1,13 +1,13 @@
 import { Injectable, Logger } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import * as bcrypt from 'bcrypt';
+import * as bcrypt from 'bcrypt-ts';
 import { SysPreference } from 'picsur-shared/dist/dto/sys-preferences.enum';
 import {
-    AsyncFailable,
-    Fail,
-    FT,
-    HasFailed,
-    HasSuccess,
+  AsyncFailable,
+  Fail,
+  FT,
+  HasFailed,
+  HasSuccess,
 } from 'picsur-shared/dist/types/failable';
 import { FindResult } from 'picsur-shared/dist/types/find-result';
 import { makeUnique } from 'picsur-shared/dist/util/unique';
@@ -15,13 +15,13 @@ import { Repository } from 'typeorm';
 import { EUserBackend } from '../../database/entities/users/user.entity.js';
 import { Permissions } from '../../models/constants/permissions.const.js';
 import {
-    DefaultRolesList,
-    SoulBoundRolesList,
+  DefaultRolesList,
+  SoulBoundRolesList,
 } from '../../models/constants/roles.const.js';
 import {
-    ImmutableUsersList,
-    LockedLoginUsersList,
-    UndeletableUsersList,
+  ImmutableUsersList,
+  LockedLoginUsersList,
+  UndeletableUsersList,
 } from '../../models/constants/special-users.const.js';
 import { GetCols } from '../../util/collection.js';
 import { SysPreferenceDbService } from '../preference-db/sys-preference-db.service.js';

frontend/package.json

@@ -17,21 +17,18 @@
   "devDependencies": {
     "@angular-builders/custom-webpack": "^18.0.0",
     "@angular-devkit/build-angular": "^18.2.10",
-    "@angular/animations": "^18.2.9",
+    "@angular/animations": "^18.2.10",
     "@angular/cdk": "^18.2.10",
     "@angular/cli": "^18.2.10",
-    "@angular/common": "^18.2.9",
-    "@angular/compiler": "^18.2.9",
-    "@angular/compiler-cli": "^18.2.9",
-    "@angular/core": "^18.2.9",
-    "@angular/forms": "^18.2.9",
+    "@angular/common": "^18.2.10",
+    "@angular/compiler": "^18.2.10",
+    "@angular/compiler-cli": "^18.2.10",
+    "@angular/core": "^18.2.10",
+    "@angular/forms": "^18.2.10",
     "@angular/material": "^18.2.10",
-    "@angular/platform-browser": "^18.2.9",
-    "@angular/platform-browser-dynamic": "^18.2.9",
-    "@angular/router": "^18.2.9",
-    "@babel/cli": "^7.25.9",
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
+    "@angular/platform-browser": "^18.2.10",
+    "@angular/platform-browser-dynamic": "^18.2.10",
+    "@angular/router": "^18.2.10",
     "@fontsource/roboto": "^5.1.0",
     "@leteu/jwt-decoder": "^1.0.4",
     "@ng-web-apis/common": "^4.11.1",
@@ -51,7 +48,6 @@
     "fuse.js": "^7.0.0",
     "material-icons": "^1.13.12",
     "moment": "^2.30.1",
-    "ng-mat-select-infinite-scroll": "^4.0.0",
     "ngx-auto-unsubscribe-decorator": "^1.1.0",
     "ngx-moment": "^6.0.2",
     "picsur-shared": "workspace:^",
@@ -62,7 +58,7 @@
     "webpack": "^5.95.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "zod": "^3.23.8",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.14.10"
   },
   "dependencies": {
     "@ngx-dropzone/cdk": "^18.1.1"

frontend/src/app/components/infinite-select/infinite-select.directive.ts

@@ -0,0 +1,108 @@
+import {
+  AfterViewInit,
+  Directive,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { MatSelect } from '@angular/material/select';
+import { fromEvent, Subject } from 'rxjs';
+import { debounceTime, takeUntil, tap } from 'rxjs/operators';
+
+/** The height of the select items in `em` units. */
+const SELECT_ITEM_HEIGHT_EM = 3;
+
+@Directive({
+  selector: '[msInfiniteScroll]',
+})
+export class MatSelectInfiniteScrollDirective
+  implements OnInit, OnDestroy, AfterViewInit
+{
+  @Input() threshold = '15%';
+  @Input() debounceTime = 150;
+  @Input() complete!: boolean;
+  @Output() infiniteScroll = new EventEmitter<void>();
+
+  private panel!: Element;
+  private thrPx = 0;
+  private thrPc = 0;
+  private singleOptionHeight = SELECT_ITEM_HEIGHT_EM;
+
+  private destroyed$ = new Subject<boolean>();
+
+  constructor(
+    private matSelect: MatSelect,
+    private ngZone: NgZone,
+  ) {}
+
+  ngOnInit() {
+    this.evaluateThreshold();
+  }
+
+  ngAfterViewInit() {
+    this.matSelect.openedChange
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((opened) => {
+        if (opened) {
+          this.panel = this.matSelect.panel.nativeElement;
+          this.singleOptionHeight = this.getSelectItemHeightPx();
+          this.registerScrollListener();
+        }
+      });
+  }
+
+  ngOnDestroy() {
+    this.destroyed$.next(true);
+    this.destroyed$.complete();
+  }
+
+  evaluateThreshold() {
+    if (this.threshold.lastIndexOf('%') > -1) {
+      this.thrPx = 0;
+      this.thrPc = parseFloat(this.threshold) / 100;
+    } else {
+      this.thrPx = parseFloat(this.threshold);
+      this.thrPc = 0;
+    }
+  }
+
+  registerScrollListener() {
+    fromEvent(this.panel, 'scroll')
+      .pipe(
+        takeUntil(this.destroyed$),
+        debounceTime(this.debounceTime),
+        tap((event) => {
+          this.handleScrollEvent(event);
+        }),
+      )
+      .subscribe();
+  }
+
+  handleScrollEvent(event: any) {
+    this.ngZone.runOutsideAngular(() => {
+      if (this.complete) {
+        return;
+      }
+      const countOfRenderedOptions = this.matSelect.options.length;
+      const infiniteScrollDistance =
+        this.singleOptionHeight * countOfRenderedOptions;
+      const threshold =
+        this.thrPc !== 0 ? infiniteScrollDistance * this.thrPc : this.thrPx;
+
+      const scrolledDistance = this.panel.clientHeight + event.target.scrollTop;
+
+      if (scrolledDistance + threshold >= infiniteScrollDistance) {
+        this.ngZone.run(() => this.infiniteScroll.emit());
+      }
+    });
+  }
+
+  getSelectItemHeightPx(): number {
+    return (
+      parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM
+    );
+  }
+}

frontend/src/app/components/infinite-select/infinite-select.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSelectInfiniteScrollDirective } from './infinite-select.directive';
+
+
+@NgModule({
+  declarations: [MatSelectInfiniteScrollDirective],
+  imports: [
+    MatSelectModule,
+  ],
+  exports: [MatSelectInfiniteScrollDirective],
+})
+export default class MatSelectInfiniteScrollModule {}

frontend/src/app/routes/settings/sharex/settings-sharex.module.ts

@@ -4,10 +4,10 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
-import { MatSelectInfiniteScrollModule } from 'ng-mat-select-infinite-scroll';
+import MatSelectInfiniteScrollModule from '../../../components/infinite-select/infinite-select.module';
+import { ErrorManagerModule } from '../../../util/error-manager/error-manager.module';
 import { SettingsShareXComponent } from './settings-sharex.component';
 import { SettingsShareXRoutingModule } from './settings-sharex.routing.module';
-import { ErrorManagerModule } from '../../../util/error-manager/error-manager.module';
 
 @NgModule({
   declarations: [SettingsShareXComponent],