docs(README): remove outdated GitHub Pages setup info

sec50 · sec50 · commit e55b65c2cf7b · 2025-09-28T22:37:11.000+02:00
feat(ui): enhance "About" section with detailed app overview, features, and tips
test(e2e): ensure navigation flows tested in key generation, encryption, and signing specs
fix(ui): add spacing between private and public keys in key generation output
ci(cypress): run Cypress in headless Chrome
refactor(toast): improve import success message clarity
diff --git a/CNAME b/CNAME
diff --git a/README.md b/README.md
@@ -89,15 +89,6 @@ This project includes a GitHub Actions workflow for automatic deployment to GitH
 2. It automatically triggers on pushes to the `main` branch
 3. It can also be manually triggered through the GitHub Actions interface
 
-To enable GitHub Pages deployment:
-
-1. Go to your repository settings
-2. Navigate to "Pages" in the sidebar
-3. Under "Source", select "GitHub Actions"
-4. The site will automatically deploy on the next push to the main branch
-
-The deployed site will be available at `https://<username>.github.io/<repository-name>/`
-
 ## Privacy
 
 CommonKey is designed with privacy in mind:
diff --git a/app.js b/app.js
@@ -353,7 +353,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (genPass.value) opts.passphrase = genPass.value;
       }
       const key = await openpgp.generateKey(opts);
-      outputKeygen.textContent = key.publicKey + '\n' + key.privateKey;
+      outputKeygen.textContent = key.publicKey + '\n\n' + key.privateKey;
       downloadPub.classList.remove('hidden');
       downloadPriv.classList.remove('hidden');
       downloadPub.onclick = () => downloadFile('public.asc', key.publicKey);
