@plutonhq/core-frontend 0.1.23 → 0.1.24

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@plutonhq/core-frontend",
    "description": "Pluton Core Frontend Library",
-   "version": "0.1.23",
+   "version": "0.1.24",
    "author": "Plutonhq",
    "license": "Apache-2.0",
    "publishConfig": {

package/src/@types/settings.ts

@@ -18,3 +18,46 @@ export interface LogItem {
    deviceId?: string;
    msg: string;
 }
+
+export interface NtfySettingsType {
+   authType: string;
+   authToken: string;
+   connected: boolean;
+}
+
+export interface IntegrationSettings {
+   smtp?: SmtpSettingsType;
+   ntfy?: NtfySettingsType;
+}
+
+export type IntegrationTypes = 'smtp' | 'sendgrid' | 'mailgun' | 'brevo' | 'resend' | 'awsSes' | 'ntfy';
+export const INTEGRATIONS_AVAILABLE: Record<IntegrationTypes, { name: string; required: string[] }> = {
+   smtp: {
+      name: 'SMTP',
+      required: ['server', 'port', 'username', 'password', 'senderEmail'],
+   },
+   sendgrid: {
+      name: 'SendGrid',
+      required: ['apiKey', 'senderEmail'],
+   },
+   mailgun: {
+      name: 'Mailgun',
+      required: ['apiKey', 'domain', 'senderEmail'],
+   },
+   brevo: {
+      name: 'Brevo',
+      required: ['apiKey', 'senderEmail'],
+   },
+   resend: {
+      name: 'Resend',
+      required: ['apiKey', 'senderEmail'],
+   },
+   awsSes: {
+      name: 'AWS SES',
+      required: ['accessKeyId', 'secretAccessKey', 'region', 'senderEmail'],
+   },
+   ntfy: {
+      name: 'Ntfy',
+      required: ['authType', 'authToken'],
+   },
+} as const;

package/src/components/Plan/PlanSettings/PlanNotificationSettings.tsx

@@ -28,6 +28,7 @@ const PlanNotificationSettings = ({
 }: PlanNotificationSettingsProps) => {
    const hasConnectedIntegrations = types.length > 0;
    const defaultEmail = !hasConnectedIntegrations && admin_email ? admin_email : '';
+   const hasNtfyConnected = types.includes('ntfy');
 
    const updateNotificationEmails = (emails: string) => {
       onUpdate({ ...notificationSettings, email: { ...notificationSettings.email, emails } });
@@ -203,6 +204,70 @@ const PlanNotificationSettings = ({
                </div>
             )}
          </div>
+
+         {/* Ntfy Push Notification */}
+         <div className={classes.notificationSettingsSection}>
+            <div className={`${classes.field} ${classes.notificationToggle}`}>
+               <Icon type="ntfy" size={14} />
+               <Toggle
+                  label="Enable Ntfy Push Notifications"
+                  fieldValue={notificationSettings?.push?.enabled || false}
+                  onUpdate={(val: boolean) => onUpdate({ ...notificationSettings, push: { ...notificationSettings.push, enabled: val } })}
+                  hint={`Send me Push Notifications on Backup failure or success.`}
+                  inline={true}
+               />
+            </div>
+            {notificationSettings.push?.enabled &&
+               (hasNtfyConnected ? (
+                  <div className={classes.notificationSettings}>
+                     {!isSync && (
+                        <div className={classes.field}>
+                           <Select
+                              label="Send Notification On"
+                              fieldValue={notificationSettings?.push?.case || 'failure'}
+                              options={caseOptions}
+                              onUpdate={(val: string) =>
+                                 onUpdate({
+                                    ...notificationSettings,
+                                    push: { ...notificationSettings.push, case: val as PlanNotification['push']['case'] },
+                                 })
+                              }
+                              inline={true}
+                           />
+                        </div>
+                     )}
+                     <div className={classes.field}>
+                        <Input
+                           label="Ntfy Push URL"
+                           fieldValue={notificationSettings?.push?.url || ''}
+                           onUpdate={(val) => onUpdate({ ...notificationSettings, push: { ...notificationSettings.push, url: val } })}
+                           placeholder="https://ntfy.sh/mytopic"
+                           inline={true}
+                           required={true}
+                           full={true}
+                           error={!notificationSettings?.push?.url ? 'Required' : undefined}
+                        />
+                     </div>
+                     <div className={classes.field}>
+                        <Input
+                           label="Tags"
+                           fieldValue={notificationSettings?.push?.tags || ''}
+                           onUpdate={(val) => onUpdate({ ...notificationSettings, push: { ...notificationSettings.push, tags: val } })}
+                           placeholder="warning, daily-backup"
+                           inline={true}
+                           full={true}
+                        />
+                     </div>
+                  </div>
+               ) : (
+                  <div className={classes.notificationSettings}>
+                     <div className={classes.fieldNotice}>
+                        ⚠️ Ntfy Auth Token is not configured. Set it up in <NavLink to={`/settings?t=integration`}>Settings</NavLink> to enable Ntfy
+                        Push Notifications.
+                     </div>
+                  </div>
+               ))}
+         </div>
       </>
    );
 };

package/src/components/Settings/IntegrationSettings/IntegrationSettings.module.scss

@@ -36,3 +36,19 @@
       }
    }
 }
