From 830f4112917c13ff416103024f6f7257adcaa4e8 Mon Sep 17 00:00:00 2001
From: Bas van den Aakster <bvdaakster@gmail.com>
Date: Fri, 12 Dec 2025 12:02:06 +0100
Subject: [PATCH] feat: Prefill random username without auto-claiming

- Added generateRandomUsername() function
- Prefill username input with random suggestion
- Only create Rondevu instance for returning users with saved credentials
- Changed placeholder to "Choose a username"
- Users must explicitly click "Claim Username" button

This prevents automatic username claiming that was polluting the database
with anonymous users on every page load.
---
 src/App.jsx | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 00816c3..9c68435 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -79,7 +79,16 @@ export default function App() {
 
   // Setup
   const [setupStep, setSetupStep] = useState('init'); // init, claim, ready
-  const [usernameInput, setUsernameInput] = useState('');
+
+  // Generate a random username suggestion
+  const generateRandomUsername = () => {
+    const timestamp = Date.now().toString(36);
+    const random = Array.from(crypto.getRandomValues(new Uint8Array(3)))
+      .map(b => b.toString(16).padStart(2, '0')).join('');
+    return `anon-${timestamp}-${random}`;
+  };
+
+  const [usernameInput, setUsernameInput] = useState(generateRandomUsername());
 
   // Contacts
   const [contacts, setContacts] = useState([]);
@@ -163,19 +172,18 @@ export default function App() {
 
         const parsedKeypair = savedKeypair ? JSON.parse(savedKeypair) : undefined;
 
-        // Create Rondevu instance
-        // If no username is saved, use undefined to let Rondevu handle it
-        const service = new Rondevu({
-          apiUrl: API_URL,
-          username: savedUsername,
-          keypair: parsedKeypair,
-        });
-
-        await service.initialize();
-        setRondevu(service);
-
         // Check if we have a saved username and if it's claimed
         if (savedUsername && savedKeypair) {
+          // Create Rondevu instance with saved credentials
+          const service = new Rondevu({
+            apiUrl: API_URL,
+            username: savedUsername,
+            keypair: parsedKeypair,
+          });
+
+          await service.initialize();
+          setRondevu(service);
+
           console.log('[Init] Checking if username is claimed...');
           const isClaimed = await service.isUsernameClaimed();
           console.log('[Init] Username claimed:', isClaimed);
@@ -927,7 +935,7 @@ export default function App() {
                 <p style={styles.setupDesc}>Choose your unique username</p>
                 <input
                   type="text"
-                  placeholder="Enter username"
+                  placeholder="Choose a username"
                   value={usernameInput}
                   onChange={(e) => setUsernameInput(e.target.value.toLowerCase())}
                   onKeyPress={(e) => e.key === 'Enter' && handleClaimUsername()}