Extract system settings to seperate module

backend/src/config/early/filestorage.config.service.ts

@@ -1,7 +1,6 @@
 import { S3ClientConfig } from '@aws-sdk/client-s3';
 import { Injectable, Logger } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
-import { resolve } from 'path';
 import { ParseString } from 'picsur-shared/dist/util/parse-simple';
 import { EnvPrefix, GithubUrl } from '../config.static';
 
@@ -54,12 +53,10 @@ export class FileStorageConfigService {
   }
 
   public getLocalPath(): string {
-    const path = ParseString(
+    return ParseString(
       this.configService.get(`${FSEnvPrefix}LOCAL_PATH`),
       '/data',
     );
-    // Convert to absolute path
-    return resolve(path);
   }
 
   public getS3Config(): S3ClientConfig {

frontend/src/app/components/partial-sys-pref/partial-sys-pref.component.html

@@ -0,0 +1,15 @@
+<ng-container *ngFor="let category of preferences | async">
+  <h2 *ngIf="category.category !== null">{{ category.title }}</h2>
+  <div class="row">
+    <ng-container *ngFor="let pref of category.prefs">
+      <pref-option
+        class="col-md-6 col-12"
+        [pref]="pref"
+        [update]="sysPrefService.setPreference.bind(sysPrefService)"
+        [name]="getName(pref.key)"
+        [helpText]="getHelpText(pref.key)"
+        [validator]="getValidator(pref.key)"
+      ></pref-option>
+    </ng-container>
+  </div>
+</ng-container>

frontend/src/app/components/partial-sys-pref/partial-sys-pref.component.ts

@@ -0,0 +1,73 @@
+import { Component, Input } from '@angular/core';
+import { DecodedPref } from 'picsur-shared/dist/dto/preferences.dto';
+import {
+  SysPreference,
+  SysPreferenceValidators
+} from 'picsur-shared/dist/dto/sys-preferences.enum';
+import { map, Observable } from 'rxjs';
+import {
+  SysPreferenceCategories,
+  SysPreferenceCategory,
+  SysPreferenceUI
+} from 'src/app/i18n/sys-pref.i18n';
+
+import { SysPrefService } from 'src/app/services/api/sys-pref.service';
+import { z, ZodTypeAny } from 'zod';
+
+@Component({
+  selector: 'partial-sys-pref',
+  templateUrl: './partial-sys-pref.component.html',
+})
+export class PartialSysPrefComponent {
+  @Input('hidden-categories') public set hiddenCategories(
+    value: SysPreferenceCategory[],
+  ) {
+    this.categories = this.makeCategories(value);
+  }
+
+  private categories = this.makeCategories();
+
+  public getName(key: string) {
+    return SysPreferenceUI[key as SysPreference]?.name ?? key;
+  }
+
+  public getHelpText(key: string) {
+    return SysPreferenceUI[key as SysPreference]?.helpText ?? '';
+  }
+
+  public getCategory(key: string): null | string {
+    return SysPreferenceUI[key as SysPreference]?.category ?? null;
+  }
+
+  public getValidator(key: string): ZodTypeAny {
+    return SysPreferenceValidators[key as SysPreference] ?? z.any();
+  }
+
+  preferences: Observable<
+    Array<{
+      category: string;
+      title: string;
+      prefs: DecodedPref[];
+    }>
+  >;
+
+  constructor(public readonly sysPrefService: SysPrefService) {
+    this.preferences = sysPrefService.live.pipe(
+      map((prefs) => {
+        return this.categories.map((category) => ({
+          category,
+          title: SysPreferenceCategories[category],
+          prefs: prefs.filter(
+            (pref) => this.getCategory(pref.key) === category,
+          ),
+        }));
+      }),
+    );
+  }
+
+  private makeCategories(hiddenCategories: SysPreferenceCategory[] = []) {
+    return Object.values(SysPreferenceCategory).filter(
+      (category) => !hiddenCategories.includes(category),
+    );
+  }
+}

frontend/src/app/components/partial-sys-pref/partial-sys-pref.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { PrefOptionModule } from '../pref-option/pref-option.module';
+import { PartialSysPrefComponent } from './partial-sys-pref.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PrefOptionModule
+  ],
+  declarations: [PartialSysPrefComponent],
+  exports: [PartialSysPrefComponent],
+})
+export class PartialSysPrefModule {}

frontend/src/app/i18n/sys-pref.i18n.ts

@@ -1,115 +1,133 @@
 import { SysPreference } from 'picsur-shared/dist/dto/sys-preferences.enum';
 
