Merge pull request #452 from Miablo/mirror-name-input-validation

feat: add input validation for mirror names

Author: Miablo

src/app/components/dialog/CreateMirrorDialog.tsx

@@ -8,9 +8,12 @@ import {
   TextInput,
 } from '@primer/react'
 import { Dialog } from '@primer/react/drafts'
+import { mirrorNameSchema } from 'server/repos/schema'
 
 import { useState } from 'react'
 
+const DEFAULT_REPO_NAME = 'repository-name'
+
 interface CreateMirrorDialogProps {
   orgLogin: string
   forkParentOwnerLogin: string
@@ -29,12 +32,19 @@ export const CreateMirrorDialog = ({
   createMirror,
 }: CreateMirrorDialogProps) => {
   // set to default value of 'repository-name' for display purposes
-  const [repoName, setRepoName] = useState('repository-name')
+  const [repoName, setRepoName] = useState(DEFAULT_REPO_NAME)
 
   if (!isOpen) {
     return null
   }
 
+  const hasUserInput = repoName !== DEFAULT_REPO_NAME && repoName !== ''
+  const validation = mirrorNameSchema.safeParse(repoName)
+  const validationError =
+    hasUserInput && !validation.success
+      ? validation.error.issues[0].message
+      : null
+
   return (
     <Dialog
       title="Create a new mirror"
@@ -44,22 +54,22 @@ export const CreateMirrorDialog = ({
           content: 'Cancel',
           onClick: () => {
             closeDialog()
-            setRepoName('repository-name')
+            setRepoName(DEFAULT_REPO_NAME)
           },
         },
         {
           content: 'Confirm',
           variant: 'primary',
           onClick: () => {
             createMirror({ repoName, branchName: repoName })
-            setRepoName('repository-name')
+            setRepoName(DEFAULT_REPO_NAME)
           },
-          disabled: repoName === 'repository-name' || repoName === '',
+          disabled: !hasUserInput || !validation.success,
         },
       ]}
       onClose={() => {
         closeDialog()
-        setRepoName('repository-name')
+        setRepoName(DEFAULT_REPO_NAME)
       }}
       width="large"
     >
@@ -71,17 +81,24 @@ export const CreateMirrorDialog = ({
             block
             placeholder="e.g. repository-name"
             maxLength={100}
+            validationStatus={validationError ? 'error' : undefined}
           />
-          <FormControl.Caption>
-            This is a private mirror of{' '}
-            <Link
-              href={`https://github.com/${forkParentOwnerLogin}/${forkParentName}`}
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              {forkParentOwnerLogin}/{forkParentName}
-            </Link>
-          </FormControl.Caption>
+          {validationError ? (
+            <FormControl.Validation variant="error">
+              {validationError}
+            </FormControl.Validation>
+          ) : (
+            <FormControl.Caption>
+              This is a private mirror of{' '}
+              <Link
+                href={`https://github.com/${forkParentOwnerLogin}/${forkParentName}`}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                {forkParentOwnerLogin}/{forkParentName}
+              </Link>
+            </FormControl.Caption>
+          )}
         </FormControl>
         <FormControl>
           <FormControl.Label>Mirror location</FormControl.Label>

src/app/components/dialog/EditMirrorDialog.tsx

@@ -8,6 +8,7 @@ import {
   TextInput,
 } from '@primer/react'
 import { Dialog } from '@primer/react/drafts'
+import { mirrorNameSchema } from 'server/repos/schema'
 
 import { useEffect, useState } from 'react'
 
@@ -47,6 +48,13 @@ export const EditMirrorDialog = ({
     return null
   }
 
+  const hasUserInput = newMirrorName !== mirrorName && newMirrorName !== ''
+  const validation = mirrorNameSchema.safeParse(newMirrorName)
+  const validationError =
+    hasUserInput && !validation.success
+      ? validation.error.issues[0].message
+      : null
+
   return (
     <Dialog
       title="Edit mirror"
@@ -70,7 +78,7 @@ export const EditMirrorDialog = ({
             })
             setNewMirrorName(mirrorName)
           },
-          disabled: newMirrorName === mirrorName || newMirrorName === '',
+          disabled: !hasUserInput || !validation.success,
         },
       ]}
       onClose={() => {
@@ -87,17 +95,24 @@ export const EditMirrorDialog = ({
             block
             placeholder={mirrorName}
             maxLength={100}
+            validationStatus={validationError ? 'error' : undefined}
           />
-          <FormControl.Caption>
-            This is a private mirror of{' '}
-            <Link
-              href={`https://github.com/${forkParentOwnerLogin}/${forkParentName}`}
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              {forkParentOwnerLogin}/{forkParentName}
-            </Link>
-          </FormControl.Caption>
+          {validationError ? (
+            <FormControl.Validation variant="error">
+              {validationError}
+            </FormControl.Validation>
+          ) : (
+            <FormControl.Caption>
+              This is a private mirror of{' '}
+              <Link
+                href={`https://github.com/${forkParentOwnerLogin}/${forkParentName}`}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                {forkParentOwnerLogin}/{forkParentName}
+              </Link>
+            </FormControl.Caption>
+          )}
         </FormControl>
         <FormControl>
           <FormControl.Label>Mirror location</FormControl.Label>

src/server/repos/schema.ts

@@ -1,11 +1,26 @@
 import { z } from 'zod'
 
+export const mirrorNameSchema = z
+  .string()
+  .min(1, 'Mirror name is required')
+  .max(100, 'Mirror name cannot exceed 100 characters')
+  .regex(
+    /^[A-Za-z0-9._-]+$/,
+    'Only letters, numbers, hyphens, underscores, and periods are allowed',
+  )
+  .refine((name) => name !== '.' && name !== '..', {
+    message: 'Mirror name cannot be "." or ".."',
+  })
+  .refine((name) => !name.toLowerCase().endsWith('.git'), {
+    message: 'Mirror name cannot end with ".git"',
+  })
+
 export const CreateMirrorSchema = z.object({
   orgId: z.string(),
   forkRepoOwner: z.string(),
   forkRepoName: z.string(),
   forkId: z.string(),
-  newRepoName: z.string().max(100),
+  newRepoName: mirrorNameSchema,
   newBranchName: z.string(),
 })
 
@@ -17,7 +32,7 @@ export const ListMirrorsSchema = z.object({
 export const EditMirrorSchema = z.object({
   orgId: z.string(),
   mirrorName: z.string(),
-  newMirrorName: z.string().max(100),
+  newMirrorName: mirrorNameSchema,
 })
 
 export const DeleteMirrorSchema = z.object({

test/server/repos.test.ts

@@ -354,7 +354,7 @@ describe('Repos router', () => {
       })
       .catch((error) => {
         expect(error.message).toMatch(
-          /String must contain at most 100 character\(s\)/,
+          /Mirror name cannot exceed 100 characters/,
         )
       })
   })