Allow custom clipboard codes

apps/backend/src/clipboard/clipboard.controller.ts

@@ -6,11 +6,38 @@ export class ClipboardController {
   constructor(private readonly clipboardService: ClipboardService) { }
 
   @Post('create')
-  async createClipboard(@Body() body: { password?: string }) {
+  async createClipboard(@Body() body: { password?: string; roomCode?: string }) {
+    const requestedRoomCode = body.roomCode?.trim().toUpperCase();
+
+    if (requestedRoomCode && !/^[A-Z0-9]{4,6}$/.test(requestedRoomCode)) {
+      throw new HttpException(
+        'Invalid room code. Must be 4-6 alphanumeric characters.',
+        HttpStatus.BAD_REQUEST,
+      );
+    }
+
     try {
-      const roomCode = await this.clipboardService.createClipboard(body.password);
+      const roomCode = requestedRoomCode
+        ? requestedRoomCode
+        : await this.clipboardService.createClipboard(body.password);
+
+      if (requestedRoomCode) {
+        const created = await this.clipboardService.createClipboardWithCode(
+          requestedRoomCode,
+          body.password,
+        );
+
+        if (!created) {
+          throw new HttpException('Room code already exists', HttpStatus.CONFLICT);
+        }
+      }
+
       return { roomCode };
     } catch (error) {
+      if (error instanceof HttpException) {
+        throw error;
+      }
+
       throw new HttpException('Failed to create clipboard', HttpStatus.INTERNAL_SERVER_ERROR);
     }
   }

apps/frontend/src/components/CreateClipboardCard.tsx

@@ -9,6 +9,8 @@ import { apiUrl } from '@/lib/constants';
 export default function CreateClipboardCard() {
   const [isLoading, setIsLoading] = useState(false);
   const [showPasswordModal, setShowPasswordModal] = useState(false);
+  const [customCode, setCustomCode] = useState('');
+  const [codeError, setCodeError] = useState('');
   const router = useRouter();
   const { addToast } = useToast();
 
@@ -24,12 +26,35 @@ export default function CreateClipboardCard() {
   const createClipboard = async (passwordToUse?: string) => {
     setIsLoading(true);
     try {
+      setCodeError('');
+      const roomCode = customCode.trim().toUpperCase();
+
+      if (roomCode) {
+        if (roomCode.length < 4 || roomCode.length > 6) {
+          setCodeError('Code must be between 4 and 6 characters.');
+          return;
+        }
+
+        if (!/^[A-Z0-9]+$/.test(roomCode)) {
+          setCodeError('Only letters and numbers are allowed.');
+          return;
+        }
+      }
+
+      const payload: Record<string, string> = {};
+      if (passwordToUse) {
+        payload.password = passwordToUse;
+      }
+      if (roomCode) {
+        payload.roomCode = roomCode;
+      }
+
       const response = await fetch(`${apiUrl}/clipboard/create`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: passwordToUse ? JSON.stringify({ password: passwordToUse }) : undefined,
+        body: Object.keys(payload).length ? JSON.stringify(payload) : undefined,
       });
 
       if (!response.ok) {
@@ -75,9 +100,34 @@ export default function CreateClipboardCard() {
           </div>
 
           <p className="text-text-secondary my-auto pl-1">
-            Start a new shared clipboard. A unique 4-character code will be generated for you.
+            Start a new shared clipboard. Choose your own 4-6 character code or leave it blank to get a random one.
           </p>
 
+          <div className="mt-2">
+            <label className="block text-sm font-medium text-text-secondary mb-2 pl-1">Custom code (optional)</label>
+            <input
+              type="text"
+              maxLength={6}
+              value={customCode}
+              onChange={(e) => {
+                const value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
+                setCustomCode(value);
+                if (codeError) setCodeError('');
+              }}
+              placeholder="e.g. CLIP4"
+              className="w-full px-4 py-3 rounded-lg bg-surface/50 border-2 border-surface-hover focus:border-primary focus:outline-none focus:ring-0 transition-colors duration-300 ease-in-out text-text-primary placeholder-text-secondary/50 font-mono"
+              aria-invalid={!!codeError}
+            />
+            {codeError && (
+              <p className="mt-2 text-sm text-error flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                {codeError}
+              </p>
+            )}
+          </div>
+
           <div className="flex mt-auto w-full">
             <button
               onClick={() => handleCreateClipboard(false)}