+
+@media only screen and (max-width: 768px) {
+   .integrations {
+      .field {
+         width: 100%;
+      }
+   }
+   .integrationSelect {
+      width: 100%;
+      margin-bottom: 30px;
+
+      :global([class*='_dropdown_']) {
+         width: 100%;
+      }
+   }
+}

package/src/components/Settings/IntegrationSettings/IntegrationSettings.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import classes from './IntegrationSettings.module.scss';
-import Input from '../../common/form/Input/Input';
-import ActionModal from '../../common/ActionModal/ActionModal';
-import { useValidateIntegration } from '../../../services/settings';
 import SMTPSettings from './SMTPSettings';
+import NtfySettings from './NtfySettings';
+import Icon from '../../common/Icon/Icon';
+import Select from '../../common/form/Select/Select';
+import { isMobile } from '../../../utils';
 
 interface IntegrationSettingsProps {
    settingsID: number;
@@ -12,12 +13,9 @@ interface IntegrationSettingsProps {
 }
 
 const IntegrationSettings = ({ settingsID, settings, onUpdate }: IntegrationSettingsProps) => {
-   const [testEmail, setTestEmail] = useState('');
-   const [showEmailTestModal, setShowEmailTestModal] = useState<'' | 'smtp'>('');
+   const [tab, setTab] = useState<'smtp' | 'ntfy'>('smtp');
    const integrationSettings = settings?.integration || {};
-   const { smtp } = integrationSettings || {};
-
-   const validationMutation = useValidateIntegration();
+   const { smtp, ntfy } = integrationSettings || {};
 
    const onIntegrationUpdate = (key: string, intSettings: Record<string, any>) => {
       console.log('onIntegrationUpdate :', key, intSettings);
@@ -26,42 +24,47 @@ const IntegrationSettings = ({ settingsID, settings, onUpdate }: IntegrationSett
 
    return (
       <div className={classes.integrations}>
-         <div>
-            <SMTPSettings
-               settings={smtp}
-               onUpdate={(iSettings) => onIntegrationUpdate('smtp', iSettings)}
-               showTestModal={(type) => setShowEmailTestModal(type)}
-            />
-         </div>
-         {showEmailTestModal && (
-            <ActionModal
-               title={`Test SMTP Integration`}
-               message={
-                  <>
-                     <Input
-                        label="Send Test Email to this email"
-                        full={true}
-                        fieldValue={testEmail}
-                        onUpdate={(val) => setTestEmail(val)}
-                        type="email"
-                        placeholder="test@test.com"
-                     />
-                  </>
-               }
-               errorMessage={validationMutation.error?.message}
-               successMessage={validationMutation.isSuccess ? 'Test email sent. Integration validated successfully.' : ''}
-               closeModal={() => setShowEmailTestModal('')}
-               width="400px"
-               secondaryAction={{ title: 'Close', action: () => setShowEmailTestModal('') }}
-               primaryAction={{
-                  title: `Send Test Email`,
-                  type: 'default',
-                  icon: 'email',
-                  isPending: validationMutation.isPending,
-                  action: () => validationMutation.mutate({ settingsID, type: 'smtp', settings: settings, test: { email: testEmail } }),
-               }}
+         {isMobile() ? (
+            <Select
+               customClasses={classes.integrationSelect}
+               options={[
+                  { label: 'SMTP', value: 'smtp', icon: 'email' },
+                  { label: 'Ntfy', value: 'ntfy', icon: 'ntfy' },
+               ]}
+               fieldValue={tab}
+               full={true}
+               onUpdate={(val) => setTab(val as 'smtp' | 'ntfy')}
             />
+         ) : (
+            <>
+               <ul className={classes.tabs}>
+                  <li className={`${tab === 'smtp' ? classes.tabActive : ''}`} onClick={() => setTab('smtp')}>
+                     <Icon type="email" size={14} /> SMTP
+                     {smtp?.connected && <Icon type="check-circle-filled" size={12} />}
+                  </li>
+                  <li className={`${tab === 'ntfy' ? classes.tabActive : ''}`} onClick={() => setTab('ntfy')}>
+                     <Icon type="ntfy" size={14} /> Ntfy
+                     {ntfy?.connected && <Icon type="check-circle-filled" size={12} />}
+                  </li>
+               </ul>
+            </>
          )}
+         <div>
+            {tab === 'smtp' && (
+               <SMTPSettings
+                  settingsID={settingsID}
+                  settings={integrationSettings}
+                  onUpdate={(iSettings) => onIntegrationUpdate('smtp', iSettings)}
+               />
+            )}
+            {tab === 'ntfy' && (
+               <NtfySettings
+                  settingsID={settingsID}
+                  settings={integrationSettings}
+                  onUpdate={(iSettings) => onIntegrationUpdate('ntfy', iSettings)}
+               />
+            )}
+         </div>
       </div>
    );
 };

package/src/components/Settings/IntegrationSettings/NtfySettings.tsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import classes from './IntegrationSettings.module.scss';
+import { IntegrationSettings, NtfySettingsType } from '../../../@types';
+import Icon from '../../common/Icon/Icon';
+import Select from '../../common/form/Select/Select';
+import Input from '../../common/form/Input/Input';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useValidateIntegration } from '../../../services';
+import PasswordField from '../../common/form/PasswordField/PasswordField';
+
+interface NtfySettingsProps {
+   settingsID: number;
+   settings: IntegrationSettings;
+   onUpdate: (settings: NtfySettingsType) => void;
+}
+
+const NtfySettings = ({ settingsID, settings, onUpdate }: NtfySettingsProps) => {
+   const [ntfySettings, setNtfySettings] = useState<NtfySettingsType>(settings?.ntfy || { authType: 'token', authToken: '', connected: false });
+   const [errorFields, setErrorFields] = useState<{ authToken: string }>({ authToken: '' });
+   const [showTestModal, setShowTestModal] = useState(false);
+   const [testUrl, setTestUrl] = useState('');
+   const validationMutation = useValidateIntegration();
+
+   const authType = ntfySettings.authType || 'token';
+
+   const updateNtfySettings = (updated: NtfySettingsType) => {
+      setNtfySettings(updated);
+      onUpdate(updated);
+   };
+
+   const validateSettings = (e: React.FormEvent) => {
+      e.preventDefault();
+
+      const newErrors = { authToken: '' };
+
+      if (!ntfySettings?.authToken) {
+         newErrors.authToken = 'Required';
+      }
+      setErrorFields(newErrors);
+      const hasErrors = Object.values(newErrors).some((error) => error !== '');
+      if (!hasErrors) {
+         setShowTestModal(true);
+      }
+   };
+
+   return (
+      <div>
+         <div className={classes.field}>
+            <Select
+               label="Auth Type*"
+               fieldValue={authType}
+               options={[{ label: 'Token', value: 'token' }]}
+               onUpdate={(val) => updateNtfySettings({ ...ntfySettings, authType: val })}
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <PasswordField
+               label="Auth Token*"
+               fieldValue={ntfySettings.authToken}
+               onUpdate={(val) => updateNtfySettings({ ...ntfySettings, authToken: val })}
+               error={errorFields?.authToken}
+            />
+         </div>
+         <div className={classes.field}>
+            <button className={classes.validateBtn} onClick={validateSettings} type="button">
+               <Icon type="check" size={10} /> {ntfySettings.connected ? 'Re-validate Ntfy' : 'Validate Ntfy'}
+            </button>
+         </div>
+         {showTestModal && (
+            <ActionModal
+               title={`Test Ntfy Integration`}
+               message={
+                  <>
+                     <Input
+                        label="Send Test Notification to this topic"
+                        full={true}
+                        inline={false}
+                        fieldValue={testUrl}
+                        onUpdate={(val) => setTestUrl(val)}
+                        type="text"
+                        placeholder="test/topic url. Eg: https://ntfy.sh/testtopic"
+                     />
+                  </>
+               }
+               errorMessage={validationMutation.error?.message}
+               successMessage={validationMutation.isSuccess ? 'Test notification sent. Integration validated successfully.' : ''}
+               closeModal={() => setShowTestModal(false)}
+               width="400px"
+               secondaryAction={{ title: 'Close', action: () => setShowTestModal(false) }}
+               primaryAction={{
+                  title: `Send Test Notification`,
+                  type: 'default',
+                  icon: 'send',
+                  isPending: validationMutation.isPending,
+                  action: () =>
+                     testUrl &&
+                     validationMutation.mutate({ settingsID, type: 'ntfy', settings: { ...settings, ntfy: ntfySettings }, test: { url: testUrl } }),
+               }}
+            />
+         )}
+      </div>
+   );
+};
+
+export default NtfySettings;

package/src/components/Settings/IntegrationSettings/SMTPSettings.tsx

@@ -3,42 +3,47 @@ import Input from '../../common/form/Input/Input';
 import Icon from '../../common/Icon/Icon';
 import { isValidEmail } from '../../../utils/helpers';
 import { SmtpSettingsType } from '../../../@types/settings';
+import { IntegrationSettings } from '../../../@types';
 import classes from './IntegrationSettings.module.scss';
+import ValidateEmailIntegration from './ValidateEmailIntegration';
 
 interface SMTPSettingsProps {
-   settings: SmtpSettingsType;
+   settingsID: number;
+   settings: IntegrationSettings;
    onUpdate: (settings: SmtpSettingsType) => void;
-   showTestModal: (type: 'smtp') => void;
 }
 
-const SMTPSettings = ({ settings, onUpdate, showTestModal }: SMTPSettingsProps) => {
+const SMTPSettings = ({ settingsID, settings, onUpdate }: SMTPSettingsProps) => {
+   const [showTestModal, setShowTestModal] = useState(false);
    const [errorFields, setErrorFields] = useState<{ server: string; port: string; senderEmail: string }>({
       server: '',
       port: '',
       senderEmail: '',
    });
 
+   const smtpSettings = settings?.smtp || { server: '', port: 587, senderEmail: '', username: '', password: '', connected: false };
+
    const validateSettings = (e: React.FormEvent) => {
       e.preventDefault();
 
       const newErrors = { server: '', port: '', senderEmail: '' };
 
-      if (!settings?.server) {
+      if (!smtpSettings?.server) {
          newErrors.server = 'Server is required';
       }
-      if (!settings?.port) {
+      if (!smtpSettings?.port) {
          newErrors.port = 'Port is required';
       }
-      if (!settings?.senderEmail) {
+      if (!smtpSettings?.senderEmail) {
          newErrors.senderEmail = 'Sender Email is required';
-      } else if (!isValidEmail(settings.senderEmail)) {
+      } else if (!isValidEmail(smtpSettings.senderEmail)) {
          newErrors.senderEmail = 'Invalid email';
       }
 
       setErrorFields(newErrors);
       const hasErrors = Object.values(newErrors).some((error) => error !== '');
       if (!hasErrors) {
-         showTestModal('smtp');
+         setShowTestModal(true);
       }
    };
 
@@ -47,16 +52,16 @@ const SMTPSettings = ({ settings, onUpdate, showTestModal }: SMTPSettingsProps)
          <div className={classes.field}>
             <Input
                label="SMTP Server*"
-               fieldValue={(settings?.server || '') as string}
-               onUpdate={(val) => onUpdate({ ...settings, server: val })}
+               fieldValue={(smtpSettings?.server || '') as string}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, server: val })}
                error={errorFields?.server}
             />
          </div>
          <div className={classes.field}>
             <Input
                label="SMTP PORT*"
-               fieldValue={(settings?.port || '') as string}
-               onUpdate={(val) => onUpdate({ ...settings, port: parseInt(val, 10) })}
+               fieldValue={(smtpSettings?.port || '') as string}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, port: parseInt(val, 10) })}
                error={errorFields?.port}
             />
          </div>
@@ -64,32 +69,36 @@ const SMTPSettings = ({ settings, onUpdate, showTestModal }: SMTPSettingsProps)
             <Input
                label="Sender Email*"
                type="email"
-               fieldValue={(settings?.senderEmail || '') as string}
-               onUpdate={(val) => onUpdate({ ...settings, senderEmail: val })}
+               fieldValue={(smtpSettings?.senderEmail || '') as string}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, senderEmail: val })}
                error={errorFields?.senderEmail}
             />
          </div>
          <div className={classes.field}>
             <Input
                label="SMTP Username"
