samehabouelsaad/sal-modular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support encrypt, decrypt & verify + add dark theme + better error handling & UI enhancements

Browse Source
This commit is contained in:
zaelgohary
2025-05-28 09:49:23 +03:00
parent 5bc205b2f7
commit 37764e3861
7 changed files with 1893 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
crypto_vault_extension/popup.html
View File

@@ -11,9 +11,12 @@
<div class="logo-icon">🔐</div>
<h1>CryptoVault</h1>
</div>
<div class="status-indicator" id="statusIndicator">
<div class="status-dot"></div>
<span id="statusText">Initializing...</span>
<div class="header-actions">
<button id="themeToggle" class="btn-icon-only" title="Switch to dark mode">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
</div>
</header>
@@ -38,13 +41,26 @@
<!-- Main Vault Section -->
<section class="section hidden" id="vaultSection">
<div class="vault-header">
<h2>Your Keypairs</h2>
<button id="lockBtn" class="btn btn-ghost">🔒 Lock</button>
<!-- Status Section -->
<div class="vault-status" id="vaultStatus">
<div class="status-indicator" id="statusIndicator">
<div class="status-content">
<div class="status-dot"></div>
<span id="statusText">Initializing...</span>
</div>
<button id="lockBtn" class="btn btn-ghost btn-small hidden">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<circle cx="12" cy="16" r="1"></circle>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
Lock
</button>
</div>
</div>
<!-- Add Keypair Toggle Button -->
<div class="add-keypair-toggle">
<div class="vault-header">
<h2>Your Keypairs</h2>
<button id="toggleAddKeypairBtn" class="btn btn-primary">
<span class="btn-icon">+</span>
Add Keypair
@@ -99,25 +115,88 @@
<label>Public Key:</label>
<div class="public-key-container">
<code id="selectedPublicKey">-</code>
<button id="copyPublicKeyBtn" class="btn-copy" title="Copy to clipboard">📋</button>
<button id="copyPublicKeyBtn" class="btn-copy" title="Copy to clipboard">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Sign Message -->
<!-- Crypto Operations -->
<div class="card">
<h3>Sign Message</h3>
<div class="form-group">
<label for="messageInput">Message (hex or text)</label>
<textarea id="messageInput" placeholder="Enter message to sign" rows="3"></textarea>
<h3>Crypto Operations</h3>
<!-- Operation Tabs -->
<div class="operation-tabs">
<button class="tab-btn active" data-tab="encrypt">Encrypt</button>
<button class="tab-btn" data-tab="decrypt">Decrypt</button>
<button class="tab-btn" data-tab="sign">Sign</button>
<button class="tab-btn" data-tab="verify">Verify</button>
</div>
<button id="signBtn" class="btn btn-primary" disabled>Sign Message</button>
<div id="signatureResult" class="signature-result hidden">
<label>Signature:</label>
<div class="signature-container">
<code id="signatureValue"></code>
<button id="copySignatureBtn" class="btn-copy" title="Copy to clipboard">📋</button>
<!-- Encrypt Tab -->
<div class="tab-content active" id="encrypt-tab">
<div class="form-group">
<label for="encryptMessageInput">Message to Encrypt</label>
<textarea id="encryptMessageInput" placeholder="Enter message to encrypt..." rows="3"></textarea>
</div>
<button id="encryptBtn" class="btn btn-primary" disabled>Encrypt Message</button>
<div class="encrypt-result hidden" id="encryptResult">
</div>
</div>
<!-- Decrypt Tab -->
<div class="tab-content" id="decrypt-tab">
<div class="form-group">
<label for="encryptedMessageInput">Encrypted Message</label>
<textarea id="encryptedMessageInput" placeholder="Enter encrypted message..." rows="3"></textarea>
</div>
<button id="decryptBtn" class="btn btn-primary" disabled>Decrypt Message</button>
<div class="decrypt-result hidden" id="decryptResult">
</div>
</div>
<!-- Sign Tab -->
<div class="tab-content" id="sign-tab">
<div class="form-group">
<label for="messageInput">Message to Sign</label>
<textarea id="messageInput" placeholder="Enter your message here..." rows="3"></textarea>
</div>
<button id="signBtn" class="btn btn-primary" disabled>Sign Message</button>
<div class="signature-result hidden" id="signatureResult">
<label>Signature:</label>
<div class="signature-container">
<code id="signatureValue">-</code>
<button id="copySignatureBtn" class="btn-copy" title="Copy to clipboard">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Verify Tab -->
<div class="tab-content" id="verify-tab">
<div class="form-group">
<label for="verifyMessageInput">Original Message</label>
<textarea id="verifyMessageInput" placeholder="Enter the original message..." rows="3"></textarea>
</div>
<div class="form-group">
<label for="signatureToVerifyInput">Signature</label>
<input type="text" id="signatureToVerifyInput" placeholder="Enter signature to verify...">
</div>
<button id="verifyBtn" class="btn btn-primary" disabled>Verify Signature</button>
<div class="verify-result hidden" id="verifyResult">
</div>
</div>
</div>
@@ -129,10 +208,11 @@
<p>Processing...</p>
</div>
<!-- Toast Notifications -->
<div id="toast" class="toast hidden"></div>
</div>
<!-- Enhanced JavaScript modules -->
<script src="js/errorHandler.js"></script>
<script src="popup.js"></script>
</body>
</html>