mv html to ts, update process acquisition

This commit is contained in:
Sosthene00 2024-04-17 08:41:38 +02:00
parent 7d22c033bb
commit 0d42c289cb
3 changed files with 263 additions and 220 deletions

View File

@ -197,60 +197,38 @@ 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 {
//add sp_client
let sp_wallet = generate_sp_wallet(None, birthday_signet, true)?;
let sp_address = sp_wallet.get_client().get_receiving_address();
members.push(sp_address);
}
let MEMBERS: [String;5] = [
"tsp1qqdvmxycf3c3tf2qhpev0npx25rj05270d6j2pcsrfk2qn5gdy0rpwq6hd9u9sztl3fwmrzzqafzl3ymkq86aqfz5jl5egdkz72tqmhcnrswdz3pk".to_owned(),
"tsp1qqwafwn7dcr9d6ta0w8fjtd9s53u72x9qmmtgd8adqr7454xl90a5jq3vw23l2x8ypt55nrg7trl9lwz5xr5j357ucu4sf9rfmvc0zujcpqcps6rm".to_owned(),
"tsp1qqw02t5hmg5rxpjdkmjdnnmhvuc76wt6vlqdmn2zafnh6axxjd6e2gqcz04gzvnkzf572mur8spyx2a2s8sqzll2ymdpyz59cpl96j4zuvcdvrzxz".to_owned(),
"tsp1qqgpay2r5jswm7vcv24xd94shdf90w30vxtql9svw7qnlnrzd6xt02q7s7z57uw0sssh6c0xddcrryq4mxup93jsh3gfau3autrawl8umkgsyupkm".to_owned(),
"tsp1qqtsqmtgnxp0lsmnxyxcq52zpgxwugwlq8urlprs5pr5lwyqc789gjqhx5qra6g4rszsq43pms6nguee2l9trx905rk5sgntek05hnf7say4ru69y".to_owned(),
];
//instances of process
let process1 = Process {
id: 1,
name: String::from("CREATE_ID"),
id: 6,
name: String::from("Messaging"),
version: String::from("1.0"),
members: members.clone(),
html: crate::process::HTML_CREATE_ID.to_owned(),
members: MEMBERS.to_vec(),
html: crate::process::HTML_MESSAGING.to_owned(),
style: crate::process::CSS.to_owned(),
script: "".to_owned(),
};
let process2 = Process {
id: 2,
name: String::from("UPDATE_ID"),
id: 7,
name: String::from("Kotpart"),
version: String::from("1.0"),
members: members.clone(),
html: crate::process::HTML_UPDATE_ID.to_owned(),
style: crate::process::CSSUPDATE.to_owned(),
script: crate::process::JSUPDATE.to_owned(),
members: MEMBERS.to_vec(),
html: crate::process::HTML_MESSAGING.to_owned(),
style: crate::process::CSS.to_owned(),
script: "".to_owned(),
};
let process3 = Process {
id: 3,
name: String::from("RECOVER"),
id: 8,
name: String::from("Storage"),
version: String::from("1.0"),
members: members.clone(),
html: crate::process::HTML_RECOVER.to_owned(),
style: crate::process::CSS.to_owned(),
script: "".to_owned(),
};
let process4 = Process {
id: 4,
name: String::from("REVOKE_IMAGE"),
version: String::from("1.0"),
members: members.clone(),
html: crate::process::HTML_REVOKE_IMAGE.to_owned(),
style: crate::process::CSS.to_owned(),
script: "".to_owned(),
};
let process5 = Process {
id: 5,
name: String::from("REVOKE"),
version: String::from("1.0"),
members: members.clone(),
html: crate::process::HTML_REVOKE.to_owned(),
members: MEMBERS.to_vec(),
html: crate::process::HTML_MESSAGING.to_owned(),
style: crate::process::CSS.to_owned(),
script: "".to_owned(),
};
@ -260,8 +238,6 @@ pub fn get_processes() -> ApiResult<get_process_return> {
data_process.push(process1);
data_process.push(process2);
data_process.push(process3);
data_process.push(process4);
data_process.push(process5);
Ok(get_process_return(data_process))
}

View File

