From cf0dc73eb390228b1fa2d2b152b1071da5aa021e Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 21 Dec 2023 11:05:01 -0800
Subject: [PATCH] JSON validation for user_args field

---
 .../admin/config/config.component.html        | 10 +++----
 .../admin/config/config.component.spec.ts     |  7 +++++
 .../admin/config/config.component.ts          | 26 ++++++++++++++++++-
 3 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/components/admin/config/config.component.html b/src-ui/src/app/components/admin/config/config.component.html
index 630b2eb41..e453a3fae 100644
--- a/src-ui/src/app/components/admin/config/config.component.html
+++ b/src-ui/src/app/components/admin/config/config.component.html
@@ -25,10 +25,10 @@
                                             </div>
                                             <div class="mb-n3">
                                                 @switch (option.type) {
-                                                    @case (ConfigOptionType.Select) { <pngx-input-select [formControlName]="option.key" [items]="option.choices" [allowNull]="true"></pngx-input-select> }
-                                                    @case (ConfigOptionType.Number) { <pngx-input-number [formControlName]="option.key" [showAdd]="false"></pngx-input-number> }
-                                                    @case (ConfigOptionType.Boolean) { <pngx-input-switch [formControlName]="option.key" title="Enable" i18n-title></pngx-input-switch> }
-                                                    @case (ConfigOptionType.String) { <pngx-input-text [formControlName]="option.key"></pngx-input-text> }
+                                                    @case (ConfigOptionType.Select) { <pngx-input-select [formControlName]="option.key" [error]="errors[option.key]" [items]="option.choices" [allowNull]="true"></pngx-input-select> }
+                                                    @case (ConfigOptionType.Number) { <pngx-input-number [formControlName]="option.key" [error]="errors[option.key]" [showAdd]="false"></pngx-input-number> }
+                                                    @case (ConfigOptionType.Boolean) { <pngx-input-switch [formControlName]="option.key" [error]="errors[option.key]" title="Enable" i18n-title></pngx-input-switch> }
+                                                    @case (ConfigOptionType.String) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
                                                 }
                                             </div>
                                         </div>
@@ -47,7 +47,7 @@
             <button type="button" (click)="discardChanges()" class="btn btn-secondary" [disabled]="loading || (isDirty$ | async) === false" i18n>Discard</button>
         </div>
         <div class="btn-group">
-            <button type="submit" class="btn btn-primary" [disabled]="loading || (isDirty$ | async) === false" i18n>Save</button>
+            <button type="submit" class="btn btn-primary" [disabled]="loading || !configForm.valid || (isDirty$ | async) === false" i18n>Save</button>
         </div>
     </div>
 </form>
diff --git a/src-ui/src/app/components/admin/config/config.component.spec.ts b/src-ui/src/app/components/admin/config/config.component.spec.ts
index 746f0e041..2e15c4399 100644
--- a/src-ui/src/app/components/admin/config/config.component.spec.ts
+++ b/src-ui/src/app/components/admin/config/config.component.spec.ts
@@ -93,4 +93,11 @@ describe('ConfigComponent', () => {
       OutputTypeConfig.PDF_A2
     )
   })
+
+  it('should support JSON validation for e.g. user_args', () => {
+    component.configForm.get('user_args').patchValue('{ foo bar }')
+    expect(component.errors).toEqual({ user_args: 'Invalid JSON' })
+    component.configForm.get('user_args').patchValue('{ "foo": "bar" }')
+    expect(component.errors).toEqual({ user_args: null })
+  })
 })
diff --git a/src-ui/src/app/components/admin/config/config.component.ts b/src-ui/src/app/components/admin/config/config.component.ts
index f9bc823c2..56cd027cc 100644
--- a/src-ui/src/app/components/admin/config/config.component.ts
+++ b/src-ui/src/app/components/admin/config/config.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { FormControl, FormGroup } from '@angular/forms'
+import { AbstractControl, FormControl, FormGroup } from '@angular/forms'
 import {
   BehaviorSubject,
   Observable,
@@ -48,6 +48,8 @@ export class ConfigComponent
     user_args: new FormControl(),
   })
 
+  public errors = {}
+
   get optionCategories(): string[] {
     return Object.values(ConfigCategory)
   }
@@ -87,6 +89,28 @@ export class ConfigComponent
           this.toastService.showError($localize`Error retrieving config`, e)
         },
       })
+
+    // validate JSON input for user_args
+    this.configForm
+      .get('user_args')
+      .addValidators((control: AbstractControl) => {
+        if (!control.value || control.value.toString().length === 0) return null
+        try {
+          JSON.parse(control.value)
+        } catch (e) {
+          return [
+            {
+              user_args: e,
+            },
+          ]
+        }
+        return null
+      })
+    this.configForm.get('user_args').statusChanges.subscribe((status) => {
+      this.errors['user_args'] =
+        status === 'INVALID' ? $localize`Invalid JSON` : null
+    })
+    this.configForm.get('user_args').updateValueAndValidity()
   }
 
   ngOnDestroy(): void {