fix(dashboard): add client side validation for apns key

apps/dashboard/src/components/integrations/components/integration-credentials.tsx

@@ -1,6 +1,7 @@
 import { Input } from '@/components/primitives/input';
 import { SecretInput } from '@/components/primitives/secret-input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/primitives/select';
+import { Textarea } from '@/components/primitives/textarea';
 import { Switch } from '@/components/primitives/switch';
 import { CredentialsKeyEnum, IProviderConfig } from '@novu/shared';
 import { Control } from 'react-hook-form';
@@ -32,14 +33,24 @@ const SECURE_CREDENTIALS = [
 ];
 
 export function CredentialsSection({ provider, control }: CredentialsSectionProps) {
+  console.log(provider);
   return (
     <div className="border-neutral-alpha-200 bg-background text-foreground-600 mx-0 mt-0 flex flex-col gap-2 rounded-lg border p-3">
       {provider?.credentials?.map((credential) => (
         <FormField
           key={credential.key}
           control={control}
           name={`credentials.${credential.key}`}
-          rules={{ required: credential.required ? `${credential.displayName} is required` : false }}
+          rules={{
+            required: credential.required ? `${credential.displayName} is required` : false,
+            validate: credential.validation?.validate,
+            pattern: credential.validation?.pattern
+              ? {
+                  value: credential.validation.pattern,
+                  message: credential.validation.message || 'Invalid format',
+                }
+              : undefined,
+          }}
           render={({ field, fieldState }) => (
             <FormItem className="mb-2">
               <FormLabel htmlFor={credential.key} optional={!credential.required}>
@@ -66,6 +77,16 @@ export function CredentialsSection({ provider, control }: CredentialsSectionProp
                     </SelectContent>
                   </Select>
                 </FormControl>
+              ) : credential.type === 'textarea' ? (
+                <FormControl>
+                  <Textarea
+                    id={credential.key}
+                    placeholder={`Enter ${credential.displayName.toLowerCase()}`}
+                    value={field.value || ''}
+                    onChange={field.onChange}
+                    rows={7}
+                  />
+                </FormControl>
               ) : credential.type === 'secret' || SECURE_CREDENTIALS.includes(credential.key as CredentialsKeyEnum) ? (
                 <FormControl>
                   <SecretInput
@@ -88,7 +109,7 @@ export function CredentialsSection({ provider, control }: CredentialsSectionProp
                 </FormControl>
               )}
 
-              <FormMessage>{credential.description}</FormMessage>
+              <FormMessage>{fieldState.error?.message || credential.description}</FormMessage>
             </FormItem>
           )}
         />

packages/shared/src/consts/providers/credentials/provider-credentials.ts

@@ -641,8 +641,22 @@ export const apnsConfig: IConfigCredentials[] = [
   {
     key: CredentialsKeyEnum.SecretKey,
     displayName: 'Private Key',
-    type: 'text',
-    required: true,
+    type: 'textarea',
+    required: true,
+    validation: {
+      validate: (value: string) => {
+        try {
+          // Check if it's a valid PEM format
+          if (!value.includes('-----BEGIN PRIVATE KEY-----') || !value.includes('-----END PRIVATE KEY-----')) {
+            return 'Invalid private key format. Must be in PEM format.';
+          }
+
+          return true;
+        } catch (e) {
+          return 'Invalid private key format. Must be in PEM format.';
+        }
+      },
+    },
   },
   {
     key: CredentialsKeyEnum.ApiKey,
@@ -668,7 +682,6 @@ export const apnsConfig: IConfigCredentials[] = [
     type: 'switch',
     required: false,
   },
-
   ...pushConfigBase,
 ];
 

packages/shared/src/consts/providers/provider.interface.ts

@@ -26,6 +26,11 @@ export interface IConfigCredentials {
     name: string;
     value: string | null;
   }>;
+  validation?: {
+    pattern?: RegExp;
+    message?: string;
+    validate?: (value: string) => boolean | string;
+  };
 }
 
 export interface ILogoFileName {