487 lines
13 KiB
Rust
487 lines
13 KiB
Rust
use std::fmt::DebugStruct;
|
|
|
|
use serde::{Deserialize, Serialize};
|
|
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'>
|
|
<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>
|
|
";
|
|
|
|
pub const HTML_UPDATE_ID: &str = "
|
|
<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>
|
|
";
|
|
|
|
pub const HTML_RECOVER: &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>
|
|
<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>
|
|
</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>
|
|
";
|
|
|
|
pub const CSS: &str = "
|
|
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 {
|
|
text-align: center;
|
|
}
|
|
.card {
|
|
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: flex;
|
|
flex-direction: column;
|
|
/* flex-wrap: wrap; */
|
|
}
|
|
label {
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
}
|
|
hr {
|
|
border: 0;
|
|
height: 1px;
|
|
background-color: #ddd;
|
|
margin: 10px 0;
|
|
}
|
|
input, select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 8px 0;
|
|
box-sizing: border-box;
|
|
}
|
|
select {
|
|
padding: 10px;
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button {
|
|
display: inline-block;
|
|
background-color: #4caf50;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 12px 17px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.side-by-side {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.side-by-side>* {
|
|
display: inline-block;
|
|
}
|
|
button.recover {
|
|
display: inline-block;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
background-color: #4caf50;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 12px 17px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button.recover:hover {
|
|
background-color: #45a049;
|
|
}
|
|
a.btn {
|
|
display: inline-block;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
background-color: #4caf50;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 12px 17px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a.btn:hover {
|
|
background-color: #45a049;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #78a6de;
|
|
}
|
|
.bg-secondary {
|
|
background-color: #2b81ed;
|
|
}
|
|
.bg-primary {
|
|
background-color: #1A61ED;
|
|
}
|
|
.bg-primary:hover {
|
|
background-color: #457be8;
|
|
}
|
|
.card-revoke {
|
|
display: flex;
|
|
flex-direction: column;
|
|
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: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
.card-revoke a {
|
|
max-width: 50px;
|
|
width: 100%;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.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;
|
|
}
|
|
.image-label {
|
|
display: block;
|
|
color: #fff;
|
|
padding: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
.image-container {
|
|
width: 400px;
|
|
height: 300px;
|
|
overflow: hidden;
|
|
}
|
|
.image-container img {
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center center;
|
|
}
|
|
.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)]
|
|
pub struct Process {
|
|
pub id: u32,
|
|
pub name: String,
|
|
pub version: String,
|
|
pub members: Vec<String>,
|
|
pub html: String,
|
|
pub style: String,
|
|
pub script: String,
|
|
// Add conditions : process, member, peer, artefact
|
|
}
|