From 09e57a1f442be5e26b2dee5187f26cb3ebdf522c Mon Sep 17 00:00:00 2001
From: dranc <dimitri.ranc@ubisoft.com>
Date: Thu, 4 Jan 2024 14:33:22 +0100
Subject: [PATCH 1/4] Change some UI with better understanding of picnic

---
 src/asset/html/index.html  | 49 +++++++++++++++++-----------
 src/asset/style/index.scss | 66 +++++++++++++++++++-------------------
 2 files changed, 64 insertions(+), 51 deletions(-)
diff --git a/src/asset/html/index.html b/src/asset/html/index.html
index 67fe68b..8c295c4 100644
--- a/src/asset/html/index.html
+++ b/src/asset/html/index.html
@@ -3,35 +3,48 @@
     <link rel="stylesheet" href="style/index.min.css" />
   </head>
   <body>
-    <nav class="demo imponent">
+    <nav class="imponent">
       <a href="" class="brand">
         <img class="logo" src="icons/icon_128.png" />
         <span>Filigrane</span>
       </a>
     </nav>
-    <div class="content">
-      <div class="main">
-        <p>Click here to add filigrane to any file.</p>
+    <div class="flex center four" style="padding-top: 3em; align-items: center; height: 100%">
+      <article class="card full half-600 third-1200">
+        <header>
+          <p>Click here to add filigrane to any file.</p>
 
-        <input id="input-file" type="file" multiple="true" />
+          <input id="input-file" type="file" multiple="true" />
+        </header>
 
-        <div id="files" class="files">
-          <div class="file" style="display: none">
-            <label class="name"></label>
-            <div class="actions"></div>
+        <div id="files" class="files" style="overflow-y: scroll; height: 50%;">
+          <div class="file stack">
+            <div class="flex six">
+              <span class="fourth">
+                <img class="center" src="icons/icon_48.png" height="48" width="48" />
+              </span>
+              <span class="three-fourth">
+                <label class="name">This is a name</label>
+                <br>
+                <small class="size">6ko</small>
+                <div class="actions">
+                  <span class="button stack">Revert</span>
+                  <span class="button stack">Reload</span>
+                  <span class="button stack">Preview</span>
+                  <span class="button stack">Download</span>
+                </div>
+              </span>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="bottom flex three grow">
-        <div class="two-third">
+
+        <footer>
+          <div class="menu">
           <input id="input-text" type="text" placeholder="Enter any text" />
-        </div>
-        <div>
-          <button id="submit">Add</button>
-        </div>
-      </div>
+          <button id="submit" type="submit">Add</button>
+        </footer>
+      </article>
     </div>
-
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/src/asset/style/index.scss b/src/asset/style/index.scss
index 0dd1af0..d88c46c 100644
--- a/src/asset/style/index.scss
+++ b/src/asset/style/index.scss
@@ -1,42 +1,42 @@
 @import '~picnic/src/picnic';
 
-$height: 500px;
-$width: 350px;
+// $height: 500px;
+// $width: 350px;
 