+export enum SysPreferenceCategory {
+  General = 'general',
+  Authentication = 'authentication',
+  ImageProcessing = 'image-processing',
+  FileStorage = 'file-storage',
+  Usage = 'usage',
+}
+
+export const SysPreferenceCategories: {
+  [key in SysPreferenceCategory]: string;
+} = {
+  [SysPreferenceCategory.General]: 'General',
+  [SysPreferenceCategory.Authentication]: 'Authentication',
+  [SysPreferenceCategory.ImageProcessing]: 'Image Processing',
+  [SysPreferenceCategory.FileStorage]: 'File Storage',
+  [SysPreferenceCategory.Usage]: 'Usage',
+};
+
 export const SysPreferenceUI: {
   [key in SysPreference]: {
     name: string;
     helpText: string;
-    category: string;
+    category: SysPreferenceCategory;
   };
 } = {
   [SysPreference.HostOverride]: {
     name: 'Host Override',
     helpText:
       'Override the hostname for the server, useful for when you are accessing the server from a different domain.',
-    category: 'General',
+    category: SysPreferenceCategory.General,
   },
 
   [SysPreference.RemoveDerivativesAfter]: {
     name: 'Cached Images Expiry Time',
     helpText:
       'Time before cached converted images are deleted. This does not affect the original image. A lower cache time will save on disk space but cost more cpu. Set to 0 to disable.',
-    category: 'Image Processing',
+    category: SysPreferenceCategory.ImageProcessing,
   },
   [SysPreference.AllowEditing]: {
     name: 'Allow images to be edited',
     helpText:
       'Allow images to be edited (e.g. resize, flip). Using these features will use more CPU power.',
 
-    category: 'Image Processing',
+    category: SysPreferenceCategory.ImageProcessing,
   },
   [SysPreference.ConversionTimeLimit]: {
     name: 'Convert/Edit Time Limit',
     helpText:
       'Time limit for converting/editing images. You may need to increase this on low powered devices.',
-    category: 'Image Processing',
+    category: SysPreferenceCategory.ImageProcessing,
   },
   [SysPreference.ConversionMemoryLimit]: {
     name: 'Convert/Edit Memory Limit MB',
     helpText:
       'Memory limit for converting/editing images. You only need to increase this if you are storing massive images.',
-    category: 'Image Processing',
+    category: SysPreferenceCategory.ImageProcessing,
   },
 
   [SysPreference.JwtSecret]: {
     name: 'JWT Secret',
     helpText: 'Secret used to sign JWT authentication tokens.',
-    category: 'Authentication',
+    category: SysPreferenceCategory.Authentication,
   },
   [SysPreference.JwtExpiresIn]: {
     name: 'JWT Expiry Time',
     helpText: 'Time before JWT authentication tokens expire.',
-    category: 'Authentication',
+    category: SysPreferenceCategory.Authentication,
   },
   [SysPreference.BCryptStrength]: {
     name: 'BCrypt Strength',
     helpText:
       'Strength of BCrypt hashing algorithm, 10 is recommended. Reduce this if running on a low powered device.',
-    category: 'Authentication',
+    category: SysPreferenceCategory.Authentication,
   },
 
   [SysPreference.FSLocalPath]: {
     name: 'FS Local - Path',
     helpText: 'Storage location of the local storage provider.',
-    category: 'File Storage',
+    category: SysPreferenceCategory.FileStorage,
   },
   [SysPreference.FSS3Endpoint]: {
     name: 'FS S3 - Endpoint',
     helpText: 'Custom endpoint of the S3 storage provider.',
-    category: 'File Storage',
+    category: SysPreferenceCategory.FileStorage,
   },
   [SysPreference.FSS3Bucket]: {
     name: 'FS S3 - Bucket',
     helpText: 'Bucket of the S3 storage provider.',
-    category: 'File Storage',
+    category: SysPreferenceCategory.FileStorage,
   },
   [SysPreference.FSS3Region]: {
     name: 'FS S3 - Region',
     helpText: 'Region of the S3 storage provider.',
-    category: 'File Storage',
+    category: SysPreferenceCategory.FileStorage,
   },
   [SysPreference.FSS3AccessKey]: {
     name: 'FS S3 - Access Key',
     helpText: 'Access key of the S3 storage provider.',
-    category: 'File Storage',
+    category: SysPreferenceCategory.FileStorage,
   },
   [SysPreference.FSS3SecretKey]: {
     name: 'FS S3 - Secret Key',
     helpText: 'Secret key of the S3 storage provider.',
-    category: 'File Storage',
+    category: SysPreferenceCategory.FileStorage,
   },
 
   [SysPreference.EnableTracking]: {
     name: 'Enable Ackee Web Tracking',
     helpText:
       'Enable tracking of the website usage using Ackee. You will need to set the tracking URL and ID.',
-    category: 'Usage',
+    category: SysPreferenceCategory.Usage,
   },
   [SysPreference.TrackingUrl]: {
     name: 'Ackee tracking URL',
     helpText:
       'URL of the Ackee tracking server. Requests are proxied, so ensure the X-Forwarded-For header is handled.',
-    category: 'Usage',
+    category: SysPreferenceCategory.Usage,
   },
   [SysPreference.TrackingId]: {
     name: 'Ackee trackign website ID',
     helpText: 'ID of the website to track.',
-    category: 'Usage',
+    category: SysPreferenceCategory.Usage,
   },
 
   [SysPreference.EnableTelemetry]: {
     name: 'Enable System Telemetry',
     helpText:
       'Enable system telemetry, this will send anonymous usage data to the developers.',
-    category: 'Usage',
+    category: SysPreferenceCategory.Usage,
   },
 };

