feat: add client-side GitHub username validation

Author: chavanGaneshDatta

app/customize/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState, type ReactElement } from 'react';
+import { validateGitHubUsername } from '@/lib/github';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
 import { ControlsPanel } from './components/ControlsPanel';
@@ -121,6 +122,12 @@ export default function CustomizePage(): ReactElement {
       setSvgState('idle');
       return;
     }
+    if (!validateGitHubUsername(trimmedUsername)) {
+      setSvgContent('');
+      setSvgState('error');
+      setErrorMessage("That doesn't look like a valid GitHub username");
+      return;
+    }
 
     setSvgState('loading');
     const controller = new AbortController();
@@ -192,7 +199,7 @@ export default function CustomizePage(): ReactElement {
       });
 
     return () => controller.abort();
-  }, [previewSrc, hasUsername]);
+  }, [previewSrc, hasUsername, trimmedUsername]);
 
   const exportSnippet = getExportSnippet(exportFormat, queryString);
 
@@ -395,6 +402,14 @@ export default function CustomizePage(): ReactElement {
                           Loading preview...
                         </div>
                       )}
+                      {svgState === 'error' &&
+                        errorMessage === "That doesn't look like a valid GitHub username" && (
+                          <div className="flex flex-col items-center justify-center gap-2 text-center py-8">
+                            <p className="text-sm font-semibold text-red-500 dark:text-red-400">
+                              {errorMessage}
+                            </p>
+                          </div>
+                        )}
                       {svgState === 'error' && errorMessage === 'GitHub user not found' && (
                         <div className="flex flex-col items-center justify-center gap-4 py-12 text-center">
                           <div className="flex h-16 w-16 items-center justify-center rounded-3xl border border-red-500/20 bg-red-500/10 shadow-inner">
@@ -422,16 +437,18 @@ export default function CustomizePage(): ReactElement {
                           </div>
                         </div>
                       )}
-                      {svgState === 'error' && errorMessage !== 'GitHub user not found' && (
-                        <div className="flex flex-col items-center justify-center gap-2 text-center py-8">
-                          <p className="text-sm font-semibold text-red-500 dark:text-red-400">
-                            Failed to load badge
-                          </p>
-                          <p className="text-xs text-gray-500 dark:text-white/45">
-                            The API may be unavailable. Please try again.
-                          </p>
-                        </div>
-                      )}
+                      {svgState === 'error' &&
+                        errorMessage !== 'GitHub user not found' &&
+                        errorMessage !== "That doesn't look like a valid GitHub username" && (
+                          <div className="flex flex-col items-center justify-center gap-2 text-center py-8">
+                            <p className="text-sm font-semibold text-red-500 dark:text-red-400">
+                              Failed to load badge
+                            </p>
+                            <p className="text-xs text-gray-500 dark:text-white/45">
+                              The API may be unavailable. Please try again.
+                            </p>
+                          </div>
+                        )}
                       {svgState === 'loaded' && svgContent && (
                         <motion.div
                           initial={{ opacity: 0, scale: 0.95 }}
@@ -446,8 +463,8 @@ export default function CustomizePage(): ReactElement {
                       )}
                     </div>
                   ) : (
-                    <div className="relative z-10 flex w-full max-w-xl flex-col items-center justify-center rounded-[1.25rem] border border-dashed border-black/10 bg-gray-100/80 backdrop-blur-md dark:border-white/10 dark:bg-white/[0.03] px-6 py-12 text-center">
-                      <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl border border-black/10 bg-gray-100/80 dark:border-white/10 dark:bg-white/[0.04] text-gray-500 dark:text-emerald-300/70">
+                    <div className="relative z-10 flex w-full max-w-xl flex-col items-center justify-center rounded-[1.25rem] border border-dashed border-black/10 bg-gray-100/80 backdrop-blur-md dark:border-white/10 dark:bg-white/3 px-6 py-12 text-center">
+                      <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl border border-black/10 bg-gray-100/80 dark:border-white/10 dark:bg-white/4 text-gray-500 dark:text-emerald-300/70">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           className="h-6 w-6"

lib/github.test.ts

@@ -1702,6 +1702,22 @@ describe('validateGitHubUsername', () => {
   it('returns false for a username with underscore', () => {
     expect(validateGitHubUsername('invalid_username')).toBe(false);
   });
+
+  it('returns false for empty string', () => {
+    expect(validateGitHubUsername('')).toBe(false);
+  });
+
+  it('returns false for leading hyphen', () => {
+    expect(validateGitHubUsername('-octocat')).toBe(false);
+  });
+
+  it('returns false for trailing hyphen', () => {
+    expect(validateGitHubUsername('octocat-')).toBe(false);
+  });
+
+  it('returns false for consecutive hyphens', () => {
+    expect(validateGitHubUsername('octo--cat')).toBe(false);
+  });
 });
 describe('cacheKey', () => {
   it('creates key without year', () => {