diff --git a/cypress/e2e/encryptDecrypt.spec.js b/cypress/e2e/encryptDecrypt.spec.js
@@ -4,6 +4,7 @@ describe('Encryption & Decryption Flow', () => {
   it('encrypts and then decrypts a message end-to-end', () => {
     // Generate a key pair first
     cy.visit('/');
+    cy.get('#nav-keygen').click();
     cy.get('#gen-name').type('E2E User');
     cy.get('#gen-email').type('e2e@example.com');
     cy.get('#form-keygen button[type="submit"]').click();
@@ -14,6 +15,7 @@ describe('Encryption & Decryption Flow', () => {
         const [publicKey, privateKey] = keyText.split('\n\n');
 
         // Encrypt a message
+        cy.get('#nav-encrypt').click();
         cy.get('#encrypt-message').type('Hello Cypress');
         cy.get('#encrypt-pubkey').type(publicKey);
         cy.get('#form-encrypt button[type="submit"]').click();
@@ -23,6 +25,7 @@ describe('Encryption & Decryption Flow', () => {
           .then((encrypted) => {
 
             // Decrypt the message
+            cy.get('#nav-decrypt').click();
             cy.get('#decrypt-message').clear().type(encrypted);
             cy.get('#decrypt-privkey').type(privateKey);
             cy.get('#form-decrypt button[type="submit"]').click();
diff --git a/cypress/e2e/importManage.spec.js b/cypress/e2e/importManage.spec.js
@@ -4,6 +4,7 @@ describe('Import & Manage Keys Flow', () => {
   it('imports a key, searches it, and deletes it', () => {
     // Generate a key pair to import
     cy.visit('/');
+    cy.get('#nav-keygen').click();
     cy.get('#gen-name').type('ImportUser');
     cy.get('#gen-email').type('import@example.com');
     cy.get('#form-keygen button[type="submit"]').click();
@@ -18,7 +19,7 @@ describe('Import & Manage Keys Flow', () => {
         // Import public key
         cy.get('#import-key').type(publicKey);
         cy.get('#form-import button[type="submit"]').click();
-        cy.get('.toast').should('contain', 'Imported public key');
+        cy.get('.toast').should('contain', 'import completed successfully');
 
         // Search for the imported key
         cy.get('#key-search').type('public');
diff --git a/cypress/e2e/keygen.spec.js b/cypress/e2e/keygen.spec.js
@@ -3,6 +3,7 @@
 describe('Key Generation Flow', () => {
   it('generates a key pair and verifies download buttons', () => {
     cy.visit('/');
+    cy.get('#nav-keygen').click();
     cy.get('#gen-name').type('Test User');
     cy.get('#gen-email').type('test@example.com');
     cy.get('#form-keygen button[type="submit"]').click();
diff --git a/cypress/e2e/signVerify.spec.js b/cypress/e2e/signVerify.spec.js
@@ -3,6 +3,7 @@
 describe('Sign & Verify Flow', () => {
   it('signs a message and then verifies the signature', () => {
     cy.visit('/');
+    cy.get('#nav-keygen').click();
     // Generate a key pair
     cy.get('#gen-name').type('Signer User');
     cy.get('#gen-email').type('signer@example.com');
@@ -14,6 +15,7 @@ describe('Sign & Verify Flow', () => {
         const [publicKey, privateKey] = keyText.split('\n\n');
 
         // Sign a message
+        cy.get('#nav-sign').click();
         cy.get('#sign-message').type('Message to Sign');
         cy.get('#sign-privkey').type(privateKey);
         cy.get('#form-sign button[type="submit"]').click();
@@ -23,6 +25,7 @@ describe('Sign & Verify Flow', () => {
           .then((signature) => {
 
             // Verify the signature
+            cy.get('#nav-verify').click();
             cy.get('#verify-message').clear().type('Message to Sign\n' + signature);
             cy.get('#verify-pubkey').type(publicKey);
             cy.get('#form-verify button[type="submit"]').click();
diff --git a/index.html b/index.html
@@ -423,27 +423,95 @@ <h2 class="card-title">Keybox</h2>
 
     <!-- About -->
     <section id="about" class="card mb-6">
-      <div class="card-header">
-        <h2 class="card-title">About CommonKey</h2>
-        <p class="card-description">A client-side PGP encryption tool built with OpenPGP.js</p>
+  <div class="card-header">
+    <h2 class="card-title">About CommonKey</h2>
+    <p class="card-description">A private, client‑side PGP toolkit for generating keys, encrypting/decrypting messages, and signing/verifying data—right in your browser.</p>
+  </div>
+  <div class="card-content space-y-6">
+    <div class="space-y-2">
+      <h3 class="text-lg font-semibold">What is CommonKey?</h3>
+      <p>
+        CommonKey is a lightweight web app for everyday PGP tasks. It focuses on simplicity, privacy, and portability—no accounts, no servers, and no tracking.
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <h3 class="text-lg font-semibold">How it works</h3>
+      <ul class="list-disc pl-6 space-y-1">
+        <li>All cryptographic operations happen locally in your browser.</li>
+        <li>An entropy overlay collects randomness from mouse movement during initialization.</li>
+        <li>Imported keys are stored only in your browser’s local storage (if you choose to save them).</li>
+        <li>No data is transmitted to any server; passphrases are never stored.</li>
+      </ul>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div class="space-y-2">
+        <h3 class="text-lg font-semibold">Quick tips</h3>
+        <ul class="list-disc pl-6 space-y-1">
+          <li>Use the sidebar to switch between Key Gen, Encrypt, Decrypt, Sign, Verify, Revoke, and Keybox.</li>
+          <li>Keyboard shortcuts:
+            <span class="kbd">Ctrl+G</span> Key Gen,
+            <span class="kbd">Ctrl+E</span> Encrypt,
+            <span class="kbd">Ctrl+D</span> Decrypt,
+            <span class="kbd">Ctrl+S</span> Sign,
+            <span class="kbd">Ctrl+V</span> Verify.
+          </li>
+          <li>Drag and drop supported: drop files into highlighted areas to auto-fill text.</li>
+          <li>Dark/Light mode toggle is available in the header.</li>
+        </ul>
       </div>
-      <div class="card-content">
-        <p class="mb-4">CommonKey is a client-side PGP encryption tool built with OpenPGP.js. All operations happen in your browser for maximum privacy.</p>
-        <div>
-          <h3 class="font-semibold mb-2">Features:</h3>
-          <ul class="list-disc list-inside space-y-1 text-sm text-muted-foreground">
-            <li>Generate ECC or RSA keypairs</li>
-            <li>Encrypt/decrypt messages</li>
-            <li>Sign and verify messages</li>
-            <li>Revoke keys</li>
-            <li>Import and manage keys</li>
-          </ul>
-        </div>
-        <div class="mt-4">
-          <a href="https://github.com/Securenza/CommonKey/releases/latest/download/commonkey-release.zip" class="btn btn-primary" target="_blank" rel="noopener">Download Latest Release (ZIP)</a>
-        </div>
+      <div class="space-y-2">
+        <h3 class="text-lg font-semibold">Security notes</h3>
+        <ul class="list-disc pl-6 space-y-1">
+          <li>Use strong passphrases for private keys whenever possible.</li>
+          <li>Keep your private key and revocation certificate safe and backed up.</li>
+          <li>Verify public keys (fingerprints) out of band before trusting them.</li>
+          <li>Browser environment: extensions or compromised devices can affect security—use trusted environments.</li>
+        </ul>
       </div>
-    </section>
+    </div>
+
+    <div class="space-y-2">
+      <h3 class="text-lg font-semibold">Privacy</h3>
+      <p>
+        CommonKey does not send your data anywhere. There are no analytics, tracking, or cookies. Everything you do remains on your device.
+      </p>
+    </div>
+
+    <div class="space-y-2">
+      <h3 class="text-lg font-semibold">Accessibility</h3>
+      <ul class="list-disc pl-6 space-y-1">
+        <li>Keyboard navigation: forms and main actions are reachable via standard tabbing.</li>
+        <li>ARIA labels and live regions are used for toasts and interactive elements.</li>
+        <li>Dark mode and high-contrast friendly design tokens are available.</li>
+      </ul>
+    </div>
+
+    <div class="space-y-2">
+      <h3 class="text-lg font-semibold">Acknowledgements</h3>
+      <ul class="list-disc pl-6 space-y-1">
+        <li>OpenPGP.js for the cryptographic engine.</li>
+        <li>Securenza for support and inspiration.</li>
+      </ul>
+    </div>
+
+    <div class="space-y-2">
+      <h3 class="text-lg font-semibold">License & Contributions</h3>
+      <p>
+        CommonKey is open source under the MIT License. Contributions are welcome—bug reports, improvements, and documentation updates help everyone.
+      </p>
+    </div>
+  </div>
+  <div class="card-footer">
+    <div class="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+      <span class="badge badge-outline">Client-side</span>
+      <span class="badge badge-outline">No telemetry</span>
+      <span class="badge badge-outline">Dark/Light</span>
+      <span class="badge badge-outline">Offline-friendly</span>
+    </div>
+  </div>
+</section>
 
   </main>
 
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run"
+    "cypress:run": "cypress run --browser chrome --headless"
   },
   "repository": {
     "type": "git",

Original file line number	Diff line number	Diff line change
`@@ -353,7 +353,7 @@ document.addEventListener('DOMContentLoaded', () => {`
`353`	`353`	`if (genPass.value) opts.passphrase = genPass.value;`
`354`	`354`	`}`
`355`	`355`	`const key = await openpgp.generateKey(opts);`
`356`		`- outputKeygen.textContent = key.publicKey + '\n' + key.privateKey;`
	`356`	`+ outputKeygen.textContent = key.publicKey + '\n\n' + key.privateKey;`
`357`	`357`	`downloadPub.classList.remove('hidden');`
`358`	`358`	`downloadPriv.classList.remove('hidden');`
`359`	`359`	`downloadPub.onclick = () => downloadFile('public.asc', key.publicKey);`