<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]="faKey"></fa-icon>
<h1>Secret Key Encryption</h1>
</div>
<div class="card">
<div class="card-title">Key Generation</div>
<div class="card-body">
<form [formGroup]="keyGenerationForm" (ngSubmit)="generateSecretKey()">
<div class="field">
<button type="submit" class="btn btn-primary">Generate Secret Key</button>
</div>
<div class="field">
<span class="result-label">Result</span>
<textarea rows="3" formControlName="generationResult" placeholder="Secret key output"></textarea>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-title">Encrypt</div>
<div class="card-body">
<form [formGroup]="encryptForm" (ngSubmit)="encrypt()">
<div class="field">
<label>Text</label>
<textarea rows="5" formControlName="textToEncrypt" required placeholder="Enter text to encrypt"></textarea>
</div>
<div class="field">
<label>Secret key</label>
<input type="text" formControlName="secretKey" required placeholder="Paste secret key (base64)">
</div>
<div class="field">
<button type="submit" class="btn btn-primary">Encrypt</button>
</div>
<div class="field">
<span class="result-label">Result</span>
<textarea rows="5" formControlName="encryptResult" placeholder="Encrypted output"></textarea>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-title">Decrypt</div>
<div class="card-body">
<form [formGroup]="decryptForm" (ngSubmit)="decrypt()">
<div class="field">
<label>Encrypted text</label>
<input type="text" formControlName="textToDecrypt" required placeholder="Paste encrypted text (base64)">
</div>
<div class="field">
<label>Secret key</label>
<input type="text" formControlName="secretKey" required placeholder="Paste secret key (base64)">
</div>
<div class="field">
<button type="submit" class="btn btn-primary">Decrypt</button>
</div>
<div class="field">
<span class="result-label">Result</span>
<textarea rows="5" formControlName="decryptResult" placeholder="Decrypted output"></textarea>
</div>
</form>
</div>
</div>
</div>