@ -6,144 +6,63 @@ use sp_backend::silentpayments::sending::SilentPaymentAddress;
use tsify::Tsify;
use wasm_bindgen::prelude::*;
pub const HTML_CREATE_ID: &str = "
pub const HTML_KOTPART: &str = "
<div class='card'>
<div class='side-by-side'>
<h3>Create an Id</h3>
<div><a href='#'>Processes</a></div>
<h3>Send encrypted messages</h3>
<div>
<a href='#' id='send messages'>Send Messages</a>
</div>
</div>
<form id='form4nk' action='#'>
<label for='password'>Password :</label>
<input type='password' id='password' /><hr/>
<input type='hidden' id='currentpage' value='creatid' />
<select id='selectProcess' class='custom-select'></select><hr/>
<div class='side-by-side'>
<button type='submit' id='submitButton' class='bg-primary'>Create</button>
<div>
<a href='#' id='displayrecover'>Recover</a>
</div>
</div>
</form><br/>
<div id='passwordalert' class='passwordalert'></div>
</div>
";
pub const HTML_UPDATE_ID: &str = "
<body>
<div class='container'>
<div>
<h3>Update an Id</h3>
</div>
<label for='sp_address'>Send to:</label>
<input type='text' id='sp_address' />
<hr/>
<form id='form4nk' action='#'>
<label for='firstName'>First Name:</label>
<input type='text' id='firstName' name='firstName' required />
<label for='lastName'>Last Name:</label>
<input type='text' id='lastName' name='lastName' required />
<label for='Birthday'>Birthday:</label>
<input type='date' id='Birthday' name='birthday' />
<label for='file'>File:</label>
<input type='file' id='fileInput' name='file' />
<label>Third parties:</label>
<div id='sp-address-block'>
<div class='side-by-side'>
<input
type='text'
name='sp-address'
id='sp-address'
placeholder='sp address'
form='no-form'
/>
<button
type='button'
class='circle-btn bg-secondary'
id='add-sp-address-btn'
>
+
</button>
</div>
</div>
<div class='div-text-area'>
<textarea
name='bio'
id=''
cols='30'
rows='10'
placeholder='Bio'
></textarea>
</div>
<button type='submit' class='bg-primary'>Update</button>
<label for='message'>Message:</label>
<input type='message' id='message' />
<hr/>
<button type='submit' id='submitButton' class='recover bg-primary'>Send</button>
</form>
</div>
</body>
";
pub const HTML_RECOVER: &str = "
pub const HTML_STORAGE: &str = "
<div class='card'>
<div class='side-by-side'>
<h3>Recover my Id</h3>
<div><a href='#'>Processes</a></div>
</div>
<form id='form4nk' action='#'>
<label for='password'>Password :</label>
<input type='password' id='password' />
<input type='hidden' id='currentpage' value='recover' />
<select id='selectProcess' class='custom-select'></select><hr/>
<div class='side-by-side'>
<button type='submit' id='submitButton' class='recover bg-primary'>Recover</button>
<h3>Send encrypted messages</h3>
<div>
<a href='#' id='displaycreateid'>Create an Id</a>
</div>
</div><hr/>
<a href='#' id='displayrevoke' class='btn'>Revoke</a>
</form><br/>
<div id='passwordalert' class='passwordalert'></div>
</div>
";
pub const HTML_REVOKE_IMAGE: &str = "
<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>
</a>
<div class='image-container'>
<img src='assets/4nk_revoke.jpg' alt='' />
</div>
</div>
";
pub const HTML_REVOKE: &str = "
<div class='card'>
<div class='side-by-side'>
<h3>Revoke an Id</h3>
<div>
<a href='#' id='displayrecover'>Recover</a>
<a href='#' id='send messages'>Send Messages</a>
</div>
</div>
<form id='form4nk' action='#'>
<label for='password'>Password :</label>
<input type='password' id='password' />
<label for='sp_address'>Send to:</label>
<input type='text' id='sp_address' />
<hr/>
<div class='image-container'>
<label class='image-label'>Revoke image</label>
<img src='assets/revoke.jpeg' alt='' />
<label for='message'>Message:</label>
<input type='message' id='message' />
<hr/>
<button type='submit' id='submitButton' class='recover bg-primary'>Send</button>
</form>
</div>
";
pub const HTML_MESSAGING: &str = "
<div class='card'>
<div class='side-by-side'>
<h3>Send encrypted messages</h3>
<div>
<a href='#' id='send messages'>Send Messages</a>
</div>
</div>
<form id='form4nk' action='#'>
<div id='our_address' class='our_address'></div>
<label for='sp_address'>Send to:</label>
<input type='text' id='sp_address' />
<hr/>
<button type='submit' id='submitButton' class='recover bg-primary'>Revoke</button>
<label for='message'>Message:</label>
<input type='message' id='message' />
<hr/>
<button type='submit' id='submitButton' class='recover bg-primary'>Send</button>
</form>
</div>
";

