mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2026-02-17 13:52:14 +01:00
Implement 'Add Password' and 'Change Permissions' tools in V2 (#4195)
# Description of Changes Implement Add Password and Change Permissions tools in V2 (both in one because Change Permissions is a fake endpoint which just calls Add Password behind the scenes). --------- Co-authored-by: James <james@crosscourtanalytics.com>
This commit is contained in:
James Brunton
GitHub
189
frontend/src/tools/AddPassword.tsx
Normal file
189
frontend/src/tools/AddPassword.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Box, Button, Stack, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
|
||||
import { useFileContext } from "../contexts/FileContext";
|
||||
import { useToolFileSelection } from "../contexts/FileSelectionContext";
|
||||
|
||||
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
|
||||
import OperationButton from "../components/tools/shared/OperationButton";
|
||||
import ErrorNotification from "../components/tools/shared/ErrorNotification";
|
||||
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
|
||||
import ResultsPreview from "../components/tools/shared/ResultsPreview";
|
||||
|
||||
import AddPasswordSettings from "../components/tools/addPassword/AddPasswordSettings";
|
||||
import ChangePermissionsSettings from "../components/tools/changePermissions/ChangePermissionsSettings";
|
||||
|
||||
import { useAddPasswordParameters } from "../hooks/tools/addPassword/useAddPasswordParameters";
|
||||
import { useAddPasswordOperation } from "../hooks/tools/addPassword/useAddPasswordOperation";
|
||||
import { useAddPasswordTips } from "../components/tooltips/useAddPasswordTips";
|
||||
import { BaseToolProps } from "../types/tool";
|
||||
|
||||
const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { setCurrentMode } = useFileContext();
|
||||
const { selectedFiles } = useToolFileSelection();
|
||||
|
||||
const [collapsedPermissions, setCollapsedPermissions] = useState(true);
|
||||
|
||||
const addPasswordParams = useAddPasswordParameters();
|
||||
const addPasswordOperation = useAddPasswordOperation();
|
||||
const addPasswordTips = useAddPasswordTips();
|
||||
|
||||
// Endpoint validation
|
||||
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(addPasswordParams.getEndpointName());
|
||||
|
||||
useEffect(() => {
|
||||
addPasswordOperation.resetResults();
|
||||
onPreviewFile?.(null);
|
||||
}, [addPasswordParams.parameters, selectedFiles]);
|
||||
|
||||
const handleAddPassword = async () => {
|
||||
try {
|
||||
await addPasswordOperation.executeOperation(
|
||||
addPasswordParams.fullParameters,
|
||||
selectedFiles
|
||||
);
|
||||
if (addPasswordOperation.files && onComplete) {
|
||||
onComplete(addPasswordOperation.files);
|
||||
}
|
||||
} catch (error) {
|
||||
if (onError) {
|
||||
onError(error instanceof Error ? error.message : t('addPassword.error.failed', 'Add password operation failed'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleThumbnailClick = (file: File) => {
|
||||
onPreviewFile?.(file);
|
||||
sessionStorage.setItem('previousMode', 'addPassword');
|
||||
setCurrentMode('viewer');
|
||||
};
|
||||
|
||||
const handleSettingsReset = () => {
|
||||
addPasswordOperation.resetResults();
|
||||
onPreviewFile?.(null);
|
||||
setCurrentMode('addPassword');
|
||||
};
|
||||
|
||||
const hasFiles = selectedFiles.length > 0;
|
||||
const hasResults = addPasswordOperation.files.length > 0 || addPasswordOperation.downloadUrl !== null;
|
||||
const filesCollapsed = hasFiles;
|
||||
const passwordsCollapsed = hasResults;
|
||||
const permissionsCollapsed = collapsedPermissions || hasResults;
|
||||
|
||||
const previewResults = useMemo(() =>
|
||||
addPasswordOperation.files?.map((file, index) => ({
|
||||
file,
|
||||
thumbnail: addPasswordOperation.thumbnails[index]
|
||||
})) || [],
|
||||
[addPasswordOperation.files, addPasswordOperation.thumbnails]
|
||||
);
|
||||
|
||||
return (
|
||||
<ToolStepContainer>
|
||||
<Stack gap="sm" h="94vh" p="sm" style={{ overflow: 'auto' }}>
|
||||
{/* Files Step */}
|
||||
<ToolStep
|
||||
title={t('files.title', 'Files')}
|
||||
isVisible={true}
|
||||
isCollapsed={filesCollapsed}
|
||||
isCompleted={filesCollapsed}
|
||||
completedMessage={hasFiles ?
|
||||
selectedFiles.length === 1
|
||||
? t('files.selected.single', 'Selected: {{filename}}', { filename: selectedFiles[0].name })
|
||||
: t('files.selected.multiple', 'Selected: {{count}} files', { count: selectedFiles.length })
|
||||
: undefined}
|
||||
>
|
||||
<FileStatusIndicator
|
||||
selectedFiles={selectedFiles}
|
||||
placeholder={t('files.placeholder', 'Select a PDF file in the main view to get started')}
|
||||
/>
|
||||
</ToolStep>
|
||||
|
||||
{/* Passwords & Encryption Step */}
|
||||
<ToolStep
|
||||
title={t('addPassword.passwords.stepTitle', 'Passwords & Encryption')}
|
||||
isVisible={hasFiles}
|
||||
isCollapsed={passwordsCollapsed}
|
||||
isCompleted={passwordsCollapsed}
|
||||
onCollapsedClick={hasResults ? handleSettingsReset : undefined}
|
||||
completedMessage={passwordsCollapsed ? t('addPassword.passwords.completed', 'Passwords configured') : undefined}
|
||||
tooltip={addPasswordTips}
|
||||
>
|
||||
<AddPasswordSettings
|
||||
parameters={addPasswordParams.parameters}
|
||||
onParameterChange={addPasswordParams.updateParameter}
|
||||
disabled={endpointLoading}
|
||||
/>
|
||||
</ToolStep>
|
||||
|
||||
{/* Permissions Step */}
|
||||
<ToolStep
|
||||
title={t('addPassword.permissions.stepTitle', 'Document Permissions')}
|
||||
isVisible={hasFiles}
|
||||
isCollapsed={permissionsCollapsed}
|
||||
isCompleted={permissionsCollapsed}
|
||||
onCollapsedClick={hasResults ? handleSettingsReset : () => setCollapsedPermissions(!collapsedPermissions)}
|
||||
>
|
||||
<ChangePermissionsSettings
|
||||
parameters={addPasswordParams.permissions.parameters}
|
||||
onParameterChange={addPasswordParams.permissions.updateParameter}
|
||||
disabled={endpointLoading}
|
||||
/>
|
||||
</ToolStep>
|
||||
|
||||
<Box mt="md">
|
||||
<OperationButton
|
||||
onClick={handleAddPassword}
|
||||
isLoading={addPasswordOperation.isLoading}
|
||||
disabled={!addPasswordParams.validateParameters() || !hasFiles || !endpointEnabled}
|
||||
loadingText={t('loading')}
|
||||
submitText={t('addPassword.submit', 'Encrypt')}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Results Step */}
|
||||
<ToolStep
|
||||
title={t('results.title', 'Results')}
|
||||
isVisible={hasResults}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
{addPasswordOperation.status && (
|
||||
<Text size="sm" c="dimmed">{addPasswordOperation.status}</Text>
|
||||
)}
|
||||
|
||||
<ErrorNotification
|
||||
error={addPasswordOperation.errorMessage}
|
||||
onClose={addPasswordOperation.clearError}
|
||||
/>
|
||||
|
||||
{addPasswordOperation.downloadUrl && (
|
||||
<Button
|
||||
component="a"
|
||||
href={addPasswordOperation.downloadUrl}
|
||||
download={addPasswordOperation.downloadFilename}
|
||||
leftSection={<DownloadIcon />}
|
||||
color="green"
|
||||
fullWidth
|
||||
mb="md"
|
||||
>
|
||||
{t("download", "Download")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<ResultsPreview
|
||||
files={previewResults}
|
||||
onFileClick={handleThumbnailClick}
|
||||
isGeneratingThumbnails={addPasswordOperation.isGeneratingThumbnails}
|
||||
title={t('addPassword.results.title', 'Encrypted PDFs')}
|
||||
/>
|
||||
</Stack>
|
||||
</ToolStep>
|
||||
</Stack>
|
||||
</ToolStepContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddPassword;
|
||||
170
frontend/src/tools/ChangePermissions.tsx
Normal file
170
frontend/src/tools/ChangePermissions.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import { useEffect, useMemo } from "react";
|
||||
import { Button, Stack, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
|
||||
import { useFileContext } from "../contexts/FileContext";
|
||||
import { useToolFileSelection } from "../contexts/FileSelectionContext";
|
||||
|
||||
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
|
||||
import OperationButton from "../components/tools/shared/OperationButton";
|
||||
import ErrorNotification from "../components/tools/shared/ErrorNotification";
|
||||
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
|
||||
import ResultsPreview from "../components/tools/shared/ResultsPreview";
|
||||
|
||||
import ChangePermissionsSettings from "../components/tools/changePermissions/ChangePermissionsSettings";
|
||||
|
||||
import { useChangePermissionsParameters } from "../hooks/tools/changePermissions/useChangePermissionsParameters";
|
||||
import { useChangePermissionsOperation } from "../hooks/tools/changePermissions/useChangePermissionsOperation";
|
||||
import { useChangePermissionsTips } from "../components/tooltips/useChangePermissionsTips";
|
||||
import { BaseToolProps } from "../types/tool";
|
||||
|
||||
const ChangePermissions = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { setCurrentMode } = useFileContext();
|
||||
const { selectedFiles } = useToolFileSelection();
|
||||
|
||||
const changePermissionsParams = useChangePermissionsParameters();
|
||||
const changePermissionsOperation = useChangePermissionsOperation();
|
||||
const changePermissionsTips = useChangePermissionsTips();
|
||||
|
||||
// Endpoint validation
|
||||
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(changePermissionsParams.getEndpointName());
|
||||
|
||||
useEffect(() => {
|
||||
changePermissionsOperation.resetResults();
|
||||
onPreviewFile?.(null);
|
||||
}, [changePermissionsParams.parameters, selectedFiles]);
|
||||
|
||||
const handleChangePermissions = async () => {
|
||||
try {
|
||||
await changePermissionsOperation.executeOperation(
|
||||
changePermissionsParams.parameters,
|
||||
selectedFiles
|
||||
);
|
||||
if (changePermissionsOperation.files && onComplete) {
|
||||
onComplete(changePermissionsOperation.files);
|
||||
}
|
||||
} catch (error) {
|
||||
if (onError) {
|
||||
onError(error instanceof Error ? error.message : t('changePermissions.error.failed', 'Change permissions operation failed'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleThumbnailClick = (file: File) => {
|
||||
onPreviewFile?.(file);
|
||||
sessionStorage.setItem('previousMode', 'changePermissions');
|
||||
setCurrentMode('viewer');
|
||||
};
|
||||
|
||||
const handleSettingsReset = () => {
|
||||
changePermissionsOperation.resetResults();
|
||||
onPreviewFile?.(null);
|
||||
setCurrentMode('changePermissions');
|
||||
};
|
||||
|
||||
const hasFiles = selectedFiles.length > 0;
|
||||
const hasResults = changePermissionsOperation.files.length > 0 || changePermissionsOperation.downloadUrl !== null;
|
||||
const filesCollapsed = hasFiles;
|
||||
const settingsCollapsed = hasResults;
|
||||
|
||||
const previewResults = useMemo(() =>
|
||||
changePermissionsOperation.files?.map((file, index) => ({
|
||||
file,
|
||||
thumbnail: changePermissionsOperation.thumbnails[index]
|
||||
})) || [],
|
||||
[changePermissionsOperation.files, changePermissionsOperation.thumbnails]
|
||||
);
|
||||
|
||||
return (
|
||||
<ToolStepContainer>
|
||||
<Stack gap="sm" h="94vh" p="sm" style={{ overflow: 'auto' }}>
|
||||
{/* Files Step */}
|
||||
<ToolStep
|
||||
title={t('files.title', 'Files')}
|
||||
isVisible={true}
|
||||
isCollapsed={filesCollapsed}
|
||||
isCompleted={filesCollapsed}
|
||||
completedMessage={hasFiles ?
|
||||
selectedFiles.length === 1
|
||||
? t('files.selected.single', 'Selected: {{filename}}', { filename: selectedFiles[0].name })
|
||||
: t('files.selected.multiple', 'Selected: {{count}} files', { count: selectedFiles.length })
|
||||
: undefined}
|
||||
>
|
||||
<FileStatusIndicator
|
||||
selectedFiles={selectedFiles}
|
||||
placeholder={t('files.placeholder', 'Select a PDF file in the main view to get started')}
|
||||
/>
|
||||
</ToolStep>
|
||||
|
||||
{/* Settings Step */}
|
||||
<ToolStep
|
||||
title={t('settings.title', 'Settings')}
|
||||
isVisible={hasFiles}
|
||||
isCollapsed={settingsCollapsed}
|
||||
isCompleted={settingsCollapsed}
|
||||
onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
|
||||
completedMessage={settingsCollapsed ? t('changePermissions.completed', 'Permissions changed') : undefined}
|
||||
tooltip={changePermissionsTips}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<ChangePermissionsSettings
|
||||
parameters={changePermissionsParams.parameters}
|
||||
onParameterChange={changePermissionsParams.updateParameter}
|
||||
disabled={endpointLoading}
|
||||
/>
|
||||
|
||||
<OperationButton
|
||||
onClick={handleChangePermissions}
|
||||
isLoading={changePermissionsOperation.isLoading}
|
||||
disabled={!changePermissionsParams.validateParameters() || !hasFiles || !endpointEnabled}
|
||||
loadingText={t('loading')}
|
||||
submitText={t('changePermissions.submit', 'Change Permissions')}
|
||||
/>
|
||||
</Stack>
|
||||
</ToolStep>
|
||||
|
||||
{/* Results Step */}
|
||||
<ToolStep
|
||||
title={t('results.title', 'Results')}
|
||||
isVisible={hasResults}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
{changePermissionsOperation.status && (
|
||||
<Text size="sm" c="dimmed">{changePermissionsOperation.status}</Text>
|
||||
)}
|
||||
|
||||
<ErrorNotification
|
||||
error={changePermissionsOperation.errorMessage}
|
||||
onClose={changePermissionsOperation.clearError}
|
||||
/>
|
||||
|
||||
{changePermissionsOperation.downloadUrl && (
|
||||
<Button
|
||||
component="a"
|
||||
href={changePermissionsOperation.downloadUrl}
|
||||
download={changePermissionsOperation.downloadFilename}
|
||||
leftSection={<DownloadIcon />}
|
||||
color="green"
|
||||
fullWidth
|
||||
mb="md"
|
||||
>
|
||||
{t("download", "Download")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<ResultsPreview
|
||||
files={previewResults}
|
||||
onFileClick={handleThumbnailClick}
|
||||
isGeneratingThumbnails={changePermissionsOperation.isGeneratingThumbnails}
|
||||
title={t('changePermissions.results.title', 'Modified PDFs')}
|
||||
/>
|
||||
</Stack>
|
||||
</ToolStep>
|
||||
</Stack>
|
||||
</ToolStepContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChangePermissions;
|
||||
@@ -17,7 +17,7 @@ import CompressSettings from "../components/tools/compress/CompressSettings";
|
||||
import { useCompressParameters } from "../hooks/tools/compress/useCompressParameters";
|
||||
import { useCompressOperation } from "../hooks/tools/compress/useCompressOperation";
|
||||
import { BaseToolProps } from "../types/tool";
|
||||
import { CompressTips } from "../components/tooltips/CompressTips";
|
||||
import { useCompressTips } from "../components/tooltips/useCompressTips";
|
||||
|
||||
const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
const { t } = useTranslation();
|
||||
@@ -26,7 +26,7 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
|
||||
const compressParams = useCompressParameters();
|
||||
const compressOperation = useCompressOperation();
|
||||
const compressTips = CompressTips();
|
||||
const compressTips = useCompressTips();
|
||||
|
||||
// Endpoint validation
|
||||
const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("compress-pdf");
|
||||
|
||||
@@ -18,7 +18,7 @@ import AdvancedOCRSettings from "../components/tools/ocr/AdvancedOCRSettings";
|
||||
import { useOCRParameters } from "../hooks/tools/ocr/useOCRParameters";
|
||||
import { useOCROperation } from "../hooks/tools/ocr/useOCROperation";
|
||||
import { BaseToolProps } from "../types/tool";
|
||||
import { OcrTips } from "../components/tooltips/OCRTips";
|
||||
import { useOCRTips } from "../components/tooltips/useOCRTips";
|
||||
|
||||
const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
const { t } = useTranslation();
|
||||
@@ -27,7 +27,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
|
||||
const ocrParams = useOCRParameters();
|
||||
const ocrOperation = useOCROperation();
|
||||
const ocrTips = OcrTips();
|
||||
const ocrTips = useOCRTips();
|
||||
|
||||
// Step expansion state management
|
||||
const [expandedStep, setExpandedStep] = useState<'files' | 'settings' | 'advanced' | null>('files');
|
||||
@@ -105,7 +105,7 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
isCollapsed={hasFiles ? filesCollapsed : false}
|
||||
isCompleted={hasFiles}
|
||||
onCollapsedClick={undefined}
|
||||
completedMessage={hasFiles && filesCollapsed ?
|
||||
completedMessage={hasFiles && filesCollapsed ?
|
||||
selectedFiles.length === 1
|
||||
? `Selected: ${selectedFiles[0].name}`
|
||||
: `Selected: ${selectedFiles.length} files`
|
||||
@@ -215,4 +215,4 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
);
|
||||
}
|
||||
|
||||
export default OCR;
|
||||
export default OCR;
|
||||
|
||||
@@ -70,7 +70,7 @@ const Sanitize = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
|
||||
return (
|
||||
<ToolStepContainer>
|
||||
<Stack gap="sm" p="sm" style={{ height: '100vh', overflow: 'auto' }}>
|
||||
<Stack gap="sm" h="94vh" p="sm" style={{ overflow: 'auto' }}>
|
||||
{/* Files Step */}
|
||||
<ToolStep
|
||||
title={t('sanitize.steps.files', 'Files')}
|
||||
|
||||
Reference in New Issue
Block a user