<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]="faEyeSlash"></fa-icon>
<h1>Encryption / Decryption</h1>
</div>
<div class="card">
<div class="card-title">Encryption</div>
<div class="card-body">
<form [formGroup]="encryptionForm" (ngSubmit)="encrypt()">
<div class="field">
<label>Text</label>
<textarea rows="5" formControlName="encryptText" required placeholder="Enter text to encrypt"></textarea>
</div>
<div class="field">
<label>Password</label>
<input type="text" formControlName="encryptPassword" required placeholder="Enter password">
</div>
<div class="field">
<label>Salt</label>
<input type="text" formControlName="encryptSalt" placeholder="Optional salt">
</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 will appear here"></textarea>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-title">Decryption</div>
<div class="card-body">
<form [formGroup]="decryptionForm" (ngSubmit)="decrypt()">
<div class="field">
<label>Encrypted text</label>
<input type="text" formControlName="encryptedText" required placeholder="Paste encrypted text">
</div>
<div class="field">
<label>Password</label>
<input type="text" formControlName="decryptPassword" required placeholder="Enter password">
</div>
<div class="field">
<label>Salt</label>
<input type="text" formControlName="decryptSalt" placeholder="Optional salt">
</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 will appear here"></textarea>
</div>
</form>
</div>
</div>
</div>