@plutonhq/core-frontend 0.1.14 → 0.1.15

package/package.json

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

package/src/components/Plan/PlanForm/PlanForm.tsx

@@ -190,20 +190,20 @@ const PlanForm = ({
                               label: 'Incremental Backup',
                               description: 'Periodically create Incremental backup snapshots of source',
                            },
-                           {
-                              value: 'sync',
-                              icon: 'reload',
-                              label: 'Real-time Sync',
-                              description: 'Maintain identical source (with revisions)',
-                              disabled: true,
-                           },
-                           {
-                              value: 'rescue',
-                              icon: 'rescue',
-                              label: 'Linux Server Backup',
-                              description: 'Full Linux system backups with bootable ISO image',
-                              disabled: true,
-                           },
+                           // {
+                           //    value: 'sync',
+                           //    icon: 'reload',
+                           //    label: 'Real-time Sync',
+                           //    description: 'Maintain identical source (with revisions)',
+                           //    disabled: true,
+                           // },
+                           // {
+                           //    value: 'rescue',
+                           //    icon: 'rescue',
+                           //    label: 'Linux Server Backup',
+                           //    description: 'Full Linux system backups with bootable ISO image',
+                           //    disabled: true,
+                           // },
                         ]}
                      />
                   )}

package/src/components/Plan/PlanIntegrity/PlanIntegrity.module.scss

