diaREact/resources/js/components/pages/Form.tsx

97 lines
3.4 KiB
TypeScript

import * as React from 'react';
import {EncryptStorage} from 'storage-encryption';
import {Button, Stack, TextField} from "@mui/material";
import MDEditor from '@uiw/react-md-editor';
import rehypeSanitize from "rehype-sanitize";
let encryptStorage = new EncryptStorage('test'); // TODO la clef doit venir de l'utilisateur
export default function PageForm({setListPages, csrf, url, passphrase}) {
const isPassphraseSet = passphrase !== null;
const [content, setContent] = React.useState<string>("");
const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
encryptStorage = new EncryptStorage(passphrase);
const HTMLForm : HTMLFormElement = event.currentTarget;
const decryptedFormData = new FormData(HTMLForm);
const encryptedFormData = new FormData();
for (const [key, value] of decryptedFormData.entries()) {
encryptStorage.encrypt('uuid'+key, value);
const newEncryptedString = localStorage.getItem('uuid'+key);
if (newEncryptedString) {
encryptedFormData.append(key, newEncryptedString);
}
}
encryptStorage.encrypt('uuidtext', content);
encryptedFormData.append("text", ""+localStorage.getItem('uuidtext'))
encryptedFormData.append('_token', csrf);
const response = await fetch(url, {
method: 'POST',
body: encryptedFormData
});
const json = await response.json();
const uuid = json.uuid;
for (const key of decryptedFormData.keys()) {
const newEncryptedString = localStorage.getItem('uuid'+key);
localStorage.setItem(uuid+key, ""+newEncryptedString);
localStorage.removeItem("uuid"+key);
}
if (json.success) {
HTMLForm.reset();
const savedDate = json.date;
const oSavedDate = new Date();
oSavedDate.setFullYear(savedDate.substring(0, 4), savedDate.substring(4,6), savedDate.substring(6,8));
oSavedDate.setHours(savedDate.substring(9,11), savedDate.substring(11,13), savedDate.substring(13,15));
setListPages(previousList => [
{
id: uuid,
date: oSavedDate.toLocaleString(),
title: decryptedFormData.get("title"),
content: decryptedFormData.get("text"),
},
...previousList
]);
}
}
function updateContent(value: string|undefined): void {
setContent(value as string);
}
if (isPassphraseSet) {
return (
<form action={url} id="postPage" method="post" onSubmit={onSubmit}>
<Stack
component="div"
spacing={2}
>
<TextField
label="Titre"
id="title"
name="title"
variant="outlined"
size="small"
/>
<MDEditor
value={content}
onChange={updateContent}
previewOptions={{
rehypePlugins: [[rehypeSanitize]],
}}
/>
<Button variant="contained" type={"submit"}>
Enregistrer
</Button>
</Stack>
</form>
);
}
return (<div></div>);
}