Modify revoke page and service to download revoke image

.gitignore

@@ -3,3 +3,4 @@ pkg/
 Cargo.lock
 node_modules/
 dist/
+.vscode

crates/sp_client/src/injecteurhtml.rs

@@ -56,20 +56,22 @@ pub fn inject_html_recover() -> String {
 #[wasm_bindgen]
 pub fn inject_html_revokeimage() -> String {
     String::from("
-        <div class='card2'>
-            <form id='form4nk' action='#'>
-                <input type='hidden' id='currentpage' value='revokeimage' />
-                <button type='submit' id='submitButton'>
+        <div class='card'>
+            <div class='side-by-side'>
+                <h3>Revoke image</h3>
+                <div><a href='#' id='displayupdateanid'>Update an Id</a></div>
+            </div>
+        </div>
+        <div class='card-revoke'>
+            <a href='#' download='revoke_4NK.jpg'  id='revoke'>
                     <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'>
                     <path
                         d='M246.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3V320c0 17.7 14.3 32 32 32s32-14.3 32-32V109.3l73.4 73.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-128-128zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64c0 53 43 96 96 96H352c53 0 96-43 96-96V352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V352z'
                     />
                     </svg>
-                </button>
-            </form>
+            </a>
             <div class='image-container'>
-                <label class='image-label bg-secondary'>Revoke image</label>
-                <img src='assets/revoke.jpeg' alt='' />
+                <img src='assets/4nk_revoke.jpg' alt='' />
             </div>
         </div>
     ")

src/services.ts

@@ -105,22 +105,6 @@ class Services {
         await Services.instance.displayRevokeImage();
     }
 
-    private async getImage(imageUrl:string): Promise<Uint8Array|null> {
-        let imageBytes = null;
-        try {
-            const response = await fetch(imageUrl);
-            if (!response.ok) {
-                throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
-            }
-            const arrayBuffer = await response.arrayBuffer();
-            imageBytes = new Uint8Array(arrayBuffer);
-            console.log(imageBytes);
-        } catch (error) {
-            console.error("Failed to get image : "+imageUrl, error);
-        }
-        return imageBytes;
-    }
-
     public async displayRecover(): Promise<void> {
         Services.instance.injectHtml(Services.instance.get_html_recover());
         Services.instance.attachSubmitListener("form4nk", Services.instance.recover);
@@ -159,19 +143,39 @@ class Services {
     public async displayRevokeImage(): Promise<void> {
         const html = Services.instance.get_html_revokeimage();
         Services.instance.injectHtml(html);
-        Services.instance.attachSubmitListener("form4nk", Services.instance.revokeimage);
+        Services.instance.attachClickListener("displayupdateanid", Services.instance.revokeimage);
+
+        let imageBytes = await Services.instance.getRecoverImage('assets/4nk_revoke.jpg');
+        if (imageBytes != null) {
+            let blob = new Blob([imageBytes], {type: 'image/png'});
+            var elem = document.getElementById("revoke") as HTMLAnchorElement;
+            if (elem != null) {
+                elem.href = URL.createObjectURL(blob);
+            }
+        }
     }
 
     public get_html_revokeimage(): string {
         return this.sdkClient.inject_html_revokeimage();
     }
 
+    private async getRecoverImage(imageUrl:string): Promise<Uint8Array|null> {
+        let imageBytes = null;
+        try {
+            const response = await fetch(imageUrl);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
+            }
+            const arrayBuffer = await response.arrayBuffer();
+            imageBytes = new Uint8Array(arrayBuffer);
+        } catch (error) {
+            console.error("Failed to get image : "+imageUrl, error);
+        }
+        return imageBytes;
+    }
+
     public async revokeimage(event: Event): Promise<void> {
         event.preventDefault(); 
-        console.log("JS revokeimage submit ");
-        // TODO
-        alert("Revokeimage submit to do ..., next page Update an id ...");
-
         await Services.instance.displayUpdateAnId();
     }
 
@@ -194,6 +198,7 @@ class Services {
     }
 
     public async displayUpdateAnId() {
+        console.log("JS displayUpdateAnId process : "+this.current_process);
         let body = "";
         let style = "";
         let script = "";

src/style/4nk.css

@@ -114,7 +114,7 @@ a {
 .bg-primary:hover {
     background-color: #457be8;
 }
-.card2 {
+.card-revoke {
     display: flex;
     flex-direction: column;
     max-width: 400px;
@@ -127,14 +127,22 @@ a {
     align-items: center;
     overflow: hidden;
 }
-.card2 button {
+.card-revoke a {
     max-width: 50px;
     width: 100%;
     background: none;
     border: none;
     cursor: pointer;
 }
-.card2 svg {
+.card-revoke button {
+    max-width: 200px;
+    width: 100%;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #78a6de;
+}
+.card-revoke svg {
     width: 100%;
     height: auto;
     fill: #333;