Skip to content

fix: add maxLength to contact inputs (#72) #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Emins25 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: add maxLength to contact inputs (#72) #171

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions app/(app)/me/settings/contacts/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import { useApiOpts } from '@/hooks/use-api';
import * as userApi from '@/lib/api/user';
import type { ContactItem } from '@/types/api';

const ALIAS_MAX_LENGTH = 64;
const PAY_URI_MAX_LENGTH = 256;

export default function ContactsPage() {
const opts = useApiOpts();
const [contacts, setContacts] = useState<ContactItem[]>([]);
Expand Down Expand Up @@ -89,8 +92,20 @@ export default function ContactsPage() {
<PageContainer>
{error && <p className="text-destructive text-sm mb-3">{error}</p>}
<form onSubmit={handleAdd} className="space-y-2 mb-6">
<Input placeholder="Alias" value={addAlias} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAddAlias(e.target.value)} className="border-border" />
<Input placeholder="Pay URI or address" value={addPayUri} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAddPayUri(e.target.value)} className="border-border" />
<Input
placeholder="Alias"
value={addAlias}
maxLength={ALIAS_MAX_LENGTH}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAddAlias(e.target.value)}
className="border-border"
/>
<Input
placeholder="Pay URI or address"
value={addPayUri}
maxLength={PAY_URI_MAX_LENGTH}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAddPayUri(e.target.value)}
className="border-border"
/>
Comment on lines +95 to +108
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add submit-time length validation (not only input-level maxLength).

maxLength here is a good UI constraint, but handleAdd still posts whatever state contains. Add a defensive check before postContact so constraints are enforced at submit time too (and aligned with your “prevent unbounded input” objective).

💡 Suggested patch 
 const handleAdd = async (e: React.FormEvent) => {
   e.preventDefault();
-  if (!addAlias.trim() && !addPayUri.trim()) return;
+  const alias = addAlias.trim();
+  const payUri = addPayUri.trim();
+  if (!alias && !payUri) return;
+  if (alias.length > ALIAS_MAX_LENGTH || payUri.length > PAY_URI_MAX_LENGTH) {
+    setError(`Alias must be <= ${ALIAS_MAX_LENGTH} and Pay URI/address must be <= ${PAY_URI_MAX_LENGTH} characters.`);
+    return;
+  }
   setAdding(true);
   setError('');
   try {
-    await userApi.postContact({ alias: addAlias.trim() || undefined, pay_uri: addPayUri.trim() || undefined }, opts);
+    await userApi.postContact({ alias: alias || undefined, pay_uri: payUri || undefined }, opts);
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/`(app)/me/settings/contacts/page.tsx around lines 95 - 108, handleAdd
currently relies only on input maxLength but still posts whatever state holds;
add a defensive submit-time validation inside the handleAdd function to check
addAlias.length <= ALIAS_MAX_LENGTH and addPayUri.length <= PAY_URI_MAX_LENGTH
before calling postContact. If either check fails, prevent submission (return
early) and surface a user-friendly error (e.g., set an error state or show a
toast) so invalid values are not sent to postContact; keep the checks aligned to
the existing ALIAS_MAX_LENGTH and PAY_URI_MAX_LENGTH constants and update any
existing error handling/state used for other form errors.

<Button type="submit" disabled={adding || (!addAlias.trim() && !addPayUri.trim())}>Add contact</Button>
</form>
<div className="space-y-2">
Expand Down