-body {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.content {
-  background-color: lightgrey;
-  position: relative;
-  margin: auto;
-  height: $height;
-  width: $width;
-  padding: 5px;
+// body {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
 
-  .main {
-    padding: 10px;
-    margin: auto;
-  }
+// .content {
+//   background-color: lightgrey;
+//   // position: relative;
+//   // margin: auto;
+//   height: $height;
+//   // width: $width;
+//   // padding: 5px;
 
-  .bottom {
-    position: absolute;
-    bottom: 0;
-    margin: auto;
-    left: 0;
-    right: 0;
+//   // .main {
+//   //   padding: 10px;
+//   //   margin: auto;
+//   // }
 
-    div {
-      margin: auto;
-    }
-  }
-}
+//   .bottom {
+//     position: absolute;
+//     bottom: 0;
+//     margin: auto;
+//     left: 0;
+//     right: 0;
 
-// .files {
-//   .file {
-//     display: none;
+//     div {
+//       margin: auto;
+//     }
 //   }
 // }
+
+// // .files {
+// //   .file {
+// //     display: none;
+// //   }
+// // }

From a2686a7f738ad7fd5116c32903b4d38cd3c71474 Mon Sep 17 00:00:00 2001
From: dranc <dimitri.ranc@ubisoft.com>
Date: Thu, 4 Jan 2024 17:48:23 +0100
Subject: [PATCH 2/4] more changes

---
 src/asset/html/index.html          | 29 ++++++++++++++++++-----------
 src/asset/html/options.html        |  6 ------
 src/index.ts                       |  4 +---
 src/popup.ts                       |  5 ++---
 src/services/filigrane.services.ts | 18 ++++++++++++++----
 5 files changed, 35 insertions(+), 27 deletions(-)
 delete mode 100644 src/asset/html/options.html

diff --git a/src/asset/html/index.html b/src/asset/html/index.html
index 8c295c4..52dcf7f 100644
--- a/src/asset/html/index.html
+++ b/src/asset/html/index.html
@@ -17,21 +17,25 @@
           <input id="input-file" type="file" multiple="true" />
         </header>
 
-        <div id="files" class="files" style="overflow-y: scroll; height: 50%;">
-          <div class="file stack">
+        <div id="files" class="files" style="overflow-y: scroll; height: 50%">
+          <div class="file stack" style="display: none">
             <div class="flex six">
               <span class="fourth">
-                <img class="center" src="icons/icon_48.png" height="48" width="48" />
+                <img
+                  class="fourth center"
+                  src="icons/icon_48.png"
+                  style="padding: 10px; margin: auto; display: block; width: 100%; overflow: hidden"
+                />
               </span>
               <span class="three-fourth">
                 <label class="name">This is a name</label>
-                <br>
+                <br />
                 <small class="size">6ko</small>
                 <div class="actions">
-                  <span class="button stack">Revert</span>
-                  <span class="button stack">Reload</span>
-                  <span class="button stack">Preview</span>
-                  <span class="button stack">Download</span>
+                  <button>Revert</button>
+                  <button>Reload</button>
+                  <button>Preview</button>
+                  <button>Download</button>
                 </div>
               </span>
             </div>
@@ -39,9 +43,12 @@
         </div>
 
         <footer>
-          <div class="menu">
-          <input id="input-text" type="text" placeholder="Enter any text" />
-          <button id="submit" type="submit">Add</button>
+          <div class="flex three">
+            <input class="two-third" id="input-text" type="text" placeholder="Enter any text" />
+            <span>
+              <button id="submit" type="submit" style="margin: 0 auto">Add</button>
+            </span>
+          </div>
         </footer>
       </article>
     </div>
diff --git a/src/asset/html/options.html b/src/asset/html/options.html
deleted file mode 100644
index 93d51e4..0000000
--- a/src/asset/html/options.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<html>
-    <head></head>
-    <body>
-        <p>This is an option page</p>
-    </body>
-</html>
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 2559aed..4cd55eb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -43,9 +43,7 @@ import { FiligraneServices } from './services/filigrane.services';
 
           const actions = fileElt.getElementsByClassName('actions')[0] as HTMLElement;
 
-          actions.innerText = 'Adding Filigrane';
-
-          const newFile = await FiligraneServices.addFiligraneToFile(file, filigrane);
+          const newFile = await FiligraneServices.addFiligraneToFile(file, filigrane, (step) => (actions.innerText = step));
           const newFileBlob = new Blob([newFile], { type: 'application/pdf' });
 
           const preview = document.createElement('button');
diff --git a/src/popup.ts b/src/popup.ts
index ee05bce..d42e046 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -1,5 +1,4 @@
-import { FiligraneServices } from "./services/filigrane.services";
-
+import { FiligraneServices } from './services/filigrane.services';
 
 (() => {
   let filesWithFiligrane: File[];
@@ -19,7 +18,7 @@ import { FiligraneServices } from "./services/filigrane.services";
       const files = (document.getElementById('input-file')! as HTMLInputElement).files!;
       if (files.length) {
         for (const filefromInput of files) {
-          const file = await FiligraneServices.addFiligraneToFile(filefromInput);
+          const file = await FiligraneServices.addFiligraneToFile(filefromInput, undefined, () => {});
           filesWithFiligrane.push(file);
         }
       }
diff --git a/src/services/filigrane.services.ts b/src/services/filigrane.services.ts
index 5f832b2..7d96ecd 100644
--- a/src/services/filigrane.services.ts
+++ b/src/services/filigrane.services.ts
@@ -15,13 +15,17 @@ function sleep(ms: number) {
 }
 
 export namespace FiligraneServices {
-  export async function addFiligraneToFile(file: File, watermark: string = 'this is a test from code'): Promise<File> {
+  export async function addFiligraneToFile(
+    file: File,
+    watermark: string = 'this is a test from code',
+    onEvent: (step: string) => void,
+  ): Promise<File> {
     // const uploadUrl = 'https://api.filigrane.beta.gouv.fr/api/document/files';
 
     var formData = new FormData();
     formData.append('files', file);
     formData.append('watermark', watermark);
-
+    onEvent('Sending file to beta.gouv.fr.');
     const { data, status } = await axios.post<ResponseData>(
       'https://api.filigrane.beta.gouv.fr/api/document/files',
       formData,
@@ -35,14 +39,17 @@ export namespace FiligraneServices {
         },
       },
     );
-    console.log(data, status);
 
+    onEvent('File has been sent.');
+
+    let cpt = 0;
     let res;
     let restart = false;
     do {
       restart = false;
       try {
         res = await axios.get<ResponseData2>(`https://api.filigrane.beta.gouv.fr/api/document/url/${data.token}`);
+        onEvent(`Trying to retrieve new file for the ${cpt} time.`);
       } catch (error) {
         console.log(error);
 
@@ -57,7 +64,7 @@ export namespace FiligraneServices {
       }
     } while (restart);
 
-    console.log(res);
+    onEvent('File is ready will delete it.');
 
     var param = {
       type: 'download',
@@ -68,6 +75,9 @@ export namespace FiligraneServices {
     const test = await axios.get(param.url, {
       responseType: 'blob',
     });
+
+    onEvent('File downloaded.');
+
     return new File([test.data], `${file.name}-filigrane.pdf`);
     // let container = new DataTransfer();
     // container.items.add(newFile);

From 631de4612c4e83e2fec4517e02b8020b98a87d96 Mon Sep 17 00:00:00 2001
From: dranc <dimitri.ranc@ubisoft.com>
Date: Fri, 5 Jan 2024 11:00:09 +0100
Subject: [PATCH 3/4] Fill the readme file

---
 README.md | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 88aa877..6d7cb08 100644
--- a/README.md
+++ b/README.md
@@ -1,16 +1,32 @@
-DO NOT USE
-this is a test repo in order to train me !
+# DO NOT USE !
 
-## todo
+This is a test repository i'm using to train me with Typescript. In fact it is working but I'm pretty sure this is not the best code you will ever see !
 
-As a user I want to be able to upload a file and add a filigrane to it.
+## What Filigrane does ?
 
-As a user I want to see all the files that are imported in differents input for the current tab.
+Filigrane is a small service that will help you add _watermark_ on your file in order to avoid anyone else to reuse it for another purpose. In fact there is other service that does it. For example, french gouvernment offer [FiligraneFacile](https://filigrane.beta.gouv.fr/) and to be honest right now this is the service that we use. But my goal is to create a browser extension in order to automatically apply the watermark when you submit a file to a form.
 
-As a user I want to be able to add a filigrane to the file that are imported in the tab.
+If it work as expexted, the user will have nothing to do, just fill a form online and the extension add a watermark and replace your file by the "protected" one.
 
-As a user I want to see a preview of the file that is edited.
+## User stories
 
-As a user I want to download the file that is updated.
+- As a user of the website I want to
+  - [x] upload a file and add a filigrane to it.
+  - [x] preview the file with the filigrane
+  - [x] download the protected file
+  - [ ] revert the protection and retrieve the original file
+- As a user of the extension I want to
+  - [ ] see all the files uploaded in the current tab
+  - [ ] add watermark to the files in the current tab
+  - [ ] automatically do the process for me
+  - [ ] revert the changes on a specific file
 
-As a user I want to revert the change and return to the original version of the file.
+## Technical backlog
+
+This is a list of technical tasks I want to adress if I have time.
+
+- [ ] Create a chrome extension that is using the same code as the service
+- [ ] Add some tests
+- [ ] Remove the dependency with FiligraneFacile, do all the process in local
+- [ ] Keep the file format as the original one
+- [ ] Remove webpack

From fe1e315b84509a094b0e6ec9c720625a03afd985 Mon Sep 17 00:00:00 2001
From: dranc <dimitri.ranc@ubisoft.com>
Date: Fri, 5 Jan 2024 16:20:26 +0100
Subject: [PATCH 4/4] preview file ready to merge

---
 src/asset/html/index.html          | 22 ++++----
 src/asset/style/index.scss         | 21 ++++++++
 src/index.ts                       | 77 +++++++++++++++-------------
 src/popup.ts                       |  4 +-
 src/services/filigrane.services.ts | 80 ++++++++++++++++++------------
 5 files changed, 126 insertions(+), 78 deletions(-)

diff --git a/src/asset/html/index.html b/src/asset/html/index.html
index 52dcf7f..08ebb7e 100644
--- a/src/asset/html/index.html
+++ b/src/asset/html/index.html
@@ -9,7 +9,7 @@
         <span>Filigrane</span>
       </a>
     </nav>
-    <div class="flex center four" style="padding-top: 3em; align-items: center; height: 100%">
+    <div class="content flex center four">
       <article class="card full half-600 third-1200">
         <header>
           <p>Click here to add filigrane to any file.</p>
@@ -17,25 +17,25 @@
           <input id="input-file" type="file" multiple="true" />
         </header>
 
-        <div id="files" class="files" style="overflow-y: scroll; height: 50%">
+        <div id="files" class="files">
           <div class="file stack" style="display: none">
             <div class="flex six">
               <span class="fourth">
-                <img
+                <embed
+                  id="preview"
                   class="fourth center"
-                  src="icons/icon_48.png"
                   style="padding: 10px; margin: auto; display: block; width: 100%; overflow: hidden"
-                />
+                  alt="Click to see preview"
+                ></embed>
               </span>
               <span class="three-fourth">
-                <label class="name">This is a name</label>
+                <label id="name">This is a name</label>
                 <br />
-                <small class="size">6ko</small>
+                <small id="size">6ko</small>
+                <div class="processing"></div>
                 <div class="actions">
-                  <button>Revert</button>
-                  <button>Reload</button>
-                  <button>Preview</button>
-                  <button>Download</button>
+                  <!-- <button id="revert">Revert</button> -->
+                  <button id="download">Download</button>
                 </div>
               </span>
             </div>
diff --git a/src/asset/style/index.scss b/src/asset/style/index.scss
index d88c46c..d3b3066 100644
--- a/src/asset/style/index.scss
+++ b/src/asset/style/index.scss
@@ -1,5 +1,26 @@
 @import '~picnic/src/picnic';
 
+.content {
+  padding-top: 3em;
+  align-items: center;
+  height: 100%;
+
+  .files {
+    overflow-y: scroll;
+    height: 50%;
+
+    .file {
+      &:not(.loading) .processing {
+        display: none;
+      }
+
+      &.loading .actions {
+        display: none;
+      }
+    }
+  }
+}
+
 // $height: 500px;
 // $width: 350px;
 
diff --git a/src/index.ts b/src/index.ts
index 4cd55eb..218ffa6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,7 @@ import { saveAs } from 'file-saver';
 import { FiligraneServices } from './services/filigrane.services';
 
 (() => {
-  const filesMap = new Map<string, File>();
+  const filigraneServices = new FiligraneServices();
 
   document.addEventListener('DOMContentLoaded', () => {
     const inputFile = document.getElementById('input-file') as HTMLInputElement;
@@ -15,52 +15,61 @@ import { FiligraneServices } from './services/filigrane.services';
 
     inputFile.addEventListener('change', (ev) => {
       for (const file of inputFile.files!) {
-        const id = crypto.randomUUID();
-
-        console.log(fileExample);
+        const id = filigraneServices.prepareFile(file);
 
         const newFileElement = fileExample.cloneNode(true) as HTMLElement;
         newFileElement.id = id;
-
-        (newFileElement.getElementsByClassName('name')[0] as HTMLElement).innerText = file.name;
+        console.log(URL.createObjectURL(filigraneServices.getBlobFor(id)));
+        const preview = newFileElement.querySelector('#preview') as HTMLEmbedElement;
+        const blob = filigraneServices.getBlobFor(id);
+        preview.type = blob.type;
+        preview.src = URL.createObjectURL(blob);
+
+        (newFileElement.querySelector('#name') as HTMLElement).innerText = file.name;
+        (newFileElement.querySelector('#size') as HTMLElement).innerText = file.size.toString();
+
+        newFileElement.querySelector('#preview')!.addEventListener('click', () => {
+          const url = URL.createObjectURL(filigraneServices.getBlobFor(id));
+          console.log(id);
+          console.log(url);
+          window.open(url);
+        });
+
+        newFileElement.querySelector('#download')!.addEventListener('click', () => {
+          saveAs(filigraneServices.getBlobFor(id), `${file.name}.pdf`);
+        });
 
         files.appendChild(newFileElement);
-        filesMap.set(id, file);
 
         newFileElement.style.display = '';
       }
     });
 
     submit!.onclick = async (ev) => {
-      const filigrane = inputText.value || `Added from Filigrane.app on ${new Date().toDateString()}.`;
       for (const fileElt of files.children) {
         if (fileElt.id) {
-          console.log(`sending ${fileElt.id}`);
-          const file = filesMap.get(fileElt.id);
-          if (!file) {
-            throw Error(`File ${fileElt.id} lost ?`);
-          }
-
-          const actions = fileElt.getElementsByClassName('actions')[0] as HTMLElement;
-
-          const newFile = await FiligraneServices.addFiligraneToFile(file, filigrane, (step) => (actions.innerText = step));
-          const newFileBlob = new Blob([newFile], { type: 'application/pdf' });
-
-          const preview = document.createElement('button');
-          preview.innerText = 'Preview';
-          preview.onclick = () => {
-            window.open(URL.createObjectURL(newFileBlob));
-          };
-
-          const download = document.createElement('button');
-          download.innerText = 'Download';
-          download.onclick = () => {
-            saveAs(newFileBlob, `${file.name}.pdf`);
-          };
-
-          actions.innerHTML = '';
-          actions.appendChild(preview);
-          actions.appendChild(download);
+          fileElt.classList.add('loading');
+
+          const process = fileElt.getElementsByClassName('processing')[0] as HTMLElement;
+
+          await filigraneServices.addFiligraneToFile(
+            fileElt.id,
+            inputText.value,
+            (step) => (process.innerText = step),
+            () => {
+              const url = URL.createObjectURL(filigraneServices.getBlobFor(fileElt.id));
+
+              const preview = fileElt.querySelector('#preview') as HTMLEmbedElement;
+              const blob = filigraneServices.getBlobFor(fileElt.id);
+              preview.type = blob.type;
+              preview.src = URL.createObjectURL(blob);
+
+              fileElt.classList.remove('loading');
+            },
+            (message: string) => {
+              fileElt.classList.remove('loading');
+            },
+          );
         }
       }
     };
diff --git a/src/popup.ts b/src/popup.ts
index d42e046..9aebc4f 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -18,8 +18,8 @@ import { FiligraneServices } from './services/filigrane.services';
       const files = (document.getElementById('input-file')! as HTMLInputElement).files!;
       if (files.length) {
         for (const filefromInput of files) {
-          const file = await FiligraneServices.addFiligraneToFile(filefromInput, undefined, () => {});
-          filesWithFiligrane.push(file);
+          // const file = await FiligraneServices.addFiligraneToFile(filefromInput, undefined, () => {});
+          // filesWithFiligrane.push(file);
         }
       }
 
diff --git a/src/services/filigrane.services.ts b/src/services/filigrane.services.ts
index 7d96ecd..4e8e35c 100644
--- a/src/services/filigrane.services.ts
+++ b/src/services/filigrane.services.ts
@@ -14,31 +14,48 @@ function sleep(ms: number) {
   });
 }
 
-export namespace FiligraneServices {
-  export async function addFiligraneToFile(
-    file: File,
-    watermark: string = 'this is a test from code',
+export class FiligraneServices {
+  private readonly data: Map<string, { origin: File; filigrane?: File }> = new Map();
+
+  public prepareFile(file: File): string {
+    let id: string;
+
+    do {
+      id = crypto.randomUUID();
+    } while (this.data.has(id));
+
+    this.data.set(id, { origin: file });
+
+    return id;
+  }
+
+  public async addFiligraneToFile(
+    id: string,
+    watermark: string = `Added with Filigrane.app on ${new Date().toDateString()}.`,
     onEvent: (step: string) => void,
-  ): Promise<File> {
-    // const uploadUrl = 'https://api.filigrane.beta.gouv.fr/api/document/files';
+    onCompleted: () => void,
+    onError: (message: string) => void,
+  ): Promise<void> {
+    if (!this.data.has(id)) {
+      onError('File is not find in the data.');
+      return;
+    }
+
+    const file = this.data.get(id)!.origin;
 
     var formData = new FormData();
     formData.append('files', file);
     formData.append('watermark', watermark);
+
     onEvent('Sending file to beta.gouv.fr.');
-    const { data, status } = await axios.post<ResponseData>(
-      'https://api.filigrane.beta.gouv.fr/api/document/files',
-      formData,
-      // {
-      //   files: [new File(e.target.result, 'name.pdf')],
-      //   watermark: 'this is a test from code'
-      // } as SendData,
-      {
-        headers: {
-          Accept: 'application/json',
-        },
+
+    const baseUrl = 'https://api.filigrane.beta.gouv.fr/api/document';
+
+    const { data, status } = await axios.post<ResponseData>(`${baseUrl}/files`, formData, {
+      headers: {
+        Accept: 'application/json',
       },
-    );
+    });
 
     onEvent('File has been sent.');
 
@@ -48,15 +65,11 @@ export namespace FiligraneServices {
     do {
       restart = false;
       try {
-        res = await axios.get<ResponseData2>(`https://api.filigrane.beta.gouv.fr/api/document/url/${data.token}`);
-        onEvent(`Trying to retrieve new file for the ${cpt} time.`);
+        onEvent(`Trying to retrieve new file for the ${cpt} time(s).`);
+        res = await axios.get<ResponseData2>(`${baseUrl}/url/${data.token}`);
       } catch (error) {
-        console.log(error);
-
         if (error instanceof AxiosError && error.response) {
-          console.log(error.status);
           if (error.response.status === 404 || error.response.status === 409) {
-            console.log('sleep anbd restart');
             await sleep(1500);
             restart = true;
           }
@@ -68,7 +81,7 @@ export namespace FiligraneServices {
 
     var param = {
       type: 'download',
-      url: `https://api.filigrane.beta.gouv.fr/api/document/${data.token}`,
+      url: `${baseUrl}/${data.token}`,
       filename: file.name,
     };
 
@@ -76,13 +89,18 @@ export namespace FiligraneServices {
       responseType: 'blob',
     });
 
-    onEvent('File downloaded.');
+    onEvent('File ready.');
+
+    this.data.get(id)!.filigrane = new File([test.data], `${file.name}-filigrane.pdf`);
 
-    return new File([test.data], `${file.name}-filigrane.pdf`);
-    // let container = new DataTransfer();
-    // container.items.add(newFile);
-    // input.files = container.files;
+    onCompleted();
+  }
 
-    // return data.token
+  public getBlobFor(id: string): Blob {
+    const file = this.data.get(id)!;
+    if (file.filigrane) {
+      return new Blob([file.filigrane], { type: 'application/pdf' });
+    }
+    return new Blob([file.origin], { type: file.origin.type });
   }
 }