View File

@ -24,27 +24,9 @@ class Services {
private async init(): Promise<void> {
this.sdkClient = await import("../dist/pkg/sdk_client");
this.sdkClient.setup();
await this.updateProcesses();
}
// public async getSpAddressDefaultClient(): Promise<string | null> {
// try {
// const indexedDB = await IndexedDB.getInstance();
// const db = indexedDB.getDb();
// const spClient = await indexedDB.getObject<string>(db, indexedDB.getStoreList().SpClient, "default");
// if (spClient) {
// return this.sdkClient.get_receiving_address(spClient);
// } else {
// console.error("SP client not found");
// return null;
// }
// } catch (error) {
// console.error("Failed to retrieve object or get sp address:", error);
// return null;
// }
// }
public async addWebsocketConnection(url: string): Promise<void> {
const services = await Services.getInstance();
const newClient = new WebSocketClient(url, services);
@ -70,7 +52,7 @@ class Services {
public async displayCreateId(): Promise<void> {
const services = await Services.getInstance();
await services.injectHtml('CREATE_ID');
await services.createIdInjectHtml();
services.attachSubmitListener("form4nk", (event) => services.createId(event));
services.attachClickListener("displayrecover", services.displayRecover);
await services.displayProcess();
@ -136,8 +118,8 @@ class Services {
public async displayRecover(): Promise<void> {
const services = await Services.getInstance();
await services.injectHtml('RECOVER');
services.attachSubmitListener("form4nk", services.recover);
await services.recoverInjectHtml();
services.attachSubmitListener("form4nk", (event) => services.recover(event));
services.attachClickListener("displaycreateid", services.displayCreateId);
services.attachClickListener("displayrevoke", services.displayRevoke);
services.attachClickListener("submitButtonRevoke", services.revoke);
@ -168,7 +150,7 @@ class Services {
public async displayRevokeImage(revokeData: Uint8Array): Promise<void> {
const services = await Services.getInstance();
await services.injectHtml('REVOKE_IMAGE');
await services.revokeImageInjectHtml();
services.attachClickListener("displayupdateanid", services.displayUpdateAnId);
let imageBytes = await services.getRecoverImage('assets/4nk_revoke.jpg');
@ -209,7 +191,7 @@ class Services {
public async displayRevoke(): Promise<void> {
const services = await Services.getInstance();
services.injectHtml('REVOKE');
await services.revokeInjectHtml();
services.attachClickListener("displayrecover", Services.instance.displayRecover);
services.attachSubmitListener("form4nk", Services.instance.revoke);
}
@ -224,24 +206,8 @@ class Services {
public async displayUpdateAnId() {
const services = await Services.getInstance();
console.log("JS displayUpdateAnId process : "+services.current_process);
let body = "";
let style = "";
let script = "";
try {
const processObject = await services.getProcessByName("UPDATE_ID");
if (processObject) {
body = processObject.html;
style = processObject.style;
script = processObject.script;
console.log("JS displayUpdateAnId body : "+body);
await services.updateIdInjectHtml();
}
} catch (error) {
console.error("Failed to retrieve process with Error:", error);
}
services.injectUpdateAnIdHtml(body, style, script);
services.attachSubmitListener("form4nk", services.updateAnId);
}
@ -370,22 +336,20 @@ class Services {
return process;
}
public async loadProcesses(): Promise<void> {
public async updateProcesses(): Promise<void> {
const services = await Services.getInstance();
const processList: Process[] = services.sdkClient.get_processes();
console.error('processList size: '+processList.length);
processList.forEach(async (process: Process) => {
const indexedDB = await IndexedDB.getInstance();
const db = indexedDB.getDb();
const db = await indexedDB.getDb();
try {
const processStore = await indexedDB.getObject<Process>(db, indexedDB.getStoreList().AnkProcess, process.id);
if (!processStore) {
console.error('Adding process.id : '+process.id);
await indexedDB.writeObject(db, indexedDB.getStoreList().AnkProcess, process, null);
}
} catch (error) {
console.warn('Error while writing process', process.name, 'to indexedDB:', error);
console.error('Error while writing process', process.name, 'to indexedDB:', error);
}
})
}
@ -401,6 +365,190 @@ class Services {
element?.removeEventListener("submit", callback);
element?.addEventListener("submit", callback);
}
public async revokeInjectHtml() {
const container = document.getElementById('containerId');
if (!container) {
console.error("No html container");
return;
}
container.innerHTML =
` <div class='card'>
<div class='side-by-side'>
<h3>Revoke an Id</h3>
<div>
<a href='#' id='displayrecover'>Recover</a>
</div>
</div>
<form id='form4nk' action='#'>
<label for='password'>Password :</label>
<input type='password' id='password' />
<hr/>
<div class='image-container'>
<label class='image-label'>Revoke image</label>
<img src='assets/revoke.jpeg' alt='' />
</div>
<hr/>
<button type='submit' id='submitButton' class='recover bg-primary'>Revoke</button>
</form>
</div>
`;
}
public async revokeImageInjectHtml() {
const container = document.getElementById('containerId');
if (!container) {
console.error("No html container");
return;
}
container.innerHTML =
`<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>
</a>
<div class='image-container'>
<img src='assets/4nk_revoke.jpg' alt='' />
</div>
</div>`;
}
public async recoverInjectHtml() {
const container = document.getElementById('containerId');
if (!container) {
console.error("No html container");
return;
}
const services = await Services.getInstance();
await services.updateProcesses();
container.innerHTML =
`<div class='card'>
<div class='side-by-side'>
<h3>Recover my Id</h3>
<div><a href='#'>Processes</a></div>
</div>
<form id='form4nk' action='#'>
<label for='password'>Password :</label>
<input type='password' id='password' />
<input type='hidden' id='currentpage' value='recover' />
<select id='selectProcess' class='custom-select'></select><hr/>
<div class='side-by-side'>
<button type='submit' id='submitButton' class='recover bg-primary'>Recover</button>
<div>
<a href='#' id='displaycreateid'>Create an Id</a>
</div>
</div><hr/>
<a href='#' id='displayrevoke' class='btn'>Revoke</a>
</form><br/>
<div id='passwordalert' class='passwordalert'></div>
</div>`;
}
public async createIdInjectHtml() {
const container = document.getElementById('containerId');
if (!container) {
console.error("No html container");
return;
}
container.innerHTML =
`<div class='card'>
<div class='side-by-side'>
<h3>Create an Id</h3>
<div><a href='#'>Processes</a></div>
</div>
<form id='form4nk' action='#'>
<label for='password'>Password :</label>
<input type='password' id='password' /><hr/>
<input type='hidden' id='currentpage' value='creatid' />
<select id='selectProcess' class='custom-select'></select><hr/>
<div class='side-by-side'>
<button type='submit' id='submitButton' class='bg-primary'>Create</button>
<div>
<a href='#' id='displayrecover'>Recover</a>
</div>
</div>
</form><br/>
<div id='passwordalert' class='passwordalert'></div>
</div>`;
}
public async updateIdInjectHtml() {
const container = document.getElementById('containerId');
if (!container) {
console.error("No html container");
return;
}
container.innerHTML =
`<body>
<div class='container'>
<div>
<h3>Update an Id</h3>
</div>
<hr />
<form id='form4nk' action='#'>
<label for='firstName'>First Name:</label>
<input type='text' id='firstName' name='firstName' required />
<label for='lastName'>Last Name:</label>
<input type='text' id='lastName' name='lastName' required />
<label for='Birthday'>Birthday:</label>
<input type='date' id='Birthday' name='birthday' />
<label for='file'>File:</label>
<input type='file' id='fileInput' name='file' />
<label>Third parties:</label>
<div id='sp-address-block'>
<div class='side-by-side'>
<input
type='text'
name='sp-address'
id='sp-address'
placeholder='sp address'
form='no-form'
/>
<button
type='button'
class='circle-btn bg-secondary'
id='add-sp-address-btn'
>
+
</button>
</div>
</div>
<div class='div-text-area'>
<textarea
name='bio'
id=''
cols='30'
rows='10'
placeholder='Bio'
></textarea>
</div>
<button type='submit' class='bg-primary'>Update</button>
</form>
</div>
</body>`;
}
public async injectHtml(processName: string) {
const container = document.getElementById('containerId');