Release v1.1.4 - Improve ncryptsec export page UX

- Auto-focus password input when page loads
- Move QR code above password input form (displays after generation)
- Move explanation text below the form
- Replace ncryptsec text output with clickable QR code button
- Add hover/active effects and "Copy to clipboard" tooltip to QR code
- Remove redundant copy button and text display

Files modified:
- package.json (version bump)
- projects/chrome/public/manifest.json
- projects/chrome/src/app/components/edit-identity/ncryptsec/*
- projects/firefox/public/manifest.json
- projects/firefox/src/app/components/edit-identity/ncryptsec/*

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-28 10:04:07 +02:00
parent 2074c409f0
commit a2e47d8612
13 changed files with 117 additions and 153 deletions

View File

@@ -6,16 +6,26 @@
<span>Get ncryptsec</span>
</div>
<p class="description">
Enter a password to encrypt your private key. The resulting ncryptsec can be
used to securely backup or transfer your key.
</p>
<!-- QR Code (shown after generation) -->
@if (ncryptsec) {
<div class="qr-container">
<button
type="button"
class="qr-button"
title="Copy to clipboard"
(click)="copyToClipboard(ncryptsec); toast.show('Copied to clipboard')"
>
<img [src]="ncryptsecQr" alt="ncryptsec QR code" class="qr-code" />
</button>
</div>
}
<!-- PASSWORD INPUT -->
<div class="password-section">
<label for="ncryptsecPasswordInput">Password</label>
<div class="input-group sam-mt-h">
<input
#passwordInput
id="ncryptsecPasswordInput"
type="password"
class="form-control"
@@ -41,35 +51,10 @@
}
</button>
<!-- NCRYPTSEC OUTPUT -->
@if (ncryptsec) {
<div class="result-section">
<!-- QR Code -->
<div class="qr-container">
<img [src]="ncryptsecQr" alt="ncryptsec QR code" class="qr-code" />
</div>
<!-- ncryptsec text -->
<div class="ncryptsec-container">
<input
type="text"
class="form-control ncryptsec-output"
[value]="ncryptsec"
readonly
(click)="copyToClipboard(ncryptsec); toast.show('Copied to clipboard')"
title="Click to copy"
/>
<button
class="btn btn-outline-secondary"
type="button"
(click)="copyToClipboard(ncryptsec); toast.show('Copied to clipboard')"
>
<i class="bi bi-copy"></i> Copy
</button>
</div>
<p class="hint">Tap the text or button to copy to clipboard</p>
</div>
}
<p class="description">
Enter a password to encrypt your private key. The resulting ncryptsec can be
used to securely backup or transfer your key.
</p>
<lib-toast #toast [bottom]="16"></lib-toast>