-               fieldValue={(settings?.username || '') as string}
-               onUpdate={(val) => onUpdate({ ...settings, username: val })}
+               fieldValue={(smtpSettings?.username || '') as string}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, username: val })}
             />
          </div>
          <div className={classes.field}>
             <Input
                label="SMTP Password"
-               fieldValue={(settings?.password || '') as string}
+               fieldValue={(smtpSettings?.password || '') as string}
                type="password"
-               onUpdate={(val) => onUpdate({ ...settings, password: val })}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, password: val })}
             />
          </div>
 
          <div className={classes.field}>
             <button className={classes.validateBtn} onClick={validateSettings} type="button">
-               <Icon type="check" size={10} /> {settings?.connected ? 'Re-validate SMTP' : 'Validate SMTP'}
+               <Icon type="check" size={10} /> {smtpSettings?.connected ? 'Re-validate SMTP' : 'Validate SMTP'}
             </button>
          </div>
+
+         {showTestModal && (
+            <ValidateEmailIntegration settingsID={settingsID} settings={settings} integrationType="smtp" onClose={() => setShowTestModal(false)} />
+         )}
       </div>
    );
 };

package/src/components/Settings/IntegrationSettings/ValidateEmailIntegration.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import Input from '../../common/form/Input/Input';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useValidateIntegration } from '../../../services';
+import { INTEGRATIONS_AVAILABLE, IntegrationSettings, IntegrationTypes } from '../../../@types';
+
+interface ValidateEmailIntegrationProps {
+   settingsID: number;
+   settings: IntegrationSettings;
+   integrationType: IntegrationTypes;
+   onClose: () => void;
+}
+
+const ValidateEmailIntegration = ({ settingsID, settings, integrationType, onClose }: ValidateEmailIntegrationProps) => {
+   const [testEmail, setTestEmail] = useState('');
+   const validationMutation = useValidateIntegration();
+   const integrationName = INTEGRATIONS_AVAILABLE[integrationType as IntegrationTypes].name;
+
+   return (
+      <ActionModal
+         title={`Test ${integrationName} Integration`}
+         message={
+            <>
+               <Input
+                  label="Send Test Email to this email"
+                  full={true}
+                  inline={false}
+                  fieldValue={testEmail}
+                  onUpdate={(val) => setTestEmail(val)}
+                  type="email"
+                  placeholder="test@test.com"
+               />
+            </>
+         }
+         errorMessage={validationMutation.error?.message}
+         successMessage={validationMutation.isSuccess ? `Test email sent. ${integrationName} validated successfully.` : ''}
+         closeModal={onClose}
+         width="400px"
+         secondaryAction={{ title: 'Close', action: onClose }}
+         primaryAction={{
+            title: 'Send Test Email',
+            type: 'default',
+            icon: 'email',
+            isPending: validationMutation.isPending,
+            action: () =>
+               testEmail &&
+               validationMutation.mutate({
+                  settingsID,
+                  type: integrationType,
+                  settings: { ...settings },
+                  test: { email: testEmail },
+               }),
+         }}
+      />
+   );
+};
+
+export default ValidateEmailIntegration;