frontend/src/app/routes/settings/sys-pref/settings-sys-pref.component.html

@@ -1,17 +1,3 @@
 <h1>System Settings</h1>
 
-<ng-container *ngFor="let category of preferences | async">
-  <h2 *ngIf="category.category !== null">{{ category.category }}</h2>
-  <div class="row">
-    <ng-container *ngFor="let pref of category.prefs">
-      <pref-option
-        class="col-md-6 col-12"
-        [pref]="pref"
-        [update]="sysPrefService.setPreference.bind(sysPrefService)"
-        [name]="getName(pref.key)"
-        [helpText]="getHelpText(pref.key)"
-        [validator]="getValidator(pref.key)"
-      ></pref-option>
-    </ng-container>
-  </div>
-</ng-container>
+<partial-sys-pref [hidden-categories]="HiddenCategories"></partial-sys-pref>

frontend/src/app/routes/settings/sys-pref/settings-sys-pref.component.ts

@@ -1,54 +1,9 @@
 import { Component } from '@angular/core';
-import { DecodedPref } from 'picsur-shared/dist/dto/preferences.dto';
-import {
-  SysPreference,
-  SysPreferenceValidators,
-} from 'picsur-shared/dist/dto/sys-preferences.enum';
-import { map, Observable } from 'rxjs';
-import { SysPreferenceUI } from 'src/app/i18n/sys-pref.i18n';
-
-import { makeUnique } from 'picsur-shared/dist/util/unique';
-import { SysPrefService } from 'src/app/services/api/sys-pref.service';
-import { z, ZodTypeAny } from 'zod';
+import { SysPreferenceCategory } from 'src/app/i18n/sys-pref.i18n';
 
 @Component({
   templateUrl: './settings-sys-pref.component.html',
-  styleUrls: ['./settings-sys-pref.component.scss'],
 })
 export class SettingsSysprefComponent {
-  public getName(key: string) {
-    return SysPreferenceUI[key as SysPreference]?.name ?? key;
-  }
-
-  public getHelpText(key: string) {
-    return SysPreferenceUI[key as SysPreference]?.helpText ?? '';
-  }
-
-  public getCategory(key: string): null | string {
-    return SysPreferenceUI[key as SysPreference]?.category ?? null;
-  }
-
-  public getValidator(key: string): ZodTypeAny {
-    return SysPreferenceValidators[key as SysPreference] ?? z.any();
-  }
-
-  preferences: Observable<
-    Array<{ category: string | null; prefs: DecodedPref[] }>
-  >;
-
-  constructor(public readonly sysPrefService: SysPrefService) {
-    this.preferences = sysPrefService.live.pipe(
-      map((prefs) => {
-        const categories = makeUnique(
-          prefs.map((pref) => this.getCategory(pref.key)),
-        );
-        return categories.map((category) => ({
-          category,
-          prefs: prefs.filter(
-            (pref) => this.getCategory(pref.key) === category,
-          ),
-        }));
-      }),
-    );
-  }
+  public readonly HiddenCategories = [SysPreferenceCategory.FileStorage];
 }

frontend/src/app/routes/settings/sys-pref/settings-sys-pref.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrefOptionModule } from 'src/app/components/pref-option/pref-option.module';
+import { PartialSysPrefModule } from 'src/app/components/partial-sys-pref/partial-sys-pref.module';
 import { SettingsSysprefComponent } from './settings-sys-pref.component';
 import { SettingsSysprefRoutingModule } from './settings-sys-pref.routing.module';
 
 @NgModule({
   declarations: [SettingsSysprefComponent],
-  imports: [CommonModule, SettingsSysprefRoutingModule, PrefOptionModule],
+  imports: [CommonModule, SettingsSysprefRoutingModule, PartialSysPrefModule],
 })
 export default class SettingsSysprefRouteModule {}