Merge pull request #167 from devOgazi/feat/add-input-sanitization

Feat/add input sanitization

Author: therealjhay

app/(merchant)/payments/page.tsx

@@ -18,6 +18,7 @@ import {
   DialogFooter
 } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { trimInput } from '@/lib/utils/sanitize';
 import { useNotify } from '@/lib/hooks/useNotify';
 
 interface PaymentLink {
@@ -76,7 +77,8 @@ export default function PaymentsPage() {
 
   const handleCreate = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!labelValue.trim()) {
+    const sanitizedLabel = trimInput(labelValue);
+    if (!sanitizedLabel) {
       setLabelError('Label is required');
       return;
     }

app/(merchant)/settings/page.tsx

@@ -10,6 +10,7 @@ import { Settings, User, Building2, Bell, Shield, LogOut } from 'lucide-react';
 import { useAuthStore } from '@/lib/store/authStore';
 import { useRouter } from 'next/navigation';
 import { useNotify } from '@/lib/hooks/useNotify';
+import { trimInput, normalizeEmail } from '@/lib/utils/sanitize';
 import { cn } from '@/lib/utils';
 
 const tabs = [
@@ -38,6 +39,19 @@ export default function SettingsPage() {
   const { user, logout } = useAuthStore();
   const notify = useNotify();
 
+  const [profileName, setProfileName] = useState(user?.name ?? '');
+  const [profileEmail, setProfileEmail] = useState(user?.email ?? '');
+  const [profilePhone, setProfilePhone] = useState('');
+
+  const [bizName, setBizName] = useState('Merchant Corp');
+  const [bizRegNumber, setBizRegNumber] = useState('');
+  const [bizBankName, setBizBankName] = useState('');
+  const [bizAccountNumber, setBizAccountNumber] = useState('');
+
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmNewPassword, setConfirmNewPassword] = useState('');
+
   const handleLogout = useCallback(() => {
     logout();
     notify.success('Logged out successfully');
@@ -115,20 +129,25 @@ export default function SettingsPage() {
                 <div className="grid gap-4 sm:grid-cols-2">
                   <div className="space-y-1.5">
                     <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Full Name</Label>
-                    <Input defaultValue={user?.name ?? ''} className="h-10 border-border rounded-xl bg-card text-sm" />
+                    <Input value={profileName} onChange={(e) => setProfileName(e.target.value)} className="h-10 border-border rounded-xl bg-card text-sm" />
                   </div>
                   <div className="space-y-1.5">
                     <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Email Address</Label>
-                    <Input defaultValue={user?.email ?? ''} type="email" className="h-10 border-border rounded-xl bg-card text-sm" />
+                    <Input value={profileEmail} onChange={(e) => setProfileEmail(e.target.value)} type="email" className="h-10 border-border rounded-xl bg-card text-sm" />
                   </div>
                 </div>
                 <div className="space-y-1.5">
                   <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Phone Number</Label>
-                  <Input placeholder="+234 800 000 0000" className="h-10 border-border rounded-xl bg-card text-sm" />
+                  <Input value={profilePhone} onChange={(e) => setProfilePhone(e.target.value)} placeholder="+234 800 000 0000" className="h-10 border-border rounded-xl bg-card text-sm" />
                 </div>
                 <Button
                   className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold rounded-xl h-10 px-6 text-sm scroll-mb-52"
                   onClick={() => {
+                    const sanitized = {
+                      name: trimInput(profileName),
+                      email: normalizeEmail(profileEmail),
+                      phone: trimInput(profilePhone),
+                    };
                     notify.success('Profile updated');
                   }}
                 >
@@ -147,24 +166,30 @@ export default function SettingsPage() {
                 <div className="grid gap-4 sm:grid-cols-2">
                   <div className="space-y-1.5">
                     <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Business Name</Label>
-                    <Input defaultValue="Merchant Corp" className="h-10 border-border rounded-xl bg-card text-sm" />
+                    <Input value={bizName} onChange={(e) => setBizName(e.target.value)} className="h-10 border-border rounded-xl bg-card text-sm" />
                   </div>
                   <div className="space-y-1.5">
                     <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Registration Number</Label>
-                    <Input placeholder="RC-1234567" className="h-10 border-border rounded-xl bg-card text-sm" />
+                    <Input value={bizRegNumber} onChange={(e) => setBizRegNumber(e.target.value)} placeholder="RC-1234567" className="h-10 border-border rounded-xl bg-card text-sm" />
                   </div>
                   <div className="space-y-1.5">
                     <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Bank Name</Label>
-                    <Input placeholder="e.g. GTBank" className="h-10 border-border rounded-xl bg-card text-sm" />
+                    <Input value={bizBankName} onChange={(e) => setBizBankName(e.target.value)} placeholder="e.g. GTBank" className="h-10 border-border rounded-xl bg-card text-sm" />
                   </div>
                   <div className="space-y-1.5">
                     <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Account Number</Label>
-                    <Input placeholder="0123456789" className="h-10 border-border rounded-xl bg-card text-sm" />
+                    <Input value={bizAccountNumber} onChange={(e) => setBizAccountNumber(e.target.value)} placeholder="0123456789" className="h-10 border-border rounded-xl bg-card text-sm" />
                   </div>
                 </div>
                 <Button
                   className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold rounded-xl h-10 px-6 text-sm scroll-mb-52"
                   onClick={() => {
+                    const sanitized = {
+                      name: trimInput(bizName),
+                      regNumber: trimInput(bizRegNumber),
+                      bankName: trimInput(bizBankName),
+                      accountNumber: trimInput(bizAccountNumber),
+                    };
                     notify.success('Business info saved');
                   }}
                 >
@@ -205,19 +230,24 @@ export default function SettingsPage() {
               <CardContent className="space-y-5">
                 <div className="space-y-1.5">
                   <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Current Password</Label>
-                  <Input type="password" placeholder="••••••••" className="h-10 border-border rounded-xl bg-card text-sm" />
+                  <Input value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} type="password" placeholder="••••••••" className="h-10 border-border rounded-xl bg-card text-sm" />
                 </div>
                 <div className="space-y-1.5">
                   <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">New Password</Label>
-                  <Input type="password" placeholder="••••••••" className="h-10 border-border rounded-xl bg-card text-sm" />
+                  <Input value={newPassword} onChange={(e) => setNewPassword(e.target.value)} type="password" placeholder="••••••••" className="h-10 border-border rounded-xl bg-card text-sm" />
                 </div>
                 <div className="space-y-1.5">
                   <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Confirm New Password</Label>
-                  <Input type="password" placeholder="••••••••" className="h-10 border-border rounded-xl bg-card text-sm" />
+                  <Input value={confirmNewPassword} onChange={(e) => setConfirmNewPassword(e.target.value)} type="password" placeholder="••••••••" className="h-10 border-border rounded-xl bg-card text-sm" />
                 </div>
                 <Button
                   className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold rounded-xl h-10 px-6 text-sm scroll-mb-52"
                   onClick={() => {
+                    const sanitized = {
+                      currentPassword: trimInput(currentPassword),
+                      newPassword: trimInput(newPassword),
+                      confirmNewPassword: trimInput(confirmNewPassword),
+                    };
                     notify.success('Password updated');
                   }}
                 >

app/(merchant)/transactions/page.tsx

@@ -13,6 +13,7 @@ import { CurrencyDisplay } from '@/components/shared/CurrencyDisplay';
 import { EmptyState } from '@/components/shared/EmptyState';
 import { mockTransactions } from '@/lib/mock/transactions';
 import { formatDate } from '@/lib/utils/format';
+import { sanitizeSearchQuery } from '@/lib/utils/sanitize';
 import { Search, Download, Filter, SearchX } from 'lucide-react';
 import { TransactionDetail } from '@/components/transactions/TransactionDetail';
 import { Transaction } from '@/lib/mock/transactions';
@@ -97,6 +98,7 @@ const TransactionCard = memo(function TransactionCard({ tx, onClick }: Transacti
 
 export default function TransactionsPage() {
   const [searchTerm, setSearchTerm] = useState('');
+  const sanitizedOnChange = (value: string) => setSearchTerm(sanitizeSearchQuery(value));
   const debouncedSearch = useDebounceValue(searchTerm, 300);
   const [filterCount] = useState(0);
   const [selectedTx, setSelectedTx] = useState<Transaction | null>(null);
@@ -131,7 +133,7 @@ export default function TransactionsPage() {
               placeholder="Search by hash or address..."
               className="w-full pl-9 bg-background/50 border-border/50 focus-visible:ring-ring"
               value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
+               onChange={(e) => sanitizedOnChange(e.target.value)}
             />
           </div>
           <div className="flex gap-2">

app/auth/login/page.tsx

@@ -11,6 +11,7 @@ import { useNotify } from '@/lib/hooks/useNotify';
 import dynamic from 'next/dynamic';
 
 import { loginSchema, LoginFormValues } from '@/lib/utils/validation';
+import { normalizeEmail } from '@/lib/utils/sanitize';
 import { useAuthStore } from '@/lib/store/authStore';
 import { useRateLimitStore } from '@/lib/store/rateLimitStore';
 import { Button } from '@/components/ui/button';
@@ -51,8 +52,9 @@ export default function LoginPage() {
 
   const onSubmit = useCallback(async (data: LoginFormValues) => {
     setIsLoading(true);
+    const sanitizedData = { ...data, email: normalizeEmail(data.email) };
     try {
-      const isMockAdmin = data.email.includes('admin');
+      const isMockAdmin = sanitizedData.email.includes('admin');
       const role = isMockAdmin ? 'admin' : 'merchant';
 
       let merchantId = 'GCCHHKNI7GRA5QWC7RCTT3OHO7SKAUMKQA6IBWEQEO2SXI3GF376UHDD';
@@ -73,7 +75,7 @@ export default function LoginPage() {
       const mockToken = 'mock_jwt_token_12345';
       const mockUser = {
         id: merchantId,
-        email: data.email,
+        email: sanitizedData.email,
         name: merchantName,
         role,
       };

app/auth/register/page.tsx

@@ -10,6 +10,7 @@ import { Loader2, Check } from 'lucide-react';
 import { useNotify } from '@/lib/hooks/useNotify';
 
 import { registerSchema, RegisterFormValues, passwordRequirements } from '@/lib/utils/validation';
+import { trimInput, normalizeEmail } from '@/lib/utils/sanitize';
 import { useWalletStore } from '@/lib/store/walletStore';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -55,12 +56,17 @@ export default function RegisterPage() {
 
   const onSubmit = async (data: RegisterFormValues) => {
     setIsLoading(true);
+    const sanitizedData = {
+      ...data,
+      businessName: trimInput(data.businessName),
+      email: normalizeEmail(data.email),
+    };
     try {
       try {
         const { apiClient } = await import('@/lib/api/axios');
         await apiClient.post('/api/merchants', {
           id: `merch_${Math.random().toString(36).substr(2, 9)}`,
-          name: data.businessName,
+          name: sanitizedData.businessName,
         });
       } catch {
         console.warn('Backend unavailable, falling back to mock registration for Vercel preview.');

lib/utils/sanitize.ts

@@ -0,0 +1,13 @@
+const SEARCH_QUERY_MAX_LENGTH = 100;
+
+export function trimInput(value: string): string {
+  return value.trim();
+}
+
+export function normalizeEmail(email: string): string {
+  return email.trim().toLowerCase();
+}
+
+export function sanitizeSearchQuery(query: string): string {
+  return query.trim().slice(0, SEARCH_QUERY_MAX_LENGTH);
+}