data-primals-engine 1.0.10 → 1.1.0

package/client/src/RelationField.jsx

@@ -0,0 +1,247 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useQuery, useQueryClient } from 'react-query';
+import { useModelContext } from './contexts/ModelContext.jsx';
+import { TextField } from './Field.jsx';
+import { useAuthContext } from './contexts/AuthContext.jsx';
+import {conditionToApiSearchFilter, getDataAsString, getUserId} from 'data-primals-engine/data';
+import { FaEdit, FaTrash } from 'react-icons/fa';
+import Button from './Button.jsx';
+import {mainFieldsTypes} from "data-primals-engine/constants";
+import Draggable from "./Draggable.jsx";
+import {useTranslation} from "react-i18next";
+
+const RelationField = ({ field, help, onFocus, onBlur, onChange, value=null }) => {
+    const { models, dataByModel, setOnSuccessCallbacks, relationIds, setRelationIds } = useModelContext();
+    const { name, relation: modelName } = field;
+    const queryClient = useQueryClient();
+    const [selectedValues, setSelectedValues] = useState([]);
+    const [showResults, setResultsVisible] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const [history, setHistory] = useState([]);
+    const { me } = useAuthContext();
+    const tr = useTranslation()
+    const {t, i18n} = tr
+    const model = models?.find(f => f.name === modelName && f._user === me?.username);
+
+    // Fetch related data based on search value
+    const { data: results = [], isError, refetch } = useQuery(
+        ['api/search', model?.name, field?.name, searchValue],
+        async ({ signal }) => {
+            if (!model) return [];
+            const orFilter = [];
+            let filter = {};
+            if( field.relationFilter ){
+                filter = {"$and": field.relationFilter.filter};
+            }else if ( searchValue) {
+                model.fields.forEach(f => {
+                    if (f.asMain) {
+                        if( f.type !== 'relation' && mainFieldsTypes.includes(f.type))
+                            orFilter.push({"$regexMatch": { input: '$'+f.name, regex: searchValue}});
+                    }
+                })
+                if (!orFilter.length) {
+                    model.fields.forEach(f => {
+                        if (["string", "string_t", "richtext", "url"]?.includes(f.type)) {
+                            orFilter.push({"$regexMatch": { input: '$'+f.name, regex: searchValue}});
+                        }
+                    });
+                    if (!orFilter.length) {
+                        orFilter.push({"$eq": ['_id', searchValue]});
+                    }
+                }
+                filter = {'$or':orFilter};
+            }
+            const params = new URLSearchParams();
+            params.append('_user', getUserId(me));
+            params.append('model', field.relation);
+            params.append('limit', '1000');
+            params.append('depth', '2'); // Fetch related data with depth 2
+            return fetch(`/api/data/search?${params.toString()}`, {
+                body: JSON.stringify({ filter }),
+                method: 'POST',
+                signal: signal,
+                headers: { 'Content-Type': 'application/json' },
+            })
+                .then(e => e.json())
+                .then(e => e.data);
+        },
+        { enabled: !!model }
+    );
+
+    useEffect(() => {
+        setSearchValue('');
+        setHistory([]);
+    }, [modelName]);
+
+    useEffect(()=>{
+        if(searchValue==='' && !value && !field.multiple ){
+            onChange({ name, value: null });
+        }
+    },[searchValue])
+
+    useEffect(() => {
+        if (results?.length > 0) {
+            setHistory([...new Set([...history, ...results])]);
+        }
+    }, [results]);
+
+    useEffect(() => {
+        updateValue();
+    }, [history]);
+
+    useEffect(() => {
+        if( value)
+            updateValue();
+    }, [value]);
+    useEffect(() => {
+        if( value === null ){
+            onChange({name, value: null});
+            setSearchValue('');
+        }
+    }, [value]);
+
+    //console.log(field, value);
+    const updateValue = () => {
+        if (!field.multiple) {
+            const v = history.find(d => d._id === value);
+            if (v) {
+                setSearchValue(getDataAsString(model, v, tr, models) || '');
+                onChange({ name, value });
+            } else {
+                //onChange({ name, value: null });
+            }
+        } else {
+            if (Array.isArray(value)) {
+                setSelectedValues(value);
+                onChange({ name, value });
+            } else {
+                setSelectedValues([]);
+                onChange({ name, value: [] });
+            }
+        }
+    };
+
+    const handleClick = (e, data) => {
+        if (!field.multiple) {
+            setSearchValue(getDataAsString(model, history.find(d => d._id === data._id), tr, models) || '');
+            onChange({ name, value: data._id });
+        } else {
+            if (!selectedValues.includes(data._id)) {
+                setSelectedValues(values => {
+                    const value = [...values, data._id];
+                    onChange({ name, value });
+                    return value;
+                });
+            } else {
+                onChange({ name, value });
+            }
+        }
+        setResultsVisible(false);
+        ref.current?.focus();
+        e.preventDefault();
+    };
+
+    useEffect(() => {
+        if (showResults) refetch();
+    }, [showResults]);
+
+    const handleRemove = (element) => {
+        if (!field.multiple) return;
+        setSelectedValues(values => {
+            const value = values.filter(f => f !== element);
+            onChange({ name, value });
+            return value;
+        });
+    };
+
+    const ref = useRef();
+    const inputRef = useRef();
+
+    useEffect(() => {
+        if( inputRef?.current ){
+            inputRef.current.ref.setAttribute('autocomplete', 'off');
+        }
+    }, [inputRef]);
+    return (
+        <div onFocus={onFocus} onBlur={onBlur} className="field field-relation flex flex-row flex-start flex-1">
+            {help && <div className={"flex help"}>{help}</div>}
+
+            <div className="inner">
+                <TextField
+                    required={!field.multiple && field.required}
+                    ref={inputRef}
+                    multiline={field.multiline}
+                    autocomplete="none"
+                    name={field.name}
+                    id={field.name}
+                    onFocus={e => {
+                        setResultsVisible(true);
+                        queryClient.invalidateQueries(['api/search', field.name, searchValue]);
+                    }}
+                    value={searchValue}
+                    onChange={e => {
+                        if (!e.target.value) onChange({ name, value: '' });
+                        else onChange({ name, value: '' });
+                        setResultsVisible(true);
+                        setSearchValue(e.target.value);
+                    }}
+                    onBlur={(e) => {
+                        setResultsVisible(false);
+                    }}
+                />
+                <Button
+                    type="button" className="btn-form btn-last" onClick={() => {
+                    setSearchValue('');
+                    onChange({ name, value: null });
+                    setResultsVisible(!showResults);
+                }}><FaEdit /></Button>
+
+                {showResults && (
+                    <div className="results" onKeyDown={e => {
+                        if( e.key === 'Escape' )
+                            setResultsVisible(false);
+                    }} onBlur={e => {
+                        const t = e.target.parentNode.children[e.target.parentNode.childElementCount-1];
+                        if(t === e.target){
+                            setResultsVisible(false);
+                        }
+                    }} >
+                        {!isError &&
+                            (results || []).map(r => {
+                                const v = getDataAsString(models.find(m => m.name === modelName && m._user === me?.username), r, tr, models);
+                                return (
+                                    <div tabIndex={0} onKeyDown={e => {
+                                        if( e.key === 'Enter')
+                                            handleClick(e, r);
+                                    }} onMouseDown={e => handleClick(e, r)} className="item" key={r._id}>
+                                        {v}
+                                    </div>
+                                );
+                            })}
+                    </div>
+                )}
+            </div>
+            {field.multiple && selectedValues.length > 0 && (
+                <div ref={ref} tabIndex={0} className="selected-values flex flex-border flex-row flex-no-gap flex-start flex-1">
+                    <Draggable items={selectedValues} renderItem={(id,i) =>{
+                        const val = history.find(f => f._id === id) || dataByModel[modelName].find(f => f._id === id);
+                        if (!val) {
+                            return <div className="flex" key={id}>data non chargée<FaTrash onClick={() => handleRemove(id)} /></div>;
+                        }
+                        const v = getDataAsString(models.find(m => m.name === modelName && m._user === me?.username), val, tr, models);
+                        return <div onClick={() => handleRemove(id)} className="selected-value flex" key={id}>
+                            <span className="flex-1">{v}</span>
+                            <FaTrash className="cursor-pointer" />
+                        </div>;
+                    }} onChange={(arr) => {
+                        setSelectedValues(arr);
+                        onChange({ name, value: arr });
+                    }} />
+                </div>
+            )}
+
+        </div>
+    );
+};
+
+export default RelationField;