package/src/components/Storage/EditStorage/EditStorage.tsx

@@ -39,7 +39,7 @@ const EditStorage = ({ close, storage }: EditStorageProps) => {
       storage.storageFields.forEach((field: storageOptionField) => {
          if (field.required) {
             (groupedFields.required as storageOptionField[]).push(field);
-         } else {
+         } else if (!field.authFieldType) {
             (groupedFields.optional as storageOptionField[]).push(field);
          }
       });

package/src/components/index.ts

@@ -113,6 +113,8 @@ export { default as AppLogs } from './Settings/AppLogs/AppLogs';
 export { default as GeneralSettings } from './Settings/GeneralSettings/GeneralSettings';
 export { default as IntegrationSettings } from './Settings/IntegrationSettings/IntegrationSettings';
 export { default as SMTPSettings } from './Settings/IntegrationSettings/SMTPSettings';
+export { default as NtfySettings } from './Settings/IntegrationSettings/NtfySettings';
+export { default as ValidateEmailIntegration } from './Settings/IntegrationSettings/ValidateEmailIntegration';
 export { default as TwoFactorSetup } from './Settings/TwoFactorSetup/TwoFactorSetup';
 
 // Skeleton components

package/src/services/settings.ts

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { experimental_createQueryPersister } from '@tanstack/react-query-persist-client';
 import { API_URL } from '../utils/constants';
 import { useNavigate } from 'react-router';
+import { IntegrationSettings } from '../@types';
 
 // ============== Settings API ==============
 
@@ -136,10 +137,9 @@ export function useGetDownloadAppLogs() {
 export async function validateIntegration(updatePayload: {
    settingsID: number;
    type: string;
-   settings: Record<string, string | boolean | number>;
+   settings: IntegrationSettings;
    test: Record<string, string | boolean | number>;
 }) {
-   console.log('updatePayload :', updatePayload);
    const header = new Headers({ 'Content-Type': 'application/json', Accept: 'application/json' });
    const res = await fetch(`${API_URL}/settings/integration/validate`, {
       method: 'POST',