fix(admin-ui): correct Cancel button behavior in Jans Lock page to re…

admin-ui/app/utils/Util.ts

@@ -1,7 +1,6 @@
 import customColors from '@/customColors'
 
-// @ts-nocheck
-export function uuidv4() {
+export function uuidv4(): string {
   // Use Web Crypto API if available
   if (typeof crypto !== 'undefined' && crypto.randomUUID) {
     return crypto.randomUUID()
@@ -16,7 +15,7 @@ export function uuidv4() {
 }
 
 // Predefined color palette for consistent colors
-const colorPalette = [
+const colorPalette: string[] = [
   customColors.logo,
   customColors.white,
   customColors.black,
@@ -27,22 +26,22 @@ const colorPalette = [
   customColors.lightBlue,
 ]
 
-export function getNewColor(index = 0) {
+export function getNewColor(index = 0): string {
   // Use modulo to cycle through the palette
   return colorPalette[index % colorPalette.length]
 }
 
-export const getClientScopeByInum = (str) => {
+export const getClientScopeByInum = (str: string): string => {
   const inum = str.split(',')[0]
   const value = inum.split('=')[1]
   return value
 }
 
-export function getYearMonth(date) {
+export function getYearMonth(date: Date): string {
   return date.getFullYear() + getMonth(date)
 }
 
-export function getMonth(aDate) {
+export function getMonth(aDate: Date): string {
   const value = String(aDate.getMonth() + 1)
   if (value.length > 1) {
     return value
@@ -51,7 +50,7 @@ export function getMonth(aDate) {
   }
 }
 
-export function formatDate(date) {
+export function formatDate(date?: string): string {
   if (!date) {
     return '-'
   }
@@ -63,3 +62,17 @@ export function formatDate(date) {
   }
   return '-'
 }
+
+export const trimObjectStrings = <T extends Record<string, unknown>>(obj: T): T => {
+  const trimmed: Record<string, unknown> = {}
+  for (const key in obj) {
+    if (typeof obj[key] === 'string') {
+      trimmed[key] = (obj[key] as string).trim()
+    } else if (obj[key] && typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+      trimmed[key] = trimObjectStrings(obj[key] as Record<string, unknown>)
+    } else {
+      trimmed[key] = obj[key]
+    }
+  }
+  return trimmed as T
+}

admin-ui/plugins/jans-lock/components/JansLockConfiguration.tsx

@@ -15,6 +15,7 @@ import {
   jansLockConstants,
 } from '../helper'
 import { JansLockConfigFormValues, PatchOperation } from '../types'
+import { trimObjectStrings } from 'Utils/Util'
 
 interface JansLockConfigurationProps {
   lockConfig: Record<string, unknown>
@@ -49,9 +50,16 @@ const JansLockConfiguration: React.FC<JansLockConfigurationProps> = ({ lockConfi
     validationSchema,
   })
 
+  const handleCancel = useCallback(() => {
+    formik.resetForm()
+  }, [formik])
+
   const submitForm = useCallback(
     (userMessage: string) => {
-      const patchOperations = createPatchOperations(formik.values, lockConfig)
+      const trimmedValues = trimObjectStrings(
+        formik.values as unknown as Record<string, unknown>,
+      ) as unknown as JansLockConfigFormValues
+      const patchOperations = createPatchOperations(trimmedValues, lockConfig)
 
       toggle()
 
@@ -398,7 +406,9 @@ const JansLockConfiguration: React.FC<JansLockConfigurationProps> = ({ lockConfi
             <Col>
               <GluuCommitFooter
                 saveHandler={toggle}
-                hideButtons={{ save: true, back: false }}
+                hideButtons={{ save: true, back: true }}
+                extraLabel="Cancel"
+                extraOnClick={handleCancel}
                 type="submit"
               />
             </Col>