<header class="mobile-header">
<button (click)="w3Open()">☰</button>
<span>Devolutions Crypto</span>
</header>
<div class="page-inner">
<div class="page-heading">
<fa-icon size="3x" [icon]="faTools"></fa-icon>
<h1>Utilities</h1>
</div>
<div class="card">
<div class="card-title">Encode / Decode</div>
<div class="card-body">
<form [formGroup]="encodeDecodeForm">
<div class="field">
<label>Text</label>
<textarea rows="5" formControlName="enDecodeText" required placeholder="Enter text"></textarea>
</div>
<div class="btn-row">
<button type="button" class="btn btn-primary" (click)="encode()">Encode</button>
<button type="button" class="btn btn-primary" (click)="decode()">Decode</button>
</div>
<div class="field">
<span class="result-label">Result</span>
<textarea rows="3" formControlName="enDecodeResult" placeholder="Output will appear here"></textarea>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-title">Key Generation</div>
<div class="card-body">
<form [formGroup]="keyGenerationForm" (ngSubmit)="generateKey()">
<div class="field">
<button type="submit" class="btn btn-primary">Generate Key</button>
</div>
<div class="field">
<span class="result-label">Result</span>
<textarea rows="3" formControlName="generationResult" placeholder="Generated key will appear here"></textarea>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-title">Derive Key</div>
<div class="card-body">
<form [formGroup]="deriveKeyForm" (ngSubmit)="deriveKey()">
<div class="field">
<label>Password</label>
<input type="text" formControlName="derivePassword" required placeholder="Enter password">
</div>
<div class="field">
<label>Salt</label>
<input type="text" formControlName="deriveSalt" placeholder="Optional salt">
</div>
<div class="field">
<label>Iterations</label>
<input type="number" formControlName="deriveIterations" placeholder="E.g. 600000">
</div>
<div class="field">
<label>Desired length</label>
<input type="number" formControlName="deriveLength" placeholder="E.g. 32">
</div>
<div class="field">
<button type="submit" class="btn btn-primary">Derive</button>
</div>
<div class="field">
<span class="result-label">Result</span>
<textarea rows="5" formControlName="deriveResult" placeholder="Derived key output will appear here"></textarea>
</div>
</form>
</div>
</div>
</div>