Fix #540 by validating file names

Author: misode

src/app/components/generator/FileCreation.tsx

@@ -16,16 +16,27 @@ export function FileCreation({ model, id, method, onClose }: Props) {
 	const { locale } = useLocale()
 	const { projects, project, updateFile } = useProject()
 	const [fileId, setFileId] = useState(id === 'pack_mcmeta' ? 'pack' : '')
+	const [error, setError] = useState<string>()
+
+	const changeFileId = (str: string) => {
+		setError(undefined)
+		setFileId(str)
+	}
 
 	const doSave = () => {
+		if (!fileId.match(/^([a-z0-9_.-]+:)?[a-z0-9/_.-]+$/)) {
+			setError('Invalid resource location')
+			return
+		}
 		Analytics.saveProjectFile(id, projects.length, project.files.length, method as any)
 		updateFile(id, undefined, { type: id, id: fileId, data: DataModel.unwrapLists(model.data) })
 		onClose()
 	}
 
 	return <Modal class="file-modal" onDismiss={onClose}>
 		<p>{locale('project.save_current_file')}</p>
-		<TextInput autofocus={id !== 'pack_mcmeta'} class="btn btn-input" value={fileId} onChange={setFileId} onEnter={doSave} onCancel={onClose} placeholder={locale('resource_location')} spellcheck={false} readOnly={id === 'pack_mcmeta'} />
+		<TextInput autofocus={id !== 'pack_mcmeta'} class="btn btn-input" value={fileId} onChange={changeFileId} onEnter={doSave} onCancel={onClose} placeholder={locale('resource_location')} spellcheck={false} readOnly={id === 'pack_mcmeta'} />
+		{error !== undefined && <span class="invalid">{error}</span>}
 		<Btn icon="file" label={locale('project.save')} onClick={doSave} />
 	</Modal>
 }

src/app/components/generator/FileRenaming.tsx

@@ -14,16 +14,27 @@ export function FileRenaming({ id, name, onClose }: Props) {
 	const { locale } = useLocale()
 	const { projects, project, updateFile } = useProject()
 	const [fileId, setFileId] = useState(name)
+	const [error, setError] = useState<string>()
+
+	const changeFileId = (str: string) => {
+		setError(undefined)
+		setFileId(str)
+	}
 
 	const doSave = () => {
+		if (!fileId.match(/^([a-z0-9_.-]+:)?[a-z0-9/_.-]+$/)) {
+			setError('Invalid resource location')
+			return
+		}
 		Analytics.renameProjectFile(id, projects.length, project.files.length, 'menu')
 		updateFile(id, name, { type: id, id: fileId })
 		onClose()
 	}
 
 	return <Modal class="file-modal" onDismiss={onClose}>
 		<p>{locale('project.rename_file')}</p>
-		<TextInput autofocus class="btn btn-input" value={fileId} onChange={setFileId} onEnter={doSave} placeholder={locale('resource_location')} spellcheck={false} />
+		<TextInput autofocus class="btn btn-input" value={fileId} onChange={changeFileId} onEnter={doSave} onCancel={onClose} placeholder={locale('resource_location')} spellcheck={false} />
+		{error !== undefined && <span class="invalid">{error}</span>}
 		<Btn icon="pencil" label={locale('project.rename')} onClick={doSave} />
 	</Modal>
 }

src/styles/global.css

@@ -1417,6 +1417,11 @@ main.has-project {
 	pointer-events: all;
 }
 
+.modal span.invalid {
+	color: var(--invalid-text);
+	font-size: 16px;
+}
+
 [data-modals] .tree {
 	pointer-events: none;
 }