package/client/src/RelationValue.jsx

@@ -0,0 +1,230 @@
+import React, { useState, useEffect } from 'react';
+import { useQuery } from 'react-query';
+import { useModelContext } from './contexts/ModelContext.jsx';
+import {getDataAsString, getUserId} from 'data-primals-engine/data';
+import { Trans, useTranslation } from 'react-i18next';
+import {Dialog, DialogProvider} from './Dialog.jsx';
+import {FaMagnifyingGlass} from "react-icons/fa6";
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {CodeField, ColorField} from "./Field.jsx";
+import { randomColor } from "randomcolor";
+import {getObjectHash, getRand, isLightColor, setSeed} from "data-primals-engine/core";
+
+const RelationValue = ({ field, data, align }) => {
+    const { models, relations, setRelations, dataByModel, relationIds, setRelationIds, setDatasToLoad, datasToLoad } = useModelContext();
+    const [popupVisible, setPopupVisible] = useState(false);
+    const tr = useTranslation();
+    const { t, i18n } = tr;
+    const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+    const { me } = useAuthContext();
+    const value = data[field.name];
+    const relatedModelName = field.relation;
+    const model = models.find(m => m.name === relatedModelName && m._user === me?.username);
+    const params = new URLSearchParams();
+    params.append('_user', getUserId(me));
+    params.append('model', relatedModelName);
+    params.append('depth', '1');
+    params.append('lang', lang);
+    let ids = [];// Fetch related data with depth 2
+    if( value ){
+        if (Array.isArray(value)) {
+            ids = value.map(v => v._id || v).join(',');
+        } else {
+            ids = [value._id || value];
+        }
+    }
+    params.append('ids', ids);
+    const { data: relatedData, isLoading } = useQuery(
+        ['api/data/relation', field, value],
+        async () => {
+            if (!model || (typeof(ids) === 'object' && !ids.length) || !value) return [];
+            const rel = relations['api/data'+model.name+getObjectHash({ids})];
+            if( rel )
+                return Promise.resolve(rel.data);
+
+            return fetch(`/api/data/search?${params.toString()}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+            })
+                .then(res => res.json())
+                .then(res => {
+                    return res.data
+                });
+        },
+        { enabled: !!model && !!value, onSettled: (data) => {
+
+                const dt = {...relations};
+                dt['api/data'+model.name+getObjectHash({ids})] = { count: data.length, data };
+                setRelations(dt);
+            } }
+    );
+    const [intVal, setIntVal] = useState({});
+
+    useEffect(() => {
+        if (relatedData?.length > 0) {
+            updateIds();
+        }
+    }, [relatedData]);
+
+    const updateIds = () => {
+        let dt = [];
+        if (!model) {
+            return;
+        }
+        setRelationIds(rels => {
+            const relationIds = { ...rels };
+            let hasChanged = false;
+            model.fields.forEach(f => {
+                if (f.type === 'relation') {
+
+                    if (!datasToLoad.includes(f.relation) && !dt.includes(f.relation))
+                        dt.push(f.relation);
+                    const vals = Array.isArray(value) || value === null ? value : [value];
+
+                    if (!vals)
+                        return;
+                    vals.forEach((val) => {
+                        const v = typeof (val) === 'string' ? val : (val?._id || val);
+                        if( !v )
+                            return;
+                        if (!relationIds[f.relation])
+                            relationIds[f.relation] = [];
+                        if (!relationIds[f.relation].includes(v)) {
+                            relationIds[f.relation].push(v);
+                            hasChanged = true;
+                        }
+                    })
+                }
+            })
+            setDatasToLoad(datasToLoad => [...datasToLoad, ...dt]);
+            if (!hasChanged)
+                return rels;
+            return relationIds;
+        })
+    };
+
+
+    const handleModal = (rel) => {
+        setIntVal(rel);
+        setPopupVisible(true);
+    };
+
+    if (isLoading) return <>...</>;
+
+    return (
+<DialogProvider>
+        <div className="flex">
+            {(Array.isArray(value) ? value : [value]).map((v,vi) => {
+                const rel = relatedData?.find(f => {
+                    if (typeof (v) === 'string') {
+                        return f._id === v;
+                    } else if (Array.isArray(v)) {
+                        return f._id === v[0]._id;
+                    } else {
+                        return f._id === v._id;
+                    }
+                });
+                if (!rel) {
+                    return <></>;
+                }
+                let displayValue ;
+                try {
+                    displayValue = getDataAsString(model, rel, tr, models);
+                } catch (e) {
+                    console.log(e);
+                }
+                //console.log(model, rel, displayValue)
+                const bgColor = // Returns a bright color in RGB
+                    randomColor({
+                        seed: rel._hash+rel._id,
+                        luminosity: isLightColor(field.color) ? 'light' : 'dark',
+                        alpha: 0.42,
+                        format: 'rgba' // e.g. 'rgb(225,200,20)'
+                    });
+                return (
+                    <div style={{backgroundColor: bgColor, color: isLightColor(field.color) ? 'black' : '#eeeded'}} className={`relation-value flex flex-border ${align === 'left' ? '' : 'flex-centered'}`} key={rel._id}>
+                        {popupVisible && (
+                            <Dialog onClose={() => setPopupVisible(false)} isClosable={true} isModal={true} className="dialog-relation">
+                                <dl>
+                                    {model.fields.map(f => {
+                                        if (intVal[f.name] === undefined || intVal[f.name] === null || intVal[f.name] === '')
+                                            return <></>;
+                                        let columnName = t(`field_${model.name}_${f.name}`, f.name);
+                                        let span = columnName !== f.name ? <span style={{ fontWeight: 'lighter' }}>({f.name})</span> : "";
+                                        if (f.type === 'richtext') {
+                                            return <><dt>{columnName} {span}</dt><dd><div dangerouslySetInnerHTML={{ __html: intVal[f.name] }}></div></dd></>;
+                                        }
+                                        if(f.type === 'datetime'){
+                                            return <><dt>{columnName} {span}</dt><dd><>{new Date(intVal[f.name]).toLocaleDateString(lang, {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'})}</></dd></>
+                                        }
+                                        if(f.type === 'date'){
+                                            return <><dt>{columnName} {span}</dt><dd><>{new Date(intVal[f.name]).toLocaleDateString(lang, {year: 'numeric', month: 'numeric', day: 'numeric'})}</></dd></>
+                                        }
+                                        if (f.type === 'boolean') {
+                                            return <><dt>{columnName} {span}</dt><dd>{intVal[f.name] === true ? t('yes') : t('no')}</dd></>;
+                                        }
+                                        if (f.type === 'relation') {
+                                            return <><dt>{columnName} {span}</dt><dd><><RelationValue align='left' field={f} data={intVal || {}} /></></dd></>;
+                                        }
+                                        if (f.type === 'file') {
+                                            const value = intVal[f.name];
+                                            if (['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/svg+xml', 'image/webp', 'image/bmp', 'image/tiff', 'image/x-icon', 'image/x-windows-bmp'].includes(value.type))
+                                                return <><dt>{columnName} {span}</dt><dd><a
+                                                href={`/resources/${value.guid}`} target="_blank"
+                                                rel="noopener noreferrer"><img
+                                                src={`/resources/${value.guid}`}
+                                                alt={`${value.name} (${value.guid})`}/></a></dd></>;
+                                                return <><dt>{columnName} {span}</dt><dd><a style={{color: field.color}}
+                                                                                            href={`/resources/${value.guid}`}
+                                                                                            target="_blank"
+                                                                                            rel="noopener noreferrer">{value.name} ({value.guid})</a>;
+                                                    </dd></>;
+                                        }
+                                        if (f.type === 'color') {
+                                            return <><dt>{columnName} {span}</dt><dd>
+                                               <ColorField disabled={true} value={intVal} name={f.name} />
+                                            </dd></>;
+                                        }
+                                        if (f.type === 'code') {
+                                            let t;
+                                            try {
+                                                 t = f.language === 'json' ? JSON.stringify(intVal[f.name], null, 2) : '';
+
+                                            } catch (e) {
+                                                t = intVal[f.name].toString();
+                                            }
+                                            return <>
+                                                <dt>{columnName} {span}</dt>
+                                                <dd>
+                                                    <CodeField onChange={() => {
+                                                    }} language={field.language || 'json'}
+                                                               name={f.name} value={field.language === 'json' ? JSON.stringify(intVal[f.name], null, 2) : t} />
+                                                </dd>
+                                            </>;
+                                        }
+                                        if (f.type === 'password') {
+                                            return <></>;
+                                        }
+                                        if (f.type === 'string_t') {
+                                            return <>
+                                                <dt>{columnName} {span}</dt>
+                                                <dd>{intVal[f.name]?.value}</dd>
+                                            </>;
+                                        }
+                                        return <>
+                                            <dt>{columnName} {span}</dt>
+                                            <dd>{intVal[f.name]}</dd>
+                                        </>;
+                                    })}
+                                </dl>
+                            </Dialog>
+                        )}
+                        {rel && <div className="flex flex-no-wrap flex-mini-gap" onClick={() => handleModal(rel)}>{displayValue}<button><FaMagnifyingGlass /></button></div>}
+                    </div>
+                );
+            })}
+        </div></DialogProvider>
+    );
+};
+
+export default RelationValue;

package/client/src/RestoreConfirmationModal.jsx

@@ -0,0 +1,183 @@
+// client/src/RestoreConfirmationModal.jsx
+import React, { useState, useEffect } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Dialog } from "./Dialog.jsx";
+import Button from "./Button.jsx";
+import { TextField } from "./Field.jsx"; // Importer TextField
+import { useAuthContext } from "./contexts/AuthContext.jsx";
+import { useNotificationContext } from "./NotificationProvider.jsx";
+import {FaAws, FaInfo} from "react-icons/fa";
+import {NavLink} from "react-router"; // Pour une icône S3
+
+// Ajouter des props pour la configuration S3 et sa gestion
+const RestoreConfirmationModal = ({ isOpen, onClose, onConfirm, showS3Config = false }) => {
+    const { t } = useTranslation();
+    const { me, fetchMe } = useAuthContext(); // fetchMe pour recharger les données utilisateur après sauvegarde
+    const { addNotification } = useNotificationContext();
+
+    // États pour les champs de configuration S3
+    const [s3Config, setS3Config] = useState({
+        bucketName: '',
+        accessKeyId: '',
+        secretAccessKey: '', // Ne sera pas affiché directement mais envoyé
+        region: ''
+    });
+    const [isSavingS3Config, setIsSavingS3Config] = useState(false);
+    const [showConfig, setConfigVisible] = useState(false);
+
+    // Charger la configuration S3 existante de l'utilisateur au montage si me.s3Config existe
+    useEffect(() => {
+        if (me?.s3Config && showS3Config) {
+            setS3Config({
+                bucketName: me.s3Config.bucketName || '',
+                accessKeyId: me.s3Config.accessKeyId || '',
+                secretAccessKey: '', // Ne pas pré-remplir la clé secrète pour la sécurité
+                region: me.s3Config.region || '',
+                pathPrefix: me.s3Config.pathPrefix || ''
+            });
+        } else if (showS3Config) {
+            // Réinitialiser si pas de config ou si on quitte la section S3
+            setS3Config({ bucketName: '', accessKeyId: '', secretAccessKey: '', region: '', pathPrefix: '' });
+        }
+    }, [me, showS3Config, isOpen]); // Ajouter isOpen pour recharger si la modale est rouverte
+
+
+    const handleS3ConfigChange = (e) => {
+        const { name, value } = e.target;
+        setS3Config(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleSaveS3Config = async () => {
+        setIsSavingS3Config(true);
+        // Validation basique côté client
+        if (!s3Config.bucketName || !s3Config.accessKeyId || !s3Config.region) {
+            addNotification({ type: 'error', message: t('backup.s3config.validationError', 'Le nom du bucket, l\'Access Key ID et la Région sont requis.') });
+            setIsSavingS3Config(false);
+            return;
+        }
+
+        try {
+            const payload = { ...s3Config };
+            // N'envoyer la clé secrète que si elle a été modifiée
+            if (!payload.secretAccessKey) {
+                delete payload.secretAccessKey;
+            }
+
+            const response = await fetch('/api/user/s3-config', { // Endpoint pour sauvegarder la config S3
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    // Les en-têtes d'authentification (_user, Authorization) sont gérés globalement par le fetch wrapper si tu en as un, sinon ajoute-les ici
+                    // Exemple:
+                    // '_user': me?.username,
+                    // 'Authorization': `Bearer ${me?.token}`,
+                },
+                body: JSON.stringify(payload),
+            });
+            const result = await response.json();
+            if (response.ok && result.success) {
+                addNotification({ status: 'completed', title: t('backup.s3config.saveSuccess', 'Configuration S3 enregistrée avec succès.') });
+            } else {
+                addNotification({ status: 'error', title: result.error || t('backup.s3config.saveError', 'Erreur lors de l\'enregistrement de la configuration S3.') });
+            }
+        } catch (error) {
+            addNotification({ status: 'error', title: t('backup.s3config.saveError', 'Erreur lors de l\'enregistrement de la configuration S3.') });
+            console.error("Error saving S3 config:", error);
+        } finally {
+            setIsSavingS3Config(false);
+        }
+    };
+
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <Dialog isModal={true} isClosable={true} onClose={onClose}>
+            <div className="restore-confirmation-modal p-4"> {/* Ajout de padding pour l'esthétique */}
+                <h2>{t('backup.restore.title', "Envoi de votre lien de restauration")}</h2>
+
+                <>
+                    <p><Trans i18nKey="backup.restore.confirm">Un lien pour restaurer votre sauvegarde vous sera envoyé
+                        à votre adresse e-mail. Ce lien expirera dans 30 minutes. Voulez-vous vraiment
+                        continuer?</Trans></p>
+                    <div className="modal-actions flex justify-end space-x-2 mt-4">
+                        <Button onClick={onConfirm} className="btn-primary">
+                            <Trans i18nKey="btns.confirm">Confirmer</Trans>
+                        </Button>
+                        <Button onClick={onClose} className="btn-secondary">
+                            <Trans i18nKey="btns.cancel">Annuler</Trans>
+                        </Button>
+                    </div>
+                    <div className={"flex flex-centered actions"}>
+                        {!showConfig && (<NavLink onClick={() => setConfigVisible(true)}><Trans i18nKey={"backup.s3config.title"}></Trans></NavLink>)}
+                    </div>
+                </>
+
+                {showConfig && (<>
+                    <h2>{t('backup.s3config.title', 'Configuration du stockage S3')}</h2>
+                    <p><Trans i18nKey="backup.prez"></Trans></p>
+                    <form className="s3-config-form space-y-4"> {/* Ajout de space-y pour l'espacement vertical */}
+                        <TextField
+                            name="bucketName"
+                            className={"flex flex-1"}
+                            label={t('backup.s3config.bucketName', 'Nom du Bucket S3')}
+                            value={s3Config.bucketName}
+                            onChange={handleS3ConfigChange}
+                            placeholder="my-bucket-name"
+                            required
+                        />
+                        <TextField
+                            name="accessKeyId"
+                            className={"flex flex-1"}
+                            label={t('backup.s3config.accessKeyId', 'Access Key ID AWS')}
+                            value={s3Config.accessKeyId}
+                            onChange={handleS3ConfigChange}
+                            placeholder="AKIAIOSFODNN7EXAMPLE"
+                            required
+                        />
+                        <TextField
+                            name="secretAccessKey"
+                            className={"flex flex-1"}
+                            label={t('backup.s3config.secretAccessKey', 'Secret Access Key AWS')}
+                            type="password" // Important pour masquer la clé
+                            value={s3Config.secretAccessKey}
+                            onChange={handleS3ConfigChange}
+                            placeholder={t('backup.s3config.secretPlaceholder', 'Laisser vide pour ne pas modifier')} />
+                        <TextField
+                            name="region"
+                            className={"flex flex-1"}
+                            label={t('backup.s3config.region', 'Région AWS')}
+                            value={s3Config.region}
+                            onChange={handleS3ConfigChange}
+                            placeholder="eu-west-3"
+                            required
+                        />
+                        <TextField
+                            name="pathPrefix"
+                            label={t('backup.s3config.pathPrefix', 'Préfixe de chemin (Optionnel)')}
+                            value={s3Config.pathPrefix}
+                            onChange={handleS3ConfigChange}
+                            placeholder="saves/my-app/"
+                            help={t('backup.s3config.pathPrefixHelp', 'Ex: "mon-dossier/". Laissez vide pour la racine du bucket.')}
+                        />
+                        <div
+                            className="modal-actions flex justify-end space-x-2 mt-4"> {/* Flex pour aligner les boutons */}
+                            <Button onClick={handleSaveS3Config} disabled={isSavingS3Config}
+                                    className="btn-primary"> {/* Classe btn-primary pour le bouton principal */}
+                                {isSavingS3Config ? t('btns.saving', 'Enregistrement...') : t('btns.save', 'Enregistrer la configuration S3')}
+                            </Button>
+                            <Button onClick={onClose} className="btn-secondary">
+                                <Trans i18nKey="btns.cancel">Annuler</Trans>
+                            </Button>
+                        </div>
+                    </form>
+                </>)}
+
+            </div>
+        </Dialog>
+    );
+};
+
+export default RestoreConfirmationModal;