herocode/webassembly
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk
2025-04-19 19:16:58 +02:00
parent 8d707e61a2
commit 66555fcb0d
13 changed files with 2374 additions and 794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
www/index.html
View File

@@ -30,7 +30,13 @@
cursor: pointer;
border-radius: 4px;
}
input, textarea {
button.secondary {
background-color: #6c757d;
}
button.danger {
background-color: #dc3545;
}
input, textarea, select {
padding: 8px;
margin: 5px;
border: 1px solid #ddd;
@@ -54,20 +60,93 @@
color: #666;
font-size: 14px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.status {
padding: 10px;
margin-bottom: 15px;
border-radius: 4px;
}
.status.logged-in {
background-color: #d4edda;
color: #155724;
}
.status.logged-out {
background-color: #f8d7da;
color: #721c24;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Rust WebAssembly Crypto Example</h1>
<div class="container">
<h2>Keypair Generation</h2>
<div>
<button id="keypair-button">Generate Keypair</button>
<!-- Login/Space Management Section -->
<div class="container" id="login-container">
<h2>Key Space Management</h2>
<div id="login-status" class="status logged-out">
Status: Not logged in
</div>
<div class="result" id="keypair-result">Result will appear here</div>
<div class="key-display" id="pubkey-display"></div>
<div id="login-form">
<div class="form-group">
<label for="space-name">Space Name:</label>
<input type="text" id="space-name" placeholder="Enter space name" />
</div>
<div class="form-group">
<label for="space-password">Password:</label>
<input type="password" id="space-password" placeholder="Enter password" />
</div>
<div>
<button id="login-button">Login</button>
<button id="create-space-button">Create New Space</button>
</div>
</div>
<div id="logout-form" class="hidden">
<div class="form-group">
<label>Current Space: <span id="current-space-name"></span></label>
</div>
<button id="logout-button" class="danger">Logout</button>
</div>
<div class="result" id="space-result">Result will appear here</div>
</div>
<!-- Keypair Management Section -->
<div class="container" id="keypair-management-container">
<h2>Keypair Management</h2>
<div id="keypair-form">
<div class="form-group">
<label for="keypair-name">Keypair Name:</label>
<input type="text" id="keypair-name" placeholder="Enter keypair name" />
<button id="create-keypair-button">Create Keypair</button>
</div>
<div class="form-group">
<label for="select-keypair">Select Keypair:</label>
<select id="select-keypair">
<option value="">-- Select a keypair --</option>
</select>
</div>
</div>
<div class="result" id="keypair-management-result">Result will appear here</div>
<div class="key-display" id="selected-pubkey-display"></div>
</div>
<div class="container">
<h2>Message Signing</h2>
<div>
@@ -109,6 +188,32 @@
<div class="result" id="decrypt-result">Decrypted data will appear here</div>
</div>
<div class="container">
<h2>Password-Based Encryption</h2>
<div>
<div class="form-group">
<label for="password-encrypt-password">Password:</label>
<input type="password" id="password-encrypt-password" placeholder="Enter password" />
</div>
<textarea id="password-encrypt-message" placeholder="Enter message to encrypt" rows="3">This message will be encrypted with a password</textarea>
<button id="password-encrypt-button">Encrypt with Password</button>
</div>
<div class="result" id="password-encrypt-result">Encrypted data will appear here</div>
</div>
<div class="container">
<h2>Password-Based Decryption</h2>
<div>
<div class="form-group">
<label for="password-decrypt-password">Password:</label>
<input type="password" id="password-decrypt-password" placeholder="Enter password" />
</div>
<textarea id="password-decrypt-ciphertext" placeholder="Enter ciphertext (hex)" rows="3"></textarea>
<button id="password-decrypt-button">Decrypt with Password</button>
</div>
<div class="result" id="password-decrypt-result">Decrypted data will appear here</div>
</div>
<script type="module" src="./js/index.js"></script>
</body>
</html>