Fix updatanid display

crates/sp_client/src/api.rs

@@ -168,22 +168,22 @@ pub struct get_process_return(Vec<Process>);
 #[wasm_bindgen]
 pub fn get_processes() -> ApiResult<get_process_return> {
     let number_managers: u8 = 5;
-   
+
     let birthday_signet = 50000;
     let mut members: Vec<String> = Vec::with_capacity((number_managers) as usize);
 
-    for _ in 0..number_managers{
+    for _ in 0..number_managers {
         //add sp_client
         let sp_wallet = generate_sp_wallet(None, birthday_signet, true)?;
         let sp_address = sp_wallet.sp_client.get_receiving_address();
         members.push(sp_address);
     }
-       //instances of process
+    //instances of process
     let process1 = Process {
         id: 1,
         name: String::from("CREATE_ID"),
         version: String::from("1.0"),
-        members:  members.clone(),
+        members: members.clone(),
         html: crate::process::HTML_CREATE_ID.to_owned(),
         style: crate::process::CSS.to_owned(),
         script: "".to_owned(),
@@ -192,16 +192,16 @@ pub fn get_processes() -> ApiResult<get_process_return> {
         id: 2,
         name: String::from("UPDATE_ID"),
         version: String::from("1.0"),
-        members:  members.clone(),
+        members: members.clone(),
         html: crate::process::HTML_UPDATE_ID.to_owned(),
-        style: crate::process::CSS.to_owned(),
+        style: crate::process::CSSUPDATE.to_owned(),
-        script: "".to_owned(),
+        script: crate::process::JSUPDATE.to_owned(),
     };
     let process3 = Process {
         id: 3,
         name: String::from("RECOVER"),
         version: String::from("1.0"),
-        members:  members.clone(),
+        members: members.clone(),
         html: crate::process::HTML_RECOVER.to_owned(),
         style: crate::process::CSS.to_owned(),
         script: "".to_owned(),
@@ -210,7 +210,7 @@ pub fn get_processes() -> ApiResult<get_process_return> {
         id: 4,
         name: String::from("REVOKE_IMAGE"),
         version: String::from("1.0"),
-        members:  members.clone(),
+        members: members.clone(),
         html: crate::process::HTML_REVOKE_IMAGE.to_owned(),
         style: crate::process::CSS.to_owned(),
         script: "".to_owned(),
@@ -219,7 +219,7 @@ pub fn get_processes() -> ApiResult<get_process_return> {
         id: 5,
         name: String::from("REVOKE"),
         version: String::from("1.0"),
-        members:  members.clone(),
+        members: members.clone(),
         html: crate::process::HTML_REVOKE.to_owned(),
         style: crate::process::CSS.to_owned(),
         script: "".to_owned(),
@@ -233,13 +233,12 @@ pub fn get_processes() -> ApiResult<get_process_return> {
     data_process.push(process4);
     data_process.push(process5);
     Ok(get_process_return(data_process))
-    
 }
 
 //for testing
 /*#[wasm_bindgen]
 pub fn get_process() -> ApiResult<get_process_return>{
-    
+
     let number_managers: u8 = 5;
     let number_users:u8 = 10;
     let birthday_signet = 50000;
@@ -255,7 +254,7 @@ pub fn get_process() -> ApiResult<get_process_return>{
         let sp_wallet = generate_sp_wallet(None, birthday_signet, true)?;
         let sp_address: SilentPaymentAddress = sp_wallet.sp_client.get_receiving_address().try_into()?;
         members.push(ItemMember::new(Role::User,  sp_address, String::from("")));
-    }  
+    }
 
     let process = Process::new(members);
     let mut data_process: Vec<Process> = Vec::new();

crates/sp_client/src/process.rs

@@ -1,11 +1,10 @@
 use std::fmt::DebugStruct;
 
-use wasm_bindgen::prelude::*;
 use serde::{Deserialize, Serialize};
-use tsify::Tsify;
 use serde_json::{json, Value};
 use sp_backend::silentpayments::sending::SilentPaymentAddress;
-
+use tsify::Tsify;
+use wasm_bindgen::prelude::*;
 
 pub const HTML_CREATE_ID: &str = "
         <div class='card'>
@@ -320,7 +319,158 @@ pub const CSS: &str = "
     .passwordalert {
         color: #FF0000;
     }
-";
+    ";
+
+pub const CSSUPDATE: &str = "
+    <style>
+    body {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        background-color: #f4f4f4;
+        font-family: 'Arial', sans-serif;
+    }
+
+    .container {
+        max-width: 400px;
+        width: 100%;
+        padding: 20px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        background-color: #ffffff;
+        border-radius: 8px;
+        text-align: left;
+        overflow: hidden;
+    }
+
+    form {
+        display: grid;
+        grid-template-columns: repeat(1fr, 2fr);
+        gap: 10px;
+        max-width: 400px;
+        margin: auto;
+    }
+
+    .bg-primary {
+        background-color: #1a61ed;
+    }
+
+    .bg-primary:hover {
+        background-color: #457be8;
+    }
+
+    .bg-secondary {
+        background-color: #2b81ed;
+    }
+
+    .bg-secondary:hover {
+        background-color: #5f9bff;
+    }
+
+    label {
+        text-align: left;
+        padding-right: 10px;
+        line-height: 2;
+    }
+
+    input {
+        width: 100%;
+        padding: 8px;
+        box-sizing: border-box;
+    }
+
+    button {
+        grid-column: span 2;
+        display: inline-block;
+        color: #fff;
+        border: none;
+        padding: 12px 17px;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+    .div-text-area {
+        grid-column: span 2;
+    }
+
+    textarea {
+        width: 100%;
+        padding: 8px;
+        box-sizing: border-box;
+    }
+
+    .side-by-side {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        margin-bottom: 5px;
+    }
+    .circle-btn {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        border: none;
+        color: white;
+        padding: 0px;
+        text-align: center;
+    }
+
+    #fileInput {
+        width: 100%;
+        padding: 8px;
+        padding-left: 0px;
+        box-sizing: border-box;
+    }
+    </style>
+    ";
+
+pub const JSUPDATE: &str = "
+    var addSpAddressBtn = document.getElementById('add-sp-address-btn');
+    var removeSpAddressBtn = document.querySelectorAll('.minus-sp-address-btn');
+
+    addSpAddressBtn.addEventListener('click', function (event) {
+        addDynamicField(this);
+    });
+
+    function addDynamicField(element) {
+        var addSpAddressBlock = document.getElementById('sp-address-block');
+        var spAddress = addSpAddressBlock.querySelector('#sp-address').value;
+        addSpAddressBlock.querySelector('#sp-address').value = '';
+        spAddress = spAddress.trim();
+        if (spAddress != '') {
+            var sideBySideDiv = document.createElement('div');
+            sideBySideDiv.className = 'side-by-side';
+
+            var inputElement = document.createElement('input');
+            inputElement.type = 'text';
+            inputElement.name = 'spAddresses[]';
+            inputElement.setAttribute('form', 'no-form');
+            inputElement.value = spAddress;
+            inputElement.disabled = true;
+
+            var buttonElement = document.createElement('button');
+            buttonElement.type = 'button';
+            buttonElement.className =
+            'circle-btn bg-secondary minus-sp-address-btn';
+            buttonElement.innerHTML = '-';
+
+            buttonElement.addEventListener('click', function (event) {
+                removeDynamicField(this.parentElement);
+            });
+
+            sideBySideDiv.appendChild(inputElement);
+            sideBySideDiv.appendChild(buttonElement);
+
+            addSpAddressBlock.appendChild(sideBySideDiv);
+        }
+        function removeDynamicField(element) {
+            element.remove();
+        }
+    }
+    ";
 
 #[derive(Debug, Serialize, Deserialize, Default, Tsify)]
 #[tsify(into_wasm_abi, from_wasm_abi)]
@@ -329,9 +479,8 @@ pub struct Process {
     pub name: String,
     pub version: String,
     pub members: Vec<String>,
-    pub html:String,
+    pub html: String,
     pub style: String,
     pub script: String,
-     // Add conditions : process, member, peer, artefact
+    // Add conditions : process, member, peer, artefact
-
+}
-}

src/services.ts

@@ -184,11 +184,13 @@ class Services {
         let style = "";
         let script = "";
         try {
-            const processObject = await services.getProcessByName(Services.instance.current_process!);
+            const processObject = await services.getProcessByName("UPDATE_ID");
             if (processObject) {
                 body = processObject.html;
                 style = processObject.style;
                 script = processObject.script;
+                console.log("JS displayUpdateAnId body : "+body);
+
             }
         } catch (error) {
             console.error("Failed to retrieve process with Error:", error);