Skip to content

feat(wasm-demo): Add a section to inspect devolutions-crypto data #384

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Sébastien Duquette (sduquette-devolutions) merged 2 commits into from
May 20, 2026
Merged

feat(wasm-demo): Add a section to inspect devolutions-crypto data #384

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78e51b5
feat(wasm-demo): Add a section to inspect devolutions-crypto data
sduquette-devolutions May 20, 2026
f35e823
use DataView in readUint16LE
sduquette-devolutions May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions wrappers/wasm/demo/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ <h1>DevolutionsCrypto</h1>
<a routerLink="/asymmetric">Asymmetric</a>
<a routerLink="/secret-key-encryption">Secret Key Encryption</a>
<a routerLink="/utilities">Utilities</a>
<a routerLink="/inspect">Inspect (Debug)</a>
</div>

</nav>
Expand Down
4 changes: 3 additions & 1 deletion wrappers/wasm/demo/src/app/app.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { PasswordComponent } from './password/password.component';
import { UtilitiesComponent } from './utilities/utilities.component';
import { AsymmetricComponent } from './asymmetric/asymmetric.component';
import { SecretKeyEncryptionComponent } from './secret-key-encryption/secret-key-encryption.component';
import { InspectComponent } from './inspect/inspect.component';

export const routes: Routes = [
{ path: '', redirectTo: '/encryption', pathMatch: 'full' },
Expand All @@ -13,5 +14,6 @@ export const routes: Routes = [
{ path: 'password', component: PasswordComponent },
{ path: 'utilities', component: UtilitiesComponent },
{ path: 'asymmetric', component: AsymmetricComponent },
{ path: 'secret-key-encryption', component: SecretKeyEncryptionComponent }
{ path: 'secret-key-encryption', component: SecretKeyEncryptionComponent },
{ path: 'inspect', component: InspectComponent }
];
77 changes: 77 additions & 0 deletions wrappers/wasm/demo/src/app/inspect/inspect.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
.debug-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.debug-table th {
background: #f1f5f9;
color: #475569;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.5rem 0.75rem;
text-align: left;
border-bottom: 1.5px solid #e2e8f0;
}
.debug-table td {
padding: 0.55rem 0.75rem;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
}
.debug-table tr:last-child td {
border-bottom: none;
}
.debug-table tr:hover td {
background: #f8fafc;
}
.debug-mono {
font-family: 'Cascadia Code', 'Consolas', monospace;
font-size: 0.85rem;
color: #0f172a;
}
.debug-hex {
font-family: 'Cascadia Code', 'Consolas', monospace;
font-size: 0.75rem;
color: #475569;
word-break: break-all;
display: inline-block;
max-width: 420px;
}
.debug-num {
font-family: 'Cascadia Code', 'Consolas', monospace;
font-size: 0.82rem;
color: #0d6e63;
font-weight: 600;
}
.debug-name {
color: #1e3a5f;
font-weight: 500;
}
.debug-desc {
color: #64748b;
font-size: 0.82rem;
}
.debug-badge {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
}
.debug-badge-ok {
background: #dcfce7;
color: #166534;
}
.debug-badge-err {
background: #fee2e2;
color: #991b1b;
}
.debug-error-title {
background: #991b1b !important;
}
.debug-error-msg {
color: #991b1b;
font-weight: 500;
margin: 0;
}
125 changes: 125 additions & 0 deletions wrappers/wasm/demo/src/app/inspect/inspect.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!-- Mobile header -->
<header class="mobile-header">
<button (click)="w3Open()">&#9776;</button>
<span>Devolutions Crypto</span>
</header>

<div class="page-inner">

<div class="page-heading">
<fa-icon size="3x" [icon]="faBug"></fa-icon>
<h1>Inspect (Debug)</h1>
</div>

<div class="card">
<div class="card-title">Decode Devolutions-Crypto string</div>
<div class="card-body">
<form [formGroup]="debugForm" (ngSubmit)="decode()">
<div class="field">
<label>Encoded string (Base64)</label>
<textarea
rows="3"
formControlName="input"
placeholder="Paste a devolutions-crypto base64 string, e.g. DQwCAAAAAgCoE9Y3m0..."
></textarea>
</div>
<div class="field">
<button type="submit" class="btn btn-primary">Decode &amp; Inspect</button>
</div>
</form>
</div>
</div>

@if (parseResult) {

@if (parseResult.error) {
<div class="card">
<div class="card-title debug-error-title">Error</div>
<div class="card-body">
<p class="debug-error-msg">{{ parseResult.error }}</p>
</div>
</div>
}

<div class="card">
<div class="card-title">Header</div>
<div class="card-body">
<table class="debug-table">
<thead>
<tr>
<th>Field</th>
<th>Value</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Signature</td>
<td>
<span class="debug-mono">{{ parseResult.signatureHex }}</span>
</td>
<td>
@if (parseResult.signatureValid) {
<span class="debug-badge debug-badge-ok">✓ valid (0x0C0D)</span>
} @else {
<span class="debug-badge debug-badge-err">✗ invalid — expected 0x0C0D</span>
}
</td>
</tr>
<tr>
<td>Type</td>
<td><span class="debug-num">{{ parseResult.dataType }}</span></td>
<td><span class="debug-name">{{ parseResult.dataTypeName }}</span></td>
</tr>
<tr>
<td>Subtype</td>
<td><span class="debug-num">{{ parseResult.subtype }}</span></td>
<td><span class="debug-name">{{ parseResult.subtypeName }}</span></td>
</tr>
<tr>
<td>Version</td>
<td><span class="debug-num">{{ parseResult.version }}</span></td>
<td><span class="debug-name">{{ parseResult.versionName }}</span></td>
</tr>
<tr>
<td>Total size</td>
<td colspan="2"><span class="debug-num">{{ parseResult.totalBytes }} bytes</span> (8 header + {{ parseResult.payloadBytes }} payload)</td>
</tr>
</tbody>
</table>
</div>
</div>

@if (parseResult.signatureValid && parseResult.payloadFields.length > 0) {
<div class="card">
<div class="card-title">Payload Fields</div>
<div class="card-body">
<table class="debug-table">
<thead>
<tr>
<th>Field</th>
<th>Offset</th>
<th>Size</th>
<th>Description</th>
<th>Hex</th>
</tr>
</thead>
<tbody>
@for (field of parseResult.payloadFields; track field.name) {
<tr>
<td><strong>{{ field.name }}</strong></td>
<td><span class="debug-num">+{{ field.offset }}</span></td>
<td><span class="debug-num">{{ field.size }} B</span></td>
<td class="debug-desc">{{ field.description }}</td>
<td><span class="debug-hex">{{ field.hex }}</span></td>
</tr>
}
</tbody>
</table>
</div>
</div>
}

}

</div>
Loading
Loading