<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>Password Hashing</h1>
</div>
<div class="card">
<div class="card-title">Hashing</div>
<div class="card-body">
<form [formGroup]="passwordForm" (ngSubmit)="hash()">
<div class="field">
<label>Password</label>
<input type="text" formControlName="password" required placeholder="Enter password to hash">
</div>
<div class="field">
<label>Algorithm</label>
<select formControlName="algorithm">
<option value="argon2">Argon2id (default)</option>
<option value="pbkdf2">PBKDF2-SHA256</option>
</select>
</div>
<div class="field" *ngIf="passwordForm.get('algorithm')?.value === 'pbkdf2'">
<label>Iterations</label>
<input type="number" formControlName="iterations" placeholder="E.g. 600000">
</div>
<div class="field">
<button type="submit" class="btn btn-primary">Hash</button>
</div>
<div class="field">
<span class="result-label">Result</span>
<textarea rows="5" formControlName="hashResult" placeholder="Hash output will appear here"></textarea>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-title">Verify</div>
<div class="card-body">
<form [formGroup]="verifyForm" (ngSubmit)="verify()">
<div class="field">
<label>Password</label>
<input type="text" formControlName="passwordV" required placeholder="Enter password">
</div>
<div class="field">
<label>Hash</label>
<input type="text" formControlName="hashV" required placeholder="Paste hash to verify">
</div>
<div class="field">
<button type="submit" class="btn btn-primary">Verify</button>
</div>
<div class="field">
<span class="result-label">Result</span>
<textarea rows="5" formControlName="passwordResult" placeholder="Verification result will appear here"></textarea>
</div>
</form>
</div>
</div>
</div>