mirror of
https://github.com/xtr-dev/rondevu-demo.git
synced 2025-12-15 12:33:23 +00:00
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.
This commit is contained in:
34
src/App.jsx
34
src/App.jsx
@@ -79,7 +79,16 @@ export default function App() {
|
|||||||
|
|
||||||
// Setup
|
// Setup
|
||||||
const [setupStep, setSetupStep] = useState('init'); // init, claim, ready
|
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
|
// Contacts
|
||||||
const [contacts, setContacts] = useState([]);
|
const [contacts, setContacts] = useState([]);
|
||||||
@@ -163,19 +172,18 @@ export default function App() {
|
|||||||
|
|
||||||
const parsedKeypair = savedKeypair ? JSON.parse(savedKeypair) : undefined;
|
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
|
// Check if we have a saved username and if it's claimed
|
||||||
if (savedUsername && savedKeypair) {
|
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...');
|
console.log('[Init] Checking if username is claimed...');
|
||||||
const isClaimed = await service.isUsernameClaimed();
|
const isClaimed = await service.isUsernameClaimed();
|
||||||
console.log('[Init] Username claimed:', isClaimed);
|
console.log('[Init] Username claimed:', isClaimed);
|
||||||
@@ -927,7 +935,7 @@ export default function App() {
|
|||||||
<p style={styles.setupDesc}>Choose your unique username</p>
|
<p style={styles.setupDesc}>Choose your unique username</p>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Enter username"
|
placeholder="Choose a username"
|
||||||
value={usernameInput}
|
value={usernameInput}
|
||||||
onChange={(e) => setUsernameInput(e.target.value.toLowerCase())}
|
onChange={(e) => setUsernameInput(e.target.value.toLowerCase())}
|
||||||
onKeyPress={(e) => e.key === 'Enter' && handleClaimUsername()}
|
onKeyPress={(e) => e.key === 'Enter' && handleClaimUsername()}
|
||||||
|
|||||||
Reference in New Issue
Block a user