@@ -0,0 +1,110 @@
+.integrityMessage {
+   :global(.label) {
+      font-size: 0.9em;
+      border-radius: 6px;
+      padding: 10px;
+   }
+}
+
+.fixSuggestion {
+   border-radius: 6px;
+   border: 1px solid var(--line-color);
+   box-sizing: border-box;
+   margin: 0 5px;
+   margin-top: 12px;
+   h4 {
+      padding: 12px;
+      font-weight: 600;
+      margin: 0;
+      border-bottom: 1px solid var(--line-color);
+   }
+   .fixSuggestionContent {
+      padding: 0 12px;
+      font-size: 0.9em;
+      code {
+         background: var(--line-color);
+         padding: 5px;
+         border-radius: 4px;
+         display: block;
+         font-family: monospace;
+      }
+   }
+}
+
+.integrityLogs {
+   border-radius: 6px;
+   border: 1px solid var(--line-color);
+   box-sizing: border-box;
+   margin: 0 5px;
+   margin-top: 12px;
+
+   .integrityLogsHeader {
+      padding: 12px;
+      font-weight: 600;
+      border-bottom: 1px solid var(--line-color);
+      display: flex;
+      justify-content: space-between;
+      & > div:nth-child(2) {
+         font-weight: normal;
+         color: var(--content-text-color-light);
+      }
+   }
+   .integrityLogMessages {
+      font-family: monospace;
+      background-color: var(--background-color);
+      line-height: 1.3rem;
+      max-height: 300px;
+      overflow: auto;
+      span {
+         display: block;
+         padding: 4px 12px;
+         line-break: anywhere;
+         &:nth-child(even) {
+            background: rgba(0, 0, 0, 0.03);
+         }
+      }
+   }
+}
+
+.integrityResult {
+   &.withReplications {
+      border: 1px solid var(--line-color);
+      border-radius: 6px;
+      .replicationResult {
+         h4 {
+            margin: 0;
+            padding: 12px;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid var(--line-color);
+            i {
+               background-color: var(--background-color);
+               color: var(--content-text-color-light);
+               padding: 1px 12px;
+               border-radius: 20px;
+               font-size: 0.7rem;
+               font-weight: normal;
+               font-style: normal;
+               display: inline-block;
+               margin-left: 6px;
+            }
+            img {
+               max-width: 14px;
+               vertical-align: middle;
+               margin-right: 6px;
+            }
+         }
+         .replicationResultContent {
+            padding: 12px;
+            border-bottom: 1px solid var(--line-color);
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .integrityLogs .integrityLogsHeader {
+      flex-direction: column;
+   }
+}

package/src/components/Plan/PlanIntegrity/PlanIntegrity.tsx

@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import classes from './PlanIntegrity.module.scss';
+import { useCheckPlanIntegrity } from '../../../services';
+import { Plan, PlanReplicationStorage, PlanVerifiedResult } from '../../../@types';
+import { formatDateTime, timeAgo } from '../../../utils';
+import Icon from '../../common/Icon/Icon';
+import ActionModal from '../../common/ActionModal/ActionModal';
+
+interface PlanIntegrityProps {
+   planId: string;
+   taskPending: boolean;
+   verificationData: Plan['verified'];
+   storage: { name: string; type: string; id: string };
+   replicationStorages: PlanReplicationStorage[];
+   onClose: () => void;
+}
+
+const PlanIntegrity = ({ planId, taskPending, verificationData, storage, replicationStorages = [], onClose }: PlanIntegrityProps) => {
+   const [showContent, setShowContent] = useState('primary');
+   const integrityCheckMutation = useCheckPlanIntegrity();
+
+   const integrityResultLoaded = verificationData && verificationData?.result;
+   const hasReplications = replicationStorages && replicationStorages.length > 0;
+
+   const getBackupResultByStorage = (storageType: string): PlanVerifiedResult | null => {
+      if (!verificationData?.result) return null;
+
+      const replicationResult = verificationData.result as Record<string, PlanVerifiedResult>;
+      return replicationResult[storageType] ?? null;
+   };
+
+   const renderLogs = (storageType: string) => {
+      if (integrityCheckMutation.isPending) return null;
+      const backupResData = getBackupResultByStorage(storageType);
+      const messages = backupResData?.logs;
+      if (!messages?.length) return null;
+
+      return (
+         <div className={classes.integrityLogs}>
+            <div className={classes.integrityLogsHeader}>
+               <div>Integrity Check Output Logs</div>
+               <div title={formatDateTime(verificationData.endedAt || verificationData.startedAt)}>
+                  <Icon type="clock" size={14} /> {timeAgo(new Date(verificationData.endedAt || verificationData.startedAt))}
+               </div>
+            </div>
+            <div className={classes.integrityLogMessages}>
+               {messages.map((message, index) => (
+                  <span key={index}>{message}</span>
+               ))}
+            </div>
+         </div>
+      );
+   };
+
+   const renderBackupFixSuggestion = (storageType: string) => {
+      if (!integrityResultLoaded) return null;
+      if (integrityCheckMutation.isPending) return null;
+      const backupResData = getBackupResultByStorage(storageType);
+      if (!backupResData?.hasError) return null;
+
+      return (
+         <div className={classes.fixSuggestion}>
+            <h4>Fix Suggestion</h4>
+            <div className={classes.fixSuggestionContent}>
+               {backupResData.fix &&
+                  backupResData.fix
+                     .split('\n')
+                     .map((line, index) => <p key={index}>{line.includes('`') ? <code>{line.replace(/`/g, '')}</code> : line}</p>)}
+               {!backupResData.fix && <p>No Suggestion for this issue.</p>}
+               <p>
+                  Learn more about fixing restic repo issues{' '}
+                  <a
+                     href="https://restic.readthedocs.io/en/latest/077_troubleshooting.html#find-out-what-is-damaged"
+                     target="_blank"
+                     rel="noreferrer"
+                  >
+                     here.
+                  </a>
+               </p>
+            </div>
+         </div>
+      );
+   };
+
+   const renderBackupStatus = (storageType: string) => {
+      if (!integrityResultLoaded) return null;
+      if (integrityCheckMutation.isPending) return null;
+      const backupResData = getBackupResultByStorage(storageType);
+      const backupHasError = backupResData?.hasError;
+      const backupMessage = backupResData?.message;
+
+      if (!backupHasError && backupMessage?.includes('No Issue Detected')) {
+         return <div className="label success">🥳 Yoohoo! No Corruption or Bit rot found. Your backup snapshots are completely restorable.</div>;
+      }
+
+      return <div className="label error">⛔ Error Found. {backupMessage}</div>;
+   };
+
+   const renderResultWithReplications = () => {
+      return (
+         <div className={`${classes.integrityResult} ${classes.withReplications}`}>
+            {verificationData &&
+               Object.entries(verificationData.result as Record<string, PlanVerifiedResult>).map(([storageType]) => {
+                  let theStorage = storage;
+                  if (storageType !== 'primary') {
+                     const mirror = replicationStorages.find((s) => s.storageId === storageType.replace('mirror_', ''));
+                     if (mirror) {
+                        theStorage = { name: mirror.storageName as string, type: mirror?.storageType as string, id: mirror?.storageId as string };
+                     }
+                  }
+                  if (!theStorage) return null;
+                  const backupResData = getBackupResultByStorage(storageType);
+                  const backupHasError = backupResData?.hasError;
+                  return (
+                     <div key={storageType} className={classes.replicationResult}>
+                        <h4 onClick={() => setShowContent(storageType)} className={showContent === storageType ? classes.active : ''}>
+                           <span>
+                              <img src={`/providers/${theStorage.type}.png`} />
+                              {theStorage.name} <i>{storageType === 'primary' ? 'Primary' : `Mirror`}</i>
+                           </span>
+                           <span>
+                              {backupHasError ? (
+                                 <Icon type="error-circle-filled" size={14} color="#ff4d4f" />
+                              ) : (
+                                 <Icon type="check-circle-filled" size={14} color="#06ba9f" />
+                              )}
+                           </span>
+                        </h4>
+                        {showContent === storageType && (
+                           <div className={classes.replicationResultContent}>
+                              {renderBackupStatus(storageType)}
+                              {renderLogs(storageType)}
+                              {renderBackupFixSuggestion(storageType)}
+                           </div>
+                        )}
+                     </div>
+                  );
+               })}
+         </div>
+      );
+   };
+
+   return (
+      <ActionModal
+         title="Check Backup Integrity"
+         message={
+            <div className={classes.integrityMessage}>
+               {!integrityResultLoaded && <p>Check the integrity of the backup snapshots now to check if they are restorable?</p>}
+               {integrityResultLoaded && (
+                  <div>
+                     {!hasReplications ? (
+                        <div className={classes.integrityResult}>
+                           {renderBackupStatus('primary')}
+                           {renderLogs('primary')}
+                           {renderBackupFixSuggestion('primary')}
+                        </div>
+                     ) : (
+                        renderResultWithReplications()
+                     )}
+                  </div>
+               )}
+               {integrityCheckMutation.isPending && (
+                  <div className="label in_progress">
+                     <Icon type="loading" size={14} />
+                     Checking integrity...
+                  </div>
+               )}
+            </div>
+         }
+         errorMessage={integrityCheckMutation.error?.message}
+         closeModal={() => onClose()}
+         width="600px"
+         primaryAction={{
+            title: integrityResultLoaded ? 'Check Again' : 'Check Now',
+            type: 'default',
+            isPending: integrityCheckMutation.isPending,
+            action: () => !taskPending && integrityCheckMutation.mutate({ planId }),
+         }}
+         secondaryAction={{
+            title: 'Close',
+            action: () => onClose(),
+         }}
+      />
+   );
+};
+
+export default PlanIntegrity;

package/src/components/Plan/PlanPendingBackup/PlanPendingBackup.tsx

@@ -4,13 +4,13 @@ import { useCheckActiveBackupsOrRestore } from '../../../services/plans';
 import classes from './PlanPendingBackup.module.scss';
 import Icon from '../../common/Icon/Icon';
 
-interface PlanPendingBackup {
+interface PlanPendingBackupProps {
    planId: string;
    type?: 'backup' | 'restore';
    onPendingDetect: () => void;
 }
 
-const PlanPendingBackup = ({ planId, type = 'backup', onPendingDetect }: PlanPendingBackup) => {
+const PlanPendingBackup = ({ planId, type = 'backup', onPendingDetect }: PlanPendingBackupProps) => {
    const [, setSearchParams] = useSearchParams();
    const checkActivesMutation = useCheckActiveBackupsOrRestore();
 

package/src/components/Settings/GeneralSettings/GeneralSettings.tsx

@@ -1,6 +1,10 @@
+import { useState } from 'react';
+import { ActionModal } from '../..';
 import { useTheme } from '../../../context/ThemeContext';
 import Input from '../../common/form/Input/Input';
+import Toggle from '../../common/form/Toggle/Toggle';
 import Tristate from '../../common/form/Tristate/Tristate';
+import TwoFactorSetup from '../TwoFactorSetup/TwoFactorSetup';
 import classes from './GeneralSettings.module.scss';
 
 interface GeneralSettingsProps {
@@ -9,8 +13,22 @@ interface GeneralSettingsProps {
    onUpdate: (settings: Record<string, any>) => void;
 }
 
-const GeneralSettings = ({ settings, onUpdate }: GeneralSettingsProps) => {
+const GeneralSettings = ({ settings, settingsID, onUpdate }: GeneralSettingsProps) => {
    const { setTheme } = useTheme();
+   const [show2FASetupConfirm, setShow2FASetupConfirm] = useState(false);
+   const [show2FASetup, setShow2FASetup] = useState(false);
+
+   const { totp } = settings || {};
+   const is2FASetupComplete = totp?.secret;
+
+   const update2FASetting = (enabled: boolean) => {
+      if (enabled === true && !is2FASetupComplete) {
+         setShow2FASetupConfirm(true);
+         return;
+      } else {
+         onUpdate({ ...settings, totp: { ...totp, enabled } });
+      }
+   };
 
    const handleThemeChange = (newThemeValue: 'auto' | 'light' | 'dark') => {
       setTheme(newThemeValue);
@@ -58,6 +76,24 @@ const GeneralSettings = ({ settings, onUpdate }: GeneralSettingsProps) => {
                inline={false}
             />
          </div>
+         <div className={classes.field}>
+            <Toggle label="Enable 2FA" fieldValue={settings?.totp?.enabled || false} onUpdate={(val) => update2FASetting(val)} inline={true} />
+         </div>
+         {show2FASetupConfirm && (
+            <ActionModal
+               title={`Enable Two-Factor Authentication (2FA)`}
+               message={`Are you sure you want to enable Two-Factor Authentication (2FA) to secure Pluton Login? You will be required to use an authenticator app to login if you enable this feature.`}
+               closeModal={() => setShow2FASetupConfirm(false)}
+               width="420px"
+               primaryAction={{
+                  title: `Yes, Enable 2FA`,
+                  type: 'default',
+                  isPending: false,
+                  action: () => setShow2FASetup(true),
+               }}
+            />
+         )}
+         {show2FASetup && <TwoFactorSetup id={settingsID} close={() => setShow2FASetup(false)} />}
       </div>
    );
 };

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

@@ -0,0 +1,62 @@
+.setupContainer {
+   .errorMsg {
+      background-color: var(--error-bg-color);
+      color: var(--error-text-color);
+      padding: 6px 12px;
+      border-radius: 6px;
+   }
+   .instructions {
+      ol {
+         margin: 0;
+         padding: 12px 20px;
+         padding-top: 0;
+      }
+   }
+   .qrSection {
+      .qrCode {
+         background-color: var(--background-color);
+         padding: 12px;
+         text-align: center;
+         border-radius: 6px 6px 0 0;
+      }
+      .setupKey {
+         padding: 6px;
+         margin-bottom: 12px;
+         background: var(--primary-color-light);
+         text-align: center;
+         border-radius: 0 0 6px 6px;
+      }
+      .verifySection {
+         display: flex;
+         & > div:nth-child(1) {
+            width: calc(100% - 140px);
+         }
+         & > button {
+            margin-left: 12px;
+         }
+      }
+   }
+}
+
+.successMessage {
+   .successMsg {
+      background-color: var(--success-bg-color);
+      color: var(--success-text-color);
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-weight: 600;
+   }
+   strong {
+      font-weight: 600;
+   }
+   code {
+      background-color: var(--line-color);
+      width: 100%;
+      display: block;
+      padding: 12px;
+      box-sizing: border-box;
+      border-radius: 6px;
+      white-space: pre;
+      font-size: 14px;
+   }
+}

package/src/components/Settings/TwoFactorSetup/TwoFactorSetup.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from 'react';
+import { useSetupTwoFactorAuth, useVerifyTwoFactorAuth } from '../../../services';
+import Icon from '../../common/Icon/Icon';
+import Modal from '../../common/Modal/Modal';
+import Input from '../../common/form/Input/Input';
+import Button from '../../common/Button/Button';
+import classes from './TwoFactorSetup.module.scss';
+
+interface TwoFactorSetupProps {
+   id: number;
+   close: () => void;
+}
+
+const TwoFactorSetup = ({ close, id = 1 }: TwoFactorSetupProps) => {
+   const [verificationCode, setVerificationCode] = useState('');
+   const setupMutation = useSetupTwoFactorAuth();
+   const verifyMutation = useVerifyTwoFactorAuth();
+   const isLoading = setupMutation.isPending || verifyMutation.isPending;
+
+   const qrCodeUrl: string = setupMutation.data?.result?.qrCodeDataUrl || '';
+   const setupKey: string = setupMutation.data?.result?.setupKey || '';
+   const recoveryCodes: string[] = verifyMutation.data?.result?.recoveryCodes || [];
+
+   useEffect(() => {
+      setupMutation.mutate(id);
+   }, []);
+
+   const verify2FA = () => {
+      verifyMutation.mutate({ code: verificationCode, id });
+   };
+
+   return (
+      <>
+         {!verifyMutation.isSuccess && (
+            <Modal title="Two-Factor Authentication (2FA) Setup" closeModal={() => !isLoading && close()} width="500px" disableBackdropClick={true}>
+               <div className={classes.twoFactorSetup}>
+                  {setupMutation.isPending && (
+                     <p>
+                        <Icon type="loading" /> Setting up 2FA...
+                     </p>
+                  )}
+                  {setupMutation.isError && <p className={classes.error}>Error setting up 2FA. Please try again.</p>}
+                  {setupMutation.isSuccess && (
+                     <div className={classes.setupContainer}>
+                        <div className={classes.instructions}>
+                           <h4>Setup Instructions</h4>
+                           <ol>
+                              <li>
+                                 Download and install an authenticator app on your mobile device (e.g., Google Authenticator, Authy, Microsoft
+                                 Authenticator).
+                              </li>
+                              <li>Open the authenticator app and choose to add a new account.</li>
+                              <li>Scan the QR code below using the authenticator app or manually enter the setup key provided.</li>
+                              <li>Once added, the app will generate a 6-digit verification code that refreshes every 30 seconds.</li>
+                              <li>Enter the current 6-digit code from the authenticator app into the field below to complete the setup.</li>
+                           </ol>
+                        </div>
+                        <div className={classes.qrSection}>
+                           <div className={classes.qrCode}>{qrCodeUrl && <img src={qrCodeUrl} alt="2FA QR Code" />}</div>
+                           <div className={classes.setupKey}>Setup Key: {setupKey}</div>
+                           {verifyMutation.isError && <p className={classes.errorMsg}>{verifyMutation.error?.message}</p>}
+                           <div className={classes.verifySection}>
+                              <Input
+                                 type="text"
+                                 placeholder="Enter 6-digit code"
+                                 fieldValue={verificationCode}
+                                 onUpdate={(val) => setVerificationCode(val)}
+                                 full={true}
+                              />
+                              <Button text="Verify & Enable 2FA" onClick={() => verify2FA()} variant="primary" size="sm" />
+                           </div>
+                        </div>
+                     </div>
+                  )}
+               </div>
+            </Modal>
+         )}
+
+         {verifyMutation.isSuccess && (
+            <Modal
+               title="Two-Factor Authentication (2FA) Setup"
+               closeModal={() => !isLoading && location.reload()}
+               width="500px"
+               disableBackdropClick={true}
+            >
+               <div className={classes.successMessage}>
+                  <p className={classes.successMsg}>Two-Factor Authentication (2FA) has been successfully enabled.</p>
+                  <p>
+                     <strong>
+                        Save these backup codes in a secure place. They will be required to access your account if you lose your device. They won't be
+                        shown again.
+                     </strong>
+                  </p>
+                  <code className={classes.recoveryCodes}>{recoveryCodes.join('\n')}</code>
+               </div>
+            </Modal>
+         )}
+      </>
+   );
+};
+
+export default TwoFactorSetup;

package/src/components/index.ts

@@ -88,6 +88,7 @@ export { default as PlanStrategySettings } from './Plan/PlanSettings/PlanStrateg
 export { default as PlanTypeSettings } from './Plan/PlanSettings/PlanTypeSettings';
 export { default as PlanStats } from './Plan/PlanStats/PlanStats';
 export { default as PlanUnlockModal } from './Plan/PlanUnlockModal/PlanUnlockModal';
+export { default as PlanIntegrity } from './Plan/PlanIntegrity/PlanIntegrity';
 
 // Mirror/Replication components
 export { default as MirrorStatusBadge } from './Plan/Mirrors/MirrorStatusBadge';
@@ -111,6 +112,7 @@ 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 TwoFactorSetup } from './Settings/TwoFactorSetup/TwoFactorSetup';
 
 // Skeleton components
 export { default as SkeletonItems } from './Skeleton/SkeletonItems';

package/src/routes/PlanSingle/PlanSingle.tsx

@@ -14,9 +14,11 @@ import PlanUnlockModal from '../../components/Plan/PlanUnlockModal/PlanUnlockMod
 import PlanRemoveModal from '../../components/Plan/PlanRemoveModal/PlanRemoveModal';
 import PlanProgress from '../../components/Plan/PlanProgress/PlanProgress';
 import PlanBackups from '../../components/Plan/PlanBackups/PlanBackups';
+import PlanIntegrity from '../../components/Plan/PlanIntegrity/PlanIntegrity';
 
 const PlanSingle = () => {
    const [showMoreOptions, setShowMoreOptions] = useState(false);
+   const [showIntegrityModal, setShowIntegrityModal] = useState(false);
    const { id } = useParams();
 
    const EditPlanModal = useComponentOverride('EditPlan', EditPlan);
@@ -126,6 +128,15 @@ const PlanSingle = () => {
                                     <Icon size={14} type="unlock" /> Unlock
                                  </li>
                               )}
+                              <li
+                                 className={classes.actionBtn}
+                                 onClick={() => {
+                                    setShowIntegrityModal(true);
+                                    setShowMoreOptions(false);
+                                 }}
+                              >
+                                 <Icon size={14} type="integrity" /> Check Integrity
+                              </li>
                               <li
                                  className={classes.actionBtn}
                                  onClick={() => {
@@ -174,6 +185,16 @@ const PlanSingle = () => {
                   close={() => setShowPruneModal(false)}
                />
             )}
+            {showIntegrityModal && !isSync && (
+               <PlanIntegrity
+                  planId={plan.id}
+                  taskPending={taskPending}
+                  verificationData={plan.verified}
+                  storage={plan.storage}
+                  replicationStorages={plan.settings.replication?.enabled ? plan.settings.replication.storages : []}
+                  onClose={() => setShowIntegrityModal(false)}
+               />
+            )}
             {showDeleteModal && (
                <PlanRemoveModal planId={id} taskPending={taskPending} actionInProgress={actionInProgress} close={() => setShowDeleteModal(false)} />
             )}