Add create backup button in my account

src/front/Components/Layouts/MyAccount/index.tsx

@@ -1,5 +1,6 @@
 import backgroundImage from "@Assets/images/background_refonte.svg";
 import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
+import Button, { EButtonVariant, EButtonSize, EButtonstyletype } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
@@ -9,6 +10,7 @@ import User from "le-coffre-resources/dist/Notary";
 import React, { useEffect } from "react";
 
 import classes from "./classes.module.scss";
+import MessageBus from "src/sdk/MessageBus";
 
 export default function MyAccount() {
 	const [user, setUser] = React.useState<User | null>(null);
@@ -33,6 +35,14 @@ export default function MyAccount() {
 			});
 	}, []);
 
+	const handleCreateRestorationFile = () => {
+		MessageBus.getInstance().exportBackupFile().then((backupFile) => {
+			console.log(backupFile);
+		}).catch((error) => {
+			console.error(error);
+		});
+	};
+
 	return (
 		<DefaultDoubleSidePage title={"Mon Compte"} image={backgroundImage} showHeader={true}>
 			<div className={classes["root"]}>
@@ -104,6 +114,16 @@ export default function MyAccount() {
 						canCopy
 					/>
 				</Form>
+
+				<Button
+					variant={EButtonVariant.PRIMARY}
+					size={EButtonSize.LG}
+					styletype={EButtonstyletype.CONTAINED}
+					fullwidth={true}
+					onClick={handleCreateRestorationFile}
+				>
+					Créer un fichier de restauration
+				</Button>
 			</div>
 		</DefaultDoubleSidePage>
 	);